:root{--bg:#f7f9fb;--surface:#ffffff;--ink:#0f2033;--muted:#4a5b6d;--border:#dde5ec;--primary:#123a5c;--on-primary:#f7f9fb;--accent:#1d5b8f;--on-accent:#ffffff;--radius:12px;--wrap:1120px}
*,*::before,*::after{box-sizing:border-box}
/* El desplazamiento a un ancla se detiene por debajo de la cabecera pegajosa.
   Sin esto, en la web de una sola pagina (donde el menu son todas anclas) al
   pulsar «Servicios» el titulo quedaba 80 px por encima del borde: se aterriza
   a media lista sin ver de que seccion se trata. */
html{scroll-padding-top:7.5rem}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;letter-spacing:-0.03em;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:32px}}
section{padding-block:56px}
@media(min-width:768px){section{padding-block:88px}}
.sec-title{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.sec-sub{margin-top:14px;color:var(--muted);font-size:1.05rem;max-width:62ch}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--muted)}
.grid{display:grid;gap:20px}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:560px){.gauto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.card h3{font-size:1.15rem}
.card p{margin-top:8px;color:var(--muted);font-size:.96rem}
/* Ficha de catálogo: la foto va a sangre y el texto sí lleva margen, así que
   la tarjeta pierde su relleno y lo reparten los hijos. */
.item{padding:0;overflow:hidden;display:flex;flex-direction:column}
.item .slot{min-height:150px;border-radius:0;border:0;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.item h3{padding:18px 20px 0}
.item p{padding:0 20px 20px}
/* Icono de foto pendiente, dibujado con CSS para que no dependa del idioma
   ni traiga un fichero más al sitio del cliente. */
.ph{position:relative;width:36px;height:29px;border:2px solid currentColor;border-radius:5px;opacity:.4}
.ph::before{content:"";position:absolute;left:4px;bottom:3px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:12px solid currentColor}
.ph::after{content:"";position:absolute;right:5px;top:4px;width:6px;height:6px;border-radius:50%;background:currentColor}
/* El cursor es senal de interfaz: si algo responde al pulsarlo, tiene que
   decirlo antes de que lo pulsen. Hace falta declararlo porque los navegadores
   ponen cursor de flecha en los botones, al reves que en los enlaces. Se pone
   una vez aqui y no clase por clase, para que valga tambien para lo que se
   anada despues. */
button,summary,label.opt,[role=button]{cursor:pointer}
button:disabled,input:disabled,select:disabled{cursor:not-allowed}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600}
.btn:hover{filter:brightness(.92)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border)}
/* Agotado: se dice y no se esconde. Quitar el producto de la web cuando se
   acaba parece que ya no se vende, y quien lo buscaba se va sin saber si
   volvera. Va con el color de texto normal y no en rojo: no es un error. */
.soldout{display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;border:1px dashed var(--border);color:var(--muted);font-weight:600;font-size:.92rem}
/* Dentro de una banda oscura hay que decirlo: el apagado hereda el color de
   texto normal y se quedaba practicamente negro sobre negro. Es el mismo
   descuido que ya hubo con los pies de foto y los horarios. */
.dark .btn-ghost{color:var(--on-primary);border-color:color-mix(in srgb,var(--on-primary) 45%,transparent)}
.dark .btn-ghost:hover{border-color:var(--on-primary);background:color-mix(in srgb,var(--on-primary) 10%,transparent)}
/* Enlaces sin destino, en las muestras: se ven, se enfocan y llevan cursor de
   mano como cualquier otro. Lo unico que no hacen es ir a ninguna parte.
   El navegador no los subraya ni los colorea sin destino, asi que hay que
   repetirlo aqui. */
a[role=link][aria-disabled]{cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.btn[role=link][aria-disabled]{color:var(--on-accent);text-decoration:none}
.btn-ghost[role=link][aria-disabled]{color:var(--ink)}
.social a[role=link][aria-disabled]{color:var(--on-primary);text-decoration:none}
.site-foot a[role=link][aria-disabled]{color:color-mix(in srgb,var(--on-primary) 88%,transparent)}
.mapquiet iframe{pointer-events:none}
/* Banda de aviso y cabecera: se pegan juntas, como una sola pieza. Cuando cada
   una se pegaba por su cuenta, las dos pedían estar a cero del borde y la
   cabecera se metía por debajo de la banda al desplazarse. */
.topstack{position:sticky;top:0;z-index:60}
.topnote{background:#1b2013;color:#faf9f6;padding:9px 20px;font:600 13px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;text-align:center}
.topnote p{margin:0}
.topnote strong{letter-spacing:.16em}
.topback{display:inline-flex;align-items:center;gap:6px;color:#faf9f6;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.topback:hover{opacity:.82}
/* Cabecera */
.site-head{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink);line-height:1.15}
.brand img{width:38px;height:38px;flex:none}
.site-nav{display:flex;gap:6px;flex-wrap:wrap}
.site-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.95rem;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current=page]{background:var(--surface);color:var(--ink)}
/* Menu desplegable de movil, hecho con el elemento details y sin una linea de
   script. En pantalla ancha el boton se oculta y el menu se ve siempre, asi que
   el mismo marcado vale para los dos casos. */
.menu{position:relative;display:none}
.site-nav.wide{display:flex}
@media(max-width:900px){
.menu{display:block}
.site-nav.wide{display:none}
.menu>summary{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.92rem;font-weight:600;white-space:nowrap}
.bars{position:relative;width:15px;height:2px;background:currentColor;border-radius:2px}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:15px;height:2px;background:currentColor;border-radius:2px}
.bars::before{top:-5px}.bars::after{top:5px}
.menu[open]>summary .bars{background:transparent}
.menu[open]>summary .bars::before{top:0;transform:rotate(45deg)}
.menu[open]>summary .bars::after{top:0;transform:rotate(-45deg)}
/* El panel flotante es esta caja y no el propio nav, que es lo que estaba: el
   selector de idioma es hermano del nav, asi que se quedaba fuera del panel y
   en un movil salia flotando sobre el fondo de la pagina, con el menu blanco
   por debajo pisando el texto. */
.menu .menu-panel{display:none;position:absolute;right:0;top:calc(100% + 12px);flex-direction:column;align-items:stretch;min-width:210px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 16px 38px rgba(0,0,0,.14);z-index:30}
.menu[open] .menu-panel{display:flex}
.menu .site-nav{display:flex;flex-direction:column;align-items:stretch}
.menu .site-nav a{padding:11px 14px;border-radius:8px;font-size:1rem}
}
/* Hero */
.hero{padding-block:64px}
@media(min-width:768px){.hero{padding-block:104px}}
.hero h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem)}
.hero .lead{margin-top:20px;max-width:60ch}
.hero-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.hero-center{text-align:center}
.hero-center .lead{margin-inline:auto}
.hero-center .hero-actions{justify-content:center}
.hero-split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.hero-split{grid-template-columns:1.05fr .95fr;gap:56px}}
.hero-shot{aspect-ratio:5/4}
/* Composiciones alternativas de seccion. La lista de variantes vive en
   SECTION_VARIANTS; aqui esta lo que cada una necesita para verse. */
.tinted{background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.split{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.g1{grid-template-columns:1fr}
.ruled{display:grid;gap:0 48px}
@media(min-width:768px){.ruled{grid-template-columns:1fr 1fr}}
.ruled>div{padding:22px 0;border-top:1px solid var(--border)}
.ruled h3{font-size:1.1rem}
.ruled p{margin-top:8px;color:var(--muted);font-size:.96rem}
.numbered{display:grid;gap:28px}
@media(min-width:768px){.numbered{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.stepno{display:block;font-size:2rem;font-weight:700;color:var(--accent);line-height:1}
.numbered h3,.timeline h3,.grid.plain h3{margin-top:8px;font-size:1.1rem}
.numbered p,.timeline p,.grid.plain p{margin-top:8px;color:var(--muted);font-size:.96rem}
.timeline{display:grid;gap:0;max-width:44rem;position:relative}
.timeline li{position:relative;padding:0 0 30px 40px;border-left:2px solid var(--border)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline .stepno{position:absolute;left:-19px;top:-4px;width:36px;text-align:center;background:var(--bg);font-size:1rem;padding-block:4px}
.mosaic{display:grid;gap:20px}
@media(min-width:768px){.mosaic{grid-template-columns:repeat(2,1fr)}.mosaic>*:first-child{grid-column:1 / -1}.mosaic>*:first-child .shot{aspect-ratio:21/9}}
.card-hi{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.quotes{display:grid;gap:36px;max-width:52rem;margin-inline:auto;text-align:center}
.quote blockquote p{font-size:1.2rem;line-height:1.5}
.quote figcaption{color:var(--muted)}
.faqcols{columns:2;column-gap:48px}
@media(max-width:768px){.faqcols{columns:1}}
.faqcols details{break-inside:avoid}
.ctabox{background:var(--primary);color:var(--on-primary);border-radius:calc(var(--radius) * 2);padding:56px 24px;text-align:center}
.ctabox p{color:color-mix(in srgb,var(--on-primary) 82%,transparent)}
/* Iconos de los datos de contacto y del horario. */
.ico{width:20px;height:20px;flex:none;color:var(--accent)}
.datum{display:flex;gap:14px;align-items:flex-start}
.datum .ico{margin-top:3px}
.dark .ico{color:color-mix(in srgb,var(--on-primary) 88%,transparent)}
/* Tipos de seccion nuevos. */
.split.flip>*:first-child{order:2}
@media(max-width:899px){.split.flip>*:first-child{order:0}}
.feature-wide{display:grid;gap:28px}
.feature-wide .shot{aspect-ratio:21/9}
.stats{display:grid;gap:24px;margin:36px 0 0}
@media(min-width:600px){.stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
.stats dt{font-family:inherit;font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:700;line-height:1;color:var(--accent)}
.stats dd{margin:8px 0 0;color:var(--muted);font-size:.96rem}
.stats.boxed>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.bigquote{margin:32px 0 0;max-width:34ch}
.bigquote blockquote{margin:0}
.bigquote p{font-size:clamp(1.3rem,1.1rem + 1.2vw,2rem);line-height:1.35;font-weight:600}
.bigquote figcaption{margin-top:16px;color:var(--muted);font-size:.95rem}
.wrap>.bigquote{margin-inline:auto;text-align:center}
.menu-list{margin:36px 0 0;display:grid;gap:0 56px}
@media(min-width:768px){.menu-list.two{grid-template-columns:1fr 1fr}}
.menu-list>div{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px dotted var(--border)}
.menu-list dt{font-weight:600;flex:none;max-width:70%}
.menu-list>div::after{content:"";flex:1;border-bottom:1px dotted var(--border);transform:translateY(-4px)}
/* El valor de la derecha se escribio pensando en un precio (corto y que no debe
   partirse), y con flex none mas nowrap no encoge ni parte. En una carta el
   valor no siempre es un precio: «Cuatro a elegir, y uno siempre de cuchara» se
   salia de la pantalla y **desplazaba la pagina entera en horizontal** en un
   movil, que es por donde entra casi todo el que mira la web de un restaurante.
   Encogiendo y partiendo, un precio sigue sin partirse porque no le hace falta. */
.menu-list dd{margin:0;font-weight:600;color:var(--accent);flex:0 1 auto;text-align:right}
.places{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.places li{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 18px;font-size:.95rem}
.places li span{color:var(--muted);margin-left:6px}
.places.cols{display:grid;gap:10px 32px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.places.cols li{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:11px 0}
.thin{padding-block:0}
.notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:18px 0}
.notice.inset{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:var(--radius);padding:20px 24px;margin-block:28px}
.dark .stats dt{color:var(--on-primary)}
.dark .menu-list dd{color:var(--on-primary)}
.dark .places li{background:color-mix(in srgb,var(--primary) 82%,#000);border-color:color-mix(in srgb,var(--on-primary) 22%,transparent)}
.dark .places li span{color:color-mix(in srgb,var(--on-primary) 78%,transparent)}
.pairs{margin:0}
.pairs>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--border)}
.pairs dt{font-weight:600;display:flex;align-items:center;gap:10px}
.pairs dd{margin:0;color:var(--muted);text-align:right}
/* Formulario de contacto. Sin JavaScript: es un form de los de siempre. */
.cform p{margin:0 0 18px}
/* Un formulario dentro de una tarjeta se escribe como un formulario.
   La regla .card p esta pensada para el texto de una tarjeta (mas pequeno y apagado) y
   alcanzaba a los rotulos del formulario, que salian a .96rem y grises al lado
   del rotulo de las horas, que va en cuerpo normal. Dos tamanos de rotulo en el
   mismo formulario es lo que hacia que la parte de la cita pareciera de otra
   web. Pasa en todos los formularios en tarjeta, no solo en el de la agenda. */
.card .cform p{font-size:inherit;color:inherit;margin-top:0}
.cform label{display:block;font-weight:600;margin-bottom:6px}
.cform input[type=text],.cform input[type=email],.cform textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.cform textarea{resize:vertical;min-height:120px}
.cform button{cursor:pointer;border:0;border-radius:999px;padding:13px 28px;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600}
.cform button:hover{filter:brightness(.95)}
/* La casilla del RGPD: el texto al lado y no debajo, y sin negrita, que es una
   condición y no un rótulo de campo. */
.cconsent label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem;color:var(--muted);line-height:1.5}
.cconsent input{margin-top:3px;flex:none;accent-color:var(--accent)}
.cconsent a{color:var(--accent)}
/* El campo que nadie ve. Se saca de la pantalla en lugar de ocultarlo con la
   propiedad display: los robots que miran los estilos se saltan lo oculto, y
   además esto ya lo esconde a los lectores de pantalla el atributo del marcado. */
.cnope{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* El selector de idioma de la cabecera: la bola del mundo, el idioma en que se
   está, y los demás dentro. Es un details, como el menú de móvil, así que se
   abre sin una línea de guion; dentro van enlaces de verdad, que se abren con
   el clic de en medio y los sigue un buscador. */
.langs{position:relative;margin-left:8px;font-size:.82rem}
.langs>summary{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;color:var(--muted);cursor:pointer;white-space:nowrap;list-style:none}
.langs>summary::-webkit-details-marker{display:none}
.langs>summary svg{width:17px;height:17px;flex:none}
.langs>summary:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.langs>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langs[open]>summary{color:var(--ink)}
/* La flecha se dibuja con un borde girado en lugar de meter otro icono: son dos
   líneas de CSS y no un trazo más que servir en cada página. */
.langs>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.langs[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.langs>nav{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:9rem;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 6px 24px rgba(0,0,0,.1)}
.langs>nav a{padding:8px 12px;border-radius:8px;color:var(--ink);text-decoration:none;white-space:nowrap}
.langs>nav a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* Dentro del menú de móvil se despliega hacia abajo y ocupando la fila, que ahí
   no hay a la derecha contra lo que alinear un panel flotante. */
.menu .langs{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border)}
.menu .langs>summary{padding-left:0}
.menu .langs>nav{position:static;border:0;padding:0;box-shadow:none;background:none;min-width:0}
.menu .langs>nav a{padding-left:0}
@media (max-width:820px){.site-head .wrap>.langs{display:none}}
/* En pantalla estrecha, dentro de la cabecera ancha, el nombre del idioma sobra:
   la bola ya dice qué es y lo que se necesita es el sitio. */
@media (max-width:1040px){.site-head .wrap>.langs .langs-now{display:none}}

/* La agenda: el calendario de días y la rejilla de horas.
   Sin JavaScript, así que cada día es un enlace y cada hora un boton de radio.
   El estado elegido se pinta con :checked sobre el hermano, que es lo unico que
   permite marcar una hora sin un guion detras. */
.bkdays{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin:0 0 18px;scrollbar-width:thin}
.bkday{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:68px;padding:11px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:600;line-height:1.25}
.bkday small{font-weight:400;font-size:.78rem;color:var(--muted)}
.bkday:hover{border-color:var(--accent)}
.bkday--on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bkday--on small{color:var(--on-accent);opacity:.85}
/* Un dia completo se enseña, no se esconde: un calendario con agujeros se lee
   como una web rota y no como que ese jueves esta lleno. */
.bkday--full{opacity:.55;cursor:not-allowed}
/* No reutiliza .opts (la del paso de pedido) a proposito: aquella declara
   display:grid y va despues en la hoja, asi que ganaba y las horas salian
   una debajo de otra en vez de en rejilla. Compartir una clase con otra
   seccion ata dos cosas que no tienen por que cambiar juntas. */
.bkslots{display:flex;flex-direction:column;gap:14px;border:0;padding:0;margin:0 0 18px}
/* Cada turno, su propia rejilla. La separacion entre turnos es lo que rompe el
   muro de cuarenta pastillas seguidas de una peluqueria; dentro de uno van
   pegadas, que es como se comparan. */
.bkturno{display:flex;flex-wrap:wrap;gap:8px}
.bkturno+.bkturno{padding-top:14px;border-top:1px dashed var(--border)}
/* El rotulo de las horas se escribe como los demas rotulos de este formulario
   y no en versalitas. Estaba en .78rem, en mayusculas y espaciado, al lado de
   «Que servicio» y «Tu nombre», que van en cuerpo normal: eran dos estilos de
   rotulo dentro del mismo formulario, y eso es lo que hacia que la parte de la
   cita se leyera como si fuera de otra web. */
.bkslots legend{width:100%;font-weight:600;color:var(--ink);padding:0;margin-bottom:10px}
.bkslot{display:inline-flex}
.bkslot input{position:absolute;opacity:0;width:1px;height:1px}
.bkslot span{display:inline-block;padding:10px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-weight:500;font-size:.98rem;cursor:pointer}
.bkslot input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
/* El foco tiene que verse: el control real esta escondido, asi que el anillo lo
   lleva la etiqueta. Sin esto, quien navega con teclado no sabe donde esta. */
.bkslot input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.bkform select,.bkform input[type=tel],.bkform input[type=number]{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
.bkform select:focus-visible,.bkform input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.bkform button[disabled]{opacity:.5;cursor:not-allowed}
/* Las cuatro composiciones de una reserva salen del mismo marcado y las reparte
   esto. Ver renderAgenda: el formulario va en dos bloques, lo que se elige y
   quien lo pide, que es lo unico que hace falta para colocarlas.
   Al lado: la columna de datos y el formulario. El horario y el telefono son lo
   que se pregunta justo antes de reservar, y hasta ahora obligaban a subir a la
   seccion de horario o bajar al pie. */
.bkside{display:grid;gap:32px 52px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
.bkside-texto{padding-top:4px}
/* Sin esto, en un movil la banda entera se iba a 1645 px y la pagina se
   desplazaba en horizontal. La causa es la tira de dias: sus pastillas llevan
   flex 0 0 auto, o sea que no encogen, asi que el ancho minimo del formulario
   es la suma de las nueve. Un hijo de rejilla tiene min-width auto, que es ese
   minimo, y estira su columna por mucho que la columna diga 1fr. Con min-width
   cero la columna manda y la tira se desplaza por dentro, que es para lo que
   lleva overflow-x. Vale para las dos rejillas de la agenda. */
.bkside>*,.bkform--band>*{min-width:0}
@media (max-width:860px){.bkside{grid-template-columns:minmax(0,1fr)}}
/* A sangre: lo que se elige a un lado y quien lo pide al otro, con el
   calendario ocupando su columna entera. Es la que convierte la reserva en lo
   principal de la banda en vez de un formulario mas. */
.bkform--band{display:grid;gap:8px 44px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.bkform--band{grid-template-columns:minmax(0,1fr)}}
/* La caja de una composicion ancha tiene mas aire dentro: con el relleno de una
   tarjeta estrecha, el calendario llegaba a tocar el borde. */
.bkside-form>.card,.card:has(>.bkform--band){padding:28px}
@media (max-width:560px){.bkside-form>.card,.card:has(>.bkform--band){padding:20px}}
.formnote{margin:0 0 20px;padding:14px 16px;border-radius:10px;font-weight:600}
.formok{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--ink)}
.formbad{background:color-mix(in srgb,#b4341f 12%,var(--surface));color:var(--ink)}
.formfallback{color:var(--muted)}
.formfallback a{color:var(--accent)}
.disc{width:110px;height:110px;margin-inline:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--muted)}
/* Tienda: cesta, cantidades y el formulario del pedido. */
.cartlink{position:relative;display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:999px;color:var(--ink);flex:none}
.cartlink:hover{background:var(--surface)}
.cartlink svg{width:21px;height:21px}
.cartnum{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Y hace falta nombrarlo con el atributo dentro del selector, que es la tercera
   vez que pasa lo mismo: la regla del navegador para el atributo pesa igual que
   una clase y gana la ultima, asi que el contador se quedaba pintado con la
   cesta vacia. Un circulo de color junto al carrito, sin numero dentro, dice que
   hay algo esperando, y no habia nada. */
.cartnum[hidden]{display:none}
/* Cabecera y banda a sangre, con la foto de fondo.
   El velo no es decorativo: donde cae el texto la capa oscura va al 82% o mas,
   asi que el contraste con el texto claro se sostiene sobre cualquier foto,
   tambien sobre una blanca. Bajarlo deja titulares ilegibles en las fotos
   claras, que es justo lo que no se ve al probar con una foto oscura. */
.hero-cover,.band-cover{position:relative;isolation:isolate;overflow:hidden}
/* El relleno lo pone el contenedor de dentro, no la banda: con los dos, debajo
   de los botones quedaban ciento sesenta pixeles de foto vacia. */
.hero-cover{display:flex;align-items:flex-end;min-height:clamp(520px,74vh,720px);padding-block:0}
.band-cover{display:flex;align-items:center;min-height:clamp(280px,36vh,400px);text-align:center;padding-block:0}
.band-cover .wrap{padding-block:56px}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-cover::after,.band-cover::after{content:"";position:absolute;inset:0;z-index:-1}
/* El velo se reparte a lo alto: casi opaco donde cae el texto y muy suave
   arriba, que es donde se ve la foto. Un velo uniforme lo bastante oscuro para
   garantizar el contraste apaga la fotografia entera y entonces daba igual
   ponerla. */
.hero-cover::after{background:linear-gradient(to top,rgba(10,12,9,.94) 0%,rgba(10,12,9,.9) 58%,rgba(10,12,9,.52) 79%,rgba(10,12,9,.16) 100%)}
.band-cover::after{background:linear-gradient(to right,rgba(10,12,9,.55),rgba(10,12,9,.35))}
/* El texto va sobre una placa y no sobre la foto pelada: asi la placa garantiza
   el contraste (esta al 86%) y el velo de alrededor puede ser suave, que es lo
   que deja ver la fotografia. Con un velo unico lo bastante oscuro para el
   texto, la banda salia negra y la foto no se veia. */
.band-plate{display:inline-block;max-width:52rem;padding:clamp(22px,3vw,36px) clamp(24px,4vw,52px);border-radius:var(--radius);background:rgba(10,12,9,.86)}
.hero-cover .wrap{padding-block:72px 60px}
.hero-cover h1{max-width:18ch}
.band-cover .band-title{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:700;line-height:1.15}
.band-cover .band-body{margin-top:12px;font-size:1.05rem;max-width:56ch;margin-inline:auto;color:color-mix(in srgb,var(--on-primary) 88%,transparent)}
/* Carrusel sin guion: varias fotos superpuestas con la opacidad animada y el
   turno desplazado. Las tres formas de reparto estan escritas porque el
   porcentaje al que le toca desaparecer a cada una depende de cuantas haya, y
   un porcentaje no admite variable. Quien pide menos movimiento se queda con la
   primera fija. */
.hero-carousel .cover-img{opacity:0;animation-iteration-count:infinite;animation-timing-function:linear}
.slides-2 .cover-img{animation-name:paso2}
.slides-3 .cover-img{animation-name:paso3}
.slides-4 .cover-img{animation-name:paso4}
@keyframes paso2{0%,42%{opacity:1}52%,100%{opacity:0}}
@keyframes paso3{0%,27%{opacity:1}35%,100%{opacity:0}}
@keyframes paso4{0%,19%{opacity:1}27%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
 .hero-carousel .cover-img{animation:none}
 .hero-carousel .cover-img:first-of-type{opacity:1}
}
/* Pantalla partida a sangre: color y texto a un lado, fotografia al otro. */
.hero-panel{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(480px,78vh,760px);padding-block:0;overflow:hidden}
.hero-panel .panel-text{display:flex;align-items:center;padding:clamp(36px,5vw,80px)}
.panel-img{width:100%;height:100%;object-fit:cover;min-height:280px}
@media (max-width:820px){.hero-panel{grid-template-columns:1fr}.panel-img{order:-1;max-height:44vh}}
/* Escenario: ocupa la pantalla y la tira de fotos asoma pegada abajo. */
.hero-stage{display:flex;flex-direction:column;justify-content:center;min-height:min(92vh,900px);padding-bottom:0}
.hero-stage .wrap{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-stage .hero-actions{justify-content:center}
.stage-strip{margin-top:0}
.stage-strip .strip-shot{aspect-ratio:3/2;max-height:28vh}
/* Collage: una foto alta y dos apiladas al lado. */
.mos{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:100%}
.mos-shot{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);min-height:130px}
.mos-shot:first-child{grid-row:1/3}
/* Foco: el texto en su banda y la foto asomando sobre la seccion siguiente. */
.hero-spot{padding-bottom:0}
.hero-spot .wrap+.wrap{margin-top:40px}
.spot-img{width:100%;aspect-ratio:21/9;object-fit:cover;margin-bottom:-84px;position:relative;box-shadow:0 18px 50px rgba(0,0,0,.18)}
@media (max-width:700px){.spot-img{margin-bottom:-40px}}
/* Cabecera de dos fotos: la segunda baja un poco para que el par no se lea
   como una rejilla. En pantalla estrecha van una al lado de otra igual, que
   apiladas ocuparian la pantalla entera antes del titular. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.duo-shot{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.duo-shot:last-child{margin-top:40px}
/* Galeria en banda: de lado a lado, sin margenes ni huecos. Es el recurso mas
   barato para cortar una sucesion de bloques de texto. En pantalla estrecha se
   desplaza en horizontal en vez de apilarse, que es como se mira una tira. */
/* La tira llega hasta el borde de abajo: es una banda a sangre y pegarla a la
   seccion siguiente es lo que hace que se lea como un corte y no como una
   rejilla mal centrada. */
.strip-band{padding-bottom:0}
.strip-bare{padding-top:0}
.strip-bare .strip{margin-top:0}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory}
.strip-shot{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0;scroll-snap-align:start}
/* Ficha apilada: la foto arriba y a sangre, y debajo el texto en dos columnas
   para que la linea no se vaya a ciento diez caracteres. */
.prod-stack{padding-top:0}
.prod-stack .wrap{margin-top:44px}
.prod-stack .pairs{margin-top:0}
@media (min-width:900px){
 .prod-stack .wrap>div{display:grid;grid-template-columns:1fr 1fr;gap:12px 56px;align-items:start}
 .prod-stack h1,.prod-stack h2,.prod-stack .price{grid-column:1/-1}
 .prod-stack .buys{grid-column:1/-1}
}
/* Destacado superpuesto: foto a todo el ancho con el texto montado encima. */
.wide-shot{width:100%;aspect-ratio:21/9;object-fit:cover}
.card.over{margin-top:-96px;position:relative;padding:clamp(24px,3vw,40px);max-width:44rem}
@media (max-width:700px){.card.over{margin-top:-40px}.hero-cover{min-height:0}}
/* Cifras en barra: sin tarjetas ni lineas, solo los numeros repartidos. */
.stats.bar{display:flex;flex-wrap:wrap;gap:28px 48px;margin-top:32px;border-top:1px solid var(--border);padding-top:28px}
.stats.bar>div{flex:1 1 8rem;text-align:left}
.dark .stats.bar{border-color:color-mix(in srgb,var(--on-primary) 25%,transparent)}
/* Precio de una ficha del catalogo, en su propia linea. */
.item-price{font-weight:700;color:var(--accent);font-size:1.1rem;white-space:nowrap}
.dark .item-price{color:var(--on-primary)}
.price span{font-size:1rem;font-weight:500;color:var(--muted)}
/* Opciones de entrega y de pago: la fila entera se pulsa, no solo el circulo.
   Un radio de dieciseis pixeles en un movil es un blanco que se falla. */
.opts{border:0;padding:0;margin:0;display:grid;gap:12px}
/* Sin esto, esconder el bloque de la direccion no lo escondia: display:grid de
   la clase pesa lo mismo que la regla del navegador para el atributo hidden y
   gana la ultima, que era la de la clase. Pasa siempre que se le pone display
   a algo que luego se oculta con hidden. */
.opts[hidden]{display:none}
.opts legend{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding:0;margin-bottom:4px}
.opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.opt input{flex:none;width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.opt-text{flex:1;display:grid;gap:2px}
.opt-text em{font-style:normal;font-size:.9rem;color:var(--muted)}
.opt-price{font-weight:700;white-space:nowrap}
.sum-total td{font-size:1.25rem}
.item-wrap{display:flex;flex-direction:column}
.item-wrap>.item{flex:1}
/* El precio y el boton comparten fila debajo de la tarjeta. El boton a todo el
   ancho pesaba mas que la propia foto del producto y toda la rejilla se leia
   como una hilera de botones. */
.item-buy{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn-add{padding:8px 16px;font-size:.9rem}
.buys{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cart-empty{color:var(--muted);margin-top:28px}
.cart-table{width:100%;border-collapse:collapse;margin-top:28px}
.cart-table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--border)}
.cart-table td{padding:16px 0;border-bottom:1px solid var(--border);vertical-align:middle}
.cart-table td:nth-child(3),.cart-table tfoot td{text-align:right;font-weight:600;white-space:nowrap}
.cart-table td:last-child{text-align:right;width:44px}
.cart-table tfoot th{border-bottom:0;padding-top:16px;font-size:.95rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.cart-table tfoot td{border-bottom:0;padding-top:16px;font-size:1.15rem}
.qty{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer}
.qty:hover{border-color:var(--accent);color:var(--accent)}
.cart-table td:nth-child(2){white-space:nowrap}
.cart-table td:nth-child(2) span{display:inline-block;min-width:28px;text-align:center;font-weight:600}
.order{margin-top:28px;display:grid;gap:26px;max-width:36rem}
.field{margin:0;display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:600}
.field input,.field textarea{font:inherit;font-size:1rem;padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.done{margin-top:28px;padding:28px;border:1px solid var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.done h3{font-size:1.3rem}
.done p{margin-top:10px}
.price{margin-top:10px;font-family:inherit;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);font-weight:700;color:var(--accent)}
.dark .price{color:var(--on-primary)}
/* La ficha del catalogo entera es el enlace a su producto. */
.item-link{display:flex;text-decoration:none;color:inherit;transition:border-color .15s}
.item-link:hover{border-color:var(--accent)}
.item-link h3{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.item-row{flex-direction:column}
@media(min-width:640px){.item-row{flex-direction:row;align-items:stretch}}
@media(min-width:640px){.item-row .shot{width:34%;max-width:220px;aspect-ratio:auto;border:0;border-right:1px solid var(--border);border-bottom:0;flex:none}}
.item-row .item-text{padding-block:6px}
.item-text h3{padding:18px 20px 0}
.item-text p{padding:0 20px 20px}
/* Bloques oscuros.
   Todo lo que dentro de una banda oscura fija su propio color se enumera aqui.
   Solo estaban los parrafos y el subtitulo, y cualquier otra regla con
   selector propio (los horarios, el texto de los pasos, los pies de foto, la
   firma de una opinion) conservaba el color apagado, que sobre el color de
   marca da entre 1,5 y 2,4 de contraste: texto que no se lee. El agente puede
   poner una banda oscura en cualquier seccion, asi que no era un caso raro. */
.dark{background:var(--primary);color:var(--on-primary)}
.dark .sec-sub,.dark p,.dark .pairs dd,.dark .frame figcaption,.dark .quote figcaption,.dark .ruled p,.dark .numbered p,.dark .timeline p,.dark .grid.plain p{color:color-mix(in srgb,var(--on-primary) 82%,transparent)}
.dark .pairs>div,.dark .ruled>div,.dark .timeline li{border-color:color-mix(in srgb,var(--on-primary) 24%,transparent)}
.dark .timeline .stepno{background:var(--primary)}
.dark .card{background:color-mix(in srgb,var(--primary) 82%,#000);border-color:color-mix(in srgb,var(--on-primary) 18%,transparent)}
.dark .card h3{color:var(--on-primary)}
.dark .slot{background:color-mix(in srgb,var(--primary) 82%,#000);border-color:color-mix(in srgb,var(--on-primary) 24%,transparent);color:color-mix(in srgb,var(--on-primary) 78%,transparent)}
/* El pie del mapa dentro de una banda oscura lleva el color de la banda: sin
   esto heredaba el gris apagado y quedaba en 1,5 de contraste. */
.dark .mapfoot,.dark .mapfoot .mapaddr{color:var(--on-primary)}
/* Imágenes y huecos de imagen. Ocupan lo mismo con foto y sin ella, así que
   subir las fotos no descoloca la página que el cliente ya dio por buena. */
.shot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
.frame{margin:0}
.frame figcaption{margin-top:10px;color:var(--muted);font-size:.88rem}
.slot{display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;min-height:190px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);font-size:.88rem}
.item .shot{border:0;border-bottom:1px solid var(--border);border-radius:0;aspect-ratio:3/2}
/* Mapa. Carga con la pagina; ver el comentario de la plantilla sobre lo que eso
   implica en cookies. */
.mapbox{margin-top:28px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.mapbox iframe{display:block;width:100%;height:360px;border:0}
.mapempty{display:flex;align-items:center;justify-content:center;min-height:240px;padding:32px;text-align:center;color:var(--muted)}
/* Donde iria el mapa cuando no se incrusta nada de fuera. Ocupa exactamente lo
   mismo que el mapa: si midiera menos, la muestra ensenaria una pagina mas
   corta que la que se entrega. La rejilla de lineas se dibuja con el propio
   fondo y no con una imagen, para que siga siendo un solo fichero. */
.mapoff{display:flex;align-items:center;justify-content:center;height:360px;padding:32px;text-align:center;color:var(--muted);background-color:var(--bg);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:44px 44px}
.mapoff p{margin:0;padding:10px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.9rem}
.mapfoot{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.mapaddr{font-weight:600}
.split .mapbox{margin-top:0}
/* Listas y detalles */
.plain{list-style:none;margin:0;padding:0}
.check li{display:flex;gap:10px;align-items:flex-start;margin-top:12px;color:var(--muted)}
.check li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--accent);opacity:.22}
/* Acotado a las preguntas frecuentes: estas reglas eran globales y pintaban
   tambien el desplegable de la cabecera, que es otro elemento details. */
.faqs details{border-top:1px solid var(--border);padding:18px 0}
.faqs details:last-child{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
.faqs details p{margin-top:10px;color:var(--muted)}
/* Boton flotante del escaparate. Separado de las esquinas: pegado al borde se
   lee como parte del navegador y en un movil cae justo donde estan los gestos
   del sistema. Por encima de todo lo demas, que para eso flota. */
.floatcta{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:50;display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.98rem;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.28);cursor:pointer}
.floatcta:hover{filter:brightness(.93)}
.floatcta:focus-visible{outline:3px solid var(--on-accent);outline-offset:3px}
/* Se aparta del pie cuando se llega al final, para no taparlo. */
@media (max-width:520px){.floatcta{padding:12px 18px;font-size:.92rem}}
@media print{.floatcta{display:none}}
/* La version con texto, para el borrador de un cliente. Estorba mas a
   proposito: la banda de arriba se lee una vez al entrar y luego se olvida, y
   lo que hay que decirle mientras recorre su web es que ganaria publicandola.
   En movil ocupa el ancho menos los margenes, porque un panel de trescientos
   veinte pixeles en una pantalla de trescientos sesenta se sale. */
.floatpanel{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);left:auto;z-index:50;width:min(21rem,calc(100vw - 32px));padding:18px 20px;border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 16px 44px rgba(0,0,0,.26);border:1px solid var(--border)}
.floatpanel-t{margin:0;font-weight:700;font-size:1rem;line-height:1.3}
.floatpanel-b{margin:7px 0 0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.floatpanel-a{display:block;margin-top:14px;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.95rem;text-align:center;text-decoration:none;cursor:pointer}
.floatpanel-a:hover{filter:brightness(.93)}
.floatpanel-a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:520px){.floatpanel{left:16px;right:16px;width:auto}}
@media print{.floatpanel{display:none}}
/* La marca de agua de una web sin publicar.
   Cruza la pantalla en diagonal y no se mueve al desplazarse, porque lo que
   dice vale para la web entera y no para el trozo que se este mirando. La banda
   de arriba se lee una vez al entrar y se olvida; esto no se olvida, que es
   justo lo que se quiere de un borrador que su dueno va a ensenar a alguien.
   Va por debajo de la banda superior y del panel de publicar (z-index 60 y 50)
   y por encima del contenido.
   Las letras van huecas, con el contorno dibujado y el relleno transparente, y
   eso no es un capricho: una mancha solida cubre el area entera de cada letra y
   baja el contraste del texto que queda debajo, que en una combinacion justa de
   AA es la diferencia entre cumplir y no cumplir. El contorno tapa una fraccion
   de eso y ademas se lee mejor como marca de agua.
   El modo de fusion por diferencia es lo que hace que se vea siempre. Con un
   color fijo hay que elegir: uno oscuro desaparece sobre una banda oscura y uno
   claro desaparece sobre el fondo claro, y una web generada tiene las dos cosas
   en la misma pantalla. Por diferencia, el contorno sale claro sobre lo oscuro y
   oscuro sobre lo claro, sin saber nada de la paleta. Cuesta que el navegador
   recomponga la capa al desplazarse, y se acepta: esto solo se pinta en la web
   sin publicar, nunca en la que se entrega.
   La palabra va una sola vez y el tamano sale de la pantalla, no de un numero
   fijo. Repetida, lo que sobra no queda limpiamente fuera del recorte: se ve
   media palabra a cada lado, porque el recorte cae donde cae. Con una sola no
   hay nada que partir.
   El tamano es el menor entre una fraccion del ancho y una de la alto, y esa
   segunda condicion no sobra: girada veinticuatro grados, una palabra que cabe
   de ancho puede no caber de alto en una ventana apaisada y baja, y entonces se
   recorta por arriba y por abajo.
   Se imprime a proposito. La banda de arriba se oculta al imprimir, asi que sin
   esto un borrador impreso pasaria por definitivo. */
.draftmark{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;mix-blend-mode:difference}
.draftmark span{white-space:nowrap;transform:rotate(-24deg);font-family:var(--font-heading);font-weight:800;font-size:clamp(2rem,min(11vw,20vh),16rem);line-height:1;letter-spacing:.1em;text-transform:uppercase;color:transparent;-webkit-text-stroke:3px #fff;opacity:.26}
@media (max-width:640px){.draftmark span{-webkit-text-stroke-width:2px}}
/* Pie */
.site-foot{background:var(--primary);color:var(--on-primary);padding-block:44px}
/* La linea de separacion se queda como red de seguridad. La regla de verdad
   esta en el generador: la ultima seccion no se pinta oscura y lisa, asi que
   este caso solo puede darse cuando la ultima banda lleva fotografia a sangre,
   donde la linea si viene bien para rematar. */
main:has(>section.dark:last-of-type)+.site-foot{border-top:1px solid color-mix(in srgb,var(--on-primary) 20%,transparent)}
.site-foot a{color:color-mix(in srgb,var(--on-primary) 88%,transparent)}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.social a{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--on-primary) 26%,transparent);border-radius:999px;color:var(--on-primary)}
.social a:hover{background:color-mix(in srgb,var(--on-primary) 12%,transparent)}
.social svg{width:19px;height:19px}
/* El armazon del pie es siempre el mismo marcado y lo que cambia es esto. Ver
   la funcion footer de build.ts: cuatro constructores de HTML distintos serian
   cuatro sitios donde se olvida el aviso legal.
   Es flex con space-between y no una rejilla de columnas iguales, y ahi esta la
   diferencia: con tres columnas de 1fr, los enlaces ocupaban un tercio de su
   columna y quedaba un palmo de vacio a la derecha, con toda la tinta
   amontonada a la izquierda. Asi cada bloque mide lo que ocupa, la marca se
   queda el resto y el ultimo llega al borde, haya dos bloques o cuatro. */
.foot-main{display:flex;flex-wrap:wrap;gap:34px 52px;justify-content:space-between}
.foot-brand{flex:1 1 240px;max-width:36ch}
.foot-block{flex:0 1 auto}
.foot-name{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:700;font-size:1.25rem;line-height:1.2}
.foot-name img{border-radius:8px}
.foot-tag{margin-top:8px;font-size:.92rem;line-height:1.55;opacity:.8}
/* Mismo rotulo pequeno que el resto del sitio (.78rem, .08em, 600). Sobre el
   color del pie no vale var(--muted), que esta calculado para fondo claro, asi
   que lo que apaga aqui es la opacidad. */
.foot-h{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.66}
.foot-h svg{width:15px;height:15px;flex:none}
.foot-contact,.foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:.95rem}
.foot-contact li{display:flex;align-items:center;gap:10px}
.foot-contact svg{width:17px;height:17px;flex:none;opacity:.7}
.foot-contact a,.foot-links a{text-decoration:none}
.foot-contact a:hover,.foot-links a:hover{color:var(--on-primary);text-decoration:underline}
/* El idioma en el que se esta: se dice y no se enlaza, que llevaria a esta
   misma pagina. */
.foot-links [aria-current]{font-weight:600;opacity:.75}
/* Diez idiomas en fila india dejan el pie al doble de alto que el resto de
   columnas. En dos, ocupa lo que ocupan las demas. Es multicolumna y no una
   rejilla porque el numero de idiomas lo elige el cliente y aqui no hay que
   contarlos: se reparten solos. */
.foot-links--dos{display:block;column-count:2;column-gap:34px}
.foot-links--dos li{margin-bottom:10px;break-inside:avoid}
/* La linea de abajo separa lo que obliga la ley de lo que es contenido del
   negocio. Antes iban en el mismo bloque y el aviso legal parecia otro enlace
   mas del sitio. */
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--on-primary) 20%,transparent);font-size:.82rem}
.site-foot .legal{margin:0;opacity:.78}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
/* Centrado: una columna estrecha en medio, no lo mismo repartido a lo ancho.
   Ahi estaba el problema, que centrado sobre 1120 px son cuatro islas de texto
   con un desierto en medio y no se lee como una decision. Apretado a 40rem
   parece un cartel, que es lo que le va a un negocio de una sola pagina. */
.foot--centered .foot-main{flex-direction:column;align-items:center;text-align:center;gap:26px;max-width:40rem;margin-inline:auto}
.foot--centered .foot-brand{flex:none;max-width:none}
.foot--centered .foot-name{justify-content:center;font-size:1.6rem}
.foot--centered .social{justify-content:center}
.foot--centered .foot-block{width:100%}
.foot--centered .foot-h{justify-content:center}
/* En fila y no en columna: cuatro enlaces uno debajo de otro en una caja
   estrecha alargan el pie sin necesidad. */
.foot--centered .foot-contact,.foot--centered .foot-links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 24px}
.foot--centered .foot-bar{justify-content:center;text-align:center;max-width:40rem;margin-inline:auto}
/* Recuadro: **solo el contacto** sale del fondo y se lee como una tarjeta. Es
   el que mejor le va a quien quiere que se le llame.
   La caja se ata a foot-block--contact y no a foot-block a secas, que es lo que
   estaba y dejaba las paginas dentro de una segunda tarjeta suelta. Y mide lo
   que ocupa su contenido, que antes era media columna vacia. */
.foot--inset .foot-block--contact{padding:22px 26px;border:1px solid color-mix(in srgb,var(--on-primary) 24%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--on-primary) 8%,transparent)}
.foot--inset .foot-contact{gap:12px;font-size:1rem}
.foot--inset .foot-contact svg{opacity:.85;color:var(--accent)}
/* Una linea: lo justo. No lleva el bloque de paginas, y no por CSS: no se
   emite. Todo lo demas se tumba en horizontal y el pie se queda en su altura
   minima, que es de lo que se trata. */
.foot--minimal{padding-block:32px}
.foot--minimal .foot-main{align-items:center;gap:16px 40px}
.foot--minimal .foot-name{font-size:1.1rem}
.foot--minimal .foot-tag{display:none}
.foot--minimal .social{margin-top:10px}
.foot--minimal .foot-h{display:none}
.foot--minimal .foot-block{flex:0 1 auto}
.foot--minimal .foot-contact,.foot--minimal .foot-links{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
.foot--minimal .foot-bar{margin-top:26px;padding-top:16px}
/* Blog. La tarjeta de una entrada se usa en tres sitios (el indice, el cierre
   de una entrada y la seccion de ultimas entradas), asi que su aspecto se
   decide una vez aqui. La rejilla baja a una columna sola, sin consulta de
   medios: auto-fit reparte lo que cabe. */
.post-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:32px}
.post-grid--list{grid-template-columns:1fr}
.post-card{display:flex}
.post-card__link{display:flex;flex-direction:column;width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.post-card__link:hover{border-color:var(--primary);box-shadow:0 2px 14px rgba(0,0,0,.06)}
.post-card__shot,.post-card .slot{width:100%;aspect-ratio:16/10;object-fit:cover;border:0;border-radius:0;border-bottom:1px solid var(--border);min-height:0}
.post-card__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.post-card__body time{font-size:.82rem;color:var(--muted)}
.post-card__body h3{font-size:1.12rem;line-height:1.3}
.post-card__body p{color:var(--muted);font-size:.95rem}
/* El «Leer» se separa del texto y se pega abajo, para que tres tarjetas de
   distinta longitud lo tengan a la misma altura. */
.post-card__more{margin-top:auto;padding-top:6px;font-size:.9rem;font-weight:600;color:var(--accent)}
.post-more{margin-top:28px}
.post-empty{margin-top:24px;color:var(--muted)}

/* La entrada. Se lee, asi que la columna se acota a lo que el ojo sigue sin
   perder la linea: por encima de unos setenta caracteres hay que buscar el
   principio de la siguiente y se relee la misma dos veces. */
.wrap--prose{max-width:44rem}
.post__back{font-size:.92rem}
.post__date{display:block;margin-top:20px;font-size:.88rem;color:var(--muted)}
.post h1{margin-top:8px}
.post__cover{margin-top:28px}
.post__shot,.post .slot{width:100%;aspect-ratio:16/9;object-fit:cover}
.post__body{margin-top:32px}
.post__body>*+*{margin-top:20px}
.post__body h2{margin-top:40px;font-size:1.35rem}
.post__body ul{padding-left:1.3em;list-style:disc}
.post__body li+li{margin-top:8px}
.post__body blockquote{border-left:3px solid var(--accent);padding-left:20px;font-style:italic;color:var(--muted)}
.post__body blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:.9rem}
.post__figure figcaption{margin-top:10px;font-size:.9rem;color:var(--muted)}
/* El aviso lleva su rotulo escrito ademas del borde de color: un borde no dice
   nada a quien no lo ve. */
.post__note{border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-radius:var(--radius);padding:18px 22px}
.post__note-title{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.post__steps{list-style:none;padding-left:0;counter-reset:paso}
.post__steps>li{counter-increment:paso;position:relative;padding-left:3rem;min-height:2rem}
.post__steps>li+li{margin-top:22px}
.post__steps>li::before{content:counter(paso);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.post__step-title{font-weight:600;color:var(--ink)}
/* La tabla se desplaza dentro de su caja: el cuerpo de la pagina nunca debe
   desplazarse en horizontal, porque eso rompe la lectura de todo lo demas. */
.post__table-scroll{overflow-x:auto}
.post__table table{width:100%;min-width:26rem;border-collapse:collapse}
.post__table th,.post__table td{border:1px solid var(--border);padding:10px 12px;text-align:left;font-size:.95rem}
.post__table thead th{background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.post__table figcaption{margin-top:10px;font-size:.9rem;color:var(--muted)}

/* Accesibilidad */
.offscreen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;padding:10px 18px;background:var(--accent);color:var(--on-accent);border-radius:999px}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Impresion. En una web de negocio local lo que se imprime es la pagina de
   contacto: interesa que salga la direccion y el horario, no la banda pegajosa
   ni un boton que en papel no hace nada. */
@page{margin:16mm}
@media print{
.topnote,.skip,.site-nav,.menu>summary{display:none}
.mapbox{display:none}
.topstack{position:static}
.site-head{border-bottom:1px solid #bbb;background:#fff}
/* Un details cerrado no imprime su contenido: la pagina de preguntas salia con
   las preguntas y sin las respuestas. */
details::details-content{content-visibility:visible!important;display:block!important}
.faqs details>*{display:block!important}
body{background:#fff;color:#000;font-size:12pt}
section{padding-block:16pt;break-inside:avoid}
.dark,.ctabox,.tinted{background:#fff!important;color:#000!important}
.dark p,.ctabox p{color:#000!important}
.card,.item,.slot,.shot{border-color:#bbb;break-inside:avoid}
.site-foot{background:#fff;color:#000;border-top:1px solid #bbb;margin-top:24pt}
.site-foot a{color:#000}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}

.foot-by{margin-top:.35rem;font-size:.8125rem;opacity:.75}
.foot-by a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.foot-by a:hover{opacity:1}
.do-badge{position:fixed;right:.75rem;bottom:.75rem;z-index:40;display:inline-flex;gap:.3rem;
align-items:center;padding:.4rem .7rem;border-radius:999px;font-size:.75rem;line-height:1;
text-decoration:none;background:#1c1917;color:#fafaf9;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.do-badge strong{font-weight:600}
@media print{.do-badge{display:none}}
.do-strip{background:#1c1917;color:#fafaf9;text-align:center;font-size:.8125rem;padding:.4rem .75rem}
.do-strip a{color:inherit;text-decoration:none}
.do-strip strong{font-weight:600}