/* ==========================================================================
   Dr. Jairo Sánchez | Cirugía oftalmológica especializada
   Tokens y valores base extraídos de Figma (Proposal OB Oftavision › LP Dr. Jairo)
   Mesa de trabajo: 1183px de ancho (desktop) · alto 7,545px
   --------------------------------------------------------------------------
   Nota: los valores decimales (62.7px, 52.05px, 22.72px…) vienen tal cual del
   diseño; parecen escalas fluidas (clamp) congeladas a 1183px. Para pixel
   perfect en desktop úsalos exactos; para responsive, conviértelos a clamp().
   ========================================================================== */

/* Fuentes: Montserrat 600 (títulos, botones, eyebrows) · Open Sans 400/600/700 (texto)
   Iconos: Font Awesome 6 Free (solid 900) y Font Awesome 6 Brands (WhatsApp) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Open+Sans:wght@400;600;700&display=swap");

:root {
  /* ---------- COLORES ---------- */
  /* Marca */
  --c-primary: #005293;            /* estilo "DrJai Azul": botones, links, eyebrows, iconos */
  --c-primary-rgb: 0, 82, 147;
  --c-navy: #06375c;               /* secciones oscuras (Proceso, Precio) y footer */
  --c-navy-card: #07375b;          /* tarjeta de precio */
  --c-hero-overlay: rgba(23, 62, 99, 0.5);   /* #173E63 al 50% sobre la foto del hero */

  /* Texto */
  --c-heading: #17313d;            /* títulos, nav, labels, texto de listas */
  --c-body: #5c6f76;               /* párrafos y descripciones */
  --c-muted: #637276;              /* estilo "DrJai Gris" (se usa al 35% en bordes de inputs) */
  --c-placeholder: #757575;
  --c-checkbox-border: #767676;

  /* Superficies */
  --c-white: #ffffff;
  --c-surface: #f5f5f5;            /* fondos de sección alternos, cajas, notas */

  /* Transparencias de marca (se repiten mucho) */
  --c-primary-8:  rgba(var(--c-primary-rgb), 0.08);  /* fondo caja de icono, borde header */
  --c-primary-10: rgba(var(--c-primary-rgb), 0.10);  /* borde de cards, burbuja check */
  --c-primary-14: rgba(var(--c-primary-rgb), 0.14);  /* divisores, bordes de sección/form/FAQ */
  --c-input-border: rgba(99, 114, 118, 0.35);

  /* Blancos translúcidos (sobre fondos oscuros) */
  --c-white-6:  rgba(255, 255, 255, 0.06);   /* fondo card de paso */
  --c-white-8:  rgba(255, 255, 255, 0.08);   /* fondo botón ghost */
  --c-white-9:  rgba(255, 255, 255, 0.09);   /* fondo chip */
  --c-white-10: rgba(255, 255, 255, 0.10);   /* burbuja check / borde footer */
  --c-white-14: rgba(255, 255, 255, 0.14);   /* borde card de paso */
  --c-white-18: rgba(255, 255, 255, 0.18);   /* borde chip */
  --c-white-62: rgba(255, 255, 255, 0.62);   /* borde botón ghost, número de paso */
  --c-white-72: rgba(255, 255, 255, 0.72);   /* eyebrow del hero */
  --c-white-78: rgba(255, 255, 255, 0.78);   /* links y texto del footer */
  --c-white-86: rgba(255, 255, 255, 0.86);   /* párrafo del hero */
  --c-white-90: rgba(255, 255, 255, 0.90);   /* texto chip */
  --c-header-bg: rgba(255, 255, 255, 0.92);

  /* Gradientes */
  --g-navy: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), var(--c-navy);
  --g-form-section: radial-gradient(circle, rgba(var(--c-primary-rgb), 0.09) 0%, rgba(var(--c-primary-rgb), 0) 70%), var(--c-white);

  /* ---------- TIPOGRAFÍA ---------- */
  --ff-heading: "Montserrat", system-ui, sans-serif;
  --ff-body: "Open Sans", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* tamaño / interlineado / tracking */
  --fs-h1: 62.7px;     --lh-h1: 60.19px;   --ls-h1: -3.45px;   /* hero */
  --fs-h2: 52.05px;    --lh-h2: 56.22px;   --ls-h2: -2.08px;   /* títulos de sección y precio */
  --fs-card-lg: 25px;  --lh-card-lg: 22.4px;                    /* "Subespecialidad en retina y vítreo" */
  --fs-h3: 22.72px;    --lh-h3: 28.4px;    --ls-h3: -0.45px;   /* títulos de card; FAQ usa ls 0 */
  --fs-lead-xl: 20.09px; --lh-lead-xl: 34.16px;                 /* texto bajo logos */
  --fs-lead-card: 20px;  --lh-lead-card: 24.48px;               /* descripción card tecnología */
  --fs-lead: 17.28px;  --lh-lead: 29.38px;                      /* intros de sección */
  --fs-body: 16px;     --lh-body: 27.2px;                       /* texto base (lh 1.7) */
  --fs-hero-p: 16px;   --lh-hero-p: 25.92px;
  --fs-nav: 14.4px;    --lh-nav: 24.48px;
  --fs-btn-sm: 14.08px; --lh-btn-sm: 23.94px;                   /* botón del header */
  --fs-note: 13.76px;  --lh-note: 23.39px;                      /* nota de precio */
  --fs-helper: 13.6px; --lh-helper: 23.12px;                    /* textos bajo el form */
  --fs-card-link: 13.33px; --lh-card-link: 20px;                /* "¿Me atenderá…?" */
  --fs-chip: 13.12px;  --lh-chip: 22.3px;
  --fs-eyebrow: 12.48px; --lh-eyebrow: 21.22px; --ls-eyebrow: 1.5px;
  --fs-eyebrow-hero: 12.32px; --lh-eyebrow-hero: 20.94px; --ls-eyebrow-hero: 1.72px; /* hero y "Proceso" */
  --fs-check: 12.16px; --lh-check: 20.67px;
  --fs-footer-title: 16px; --lh-footer-title: 17.28px; --ls-footer-title: -0.64px;
  --fs-icon: 20px;
  --fs-icon-wa: 27.2px;

  /* ---------- LAYOUT Y ESPACIADO ---------- */
  --page-width: 1183px;
  --container: 1041.03px;          /* ancho de contenido en todas las secciones */
  --gutter: 70.98px;               /* (1183 − 1041) / 2; también gap de grids a 2 columnas */
  --measure-heading: 760px;        /* max-width de bloques de título */
  --hero-content: 740px;           /* 720px de texto + 20px de padding derecho */

  --section-py: 50px;              /* padding vertical estándar de sección */
  --hero-pt: 150px;                /* incluye el header superpuesto */
  --hero-pb: 72px;
  --hero-h: 725.98px;              /* min-height 621.92px */
  --footer-pt: 66px;

  --space-7: 7px;      /* padding-top de párrafos bajo el título */
  --space-11: 11px;    /* gap de listas con check */
  --space-12: 12px;    /* gap de botones del hero / padding-top de campos */
  --space-14: 14px;    /* gap de grid de tecnología */
  --space-16: 16px;    /* gap de grids de 4 cols; margen del link de card */
  --space-17: 17px;    /* eyebrow → H2 */
  --space-24: 24px;    /* margen de la nota destacada */
  --space-26: 26px;    /* gap del header; padding-top de la fila de chips */
  --space-28: 28px;    /* padding-top de CTAs del hero; padding card de paso */
  --space-30: 30px;    /* padding de card; gap de la card de precio */
  --space-34: 34px;    /* gap de columnas del footer */
  --space-56: 56px;    /* título → grid de cards */

  /* ---------- RADIOS ---------- */
  --r-pill: 999px;
  --r-xl: 28px;        /* cards, imagen "Sobre mí", form, card de precio */
  --r-lg: 24px;        /* imagen pequeña del form */
  --r-md: 14px;        /* cajas de tecnología, caja de icono */
  --r-sm: 11px;        /* inputs, select, textarea */
  --r-checkbox: 2px;

  /* ---------- SOMBRAS ---------- */
  --sh-header: 0 10px 30px rgba(20, 51, 68, 0.07);
  --sh-card: 0 18px 48px rgba(14, 49, 70, 0.08);
  --sh-elevated: 0 24px 70px rgba(20, 51, 68, 0.12);    /* imagen "Sobre mí" y form */
  --sh-btn-primary: 0 12px 25px rgba(var(--c-primary-rgb), 0.2);
  --sh-btn-white-hero: 0 16px 34px rgba(0, 0, 0, 0.2);
  --sh-whatsapp: 0 0 0 5.18px rgba(var(--c-primary-rgb), 0.125), 0 12px 28px rgba(var(--c-primary-rgb), 0.28);

  /* ---------- BORDES ---------- */
  --b-hairline: 1px solid var(--c-primary-14);
  --b-card: 1px solid var(--c-primary-10);
  --b-input: 1px solid var(--c-input-border);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-body);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--ff-body);
}
h1, h2, h3, .h3 { font-family: var(--ff-heading); font-weight: var(--fw-semibold); color: var(--c-heading); margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
p { margin: 0; }

.container { width: var(--container); margin-inline: auto; }
.section { padding-block: var(--section-py); }
.section--surface { background: var(--c-surface); }
.section--navy { background: var(--g-navy); color: var(--c-white); }
.section--navy h2, .section--navy h3 { color: var(--c-white); }
.section-head { max-width: var(--measure-heading); }
.section-head h2 { padding-top: var(--space-17); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-body); }

.eyebrow {
  font: var(--fw-semibold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--ff-heading);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-primary);
}
.eyebrow--hero { font-size: var(--fs-eyebrow-hero); line-height: var(--lh-eyebrow-hero); letter-spacing: var(--ls-eyebrow-hero); color: var(--c-white-72); }
.section--navy .eyebrow { font-size: var(--fs-eyebrow-hero); line-height: var(--lh-eyebrow-hero); letter-spacing: var(--ls-eyebrow-hero); color: var(--c-white); }

/* ==========================================================================
   HEADER (fijo, superpuesto al hero)
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-block: 20px;
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-primary-8);
  box-shadow: var(--sh-header);
}
.header__inner { width: var(--container); min-height: 78px; margin-inline: auto; display: flex; align-items: center; gap: var(--space-26); }
.header__logo { width: 122px; height: 84px; }  /* logo vectorial en #005293 */
.nav { display: flex; gap: 23px; margin-left: auto; }
.nav a { font: var(--fw-regular) var(--fs-nav)/var(--lh-nav) var(--ff-body); color: var(--c-heading); text-decoration: none; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 22px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--ff-heading);
  text-decoration: none; cursor: pointer;
}
.btn--sm { min-height: 44px; padding: 10px 17px; font-size: var(--fs-btn-sm); line-height: var(--lh-btn-sm); } /* header */
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); box-shadow: var(--sh-btn-primary); }
.btn--white   { background: var(--c-white); border-color: var(--c-white); color: var(--c-primary); box-shadow: var(--sh-btn-primary); }
.hero .btn--white { box-shadow: var(--sh-btn-white-hero); }
.btn--ghost   { background: var(--c-white-8); border-color: var(--c-white-62); color: var(--c-white); }
.btn--block   { width: 100%; }

.whatsapp-float {
  position: fixed; right: 26px; bottom: 26px;
  width: 58px; height: 58px; border-radius: 29px;
  display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-white);
  font-size: var(--fs-icon-wa); box-shadow: var(--sh-whatsapp);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  min-height: 621.92px; height: var(--hero-h);
  padding: var(--hero-pt) 0 var(--hero-pb);
  background: linear-gradient(var(--c-hero-overlay), var(--c-hero-overlay)), url("DSC09864.png") center / cover;
  color: var(--c-white);
}
.hero__content { width: var(--hero-content); max-width: 760px; padding-right: 20px; }
.hero h1 { width: 720px; color: var(--c-white); }
.hero p  { width: 650px; font-size: var(--fs-hero-p); line-height: var(--lh-hero-p); color: var(--c-white-86); }
.hero__ctas  { display: flex; gap: var(--space-12); padding-top: var(--space-28); }
.hero__chips { display: flex; gap: 10px; padding-top: var(--space-26); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--c-white-18); border-radius: var(--r-pill);
  background: var(--c-white-9);
  font-size: var(--fs-chip); line-height: var(--lh-chip); color: var(--c-white-90);
}

/* ==========================================================================
   TECNOLOGÍA Y RESPALDO
   ========================================================================== */
.tech { background: var(--c-white); border-block: var(--b-hairline); }
.tech__grid { display: grid; gap: var(--space-14); padding-top: 12.48px; }
.tech__box { padding: 18px; border-radius: var(--r-md); background: var(--c-surface); }
.tech__box--logos { height: 104px; }
.tech__box--logos p { padding-top: var(--space-7); text-align: center; font-size: var(--fs-lead-xl); line-height: var(--lh-lead-xl); }
.tech__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); }
.tech__title { font: var(--fw-semibold) var(--fs-card-lg)/var(--lh-card-lg) var(--ff-heading); color: var(--c-heading); }
.tech__desc  { padding-top: var(--space-7); font-size: var(--fs-lead-card); line-height: var(--lh-lead-card); }

/* ==========================================================================
   CARDS (Criterio médico · Lentes · Especialidades)
   ========================================================================== */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); margin-top: var(--space-56); }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.card {
  display: flex; flex-direction: column;
  padding: var(--space-30);
  background: var(--c-white);
  border: var(--b-card); border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}
.card--featured { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.card--featured h3, .card--featured .eyebrow { color: var(--c-white); }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-primary-8); color: var(--c-primary); font-size: var(--fs-icon);
}
.card__footer { margin-top: auto; padding-top: 15px; border-top: var(--b-hairline); }
.card__footer a { font: var(--fw-semibold) var(--fs-card-link)/var(--lh-card-link) var(--ff-body); color: var(--c-primary); text-decoration: none; }
.card__link { padding-top: var(--space-16); font-weight: var(--fw-semibold); color: var(--c-primary); } /* Especialidades */

.note {
  margin-top: var(--space-24); padding: 18px 20px;
  background: var(--c-surface); border-left: 3px solid var(--c-primary);
}

/* ==========================================================================
   SOBRE EL DR. JAIRO
   ========================================================================== */
.about { display: grid; grid-template-columns: 412px 1fr; gap: var(--gutter); }
.about__media { height: 513px; border-radius: var(--r-xl); overflow: hidden; background: var(--c-surface); box-shadow: var(--sh-elevated); }
.check-list { display: grid; row-gap: var(--space-11); padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 29px; color: var(--c-heading); }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--c-primary-10); color: var(--c-primary);
  font: var(--fw-bold) var(--fs-check)/var(--lh-check) var(--ff-body);
}
.section--navy .check-list li { color: var(--c-white); }
.section--navy .check-list li::before { background: var(--c-white-10); color: var(--c-white); }

/* ==========================================================================
   PROCESO (4 pasos, fondo navy)
   ========================================================================== */
.step {
  min-height: 290px; padding: var(--space-28);
  border: 1px solid var(--c-white-14); border-radius: var(--r-xl);
  background: var(--c-white-6);
}
.step__num { font: var(--fw-semibold) var(--fs-eyebrow)/var(--fs-eyebrow) var(--ff-heading); letter-spacing: var(--ls-eyebrow); color: var(--c-white-62); }
.step p { padding-bottom: var(--space-16); color: var(--c-white); }

/* ==========================================================================
   PRECIO
   ========================================================================== */
.pricing { background: var(--c-navy); }
.pricing__card {
  width: var(--container); min-height: 427.5px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30);
  padding: 54px;  /* inferido de la posición del contenido */
  border-radius: var(--r-xl); background: var(--c-navy-card); box-shadow: var(--sh-card);
  color: var(--c-white);
}
.pricing__price { font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--ff-heading); letter-spacing: var(--ls-h2); color: var(--c-white); }
.pricing__note  { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-white); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; grid-template-columns: 1fr 606.3px; gap: var(--gutter); }
.faq__list { border-top: var(--b-hairline); }
.faq__item { border-bottom: var(--b-hairline); }
.faq__q {
  width: 100%; min-height: 72px; padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--ff-heading); color: var(--c-heading);
}
.faq__icon { font-size: var(--fs-h3); color: var(--c-primary); transition: transform .2s; }
.faq__item.is-open .faq__icon { transform: rotate(-45deg); }  /* "+" → "×" */
.faq__a { padding-bottom: 18px; }

/* ==========================================================================
   FORMULARIO
   ========================================================================== */
.form-section { background: var(--g-form-section); }
.form-grid { display: grid; grid-template-columns: 1fr 523.84px; gap: var(--gutter); } /* gap inferido */
.form-card {
  padding: 35.49px;
  background: var(--c-white);
  border: var(--b-hairline); border-radius: var(--r-xl);
  box-shadow: var(--sh-elevated);
}
.field + .field { padding-top: var(--space-12); }
.field label { display: block; font-weight: var(--fw-semibold); color: var(--c-heading); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 10px 14px;
  background: var(--c-white);
  border: var(--b-input); border-radius: var(--r-sm);
  font: var(--fw-regular) var(--fs-body)/1 var(--ff-body); color: var(--c-heading);
}
.input { height: 49.19px; }
.textarea { min-height: 104px; height: 130.75px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--c-placeholder); }
.checkbox { width: 20px; height: 20px; border: 1px solid var(--c-checkbox-border); border-radius: var(--r-checkbox); }
.form-helper { font-size: var(--fs-helper); line-height: var(--lh-helper); text-align: center; color: var(--c-body); }
.form-helper--strong { font-weight: var(--fw-semibold); color: var(--c-heading); }
.form-image { width: 360px; height: 210px; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-top: var(--footer-pt); background: var(--c-navy); color: var(--c-white-78); }
.footer__grid { width: var(--container); margin-inline: auto; display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-34); }
.footer__title { font: var(--fw-semibold) var(--fs-footer-title)/var(--lh-footer-title) var(--ff-heading); letter-spacing: var(--ls-footer-title); color: var(--c-white); }
.footer a { color: var(--c-white-78); text-decoration: none; }
.footer__bottom { padding: 20px 16px; border-top: 1px solid var(--c-white-10); text-align: center; }
.footer__bottom strong { font-weight: var(--fw-semibold); }