/* Dr. Gilberto Chávez · La tarjeta de cita. Reglas en DESIGN.md */

/* Las fuentes viven en el propio sitio (antes venían de Google Fonts): licencia OFL, solo latín (español e inglés).
   Ver fuentes/LICENCIAS.md */
@font-face{font-family:"Jost";src:url(/fuentes/jost.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/fuentes/atkinson.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Kalam";src:url(/fuentes/kalam.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url(/fuentes/cormorant-italica.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Cifras de Jost dentro del texto: el cero de Atkinson viene tachado */
@font-face{font-family:"Cifras";src:url(/fuentes/jost.woff2) format("woff2");font-weight:500 700;font-display:swap;unicode-range:U+0030-0039}

:root{
  --mesa-recepcion:#EEF3F6; --papel-tarjeta:#FFFFFF; --marino-logo:#022A57;
  --aqua-babero:#3CCFC4; --aqua-hondo:#0B7F7A; --acero-logo:#5A8EB1;
  --acero-impreso:#3F7399; --rojo-aviso:#B42318;
  /* Estado del consultorio: colores funcionales, solo para abierto y cerrado */
  --verde-abierto:#127038; --verde-diente:#1F9D55; --verde-claro:#E7F5EC;
  --rojo-diente:#D93A2B; --rojo-claro:#FCECEA;

  --color-dominante:var(--mesa-recepcion); --color-superficie:var(--papel-tarjeta);
  --color-texto:var(--marino-logo); --color-acento:var(--aqua-babero);

  --renglon:rgba(90,142,177,.42);
  --sombra-1:0 0 0 1px rgba(2,42,87,.06),0 1px 1px rgba(2,42,87,.04),0 3px 8px -3px rgba(2,42,87,.12);
  --sombra-2:0 0 0 1px rgba(2,42,87,.06),0 2px 4px rgba(2,42,87,.06),0 16px 30px -12px rgba(2,42,87,.26);
  --sombra-3:0 0 0 1px rgba(2,42,87,.05),0 2px 4px rgba(2,42,87,.06),0 22px 44px -16px rgba(2,42,87,.34),0 50px 90px -40px rgba(2,42,87,.34);
  --r-chip:8px; --r-boton:12px; --r-tarjeta:16px;

  --f-display:'Jost',ui-sans-serif,system-ui,sans-serif;
  --f-texto:'Cifras','Atkinson Hyperlegible Next',ui-sans-serif,system-ui,sans-serif;
  --f-pluma:'Kalam','Comic Sans MS',cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--color-dominante);color:var(--color-texto);font:400 17px/1.55 var(--f-texto)}
img,svg{display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}
.envoltura{max-width:1120px;margin:0 auto;padding:0 20px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-100px;z-index:20;background:var(--papel-tarjeta);padding:10px 14px;border-radius:var(--r-chip);box-shadow:var(--sombra-2);font-weight:700}
.saltar:focus{top:12px}

/* Etiqueta impresa: rotula un dato, como "DENTISTA" del logo */
.etiqueta{font:500 11.5px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--acero-impreso)}

/* ---------- Encabezado ---------- */
.cabeza{position:sticky;top:0;z-index:6;background:var(--mesa-recepcion);transition:box-shadow .2s}
.cabeza.suelta{position:relative}
.cabeza.despegada{box-shadow:0 1px 0 rgba(2,42,87,.08),0 8px 20px -14px rgba(2,42,87,.3)}
.cabeza .envoltura{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca svg{width:36px;height:auto}
.marca b{display:block;font:600 16px/1.1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
.marca small{display:block;font:500 10.5px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--acero-impreso)}
.cabeza-der{display:flex;align-items:center;gap:16px}
.abierto{display:flex;align-items:center;gap:7px;font:600 14.5px/1.2 var(--f-texto);color:var(--verde-abierto);text-align:right}
.abierto::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.abierto.cerrado{color:var(--rojo-aviso)}
.cabeza .boton{display:none;white-space:nowrap}
/* Estado: el botón es un tubo de pasta de dientes acostado. Bordes del color del estado,
   cuerpo en un tono suave para que el texto resalte; la cola sellada a la izquierda y la tapa con estrías a la derecha */
.estado{--pasta:var(--acero-logo);--pasta-fondo:var(--papel-tarjeta);--pasta-texto:var(--acero-impreso);position:relative;display:inline-flex;align-items:center;height:44px;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.estado--abierto{--pasta:var(--verde-diente);--pasta-fondo:var(--verde-claro);--pasta-texto:var(--verde-abierto)}
.estado--cerrado{--pasta:var(--rojo-diente);--pasta-fondo:var(--rojo-claro);--pasta-texto:var(--rojo-aviso)}
.pasta-cola{flex:none;width:10px;height:40px;margin-right:-2px;border:2px solid var(--pasta);border-radius:3px;
  background:repeating-linear-gradient(180deg,transparent 0 3px,color-mix(in srgb,var(--pasta) 40%,transparent) 3px 4.5px) var(--pasta-fondo)}
.pasta-cuerpo{position:relative;z-index:1;display:grid;align-content:center;height:36px;padding:0 14px 0 12px;border:2px solid var(--pasta);border-radius:6px 16px 16px 6px;background:var(--pasta-fondo);color:var(--pasta-texto);text-align:left;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 0 color-mix(in srgb,var(--pasta) 14%,transparent),0 4px 10px -6px rgba(2,42,87,.35)}
.pasta-cuerpo b{font:600 13.5px/1.15 var(--f-display)}
.pasta-cuerpo small{font:500 11px/1.25 var(--f-display);white-space:nowrap}
.pasta-tapa{flex:none;display:flex;align-items:center;margin-left:-2px}
/* Cuello y tapa con estrías */
.pasta-tapa::before{content:"";width:6px;height:17px;border-block:2px solid var(--pasta);border-radius:0 3px 3px 0;background:var(--pasta-fondo)}
.pasta-tapa::after{content:"";width:13px;height:24px;border-radius:3px 4px 4px 3px;background:repeating-linear-gradient(90deg,transparent 0 2.5px,rgba(255,255,255,.4) 2.5px 3.5px) var(--pasta)}
.pasta-tapa::after{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
/* Cerrado: al pasar el mouse la tapa se gira, como si la quisieras abrir */
.estado--cerrado:hover .pasta-tapa::after{animation:girar-tapa .45s ease-in-out}
@keyframes girar-tapa{30%{transform:rotate(-10deg)}70%{transform:rotate(8deg)}}
/* Faltan 10 minutos: la tapa ya se aflojó */
.estado--por-abrir .pasta-tapa::after{transform:translateX(3px) rotate(16deg)}
.estado--por-abrir{padding-right:3px}
/* Abierto: sin tapa y con la pasta saliendo de verdad: tira ondulada blanca con raya aqua.
   Se dibuja como si la apretaras al abrir y otra vez al pasar el mouse */
.pasta-chorro{display:none;flex:none;width:35px;height:25px;margin-left:-3px}
.estado--abierto .pasta-tapa::after{width:10px;height:12px;border:2px solid var(--pasta);border-left:0;border-radius:0 3px 3px 0;background:repeating-linear-gradient(100deg,var(--pasta-fondo) 0 1.6px,var(--pasta) 1.6px 3px)}
.estado--abierto .pasta-chorro{display:block;stroke-dasharray:100;animation:sale-pasta .9s .15s cubic-bezier(.3,.7,.3,1) both}
.estado--abierto:hover .pasta-chorro{animation:sale-pasta .7s cubic-bezier(.3,.7,.3,1)}
@keyframes sale-pasta{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.estado:active{transform:translateY(1px)}
.estado:focus-visible{outline:3px solid var(--marino-logo);outline-offset:3px;border-radius:12px}
.nav{display:none;gap:2px}
.nav a{position:relative;padding:10px 10px;white-space:nowrap;border-radius:8px;font:500 15.5px/1 var(--f-display);color:var(--marino-logo);text-decoration:none}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--aqua-babero);transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a[aria-current="true"]::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:0}
.menu-boton,.menu-cerrar{display:inline-flex;align-items:center;gap:10px;min-height:44px;border:0;color:var(--marino-logo);font:600 15.5px/1 var(--f-display);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Botón ES/EN: una tarjetita de fichero con los dos idiomas en renglones impresos; el de la página
   va en tinta marino subrayado en aqua. La esquina doblada es "el otro lado de la tarjeta" y se levanta al pasar */
.idioma{position:relative;display:grid;grid-template-rows:1fr 1fr;align-items:center;justify-items:center;flex:none;width:36px;height:44px;padding:5px 0 4px;border-radius:6px 3px 6px 6px;background:var(--papel-tarjeta);box-shadow:inset 0 1px 0 #fff,var(--sombra-1);font:600 11.5px/1 var(--f-display);letter-spacing:.1em;color:var(--acero-impreso);text-decoration:none;overflow:hidden;transition:box-shadow .15s,transform .15s}
.idioma span{position:relative;z-index:1;padding-left:.1em}
/* El renglón que separa los dos idiomas */
.idioma::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:1px solid var(--renglon)}
/* La esquina doblada */
.idioma::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;border-bottom-left-radius:3px;background:linear-gradient(225deg,var(--mesa-recepcion) 50%,#D5E0E8 50%);box-shadow:-1px 1px 1.5px rgba(2,42,87,.14);transition:width .2s cubic-bezier(.2,.8,.2,1),height .2s cubic-bezier(.2,.8,.2,1)}
html[lang^="es"] .idioma-es,html[lang^="en"] .idioma-en{color:var(--marino-logo);font-weight:700;text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:3px}
.idioma:hover{box-shadow:inset 0 1px 0 #fff,var(--sombra-2);transform:translateY(-1px)}
.idioma:hover::after{width:14px;height:14px}
.idioma:active{transform:translateY(1px)}
.idioma:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
/* En el teléfono el ES/EN vive dentro del menú, en horizontal: la misma tarjetita, con los idiomas lado a lado */
.menu-idioma{display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 14px;border-bottom:1.5px solid var(--renglon)}
.menu-idioma .idioma-horizontal{grid-template-rows:none;grid-template-columns:1fr 1fr;width:84px;height:38px;padding:0 4px;font-size:13px}
.menu-idioma .idioma-horizontal::before{left:50%;right:auto;top:9px;bottom:9px;border-top:0;border-left:1px solid var(--renglon)}
.menu-boton{padding:0 14px 0 12px;border-radius:var(--r-boton);background:var(--papel-tarjeta);box-shadow:var(--sombra-1)}
.menu-boton:active{transform:translateY(1px)}
.menu-cerrar{padding:0 4px;background:none}
.menu-boton:focus-visible,.menu-cerrar:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
/* El botón del menú es un cepillo de dientes visto desde arriba: las tres líneas son hileras de cerdas
   y el mango sale de la de en medio. Cuando el consultorio está abierto, el cepillo tiene pasta
   (la misma tira de la pasta del encabezado). Al abrir el menú, las cerdas se cruzan en X */
.menu-boton .menu-lineas{position:relative;gap:3.5px;width:15px;margin-right:9px}
.menu-boton .menu-lineas i{height:3px;border-radius:1px;background:repeating-linear-gradient(90deg,currentColor 0 2.4px,transparent 2.4px 3.5px)}
.menu-boton .menu-lineas::after{content:"";position:absolute;left:calc(100% + 1px);top:50%;width:9px;height:3px;margin-top:-1.5px;border-radius:1px 3px 3px 1px;background:currentColor;transition:opacity .2s,transform .2s}
.menu-boton .menu-lineas::before{content:"";position:absolute;left:0;bottom:calc(100% + 2px);width:14px;height:4px;border-radius:3px;background:linear-gradient(#fff 0 45%,var(--aqua-babero) 45%);box-shadow:0 0 0 1px var(--marino-logo);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.estado--abierto~.menu-boton .menu-lineas::before{opacity:1;transform:none}
.menu-boton[aria-expanded="true"] .menu-lineas i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-lineas i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu-boton[aria-expanded="true"] .menu-lineas::after,.menu-boton[aria-expanded="true"] .menu-lineas::before{opacity:0;transform:scaleX(0)}
/* La X de "Cerrar" del menú también son cerdas cruzadas */
.menu-cerrar .menu-lineas i{height:3px;border-radius:1px;background:repeating-linear-gradient(90deg,currentColor 0 2.4px,transparent 2.4px 3.5px)}
.menu-lineas{display:grid;gap:4px;width:20px}
.menu-lineas i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-boton[aria-expanded="true"] .menu-lineas i:nth-child(1),.en-x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-lineas i:nth-child(2),.en-x i:nth-child(2){opacity:0}
.menu-boton[aria-expanded="true"] .menu-lineas i:nth-child(3),.en-x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Menú del celular: una tarjeta que baja sobre la mesa */
.menu{position:fixed;inset:0;z-index:40}
.menu[hidden]{display:none}
.menu-fondo{position:absolute;inset:0;background:rgba(2,42,87,.32)}
.menu-hoja{position:absolute;left:10px;right:10px;top:10px;max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-3);padding:10px 18px 20px;animation:baja .22s cubic-bezier(.2,.8,.2,1)}
@keyframes baja{from{opacity:0;transform:translateY(-12px)}}
.menu-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1.5px solid var(--marino-logo)}
.menu-lista{list-style:none;margin:0 0 18px;padding:0}
.menu-lista li{border-bottom:1.5px solid var(--renglon)}
.menu-lista a{display:block;padding:13px 4px;text-decoration:none;border-radius:8px}
.menu-lista a:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-3px}
.menu-lista b{display:block;font:600 21px/1.2 var(--f-display);letter-spacing:-.01em}
.menu-lista span{display:block;margin-top:2px;font-size:14.5px;line-height:1.35;color:var(--acero-impreso)}
body.con-menu{overflow:hidden}

/* ---------- Botones ---------- */
.boton{--alto:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--alto);padding:0 22px;border-radius:var(--r-boton);border:0;font:600 17px/1 var(--f-display);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,background-color .16s;-webkit-tap-highlight-color:transparent}
.boton svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.boton-principal{background-color:var(--aqua-babero);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);color:var(--marino-logo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(2,42,87,.16),0 1px 2px rgba(2,42,87,.16),0 12px 24px -12px rgba(11,127,122,.75)}
.boton-principal .flecha{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.boton-principal:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(2,42,87,.16),0 2px 4px rgba(2,42,87,.14),0 18px 30px -12px rgba(11,127,122,.8)}
.boton-principal:hover .flecha{transform:translateX(3px)}
.boton-principal:active{transform:translateY(1px);background-image:none;box-shadow:inset 0 2px 4px rgba(2,42,87,.22),0 1px 1px rgba(2,42,87,.12)}
.boton-secundario{background:var(--papel-tarjeta);color:var(--marino-logo);box-shadow:inset 0 0 0 1px rgba(2,42,87,.14),inset 0 -2px 0 rgba(2,42,87,.05),0 1px 2px rgba(2,42,87,.06),0 6px 14px -8px rgba(2,42,87,.25)}
.boton-secundario:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(2,42,87,.2),inset 0 -2px 0 rgba(2,42,87,.05),0 2px 4px rgba(2,42,87,.06),0 12px 22px -10px rgba(2,42,87,.3)}
.boton-secundario:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px rgba(2,42,87,.2),inset 0 2px 3px rgba(2,42,87,.1)}
.boton:focus-visible{outline:3px solid var(--marino-logo);outline-offset:3px}
.boton-secundario:focus-visible{outline-color:var(--aqua-hondo)}
.boton-icono{width:56px;padding:0}
.boton-icono svg{width:24px;height:24px}
.boton-chico{--alto:48px;padding:0 18px;font-size:16px}
.enlace{color:var(--marino-logo);font-weight:600;text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:4px;background:none;border:0;padding:0;font-size:inherit;font-family:inherit;cursor:pointer}
.enlace:hover{text-decoration-color:var(--marino-logo)}
.enlace:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:3px;border-radius:2px}
/* Simetría: los botones de un mismo grupo miden lo mismo */
.botones{display:grid;gap:10px}

/* ---------- Tarjeta de cita ---------- */
.tarjeta-cita{position:relative;display:block;background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-3);padding:18px 20px 20px;max-width:460px;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tarjeta-cita.inclinada{transform:rotate(-2deg)}
a.tarjeta-cita.inclinada:hover{transform:rotate(-1.2deg) translateY(-3px)}
a.tarjeta-cita:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:4px}
.tc-cabeza{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1.5px solid var(--marino-logo)}
.tc-cabeza svg{width:40px;height:auto;flex:none}
.tc-nombre{font:600 15.5px/1.2 var(--f-display);letter-spacing:-.005em}
.tc-cedula{margin-top:3px}
.tc-titulo{margin:14px 0 0;font:600 16px/1.2 var(--f-display);letter-spacing:-.005em}
.tc-renglones{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:18px}
.renglon{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:58px;padding-top:8px;border-bottom:1.5px solid var(--renglon)}
.renglon.ancho{grid-column:1/-1}
.renglon.ultimo{padding-right:84px}
.valor{display:block;min-height:34px;font:400 24px/1.4 var(--f-pluma);color:var(--marino-logo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.valor.escribe{animation:pluma .38s cubic-bezier(.4,0,.2,1) both}
@keyframes pluma{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -4px 0 0)}}

.sello{position:absolute;right:12px;bottom:8px;width:76px;height:76px;color:var(--acero-logo);pointer-events:none}
.sello .vacio{position:absolute;inset:4px;border:1.5px dashed rgba(90,142,177,.45);border-radius:50%;display:grid;place-items:center;font:500 9.5px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:rgba(63,115,153,.7)}
.sello .tinta{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.25) rotate(-16deg);--jg-a:var(--acero-logo);--jg-b:var(--acero-logo)}
.sellada .sello .vacio{opacity:0}
.sellada .sello .tinta{opacity:.9;transform:scale(1) rotate(-8deg);transition:transform .22s cubic-bezier(.3,1.4,.5,1),opacity .12s}
.sellada.asienta{animation:asienta .26s .16s ease-out}
@keyframes asienta{50%{transform:translateY(1.5px)}}

/* ---------- Portada: la tarjeta de presentación con el logo ---------- */
.portada-logo{display:grid;align-content:center;min-height:calc(100svh - 68px - 96px);padding:8px 0 24px}
.portada-centro{display:grid;justify-items:center;gap:20px;width:100%;text-align:center}
.presentacion{display:grid;justify-items:center;gap:clamp(16px,3.2vw,26px);width:100%;max-width:640px;padding:clamp(30px,6vw,52px) clamp(22px,5vw,60px) clamp(26px,5vw,44px);background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-2)}
.presentacion-logo{margin:0;width:min(100%,460px)}
.presentacion-logo img{width:100%;height:auto}
/* La promesa del doctor: el título en cursiva clásica, como lema, y la explicación en letra de texto.
   Con aire arriba para que no se pegue al logo, y en escritorio cada parte en un solo renglón */
.filosofia{display:grid;justify-items:center;gap:clamp(8px,1.4vw,12px);margin-top:clamp(6px,1.6vw,14px);width:100%}
.filosofia-titulo{font:italic 500 clamp(1.6rem,5vw,2.2rem)/1.1 'Cormorant Garamond',Georgia,serif;color:var(--marino-logo);letter-spacing:.005em}
.filosofia-texto{max-width:46ch;font:400 clamp(16px,1.8vw,18px)/1.5 var(--f-texto);color:var(--acero-impreso);text-wrap:balance}
.portada-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:640px}
.portada-botones .boton{padding:0 12px;gap:8px}
/* En los celulares más angostos "Tratamientos" ya no cabe lado a lado con el mismo ancho: uno bajo otro */
@media (max-width:359px){.portada-botones{grid-template-columns:1fr}}
.bajar{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;font:500 15px/1 var(--f-display);color:var(--acero-impreso);text-decoration:none;border-radius:8px}
.bajar svg{width:18px;height:18px;transform:rotate(90deg);transition:transform .2s}
.bajar:hover{color:var(--marino-logo)}
.bajar:hover svg{transform:rotate(90deg) translateX(3px)}
.bajar:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
/* En la portada el logo grande ya dice quién es: la marca del encabezado aparece al bajar */
.cabeza .marca{transition:opacity .2s,visibility .2s}
.inicio:not(.sin-portada) .cabeza .marca{opacity:0;visibility:hidden}

/* ---------- Segunda pantalla: la tarjeta que se llena ---------- */
.tu-cita .seccion-cabeza{margin-bottom:0}
.tu-cita .ficha-hoy{margin-top:28px}
.tu-cita-elige{display:grid;gap:12px}
.tu-cita-elige .paso-sub{margin:0}
a.chip{display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none}
.chip.elegido{background:var(--aqua-babero);transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(2,42,87,.2),0 0 0 1px rgba(2,42,87,.08)}
.chip.elegido small{color:var(--marino-logo)}

/* ---------- Lista de precios, como la impresa: nombre, puntos y precio ---------- */
.lista-cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1.5px solid var(--marino-logo)}
.lista-marca{display:flex;align-items:center;gap:10px}
.lista-marca svg{width:30px;height:auto}
.lista-marca b{font:600 19px/1.2 var(--f-display)}
/* Precios: fichas de precio en un carril que se desliza de lado, con flechas y barrita de avance */
.precios{display:grid;gap:12px}
.precios-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1.5px solid var(--marino-logo)}
.precios-flechas{display:flex;gap:8px}
.flecha-boton{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--papel-tarjeta);color:var(--marino-logo);box-shadow:var(--sombra-1);cursor:pointer;transition:box-shadow .15s,transform .15s,opacity .15s}
.flecha-boton .flecha{width:20px;height:20px}
.flecha-boton[data-carril="atras"] .flecha{transform:rotate(180deg)}
.flecha-boton:hover:not(:disabled){box-shadow:var(--sombra-2);transform:translateY(-1px)}
.flecha-boton:active:not(:disabled){transform:translateY(1px)}
.flecha-boton:disabled{opacity:.35;cursor:default;box-shadow:inset 0 0 0 1px rgba(2,42,87,.12)}
.flecha-boton:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
/* El carril se sale al margen de la página para que se vea que sigue */
.precios-carril{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;margin:0 -20px;padding:8px 20px 20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
.precios-carril::-webkit-scrollbar{display:none}
/* La orilla se desvanece donde todavía hay fichas, para que se note que el carril sigue */
.precios-carril.hay-mas{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.precios-carril.hay-antes{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px);mask-image:linear-gradient(to right,transparent,#000 56px)}
.precios-carril.hay-antes.hay-mas{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.precios-carril:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-3px;border-radius:var(--r-tarjeta)}
.precio-ficha{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;gap:6px;min-height:264px;padding:18px 18px 16px;scroll-snap-align:start;background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:inset 0 1px 0 #fff,var(--sombra-1);transition:box-shadow .16s,transform .16s cubic-bezier(.2,.8,.2,1)}
.precio-ficha .ficha-picto{margin-bottom:8px}
.precio-ficha>.flecha{position:absolute;top:30px;right:20px;width:20px;height:20px;color:var(--acero-logo);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .15s}
.precio-ficha h3{font:600 20px/1.2 var(--f-display);letter-spacing:-.01em}
.precio-ficha h3 a{color:var(--marino-logo);text-decoration:none}
/* Toda la ficha lleva a la página del tratamiento */
.precio-ficha h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-tarjeta)}
.precio-ficha:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,var(--sombra-2)}
.precio-ficha:hover>.flecha{transform:translateX(3px);color:var(--marino-logo)}
.precio-ficha:hover .ficha-picto{background:#fff}
.precio-ficha:has(h3 a:focus-visible){outline:3px solid var(--aqua-hondo);outline-offset:2px}
.precio-ficha h3 a:focus-visible{outline:0}
.precio-sub{font-size:15.5px;line-height:1.35;color:var(--acero-impreso)}
/* El renglón impreso de "Precio", como los de la tarjeta de cita; todas las fichas lo tienen a la misma altura */
.precio-renglon{display:grid;align-content:end;gap:6px;align-self:end;min-height:84px;margin-top:10px;padding-top:12px;border-top:1.5px dashed var(--renglon)}
.precio-renglon b{font:600 17px/1.25 var(--f-display);color:var(--marino-logo)}
.precio-renglon .boton{position:relative;z-index:1;width:100%}
.precio-ficha-diagnostico{box-shadow:inset 0 4px 0 var(--aqua-babero),var(--sombra-1)}
.precio-ficha-diagnostico:hover{box-shadow:inset 0 4px 0 var(--aqua-babero),var(--sombra-2)}
.precios-avance{justify-self:center;width:min(220px,60%);height:4px;margin-top:-8px;border-radius:4px;background:rgba(90,142,177,.22);overflow:hidden}
.precios-avance span{display:block;width:30%;height:100%;border-radius:inherit;background:var(--aqua-babero)}
.precios-aviso{display:grid;justify-items:center;gap:14px;margin-top:6px;text-align:center}
.precios-aviso p{font-size:15.5px;color:var(--acero-impreso);max-width:52ch}
.precios-aviso .botones{width:100%}
.lista-pie{display:grid;justify-items:center;gap:14px;margin-top:6px;padding-top:18px;border-top:1.5px solid var(--marino-logo);text-align:center}
.lista-pie p{font-size:15.5px;color:var(--acero-impreso);max-width:46ch}
.lista-pie .botones{width:100%}
.puntos{flex:1;min-width:20px;border-bottom:2px dotted rgba(90,142,177,.55);transform:translateY(6px)}

/* ---------- Portada ---------- */
.portada{display:grid;gap:28px;padding:8px 0 28px}
.titular{font:600 clamp(3.1rem,9vw,5rem)/1 var(--f-display);letter-spacing:-.03em;max-width:12ch}
.bajada{margin-top:14px;font-size:18px;max-width:34ch}
.bajada b{font-weight:700}
.portada .botones{margin-top:26px}
.portada-papeles{position:relative;padding:10px 4px 18px}
.papel-atras{display:none}
.ficha-hoy{display:grid;background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);padding:4px 20px}
.hoy-dato{display:grid;gap:5px;padding:14px 0;border-bottom:1.5px solid var(--renglon)}
.hoy-dato:last-child{border-bottom:0}
.hoy-dato p{font:500 17px/1.4 var(--f-display)}
.hoy-dato .abierto{text-align:left;font:600 17px/1.4 var(--f-display)}

/* ---------- Secciones ---------- */
.seccion{padding:72px 0 0}
/* Título de sección como pestaña de fichero: la pestaña marino con el título y,
   debajo, el filo que cruza todo el ancho, como los separadores del archivo del consultorio */
.seccion-cabeza{display:grid;margin-bottom:26px}
.seccion-cabeza>*{order:4}
.seccion-cabeza::before{content:"";order:2;height:3px;margin-bottom:14px;border-radius:0 2px 2px 2px;background:var(--marino-logo)}
.seccion-titulo{order:1;justify-self:start;max-width:100%;padding:13px 22px 11px;border-radius:14px 14px 0 0;background:var(--marino-logo);color:#fff;font:700 clamp(1.5rem,4.6vw,2.35rem)/1.12 var(--f-display);letter-spacing:-.02em;box-shadow:inset 0 3px 0 var(--aqua-babero)}
.seccion-bajada{order:3;font-size:18px;color:var(--acero-impreso);max-width:52ch;text-wrap:pretty}
/* Tu primera cita: la hoja del plan de tratamiento que te llevas */
.primera-botones{margin-top:20px}
.plan{display:grid}
.plan-cabeza{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1.5px solid var(--marino-logo)}
.plan-cabeza svg{width:36px;height:auto;flex:none}
.plan-cabeza h3{font:600 19px/1.2 var(--f-display)}
.plan-cabeza .etiqueta{margin-top:3px}
.plan-renglones{list-style:none;margin:4px 0 0;padding:0}
.plan-renglones li{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1.5px solid var(--renglon)}
.plan-renglones li:last-child{border-bottom:0}
.plan-renglones .picto{width:24px;height:24px;margin-top:2px;color:var(--aqua-hondo)}
.plan-renglones li>span{display:grid;gap:4px;font-size:17px}
.plan-pie{margin-top:4px;padding-top:14px;border-top:1.5px solid var(--marino-logo);text-align:center;font-size:16px;color:var(--acero-impreso)}

/* El reverso de la tarjeta: impreso en marino */
.banda{margin-top:80px;padding:72px 0;background:var(--marino-logo);color:#fff}
.banda .seccion-bajada{color:#C9DBE8}
.banda .seccion-titulo{background:#fff;color:var(--marino-logo)}
.banda .seccion-cabeza::before{background:#fff}
/* El reverso: una tarjeta un tono más clara que la banda, con el monograma de marca de agua */
.reverso{position:relative;display:grid;gap:26px;padding:26px 22px;border-radius:var(--r-tarjeta);background:#0A3666;box-shadow:inset 0 0 0 1px rgba(169,198,221,.22),inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -24px rgba(0,0,0,.5);overflow:hidden}
.reverso-marca{position:absolute;right:-28px;bottom:-34px;width:210px;height:auto;opacity:.07;--jg-a:#fff;--jg-b:#fff;pointer-events:none}
/* Pasos: en el celular uno bajo otro unidos por una línea; en escritorio, tres columnas iguales */
.pasos-agenda{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:22px}
.pasos-agenda li{position:relative;display:flex;gap:16px}
.pasos-agenda li:not(:last-child)::after{content:"";position:absolute;left:19px;top:46px;bottom:-18px;width:2px;border-radius:2px;background:rgba(60,207,196,.4)}
.pasos-agenda b{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0A3666;box-shadow:inset 0 0 0 1.5px var(--aqua-babero);color:var(--aqua-babero);font:600 18px/1 var(--f-display)}
.pasos-agenda span{font-size:17px;color:#C9DBE8}
.pasos-agenda strong{display:block;margin-bottom:2px;color:#fff;font-weight:700}
.antes{position:relative;padding-top:22px;border-top:1.5px solid rgba(169,198,221,.3)}
.antes h3{margin-bottom:12px;font:600 21px/1.2 var(--f-display)}
.antes ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.antes li{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(169,198,221,.18);color:#E6EEF4}
.antes li svg{width:26px;height:26px;flex:none;color:var(--aqua-babero);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.banda-boton{margin-top:28px}
.banda-boton .boton{width:100%}
.banda .boton:focus-visible,.banda .enlace:focus-visible{outline-color:#fff}

/* El doctor */

/* Minimapa con los colores del sitio y el consultorio marcado con el logo */
.mapa{position:relative;margin:16px 0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--mesa-recepcion);box-shadow:inset 0 0 0 1px rgba(2,42,87,.08)}
.mapa-espera{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;padding:16px;font:500 15px/1.3 var(--f-display);color:var(--acero-impreso);text-align:center}
.mapa .maplibregl-canvas{outline:0}
.mapa-pin{display:block;width:54px;height:66px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(2,42,87,.35))}
.mapa-pin{position:relative}
.mapa-pin-cara{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#fff;box-shadow:inset 0 4px 0 var(--aqua-babero),inset 0 0 0 2.5px var(--marino-logo)}
/* El punto exacto de la puerta, en aqua */
.mapa-pin::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--aqua-babero);box-shadow:0 0 0 2px #fff}
.mapa-pin-cara svg{width:36px;height:auto}
/* La punta del marcador, que cae justo en la puerta */
.mapa-pin-cara::after{content:"";position:absolute;left:50%;bottom:-11px;width:16px;height:16px;margin-left:-8px;background:var(--marino-logo);clip-path:polygon(0 0,100% 0,50% 100%)}
.mapa-pin:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:3px;border-radius:14px}
.mapa .maplibregl-popup-content{padding:12px 14px;border-radius:12px;box-shadow:var(--sombra-2);font-family:var(--f-texto)}
.mapa .maplibregl-popup-content b{display:block;font:600 15px/1.2 var(--f-display);color:var(--marino-logo)}
.mapa .maplibregl-popup-content span{display:block;margin-top:2px;font-size:13.5px;color:var(--acero-impreso)}
.mapa .maplibregl-popup-content a{display:inline-block;margin-top:8px;font:600 14px/1 var(--f-display);color:var(--marino-logo);text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:4px}
.mapa .maplibregl-ctrl-group{border-radius:10px;box-shadow:var(--sombra-1)}
.mapa .maplibregl-ctrl-attrib{font-size:10.5px}
.horario-hoy{margin-top:14px;text-align:left}

/* Contacto: la foto del doctor prendida con un clip, como en su expediente, y los medios en cuadrícula pareja */
.contacto{display:grid;gap:20px;grid-template-areas:"cabeza" "foto" "medios"}
.contacto>.seccion-cabeza{grid-area:cabeza;margin-bottom:0}
.contacto-foto{grid-area:foto;position:relative;width:min(100%,300px);margin:10px auto 6px;padding:12px 12px 16px;border-radius:6px;background:var(--papel-tarjeta);box-shadow:var(--sombra-2);transform:rotate(1.5deg)}
.foto-marco{aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--mesa-recepcion)}
.foto-marco img{width:100%;height:100%;object-fit:cover}
.foto-vacia{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(160deg,#F6F9FB,#E2EAF0)}
.foto-vacia svg{width:46%;height:auto}
.foto-clip{position:absolute;top:-18px;left:30px;width:36px;height:36px;color:var(--acero-logo);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform:rotate(-10deg);filter:drop-shadow(0 1px 1px rgba(2,42,87,.25))}
.contacto-foto figcaption{display:grid;gap:2px;margin-top:12px;text-align:center}
.contacto-foto figcaption b{font:600 16px/1.25 var(--f-display)}
.contacto-foto figcaption span{font-size:14px;color:var(--acero-impreso)}
.contacto-medios{grid-area:medios;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.medio{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border-radius:var(--r-boton);background:var(--papel-tarjeta);color:var(--marino-logo);text-decoration:none;box-shadow:var(--sombra-1);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;-webkit-tap-highlight-color:transparent}
.medio>svg{width:26px;height:26px;flex:none;color:var(--acero-logo);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:color .15s}
.medio>span{display:grid;gap:2px;min-width:0}
.medio b{font:600 16.5px/1.2 var(--f-display)}
.medio small{font:500 13px/1.25 var(--f-display);color:var(--acero-impreso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.medio:hover{transform:translateY(-1px);box-shadow:var(--sombra-2)}
.medio:hover>svg{color:var(--marino-logo)}
.medio:active{transform:translateY(1px)}
.medio:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
/* Los cuatro de abajo: ícono arriba y texto centrado, para que el dato completo quepa (@usuario, correo) */
.medio:not(.medio-principal){flex-direction:column;justify-content:center;gap:7px;min-height:118px;padding:14px 10px;text-align:center}
.medio:not(.medio-principal)>span{justify-items:center;width:100%}
/* Un correo largo baja a un segundo renglón en vez de cortarse */
.medio:not(.medio-principal) small{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
/* WhatsApp es el canal principal: a todo el ancho y en aqua, como el botón de agendar */
.medio-principal{grid-column:1/-1;background-color:var(--aqua-babero);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(2,42,87,.16),0 1px 2px rgba(2,42,87,.16),0 12px 24px -12px rgba(11,127,122,.75)}
.medio-principal>svg,.medio-principal:hover>svg{color:var(--marino-logo)}
.medio-principal small{color:var(--marino-logo)}
.medio-principal .flecha{margin-left:auto;width:20px;height:20px;stroke-width:2}
/* Mientras no tengamos el dato: borde punteado, como un horario "lleno" */
.medio.copiado small{color:var(--aqua-hondo);font-weight:600}
.medio[data-pendiente]{pointer-events:none;background:transparent;box-shadow:none;border:1.5px dashed rgba(90,142,177,.6)}
.medio[data-pendiente] b{color:var(--acero-impreso)}

/* Preguntas */
/* Si vienes de Arizona: los datos del viaje a la izquierda y el itinerario impreso a la derecha */
.viaje{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.viaje [hidden]{display:none!important}
.viaje-datos{display:grid;align-content:start;gap:24px}
.viaje-campo{display:grid;gap:10px}
.viaje-origen{display:grid;gap:10px}
.viaje-select{width:100%;height:48px;padding:0 40px 0 14px;border:0;border-radius:var(--r-boton);background:var(--mesa-recepcion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23022A57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;box-shadow:inset 0 0 0 1.5px var(--renglon);font:500 17px/1 var(--f-display);color:var(--marino-logo);appearance:none;-webkit-appearance:none;cursor:pointer}
.viaje-select:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
.viaje-aviso{font-size:15px;color:var(--acero-impreso)}
.viaje-cuando{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.viaje-cuando .campo{min-width:0}
.viaje-cuando .campo input{width:100%;min-width:0;font-family:var(--f-display);font-size:17px;font-variant-numeric:tabular-nums}
.viaje-nota{font-size:14.5px;color:var(--acero-impreso)}
.viaje-vacio{display:flex;align-items:center;gap:14px;color:var(--acero-impreso)}
.viaje-vacio .picto{width:32px;height:32px}
.viaje-hoja{display:grid;gap:4px}
.viaje-alerta{margin-top:12px;padding:10px 12px;border-radius:var(--r-chip);background:var(--rojo-claro);color:var(--rojo-aviso);font-weight:600;font-size:15.5px}
/* El itinerario: la hora a la izquierda, como los renglones de una agenda impresa */
.itinerario{list-style:none;margin:4px 0 0;padding:0}
.itinerario li{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:start;padding:13px 0;border-bottom:1.5px solid var(--renglon)}
.itinerario li:last-child{border-bottom:0}
.itinerario time{padding-top:1px;font:600 16px/1.3 var(--f-display);font-variant-numeric:tabular-nums;color:var(--marino-logo);white-space:nowrap}
.itinerario li>span{display:grid;gap:3px;font-size:15.5px;line-height:1.45;color:var(--acero-impreso)}
.itinerario b{font:600 17px/1.25 var(--f-display);color:var(--marino-logo)}
.itinerario li>span>span b{font:inherit;font-weight:700;color:var(--marino-logo)}
/* La cita y la fila de regreso, que es lo que el paciente viene a saber */
.itinerario-cita time{justify-self:start;padding:3px 7px;margin:-3px 0 0 -7px;border-radius:6px;background:var(--aqua-babero)}
.itinerario-fila time{color:var(--aqua-hondo)}
.viaje-bloques{display:grid;gap:16px;margin-top:6px;padding-top:16px;border-top:1.5px solid var(--marino-logo)}
.viaje-bloque h4{margin-bottom:6px;font:600 17px/1.2 var(--f-display)}
.viaje-bloque p{font-size:15.5px;color:var(--acero-impreso)}
.viaje-bloque p b{color:var(--marino-logo)}
.viaje-consejos{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.viaje-consejos li{display:flex;gap:10px;font-size:15.5px;line-height:1.45;color:var(--marino-logo)}
.viaje-consejos li::before{content:"";flex:none;width:7px;height:7px;margin-top:.6em;border-radius:50%;background:var(--aqua-hondo)}
.viaje-botones{margin-top:16px}
/* La fila de las tres garitas en vivo */
.garitas-vivo{display:grid;gap:12px;margin-top:18px}
.garitas-cabeza{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding-bottom:10px;border-bottom:1.5px solid var(--marino-logo)}
.garitas-cabeza h3{font:600 18px/1.2 var(--f-display)}
.garitas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.garita{display:grid;align-content:start;gap:4px;padding:12px;border-radius:var(--r-boton);background:var(--mesa-recepcion);font-size:14.5px;color:var(--acero-impreso)}
.garita b{font:600 16px/1.2 var(--f-display);color:var(--marino-logo)}
.garita strong{font:600 15px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--marino-logo)}
.garita-sin{font-size:13.5px;color:var(--acero-impreso)}
.garitas-nota{font-size:14.5px;color:var(--acero-impreso)}
.viaje-pie{margin-top:14px;max-width:72ch;font-size:14px;color:var(--acero-impreso)}
/* Tu viaje desde Arizona en la agenda: sale abajo de la tarjeta, ya con el día y la hora de la cita */
.viaje-agenda{padding:8px 0 56px;scroll-margin-top:84px}
.viaje-agenda[hidden],.viaje-pregunta[hidden]{display:none}
.ficha.viaje-pregunta{display:grid;gap:8px;margin-top:18px;box-shadow:inset 0 3px 0 var(--aqua-babero),var(--sombra-1)}
.viaje-pregunta .botones{margin-top:6px}
/* ¿Vienes de Arizona?: aviso que se queda sobre la mesa, arriba del dock en el celular y en la esquina en escritorio */
.aviso-arizona{position:fixed;left:10px;right:10px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:9;max-width:400px;max-height:calc(100dvh - 96px - 72px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;margin:0 auto;padding:18px;border-radius:var(--r-tarjeta);background:var(--papel-tarjeta);box-shadow:inset 0 3px 0 var(--aqua-babero),var(--sombra-3);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.aviso-arizona.visible{opacity:1;transform:none}
.aviso-arizona[hidden],.aviso-arizona-cuerpo[hidden]{display:none}
.aviso-arizona-cuerpo{display:grid;gap:8px}
.aviso-arizona-titulo{display:flex;align-items:center;gap:10px;padding-right:44px;font:700 20px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--marino-logo)}
.aviso-arizona-titulo svg{flex:none;width:28px;height:28px;fill:none;stroke:var(--acero-logo);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.aviso-arizona-cuerpo>p+p{font-size:15.5px;line-height:1.45;color:var(--acero-impreso)}
/* Simetría: los dos botones del mismo ancho, uno bajo otro (el texto de "Sí" no cabe en media tarjeta) */
.aviso-arizona-botones{display:grid;gap:10px;margin-top:8px}
.aviso-arizona-botones .boton{width:100%}
.aviso-arizona-cerrar{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--marino-logo);cursor:pointer}
.aviso-arizona-cerrar:hover{background:var(--mesa-recepcion)}
.aviso-arizona-cerrar:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px}
.aviso-arizona-cerrar .menu-lineas{width:18px}
/* Después del "sí": de dónde viene, para que su itinerario salga ya armado al agendar (hoy u otro día) */
.aviso-arizona-origen{display:grid;gap:10px;margin-top:6px}
.aviso-arizona-origen .paso-sub{margin-top:0}
.aviso-arizona-cambiar{text-align:center;font-size:15px;margin-top:4px}
.viaje-recordatorio{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 12px;border-radius:var(--r-chip);background:var(--papel-tarjeta);box-shadow:inset 3px 0 0 var(--aqua-babero),var(--sombra-1);font-size:15.5px;line-height:1.4;color:var(--marino-logo)}
.viaje-recordatorio[hidden]{display:none}
.viaje-recordatorio svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--acero-logo);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Preguntas (inicio y páginas de tratamiento): renglones que se abren uno a la vez; el + se vuelve − en aqua */
.preguntas details{border-bottom:1.5px solid var(--renglon)}
.preguntas details:last-child{border-bottom:0}
.preguntas summary{display:flex;align-items:center;gap:14px;padding:15px 6px;margin:0 -6px;font:500 19px/1.3 var(--f-display);list-style:none;cursor:pointer;border-radius:10px;transition:background-color .15s}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary:hover{background:rgba(60,207,196,.10)}
.preguntas summary:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-3px}
.pregunta-signo{position:relative;flex:none;width:30px;height:30px;margin-left:auto;border-radius:8px;background:var(--mesa-recepcion);box-shadow:inset 0 0 0 1px rgba(2,42,87,.06);transition:background-color .2s}
.pregunta-signo::before,.pregunta-signo::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--marino-logo);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.pregunta-signo::after{transform:rotate(90deg)}
.preguntas summary:hover .pregunta-signo{background:#fff}
.preguntas details[open] .pregunta-signo{background:var(--aqua-babero);box-shadow:none}
.preguntas details[open] .pregunta-signo::after{transform:rotate(0)}
.preguntas details p{padding:0 0 18px;max-width:60ch;font-size:17px}
/* El enlace que cierra la respuesta va en su propio renglón, como acción */
.respuesta-accion{display:table;margin-top:8px}
/* La respuesta baja suave donde el navegador lo permite; si no, aparece sin más */
@supports (interpolate-size:allow-keywords){
  .preguntas{interpolate-size:allow-keywords}
  .preguntas details::details-content{block-size:0;overflow:clip;transition:block-size .25s cubic-bezier(.2,.8,.2,1),content-visibility .25s allow-discrete}
  .preguntas details[open]::details-content{block-size:auto}
}
/* Hoja de preguntas del inicio: temas impresos, dos columnas parejas en escritorio */
.hoja-preguntas{display:grid}
.preguntas-columnas{display:grid}
.preguntas-tema{margin:20px 0 2px}
.preguntas-columna>.preguntas-tema:first-child{margin-top:18px}

/* ---------- Fichas sobre la mesa ---------- */
.mesa{display:grid;gap:18px;padding-bottom:18px}
.ficha{background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);padding:20px}
.ficha-titulo{font:600 clamp(1.4rem,3.4vw,1.75rem)/1.15 var(--f-display);letter-spacing:-.015em;padding-bottom:12px;border-bottom:1.5px solid var(--marino-logo)}
.filas{list-style:none;margin:0;padding:0}
.filas>li{border-bottom:1.5px solid var(--renglon)}
.filas>li:last-child{border-bottom:0}
.fila-enlace{display:flex;align-items:center;gap:14px;padding:14px 4px;text-decoration:none;border-radius:8px;transition:background-color .15s}
.fila-enlace:hover{background:rgba(60,207,196,.10)}
.fila-enlace:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-3px}
.fila-enlace .flecha{margin-left:auto;width:20px;height:20px;flex:none;color:var(--acero-logo);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .15s}
.fila-enlace:hover .flecha{transform:translateX(3px);color:var(--marino-logo)}
.siento{font:500 19px/1.25 var(--f-display)}
.siento small{display:block;margin-top:3px;font:400 14.5px/1.3 var(--f-texto);color:var(--acero-impreso)}
.picto{width:28px;height:28px;flex:none;color:var(--acero-logo);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ¿Qué sientes?: cada síntoma con su pictograma y la acción dicha */
.sientes{display:grid;gap:18px;grid-template-areas:"cabeza" "lista" "urgencia"}
.sientes>.seccion-cabeza{grid-area:cabeza;margin-bottom:8px}
.sintomas-ficha{grid-area:lista}
.urgencia{grid-area:urgencia}
.sintomas-ficha{padding-top:6px;padding-bottom:6px}
.sintomas{list-style:none;margin:0;padding:0}
.sintomas li{border-bottom:1.5px solid var(--renglon)}
.sintomas li:last-child{border-bottom:0}
.sintoma{display:flex;align-items:center;gap:14px;padding:14px 6px;margin:0 -6px;border-radius:10px;text-decoration:none;transition:background-color .15s}
.sintoma .picto{width:30px;height:30px;transition:color .15s}
.sintoma-texto{display:grid;gap:3px}
.sintoma-texto b{font:500 19px/1.25 var(--f-display)}
.sintoma-texto small{font:600 14.5px/1.3 var(--f-display);color:var(--aqua-hondo)}
.sintoma .flecha{margin-left:auto;width:20px;height:20px;flex:none;color:var(--acero-logo);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .15s}
.sintoma:hover{background:rgba(60,207,196,.10)}
.sintoma:hover .picto,.sintoma:hover .flecha{color:var(--marino-logo)}
.sintoma:hover .flecha{transform:translateX(3px)}
.sintoma:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-3px}
.urgencia{display:flex;gap:14px;align-items:flex-start}
.urgencia>.picto{width:30px;height:30px;color:var(--acero-logo);margin-top:2px}
.urgencia h3{font:600 18px/1.25 var(--f-display)}
.urgencia p{margin:6px 0 14px;font-size:16px;color:var(--acero-impreso)}

/* Tratamientos en el inicio: fichero parejo de 8 renglones */
.fichero{display:grid;padding-top:8px;padding-bottom:20px}
.fichero-lista{list-style:none;margin:0 0 20px;padding:0 0 4px;display:grid;border-bottom:1.5px solid var(--marino-logo)}
.fichero-lista li{border-bottom:1.5px solid var(--renglon)}
.fichero-duracion{display:flex;align-items:center;justify-content:center;gap:10px;margin:-4px 0 18px;text-align:left;font-size:15.5px;color:var(--acero-impreso)}
.fichero-duracion .picto{width:24px;height:24px;color:var(--aqua-hondo)}
.fichero-duracion b{color:var(--marino-logo);font-weight:600}
.fichero-lista li:last-child{border-bottom:0}
.ficha-trat{display:flex;align-items:center;gap:14px;height:100%;padding:16px 8px;margin:0 -8px;border-radius:10px;text-decoration:none;transition:background-color .15s}
.ficha-picto{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:12px;background:var(--mesa-recepcion);box-shadow:inset 0 0 0 1px rgba(2,42,87,.06);transition:background-color .15s}
.ficha-picto .picto{width:28px;height:28px;transition:color .15s}
.ficha-texto{display:grid;gap:3px;min-width:0}
.ficha-texto b{font:600 18.5px/1.2 var(--f-display)}
.ficha-texto>span:not(.ficha-datos){font-size:15.5px;line-height:1.35;color:var(--acero-impreso)}
.ficha-datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ficha-datos i{font:500 12.5px/1 var(--f-display);font-style:normal;padding:5px 8px;border-radius:6px;background:var(--mesa-recepcion);color:var(--marino-logo)}
.ficha-trat .flecha{margin-left:auto;width:20px;height:20px;flex:none;color:var(--acero-logo);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .15s}
.ficha-trat:hover{background:rgba(60,207,196,.10)}
.ficha-trat:hover .ficha-picto{background:#fff}
.ficha-trat:hover .picto,.ficha-trat:hover .flecha{color:var(--marino-logo)}
.ficha-trat:hover .flecha{transform:translateX(3px)}
.ficha-trat:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-3px}
.trat-datos{display:flex;flex-wrap:wrap;gap:4px 18px;font:500 14.5px/1.3 var(--f-display)}
.trat-datos .etiqueta{margin-right:6px}

/* Doctor, horario y cómo llegar */
/* El doctor: su credencial (con el sello de la tarjeta de cita) y lo que significa, dos columnas iguales */
.doctor{display:grid;gap:18px}
.credencial,.promesas{display:grid;align-content:start}
.credencial-cabeza{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1.5px solid var(--marino-logo)}
.credencial-cabeza svg{width:58px;height:auto;flex:none}
.credencial-cabeza h3{font:600 20px/1.2 var(--f-display)}
.credencial-cabeza .etiqueta{margin-top:4px}
.credencial-cedula{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.credencial-cedula>div{display:grid;gap:4px}
.credencial-cedula b{font:600 32px/1.05 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.credencial-registro{font-size:14.5px;color:var(--acero-impreso)}
.credencial-sello{width:92px;height:92px;flex:none;color:var(--acero-logo);opacity:.9;transform:rotate(-8deg);--jg-a:var(--acero-logo);--jg-b:var(--acero-logo)}
.credencial-boton{padding-top:16px;border-top:1.5px solid var(--renglon)}
.promesas ul{list-style:none;margin:0;padding:0}
.promesas li{display:flex;gap:14px;padding:15px 0;border-bottom:1.5px solid var(--renglon)}
.promesas li:first-child{padding-top:4px}
.promesas li:last-child{border-bottom:0}
.promesas li svg{width:28px;height:28px;flex:none;margin-top:1px;color:var(--acero-logo);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.promesas li span{display:grid;gap:3px;font-size:16px;color:var(--acero-impreso)}
.promesas li b{font:600 18px/1.25 var(--f-display);color:var(--marino-logo)}
.horario{list-style:none;margin:8px 0 0;padding:0}
.horario li{display:flex;justify-content:space-between;gap:12px;padding:12px 10px;border-bottom:1.5px solid var(--renglon)}
.horario li:last-child{border-bottom:0}
.horario li>span:last-child{font-family:var(--f-display);font-weight:500;font-variant-numeric:tabular-nums}
.horario li.hoy{font-weight:700;border-radius:8px}
.horario li.hoy>span:last-child{font-weight:600}
.horario li.hoy .dia{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.horario li.hoy .dia::after{content:"Hoy";display:inline-block;margin-left:10px;padding:3px 7px;border-radius:6px;font:600 10.5px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#fff;vertical-align:2px}
.horario li.hoy-abierto{background:var(--verde-claro)}
.horario li.hoy-abierto .dia{text-decoration-color:var(--verde-diente)}
.horario li.hoy-abierto .dia::after{background:var(--verde-abierto)}
.horario li.hoy-cerrado{background:var(--rojo-claro)}
.horario li.hoy-cerrado .dia{text-decoration-color:var(--rojo-diente)}
.horario li.hoy-cerrado .dia::after{background:var(--rojo-aviso)}
.horario-semana li{padding:11px 10px}
.horario .h-cerrado{color:var(--acero-impreso)}
.direccion{font:500 21px/1.3 var(--f-display);margin-top:14px}
.llegar .botones{align-content:start}

/* Pie */
/* Pie de receta en marino (pedido de Daniel, 2026-10-22: que se distinga del resto): membrete del doctor,
   filo aqua arriba y cuatro columnas parejas. Textos claros medidos sobre marino: blanco 14.3, #C9DBE8 10.1, #8DB4D3 6.5 */
.pie{--pie-texto:#C9DBE8;--pie-tenue:#8DB4D3;--pie-linea:rgba(255,255,255,.14);position:relative;margin-top:80px;padding:0 0 128px;background:var(--marino-logo);font-size:16px;color:var(--pie-texto)}
.pie::before{content:"";display:block;height:4px;background:var(--aqua-babero)}
.pie .etiqueta{color:var(--pie-tenue)}
.pie .enlace{color:#fff}
.pie .enlace:focus-visible{outline-color:#fff}
.pie-membrete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 24px;padding:30px 0 24px;border-bottom:1.5px solid var(--pie-linea)}
.pie-marca{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;--jg-a:#fff;--jg-b:var(--pie-tenue)}
.pie-marca svg{width:52px;height:auto;flex:none}
.pie-marca>span{display:grid;gap:4px}
.pie-marca b{font:600 21px/1.2 var(--f-display);letter-spacing:-.01em}
.pie-marca:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:6px}
.pie-cedula{display:grid;gap:2px}
.pie-cedula b{font:600 26px/1.1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff}
.pie-columnas{display:grid;gap:26px;padding:26px 0 28px}
.pie-columna{display:grid;align-content:start;gap:10px}
.pie-columna h2{margin:0}
.pie-columna p{line-height:1.6}
.pie-columna .abierto{text-align:left;font-size:15px;color:#86E3AE}
.pie-columna .abierto.cerrado{color:#FFA197}
.pie-medios,.pie-nav{list-style:none;margin:0;padding:0}
.pie-medios{display:grid;gap:8px}
.pie-medios a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;line-height:1.35}
.pie-medios svg{width:19px;height:19px;flex:none;color:var(--pie-tenue);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pie-medios span{min-width:0}
.pie-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.pie-nav a{font:500 16px/1.7 var(--f-display);color:#fff;text-decoration:none}
.pie-medios a:hover,.pie-nav a:hover,.pie-subir:hover{text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:4px}
.pie-medios a:focus-visible,.pie-nav a:focus-visible,.pie-subir:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
.pie-final{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding-top:18px;border-top:1.5px solid var(--pie-linea);font-size:14px;color:var(--pie-tenue)}
.pie-final-der{display:flex;align-items:center;gap:22px}
.pie .idioma-texto{font:600 14.5px/1 var(--f-display);color:#fff;text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:4px}
.pie .idioma-texto:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:4px}
.pie-subir{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 var(--f-display);color:#fff;text-decoration:none}
.pie-subir .flecha{width:16px;height:16px;transform:rotate(-90deg)}

/* Dock del celular: papel levantado, con Agendar como una tarjetita */
body:has(> .dock){padding-bottom:96px}
/* Con pie, el espacio para el dock lo pone el pie (papel hasta abajo) */
body:has(> .pie){padding-bottom:0}
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:8;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 4px 7px;border-radius:20px;background:var(--papel-tarjeta);box-shadow:var(--sombra-2)}
.dock a{position:relative;z-index:1;display:grid;justify-items:center;gap:3px;padding:6px 2px 4px;border-radius:12px;font:500 11.5px/1.1 var(--f-display);color:var(--acero-impreso);text-decoration:none;-webkit-tap-highlight-color:transparent}
.dock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.dock a[aria-current="true"],.dock a[aria-current="page"]{color:var(--marino-logo)}
.dock a[aria-current="true"]::before,.dock a[aria-current="page"]::before{content:"";position:absolute;top:-6px;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--aqua-babero)}
.dock a:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:-2px}
/* Desde EE.UU. o en inglés, "Arizona" toma el lugar de "El doctor" en el dock */
.dock [data-dock="arizona"],.modo-arizona .dock [data-dock="doctor"]{display:none}
.modo-arizona .dock [data-dock="arizona"]{display:grid}
.dock .dock-agendar{color:var(--marino-logo);font-weight:600}
.dock-agendar span{display:grid;place-items:center;width:58px;height:46px;margin-top:-24px;border-radius:13px;transform:rotate(-2deg);background-color:var(--aqua-babero);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(2,42,87,.16),0 2px 4px rgba(2,42,87,.14),0 12px 22px -10px rgba(11,127,122,.8);transition:transform .16s,box-shadow .16s}
.dock-agendar:active span{transform:rotate(-2deg) translateY(1px);box-shadow:inset 0 2px 4px rgba(2,42,87,.22),0 1px 1px rgba(2,42,87,.12)}

/* Cristal líquido, sutil: deja ver lo de atrás desenfocado, con canto de luz y brillo arriba.
   Excepción al "nada de glassmorphism" de DESIGN.md: solo en el dock. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .dock{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(2,42,87,.06),0 2px 6px rgba(2,42,87,.08),0 18px 34px -16px rgba(2,42,87,.32);transition:background-color .3s,box-shadow .3s}
  /* Canto: un filo de luz que se desvanece en las esquinas, como vidrio grueso */
  .dock::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 38%,rgba(2,42,87,.08) 62%,rgba(255,255,255,.75));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  /* Brillo: la luz cae desde arriba sobre la superficie */
  .dock::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120% 70% at 50% -30%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%)}
  /* La sección actual queda bajo una lente de cristal */
  .dock a[aria-current="true"],.dock a[aria-current="page"]{background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 3px rgba(2,42,87,.1)}
  /* Sobre la banda marino el cristal se oscurece para que todo se siga leyendo */
  .dock.dock-oscuro{background:rgba(8,28,52,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.2),0 18px 34px -16px rgba(0,0,0,.45)}
  .dock.dock-oscuro::before{background:linear-gradient(140deg,rgba(255,255,255,.45),rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.3))}
  .dock.dock-oscuro::after{background:radial-gradient(120% 70% at 50% -30%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
  .dock.dock-oscuro a{color:#C9DBE8}
  .dock.dock-oscuro a[aria-current="true"],.dock.dock-oscuro a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
  .dock.dock-oscuro .dock-agendar{color:#fff}
}

/* ---------- Agendar ---------- */
.agendar{display:grid;gap:22px;padding:4px 0 48px}
.agendar .tarjeta-cita{position:sticky;top:8px;z-index:3;padding:12px 16px}
.agendar .tc-cabeza{padding-bottom:8px}
.agendar .tc-cabeza svg{width:30px}
.agendar .tc-nombre{font-size:14px}
.agendar .tc-titulo{display:none}
.agendar .renglon{min-height:46px;padding-top:4px}
.agendar .valor{font-size:21px;min-height:29px}
.agendar .sello{width:64px;height:64px;right:8px;bottom:6px}
.agendar .renglon.ultimo{padding-right:70px}
.renglon-boton{all:unset;cursor:pointer;display:contents}
.paso{display:grid;gap:14px;align-content:start}
.paso[hidden]{display:none}
.paso-titulo{font:600 clamp(1.6rem,5vw,2.1rem)/1.15 var(--f-display);letter-spacing:-.02em;outline:0}
.paso-nota{color:var(--acero-impreso);font-size:16px;max-width:46ch}
.paso-sub{font:600 17px/1.2 var(--f-display);margin-top:6px}
.atras{justify-self:start;display:inline-flex;align-items:center;gap:6px;font:600 15.5px/1 var(--f-display);color:var(--acero-impreso);background:none;border:0;padding:8px 0;cursor:pointer}
.atras svg{width:18px;height:18px;transform:rotate(180deg)}
.atras:hover{color:var(--marino-logo)}
.atras:focus-visible{outline:3px solid var(--aqua-hondo);outline-offset:2px;border-radius:4px}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chips .chip{min-height:62px}
/* Diagnóstico ("no sé qué necesito") va primero y a todo lo ancho; los otros 8 quedan parejos */
.chips-tratamientos .chip:first-child{grid-column:1/-1}
.chips-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.chips-dias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{min-height:48px;padding:8px 14px;border:0;border-radius:var(--r-chip);background:var(--papel-tarjeta);color:var(--marino-logo);font:500 16.5px/1.15 var(--f-display);font-variant-numeric:tabular-nums;text-align:center;box-shadow:var(--sombra-1);cursor:pointer;transition:transform .14s,box-shadow .14s,background-color .14s;-webkit-tap-highlight-color:transparent}
.chips-horas .chip{padding:8px 6px}
.chip small{display:block;margin-top:3px;font:400 13px/1.2 var(--f-texto);color:var(--acero-impreso)}
.chip:hover{transform:translateY(-1px);box-shadow:var(--sombra-2)}
.chip[aria-pressed="true"]{background:var(--aqua-babero);transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(2,42,87,.2),0 0 0 1px rgba(2,42,87,.08)}
.chip[aria-pressed="true"] small{color:var(--marino-logo)}
.chip:focus-visible{outline:3px solid var(--marino-logo);outline-offset:2px}
.campo{display:grid;gap:4px;max-width:380px}
.campo input{border:0;border-bottom:1.5px solid var(--acero-logo);background:transparent;padding:8px 0 9px;font:400 19px/1.3 var(--f-texto);color:var(--marino-logo);border-radius:0;outline:0;transition:border-color .15s,box-shadow .15s}
.campo input::placeholder{color:rgba(63,115,153,.6)}
.campo input:focus{border-bottom-color:var(--aqua-hondo);box-shadow:0 1.5px 0 var(--aqua-babero)}
.campo:focus-within .etiqueta{color:var(--marino-logo)}
.aviso{min-height:1.55em;font-weight:600}
.aviso.ok{color:var(--aqua-hondo)}
.aviso.falta{color:var(--marino-logo)}
.directo{font-size:16px;color:var(--acero-impreso)}
/* Citas en línea (Fase 3): horas reales, teléfono, aviso de privacidad y "Mi cita" */
.agendar [hidden],.mi-cita [hidden]{display:none!important}
.chip.lleno{cursor:default;background:transparent;box-shadow:none;border:1.5px dashed rgba(90,142,177,.6);color:var(--acero-impreso);transform:none}
.chip.lleno small{color:var(--acero-impreso)}
.chip-tenue{display:block;min-height:62px;background:rgba(255,255,255,.55);box-shadow:none;cursor:default}
.chip-tenue:hover{transform:none;box-shadow:none}
.buscando{color:var(--acero-impreso)}
.campo-telefono .telefono{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:end}
.campo-telefono select{border:0;border-bottom:1.5px solid var(--acero-logo);background:transparent;padding:8px 2px 9px;font:500 17px/1.3 var(--f-display);color:var(--marino-logo);border-radius:0;font-variant-numeric:tabular-nums}
.campo-telefono select:focus{outline:0;border-bottom-color:var(--aqua-hondo);box-shadow:0 1.5px 0 var(--aqua-babero)}
.campo input[type="tel"]{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.casilla{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;max-width:46ch;font-size:16px;line-height:1.45;color:var(--marino-logo);cursor:pointer}
.casilla input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--aqua-hondo);cursor:pointer}
.turnstile{min-height:0}
.boton.enviando{opacity:.75;pointer-events:none}
.mi-cita .tarjeta-cita{position:relative;top:auto}
.mi-cita .tc-titulo{display:block}
.mc-tachada .valor{text-decoration:line-through;text-decoration-color:var(--acero-logo);color:var(--acero-impreso)}
.mc-lugar,.mc-calendario,.mc-cancelar{display:grid;gap:10px}
.mc-cancelar{scroll-margin-bottom:110px}
.mc-direccion{font:500 18px/1.4 var(--f-display);color:var(--marino-logo)}
.mc-forma{display:grid;gap:16px}
.mi-cita .botones .boton{width:100%}
/* Escenas de "Mi cita" (js/escenas.js, regla del seguimiento animado): una por estado, con la papelería del consultorio
   sobre la mesa. Trazo de un solo grosor en acero, tinta marino, el mango del sello en aqua. Lo que entra se mueve una vez
   y lo vivo (el sello que se entinta, la lupa) se repite suave. Cada animación termina en el dibujo base: con movimiento
   reducido se ve ese cuadro, quieto. */
.escena{--esc-trazo:var(--acero-logo);--esc-papel:var(--papel-tarjeta);--esc-tinta:var(--marino-logo);--esc-acento:var(--aqua-babero);--esc-hondo:var(--aqua-hondo);height:118px;margin:0 0 6px;display:flex;align-items:center}
.escena:empty{display:none}
.esc{height:100%;width:auto;max-width:100%}
.esc-t{fill:none;stroke:var(--esc-trazo);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.esc-o{stroke:var(--esc-trazo);stroke-width:2.5;stroke-linejoin:round}
.esc-fino{stroke-width:1.5}
.esc-tenue{opacity:.45}
.esc-marino{stroke:var(--esc-tinta)}
.esc-papel{fill:var(--esc-papel)}
.esc-acento{fill:var(--esc-acento)}
.esc-hule,.esc-cojin{fill:var(--esc-trazo)}
.esc-cojin{opacity:.8}
.esc-tinta{fill:none;stroke:var(--esc-tinta);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60}
.esc-vacio{fill:none;stroke:var(--esc-trazo);stroke-width:1.5;stroke-dasharray:3 3.4;opacity:.6}
.esc-estampa{color:var(--esc-trazo);--jg-a:var(--esc-trazo);--jg-b:var(--esc-trazo);opacity:.9;transform:rotate(-8deg)}
.esc-sigue{display:none}
.esc-vienes .esc-sigue{display:inline}
.esc-insignia{fill:var(--esc-acento)}
.esc-palomita{fill:none;stroke:var(--esc-tinta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14}
.esc-tache{fill:none;stroke:var(--acero-impreso);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:60}
.esc--cancelada .esc-tarjeta{opacity:.6}
.esc-hueco{fill:var(--esc-papel);stroke:var(--esc-trazo);stroke-width:2;stroke-dasharray:5 4}
.esc-punteado{fill:none;stroke:var(--esc-trazo);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:3 4;opacity:.6}
.esc-vidrio{fill:var(--esc-papel);fill-opacity:.55;stroke:var(--esc-tinta);stroke-width:3}
.esc-mango{fill:none;stroke:var(--esc-tinta);stroke-width:5;stroke-linecap:round}
/* Lo que entra, una vez */
.esc--por_confirmar .esc-tarjeta,.esc--cancelada .esc-tarjeta{animation:esc-llega .5s ease-out both}
.esc--por_confirmar .esc-tinta{animation:esc-escribe .45s ease-out both;animation-delay:calc(.45s + var(--r) * .3s)}
.esc--confirmada .esc-goma{animation:esc-viaje 2s cubic-bezier(.45,0,.3,1) .2s both}
.esc--confirmada .esc-estampa{animation:esc-estampa .22s cubic-bezier(.3,1.4,.5,1) 1.04s both}
.esc--confirmada .esc-vacio{opacity:0;animation:esc-se-va .15s 1.04s both}
.esc--confirmada .esc-tarjeta{animation:esc-asienta .3s 1.06s}
.esc--confirmada .esc-sigue{animation:esc-aparece .35s cubic-bezier(.3,1.4,.5,1) 2.3s both}
.esc--confirmada.esc-ya .esc-sigue{animation-delay:.1s}
.esc--confirmada .esc-palomita{animation:esc-traza .3s ease-out 2.5s both}
.esc--confirmada.esc-ya .esc-palomita{animation-delay:.3s}
.esc--cancelada .esc-tache{animation:esc-tacha .4s ease-out both;animation-delay:calc(.5s + var(--r) * .4s)}
.esc--cancelada .esc-tarjeta{animation:esc-llega .5s ease-out both,esc-desvanece .5s 1.4s both}
.esc--pasada .esc-archiva{animation:esc-archiva .75s cubic-bezier(.3,.9,.4,1.15) .3s both}
.esc--pasada .esc-cajon{animation:esc-asienta .3s .95s}
.esc--no_existe .esc-hueco-entra{animation:esc-llega .5s ease-out both}
/* Lo que sigue vivo, suave */
.esc--por_confirmar .esc-vacio{animation:esc-espera 6s linear infinite}
.esc--por_confirmar .esc-goma{animation:esc-entinta 3.4s ease-in-out .9s infinite}
.esc--no_existe .esc-lupa{animation:esc-busca 4.2s ease-in-out .3s infinite}
@keyframes esc-llega{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes esc-escribe{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes esc-viaje{0%{transform:none}30%{transform:translate(144px,-18px)}42%{transform:translate(144px,7px)}52%{transform:translate(144px,-18px)}100%{transform:none}}
@keyframes esc-estampa{from{opacity:0;transform:scale(1.25) rotate(-16deg)}to{opacity:.9;transform:rotate(-8deg)}}
@keyframes esc-se-va{from{opacity:.6}to{opacity:0}}
@keyframes esc-asienta{50%{transform:translateY(1.5px)}}
@keyframes esc-aparece{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes esc-traza{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
@keyframes esc-tacha{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes esc-desvanece{from{opacity:1}to{opacity:.6}}
@keyframes esc-archiva{from{opacity:0;transform:translateY(-58px)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes esc-espera{to{stroke-dashoffset:-32}}
@keyframes esc-entinta{0%,100%{transform:none}35%,62%{transform:translateY(-12px)}82%{transform:translateY(1.5px)}}
@keyframes esc-busca{0%,100%{transform:translate(-28px,4px) rotate(-6deg)}50%{transform:translate(28px,-6px) rotate(6deg)}}
/* Aviso de privacidad: una hoja impresa sobre la mesa */
.documento{max-width:760px;margin:12px auto 56px;padding:24px 22px 28px}
.documento h1{margin:0;font:700 clamp(1.9rem,6vw,2.6rem)/1.1 var(--f-display);letter-spacing:-.025em}
.documento .doc-fecha{margin:6px 0 0;color:var(--acero-impreso);font-size:15.5px}
.documento h2{margin:30px 0 8px;padding-top:14px;border-top:1.5px solid var(--renglon);font:600 21px/1.25 var(--f-display);letter-spacing:-.01em}
.documento p,.documento li{max-width:64ch}
.documento p{margin:8px 0}
.documento ul{margin:8px 0;padding-left:22px}
.documento li{margin:6px 0}
.doc-botones{margin-top:30px}

/* ---------- Páginas de tratamiento ---------- */
.migas ol{list-style:none;margin:0;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px;font:500 14px/1.4 var(--f-display);color:var(--acero-impreso)}
.migas li+li::before{content:"›";margin-right:8px;color:var(--acero-logo)}
.migas a{color:inherit;text-decoration:none}
.migas a:hover{color:var(--marino-logo);text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:3px}
.migas [aria-current]{color:var(--marino-logo)}
.trat-pagina{display:grid;gap:18px;padding-top:10px}
.trat-principal{display:grid;gap:18px;min-width:0}
.trat-portada{display:grid;gap:14px;padding:6px 0 18px}
.picto-grande{width:56px;height:56px;stroke-width:1.5}
.titular.trat-titular{font-size:clamp(2.6rem,8vw,4.2rem);max-width:none}
/* El subtítulo del doctor (lo que va entre paréntesis en su lista) pegado al nombre */
.trat-sub{margin-top:-6px;font:500 clamp(1.15rem,3.4vw,1.4rem)/1.3 var(--f-display);color:var(--acero-impreso)}
.trat-portada .bajada{margin-top:0;max-width:52ch;text-wrap:pretty}
.datos-trat{display:grid;background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);padding:2px 20px}
.dato{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1.5px solid var(--renglon)}
.dato:last-child{border-bottom:0}
.dato b{font:600 18px/1.25 var(--f-display)}
/* La duración lleva su aclaración debajo: varía según cada paciente */
.dato-duracion{flex-wrap:wrap}
.dato-duracion small{flex-basis:100%;margin-top:-6px;text-align:right;font-size:13.5px;color:var(--acero-impreso)}
.trat-portada .botones{margin-top:6px}
.nota-precio{max-width:52ch;font-size:15px;color:var(--acero-impreso)}
.bloque .ficha-titulo{font-size:clamp(1.35rem,3.4vw,1.6rem)}
.lista-puntos,.pasos-cita{list-style:none;margin:6px 0 0;padding:0}
.lista-puntos li{display:flex;gap:12px;padding:12px 0;border-bottom:1.5px solid var(--renglon);font-size:17.5px}
.lista-puntos li::before{content:"";flex:none;width:7px;height:7px;margin-top:.65em;border-radius:50%;background:var(--aqua-hondo)}
.pasos-cita li{display:flex;gap:14px;padding:14px 0;border-bottom:1.5px solid var(--renglon)}
.lista-puntos li:last-child,.pasos-cita li:last-child{border-bottom:0}
.pasos-cita b{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--marino-logo);font:600 16px/1 var(--f-display)}
.pasos-cita span{font-size:17px;color:var(--acero-impreso)}
.pasos-cita strong{color:var(--marino-logo);font-weight:700}
.ver-todos{margin-top:14px}
.lateral-fijo{display:grid;gap:16px;padding:22px 6px 8px}
.trat-lateral .tarjeta-cita{margin:0 auto;width:100%}
.lateral-nota{font-size:16px;color:var(--acero-impreso);text-align:center}
.lateral-nota b{color:var(--marino-logo)}

/* Catálogo de tratamientos */
.catalogo-portada{display:grid;gap:14px;padding:6px 0 26px}
.catalogo-portada .bajada{margin-top:0;max-width:46ch}
.catalogo-fila{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:18px 4px}
.catalogo-fila>.picto{margin-top:2px}
.catalogo-fila h2{font:600 21px/1.2 var(--f-display);letter-spacing:-.01em}
.catalogo-fila h2 a{text-decoration:none}
.catalogo-fila h2 a:hover{text-decoration:underline;text-decoration-color:var(--aqua-babero);text-decoration-thickness:2px;text-underline-offset:4px}
.catalogo-texto>p{margin-top:4px;font-size:16px;color:var(--acero-impreso)}
.catalogo-texto>.catalogo-sub{margin-top:2px;font:500 16.5px/1.3 var(--f-display);color:var(--aqua-hondo)}
.catalogo-texto>.trat-datos{margin-top:8px;color:var(--marino-logo)}
.catalogo-acciones{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:8px}
.catalogo-acciones .boton-chico{padding:0 16px}
.enlace-agendar{display:inline-flex;align-items:center;gap:6px}
.enlace-agendar .flecha{width:18px;height:18px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.enlace-agendar:hover .flecha{transform:translateX(3px)}
.catalogo-pie{margin-top:18px}
.catalogo-nota{margin:12px 0 16px;color:var(--acero-impreso)}

/* ---------- Página no encontrada ---------- */
.perdida{display:grid;gap:22px;justify-items:start;padding:24px 0 80px}

/* ---------- Tamaños ---------- */
@media (max-width:599px){
  .cabeza .marca>span{display:none}
  .cabeza-der{gap:8px}
  /* Donde hay menú, el ES/EN se pasa adentro del menú */
  .cabeza-der:has(.menu-boton)>.idioma{display:none}
  .menu-idioma{display:flex}
}
@media (max-width:419px){
  .menu-texto{display:none}
  .menu-boton{padding:0 10px}
  /* En celulares angostos todo el encabezado cabe aunque la pasta diga "Abrimos el lunes a las 9 am" */
  .cabeza-der{gap:6px}
  .idioma{width:31px}
  .idioma::before{left:6px;right:6px}
  .pasta-cuerpo{padding:0 10px 0 9px}
  .pasta-cuerpo small{font-size:10.5px}
}
@media (max-width:359px){
  .cabeza .marca{display:none}
  .cabeza .envoltura{justify-content:flex-end}
}
@media (min-width:600px){
  .viaje-origen{grid-template-columns:1fr auto}
  .viaje-bloques{grid-template-columns:1fr 1fr;column-gap:28px}
  .precios-carril{grid-auto-columns:calc((100% - 2*14px)/2.4)}
  .precios-aviso .botones{width:auto}
  .pie-columnas{grid-template-columns:1fr 1fr;column-gap:32px}
  .botones{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .portada-botones{display:inline-grid;width:auto;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px}
  .portada-botones .boton{padding:0 26px}
  /* Los tres datos (citas, anestesia y duración) en tres columnas iguales */
  .datos-trat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .dato{display:grid;justify-content:start;gap:4px;padding:12px 22px 12px 0;margin-right:22px;border-bottom:0;border-right:1.5px solid var(--renglon)}
  .dato:last-child{border-right:0;margin-right:0;padding-right:0}
  .dato-duracion small{margin-top:0;text-align:left}
}
@media (min-width:768px){
  .ficha-hoy{grid-template-columns:repeat(3,1fr);padding:4px 24px}
  .hoy-dato{border-bottom:0;padding:18px 0}
  .hoy-dato+.hoy-dato{border-left:1.5px solid var(--renglon);padding-left:22px;margin-left:-2px}
  .filas-dos{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .filas-dos>li:nth-last-child(-n+2){border-bottom:0}
      .primera{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
  /* En la columna angosta los dos botones van uno bajo otro, del mismo ancho, para que el texto no se parta */
  .primera-botones{display:grid;grid-auto-flow:row;width:100%;max-width:340px}
  .fichero-lista{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;column-gap:40px}
  .fichero-botones{justify-self:center}
  .preguntas-columnas{grid-template-columns:1fr 1fr;column-gap:44px;align-items:start}
  .lista-pie .botones{width:auto}
  .fichero-lista li:nth-last-child(-n+2){border-bottom:0}
  .fichero-lista li:first-child{grid-column:1/-1}
  .reverso{padding:36px 40px 38px}
  .pasos-agenda{grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
  .pasos-agenda li{flex-direction:column;align-items:center;gap:14px}
  .pasos-agenda li:not(:last-child)::after{left:calc(50% + 30px);right:calc(-50% + 2px);top:19px;bottom:auto;width:auto;height:2px}
  .antes h3{text-align:center}
  .antes ul{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px}
  .banda-boton{text-align:center}
  .banda-boton .boton{width:auto;min-width:240px}
  .doctor{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  /* Mismo alto en las dos: el botón de la credencial queda abajo y las tres promesas se reparten el alto */
  .credencial{grid-template-rows:auto 1fr auto}
  .promesas{align-content:stretch}
  .promesas ul{display:grid;grid-auto-rows:1fr}
  .promesas li,.promesas li:first-child{align-items:center;padding:12px 0}
  /* Título a todo lo ancho como las demás secciones; foto y botones miden lo mismo de alto */
  .contacto{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"cabeza cabeza" "foto medios";column-gap:56px;row-gap:8px;align-items:stretch}
  .contacto>.seccion-cabeza{margin-bottom:0}
  .contacto-foto{width:100%;max-width:290px;margin:18px 0 0;justify-self:center;align-self:start}
  .contacto-medios{grid-template-rows:auto 1fr 1fr;padding-top:18px}
  .medio>svg{width:30px;height:30px}
  .medio b{font-size:18px}
  .medio small{font-size:14.5px}
  .sientes{grid-template-columns:5fr 7fr;grid-template-areas:"cabeza lista" "urgencia lista";grid-template-rows:auto 1fr;column-gap:32px;row-gap:18px;align-items:start}
  .catalogo-fila{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .catalogo-acciones{grid-column:3;grid-row:1;margin-top:0;display:grid;grid-template-columns:11.5rem 6.5rem;gap:20px;align-items:center}
  .catalogo-acciones .boton{width:100%}
  .mesa-b{grid-template-columns:7fr 5fr;align-items:start}
  /* Dirección y horario miden lo mismo: el mapa llena lo que sobra y los días se reparten el alto */
  #ubicacion .mesa-b{align-items:stretch}
  #ubicacion .ficha{display:flex;flex-direction:column}
  .llegar .mapa{flex:1;aspect-ratio:auto;min-height:260px}
  #horario .horario-semana{flex:1;display:flex;flex-direction:column}
  #horario .horario-semana li{flex:1;align-items:center}
  .ficha{padding:24px 26px}
}
@media (min-width:960px){
  .viaje{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .precios-carril{grid-auto-columns:calc((100% - 3*16px)/3.5);gap:16px}
  .pie-columnas{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dock{display:none}
  .aviso-arizona{left:auto;right:24px;bottom:24px;width:380px;max-height:calc(100dvh - 96px)}
  .portada-logo{min-height:calc(100svh - 68px);padding:16px 0 32px}
  .tu-cita .portada{grid-template-areas:"cabeza papeles" "elige papeles";grid-template-rows:auto 1fr;row-gap:24px;align-items:start}
  .tu-cita .seccion-cabeza{grid-area:cabeza;align-self:end}
  .tu-cita .portada-papeles{grid-area:papeles;align-self:center}
  .tu-cita-elige{grid-area:elige}
  body:has(> .dock){padding-bottom:0}
  .pie{padding-bottom:44px}
  .cabeza .boton{display:inline-flex;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s}
  body.sin-portada .cabeza .boton{opacity:1;visibility:visible;transform:none}
  body:not(.sin-portada) .cabeza .boton:not(.siempre){position:absolute}
  .cabeza .boton.siempre{opacity:1;visibility:visible;transform:none}
  .trat-pagina{grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start}
  .trat-lateral{align-self:stretch}
  .lateral-fijo{position:sticky;top:96px;padding-top:48px}
  .portada{grid-template-columns:1.05fr .95fr;align-items:center;padding:28px 0 72px;gap:48px}
  .portada-papeles{padding:40px 10px 40px 30px}
  .papel-atras{display:block;position:absolute;top:0;right:-6px;width:78%;background:var(--papel-tarjeta);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);padding:16px 18px;transform:rotate(4deg)}
  .papel-atras .horario li{padding:8px 4px;font-size:15px}
  .portada .tarjeta-cita{margin-left:auto;max-width:500px}
  .agendar{grid-template-columns:440px 1fr;align-items:start;gap:56px;padding-top:24px}
  .agendar .tarjeta-cita{top:24px;padding:18px 20px 20px}
  .agendar .tc-cabeza{padding-bottom:12px}
  .agendar .tc-cabeza svg{width:40px}
  .agendar .tc-nombre{font-size:15.5px}
  .agendar .tc-titulo{display:block}
  .agendar .renglon{min-height:58px;padding-top:8px}
  .agendar .valor{font-size:24px;min-height:34px}
  .agendar .sello{width:76px;height:76px;right:12px;bottom:8px}
  .agendar .renglon.ultimo{padding-right:84px}
}
/* Con la pasta de dientes en el encabezado, la navegación completa necesita 1140 px */
@media (min-width:1140px){
  /* Con las seis secciones a la vista, entre 1140 y 1299 px la marca queda solo en el monograma para que todo quepa */
  .nav{display:flex}
  .menu-boton{display:none}
}
@media (prefers-reduced-motion:reduce){
  .precios-carril{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .escena *{animation:none!important}
  .sello .tinta{transform:rotate(-8deg)}
  .preguntas details::details-content{transition:none}
}
@media (min-width:1140px) and (max-width:1299px){
  .cabeza .marca>span{display:none}
}
/* Desde 1300 px el encabezado se abre más que el contenido para que quepan la marca y las seis secciones */
@media (min-width:1300px){
  .cabeza .envoltura{max-width:1300px}
}