/* ════════════════════════════════════════════════════════════
   HÍGADO GRASO EN GUAYAQUIL · /higado-graso-guayaquil/
   Estilos exclusivos de esta página, todos bajo .hg-page (prefijo hg-).
   No modifica site.css ni afecta a ninguna otra página.
   Escritorio = maqueta aprobada 1440 px · Móvil (≤ 768 px) = maqueta aprobada 390 px.
   Regla tipográfica: sin etiquetas en mayúsculas con letter-spacing amplio,
   salvo las excepciones aprobadas (GRADO y la frase de "¿Qué médico?").
   Grados (sección 4): bloque portado de la maqueta bajo .hg-gr.
════════════════════════════════════════════════════════════ */

.hg-page{
  --hg-ink:#1E2B2A;
  --hg-ink-2:#5E6B69;
  --hg-ink-3:#98A19F;
  --hg-green:#40736E;
  --hg-green-dk:#365F5B;
  --hg-pearl:#EEF1F0;
  --hg-warm:#F8F5F0;
  --hg-maxw:1200px;
  --hg-gut:40px;
  --hg-font:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  font-family:var(--hg-font);
  color:var(--hg-ink);
  background:var(--hg-pearl);   /* pasará a ser el fondo continuo perla → blanco cálido al añadir secciones */
  padding-top:80px;             /* compensa el header fijo del sitio: 80 px escritorio · 60 px móvil */
  overflow-x:clip;
}
.hg-page *,.hg-page *::before,.hg-page *::after{box-sizing:border-box}
.hg-w{max-width:var(--hg-maxw);margin-inline:auto;padding-inline:var(--hg-gut)}
.hg-page a:focus-visible{outline:2px solid var(--hg-green);outline-offset:3px;border-radius:2px}

/* ==========================================================
   1 · HERO — "El hallazgo primero" (versión aprobada)
   ========================================================== */
.hg-hero{position:relative;isolation:isolate;padding-bottom:12px}

/* Ecografía E1 (imagen ilustrativa): nace arriba, como el transductor, y se disuelve hacia abajo.
   El aclarado y el desvanecimiento en profundidad ya vienen aplicados en el propio archivo WebP (con transparencia). */
.hg-hero-us{
  position:absolute;z-index:-1;top:0;left:60%;
  display:block;width:min(1040px,76vw);height:auto;aspect-ratio:1536/1024;max-width:none;transform:translateX(-50%);
  pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* Hígado anatómico (decorativo, solo escritorio): nace en la esquina inferior izquierda,
   sale parcialmente del viewport y se desvanece hacia la derecha, detrás del contenido. */
.hg-hero-liver{display:none}
@media (min-width:769px){
  .hg-hero-liver{
    display:block;position:absolute;z-index:-2;left:-170px;bottom:-250px;
    width:1000px;height:auto;max-width:none;opacity:.40;pointer-events:none;user-select:none;
    -webkit-mask-image:linear-gradient(to right,#000 40%,rgba(0,0,0,.5) 60%,transparent 82%),linear-gradient(to top,transparent 0,#000 16%);-webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,#000 40%,rgba(0,0,0,.5) 60%,transparent 82%),linear-gradient(to top,transparent 0,#000 16%);mask-composite:intersect;
  }
}

.hg-hero-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

.hg-hero-eb{
  grid-column:1/-1;margin:0;padding-top:120px;
  font-size:19px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--hg-green);
}
.hg-finding{
  grid-column:1/span 6;margin:18px 0 0;
  font-size:clamp(40px,3.8vw,54px);font-weight:300;line-height:1.1;letter-spacing:-.02em;color:var(--hg-ink);
}
.hg-finding-d{color:var(--hg-ink-3);padding-inline:.2em}
.hg-finding-ex{grid-column:1/span 5;margin:14px 0 0;font-size:13px;line-height:1.55;color:#414D4B}
.hg-hero h1{
  grid-column:1/-1;margin:64px 0 0;
  font-size:clamp(48px,5.4vw,76px);font-weight:500;line-height:1.02;letter-spacing:-.03em;color:var(--hg-ink);
}
.hg-hero-rest{grid-column:1/span 7;margin-top:32px}   /* versión A: alineado con el eje del H1 */
.hg-hero-lead{margin:0;max-width:40ch;font-size:19px;line-height:1.65;color:var(--hg-ink)}
.hg-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.hg-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;
  border-radius:10px;background:var(--hg-green);color:#fff;
  font-family:var(--hg-font);font-size:16px;font-weight:600;text-decoration:none;transition:background-color .2s;
}
.hg-btn:hover{background:var(--hg-green-dk);color:#fff}
.hg-loc{margin:22px 0 0;font-size:15px;line-height:1.5;color:#3F4B49}
.hg-loc span{display:block}
.hg-loc span+span{margin-top:4px}
.hg-loc span:first-child{font-weight:600;color:var(--hg-ink)}

/* ==========================================================
   2 · EN ESTA PÁGINA
   Índice de texto: sin píldoras, sin líneas, sin cajas.
   ========================================================== */
.hg-toc{padding-block:52px 44px}
.hg-toc-in{display:flex;align-items:baseline;gap:12px 32px}
.hg-toc-l{
  flex:none;margin:0;
  font-size:16px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--hg-ink);
}
.hg-toc ol{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.hg-toc a{
  display:inline-block;padding-block:4px;
  font-size:14px;font-weight:500;color:var(--hg-ink-2);text-decoration:none;white-space:nowrap;
  transition:color .2s;
}
.hg-toc a:hover{color:var(--hg-green)}

/* ==========================================================
   MÓVIL
   ========================================================== */
@media (max-width:768px){
  .hg-page{--hg-gut:20px}

  /* Hero */
  .hg-hero-us{
    left:62%;width:440px;
    -webkit-mask-image:linear-gradient(180deg,#000 36%,transparent 78%),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(180deg,#000 36%,transparent 78%),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-composite:intersect;
  }
  .hg-hero-g{display:block}
  .hg-hero-eb{padding-top:116px;font-size:17px}
  .hg-finding{font-size:32px;margin-top:12px}
  .hg-finding-ex{margin-top:12px}
  .hg-hero h1{font-size:42px;margin-top:30px}
  .hg-hero-rest{margin-top:18px}
  .hg-hero-lead{font-size:17px}
  .hg-hero-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
  .hg-btn{width:100%}
  .hg-loc{margin-top:18px}

  /* En esta página: fila deslizable; el borde derecho se desvanece para indicar que continúa */
  .hg-toc{padding-block:32px 24px}
  .hg-toc-in{display:block}
  .hg-toc-l{margin-bottom:4px;font-size:16px}
  .hg-toc ol{
    flex-wrap:nowrap;gap:0 24px;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--hg-gut) * -1);padding-inline:var(--hg-gut);
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
            mask-image:linear-gradient(90deg,#000 82%,transparent);
  }
  .hg-toc ol::-webkit-scrollbar{display:none}
  .hg-toc li:last-child{padding-right:24px}
  .hg-toc a{padding-block:12px;font-size:15px}
}

/* ==========================================================
   5 · GRASA NO ES LO MISMO QUE FIBROSIS (APROBADO)
   Texto a la izquierda, gran espacio para ilustración a la derecha;
   el riesgo de fibrosis como segunda gran frase de la composición.
   ========================================================== */
.hg-fib{padding:120px 0 150px}
.hg-fib-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-fib p{margin:0}
.hg-fib-t{grid-column:1/span 6;grid-row:1;margin:0;
  font-size:clamp(40px,3.9vw,56px);font-weight:300;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink-2)}
.hg-fib-t b{font-weight:500;color:var(--hg-ink)}
.hg-fib-t b:last-child{color:var(--hg-green)}
.hg-fib-p{grid-column:1/span 5;grid-row:2;margin-top:32px!important;font-size:18px;line-height:1.7;color:#3F4B49}
.hg-fib-p strong{font-weight:600;color:var(--hg-ink)}
.hg-fib-claims{grid-column:1/span 5;grid-row:3;margin-top:44px;display:grid;gap:22px}
.hg-fib-claims p{font-size:22px;line-height:1.4;font-weight:300;color:var(--hg-ink);letter-spacing:-.005em}
.hg-fib-claims b{font-weight:600}
.hg-fib-fig{grid-column:7/-1;grid-row:1/span 3;align-self:center;margin:0}
/* La ilustración sale por el borde derecho de la ventana: el mango de la lupa queda cortado por el propio borde de pantalla */
.hg-fib-fig img{display:block;height:auto;max-width:none;
  width:calc(100% + 80px + max(0px,(100vw - var(--hg-maxw)) / 2));margin-left:-40px}

.hg-risk{margin-top:96px}
.hg-risk-t{margin:0;font-weight:300}
.hg-risk-a{display:block;font-size:22px;font-weight:500;line-height:1.3;color:var(--hg-ink)}
.hg-risk-b{display:block;margin-top:10px;font-size:clamp(56px,5.6vw,80px);line-height:1;letter-spacing:-.035em;color:var(--hg-green)}
.hg-risk-body{margin:36px 0 0;max-width:580px;display:grid;gap:22px}
.hg-risk-body p{font-size:18px;line-height:1.7;color:#3F4B49}
.hg-risk-body strong{font-weight:600;color:var(--hg-ink)}
.hg-risk-body a{color:var(--hg-green);text-underline-offset:3px}

@media (max-width:768px){
  .hg-fib{padding:80px 0 96px}
  .hg-fib-g{display:block}
  .hg-fib-t{font-size:38px}
  .hg-fib-p{margin-top:22px!important;font-size:16px}
  .hg-fib-claims{margin-top:30px;gap:16px}
  .hg-fib-claims p{font-size:19px}
  /* Móvil: ilustración completa, centrada, al 93 % del ancho útil y sin recortes */
  .hg-fib-fig{width:93%;margin:36px auto 0}
  .hg-fib-fig img{width:100%;height:auto;aspect-ratio:1100/686;margin:0;object-fit:contain}
  .hg-risk{margin-top:40px}
  .hg-risk-a{font-size:18px}
  .hg-risk-b{margin-top:8px;font-size:42px;line-height:1.02}
  .hg-risk-body{margin:24px 0 0;max-width:none;gap:18px}
  .hg-risk-body p{font-size:16px}
}

/* ==========================================================
   6 · EL HÍGADO GRASO CASI NUNCA VIENE SOLO (APROBADO)
   Imagen a la izquierda (sale por el borde de la ventana) y los cuatro
   factores en dos columnas escalonadas a su derecha, a la misma altura.
   ========================================================== */
.hg-meta{padding:140px 0 150px}
.hg-meta-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-meta p,.hg-meta h2,.hg-meta h3{margin:0}
.hg-meta-head{grid-column:1/span 7}
.hg-meta h2{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-meta-lead{margin-top:28px!important;font-size:30px;font-weight:300;line-height:1.35;letter-spacing:-.01em;color:var(--hg-ink);max-width:30ch}
.hg-meta-rest{margin-top:20px!important;font-size:18px;line-height:1.7;color:#3F4B49;max-width:52ch}

/* Collage: una sola pieza de tres fotografías verticales con dos cortes diagonales paralelos.
   Sale por el borde izquierdo de la ventana y baja hasta el final de la sección. */
.hg-meta{--hg-bleed:calc(var(--hg-gut) + max(0px,(100vw - var(--hg-maxw)) / 2))}
.hg-meta-fig{grid-column:1/span 6;grid-row:2;position:relative;align-self:stretch;min-height:760px;
  margin:64px 0 -150px calc(-1 * var(--hg-bleed))}
.hg-meta-p{position:absolute;inset:0}
.hg-meta-p img{position:absolute;top:0;height:100%;max-width:none;display:block;object-fit:cover}
/* Cortes diagonales sobre las propias fotografías: la parte superior va más a la derecha que la inferior.
   Cada panel se extiende 2 px bajo el anterior para que no aparezca una línea de fondo en la unión. */
.hg-meta-p1{z-index:3;clip-path:polygon(0 0,41% 0,32% 100%,0 100%)}
.hg-meta-p2{z-index:2;clip-path:polygon(calc(41% - 2px) 0,68% 0,59% 100%,calc(32% - 2px) 100%)}
.hg-meta-p3{z-index:1;clip-path:polygon(calc(68% - 2px) 0,100% 0,100% 100%,calc(59% - 2px) 100%)}
/* Cada foto cubre la caja de su panel; object-position mantiene visible el elemento clínico */
.hg-meta-p1 img{left:0;width:41%;object-position:30% 50%}          /* cintura / abdomen y báscula */
.hg-meta-p2 img{left:calc(32% - 2px);width:calc(36% + 2px);object-position:45% 50%} /* tubo de sangre */
.hg-meta-p3 img{left:calc(59% - 2px);width:calc(41% + 2px);object-position:22% 50%} /* estetoscopio y monitor */

.hg-meta-factors{grid-column:7/-1;grid-row:2;margin-top:64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px;padding-left:24px}
.hg-factor:nth-child(even){margin-top:96px}
.hg-factor h3{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--hg-ink)}
.hg-factor p{margin-top:12px!important;font-size:16px;line-height:1.7;color:#3F4B49}
.hg-flink{display:inline-block;margin-top:14px;font-size:14px;font-weight:500;color:var(--hg-ink-2);text-decoration:underline;text-decoration-color:rgba(64,115,110,.45);text-underline-offset:4px;transition:color .2s}
.hg-flink:hover{color:var(--hg-green)}

@media (max-width:768px){
  .hg-meta{padding:88px 0 96px}
  .hg-meta-g{display:block}
  .hg-meta h2{font-size:34px;line-height:1.08}
  .hg-meta-lead{margin-top:18px!important;font-size:22px;line-height:1.4}
  .hg-meta-rest{margin-top:14px!important;font-size:16px}
  /* Móvil: una sola pieza de 385 px de alto con dos cortes diagonales paralelos, más inclinados
     que en escritorio. Cada foto cubre la caja de su panel. */
  .hg-meta{--hg-bleed:0px}
  .hg-meta-fig{min-height:0;height:385px;margin:40px 0 0}
  .hg-meta-p img{left:0;width:100%}
  .hg-meta-p1{clip-path:polygon(0 0,100% 0,100% 18%,0 48%)}
  .hg-meta-p2{clip-path:polygon(0 calc(48% - 2px),100% calc(18% - 2px),100% 52%,0 82%)}
  .hg-meta-p3{clip-path:polygon(0 calc(82% - 2px),100% calc(52% - 2px),100% 100%,0 100%)}
  .hg-meta-p1 img{top:0;height:48%;object-position:50% 36%}                       /* abdomen y manos */
  .hg-meta-p2 img{top:calc(18% - 2px);height:calc(64% + 2px);object-position:50% 54%} /* tubo de sangre */
  .hg-meta-p3 img{top:calc(52% - 2px);height:calc(48% + 2px);object-position:50% 43%} /* estetoscopio */
  .hg-meta-factors{display:block;margin-top:40px;padding-left:0}
  .hg-factor+.hg-factor{margin-top:36px}
  .hg-factor:nth-child(even){margin-top:36px}
  .hg-factor h3{font-size:19px}
  .hg-factor p{margin-top:8px!important}
  .hg-flink{margin-top:10px}
}

/* ==========================================================
   7 · ¿QUÉ MÉDICO TRATA EL HÍGADO GRASO? (APROBADO)
   Fotografía grande a la izquierda (sale por el borde de la ventana),
   contenido a la derecha con jerarquía: título → respaldo → quién → qué hace → coordinación.
   ========================================================== */
.hg-doc{padding:140px 0 150px;--hg-bleed:calc(var(--hg-gut) + max(0px,(100vw - var(--hg-maxw)) / 2))}
.hg-doc-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-doc p,.hg-doc h2,.hg-doc h3,.hg-doc ol{margin:0}
.hg-doc-g > :not(.hg-doc-fig){grid-column:7/-1;padding-left:24px}

.hg-doc-fig{grid-column:1/span 6;grid-row:1/span 7;margin:0 0 0 calc(-1 * var(--hg-bleed));align-self:start;position:sticky;top:96px}
.hg-doc-fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-width:none;object-fit:cover;object-position:62% 40%}

.hg-doc-t{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-doc-intro{margin-top:28px!important;font-size:18px;line-height:1.7;color:#3F4B49;max-width:52ch}
.hg-doc-who{margin-top:44px!important;font-size:32px;font-weight:300;line-height:1.3;letter-spacing:-.015em;color:var(--hg-ink);max-width:24ch}
.hg-doc-who{text-transform:uppercase}   /* mayúsculas solo visuales: el HTML conserva la frase en minúsculas */
.hg-doc-who em{font-style:normal;font-weight:400;color:var(--hg-green)}
.hg-doc-lead{margin-top:48px!important;font-size:18px;font-weight:600;color:var(--hg-ink)}
.hg-doc-tasks{list-style:none;padding:0;margin-top:22px!important;display:grid;gap:18px}
.hg-doc-tasks li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;font-size:18px;line-height:1.55;color:var(--hg-ink)}
.hg-n{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--hg-green);font-variant-numeric:tabular-nums}
.hg-doc-coord{margin-top:72px}
.hg-doc-coord h3{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--hg-ink);max-width:28ch}
.hg-doc-coord p{margin-top:14px!important;font-size:16px;line-height:1.7;color:var(--hg-ink-2);max-width:54ch}

@media (max-width:768px){
  .hg-doc{padding:88px 0 96px;--hg-bleed:0px}
  .hg-doc-g{display:flex;flex-direction:column}
  .hg-doc-g > :not(.hg-doc-fig){padding-left:0}
  .hg-doc-t{order:0;font-size:34px;line-height:1.08}
  .hg-doc-fig{order:1;position:static;align-self:stretch;margin:28px 0 0}
  /* Móvil: fotografía completa en su proporción original, sin recorte */
  .hg-doc-fig img{aspect-ratio:1000/1333;object-fit:contain}
  .hg-doc-intro,.hg-doc-who,.hg-doc-lead,.hg-doc-tasks,.hg-doc-coord{order:2}
  .hg-doc-intro{margin-top:28px!important;font-size:16px}
  .hg-doc-who{margin-top:28px!important;font-size:24px}
  .hg-doc-lead{margin-top:32px!important;font-size:16px}
  .hg-doc-tasks{margin-top:16px!important;gap:14px}
  .hg-doc-tasks li{grid-template-columns:36px 1fr;font-size:16px}
  .hg-n{font-size:13px}
  .hg-doc-coord{margin-top:48px}
  .hg-doc-coord h3{font-size:19px}
  .hg-doc-coord p{margin-top:10px!important}
}
/* ==========================================================
   7 · ¿QUÉ MÉDICO TRATA EL HÍGADO GRASO? · composición editorial (propuesta)
   El texto lleva el peso (izquierda, 7 columnas). La fotografía pasa a ser
   horizontal (4:3) y ocupa toda la columna derecha hasta el borde de la ventana, con la
   coordinación debajo. Reutiliza los estilos tipográficos aprobados de .hg-doc.
   ========================================================== */
.hg-doc2{padding:96px 0 80px;--hg-bleed:calc(var(--hg-gut) + max(0px,(100vw - var(--hg-maxw)) / 2))}
.hg-doc2 p,.hg-doc2 h2,.hg-doc2 h3,.hg-doc2 ol{margin:0}
.hg-doc2-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-doc2-main{grid-column:1/span 6}
.hg-doc2-side{grid-column:7/-1;padding-top:8px}
.hg-doc2 .hg-doc-t{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-doc2 .hg-doc-intro{margin-top:24px!important;font-size:18px;line-height:1.7;color:#3F4B49;max-width:52ch}
.hg-doc2 .hg-doc-who{margin-top:40px!important;font-size:32px;font-weight:300;line-height:1.3;letter-spacing:-.015em;color:var(--hg-ink);max-width:24ch;text-transform:uppercase}
.hg-doc2 .hg-doc-who em{font-style:normal;font-weight:400;color:var(--hg-green)}
.hg-doc2 .hg-doc-lead{margin-top:40px!important;font-size:18px;font-weight:600;color:var(--hg-ink)}
.hg-doc2 .hg-doc-tasks{list-style:none;padding:0;margin-top:20px!important;display:grid;gap:16px}
.hg-doc2 .hg-doc-tasks li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;font-size:18px;line-height:1.55;color:var(--hg-ink)}
.hg-doc2 .hg-n{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--hg-green);font-variant-numeric:proportional-nums}
/* Fotografía: toda la columna derecha y hasta el borde de la ventana, 4:3 */
.hg-doc2-fig{margin:0 calc(-1 * var(--hg-bleed)) 0 0;aspect-ratio:4/3;overflow:hidden}
.hg-doc2-fig img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:55% 36%}  /* médico, monitor y paciente */
.hg-doc2 .hg-doc-coord{margin-top:36px;padding-right:24px}
.hg-doc2 .hg-doc-coord h3{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--hg-ink);max-width:28ch}
.hg-doc2 .hg-doc-coord p{margin-top:14px!important;font-size:16px;line-height:1.7;color:var(--hg-ink-2);max-width:54ch}

@media (max-width:768px){
  .hg-doc2{padding:56px 0 56px;--hg-bleed:var(--hg-gut)}
  .hg-doc2-g{display:flex;flex-direction:column;align-items:stretch}
  .hg-doc2-main,.hg-doc2-side{display:contents}
  .hg-doc2 .hg-doc-t{order:0;font-size:34px;line-height:1.08}
  .hg-doc2 .hg-doc-intro{order:1;margin-top:18px!important;font-size:16px}
  /* Móvil: a sangre de borde a borde, 4:3 */
  .hg-doc2-fig{order:2;margin:24px calc(-1 * var(--hg-gut)) 0}
  .hg-doc2 .hg-doc-who{order:3;margin-top:28px!important;font-size:24px}
  .hg-doc2 .hg-doc-lead{order:4;margin-top:28px!important;font-size:16px}
  .hg-doc2 .hg-doc-tasks{order:5;margin-top:14px!important;gap:12px}
  .hg-doc2 .hg-doc-tasks li{grid-template-columns:36px 1fr;font-size:16px}
  .hg-doc2 .hg-n{font-size:13px}
  .hg-doc2 .hg-doc-coord{order:6;margin-top:40px;padding-right:0}
  .hg-doc2 .hg-doc-coord h3{font-size:19px}
  .hg-doc2 .hg-doc-coord p{margin-top:10px!important}
}
/* 3 · Qué significa — común a ambas propuestas */
.hg-mean{padding:128px 0 160px}
.hg-mean-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-mean h2{margin:0;font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-mean-lead{margin:0;font-weight:300;color:var(--hg-ink);letter-spacing:-.01em}
.hg-mean p{margin:0}
.hg-mean b{font-weight:600;color:var(--hg-ink)}
.hg-term{color:var(--hg-ink)}
.hg-term-a,.hg-term-b{display:block}
.hg-mean .hg-term-w{display:block;font-weight:300;color:var(--hg-green);letter-spacing:-.035em;line-height:.95}
.hg-em{font-weight:600;color:var(--hg-ink)}
.hg-mean-p3,.hg-mean-p4{font-size:17px;line-height:1.75;color:#3F4B49}
.hg-mean-close{display:block;margin-top:28px;font-size:24px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--hg-ink)}
/* Propuesta A · Escalera: cada nivel de lectura desciende en diagonal hacia la derecha */
.hg-mean--a h2{grid-column:1/span 7}
.hg-mean--a .hg-mean-lead{grid-column:1/span 7;margin-top:28px;font-size:30px;line-height:1.35}
.hg-mean--a .hg-term{grid-column:4/-1;margin-top:120px}
.hg-mean--a .hg-term-a{font-size:17px;color:var(--hg-ink-2)}
.hg-mean--a .hg-term-w{margin-top:10px;font-size:92px}
.hg-mean--a .hg-term-b{margin-top:18px;font-size:20px;font-weight:500}
.hg-mean--a .hg-mean-p2{grid-column:4/span 6;margin-top:104px;font-size:24px;line-height:1.5;font-weight:300;color:var(--hg-ink)}
.hg-mean--a .hg-mean-p3{grid-column:6/span 5;margin-top:72px}
.hg-mean--a .hg-mean-p4{grid-column:6/span 5;margin-top:24px}

/* Móvil · misma lectura en escalera, comprimida en una sola columna con sangrías suaves */
@media (max-width:768px){
  .hg-mean{padding:88px 0 104px}
  .hg-mean-g{display:block}
  .hg-mean h2{font-size:34px;line-height:1.08}
  .hg-mean--a .hg-mean-lead{margin-top:18px;font-size:22px;line-height:1.4}
  .hg-mean--a .hg-term{margin-top:72px}
  .hg-mean--a .hg-term-a{font-size:15px}
  .hg-mean--a .hg-term-w{margin-top:8px;font-size:54px;line-height:1}
  .hg-mean--a .hg-term-b{margin-top:14px;font-size:17px}
  .hg-mean--a .hg-mean-p2{margin-top:64px;font-size:20px;line-height:1.5}
  .hg-mean--a .hg-mean-p3{margin-top:48px;padding-left:24px;font-size:16px;line-height:1.7}
  .hg-mean--a .hg-mean-p4{margin-top:20px;padding-left:24px;font-size:16px;line-height:1.7}
  .hg-mean-close{margin-top:24px;font-size:21px}
}

/* Collage editorial (solo escritorio ≥1100 px): gran superficie de fondo en la mitad izquierda.
   Una máscara escalonada y difuminada sigue el espacio vacío que deja la escalera tipográfica:
   nace bajo la respuesta, se retrae junto a "esteatosis hepática" y la frase de frecuencia,
   y vuelve a abrirse hacia abajo junto al bloque explicativo. Se ancla al contenedor para
   acompañar al texto en cualquier ancho de escritorio. */
.hg-mean{position:relative;isolation:isolate}
.hg-mean-collage{display:none}
@media (min-width:1100px){
  .hg-mean-collage{
    display:block;position:absolute;z-index:-1;
    top:360px;left:calc(50% - 780px);width:780px;height:1120px;max-width:none;
    object-fit:cover;object-position:left top;
    pointer-events:none;user-select:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 1120' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='40'/%3E%3C/filter%3E%3Cpath filter='url%28%23b%29' fill='%23fff' d='M10 110 L520 110 L520 150 L410 150 L410 560 L600 560 L600 1070 L10 1070 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 1120' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='40'/%3E%3C/filter%3E%3Cpath filter='url%28%23b%29' fill='%23fff' d='M10 110 L520 110 L520 150 L410 150 L410 560 L600 560 L600 1070 L10 1070 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  }
}
.hg-gr{
  --ink:#1E2B2A; --ink-2:#5E6B69; --ink-3:#98A19F;
  --green:#40736E; --green-soft:#CFE0DB; --green-mist:#E3EDEA;
  --pearl:#EEF1F0; --neutral:#F3F3F0; --warm:#F8F5F0; --warmer:#F7F1E8;
  --amber:#A8742A;
  --us-1:#D9DCDA; --us-2:#A9AFAC;
  --r-xl:152px; --r-l:112px; --r-m:80px; --r-s:56px;
  --gutter:40px; --maxw:1200px;
  --font:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
.hg-gr *{box-sizing:border-box}

.hg-gr .stage{margin:0 auto;transition:max-width .3s ease}

.hg-gr .page{
  container-type:inline-size; container-name:page;
  background:linear-gradient(to bottom,
    var(--pearl) 0%, #EFF1EF 16%, #F1F2EF 30%, var(--neutral) 42%, #F6F4F0 52%, var(--warm) 60%, var(--warm) 100%);
  overflow:clip;
}
.hg-gr .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.hg-gr h1,.hg-gr h2,.hg-gr h3{font-weight:300;letter-spacing:-.015em;text-wrap:balance;margin:0}

.hg-gr h2{font-size:44px;line-height:1.12}

.hg-gr p{font-size:18px;line-height:1.7;margin:0;max-width:66ch;color:var(--ink)}
.hg-gr .lead{font-size:32px;font-weight:300;line-height:1.35;letter-spacing:-.01em;max-width:30ch}
.hg-gr .eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hg-gr .small{font-size:14px;line-height:1.55;color:var(--ink-2)}

.hg-gr .sec{padding-top:var(--r-l)}
.hg-gr .sec.gap-xl{padding-top:var(--r-xl)}

.hg-gr .grades-intro{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.hg-gr .grades-intro h2{grid-column:1 / span 8}
.hg-gr .grades-intro .lead{grid-column:1 / span 8;margin-top:22px;max-width:34ch}
.hg-gr .grades-light{position:relative}
.hg-gr .grades-light::before{content:"";position:absolute;inset:-80px -20% -40px;background:radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);pointer-events:none}
.hg-gr .gseries{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:64px}
.hg-gr .g-num{font-size:120px;font-weight:200;line-height:1;color:var(--ink-3);letter-spacing:-.04em;font-variant-numeric:tabular-nums}

.hg-gr .g-text{margin-top:18px;transition:opacity .2s}
.hg-gr .g-text .eyebrow{color:var(--ink)}
.hg-gr .g-text p{font-size:17px;margin-top:8px}

.hg-gr .g-note{position:relative;margin-top:36px;display:grid;gap:10px}

@container page (max-width: 760px){.hg-gr .wrap{padding-inline:20px}

.hg-gr h2{font-size:30px}
.hg-gr .lead{font-size:24px}
.hg-gr p{font-size:17px}
.hg-gr .sec{padding-top:72px}
.hg-gr .sec.gap-xl{padding-top:88px}

.hg-gr .gseries{grid-template-columns:repeat(3,1fr);gap:0 10px;margin-top:40px}
.hg-gr .g-num{font-size:48px}

.hg-gr .g-text{grid-column:1 / -1;margin-top:26px;display:grid;grid-template-columns:40px 1fr;gap:0 8px}
.hg-gr .g-text::before{content:attr(data-n);grid-row:1 / span 2;font-size:28px;font-weight:200;color:var(--ink-3);line-height:1}
.hg-gr .g-text p{grid-column:2}

}
@media (prefers-reduced-motion: reduce){.hg-gr *{transition:none!important}}
.hg-gr .grades-light::before{display:none}
.hg-gr .gseries{grid-template-columns:repeat(3,minmax(0,1fr))}
.hg-gr .g-num{line-height:.9}
.hg-gr .g-liver{margin-top:4px;aspect-ratio:720/465;width:112%;max-width:none}
.hg-gr .g-liver img{display:block;width:100%;height:100%;object-fit:contain}
@container page (max-width: 760px){.hg-gr .gseries{grid-template-columns:minmax(0,1fr);gap:0}
.hg-gr .gseries > :nth-child(1){order:1}
.hg-gr .gseries > :nth-child(4){order:2}
.hg-gr .gseries > :nth-child(7){order:3}
.hg-gr .gseries > :nth-child(2){order:4}
.hg-gr .gseries > :nth-child(5){order:5}
.hg-gr .gseries > :nth-child(8){order:6}
.hg-gr .gseries > :nth-child(3){order:7}
.hg-gr .gseries > :nth-child(6){order:8}
.hg-gr .gseries > :nth-child(9){order:9}
.hg-gr .gseries > .g-num:not(:first-child){margin-top:16px}
.hg-gr .g-num{line-height:.8}
.hg-gr .g-liver{margin:0 auto;width:82%}
.hg-gr .g-text{display:block;margin-top:12px}
.hg-gr .grades-intro .lead{grid-column:1 / -1;font-size:20px;max-width:none}
.hg-gr .g-text::before{content:none}}
.hg-gr .page{background:transparent!important;overflow:visible}.hg-gr .stage{max-width:none}/* ==========================================================
   8 · ¿CÓMO SE EVALÚA EN CONSULTA? (propuesta)
   Escritorio: número grande fijo en la columna izquierda durante los cuatro pasos
   (incluido todo el paso 04 con el FIB-4). Móvil: número propio junto a cada paso.
   ========================================================== */
.hg-eval{padding:140px 0 150px}
.hg-eval-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-eval p,.hg-eval h2,.hg-eval h3,.hg-eval ol{margin:0}
.hg-eval-head{grid-column:1/span 8}
.hg-eval h2{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-eval-lead{margin-top:28px!important;font-size:30px;font-weight:300;line-height:1.35;letter-spacing:-.01em;color:var(--hg-ink);max-width:34ch}

/* Columna del número: ocupa toda la altura de los pasos → el número sigue fijo hasta el final del paso 04 */
.hg-eval-numcol{grid-column:1/span 4;grid-row:2;align-self:stretch;margin-top:96px}
.hg-eval-num{position:sticky;top:30vh;font-size:140px;font-weight:300;line-height:.82;letter-spacing:-.04em;color:var(--hg-ink-3);font-variant-numeric:proportional-nums}
.hg-eval-dig{color:var(--hg-green);transition:opacity .2s}

.hg-eval-steps{grid-column:5/-1;grid-row:2;margin-top:96px!important;list-style:none;padding:0;display:grid;gap:104px}
.hg-step-n{display:none}
.hg-step h3{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--hg-ink)}
.hg-step p{margin-top:14px!important;font-size:17px;line-height:1.75;color:#3F4B49;max-width:60ch}
.hg-step b{font-weight:600;color:var(--hg-ink)}
/* Con JS: el paso activo en tinta plena; los demás atenuados (refuerza su relación con el número) */
.hg-eval.is-seq .hg-step{opacity:.52;transition:opacity .35s}
.hg-eval.is-seq .hg-step.is-on{opacity:1}

/* Paso 04: mismo arranque que los demás, desarrollo con más jerarquía */
.hg-fib4-line{margin-top:40px!important;font-size:48px!important;font-weight:300;line-height:1.1!important;letter-spacing:-.025em;color:var(--hg-ink)!important;max-width:none!important}
.hg-dot{color:var(--hg-ink-3);padding-inline:.28em}
.hg-fib4-first{margin-top:28px!important;font-size:20px!important;line-height:1.6!important;color:var(--hg-ink)!important}
.hg-next{margin-top:48px}
.hg-next-l{font-size:17px!important;font-weight:600;color:var(--hg-green)!important;margin-top:0!important}
.hg-next .hg-next-l+p{margin-top:10px!important}

@media (max-width:768px){
  .hg-eval{padding:88px 0 96px}
  .hg-eval-g{display:block}
  .hg-eval h2{font-size:34px;line-height:1.08}
  .hg-eval-lead{margin-top:18px!important;font-size:22px;line-height:1.4}
  .hg-eval-numcol{display:none}
  .hg-eval-steps{margin-top:48px!important;gap:56px}
  .hg-eval.is-seq .hg-step{opacity:1}
  .hg-step-n{display:block;font-size:56px;font-weight:300;line-height:.9;letter-spacing:-.04em;color:var(--hg-green);margin-bottom:12px}
  .hg-step h3{font-size:20px}
  .hg-step p{margin-top:10px!important;font-size:16px}
  .hg-fib4-line{margin-top:24px!important;font-size:27px!important}
  .hg-fib4-first{margin-top:18px!important;font-size:17px!important}
  .hg-next{margin-top:32px}
  .hg-next-l{font-size:16px!important}
}
/* ==========================================================
   9 · ¿SE PUEDE MEJORAR O REVERTIR? (propuesta)
   Todo en un mismo eje izquierdo; jerarquía por escala y espacio.
   ========================================================== */
.hg-imp{padding:140px 0 150px}
.hg-imp p,.hg-imp h2,.hg-imp h3,.hg-imp ul{margin:0}
.hg-imp h2{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-imp-answer{margin-top:24px!important;max-width:30ch;font-size:30px;font-weight:300;line-height:1.3;letter-spacing:-.01em;color:var(--hg-ink)}
.hg-imp-intro{margin-top:12px!important;max-width:48ch;font-size:18px;line-height:1.6;color:#3F4B49}

/* Pérdida de peso */
.hg-wl{margin-top:96px}
.hg-wl-l{font-size:18px;font-weight:600;color:var(--hg-ink)}
.hg-wl-row{list-style:none;padding:0;margin-top:20px!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
.hg-wl-v{display:block;font-size:clamp(88px,8vw,116px);font-weight:300;line-height:.95;letter-spacing:-.04em;color:var(--hg-green);white-space:nowrap}
.hg-wl-v small{font-size:.38em;font-weight:400;letter-spacing:0;margin-left:.12em}
.hg-wl-t{display:block;margin-top:16px;max-width:24ch;font-size:18px;font-weight:500;line-height:1.45;color:var(--hg-ink)}
.hg-wl-after{margin-top:40px!important;font-size:18px;line-height:1.6;color:#3F4B49}

/* Qué ayuda: fotografía (≈42 %) a la derecha, que sale por el borde de la ventana, y tres contenidos a la izquierda */
.hg-help{margin-top:96px;--hg-bleed:calc(var(--hg-gut) + max(0px,(100vw - var(--hg-maxw)) / 2))}
.hg-help-t{font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--hg-ink)}
.hg-help-g{margin-top:40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch}
.hg-help-items{grid-column:1/span 6;grid-row:1;display:grid;gap:48px;align-content:start;padding-right:24px}
.hg-help-fig{grid-column:8/-1;grid-row:1;margin:0 calc(-1 * var(--hg-bleed)) 0 0;min-height:560px}
.hg-help-fig{position:relative}
.hg-help-fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:66% 50%}   /* plato, mano y aceite */
.hg-help-i h4{margin:0;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--hg-ink)}
.hg-help-i p{margin-top:12px!important;font-size:17px;line-height:1.75;color:#3F4B49;max-width:56ch}
/* Medicamentos: algo más de aire antes; la condición destacada */
.hg-help-meds{margin-top:16px}
.hg-imp-key{display:block;margin-top:14px;font-size:19px;font-weight:500;line-height:1.5;color:var(--hg-ink)}

/* Cierre editorial */
.hg-detox{margin-top:144px}
.hg-detox-q{font-size:clamp(56px,5.6vw,80px);font-weight:300;line-height:1;letter-spacing:-.035em;color:var(--hg-ink)}
.hg-detox-q span{color:var(--hg-green)}
.hg-detox-p{margin-top:28px!important;max-width:40ch;font-size:24px;font-weight:300;line-height:1.5;color:var(--hg-ink)}
.hg-detox-p strong{font-weight:600}

@media (max-width:768px){
  .hg-imp{padding:88px 0 96px}
  .hg-imp h2{font-size:34px;line-height:1.08}
  .hg-imp-answer{margin-top:16px!important;font-size:22px}
  .hg-imp-intro{margin-top:10px!important;font-size:16px}
  .hg-wl{margin-top:56px}
  .hg-wl-l{font-size:16px}
  .hg-wl-row{grid-template-columns:minmax(0,1fr);row-gap:32px;margin-top:20px!important}
  .hg-wl-v{font-size:72px}
  .hg-wl-t{margin-top:10px;font-size:17px;max-width:none}
  .hg-wl-after{margin-top:32px!important;font-size:17px}
  .hg-help{margin-top:56px;--hg-bleed:0px}
  .hg-help-t{font-size:24px}
  .hg-help-g{margin-top:24px;display:block}
  .hg-help-fig{margin:0;min-height:0;aspect-ratio:4/3}
  .hg-help-fig img{object-position:50% 50%}
  .hg-help-items{margin-top:32px;gap:36px;padding-right:0}
  .hg-help-i h4{font-size:20px}
  .hg-help-meds{margin-top:8px}
  .hg-help-i p{margin-top:10px!important;font-size:16px}
  .hg-imp-key{font-size:17px}
  .hg-detox{margin-top:72px}
  .hg-detox-q{font-size:42px}
  .hg-detox-p{margin-top:18px!important;font-size:19px}
}
.hg-gt{margin-left:-.155em}  /* compensa el margen interno del signo ">" para alinear con 5 y 7 */
/* ==========================================================
   10 · SÍNTOMAS Y SEÑALES DE ALARMA (propuesta)
   Sin fondo propio. Título + frase clave a la izquierda; tres niveles a la derecha.
   ========================================================== */
.hg-alarm{padding:120px 0 130px;--hg-amber:#A0602A}
.hg-alarm-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-alarm p,.hg-alarm h2,.hg-alarm h3,.hg-alarm ol{margin:0}
.hg-alarm-head{grid-column:1/span 5}
.hg-alarm h2{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-alarm-key{margin-top:28px!important;max-width:18ch;font-size:30px;font-weight:300;line-height:1.3;letter-spacing:-.01em;color:var(--hg-green)}

.hg-alarm-list{grid-column:7/-1;list-style:none;padding:0;display:grid;gap:44px;padding-top:8px}
.hg-al{display:grid;grid-template-columns:48px 1fr;align-items:baseline}
.hg-al-n{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--hg-green);font-variant-numeric:tabular-nums}
.hg-al h3{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--hg-ink)}
.hg-al p{margin-top:10px!important;font-size:17px;line-height:1.7;color:#3F4B49;max-width:52ch}

/* 03 · Emergencias: mayor escala y acento terracota sobrio */
.hg-al--urgent{margin-top:12px}
.hg-al--urgent .hg-al-n{color:var(--hg-amber)}
.hg-al--urgent h3{font-size:32px;font-weight:600;letter-spacing:-.015em;color:var(--hg-amber)}
.hg-al--urgent p{margin-top:12px!important;font-size:20px;font-weight:500;line-height:1.55;color:var(--hg-ink)}

@media (max-width:768px){
  .hg-alarm{padding:80px 0 88px}
  .hg-alarm-g{display:block}
  .hg-alarm h2{font-size:34px;line-height:1.08}
  .hg-alarm-key{margin-top:16px!important;font-size:22px;max-width:none}
  .hg-alarm-list{margin-top:44px!important;gap:36px;padding-top:0}
  .hg-al{grid-template-columns:40px 1fr}
  .hg-al-n{font-size:13px}
  .hg-al h3{font-size:20px}
  .hg-al p{margin-top:8px!important;font-size:16px}
  .hg-al--urgent{margin-top:8px}
  .hg-al--urgent h3{font-size:26px}
  .hg-al--urgent p{font-size:18px}
}
/* ==========================================================
   11 · PREGUNTAS FRECUENTES (propuesta)
   Título a la izquierda (fijo al desplazarse), acordeón a la derecha. Solo una abierta.
   ========================================================== */
.hg-faq{padding:120px 0 130px}
.hg-faq-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-faq-t{grid-column:1/span 4;margin:0;position:sticky;top:110px;
  font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink)}
.hg-faq-list{grid-column:6/-1;display:grid;gap:28px}
.hg-faq details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-block:6px}
.hg-faq details summary::-webkit-details-marker{display:none}
.hg-faq summary:focus-visible{outline:2px solid var(--hg-green);outline-offset:4px;border-radius:2px}
.hg-faq summary h3{margin:0;font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--hg-ink);transition:color .2s}
.hg-faq summary:hover h3,.hg-faq details[open] summary h3{color:var(--hg-green)}
.hg-pm{flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.hg-pm::before,.hg-pm::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:1.5px;background:var(--hg-ink-2);transition:transform .2s}
.hg-pm::after{transform:rotate(90deg)}
.hg-faq details[open] .hg-pm::after{transform:rotate(0)}
.hg-ans{padding-top:10px}
.hg-ans p{margin:0;max-width:60ch;font-size:17px;line-height:1.7;color:#3F4B49}

@media (max-width:768px){
  .hg-faq{padding:80px 0 88px}
  .hg-faq-g{display:block}
  .hg-faq-t{position:static;font-size:34px;line-height:1.08}
  .hg-faq-list{margin-top:32px;gap:18px}
  .hg-faq details summary{align-items:center;min-height:48px}
  .hg-faq summary h3{font-size:18px}
  .hg-pm{margin-top:0}
  .hg-ans{padding-top:6px}
  .hg-ans p{font-size:16px}
}
/* ==========================================================
   12 · CIERRE Y CITA (propuesta)
   Texto y botones a la izquierda; retrato del Dr. Croce a la derecha (solo escritorio).
   ========================================================== */
.hg-cta{padding:120px 0 0}
.hg-cta-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.hg-cta p,.hg-cta h2{margin:0}
.hg-cta-text{grid-column:1/span 7;padding-bottom:130px}
.hg-cta h2{font-size:clamp(40px,3.9vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.025em;color:var(--hg-ink);max-width:16ch}
.hg-cta-p{margin-top:28px!important;max-width:52ch;font-size:18px;line-height:1.7;color:#3F4B49}
.hg-cta-bring{margin-top:40px!important;font-size:28px;font-weight:300;line-height:1.3;letter-spacing:-.01em;color:var(--hg-ink)}
.hg-cta-bring2{margin-top:6px!important;font-size:18px;line-height:1.6;color:var(--hg-ink)}
.hg-cta-id{margin-top:32px!important;font-size:15px;line-height:1.5;color:#3F4B49}
.hg-cta-actions{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:28px}
.hg-btn--ghost{background:transparent;color:var(--hg-green);box-shadow:inset 0 0 0 1.5px var(--hg-green)}
.hg-btn--ghost:hover{background:rgba(64,115,110,.08);color:var(--hg-green-dk)}

.hg-cta-id span{display:block}
.hg-cta-id span:first-child{font-weight:600;color:var(--hg-ink)}
.hg-cta-id span+span{margin-top:4px}

/* Fotografía rectangular: llega al borde derecho de la ventana y a la base de la sección */
.hg-cta{--hg-bleed:calc(var(--hg-gut) + max(0px,(100vw - var(--hg-maxw)) / 2))}
.hg-cta-g{align-items:stretch}
.hg-cta-text{align-self:center}
.hg-cta-fig{grid-column:8/-1;margin:0 calc(-1 * var(--hg-bleed)) 0 0;position:relative;min-height:680px}
.hg-cta-fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:58% 50%}   /* rostro, mano y ecógrafo con su pantalla */

@media (max-width:768px){
  .hg-cta{padding:80px 0 88px;--hg-bleed:0px}
  .hg-cta-g{display:flex;flex-direction:column;align-items:stretch}
  .hg-cta-text{display:contents}
  .hg-cta h2{font-size:34px;line-height:1.08}
  .hg-cta-p{margin-top:18px!important;font-size:16px}
  .hg-cta-bring{margin-top:28px!important;font-size:22px}
  .hg-cta-bring2{font-size:16px}
  .hg-cta-id{margin-top:24px!important;font-size:14px}
  /* Móvil: fotografía a todo el ancho útil antes del botón */
  .hg-cta-fig{order:1;margin:28px 0 0;min-height:0;aspect-ratio:5/4}
  .hg-cta-fig img{object-position:50% 50%}   /* encuadre móvil más abierto: rostro, mano y ecógrafo */
  .hg-cta-actions{order:2;flex-direction:column;align-items:stretch;margin-top:24px}
  .hg-cta-actions .hg-btn{width:100%}
}
/* ==========================================================
   RITMO VERTICAL GLOBAL (propuesta)
   Unidad entre secciones: 80 px arriba + 80 px abajo = 160 px en escritorio;
   56 + 56 = 112 px en móvil. Donde una imagen toca el borde de su sección
   (collage de metabolismo, retrato del cierre) la sección siguiente conserva 96 px
   para que la imagen no quede pegada al texto.
   ========================================================== */
.hg-toc{padding-block:48px 16px}
.hg-mean{padding:80px 0 80px}
.hg-mean-collage{top:312px}
.hg-gr .sec#ecografia{padding-top:80px;padding-bottom:80px}
.hg-fib{padding:80px 0 80px}
.hg-meta{padding:80px 0 80px}
.hg-meta-fig{margin-bottom:-80px}
.hg-doc{padding:96px 0 80px}
.hg-eval{padding:80px 0 80px}
.hg-imp{padding:80px 0 80px}
.hg-alarm{padding:80px 0 80px}
.hg-faq{padding:80px 0 80px}
.hg-cta{padding-top:80px}
.hg-cta-text{padding-bottom:96px}
@media (max-width:768px){
  .hg-toc{padding-block:28px 8px}
  .hg-mean{padding:56px 0 56px}
  .hg-gr .sec#ecografia{padding-top:56px;padding-bottom:56px}
  .hg-fib,.hg-meta,.hg-doc,.hg-eval,.hg-imp,.hg-alarm,.hg-faq{padding:56px 0 56px}
  .hg-meta-fig{margin-bottom:0}
  .hg-cta{padding:56px 0 64px}
  .hg-cta-text{padding-bottom:0}
}
/* ==========================================================
   RITMO · SEGUNDA REVISIÓN (selectiva)
   Solo secciones con vacíos internos que interrumpían la lectura.
   ========================================================== */
/* ¿Cómo se evalúa? — escritorio: separación entre pasos y arranque de la lista */
.hg-eval-numcol{margin-top:64px}
.hg-eval-steps{margin-top:64px!important;gap:72px}
/* ¿Se puede mejorar? — escritorio: entre bloques internos */
.hg-wl{margin-top:72px}
.hg-help{margin-top:72px}
.hg-detox{margin-top:104px}
@media (max-width:768px){
  /* ¿Qué significa? — móvil: escalera tipográfica */
  .hg-mean--a .hg-term{margin-top:48px}
  .hg-mean--a .hg-mean-p2{margin-top:44px}
  .hg-mean--a .hg-mean-p3{margin-top:32px}
  /* ¿Cómo se evalúa? — móvil */
  .hg-eval-steps{margin-top:36px!important;gap:40px}
  /* ¿Se puede mejorar? — móvil */
  .hg-wl{margin-top:44px}
  .hg-help{margin-top:48px}
  .hg-detox{margin-top:52px}
}
/* 13 · Referencias médicas: nota de pie discreta tras el cierre, sin fondo ni separadores */
.hg-refs{padding:64px 0 72px}
.hg-refs-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hg-refs-t{grid-column:1/span 3;margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--hg-ink-2)}
.hg-refs-list{grid-column:4/-1;margin:0;padding-left:18px;columns:2;column-gap:48px;font-size:13px;line-height:1.6;color:var(--hg-ink-2)}
.hg-refs-list li{break-inside:avoid;margin-bottom:10px;padding-left:2px}
.hg-ref-a{font-weight:500;color:var(--hg-ink)}
.hg-refs-list i{font-style:italic}
.hg-refs-list li::marker{color:var(--hg-ink-3)}
.hg-refs-list a{white-space:nowrap;color:var(--hg-ink-2);text-decoration:underline;text-decoration-color:rgba(64,115,110,.4);text-underline-offset:3px}
.hg-refs-list a:hover{color:var(--hg-green)}
@media (max-width:768px){
  .hg-refs{padding:8px 0 48px}
  .hg-refs-g{display:block}
  .hg-refs-t{font-size:14px}
  .hg-refs-list{margin-top:12px;columns:1}
}

/* ==========================================================
   INTEGRACIÓN · header fijo real del sitio (site.css: 80 px / 60 px en ≤ 768 px)
   Solo compensa la altura del header: la distancia visual header → Hero es la de la maqueta.
   ========================================================== */
.hg-page section[id],.hg-page nav[id]{scroll-margin-top:88px}
@media (max-width:768px){
  .hg-page{padding-top:60px}
  .hg-page section[id],.hg-page nav[id]{scroll-margin-top:68px}
}