/* Consultorio Dr. Roberto Herrera
   Concepto: la portada es una noche azul marino de la marca con el retrato bajo un arco
   (eco de los arcos del acueducto de Querétaro). El resto alterna fondo claro y bandas celestes;
   cada tema de salud lleva el color de una antigua submarca ECO. */
:root {
  --tinta: #132535;
  --texto-suave: #4A5B6C;
  --fondo: #F7FAFC;
  --superficie: #FFFFFF;
  --banda: #E6F1F9;
  --linea: #D3E1EC;
  --accion: #1F4677;
  --accion-hover: #163659;
  --accion-texto: #FFFFFF;
  --acento: #4E7AC6;
  --aviso: #FFF6E0;
  --aviso-borde: #E8C66A;
  --noche: #132535;
  --noche-2: #1F4677;
  --sobre-noche: #F2F7FB;
  --sobre-noche-suave: #B9CCDD;
  --boton-noche: #8DB2EC;
  --c-mujer: #D9466B;
  --c-adolescencia: #D45A22;
  --c-cronicas: #2E9C91;
  --c-mayor: #4E7AC6;
  --c-peso: #3E8E4F;

  --f-titulo: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-texto: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.375rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  --t-xxl: clamp(2.6rem, 1.3rem + 5vw, 4.75rem);

  --ancho: 1160px;
  --radio: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #E7EEF5; --texto-suave: #A9B8C7; --fondo: #0F1B27; --superficie: #162636;
    --banda: #13293D; --linea: #25394D; --accion: #8DB2EC; --accion-hover: #A9C6F2;
    --accion-texto: #0F1B27; --acento: #8DB2EC; --aviso: #2B2616; --aviso-borde: #8A7330;
    --noche: #0A141E; --noche-2: #16304F;
    --c-mujer: #F27C99; --c-adolescencia: #F08A55; --c-cronicas: #5DC4B7; --c-mayor: #8DB2EC; --c-peso: #74C185;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinta: #E7EEF5; --texto-suave: #A9B8C7; --fondo: #0F1B27; --superficie: #162636;
  --banda: #13293D; --linea: #25394D; --accion: #8DB2EC; --accion-hover: #A9C6F2;
  --accion-texto: #0F1B27; --acento: #8DB2EC; --aviso: #2B2616; --aviso-borde: #8A7330;
  --noche: #0A141E; --noche-2: #16304F;
  --c-mujer: #F27C99; --c-adolescencia: #F08A55; --c-cronicas: #5DC4B7; --c-mayor: #8DB2EC; --c-peso: #74C185;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
svg.icono { width: 1em; height: 1em; flex: none; }
a { color: var(--accion); text-underline-offset: 3px; }
a:hover { color: var(--accion-hover); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }

.envoltura {
  max-width: var(--ancho); margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; z-index: 50; background: var(--superficie); padding: 8px 12px; }

/* Encabezado */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 25; background: var(--noche); }
.encabezado { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--noche) 94%, transparent); backdrop-filter: blur(10px); color: var(--sobre-noche); }
.encabezado .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sobre-noche); }
.marca:hover { color: var(--sobre-noche); }
.marca img { width: 34px; height: 34px; }
.marca strong { font-size: var(--t-s); font-weight: 700; line-height: 1.2; display: block; }
.marca span { font-size: var(--t-xs); color: var(--sobre-noche-suave); display: block; line-height: 1.2; }
.menu { display: flex; align-items: center; gap: 24px; }
.menu a { color: var(--sobre-noche); text-decoration: none; font-size: var(--t-s); font-weight: 600; position: relative; }
.menu a:not(.boton)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--boton-noche); transition: right .2s ease; }
.menu a:not(.boton):hover { color: var(--sobre-noche); }
.menu a:not(.boton):hover::after { right: 0; }
@media (max-width: 760px) { .menu { display: none; } }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accion); color: var(--accion-texto) !important; text-decoration: none;
  font-weight: 700; font-size: var(--t-s); padding: 13px 24px; border-radius: 999px;
  border: 2px solid var(--accion); transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.boton:hover { background: var(--accion-hover); border-color: var(--accion-hover); transform: translateY(-2px); box-shadow: 0 8px 20px -10px var(--accion); }
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton .icono { transition: transform .15s ease; }
.boton:hover .icono { transform: translateX(3px); }
.boton.secundario { background: transparent; color: var(--accion) !important; }
.boton.secundario:hover { background: var(--banda); }
.noche .boton, .encabezado .boton { background: var(--boton-noche); border-color: var(--boton-noche); color: #0F1B27 !important; }
.noche .boton:hover, .encabezado .boton:hover { background: #A9C6F2; border-color: #A9C6F2; box-shadow: 0 8px 24px -10px #8DB2EC; }
.noche .boton.secundario { background: transparent; color: var(--sobre-noche) !important; border-color: color-mix(in srgb, var(--sobre-noche) 45%, transparent); }
.noche .boton.secundario:hover { background: color-mix(in srgb, var(--sobre-noche) 10%, transparent); }
.menu .boton { padding: 9px 18px; }

/* Bandas oscuras */
.noche { background: var(--noche); color: var(--sobre-noche); position: relative; overflow: hidden; }
/* Superficies del navegador con la paleta */
::selection { background: color-mix(in srgb, var(--acento) 35%, transparent); color: inherit; }
html { scrollbar-color: color-mix(in srgb, var(--acento) 55%, transparent) var(--fondo); accent-color: var(--accion); caret-color: var(--accion); }

/* Portada: luz azul de estudio y el retrato recortado bajo un arco */
.portada {
  --luz-x: 72%;
  background:
    radial-gradient(55% 75% at var(--luz-x) 30%, #8FB4E6 0%, transparent 62%),
    radial-gradient(70% 90% at 100% 100%, #16304F 0%, transparent 70%),
    linear-gradient(160deg, #2A5A97 0%, #1F4677 45%, #132535 100%);
  animation: luz 14s ease-in-out infinite alternate;
}
@keyframes luz { from { --luz-x: 66%; } to { --luz-x: 80%; } }
@property --luz-x { syntax: "<percentage>"; inherits: false; initial-value: 72%; }
.portada .envoltura { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 56px); align-items: end; padding-block: clamp(40px, 6vw, 80px) 0; position: relative; z-index: 1; }
.portada .texto { display: grid; gap: 26px; min-width: 0; padding-bottom: clamp(48px, 8vw, 112px); }
.portada h1 { font-size: var(--t-xxl); letter-spacing: -0.03em; }
.portada h1 span { display: block; color: #CFE2F7; font-weight: 400; font-size: 0.42em; letter-spacing: 0; margin-top: 14px; }
.portada .lema { font-size: var(--t-l); color: #D6E4F2; max-width: 30ch; line-height: 1.45; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #F2F7FB; font-variant-numeric: tabular-nums; }
.chips .icono { font-size: 1.15em; color: #CFE2F7; }
.retrato { margin: 0; position: relative; align-self: end; justify-self: center; width: min(100%, 520px); aspect-ratio: 760 / 930; }
.retrato .arco { position: absolute; inset: 9% 6% 0; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, rgba(235,244,252,.55), rgba(235,244,252,.08) 75%); border: 1px solid rgba(255,255,255,.35); border-bottom: 0; transform-origin: bottom; }
.retrato picture, .retrato > picture img { position: relative; display: block; width: 100%; }
.retrato picture { filter: drop-shadow(0 30px 40px rgba(10, 20, 30, .35)); }
.retrato picture img { -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }
.retrato .sello { position: absolute; left: -48px; bottom: 28px; z-index: 2; background: #FFFFFF; color: #132535; border-radius: 14px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); font-size: var(--t-xs); line-height: 1.35; }
.retrato .sello img { width: 34px; height: 34px; }
.retrato .sello strong { display: block; font-size: var(--t-s); }
.retrato a.sello { text-decoration: none; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.retrato a.sello > .icono { font-size: 20px; color: #1F4677; margin-left: 4px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.retrato a.sello:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -18px rgba(0,0,0,.6); color: #132535; }
.retrato a.sello:hover > .icono { transform: translateX(4px); }
.latido { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; color: rgba(207, 226, 247, .55); z-index: 0; }
.latido svg { width: 100%; height: 100%; display: block; }
.latido path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Momento de entrada: el arco se abre, el doctor aparece en la luz y el latido cruza la portada */
@media (prefers-reduced-motion: no-preference) {
  .retrato .arco { animation: arco 1s cubic-bezier(.16,1,.3,1) both; }
  .retrato picture { animation: aparece 1.1s .25s cubic-bezier(.16,1,.3,1) both; }
  .retrato .sello { animation: sube .7s .9s cubic-bezier(.16,1,.3,1) both; }
  .portada .texto > * { animation: sube .8s cubic-bezier(.16,1,.3,1) both; }
  .portada .texto > *:nth-child(2) { animation-delay: .08s; }
  .portada .texto > *:nth-child(3) { animation-delay: .16s; }
  .portada .texto > *:nth-child(4) { animation-delay: .24s; }
  .latido path { stroke-dashoffset: 1; animation: traza 2.4s .5s cubic-bezier(.65,0,.35,1) forwards; }
}
@keyframes arco { from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
@keyframes aparece { from { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes traza { to { stroke-dashoffset: 0; } }
@media (max-width: 820px) {
  .portada .envoltura { grid-template-columns: 1fr; padding-top: 32px; }
  .portada .texto { padding-bottom: 8px; }
  .retrato { width: min(100%, 340px); }
  .retrato .sello { left: 0; bottom: 32px; }
}

/* El sol: el corazón del consultorio brilla detrás del retrato y, al deslizar, vuela y aterriza en el logo */
.sol { display: none; }
.descubre { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: #CFE2F7; text-decoration: none; }
.descubre:hover { color: #FFFFFF; }
.descubre .bola { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
.descubre .bola .icono { rotate: 90deg; font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .descubre .bola { animation: rebota 2.2s 2s ease-in-out infinite; }
}
@keyframes rebota { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 6px; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sol {
      /* Inicio: detrás de la cabeza, en el centro de la columna del retrato. Fin: el logo del encabezado. */
      --cont-izq: calc(max(0px, (100vw - var(--ancho)) / 2) + 20px);
      --cont-ancho: calc(min(var(--ancho), 100vw) - 40px);
      --hueco: clamp(24px, 4vw, 56px);
      --tam: 300px;
      --sx: min(calc(var(--cont-izq) + var(--cont-ancho) - (var(--cont-ancho) - var(--hueco)) * 0.2375 + 190px), calc(100vw - 110px));
      --sy: 170px;
      --ex: calc(var(--cont-izq) + 17px);
      --ey: 35px;
      --escala: 0.1133;
      display: block; position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none;
      width: var(--tam); height: var(--tam); border-radius: 50%;
      translate: calc(var(--sx) - var(--tam) / 2) calc(var(--sy) - var(--tam) / 2);
      animation: sol-vuela linear both; animation-timeline: scroll(root); animation-range: 0 420px;
    }
    .sol::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0%, #EEF5FF 34%, rgba(214, 232, 250, .75) 50%, rgba(143, 180, 230, .25) 62%, transparent 71%); animation: sol-luz linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
    .sol img { position: absolute; inset: 30%; width: 40%; height: 40%; }
    .sol .sol-color { opacity: .9; animation: sol-color linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
    .sol .sol-blanco { opacity: 0; animation: sol-blanco linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
    /* El logo del encabezado aparece cuando el sol aterriza */
    body:has(.sol) .encabezado .marca img { animation: aterriza linear both; animation-timeline: scroll(root); animation-range: 360px 430px; }
  }
}
@keyframes sol-vuela {
  0% { translate: calc(var(--sx) - var(--tam) / 2) calc(var(--sy) - var(--tam) / 2); scale: 1; opacity: 1; }
  70% { opacity: 1; }
  92% { translate: calc(var(--ex) - var(--tam) / 2) calc(var(--ey) - var(--tam) / 2); scale: calc(var(--escala) * 2.5); opacity: 1; }
  100% { translate: calc(var(--ex) - var(--tam) / 2) calc(var(--ey) - var(--tam) / 2); scale: calc(var(--escala) * 2.5); opacity: 0; }
}
@keyframes sol-luz { 0%, 10% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sol-color { 0%, 45% { opacity: .9; } 75%, 100% { opacity: 0; } }
@keyframes sol-blanco { 0%, 45% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes aterriza { from { opacity: 0; scale: .4; } 60% { opacity: 1; scale: 1.25; } to { opacity: 1; scale: 1; } }
@media (max-width: 820px) {
  .sol { --tam: 130px; --sx: calc(100vw - 42px); --sy: 112px; --escala: 0.2615; }
}

/* Separadores que se despliegan al entrar en pantalla */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .recorrido::before { transform-origin: left; animation: despliega linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .arcos svg { animation: levanta linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .titular h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--acento), var(--c-cronicas)); transform-origin: left; animation: despliega linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
  }
}
@keyframes despliega { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes levanta { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 860px) {
  .recorrido::before { transform-origin: top; animation-name: despliega-v; }
}
@keyframes despliega-v { from { scale: 1 0; } to { scale: 1 1; } }

/* Secciones */
.seccion { padding-block: clamp(64px, 10vw, 128px); }
.seccion.banda { background: var(--banda); }
.titular { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 62ch; }
.seccion h2, .ubicacion h2 { font-size: var(--t-xl); letter-spacing: -0.02em; }
.titular p { color: var(--texto-suave); font-size: var(--t-l); line-height: 1.5; }

/* Así te atiendo: un recorrido sobre una línea */
.recorrido { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); position: relative; }
.recorrido::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: linear-gradient(90deg, var(--acento), var(--c-cronicas)); opacity: .5; }
.recorrido li { display: grid; gap: 12px; align-content: start; position: relative; }
.recorrido .punto { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 2px solid var(--acento); color: var(--accion); font-size: 26px; position: relative; z-index: 1; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease; }
.recorrido li:hover .punto { transform: scale(1.08); background: var(--accion); color: var(--accion-texto); }
.recorrido h3 { font-size: var(--t-l); margin-top: 6px; }
.recorrido p { color: var(--texto-suave); max-width: 34ch; }
.recorrido .pronto { justify-self: start; }
.pronto { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--aviso); border: 1px solid var(--aviso-borde); color: var(--tinta); padding: 3px 10px; border-radius: 999px; }
@media (max-width: 860px) {
  .recorrido { grid-template-columns: 1fr; }
  .recorrido::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, var(--acento), var(--c-cronicas)); }
  .recorrido li { grid-template-columns: 56px 1fr; column-gap: 18px; }
  .recorrido li > :not(.punto) { grid-column: 2; }
  .recorrido .punto { grid-row: 1 / span 3; }
}

/* Temas: índice grande, una fila por tema */
.temas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.temas li { border-bottom: 1px solid var(--linea); }
.tema { --c: var(--acento); display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.1fr) 44px; gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(18px, 2.6vw, 28px) clamp(8px, 1.5vw, 20px); text-decoration: none; color: var(--tinta); position: relative; isolation: isolate; transition: color .3s ease; }
.tema::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c) 10%, var(--superficie)); clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.16,1,.3,1); }
.tema:hover::before, .tema:focus-visible::before { clip-path: inset(0 0 0 0); }
.tema:hover { color: var(--tinta); }
.tema .ficha { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 34px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease; }
.tema:hover .ficha { transform: rotate(-6deg) scale(1.06); background: var(--c); color: #FFFFFF; }
.tema h3 { font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); letter-spacing: -0.02em; }
.tema p { font-size: var(--t-s); color: var(--texto-suave); }
.tema .flecha { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease; }
.tema:hover .flecha { transform: translateX(6px); background: var(--c); color: #FFFFFF; border-color: var(--c); }
[data-tema="salud-de-la-mujer"] { --c: var(--c-mujer); }
[data-tema="adolescencia"] { --c: var(--c-adolescencia); }
[data-tema="enfermedades-cronicas"] { --c: var(--c-cronicas); }
[data-tema="adulto-mayor"] { --c: var(--c-mayor); }
[data-tema="peso-saludable"] { --c: var(--c-peso); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .temas li { animation: entra-fila linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes entra-fila { from { transform: translateX(-32px); } to { transform: none; } }
@media (max-width: 760px) {
  .tema { grid-template-columns: 56px minmax(0, 1fr) 36px; row-gap: 6px; }
  .tema .ficha { width: 56px; height: 56px; font-size: 28px; grid-row: 1 / span 2; }
  .tema p { grid-column: 2; grid-row: 2; }
  .tema .flecha { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 16px; }
}

/* Sobre mí */
.sobre { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.sobre figure { margin: 0; position: relative; }
.sobre figure img { border-radius: 999px 999px var(--radio) var(--radio); aspect-ratio: 720 / 1000; object-fit: cover; object-position: top; width: 100%; box-shadow: 0 30px 60px -30px rgba(19, 37, 53, .55); }
.sobre .cuerpo { display: grid; gap: 18px; min-width: 0; }
.sobre .cuerpo > p { max-width: 60ch; }
.datos { display: grid; margin: 8px 0 0; border-top: 1px solid var(--linea); }
.datos div { display: grid; grid-template-columns: 10rem 1fr; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--linea); }
.datos dt { font-size: var(--t-s); color: var(--texto-suave); }
.datos dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .sobre { grid-template-columns: 1fr; } .sobre figure { max-width: 320px; } .datos div { grid-template-columns: 1fr; gap: 2px; } }


/* Ubicación: banda oscura con arcos */
.ubicacion .envoltura { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; align-items: end; padding-block: clamp(56px, 9vw, 112px) clamp(120px, 14vw, 180px); position: relative; z-index: 1; }
.direccion-grande { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.ubicacion .icono-lugar { font-size: 40px; color: var(--boton-noche); margin-bottom: 14px; display: block; }
.direccion-detalle { color: var(--sobre-noche-suave); max-width: 46ch; margin-top: 18px; }
.ubicacion .acciones { justify-content: flex-end; }
.arcos { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 150px); color: color-mix(in srgb, var(--sobre-noche) 10%, transparent); }
.arcos svg { width: 100%; height: 100%; display: block; }
@media (max-width: 820px) { .ubicacion .envoltura { grid-template-columns: 1fr; } .ubicacion .acciones { justify-content: flex-start; } }

/* Preguntas */
.preguntas { display: grid; gap: 10px; max-width: 780px; }
.preguntas details, .preguntas-guia details { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 18px 22px; transition: border-color .2s ease; }
.preguntas details[open], .preguntas-guia details[open] { border-color: var(--acento); }
.preguntas summary, .preguntas-guia summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker, .preguntas-guia summary::-webkit-details-marker { display: none; }
.preguntas summary::after, .preguntas-guia summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--acento); transition: transform .2s ease; }
.preguntas details[open] summary::after, .preguntas-guia details[open] summary::after { transform: rotate(45deg); }
.preguntas details p, .preguntas-guia details p { margin-top: 10px; color: var(--texto-suave); }

/* Páginas de temas */
.cabeza-tema .envoltura { padding-block: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.cabeza-tema .texto { display: grid; gap: 16px; min-width: 0; }
.cabeza-tema h1 { font-size: var(--t-xxl); }
.cabeza-tema .lema { color: var(--sobre-noche-suave); font-size: var(--t-l); max-width: 44ch; line-height: 1.45; }
.ficha-grande { width: clamp(96px, 14vw, 168px); aspect-ratio: 1; border-radius: 32px; display: grid; place-items: center; font-size: clamp(56px, 8vw, 96px); color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.migas { font-size: var(--t-s); color: var(--sobre-noche-suave); }
.migas a { color: var(--sobre-noche-suave); }
@media (max-width: 640px) { .cabeza-tema .envoltura { grid-template-columns: 1fr; } .ficha-grande { order: -1; width: 84px; font-size: 50px; border-radius: 22px; } }
.indice { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.indice a { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; text-decoration: none; color: var(--sobre-noche); background: color-mix(in srgb, var(--sobre-noche) 9%, transparent); border: 1px solid color-mix(in srgb, var(--sobre-noche) 18%, transparent); }
.indice a:hover { background: color-mix(in srgb, var(--sobre-noche) 18%, transparent); color: var(--sobre-noche); }
.nota-legal { background: var(--aviso); border: 1px solid var(--aviso-borde); border-radius: 12px; padding: 14px 18px; font-size: var(--t-s); max-width: 72ch; }
.contenido { display: grid; gap: 24px; padding-block: 40px 88px; }
.contenido article { display: grid; gap: 14px; max-width: 72ch; background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--c, var(--acento)); border-radius: var(--radio); padding: clamp(22px, 4vw, 36px); scroll-margin-top: 90px; }
.contenido article h2 { font-size: var(--t-l); }
.contenido article ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.contenido article li::marker { color: var(--c, var(--acento)); }
.consultar { padding: 14px 18px; background: color-mix(in srgb, var(--c, var(--acento)) 9%, transparent); border-radius: 12px; }
.consultar strong { display: block; margin-bottom: 4px; }
.fuentes { font-size: var(--t-xs); color: var(--texto-suave); }
.cierre { background: var(--banda); border-radius: var(--radio); padding: 32px; display: grid; gap: 14px; justify-items: start; max-width: 72ch; }
.cierre h2 { font-size: var(--t-l); }
.articulo-cabeza { padding-block: clamp(36px, 6vw, 72px) 24px; display: grid; gap: 14px; }
.articulo-cabeza h1 { font-size: var(--t-xl); }

/* Pie */
.pie { background: var(--noche); color: var(--sobre-noche); padding-block: 56px 32px; font-size: var(--t-s); }
.pie a { color: var(--sobre-noche); }
.pie .envoltura { display: grid; gap: 28px; }
.pie .columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; }
.pie h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; color: var(--boton-noche); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie .legal { border-top: 1px solid color-mix(in srgb, var(--sobre-noche) 18%, transparent); padding-top: 20px; color: var(--sobre-noche-suave); display: grid; gap: 8px; }

/* Banner "Quiero mi primera consulta": acompaña al paciente por toda la página */
.agendar-flotante { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 30; }
.sello-flotante { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 16px; background: #FFFFFF; color: #132535; text-decoration: none; font-size: var(--t-s); box-shadow: 0 18px 44px -14px rgba(10, 20, 30, .55), 0 0 0 1px rgba(19, 37, 53, .06); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.sello-flotante:hover { color: #132535; transform: translateY(-3px); box-shadow: 0 24px 50px -14px rgba(10, 20, 30, .6), 0 0 0 1px rgba(19, 37, 53, .08); }
.sello-flotante img { width: 30px; height: 30px; }
.sello-flotante .icono { font-size: 20px; color: #1F4677; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.sello-flotante:hover .icono { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  /* El corazón late cada pocos segundos para invitar a agendar */
  .sello-flotante img { animation: late 4s 3s ease-in-out infinite; }
  .retrato .sello img { animation: late 4s 2s ease-in-out infinite; }
}
@keyframes late { 0%, 70%, 100% { scale: 1; } 76% { scale: 1.18; } 82% { scale: .96; } 88% { scale: 1.12; } }
/* En la portada el banner vive junto a la foto; al deslizar, se despega y sigue al paciente */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body:has(.portada) .agendar-flotante { animation: despega linear both; animation-timeline: scroll(root); animation-range: 380px 560px; }
    @media (max-width: 760px) { body:has(.portada) .agendar-flotante { animation-range: 470px 570px; } }
  }
}
@keyframes despega { from { opacity: 0; translate: 0 24px; visibility: hidden; } 1% { visibility: visible; } to { opacity: 1; translate: 0 0; visibility: visible; } }
@media (max-width: 760px) {
  .agendar-flotante { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sello-flotante { justify-content: center; }
  body { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Guías visuales: páginas cortas con esquemas */
.guias-lista { display: grid; gap: 14px; max-width: 72ch; }
.guias-lista h2 { font-size: var(--t-l); }
.guias-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guias-lista a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 18px 22px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: border-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.guias-lista a:hover { border-color: var(--c, var(--acento)); transform: translateY(-2px); color: var(--tinta); }
.guias-lista strong { font-size: var(--t-m); }
.guias-lista span { grid-column: 1; color: var(--texto-suave); font-size: var(--t-s); }
.guias-lista .icono { grid-row: 1 / span 2; grid-column: 2; font-size: 22px; color: var(--c, var(--acento)); }

.guia { gap: clamp(28px, 4vw, 44px); }
.guia h2 { font-size: var(--t-l); margin-bottom: 14px; }
.guia .intro { color: var(--texto-suave); max-width: 62ch; margin: 0 0 18px; }
.pocas { background: var(--superficie); border: 1px solid var(--linea); border-left: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(20px, 4vw, 32px); max-width: 72ch; box-shadow: 0 1px 0 var(--linea); position: relative; overflow: hidden; }
.pocas::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c, var(--acento)); }
.pocas ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: var(--t-m); }
.pocas li::marker { color: var(--c, var(--acento)); }
.esquema { margin: 0; }

/* Círculo de 4 pasos */
.ciclo { position: relative; max-width: 760px; }
.ciclo-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 64px 96px; position: relative; }
.ciclo-pasos li { background: var(--superficie); border: 2px solid color-mix(in srgb, var(--c, var(--acento)) 45%, var(--linea)); border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; position: relative; }
.ciclo-pasos strong { font-size: var(--t-m); line-height: 1.3; }
.ciclo-pasos li > span:last-child { color: var(--texto-suave); font-size: var(--t-s); line-height: 1.5; }
.num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--acento)); color: #FFFFFF; font-weight: 700; font-size: var(--t-s); }
/* orden visual en el círculo: 1 arriba izq, 2 arriba der, 3 abajo der, 4 abajo izq */
.ciclo-pasos li:nth-child(3) { grid-column: 2; grid-row: 2; }
.ciclo-pasos li:nth-child(4) { grid-column: 1; grid-row: 2; }
.ciclo-pasos li::after { position: absolute; font-size: 30px; line-height: 1; color: var(--c, var(--acento)); font-weight: 700; }
.ciclo-pasos li:nth-child(1)::after { content: "→"; right: -66px; top: 50%; translate: 0 -50%; }
.ciclo-pasos li:nth-child(2)::after { content: "↓"; bottom: -50px; left: 50%; translate: -50% 0; }
.ciclo-pasos li:nth-child(3)::after { content: "←"; left: -66px; top: 50%; translate: 0 -50%; }
.ciclo-pasos li:nth-child(4)::after { content: "↑"; top: -50px; left: 50%; translate: -50% 0; }
.ciclo-centro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 150px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; padding: 14px; background: color-mix(in srgb, var(--c, var(--acento)) 12%, var(--fondo)); border: 2px dashed var(--c, var(--acento)); font-weight: 700; font-size: var(--t-xs); line-height: 1.3; z-index: 1; }
.ciclo-centro .vuelta { font-size: 28px; color: var(--c, var(--acento)); }
@media (max-width: 720px) {
  .ciclo-pasos { grid-template-columns: 1fr; gap: 44px; }
  .ciclo-pasos li:nth-child(n) { grid-column: 1; grid-row: auto; }
  .ciclo-pasos li:nth-child(n)::after { content: "↓"; left: 50%; right: auto; top: auto; bottom: -40px; translate: -50% 0; }
  .ciclo-pasos li:nth-child(4)::after { content: "↻ y vuelve a empezar"; font-size: var(--t-s); white-space: nowrap; bottom: -36px; }
  .ciclo-centro { position: static; translate: none; width: auto; aspect-ratio: auto; border-radius: 14px; margin-top: 52px; grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; }
}

/* Curva de grasa y músculo */
.curva svg, .silueta svg { width: 100%; max-width: 720px; height: auto; display: block; }
.curva .zona { fill: color-mix(in srgb, var(--c, var(--acento)) 10%, transparent); }
.curva .zona-t { fill: var(--c, var(--acento)); font: 700 18px var(--f-texto); }
.curva .eje { stroke: var(--linea); stroke-width: 2; }
.curva .marca { stroke: var(--texto-suave); stroke-width: 2; stroke-dasharray: 5 6; }
.curva .pie-t { fill: var(--texto-suave); font: 600 18px var(--f-texto); }
.curva .pie-t.chico { font-size: 14px; font-weight: 400; }
.curva .grasa, .curva .musculo { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.curva .grasa { stroke: var(--c, var(--acento)); }
.curva .musculo { stroke: var(--c-cronicas); }
.curva .grasa-p { fill: var(--c, var(--acento)); }
.curva .musculo-p { fill: var(--c-cronicas); }
.curva .et { font: 700 22px var(--f-texto); }
.curva .grasa-t { fill: var(--c, var(--acento)); }
.curva .musculo-t { fill: var(--c-cronicas); }

/* Siluetas: pera a manzana */
.silueta .torso, .silueta .cabeza-s { fill: color-mix(in srgb, var(--tinta) 10%, var(--superficie)); stroke: color-mix(in srgb, var(--tinta) 30%, transparent); stroke-width: 2; }
.silueta .grasa-z { fill: color-mix(in srgb, var(--c, var(--acento)) 55%, transparent); }
.silueta .flecha-s { fill: none; stroke: var(--texto-suave); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.silueta svg { max-width: 520px; }
.silueta figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 520px; text-align: center; font-size: var(--t-s); color: var(--texto-suave); margin-top: 8px; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); max-width: 960px; }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr; } .silueta figcaption { font-size: var(--t-xs); } }
.senales { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.senales li { padding: 10px 14px 10px 40px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea); position: relative; }
.senales li::before { content: "!"; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%; background: var(--c, var(--acento)); color: #FFFFFF; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.largo p { margin: 0; background: var(--banda); border-radius: var(--radio); padding: 20px 22px; }

.pasos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: paso; }
.pasos li { display: grid; gap: 8px; align-content: start; padding: 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.pasos strong { font-size: var(--t-m); }
.pasos li > span:last-child { color: var(--texto-suave); font-size: var(--t-s); line-height: 1.5; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }
.preguntas-guia { display: grid; gap: 10px; max-width: 72ch; }
.preguntas-guia h2 { margin-bottom: 4px; }
.fuentes-guia { max-width: 80ch; font-size: var(--t-xs); color: var(--texto-suave); }
.fuentes-guia h2 { font-size: var(--t-m); margin-bottom: 6px; color: var(--tinta); }
.fuentes-guia ol { padding-left: 1.2em; display: grid; gap: 6px; }
.fuentes-guia a { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .curva .et { font-size: 32px; }
  .curva .pie-t { font-size: 26px; }
  .curva .zona-t { font-size: 26px; }
  .curva .pie-t.chico { font-size: 20px; }
}

/* App del paciente (portada) */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.app-texto { display: grid; gap: 18px; justify-items: start; }
.app-texto h2 { max-width: 22ch; }
.app-texto p { color: var(--texto-suave); font-size: var(--t-l); line-height: 1.5; max-width: 48ch; }
.app-texto .app-nota { font-size: var(--t-s); color: var(--tinta); font-weight: 600; }
.app-insignia { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--acento); color: var(--accion); font-weight: 600; font-size: var(--t-s); }
.app-insignia .icono { font-size: 20px; }
.app-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.app-lista li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 18px 20px; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease; }
.app-lista li:hover { transform: translateY(-2px); border-color: var(--acento); }
.app-lista .punto { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); border: 2px solid var(--acento); color: var(--accion); font-size: 24px; }
.app-lista h3 { font-size: var(--t-l); margin: 4px 0 6px; }
.app-lista p { color: var(--texto-suave); }
@media (max-width: 860px) { .app-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .app-lista li { transition: none; } .app-lista li:hover { transform: none; } }