/* ==================================================
   Dr. Luis Arroyo Garza — capa de marca
   --------------------------------------------------
   Se carga DESPUÉS de style.css / coloring.css / scheme-01.css
   y sobrescribe únicamente los tokens del template.
   No editar style.css: todo el branding vive aquí.
   ================================================== */

/* --------------------------------------------------
   1. Paleta institucional
   -------------------------------------------------- */
:root {
  --brand-cafe-iris: #541500; /* Café Iris          */
  --brand-terracota: #994722; /* Terracota Clínico  */
  --brand-beige: #ded2c4; /* Beige Consultorio  */
  --brand-azul-retina: #4159e6; /* Azul Retina        */
  --brand-azul-optico: #72b2f0; /* Azul Óptico        */
  --brand-cian-foco: #8eefe1; /* Cian Foco          */
  --brand-negro: #101010; /* Negro Oftalmológico*/
  --brand-blanco: #ffffff; /* Blanco Clínico     */
  --brand-luz: #cafff6; /* Luz Quirúrgica     */

  /* tintes derivados para fondos amplios (no son colores nuevos,
     son diluciones del Azul Óptico y del Beige sobre Blanco Clínico) */
  /* variante profunda del Azul Óptico: mismo tono (210deg), bajado de
     luminosidad para poder llevar texto blanco (6.7:1) */
  --brand-optico-deep: #125ca5;
  --brand-optico-05: #f7fafe;
  --brand-optico-12: #eff6fd;
  --brand-optico-22: #e4effc;
  --brand-optico-40: #cfe1f5;
  --brand-beige-15: #f6f1eb;
  --brand-beige-30: #efe7de;
}

/* --------------------------------------------------
   2. Tokens del template
   style.css declara sus variables en el selector universal (*),
   por eso la sobrescritura también usa (*): misma especificidad,
   gana el archivo que se carga al final.
   -------------------------------------------------- */
* {
  /* tipografía ------------------------------------ */
  --body-font:
    "Adrianna Extended", "Archivo", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --heading-font:
    "Acumin Pro Wide", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --alt-font-1: var(--heading-font);
  --main-font: var(--heading-font);
  --body-font-weight: 400;
  --heading-font-weight: 700;

  /* color de texto -------------------------------- */
  --heading-font-color: var(--brand-cafe-iris);
  --heading-font-color-bg-dark: var(--brand-blanco);
  --body-font-color: #63584f; /* gris cálido derivado del Café Iris */
  --body-font-color-bg-dark: rgba(255, 255, 255, 0.86);

  /* escala tipográfica: las familias wide/extended ocupan más
     ancho que Urbanist, por eso se ajustan titulares y tracking */
  --h1-font-size: 58px;
  --h1-letter-spacing: -0.005em;
  --h2-font-size: 44px;
  --h2-letter-spacing: -0.005em;
  --h3-font-size: 26px;
  --h3-font-weight: 700;
  --h4-font-size: 19px;
  --h4-font-weight: 700;
  --h5-font-weight: 700;
  --h6-font-weight: 700;
  --heading-text-transform: none;

  /* fondos ----------------------------------------
     Los bloques amplios van en Azul Óptico; los tintes claros son
     diluciones del mismo color. */
  --bg-dark-1: var(--brand-optico-deep);
  --bg-dark-1-rgb: 18, 92, 165;
  --bg-dark-2: var(--brand-azul-optico);
  --bg-dark-3: var(--brand-negro);
  --bg-light: var(--brand-optico-12);
  --bg-color-even: var(--brand-optico-22);
  --bg-color-odd: var(--brand-optico-05);
  --bg-grey: var(--brand-optico-22);

  /* bordes ---------------------------------------- */
  --border-color: var(--brand-optico-40);
  --border-default: solid 1px rgba(114, 178, 240, 1);

  /* menú y botones -------------------------------- */
  --mainmenu-font: var(--heading-font);
  --mainmenu-font-weight: 700;
  --btn-font-family: var(--heading-font);
  --btn-font-weight: 700;
  --btn-color: var(--brand-blanco);
  --btn-hover-bg: var(--brand-optico-deep);
}

/* --------------------------------------------------
   3. Ancho tipográfico
   Acumin Pro Wide y Adrianna Extended son familias
   ensanchadas. Archivo (sustituto web) expone el eje
   variable wdth, que se controla con font-stretch.
   -------------------------------------------------- */
body {
  font-stretch: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
#mainmenu a,
.btn-main,
.btn-line,
.subtitle,
.de_count h3,
.de-step-title,
blockquote {
  font-stretch: 112%;
}

h1,
.h1,
h2,
.h2 {
  font-stretch: 116%;
}

/* el template no aplica --heading-font a todos los niveles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
}

/* --------------------------------------------------
   4. Ajustes puntuales de marca
   -------------------------------------------------- */

/* etiqueta de sección: Terracota para no competir con los CTA azules */
.subtitle {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--brand-terracota);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
}

.text-light .subtitle,
.dark-scheme .subtitle {
  color: var(--brand-cian-foco);
}

/* El template pinta TODOS los enlaces con el color de texto base
   (a, a:hover -> --body-font-color) porque muchas tarjetas completas son
   enlaces. Se respeta ese criterio y sólo se marca el hover. */
footer a:hover,
.text-light a:hover,
.dark-scheme a:hover {
  color: var(--brand-cian-foco);
}

/* selección de texto */
::selection {
  background: var(--brand-cian-foco);
  color: var(--brand-cafe-iris);
}

::-moz-selection {
  background: var(--brand-cian-foco);
  color: var(--brand-cafe-iris);
}

/* preloader sobre Blanco Clínico */
#de-loader {
  background: var(--brand-blanco);
}

/* Footer sobre la variante profunda del Azul Óptico (hereda --bg-dark-1):
   texto blanco, detalles (logo, íconos, hover) en Azul Óptico. */
footer p,
footer a,
footer li,
footer h5,
.de_light footer h5 {
  color: var(--brand-blanco);
}

footer h5,
.de_light footer h5 {
  font-family: var(--heading-font);
  font-stretch: 112%;
  letter-spacing: 0.01em;
}

footer .id-color,
footer .social-icons i {
  color: var(--brand-azul-optico) !important;
}

footer .subfooter {
  border-top: solid 1px rgba(255, 255, 255, 0.2);
}

footer a:hover,
footer .social-icons i:hover {
  color: var(--brand-azul-optico) !important;
}

/* Botón principal: superficie Azul Óptico con texto blanco (petición del
   cliente). Aviso técnico: blanco sobre #72B2F0 da 2.25:1, por debajo del
   mínimo AA de 4.5:1 — el texto se ve claro pero de bajo contraste. Al pasar
   el cursor cambia a la variante profunda, donde el blanco sí cumple. */
a.btn-main:not(.btn-line),
.btn-main:not(.btn-line) {
  background: var(--brand-azul-optico);
  color: var(--brand-blanco);
}

a.btn-main:hover,
.btn-main:hover,
a.btn-main.btn-line:hover {
  background: var(--brand-optico-deep);
  color: var(--brand-blanco);
}

/* sobre fondos oscuros el CTA se invierte a Cian Foco */
.text-light .btn-main.btn-light,
.btn-main.btn-light {
  background: var(--brand-cian-foco);
  color: var(--brand-cafe-iris);
}

/* tarjetas / cajas sobre fondo claro */
.bg-light {
  background: var(--brand-optico-12) !important;
}

/* --------------------------------------------------
   5. Equilibrio cálido / frío
   El template tiñe casi todo con --primary-color. Para que el
   Azul Retina conserve fuerza como color de acción, las bandas
   amplias pasan a la familia cálida (Café Iris / Beige).
   -------------------------------------------------- */

/* cabeceras de página interior en Azul Óptico diluido */
#subheader.bg-color-op-1,
section.bg-color-op-1 {
  background: var(--brand-optico-12) !important;
}

/* Velo de las secciones parallax a pantalla completa: degradado en
   tonalidades de azul, del azul profundo abajo al Azul Óptico arriba.
   Las opacidades están calibradas para que el texto blanco se sostenga
   sobre la fotografía sin apagar la imagen. */
.jarallax > .gradient-edge-bottom.color.h-100,
section.relative > .gradient-edge-bottom.color.h-100 {
  background: linear-gradient(
    0deg,
    rgba(18, 92, 165, 0.82) 0%,
    rgba(28, 108, 190, 0.55) 45%,
    rgba(114, 178, 240, 0.24) 100%
  ) !important;
}

/* Bloque de color detrás del retrato (About): el mismo Azul Óptico
   diluido que usan las cabeceras de página interior, para que sea
   apenas perceptible. */
.bg-color-op-3 {
  background: var(--brand-optico-12) !important;
}

/* Degradados suaves de transición entre secciones claras.
   Ojo con la dirección: en el template el de arriba va a 180deg (opaco en el
   borde superior) y el de abajo a 0deg (opaco en el inferior). Igualar ambos
   invierte el de arriba y deja un corte duro a un tercio de la sección. */
.gradient-edge-top.color.op-3 {
  background: linear-gradient(
    180deg,
    var(--brand-azul-optico) 0%,
    rgba(114, 178, 240, 0) 100%
  ) !important;
}

.gradient-edge-bottom.color.op-3 {
  background: linear-gradient(
    0deg,
    var(--brand-azul-optico) 0%,
    rgba(114, 178, 240, 0) 100%
  ) !important;
}

/* --------------------------------------------------
   7. Reparto azul / café
   El azul ocupa las superficies; la familia café queda como tinta:
   titulares en Café Iris, etiquetas y acentos en Terracota.
   Azul Retina no se usa en el sitio.
   -------------------------------------------------- */

/* Acentos (checks, íconos, cifras). Sobre blanco el Azul Óptico sólo da
   2.25:1, así que el acento va en Terracota, que es el color de la
   familia café con contraste suficiente (6.4:1). */
.id-color,
h1.id-color,
h2.id-color,
h3.id-color,
h4.id-color,
h5.id-color,
h6.id-color,
.text-light .id-color,
.dark-scheme .id-color,
.bg-white .id-color,
.bg-white.id-color,
.bg-light .id-color,
.de-step-icon.bg-white.id-color,
.de-step-icon.bg-white.id-color i {
  color: var(--brand-azul-optico) !important;
}

/* Bloques institucionales (testimonios) sobre la variante profunda:
   texto blanco — que es lo que el template ya aplica con .text-light —
   y detalles en Azul Óptico. */
.bg-dark-1.text-light .subtitle,
.bg-dark-1.text-light .uptitle,
.bg-dark-1 .subtitle,
.bg-dark-1 .id-color {
  color: white !important;
}

/* ...salvo lo que caiga dentro de una tarjeta blanca (la comilla del
   testimonio), donde el Azul Óptico se lavaría */
.bg-dark-1 .bg-white .id-color {
  color: var(--brand-terracota) !important;
}

/* Botones y flechas dentro del bloque: pastilla blanca con tinta azul
   profunda. Un botón Azul Óptico sobre este fondo perdería contraste. */
.bg-dark-1 a.btn-main:not(.btn-line),
.bg-dark-1 .btn-main:not(.btn-line),
.bg-dark-1 .btn-main.btn-line {
  background: var(--brand-blanco) !important;
  color: var(--brand-optico-deep) !important;
}

.bg-dark-1 a.btn-main:hover,
.bg-dark-1 .btn-main:hover {
  background: var(--brand-azul-optico) !important;
  color: var(--brand-optico-deep) !important;
}

.bg-dark-1 .btn-main.btn-line i,
.bg-dark-1 .owl-arrow span i {
  color: var(--brand-optico-deep) !important;
}

/* Banner "Agenda tu consulta": Terracota Clínico. Es el único bloque
   cálido del sitio, así que corta la secuencia de azules y destaca.
   El texto blanco del template cumple aquí (6.8:1). */
section.bg-color.text-light {
  background: var(--brand-terracota) !important;
}

section.bg-color.text-light .btn-line,
section.bg-color.text-light a.btn-line {
  color: var(--brand-blanco);
  border-color: rgba(255, 255, 255, 0.6);
}

section.bg-color.text-light a.btn-line:hover {
  color: var(--brand-terracota);
  background: var(--brand-blanco);
  border-color: var(--brand-blanco);
}

/* Piezas pequeñas con glifo blanco encima (círculo de la flecha en las
   tarjetas, badge de fecha del blog, back-to-top): variante profunda. */
.circle.bg-color,
.bg-color.text-white,
#back-to-top {
  background: var(--brand-optico-deep) !important;
}

/* Flechas del carrusel y pestaña activa del FAQ: el template las rellena
   con el color primario y pone el glifo en blanco. Sobre Azul Óptico el
   blanco no alcanza contraste, así que la tinta pasa a Café Iris. */
.btn-main.btn-line i.fa-chevron-left,
.btn-main.btn-line i.fa-chevron-right,
.owl-arrow span i {
  color: var(--brand-cafe-iris) !important;
}

/* pestaña activa del FAQ: tinta blanca */
.d-tab-nav li.active-tab {
  color: var(--brand-blanco) !important;
}

/* --------------------------------------------------
   6. Tipografía original (cuando se licencie para web)
   Al contratar Acumin Pro Wide y Adrianna Extended, coloca los
   .woff2 en /fonts/brand/ y descomenta este bloque: los nombres
   ya encabezan el font-stack, así que sustituirán a Archivo sin
   tocar ninguna otra regla. Recuerda quitar entonces el <link>
   de Google Fonts en index.html.
   --------------------------------------------------
@font-face {
  font-family: "Acumin Pro Wide";
  src: url("/fonts/brand/AcuminProWide-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Adrianna Extended";
  src: url("/fonts/brand/AdriannaExtended-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Adrianna Extended";
  src: url("/fonts/brand/AdriannaExtended-Demibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Adrianna Extended";
  src: url("/fonts/brand/AdriannaExtended-Thin.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
-------------------------------------------------- */