/* ============================================================================
   Dr. Ezequiel Lugo — Medicina Interna y Cuidado Crítico
   Hoja de estilos única. index.html + opinion.html

   IDENTIDAD
   Toda la paleta se deriva de los dos azules del logotipo:
   navy #0C2340 y azul #1B5FA8. Los grises no son neutros puros: llevan
   sesgo hacia el navy para que la página se lea como un sistema, no como
   una plantilla con un azul encima.

   TIPOGRAFÍA
   Pila del sistema a propósito: sin CDN de fuentes, sin dependencias.
   Para cambiar a una fuente web basta con sustituir --font-display.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* --- azules del logotipo --- */
  --navy-900:#071528;
  --navy-800:#0C2340;   /* navy del logo */
  --navy-700:#143254;
  --navy-600:#1D4470;
  --blue-600:#1B5FA8;   /* azul del logo */
  --blue-500:#2C79C9;
  --blue-400:#5197DC;
  --blue-300:#8FBDEC;
  --blue-100:#D9E7F5;
  --blue-050:#EDF3FA;

  /* --- neutros con sesgo navy --- */
  --paper:#FCFDFE;
  --paper-2:#F4F7FA;
  --line:#DEE6EE;
  --line-soft:#EBF0F5;
  --ink:#0C2340;
  --body:#3E5064;
  --muted:#67788B;

  /* --- sobre fondo oscuro --- */
  --on-dark:#EAF1F8;
  --on-dark-mut:#9BB4CC;
  --on-dark-line:rgba(143,189,236,.20);

  /* --- elevación: sombras muy suaves, teñidas de navy --- */
  --sh-1:0 1px 2px rgba(12,35,64,.04);
  --sh-2:0 2px 4px rgba(12,35,64,.04), 0 12px 28px -16px rgba(12,35,64,.20);
  --sh-3:0 4px 8px rgba(12,35,64,.05), 0 32px 64px -32px rgba(12,35,64,.32);

  /* --- tipografía --- */
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",Consolas,"SF Mono",monospace;

  /* --- escala tipográfica (fluida) --- */
  --t-eyebrow:.6875rem;
  --t-label:.75rem;
  --t-small:.875rem;
  --t-body:1rem;
  --t-lead:clamp(1.0625rem, .95rem + .45vw, 1.1875rem);
  --t-h3:clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --t-h2:clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --t-h1:clamp(2.5rem, 1.55rem + 4.1vw, 4.5rem);
  --t-numeral:clamp(2.5rem, 1.8rem + 3vw, 4rem);

  /* --- retícula y ritmo --- */
  --shell:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --section-y:clamp(4.5rem, 9vw, 8.5rem);
  --measure:62ch;

  /* --- movimiento --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.45s;
}

/* ------------------------------------------------------------ CIMIENTOS */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.028em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}

p{margin:0}

/* El navegador mete 40px de margen lateral a figure y dd, y 1em a blockquote.
   Sin este reset, cualquier <figure> dentro de una retícula queda 80px más
   estrecho que su columna: encoge la foto del hero, la galería y los datos
   de contacto sin que se vea de dónde viene. */
figure,blockquote,dl,dd,fieldset{margin:0}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

::selection{background:var(--blue-600);color:#fff}

:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;top:0;left:50%;transform:translate(-50%,-120%);
  background:var(--navy-800);color:#fff;padding:.75rem 1.5rem;z-index:200;
  font-size:var(--t-small);font-weight:600;transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

/* --------------------------------------------------------- COMPOSICIÓN */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--dark{background:var(--navy-800);color:var(--on-dark-mut)}
.section--dark h2,.section--dark h3{color:#fff}
.section--wash{background:var(--paper-2)}

/* Encabezado de sección: filete + índice. Es el gesto que se repite en
   toda la página y lo que le da unidad editorial. */
.sec-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:var(--t-eyebrow);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-600);
  margin-bottom:1.125rem;
}
.eyebrow::before{
  content:"";width:1.75rem;height:1px;background:currentColor;opacity:.6;
}
.sec-head--center .eyebrow{justify-content:center}
.section--dark .eyebrow{color:var(--blue-300)}

.lead{
  font-size:var(--t-lead);
  line-height:1.6;
  color:var(--muted);
  margin-top:1.25rem;
  max-width:44ch;
}
.sec-head--center .lead{margin-inline:auto}
.section--dark .lead{color:var(--on-dark-mut)}

/* Dato pendiente del cliente. Para publicar en limpio, borrar estas reglas. */
.tbd{
  color:var(--blue-600);
  border-bottom:1px dotted currentColor;
  white-space:nowrap;
}
/* variante para textos largos: subrayar una línea entera parece un enlace roto */
.tbd--block{
  display:block;
  border:0;white-space:normal;
  background:var(--blue-050);
  border-left:2px solid var(--blue-300);
  padding:.75rem 1rem;
  font-size:var(--t-small);
}
.section--dark .tbd,.hero .tbd,.site-footer .tbd{color:var(--blue-300)}

/* ------------------------------------------------------------- BOTONES */
.btn{
  --btn-bg:var(--blue-600);
  --btn-fg:#fff;
  --btn-bd:var(--blue-600);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  padding:1rem 1.875rem;
  min-height:3.25rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:var(--t-small);font-weight:600;letter-spacing:.015em;
  cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform .2s var(--ease);
  overflow:hidden;
}
.btn:hover{--btn-bg:var(--navy-800);--btn-bd:var(--navy-800)}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none;transition:transform var(--dur) var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:transparent;--btn-fg:var(--blue-600);--btn-bd:var(--blue-600)}

.btn--on-dark{--btn-bg:#fff;--btn-fg:var(--navy-800);--btn-bd:#fff}
.btn--on-dark:hover{--btn-bg:var(--blue-400);--btn-bd:var(--blue-400);--btn-fg:var(--navy-900)}

.btn--outline-dark{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.3)}
.btn--outline-dark:hover{--btn-bg:rgba(255,255,255,.08);--btn-bd:#fff;--btn-fg:#fff}

.btn--sm{padding:.6875rem 1.25rem;min-height:2.625rem;font-size:var(--t-label)}
.btn--block{width:100%}

/* Enlace con filete que se despliega */
.link-rule{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-small);font-weight:600;color:var(--ink);
  padding-bottom:.25rem;position:relative;
}
.link-rule::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--blue-600);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.link-rule:hover::after{transform:scaleX(1)}
.link-rule svg{transition:transform var(--dur) var(--ease-out)}
.link-rule:hover svg{transform:translate(3px,-3px)}

/* ================================================================ NAVBAR */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:6.5rem;
  transition:height var(--dur) var(--ease);
}
.nav__logo img{
  height:3.25rem;width:auto;
  /* el logotipo original es navy; sobre el hero oscuro se invierte a blanco */
  filter:brightness(0) invert(1);
  transition:filter var(--dur) var(--ease), height var(--dur) var(--ease);
}
.nav__menu{display:flex;align-items:center;gap:1.65rem}
.nav__link{
  position:relative;
  font-size:var(--t-small);font-weight:500;color:rgba(255,255,255,.82);
  padding-block:.375rem;
  transition:color var(--dur) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--blue-400);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease-out);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav__actions{display:flex;align-items:center;gap:1rem}
.nav__cta{--btn-bg:var(--blue-600);--btn-fg:#fff;--btn-bd:var(--blue-600)}
.nav__cta:hover{--btn-bg:#fff;--btn-bd:#fff;--btn-fg:var(--navy-800)}

/* estado tras hacer scroll: la barra se posa sobre papel */
.nav.is-stuck{
  background:rgba(252,253,254,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:var(--sh-1);
}
.nav.is-stuck .nav__inner{height:5rem}
.nav.is-stuck .nav__logo img{filter:none;height:2.75rem}
.nav.is-stuck .nav__link{color:var(--body)}
.nav.is-stuck .nav__link:hover{color:var(--ink)}

.nav__burger{
  display:none;
  width:2.75rem;height:2.75rem;
  background:none;border:1px solid rgba(255,255,255,.28);
  cursor:pointer;position:relative;
  transition:border-color var(--dur) var(--ease);
}
.nav.is-stuck .nav__burger{border-color:var(--line)}
.nav__burger span{
  position:absolute;left:50%;width:1.125rem;height:1.5px;
  background:#fff;transform:translateX(-50%);
  transition:transform .3s var(--ease), opacity .2s var(--ease), background var(--dur) var(--ease);
}
.nav.is-stuck .nav__burger span{background:var(--ink)}
.nav__burger span:nth-child(1){top:1rem}
.nav__burger span:nth-child(2){top:1.375rem}
.nav__burger span:nth-child(3){top:1.75rem}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateX(-50%) translateY(.375rem) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateX(-50%) translateY(-.375rem) rotate(-45deg)}

/* panel móvil */
.nav__drawer{
  position:fixed;inset:0;z-index:99;
  background:var(--navy-800);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.nav__drawer.is-open{opacity:1;visibility:visible}
.nav__drawer ul{display:flex;flex-direction:column;gap:.25rem}
.nav__drawer a{
  display:block;
  font-family:var(--font-display);font-size:1.75rem;color:#fff;
  padding-block:.75rem;
  border-bottom:1px solid var(--on-dark-line);
  opacity:0;transform:translateY(12px);
}
.nav__drawer.is-open a{
  opacity:1;transform:none;
  transition:opacity .4s var(--ease) calc(var(--i) * 55ms),
             transform .4s var(--ease-out) calc(var(--i) * 55ms);
}
.nav__drawer .btn{margin-top:2.5rem;align-self:flex-start}

/* ================================================================== HERO */
.hero{
  position:relative;
  background:var(--navy-800);
  color:var(--on-dark);
  padding-top:clamp(8rem,14vw,11rem);
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
}
/* dos velos de color muy abiertos, del mismo azul del logo */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(58% 48% at 82% 18%, rgba(27,95,168,.42), transparent 62%),
    radial-gradient(48% 42% at 6% 88%, rgba(20,50,84,.75), transparent 66%);
}
/* retícula finísima: da textura sin ruido */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(143,189,236,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,189,236,.05) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 35%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 75% at 50% 35%, #000 20%, transparent 78%);
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:end;
}

.hero__copy{padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero__eyebrow{color:var(--blue-300)}
.hero h1{color:#fff}
.hero h1 em{
  font-style:italic;
  color:var(--blue-300);
}
.hero__lead{
  margin-top:1.75rem;
  font-size:var(--t-lead);line-height:1.62;
  color:var(--on-dark-mut);
  max-width:36ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2.5rem}

/* meta bajo los botones: tres datos separados por filetes */
.hero__meta{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  margin-top:3rem;padding-top:1.75rem;
  border-top:1px solid var(--on-dark-line);
}
.hero__meta li{
  font-size:var(--t-label);color:var(--on-dark-mut);
  display:flex;align-items:center;gap:.5rem;
}
.hero__meta li::before{
  content:"";width:.3125rem;height:.3125rem;
  background:var(--blue-400);flex:none;
}

/* --- composición del retrato ---
   Un bloque de color desplazado, un filete que lo cruza y la fotografía
   sobresaliendo por abajo. La foto NO va dentro de una tarjeta. */
.hero__figure{
  position:relative;
  min-height:clamp(26rem,62vw,46rem);
  display:flex;justify-content:center;align-items:flex-end;
}
.hero__plate{
  position:absolute;
  left:50%;bottom:0;
  width:min(30rem,94%);
  height:82%;
  transform:translateX(-50%);
  background:linear-gradient(170deg, var(--navy-700), var(--navy-900));
  border:1px solid var(--on-dark-line);
  border-bottom:0;
}
/* segundo bloque, más pequeño y desplazado: da profundidad a la composición */
.hero__plate::before{
  content:"";position:absolute;
  right:-1.75rem;top:3.5rem;bottom:-1px;width:45%;
  border:1px solid var(--on-dark-line);border-bottom:0;
}
.hero__rule{
  position:absolute;
  left:-14vw;right:-14vw;bottom:36%;
  height:1px;background:var(--on-dark-line);
}
.hero__rule::after{
  content:"";position:absolute;left:10%;top:-.1875rem;
  width:.4375rem;height:.4375rem;background:var(--blue-400);
}
.hero__portrait{
  position:relative;z-index:2;
  max-height:clamp(25rem,60vw,44rem);
  width:auto;
  /* la fotografía de origen viene invertida en horizontal */
  transform:scaleX(-1);
  filter:drop-shadow(0 36px 60px rgba(0,0,0,.5));
}
/* placa de credencial flotante */
.hero__chip{
  position:absolute;z-index:3;
  left:0;bottom:12%;
  background:rgba(7,21,40,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--on-dark-line);
  padding:.875rem 1.125rem;
  width:max-content;
}
.hero__chip b{
  display:block;font-family:var(--font-display);font-size:1.0625rem;
  color:#fff;font-weight:600;line-height:1.2;white-space:nowrap;
}
.hero__chip span{
  display:block;margin-top:.25rem;
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-300);white-space:nowrap;
}

/* ======================================================= BLOQUE CONFIANZA */
.trust{background:var(--navy-900);color:var(--on-dark-mut)}
.trust__grid{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--on-dark-line);
}
.trust__item{
  padding-block:2rem;
  border-bottom:1px solid var(--on-dark-line);
}
.trust__n{
  display:block;
  font-family:var(--font-display);
  font-size:var(--t-numeral);line-height:.95;
  color:#fff;font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.trust__n sup{font-size:.4em;vertical-align:super;color:var(--blue-300);margin-left:.15em}
.trust__k{
  display:block;margin-top:.75rem;
  font-size:var(--t-label);line-height:1.45;
  color:var(--on-dark-mut);max-width:15rem;
}

/* ================================================================= SOBRE */
.about__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
.about__media{position:relative}
/* sin overflow:hidden a propósito: la imagen ya no puede desbordar
   (object-fit la contiene) y el filete decorativo necesita salirse */
.about__frame{
  position:relative;
  background:var(--navy-800);
  aspect-ratio:4/5;
}
.about__frame img{width:100%;height:100%;object-fit:cover}
/* filete desplazado detrás: profundidad sin sombra pesada.
   Va anclado al marco, no al bloque: si se ancla al bloque, envuelve
   también al pie de foto y parece un recuadro suelto. */
.about__frame::after{
  content:"";position:absolute;
  left:-1.25rem;top:1.5rem;height:calc(100% + 1.5rem);width:55%;
  border:1px solid var(--blue-100);
  z-index:-1;pointer-events:none;
}
.about__frame{isolation:auto}
.about__caption{
  margin-top:1.25rem;
  font-size:var(--t-label);color:var(--muted);
  display:flex;align-items:center;gap:.625rem;
}
.about__caption::before{content:"";width:1.5rem;height:1px;background:var(--blue-600)}

.about__body p + p{margin-top:1.25rem}
.about__body{color:var(--body);max-width:var(--measure)}

.quote{
  margin:2.5rem 0;
  padding-left:1.75rem;
  border-left:2px solid var(--blue-600);
  font-family:var(--font-display);
  font-size:clamp(1.25rem,1rem + 1vw,1.625rem);
  line-height:1.4;color:var(--ink);
  font-style:italic;
}
.quote cite{
  display:block;margin-top:.875rem;
  font-family:var(--font-body);font-style:normal;
  font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}

.creds{margin-top:2.5rem;border-top:1px solid var(--line)}
.creds > div{
  display:grid;grid-template-columns:1fr;gap:.25rem;
  padding-block:1rem;border-bottom:1px solid var(--line);
}
.creds dt,.creds .k{
  font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-600);font-weight:700;
}
.creds dd,.creds .v{margin:0;font-size:var(--t-small);color:var(--ink)}

/* ============================================================== SERVICIOS */
.svc__layout{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
.svc__aside{align-self:start}

.svc__group + .svc__group{margin-top:3rem}
.svc__group-head{
  display:flex;align-items:center;gap:1rem;
  padding-bottom:.75rem;margin-bottom:.5rem;
}
.svc__group-head h3{
  font-family:var(--font-body);
  font-size:var(--t-eyebrow);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.svc__group-head::after{content:"";flex:1;height:1px;background:var(--line)}
.svc__group-head .count{
  font-size:var(--t-eyebrow);color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
}

.svc__list{display:grid;grid-template-columns:1fr}

.svc{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;
  gap:1.25rem;align-items:start;
  padding:1.5rem 2.5rem 1.5rem 0;
  border-top:1px solid var(--line);
  transition:padding-left var(--dur) var(--ease-out);
}
/* barra de color que crece desde la izquierda al pasar el cursor */
.svc::before{
  content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;
  background:var(--blue-600);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--dur) var(--ease-out);
}
.svc:hover{padding-left:1.25rem}
.svc:hover::before{transform:scaleY(1)}
.svc__n{
  font-family:var(--font-display);
  font-size:1.0625rem;color:var(--blue-600);
  font-variant-numeric:tabular-nums;
  min-width:1.75rem;padding-top:.125rem;
  transition:color var(--dur) var(--ease);
}
.svc h4{
  margin:0;font-family:var(--font-display);
  font-size:1.125rem;font-weight:600;color:var(--ink);
  line-height:1.3;letter-spacing:-.012em;
}
.svc p{
  margin-top:.5rem;
  font-size:var(--t-small);line-height:1.6;color:var(--muted);
  max-width:40ch;
}
.svc__arrow{
  position:absolute;right:.25rem;top:1.75rem;
  color:var(--blue-600);
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.svc:hover .svc__arrow{opacity:1;transform:none}

/* ------------------------------------------ imagen de apoyo en servicios */
.svc__shot{
  position:relative;margin-top:2.5rem;
  aspect-ratio:4/5;background:var(--navy-800);
  overflow:hidden;
}
.svc__shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.svc__shot:hover img{transform:scale(1.04)}
.svc__shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.5rem 1.25rem 1.125rem;
  background:linear-gradient(to top, rgba(7,21,40,.88), transparent);
  color:#fff;font-size:var(--t-label);line-height:1.45;
}

/* ============================================================== GALERÍA */
.gal__grid{
  display:grid;grid-template-columns:1fr;gap:1.25rem;
}
/* 4:5 porque es la proporción nativa de las fotos: recortarlas a horizontal
   se comía la mitad del encuadre. */
.gal__item{
  position:relative;overflow:hidden;background:var(--navy-800);
  aspect-ratio:4/5;
}
.gal__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.gal__item:hover img{transform:scale(1.045)}
.gal__item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:3rem 1.25rem 1.125rem;
  background:linear-gradient(to top, rgba(7,21,40,.9), transparent);
  color:#fff;
}
.gal__item figcaption b{
  display:block;font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
}
.gal__item figcaption span{
  display:block;margin-top:.1875rem;
  font-size:var(--t-label);color:var(--blue-300);
}

/* ============================================================== VENTAJAS */
/* Retícula asimétrica a propósito: una pieza manda y las demás la acompañan. */
.why__grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--on-dark-line)}
.why__cell{
  background:var(--navy-800);
  padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:13rem;
  transition:background var(--dur) var(--ease);
}
.why__cell:hover{background:var(--navy-700)}
.why__cell--lead{
  justify-content:space-between;
  background:var(--navy-700);
  min-height:20rem;
}
.why__cell--lead:hover{background:var(--navy-600)}
.why__k{
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-300);font-weight:700;
}
.why__cell h3{
  margin-top:1.5rem;
  font-size:1.1875rem;color:#fff;line-height:1.3;
}
.why__cell--lead h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.why__cell p{
  margin-top:.75rem;
  font-size:var(--t-small);line-height:1.6;color:var(--on-dark-mut);
  max-width:34ch;
}

/* ============================================================ TRAYECTORIA */
.path{position:relative;padding-left:1.75rem}
.path::before{
  content:"";position:absolute;left:0;top:.75rem;bottom:.75rem;width:1px;
  background:var(--line);
}
.path__item{position:relative;padding-block:1.75rem}
.path__item + .path__item{border-top:1px solid var(--line-soft)}
.path__item::before{
  content:"";position:absolute;
  left:calc(-1.75rem - 3px);top:2.35rem;
  width:7px;height:7px;background:var(--blue-600);
  outline:4px solid var(--paper);
}
.path__when{
  display:block;
  font-family:var(--font-display);
  font-size:1rem;color:var(--blue-600);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.path__item h3{margin-top:.375rem;font-size:1.1875rem}
.path__item p{margin-top:.375rem;font-size:var(--t-small);color:var(--muted);max-width:48ch}

/* ============================================================ TESTIMONIOS */
.tst{position:relative}
.tst__viewport{overflow:hidden}
.tst__track{display:flex;transition:transform .6s var(--ease-out)}
.tst__slide{flex:0 0 100%;padding-right:1px}
.tst__mark{
  font-family:var(--font-display);
  font-size:4rem;line-height:.5;color:var(--blue-100);
  display:block;margin-bottom:1.25rem;
}
.tst__text{
  font-family:var(--font-display);
  font-size:clamp(1.3125rem,1.05rem + 1.15vw,1.875rem);
  line-height:1.42;color:var(--ink);
  letter-spacing:-.014em;
  max-width:34ch;
}
.tst__who{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--line);
  max-width:34ch;
}
.tst__name{font-size:var(--t-small);font-weight:600;color:var(--ink)}
.tst__ctx{font-size:var(--t-small);color:var(--muted)}
/* valoración discreta: cinco filetes, no cinco estrellas gigantes */
.rating{display:flex;gap:3px;align-items:center;margin-left:auto}
.rating i{display:block;width:.875rem;height:2px;background:var(--blue-600)}
.rating i.off{background:var(--line)}

.tst__nav{display:flex;align-items:center;gap:.75rem;margin-top:2.5rem}
.tst__btn{
  width:2.875rem;height:2.875rem;
  background:transparent;border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.tst__btn:hover{border-color:var(--blue-600);color:var(--blue-600)}
.tst__btn:disabled{opacity:.35;cursor:default}
.tst__btn:disabled:hover{border-color:var(--line);color:var(--ink)}
.tst__dots{display:flex;gap:.5rem;margin-left:.75rem}
.tst__dot{
  width:1.5rem;height:2px;background:var(--line);border:0;padding:0;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.tst__dot[aria-selected="true"]{background:var(--blue-600)}

.tst__note{
  margin-top:2rem;font-size:var(--t-label);color:var(--muted);
  display:flex;gap:.5rem;align-items:flex-start;max-width:44ch;
}
.tst__note svg{flex:none;margin-top:.15rem;color:var(--blue-600)}

/* =============================================================== CTA MEDIO */
.mid-cta{
  position:relative;background:var(--navy-800);color:#fff;
  text-align:center;overflow:hidden;isolation:isolate;
  padding-block:clamp(5rem,10vw,9rem);
}
/* fotografía de fondo bajo dos velos: uno navy para legibilidad,
   otro azul para que la imagen no se salga de la identidad */
.mid-cta__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.mid-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right, rgba(8,25,43,.9), rgba(12,35,64,.72)),
    radial-gradient(60% 100% at 50% 100%, rgba(27,95,168,.45), transparent 68%);
}
.mid-cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.mid-cta p{
  margin:1.25rem auto 2.5rem;max-width:44ch;
  color:var(--on-dark-mut);font-size:var(--t-lead);
}

/* ============================================================== CONTACTO */
.contact__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem)}

.info{border-top:1px solid var(--line)}
.info__row{
  display:grid;grid-template-columns:1fr;gap:.25rem;
  padding-block:1.125rem;border-bottom:1px solid var(--line);
}
.info__k{
  font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-600);font-weight:700;
}
.info__v{font-size:var(--t-small);color:var(--ink)}
.info__v a:hover{color:var(--blue-600)}
.info__v small{display:block;color:var(--muted);font-size:var(--t-label);margin-top:.125rem}

/* Formulario con campos de línea, no cajas: se lee más ligero. */
.form{display:grid;gap:1.75rem}
.form__row{display:grid;grid-template-columns:1fr;gap:1.75rem}
.field{position:relative;display:flex;flex-direction:column}
.field label{
  font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:.625rem;
}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-small);color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--line);
  padding:.625rem 0;
  border-radius:0;
  transition:border-color var(--dur) var(--ease);
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B5FA8' stroke-width='1.6'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .125rem center;background-size:1rem;
  padding-right:1.75rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--blue-600);border-bottom-width:1px;
}
.field input::placeholder,.field textarea::placeholder{color:#9CACBD}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-bottom-color:#B4453D}
.field__error{
  font-size:var(--t-label);color:#B4453D;margin-top:.375rem;min-height:1.2em;
}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.form__note{font-size:var(--t-label);color:var(--muted);max-width:26ch}
.form__ok{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:1rem 1.125rem;background:var(--blue-050);
  border-left:2px solid var(--blue-600);
  font-size:var(--t-small);color:var(--ink);
}
.form__ok svg{flex:none;margin-top:.2rem;color:var(--blue-600)}
[hidden]{display:none !important}

/* ================================================================= FOOTER */
.site-footer{background:var(--navy-900);color:var(--on-dark-mut);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.site-footer__grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid var(--on-dark-line);
}
.site-footer__logo{height:2rem;width:auto;filter:brightness(0) invert(1);opacity:.85}
.site-footer__brand p{margin-top:1rem;font-size:var(--t-small);max-width:26ch;line-height:1.6}
.site-footer h4{
  font-family:var(--font-body);
  font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-300);font-weight:700;margin-bottom:1rem;
}
.site-footer li + li{margin-top:.625rem}
.site-footer a{font-size:var(--t-small);transition:color var(--dur) var(--ease)}
.site-footer a:hover{color:#fff}
.social{display:flex;gap:.625rem;margin-top:1.5rem}
.social a{
  width:2.375rem;height:2.375rem;
  border:1px solid var(--on-dark-line);
  display:grid;place-items:center;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social a:hover{border-color:var(--blue-400);color:#fff}
.site-footer__base{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  padding-top:2rem;font-size:var(--t-label);color:#6D849C;
}
.site-footer__legal{max-width:60ch;line-height:1.6}

/* botón flotante de WhatsApp */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--navy-800);color:#fff;
  border:1px solid var(--on-dark-line);
  padding:.8125rem 1.125rem;
  font-size:var(--t-label);font-weight:600;
  box-shadow:var(--sh-3);
  opacity:0;transform:translateY(1rem);pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease-out),
             background var(--dur) var(--ease);
}
.wa.is-visible{opacity:1;transform:none;pointer-events:auto}
.wa:hover{background:var(--blue-600)}

/* ====================================================== PÁGINA /opinion */
.op-body{background:var(--paper-2);min-height:100vh;display:flex;flex-direction:column}
.op-top{background:var(--navy-800);padding-block:1.25rem}
.op-top .shell{display:flex;justify-content:center}
.op-top img{height:2rem;width:auto;filter:brightness(0) invert(1)}
.op-main{flex:1;padding-block:clamp(2.5rem,6vw,4.5rem)}

.op-card{
  max-width:40rem;margin-inline:auto;
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-2);
  padding:clamp(1.75rem,5vw,3.25rem);
}
.op-card__head{text-align:center;padding-bottom:2rem;border-bottom:1px solid var(--line-soft)}
.op-card__head .eyebrow{justify-content:center}
.op-card__head h1{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.125rem);line-height:1.15}
.op-card__head p{margin-top:.875rem;font-size:var(--t-small);color:var(--muted);max-width:30rem;margin-inline:auto}

.op-progress{height:2px;background:var(--line-soft);margin-top:1.75rem}
.op-progress i{display:block;height:100%;background:var(--blue-600);width:0;transition:width .5s var(--ease-out)}

/* --- pregunta ---
   Se usa div[role=group] + p[id] en vez de fieldset/legend: el legend queda
   fuera del flujo normal y reserva un hueco propio que descuadra el ritmo. */
.q{padding-block:1.5rem;border-bottom:1px solid var(--line-soft)}
.q:last-of-type{border-bottom:0}
.q__label{
  display:flex;gap:.75rem;align-items:baseline;
  font-size:var(--t-small);font-weight:600;color:var(--ink);
  margin-bottom:1rem;line-height:1.45;
}
.q__n{
  font-family:var(--font-display);color:var(--blue-600);
  font-variant-numeric:tabular-nums;flex:none;
}
.q__opt{font-weight:400;color:var(--muted);font-size:var(--t-label)}

/* estrellas */
.stars{display:flex;justify-content:center;gap:.5rem;padding-block:.25rem}
.stars button{
  background:none;border:0;padding:.25rem;line-height:0;cursor:pointer;
}
.stars svg{
  width:2.75rem;height:2.75rem;display:block;
  fill:var(--line);
  transition:fill .18s var(--ease), transform .18s var(--ease-out);
}
.stars button:hover svg{transform:scale(1.12)}
.stars svg.on{fill:var(--blue-600)}
.stars-scale{
  display:flex;justify-content:space-between;
  max-width:19rem;margin:.75rem auto 0;
  font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:#98A8B8;
}

/* fila de escala 1–5 */
.scale{display:flex;flex-wrap:wrap;gap:.5rem}
.scale button{
  flex:1 1 3.5rem;min-width:3.25rem;
  padding:.6875rem .25rem;
  background:transparent;border:1px solid var(--line);
  font-size:var(--t-small);font-weight:600;color:var(--body);
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.scale button:hover{border-color:var(--blue-400);color:var(--blue-600)}
.scale button[aria-pressed="true"]{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff;
}

/* opciones tipo píldora */
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choices button{
  padding:.625rem 1.125rem;
  background:transparent;border:1px solid var(--line);
  font-size:var(--t-small);color:var(--body);cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.choices button:hover{border-color:var(--blue-400);color:var(--blue-600)}
.choices button[aria-pressed="true"]{
  background:var(--blue-050);border-color:var(--blue-600);color:var(--blue-600);font-weight:600;
}

.op-card .field textarea{min-height:6rem}
.op-card .field input,.op-card .field textarea,.op-card .field select{
  border:1px solid var(--line);padding:.75rem .875rem;background:var(--paper);
}
.op-card .field select{background-position:right .75rem center}
.op-card .field input:focus,
.op-card .field textarea:focus,
.op-card .field select:focus{border-color:var(--blue-600)}

.op-actions{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.op-legal{
  margin-top:1.5rem;text-align:center;
  font-size:var(--t-label);color:var(--muted);line-height:1.55;
  max-width:32rem;margin-inline:auto;
}

/* --- pantalla de agradecimiento --- */
.op-done{text-align:center;padding-block:1rem}
.op-done__seal{
  width:3.5rem;height:3.5rem;margin:0 auto 1.5rem;
  border:1px solid var(--blue-600);color:var(--blue-600);
  display:grid;place-items:center;
}
.op-done h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.op-done p{margin-top:1rem;color:var(--muted);font-size:var(--t-small);max-width:32rem;margin-inline:auto}
.op-done .btn{margin-top:2rem}
.op-done__alt{
  display:block;margin-top:1.25rem;
  font-size:var(--t-label);color:var(--muted);text-decoration:underline;
  background:none;border:0;cursor:pointer;margin-inline:auto;
}

.op-foot{
  background:var(--navy-800);color:var(--on-dark-mut);
  text-align:center;padding-block:1.25rem;font-size:var(--t-label);
}

/* =============================================================== SCROLL-IN
   El estado oculto vive detrás de `.js`, que sólo añade el propio script.
   Sin JavaScript —o si el observador falla— el contenido se ve igual.
   Nunca esconder contenido real con CSS que dependa de que un script llegue. */
.js .reveal{opacity:0;transform:translateY(1.5rem)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease-out);
  transition-delay:calc(var(--d,0) * 80ms);
}

/* ============================================================== RESPONSIVE */

/* --- tablet --- */
@media (min-width:37.5rem){
  .hero__meta{gap:2rem}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item{padding-right:1.5rem}
  .form__row{grid-template-columns:1fr 1fr}
  .creds > div,.info__row{grid-template-columns:9rem 1fr;gap:1rem;align-items:baseline}
  .site-footer__grid{grid-template-columns:1.4fr 1fr 1fr}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .op-actions{flex-direction:row;align-items:center;justify-content:space-between}
}

/* --- laptop --- */
@media (min-width:60rem){
  .hero__grid{grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,4rem)}
  .hero__copy{padding-bottom:clamp(5rem,8vw,7.5rem)}
  .hero__chip{left:-3rem}

  .trust__grid{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--on-dark-line)}
  .trust__item{border-bottom:0;border-right:1px solid var(--on-dark-line);padding-right:2rem}
  .trust__item:last-child{border-right:0}

  .about__grid{grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,5.5rem)}

  .svc__layout{grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,6vw,5rem)}
  .svc__aside{position:sticky;top:8rem}
  .svc__list{grid-template-columns:1fr 1fr;column-gap:3rem}

  /* la retícula asimétrica sólo tiene sentido con anchura suficiente */
  .why__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(13rem,auto)}
  .why__cell--lead{grid-column:span 1;grid-row:span 2}
  .why__cell--wide{grid-column:span 2}

  .contact__grid{grid-template-columns:.82fr 1.18fr;gap:clamp(3rem,6vw,5.5rem)}

  .site-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}

  .tst__slide{padding-right:6rem}

  /* Tres retratos en fila, escalonados. El desnivel es lo que evita que
     parezca una tira de miniaturas y le da lectura editorial. */
  .gal__grid{grid-template-columns:repeat(3,1fr);gap:1.75rem;align-items:start}
  .gal__item:nth-child(2){margin-top:3.5rem}
  .gal__item:nth-child(3){margin-top:1.5rem}
}

/* --- escritorio ancho --- */
@media (min-width:80rem){
  .svc__list{column-gap:4rem}
}

/* --- móvil: se recompone, no se encoge --- */
@media (max-width:59.99rem){
  .nav__menu{display:none}
  .nav__cta{display:none}
  .nav__burger{display:block}

  .hero{padding-top:7.5rem}
  .hero__figure{min-height:22rem}
  .hero__chip{left:auto;right:0;bottom:6%;padding:.75rem .875rem}
  .hero__chip b{font-size:.9375rem}

  .svc{padding-right:0}
  .svc__arrow{display:none}
  .svc:hover{padding-left:.875rem}
}

@media (max-width:37.49rem){
  .hero h1{font-size:clamp(2.25rem,8vw,3rem)}
  .hero__actions .btn{flex:1 1 100%}
  .tst__text{font-size:1.25rem}
  .stars svg{width:2.375rem;height:2.375rem}
  .scale button{flex:1 1 2.75rem;min-width:2.75rem;padding:.625rem .125rem}
  .form__foot .btn{width:100%}
}

/* ------------------------------------------------------- MOVIMIENTO OFF */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .wa{opacity:1;transform:none;pointer-events:auto}
}

/* ------------------------------------------------------------ IMPRESIÓN */
@media print{
  .nav,.wa,.tst__nav,.mid-cta{display:none}
  body{background:#fff;color:#000}
  .section{padding-block:1.5rem}
}