/* La tipografía original de la casa, descargada de jugovivo.com */
@font-face{
font-family:"Jugo";
src:url("Jugo-Regular.woff2") format("woff2");
font-weight:400; font-display:swap;
}
:root{
--fondo:#FFE3D9; /* rosa, el de siempre */
--tinta:#141210;
--vino:#8c2f39; /* el acento del fondo rosa; cada fondo tiene el suyo */
--linea:rgba(20,18,16,.25);
--papel:rgba(255,255,255,.35);
/* los cuatro tamanos de foto de toda la web */
--f-vertical:560px; /* alto de las verticales (3:4) */
--f-panoramica:960px; /* ancho de las panoramicas (21:9) */
--f-horizontal:560px; /* ancho de las horizontales (4:3) */
--f-horizontal-peq:400px;/* ancho de las que van en serie */
--f-botella:230px; /* alto de TODAS las fotos de botella */
--titular:"Jugo", serif;
--texto:"IBM Plex Mono", ui-monospace, monospace;
}
/* cada fondo lleva su propio acento: el rojo vino solo pega con el rosa */
:root{--lectura:66ch} /* una sola medida para todo texto corrido */
body.verde{--fondo:#DAECD9; --vino:#2F6140; --tinta:#10180F} /* verde profundo */
body.blanco{--fondo:#FBF8F3; --vino:#8A6A3B; --tinta:#17140F} /* ocre tostado */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:var(--fondo); color:var(--tinta);
font-family:var(--texto); font-size:16px; line-height:28px;
transition:background-color .5s ease, color .5s ease;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-weight:400; margin:0}
.wrap{width:min(1200px,90vw); margin-inline:auto}
.display{font-family:var(--titular); line-height:1.02; letter-spacing:.005em}
/* ---------- barra lateral de colores, como la original ---------- */
.paleta{
position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:40;
display:flex; flex-direction:column; gap:1.6rem; padding:1rem .55rem;
border-right:1px solid var(--linea); background:var(--fondo);
}
.paleta button{
appearance:none; background:none; border:0; cursor:pointer; padding:0;
display:flex; align-items:center; gap:.55rem;
font-family:var(--texto); font-size:11px; font-weight:600; letter-spacing:.16em;
color:var(--tinta); text-transform:none;
writing-mode:vertical-rl; transform:rotate(180deg); /* mirando hacia dentro de la página */
}
.paleta .muestra{width:13px; height:13px; border:1px solid var(--tinta); writing-mode:horizontal-tb; transform:rotate(180deg)}
.paleta button[aria-pressed="true"] .muestra{background:var(--tinta)}
/* ---------- cabecera ---------- */
header{position:sticky; top:0; z-index:30; background:var(--fondo); border-bottom:1px solid var(--linea); transition:background-color .5s ease}
.bar{display:flex; align-items:baseline; gap:2.2rem; padding:.55rem 0}
.marca{display:inline-block; text-decoration:none; white-space:nowrap; line-height:1}
.marca .nombre{
display:block; font-family:var(--titular);
font-size:clamp(2.8rem,5.2vw,4.4rem); line-height:.88;
-webkit-text-stroke:.022em currentColor; /* la tipografía solo tiene regular: se engorda a mano */
paint-order:stroke fill;
}
/* "vinos vivos" con más cuerpo, casi al ancho del nombre y pegado a él: un solo bloque */
.marca em{
display:block; font-family:var(--texto); font-style:normal;
font-size:14px; font-weight:700; text-transform:none;
letter-spacing:.06em; word-spacing:-.4em; /* en monoespaciada el espacio mide lo mismo que una letra y parece doble: se estrecha */
opacity:.85; margin-top:-.46em; text-align:right; line-height:1;
}
/* el mono flotando en el pasillo de la izquierda, acompañando el scroll */
.mono-flotante{
position:fixed; left:clamp(32px,2.8vw,56px); width:clamp(78px,6.4vw,124px);
z-index:5; pointer-events:none; opacity:.92;
transition:top .35s cubic-bezier(.22,.8,.3,1), transform .35s ease;
}
@media (prefers-reduced-motion:reduce){.mono-flotante{transition:none}}
nav{margin-left:auto; display:flex; gap:1.7rem;
font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
nav a{position:relative; text-decoration:none; padding:.15rem .1rem; z-index:0}
nav a::after{
content:""; position:absolute; left:-.25rem; right:-.25rem; bottom:0; height:.55em;
background:var(--vino); opacity:0; transform:scaleX(.2) skewX(-8deg); transform-origin:left;
transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1); z-index:-1;
}
nav a:hover::after, nav a:focus-visible::after{opacity:.35; transform:scaleX(1) skewX(-8deg)}
.idiomas{display:flex; gap:.4rem; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.idiomas a{text-decoration:none; opacity:.4}
.idiomas a[aria-current]{opacity:1; text-decoration:underline; text-underline-offset:4px}
/* el botón de WhatsApp, en el pasillo derecho, acompasado con el mono */
.wasap{
position:fixed; right:clamp(32px,2.8vw,56px); width:clamp(66px,5.2vw,96px); aspect-ratio:1;
z-index:6; display:grid; place-items:center; border-radius:50%;
border:1.5px solid var(--tinta); color:var(--tinta); background:var(--fondo);
transition:top .35s cubic-bezier(.22,.8,.3,1), transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.wasap .glifo{width:44%; height:44%; fill:currentColor; stroke:none}
.wasap .anillo{position:absolute; inset:0; width:100%; height:100%; animation:vaiven 7s ease-in-out infinite}
.wasap .anillo text{fill:currentColor; font-family:var(--texto); font-size:15px; font-weight:700; letter-spacing:.6px}
@keyframes vaiven{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.wasap .anillo{animation:none}}
.wasap:hover, .wasap:focus-visible{background:var(--vino); border-color:var(--vino); color:var(--fondo); transform:scale(1.06); animation:none}
/* cada pocos segundos se enciende un instante, como una llamada */
.wasap{animation:llamada 5s ease-in-out infinite}
@keyframes llamada{
0%,72% {background:var(--fondo); border-color:var(--tinta); color:var(--tinta); transform:scale(1)}
78%,92% {background:var(--vino); border-color:var(--vino); color:var(--fondo); transform:scale(1.05)}
100% {background:var(--fondo); border-color:var(--tinta); color:var(--tinta); transform:scale(1)}
}
.wasap span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
@media (prefers-reduced-motion:reduce){.wasap{transition:none; animation:none}}
/* ---------- portada ---------- */
.hero{position:relative; padding:2.2rem 0 2.5rem; display:grid; grid-template-columns:.96fr 1.04fr; gap:3.5rem; align-items:start}
.hero h1{font-size:clamp(2.7rem,5.4vw,3.6rem); margin:0 0 1.4rem; max-width:14ch}
/* la foto de portada: apaisada, recortada para que mande la fachada y no el señor de la derecha */
.foto-hero{margin:0 auto; width:min(100%,var(--f-horizontal)); overflow:hidden; aspect-ratio:4/3;
clip-path:polygon(1.5% 2%,52% 0,98.5% 1.5%,100% 46%,98% 98%,48% 100%,2% 98%,0 50%)}
.foto-hero img{width:100%; height:100%; object-fit:cover; object-position:42% 50%}
.hero .lema{font-size:1rem; max-width:44ch; margin:0 0 1.6rem}
.hero .practico{font-size:13px; letter-spacing:.03em; opacity:.75; margin:0 0 2rem; line-height:2}
.hero .practico a{text-decoration:none; border-bottom:1px solid var(--linea)}
.hero .lema em{font-style:italic; font-weight:600}
.acciones{display:flex; flex-wrap:wrap; gap:.75rem}
/* botones de trazo: ligeros, como en una publicación */
.btn{
display:inline-block; padding:.9rem 1.6rem; text-decoration:none; cursor:pointer; box-shadow:0 0 0 var(--tinta);
background:transparent; color:var(--tinta); border:1px solid var(--tinta);
font-family:var(--texto); font-size:15px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn.hueco{background:transparent; color:var(--tinta)}
/* los dos botones comparten el mismo estado al pasar por encima: el acento del fondo */
.btn:hover, .btn:focus-visible,
.btn.hueco:hover, .btn.hueco:focus-visible{
transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta);
background:var(--vino); border-color:var(--vino); color:var(--fondo);
}
.recorte{filter:drop-shadow(0 8px 24px rgba(20,18,16,.12))}
/* ---------- secciones ---------- */
.seccion{padding:3.5rem 0}
.seccion h2{font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:.5rem}
.entradilla{max-width:60ch; opacity:.85; margin:0 0 2.6rem}
/* las tres fichas comparten la misma rejilla: foto, título, texto, ficha, precio y botón
quedan alineados entre columnas aunque unos textos sean más largos que otros */
.puertas{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
grid-template-rows:auto auto 1fr auto auto auto}
.puerta{display:grid; grid-row:span 6; grid-template-rows:subgrid; gap:0}
@supports not (grid-template-rows:subgrid){
.puerta{display:flex; flex-direction:column}
}
.puerta .texto{align-self:start}
/* cada foto lleva su propio recorte: misma escala de irregularidad, distinto dibujo */
.puerta .foto{aspect-ratio:4/3; overflow:hidden; margin-bottom:1.2rem}
.puerta:nth-child(1) .foto{
clip-path:polygon(0 1.5%,34% 0,72% 1.5%,100% .5%,99% 47%,100% 98%,62% 100%,27% 98.5%,.5% 100%,1% 51%);
transform:rotate(-.5deg)}
.puerta:nth-child(2) .foto{
clip-path:polygon(1% 0,40% 1.5%,76% 0,100% 2%,98.5% 52%,99.5% 100%,58% 98.5%,22% 100%,0 98%,1.5% 48%);
transform:rotate(.6deg)}
.puerta:nth-child(3) .foto{
clip-path:polygon(.5% 1%,30% 2%,68% 0,99.5% 1.5%,100% 44%,98.5% 99%,66% 97.5%,31% 100%,1% 98.5%,0 46%);
transform:rotate(-.3deg)}
.puerta .foto img{width:100%; height:100%; object-fit:cover}
.puerta h3{font-family:var(--titular); font-size:1.9rem; margin-bottom:.6rem}
.puerta p b{font-weight:700}
.puerta p{margin:0 0 .9rem}
.puerta .ficha{font-size:13px; letter-spacing:.04em; opacity:.7; line-height:1.9; margin:0 0 1rem; border-top:1px solid var(--linea); padding-top:.8rem; align-self:stretch}
.precio{font-size:1.5rem; font-family:var(--titular); margin-bottom:1.1rem; align-self:start}
.precio small{font-family:var(--texto); font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; display:block; line-height:2}
.puerta .btn{margin-top:auto; text-align:center}
.pendiente{color:var(--vino)}
/* ---------- lo que dicen de nosotros ---------- */
.pruebas{display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:2.5rem 0;
padding-top:1rem}
.prueba{display:flex; flex-direction:column; gap:.7rem}
.prueba .casa{font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.6}
.prueba .nota{font-family:var(--titular); font-size:2.6rem; line-height:1; display:flex; align-items:baseline; gap:.6rem}
.prueba .nota small{font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.prueba blockquote{margin:0; font-style:italic; max-width:40ch}
.prueba a{font-size:13px; font-weight:700; letter-spacing:.06em; text-decoration:none; border-bottom:1px solid var(--linea); align-self:start}
.decanter{margin:2.5rem 0 0; text-align:center}
.decanter .titulo{font-family:var(--titular); font-size:clamp(1.5rem,3vw,2.2rem)}
@media (max-width:980px){ .pruebas{grid-template-columns:1fr; gap:2.5rem} }
/* ---------- cita ---------- */
.cita{padding:3rem 0; text-align:center}
.cita p{font-family:var(--titular); font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.15; max-width:22ch; margin:0 auto}
.cita span{display:block; font-family:var(--texto); font-size:13px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; margin-top:1.4rem}
/* ---------- quién ---------- */
.quien{display:grid; grid-template-columns:1.04fr .96fr; gap:3.5rem; align-items:center}
.quien .foto{clip-path:polygon(2% 1%,48% 0,98% 2%,100% 40%,98.5% 99%,52% 100%,1.5% 98%,0 48%); overflow:hidden; aspect-ratio:4/3; width:min(100%,var(--f-horizontal)); margin-inline:auto}
.quien .foto img{width:100%; height:100%; object-fit:cover}
.quien h2{font-size:clamp(1.8rem,3.2vw,2.6rem); margin-bottom:1.2rem}
.quien p{margin:0 0 1.1rem; max-width:52ch}
/* ---------- correo ---------- */
.captura{margin-top:3rem; padding:3rem 0}
/* el bloque del correo, dentro de la reticúla: el pasillo del boton se queda libre */
.captura .wrap{display:grid; grid-template-columns:.92fr 1.03fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.captura h2, .captura p, .captura form{grid-column:1}
.foto-guia{grid-column:2; grid-row:1 / span 3; margin:0 auto; width:min(100%,var(--f-horizontal)); overflow:hidden; aspect-ratio:4/3;
clip-path:polygon(1.5% 2.5%,52% 0,98.5% 2%,100% 48%,98% 98%,48% 100%,2% 97.5%,0 50%)}
.foto-guia img{width:100%; height:100%; object-fit:cover}
@media (max-width:980px){ .captura .wrap{grid-template-columns:1fr} .foto-guia{display:none} }
.captura h2{font-family:var(--titular); font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.7rem}
.captura p{max-width:54ch; opacity:.85; margin:0 0 1.5rem}
form{display:flex; flex-wrap:wrap; gap:.7rem; max-width:560px}
input[type=email]{flex:1 1 280px; padding:.8rem 1rem; border:1px solid var(--tinta); background:transparent; font-family:var(--texto); font-size:14px; color:var(--tinta)}
input::placeholder{color:rgba(20,18,16,.45)}
/* ---------- pie ---------- */
footer{padding:3rem 0 4rem}
.pie{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; font-size:13px; line-height:2}
footer h3{font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:1; margin-bottom:.8rem;
padding-bottom:.5rem; border-bottom:1px solid var(--linea)}
footer a{text-decoration:none; border-bottom:0; transition:color .2s ease}
footer a:hover{color:var(--vino); text-decoration:underline; text-underline-offset:4px}
/* ---------- recuadro mecanografiado: avisos, destacados y llamadas ---------- */
.recuadro{
border:1px dashed var(--vino); background:var(--papel);
padding:0 1.4rem 1.3rem; margin:2rem 0;
}
/* el titulo ya no se mete en el borde: ocupa su propia banda, con la linea
de puntos entera por debajo y aire alrededor */
/* 1. el titulo: la voz del cartel, en mono y versales */
.recuadro .etiqueta{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
margin:0 -1.4rem 1.1rem; padding:.8rem 1.4rem;
border-bottom:1px dashed var(--vino);
font-family:var(--texto); font-size:13px; font-weight:700;
letter-spacing:.22em; line-height:1;
text-transform:uppercase; color:var(--vino);
}
/* 3. el texto: la letra corriente de la casa */
.recuadro p{margin:0; font-family:var(--texto); max-width:var(--lectura)}
.recuadro p + p{margin-top:.6rem}
/* 2. el subtitulo: la tipografia de Jugo, que es la que canta */
/* el dato suelto que acompana al titulo y aprovecha la banda vacia */
.recuadro .etiqueta .dato{font-style:normal; font-weight:700; opacity:.72}
.recuadro .destacado{font-family:var(--titular); font-size:clamp(1.3rem,2vw,1.6rem);
line-height:1.15; color:var(--tinta); margin-bottom:.55rem; letter-spacing:.01em}
/* el precio, cuando el aviso lo lleva: la cifra canta, la condicion no */
.recuadro .precio{margin-top:.8rem; font-size:13px; letter-spacing:.04em}
.recuadro .precio b{font-family:var(--titular); font-weight:400;
font-size:1.5rem; color:var(--vino); letter-spacing:0; margin-right:.15em}
/* 4. el enlace: mono, en vino y subrayado fino */
.recuadro .enlace{margin-top:1rem; font-size:13px; letter-spacing:.04em}
/* sin subrayado: ya se distingue por color y peso, y se subraya al pasar por encima */
.recuadro .enlace a{color:var(--vino); font-weight:700; text-decoration:none;
display:inline-flex; align-items:baseline; gap:.4em; transition:gap .2s ease}
.recuadro .enlace a span{text-decoration:none}
.recuadro .enlace a:hover{gap:.7em} /* al pasar por encima solo avanza la flecha */
/* el remate: el precio a un lado y la accion al otro, en la misma linea */
.recuadro .remate{display:flex; flex-wrap:wrap; align-items:baseline;
justify-content:space-between; gap:.5rem 1.4rem; margin-top:1.2rem}
.recuadro .remate .precio, .recuadro .remate .enlace{margin-top:0}
.recuadro.llamada{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between}
.recuadro.llamada div{flex:1 1 320px}
/* en las llamadas el titulo tambien ocupa su fila entera, de borde a borde */
.recuadro.llamada .etiqueta{flex:0 0 calc(100% + 2.8rem)}
/* ---------- nota de trabajo (se quita al publicar) ---------- */
.nota-trabajo{background:var(--papel); border:1px dashed var(--vino); padding:.9rem 1.1rem; font-size:13px; line-height:1.9; margin:1.5rem 0}
.nota-trabajo b{color:var(--vino)}
@media (max-width:980px){
.paleta{flex-direction:row; top:auto; bottom:0; left:0; right:0; transform:none;
justify-content:center; gap:2rem; border-right:0; border-top:1px solid var(--linea); padding:.6rem}
.paleta button{writing-mode:horizontal-tb; transform:none; flex-direction:row}
.paleta .muestra{transform:none}
/* el lema, ajustado al logotipo pequeno de movil */
.marca em{font-size:13px; margin-top:-.05em; letter-spacing:.04em; word-spacing:-.28em}
.hero{grid-template-columns:1fr; gap:2.2rem; padding-top:2.5rem}
.marca .nombre{font-size:1.7rem}
.puertas{grid-template-columns:1fr}
.quien{grid-template-columns:1fr}
.pie{grid-template-columns:1fr 1fr}
/* el menu no se esconde detras de una hamburguesa: siete palabras cortas caben a la vista */
.bar{flex-wrap:wrap; gap:.4rem 1rem; padding:.5rem 0 .2rem}
nav{order:3; width:100%; margin:0; flex-wrap:wrap; justify-content:flex-start;
gap:.35rem .9rem; font-size:13px; letter-spacing:.02em; padding-bottom:.4rem}
nav a{padding:.1rem 0}
.idiomas{font-size:13px; margin-left:auto}
.mono-flotante{display:none}
.wasap{right:16px; width:56px; top:auto !important; bottom:4.6rem; position:fixed}
body{padding-bottom:3.5rem}
}
/* ---------- añadidos de la reconstrucción completa ---------- */
.epigrafe{font-family:var(--titular); font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.25; max-width:24ch; margin:0; opacity:.85}
.bloque{display:flex; flex-wrap:wrap; gap:2.5rem clamp(2rem,4vw,3.5rem);
align-items:flex-start; padding:2.6rem 0 .4rem}
/* la foto manda su tamano; el texto ocupa lo que queda */
.bloque > .foto{flex:0 0 auto}
.bloque > *:not(.foto){flex:1 1 340px; min-width:0}
/* un bloque sin foto no se queda pegado a la izquierda */
.bloque:not(:has(.foto)):not(.gemelos){justify-content:center}
.bloque:not(:has(.foto)):not(.gemelos) > *{flex:0 1 auto; margin-inline:auto}
/* la foto cambia de lado en cada bloque, para que la pagina no caiga siempre al mismo sitio */
.bloque:nth-of-type(even) .foto{order:2}
.bloque.ancho{display:block}
.bloque.ancho .texto-largo{max-width:none}
.bloque.ancho .texto-largo>p{max-width:58ch}
.bloque:first-of-type{border-top:0}
/* las fotos de los bloques tambien llevan borde irregular, alternando tres dibujos */
.bloque .foto{overflow:hidden; aspect-ratio:4/3; width:min(100%,var(--f-horizontal)); margin-inline:auto;
clip-path:polygon(0 1.5%,34% 0,72% 1.5%,100% .5%,99% 47%,100% 98%,62% 100%,27% 98.5%,.5% 100%,1% 51%)}
.bloque:nth-of-type(3n+2) .foto{
clip-path:polygon(1% 0,40% 1.5%,76% 0,100% 2%,98.5% 52%,99.5% 100%,58% 98.5%,22% 100%,0 98%,1.5% 48%)}
.bloque:nth-of-type(3n) .foto{
clip-path:polygon(.5% 1%,30% 2%,68% 0,99.5% 1.5%,100% 44%,98.5% 99%,66% 97.5%,31% 100%,1% 98.5%,0 46%)}
.bloque .foto.peq{width:min(100%,var(--f-horizontal-peq))}
.bloque .foto.vertical{aspect-ratio:3/4; width:auto; height:var(--f-vertical)}
.bloque .foto.vertical.peq{height:calc(var(--f-vertical) * .82)}
.bloque .foto img{width:100%; height:100%; object-fit:cover}
.bloque h3{font-family:var(--titular); font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.5rem}
.bloque .meta{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin:0 0 1.2rem}
.bloque .meta b{color:var(--vino); font-size:15px}
.bloque p{margin:0 0 .9rem; max-width:58ch}
.bloque ul{margin:0 0 1.2rem; padding-left:1.1rem}
.bloque li{margin-bottom:.3rem}
.bloque .horario{font-size:13px; letter-spacing:.04em; opacity:.7; border-top:1px solid var(--linea); padding-top:.8rem; margin-bottom:1.2rem}
.intro{max-width:58ch; margin:1rem 0 0; font-size:1.05rem}
.portadilla{position:relative; display:flow-root; padding:2.2rem 0 .4rem}
.portadilla h1{font-family:var(--titular); font-size:clamp(2.4rem,5vw,4rem); line-height:1; margin:0 0 .7rem}
.volver{position:fixed; left:clamp(32px,2.8vw,56px); width:clamp(78px,6.4vw,124px); top:104px; z-index:5; line-height:1; text-align:center; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; opacity:.7; transition:opacity .2s ease}
.volver:hover{opacity:1}
.texto-largo{max-width:58ch}
.texto-largo p{margin:0 0 1.1rem}
@media (max-width:980px){ .bloque{grid-template-columns:1fr; gap:1.5rem}
.volver{position:static; width:auto; text-align:left; display:inline-block; margin-bottom:1rem} }
/* ---------- el relato de entrada ---------- */
.relato{padding:1rem 0 3rem; display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center}
.foto-relato{margin:0 auto; overflow:hidden; aspect-ratio:3/4; height:var(--f-vertical); width:auto;
clip-path:polygon(1.5% 2%,52% 0,98.5% 1.5%,100% 46%,98% 98%,48% 100%,2% 98%,0 50%)}
.foto-relato img{width:100%; height:100%; object-fit:cover}
@media (max-width:980px){ .foto-relato{display:none} }
.relato .apertura{font-family:var(--titular); font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.08; margin:0 0 1.4rem; max-width:20ch}
.relato p{margin:0 0 1rem; max-width:52ch}
.relato .firma{font-family:var(--titular); font-size:1.5rem; margin-top:.4rem}
.relato .lateral{border-left:1px solid var(--linea); padding-left:2.2rem; font-size:13px; line-height:2; letter-spacing:.03em; opacity:.8}
.relato .lateral b{display:block; font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin-bottom:.5rem}
@media (max-width:980px){ .relato{grid-template-columns:1fr; gap:2rem} .relato .lateral{border-left:0; border-top:1px solid var(--linea); padding:1.2rem 0 0} }
/* nota breve al pie de un bloque */
.nota-pie{font-size:1em; font-style:italic; line-height:1.9; opacity:.75; margin:1rem 0 0; max-width:52ch}
/* ---------- ideas abiertas, sin precio ---------- */
.ideas{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 2.5rem; margin:1.5rem 0 0; padding:0; list-style:none}
.ideas li{border-top:1px solid var(--linea); padding-top:.9rem}
.ideas b{font-family:var(--titular); font-weight:400; font-size:1.35rem; display:block; margin-bottom:.2rem}
@media (max-width:1100px){ .ideas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .ideas{grid-template-columns:1fr} }
/* ---------- iconos de linea, del mismo grosor que el resto del dibujo ---------- */
.ico{width:1.45em; height:1.45em; vertical-align:-.33em; margin-right:.5em; flex:none;
fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pie .ico{opacity:.85}
/* ---------- la última llamada, justo antes del pie ---------- */
.cierre{padding:4.5rem 0 3.5rem; text-align:center}
.cierre h2{font-size:clamp(2rem,4vw,3.1rem); margin:0 0 .6rem}
.cierre p{margin:0 auto 1.8rem; max-width:48ch}
.cierre .acciones{margin-bottom:.5rem}
.cierre .acciones{justify-content:center}
/* los botones con icono: el dibujo y el texto, centrados de verdad */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em}
.btn .ico{width:1.35em; height:1.35em; margin:0; vertical-align:0}
.cierre .directo{font-size:13px; letter-spacing:.03em; opacity:.7; margin:1.6rem auto 0}
.cierre .directo a{text-decoration:none; border-bottom:1px solid var(--linea)}
.cierre .directo span{opacity:.5; margin:0 .4rem}
/* ---------- el precio, dicho sin rodeos ---------- */
.tarifa{display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
margin:0 0 1.2rem; padding-bottom:.9rem; width:fit-content; border-bottom:1px solid var(--linea)}
.tarifa .cifra{font-family:var(--titular); font-weight:400; line-height:1;
font-size:clamp(2.2rem,4vw,3rem); color:var(--vino)}
.tarifa .cifra.pendiente{font-size:clamp(1.5rem,2.6vw,2rem); opacity:.55}
.tarifa .prop, .nota-pie .prop{color:var(--vino); font-size:13px}
.tarifa span{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.65; line-height:1.5}
/* ---------- los avales, como sellos pegados en la pagina ---------- */
.avales{margin:2.4rem 0 2.8rem}
/* un adorno corto arriba y abajo, para aislar el bloque sin una raya de lado a lado */
.avales::before, .avales::after{
content:"— · —"; display:block; text-align:center;
font-family:var(--texto); font-size:16px; font-weight:700;
letter-spacing:.35em; color:var(--vino); opacity:.7; line-height:1; margin:0 0 2.2rem}
.avales::after{margin:2.2rem 0 0}
.avales .wrap{display:flex; align-items:center; justify-content:center;
gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap}
.avales .rotulo{font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1; margin:0; flex:none}
.avales .fila{display:flex; flex-wrap:nowrap; justify-content:center; gap:.9rem; flex:0 1 auto}
.sello{display:grid; grid-template-rows:auto auto; gap:.6rem; text-decoration:none;
padding:.9rem 1.1rem .75rem; border-radius:3px; min-width:min(100%,165px);
background:var(--vino); color:var(--fondo); border:1.5px solid var(--vino);
transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease, color .25s ease}
.sello:nth-child(1){transform:rotate(-1.6deg)}
.sello:nth-child(2){transform:rotate(1.2deg)}
.sello:nth-child(3){transform:rotate(-.7deg)}
.avales .fila a.sello:hover, .avales .fila a.sello:focus-visible{transform:rotate(0) translateY(-2px); box-shadow:3px 3px 0 var(--tinta)}
.sello.hueco{background:transparent; color:var(--tinta); border-style:dashed}
/* arriba, dos espacios: la nota y el logotipo, los dos grandes */
.sello .cara{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:.5rem;
justify-items:center} /* dos cuadrantes iguales, cada cosa centrada en el suyo */
.sello .cara.sola{grid-template-columns:1fr; justify-items:start}
.sello .nota{font-family:var(--titular); font-size:clamp(2.8rem,5vw,4rem); line-height:.8;
letter-spacing:-.01em}
.sello .nota.chica{font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1}
/* el logotipo de cada casa, en blanco, para que el sello se reconozca de un vistazo */
.sello .logo{width:auto; max-width:100%; height:clamp(2.4rem,3.9vw,3.1rem); fill:currentColor}
.sello .logo-google{height:clamp(1.85rem,3vw,2.35rem)} /* la G llena mas su caja: va algo menor */
/* abajo, un solo espacio a todo el ancho */
.sello .pie{display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap;
border-top:1px solid currentColor; padding-top:.5rem;
font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
line-height:1.5}
.sello .pie b{font-size:13px; font-weight:700; letter-spacing:.16em}
.sello .pie span{opacity:.8}
@media (max-width:820px){
.avales .wrap{flex-direction:column; align-items:center; gap:1.4rem}
.avales .rotulo{text-align:center}
@media (max-width:820px){ .avales .fila{flex-wrap:wrap} .sello{width:100%} }
}
/* ---------- como funciona: entrada centrada y tres sellos en fila ---------- */
.proceso{padding:3rem 0 3.4rem; text-align:center}
.proceso h3{font-family:var(--titular); font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .6rem}
.proceso>p{max-width:72ch; margin:0 auto}
/* tres frases, tres lineas. Los saltos son de SENTIDO, no de longitud:
valen igual en ingles y no se quitan en pantallas pequenas. Sin limite de ancho,
para que cada frase quepa entera siempre que el hueco lo permita. */
.tres-lineas{max-width:none; text-wrap:pretty}
.pasos{list-style:none; counter-reset:paso; margin:2.2rem 0 0; padding:0;
display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; text-align:left}
.pasos li{counter-increment:paso; display:flex; align-items:flex-start; gap:.9rem;
padding:1.1rem 1.3rem 1.2rem; border:1.5px solid var(--tinta); border-radius:3px;
transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease, color .25s ease}
.pasos li:nth-child(1){transform:rotate(-1.2deg)}
.pasos li:nth-child(2){transform:rotate(.9deg)}
.pasos li:nth-child(3){transform:rotate(-.6deg)}
.pasos li:hover{transform:rotate(0) translateY(-2px); box-shadow:3px 3px 0 var(--tinta);
background:var(--vino); border-color:var(--vino); color:var(--fondo)}
.pasos b{font-family:var(--titular); font-weight:400; font-size:2.4rem; line-height:.8; color:var(--vino); flex:none}
.pasos li:hover b{color:var(--fondo)}
.pasos span{font-size:14px; line-height:1.7}
@media (max-width:820px){ .pasos{grid-template-columns:1fr} .pasos li{transform:none} }
/* ---------- productores: una ficha por bodega, con sus botellas ---------- */
.bodega{padding:2.4rem 0 .6rem}
.bodega h3{font-family:var(--titular); font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.4rem}
.bodega .texto-largo{margin-bottom:1.4rem}
.botellas{display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem 1.2rem; align-items:end}
.botella{margin:0; display:flex; flex-direction:column; gap:.6rem}
/* todas las fotos al mismo alto exacto; el ancho lo pone cada foto. Nada se recorta */
.botella img{height:var(--f-botella); width:auto; max-width:100%; margin-inline:auto; object-fit:contain}
.botella figcaption{font-size:13px; letter-spacing:.06em; line-height:1.6; opacity:.75}
.botella figcaption b{display:block; font-size:13px; font-weight:700; letter-spacing:.04em; opacity:1}
@media (max-width:980px){ .botellas{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .botellas{grid-template-columns:repeat(2,1fr)} }
/* ---------- fichas gemelas: cada linea a la misma altura en las dos columnas ---------- */
/* estas dos columnas si van en rejilla: es lo que alinea renglon con renglon */
.bloque.gemelos{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto auto}
.bloque.gemelos .texto-largo{display:grid; grid-row:span 4; grid-template-rows:subgrid; gap:0}
.bloque.gemelos .cuerpo>p:last-child{margin-bottom:1.2rem}
.bloque.gemelos .tarifa{align-self:start}
.bloque.gemelos .apostilla{align-self:start}
.bloque.gemelos .apostilla .nota-pie{margin-top:0}
@media (max-width:980px){
/* en pantalla estrecha se apilan: dos columnas de 350 px no se leen */
.bloque.gemelos{grid-template-columns:1fr; grid-template-rows:none}
.bloque.gemelos .texto-largo{display:block; grid-row:auto}
}
/* una foto a todo el ancho de la columna, para abrir una pagina */
.foto-ancha{margin:1.5rem auto .5rem; width:min(100%,var(--f-panoramica)); overflow:hidden; aspect-ratio:21/9;
clip-path:polygon(.8% 2%,50% 0,99% 1.5%,100% 46%,99% 98%,50% 100%,1% 98.5%,0 50%)}
.foto-ancha img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}
/* la plaza es una foto vertical: necesita más alto o se queda sin fuente */
.foto-plaza{aspect-ratio:3/2; width:min(100%,var(--f-media,52rem))}
.foto-plaza img{object-position:50% 42%}
/* un bloque centrado: el texto arriba, la foto debajo, los dos a media pagina */
.cierre-visual{padding:2.6rem 0 1rem; text-align:center}
.cierre-visual h3{font-family:var(--titular); font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .5rem}
.cierre-visual p{max-width:58ch; margin:0 auto 1.8rem}
.cierre-visual figure{margin:0 auto; width:min(100%,var(--f-horizontal)); overflow:hidden; aspect-ratio:4/3;
clip-path:polygon(1% 2%,50% 0,99% 1.5%,100% 46%,98.5% 98%,50% 100%,1.5% 98%,0 50%)}
.cierre-visual figure img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
@media (max-width:980px){
.bloque .foto, .quien .foto, .foto-ancha, .foto-guia, .foto-hero, .cierre-visual figure{width:100%}
.bloque .foto.vertical, .foto-relato{width:100%; height:auto}
}
/* ---------- marco de pincel: la foto entera y el trazo por fuera ---------- */
.marco-pincel{position:relative; padding:4px; overflow:visible; clip-path:none;
background:none; filter:none}
.marco-pincel>img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1}
.marco-pincel::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
/* ni papel ni vino: un 30 % de mezcla, para que se vea siempre sin mandar.
El color se calcula solo en cada tema; si el navegador es viejo, cae al fondo. */
background:var(--fondo); /* el trazo lleva el fondo de cada tema: la foto queda recortada sobre el papel */
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:100% 100%; mask-size:100% 100%;
-webkit-mask-position:center; mask-position:center}
.marco-pincel:nth-of-type(6n+1)::after{-webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")}
.marco-pincel:nth-of-type(6n+2)::after{-webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")}
.marco-pincel:nth-of-type(6n+3)::after{-webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")}
.marco-pincel:nth-of-type(6n+4)::after{-webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")}
.marco-pincel:nth-of-type(6n+5)::after{-webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")}
.marco-pincel:nth-of-type(6n+6)::after{-webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")}
/* los recortes irregulares se retiran: la unica irregularidad es el trazo */
.bloque .foto, .bloque:nth-of-type(3n+2) .foto, .bloque:nth-of-type(3n) .foto,
.quien .foto, .foto-hero, .foto-relato, .foto-ancha, .foto-guia,
.cierre-visual figure, .puerta .foto, .puerta:nth-child(1) .foto,
.puerta:nth-child(2) .foto, .puerta:nth-child(3) .foto{clip-path:none}
.recorte{filter:none}
/* ---------- la tabla de la oferta: que, cuanto, cuantos y donde ---------- */
.tabla-oferta{margin:3rem 0 3.4rem}
.tabla-oferta h2{margin:0}
.tabla-oferta .entradilla{font-size:14px; margin:.3rem 0 1.3rem; opacity:.85}
.oferta{width:100%; border-collapse:collapse; font-family:var(--texto); font-size:14px}
.oferta thead th{
text-align:left; font-size:13px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--vino); padding:0 1rem .6rem 0;
border-bottom:1px dashed var(--vino)}
.oferta tbody tr{border-bottom:1px dashed var(--linea)}
.oferta th[scope="row"]{text-align:left; padding:1.1rem 1.2rem 1.1rem 0; vertical-align:baseline; font-weight:400}
.oferta th[scope="row"] b{display:block; font-family:var(--titular); font-weight:400;
font-size:1.25rem; line-height:1.15; margin-bottom:.25rem}
.oferta th[scope="row"] span{display:block; font-size:13px; opacity:.8; line-height:1.6; max-width:34ch}
/* todas las celdas se alinean por la primera linea, no por el borde de arriba */
.oferta td{padding:1.1rem 1.2rem 1.1rem 0; vertical-align:baseline; line-height:1.6}
.oferta .cifra-tabla{font-family:var(--titular); font-size:1.5rem; line-height:1; color:var(--vino); white-space:nowrap}
.oferta .cifra-tabla.texto{font-size:1.05rem}
.oferta .prop{color:var(--vino); font-size:13px}
.oferta .sin-reserva{font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.55}
.oferta .btn-fila{display:inline-block; white-space:nowrap; text-decoration:none;
font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--vino); border:1px solid var(--vino); border-radius:2px; padding:.5rem .9rem;
transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease}
.oferta .btn-fila:hover, .oferta .btn-fila:focus-visible{background:var(--vino); color:var(--fondo);
transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta)}
.oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
/* en pantalla estrecha cada fila se convierte en una ficha */
@media (max-width:760px){
.oferta thead{display:none}
.oferta, .oferta tbody, .oferta tr, .oferta th, .oferta td{display:block; width:auto}
.oferta tbody tr{padding:1.1rem 0}
.oferta th[scope="row"]{padding:0 0 .7rem}
.oferta td{padding:.25rem 0; display:flex; gap:.7rem; align-items:baseline}
.oferta td::before{content:attr(data-rotulo); flex:0 0 7.5em;
font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--vino); opacity:.8}
.oferta td:last-child{margin-top:.6rem}
}
/* la salida al catalogo completo, debajo de las tres puertas */
.bajo-puertas{margin-top:1.8rem; text-align:center; font-size:13px; letter-spacing:.04em}
.bajo-puertas a{color:var(--vino); font-weight:700; text-decoration:none;
display:inline-flex; align-items:baseline; gap:.4em; transition:gap .2s ease}
.bajo-puertas a:hover{gap:.7em}
/* ---------- el formulario de reserva ---------- */
.reserva{display:block; max-width:780px; margin:2.5rem 0 0}
.reserva .paso{border:0; padding:0; margin:0 0 2.6rem}
.reserva legend{font-family:var(--titular); font-size:clamp(1.5rem,2.4vw,1.9rem);
color:var(--tinta); padding:0; margin-bottom:1rem; display:flex; align-items:baseline; gap:.6rem}
.reserva legend b{font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.14em;
color:var(--vino); border:1px solid var(--vino); border-radius:50%;
width:1.9em; height:1.9em; display:inline-flex; align-items:center; justify-content:center}
.opciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem}
.opcion{text-align:left; cursor:pointer; background:var(--papel);
border:1px dashed var(--vino); border-radius:2px; padding:.85rem 1rem; color:inherit;
transition:transform .15s ease, box-shadow .15s ease,
background .2s ease, color .2s ease, border-color .2s ease}
.opcion b{display:block; font-family:var(--texto); font-size:13px; font-weight:700;
letter-spacing:.03em; line-height:1.3; margin-bottom:.25rem}
.opcion span{display:block; font-family:var(--texto); font-size:13px; opacity:.75}
.opcion:hover{border-style:solid; transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta)}
.opcion.puesta{background:var(--vino); color:var(--fondo); border-style:solid}
.opcion.puesta span{opacity:.85}
.linea-campos{display:flex; flex-wrap:wrap; gap:1rem}
.campo{display:block; flex:1 1 220px; font-family:var(--texto); font-size:13px}
.campo.corto{flex:0 0 130px}
.campo.ancho{flex:1 1 100%; margin-top:1rem}
.campo span{display:block; margin-bottom:.35rem; letter-spacing:.1em;
text-transform:uppercase; font-size:13px; font-weight:700; color:var(--vino)}
.campo span i{font-style:normal; text-transform:none; letter-spacing:.03em; opacity:.7}
.campo input, .campo select, .campo textarea{
width:100%; font-family:var(--texto); font-size:14px; color:var(--tinta);
background:var(--papel); border:1px dashed var(--vino); border-radius:2px;
padding:.6rem .7rem; line-height:1.4}
.campo textarea{resize:vertical}
.campo input:focus, .campo select:focus, .campo textarea:focus{outline:2px solid var(--vino); outline-offset:1px}
.reserva .aviso{font-family:var(--texto); font-size:13px; color:var(--vino); margin:.7rem 0 0; min-height:1em}
.resumen{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
border:1px dashed var(--vino); background:var(--papel); padding:1.2rem 1.4rem; margin:1rem 0 2rem}
.resumen .lo-elegido{flex:1 1 320px}
.resumen .etiqueta{display:block; font-family:var(--texto); font-size:13px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--vino); margin-bottom:.5rem}
.resumen .frase{font-family:var(--titular); font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.2; margin:0}
.resumen .cuenta{font-family:var(--texto); font-size:13px; margin:.6rem 0 0; opacity:.9}
.resumen .cuenta b{font-family:var(--titular); font-weight:400; font-size:1.5rem; color:var(--vino)}
.resumen .salida{flex:0 0 auto; text-align:right}
.resumen .enlace{margin-top:.7rem; font-size:13px}
.resumen .enlace a{color:var(--vino); font-weight:700; text-decoration:none;
display:inline-flex; align-items:baseline; gap:.4em; transition:gap .2s ease}
.resumen .enlace a:hover{gap:.7em}
/* el unico boton que cierra la venta: macizo, no de trazo */
.btn-manda{background:var(--vino); border-color:var(--vino); color:var(--fondo); padding:1rem 1.8rem}
.btn-manda:hover, .btn-manda:focus-visible{
background:var(--vino); border-color:var(--vino); color:var(--fondo);
transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta)}
/* mientras no hay nada elegido: hueco y en espera, no un boton macizo descolorido */
.btn-manda[aria-disabled="true"]{opacity:1; background:transparent; color:var(--tinta);
border:1px dashed var(--linea); box-shadow:none; transform:none}
.dicho-paso{font-family:var(--texto); font-size:13px; line-height:1.7; opacity:.75;
margin:0 0 1rem; max-width:var(--lectura)}
/* red de seguridad: ningun parrafo corrido pasa de la medida de lectura */
.wrap > p, .wrap > div > p:not([class]){max-width:var(--lectura)}
/* cuando habla Gaby en primera persona */
/* la voz de Gaby, al margen: se lee como una nota suya al lado del texto */
.voz-gabi{float:right; width:min(100%,520px); margin:2.4rem 0 1.6rem 2rem;
padding:0 0 0 .55rem; border-left:2px solid var(--vino)}
.voz-gabi p{font-family:var(--titular); font-size:1.02rem; line-height:1.12; margin:0}
@media (max-width:760px){
/* en movil la cita no se adelanta al titulo: baja al final de la portadilla */
.voz-gabi{float:none; width:auto; margin:1.6rem 0 2rem; order:9}
.portadilla{display:flex; flex-direction:column}
}
.voz-gabi p + p{margin-top:.4rem}
.voz-gabi cite{display:block; margin-top:.45rem; font-style:normal; font-family:var(--texto);
font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--vino)}
.resumen .falta{font-family:var(--texto); font-size:13px; margin:0 0 .6rem; opacity:.7}
.resumen .falta b{font-weight:700; color:var(--vino)}
.resumen .falta:empty{display:none}
.resumen .ojo{font-family:var(--texto); font-size:13px; margin:.7rem 0 0; opacity:.65}
.resumen .ojo a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor}
/* la mesa de Jugo: nota al pie de la reserva, no otro recuadro */
/* WhatsApp, una linea mas de contacto: ni mas gorda ni de otro color */
.wasap-pie .ico{fill:currentColor; stroke:none}
/* iconos planos: a este tamano el trazo se ensucia */
.ico-g, .ico-plano{fill:currentColor; stroke:none}
.nota-mesa{margin:-.6rem 0 2rem; max-width:min(100%,640px);
font-family:var(--texto); font-size:13px; line-height:1.75; opacity:.8}
.nota-mesa p{margin:0}
.nota-mesa b{font-weight:700}
.nota-mesa a{color:var(--vino); text-decoration:none; font-weight:700; white-space:nowrap}
.nota-mesa a:hover{text-decoration:underline; text-underline-offset:4px}
[aria-disabled="true"]{opacity:.4; pointer-events:none}
/* la salida a reservar, dentro del menu pero con peso propio */
nav a.destacado-nav{background:var(--vino); color:var(--fondo); border:1px solid var(--vino); padding:.5rem .95rem; margin-left:.4rem;
box-shadow:0 0 0 var(--tinta); transition:transform .15s ease, box-shadow .15s ease}
nav a.destacado-nav:hover, nav a.destacado-nav:focus-visible{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta); color:var(--fondo)}
/* el boton y el rotulo de la ultima columna, a la altura de la primera linea */
.oferta td:last-child{vertical-align:baseline}
.oferta .btn-fila, .oferta .sin-reserva{vertical-align:baseline}
/* el permiso para avisar, con su casilla */
.permiso{display:flex; align-items:flex-start; gap:.6rem; margin-top:1.2rem;
font-family:var(--texto); font-size:13px; line-height:1.6; cursor:pointer; max-width:52ch}
.permiso input{flex:none; width:16px; height:16px; margin-top:.2rem; accent-color:var(--vino)}
/* salida a la tabla desde el formulario */
.bajo-opciones{margin-top:1rem; font-size:13px}
.bajo-opciones a{color:var(--vino); font-weight:700; text-decoration:none;
display:inline-flex; align-items:baseline; gap:.4em; transition:gap .2s ease}
.bajo-opciones a:hover{gap:.7em}
/* la tabla, ahora dentro del formulario: la fila elegida se enciende */
.oferta.elegible tbody tr{cursor:default}
.oferta.elegible tbody tr.elegida th[scope="row"] b{color:var(--vino)}
.oferta.elegible tbody tr.elegida .btn-fila{background:var(--vino); color:var(--fondo)}
.oferta .btn-fila{font-family:var(--texto); cursor:pointer; background:none}
.tabla-oferta.paso{border:0; padding:0}
.tabla-oferta.paso .entradilla{margin:.3rem 0 1.3rem}
/* ---------- la cartelera de la mesa compartida ---------- */
.proceso-corto{margin:2.4rem 0 3rem}
.cartelera{display:flex; flex-direction:column; gap:0; margin:1.4rem 0 3rem}
.fecha{display:grid; grid-template-columns:6.2rem 1fr 13rem; gap:1.6rem;
padding:1.6rem 0; border-top:1px dashed var(--linea); align-items:start}
.fecha:last-child{border-bottom:1px dashed var(--linea)}
.fecha.completa{opacity:.55}
.calendario{text-align:center; border:1px dashed var(--vino); border-radius:2px;
padding:.6rem .3rem .5rem; background:var(--papel)}
.calendario .dia{display:block; font-family:var(--titular); font-size:2.2rem;
line-height:.9; color:var(--vino)}
.calendario .mes{display:block; font-family:var(--texto); font-size:13px; font-weight:700;
letter-spacing:.05em; text-transform:uppercase; margin-top:.35rem; white-space:nowrap}
.calendario .semana{display:block; font-family:var(--texto); font-size:13px;
letter-spacing:.1em; opacity:.6; margin-top:.15rem}
.fecha .loque h3{margin:0 0 .4rem; font-size:1.3rem}
.fecha .loque p{margin:0; font-size:14px; line-height:1.7; max-width:52ch}
.fecha .loque .detalle{margin-top:.5rem; font-size:13px; letter-spacing:.06em; opacity:.7}
.fecha .plaza{text-align:right}
.fecha .plaza .tarifa{display:block; margin:0 0 .5rem; padding:0; border:0; width:auto}
.fecha .plaza .tarifa .cifra{font-size:1.9rem}
.fecha .plaza .tarifa span{display:block; font-size:13px; letter-spacing:.12em;
text-transform:uppercase; opacity:.7}
.fecha .plazas{display:block; font-family:var(--texto); font-size:13px; margin-bottom:.4rem}
.fecha .plazas b{font-weight:700}
.fecha .plazas.pocas{color:var(--vino); font-weight:700}
.fecha .plazas.llena{letter-spacing:.14em; text-transform:uppercase; font-size:13px; font-weight:700}
.fecha .barra{display:block; height:3px; background:var(--linea); margin:0 0 .9rem}
.fecha .barra i{display:block; height:100%; background:var(--vino)}
.fecha .plaza .btn{width:100%; text-align:center}
.btn-fino{display:inline-block; text-decoration:none; font-family:var(--texto);
font-size:15px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--vino); border:1px solid var(--vino); border-radius:2px; padding:.7rem 1.1rem;
transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease}
.btn-fino:hover, .btn-fino:focus-visible{background:var(--vino); color:var(--fondo);
transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta)}
@media (max-width:760px){
.fecha{grid-template-columns:6.2rem 1fr; gap:1rem}
.fecha .plaza{grid-column:1 / -1; text-align:left}
.fecha .plaza .btn{width:auto}
}
/* ---------- la oferta en fichas, en lugar de tabla ---------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem}
.rejilla-chica{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.ficha{display:flex; flex-direction:column; align-items:stretch; text-align:left;
position:relative; background:var(--papel); color:inherit;
border:1px dashed var(--vino); border-radius:2px; padding:1rem 1.1rem 1.1rem;
font-family:var(--texto)}
.ficha .nombre{font-family:var(--titular); font-size:1.2rem; line-height:1.15; margin-bottom:.5rem}
.ficha .tarifa-ficha{display:flex; align-items:baseline; gap:.45em; margin-bottom:.6rem}
.ficha .cifra-ficha{font-family:var(--titular); font-size:1.8rem; line-height:1; color:var(--vino)}
.ficha .cifra-ficha.texto{font-size:1.1rem}
.ficha .tarifa-ficha i{font-style:normal; font-size:13px; letter-spacing:.14em;
text-transform:uppercase; opacity:.65}
.ficha .desc{font-size:13px; line-height:1.65; opacity:.85}
.ficha .pie-ficha{margin-top:auto; padding-top:.8rem; font-size:13px; letter-spacing:.12em;
text-transform:uppercase; opacity:.6}
.ficha .prop{color:var(--vino); font-size:13px}
/* las chicas: las que no se reservan */
/* el "desde": lo que cambia segun el formato no promete cifra cerrada */
.tarifa-ficha .desde{font-family:var(--texto); font-style:normal; font-size:13px;
font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.7;
margin-right:.35em; vertical-align:.18em}
.ficha-chica .nombre{font-size:1.05rem}
.ficha-chica .cifra-ficha{font-size:1.5rem}
/* las elegibles: la ficha entera es el boton */
.ficha-elegible{cursor:pointer; transition:transform .15s ease, box-shadow .15s ease,
background .2s ease, color .2s ease, border-color .2s ease}
.ficha-elegible:hover{border-style:solid}
.ficha-elegible:focus-visible{outline:2px solid var(--vino); outline-offset:2px}
.ficha-elegible .marca-elegido{position:absolute; top:.6rem; right:.8rem;
font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
opacity:0; transition:opacity .2s ease}
.ficha-elegible.elegida{background:var(--vino); color:var(--fondo); border-style:solid}
.ficha-elegible.elegida .cifra-ficha{color:var(--fondo)}
.ficha-elegible.elegida .desc, .ficha-elegible.elegida .pie-ficha{opacity:.85}
.ficha-elegible.elegida .prop{color:var(--fondo)}
.ficha-elegible.elegida .marca-elegido{opacity:.9}
/* ---------- las dos secciones de la oferta y sus familias ---------- */
.seccion-oferta{border:0; padding:0; margin:0 0 2.6rem}
.seccion-oferta h2.display, .legend-seccion .display{margin:0}
.legend-seccion{padding:0; width:100%}
.legend-seccion .display{display:block; font-family:var(--titular);
font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.05}
.seccion-oferta h2 em, .legend-seccion em{font-family:var(--texto); font-style:normal;
font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--vino); vertical-align:middle; margin-left:.7em; opacity:.8}
.seccion-oferta .entradilla{font-size:14px; line-height:1.8; margin:.5rem 0 1.8rem; max-width:62ch}
.paso-rotulo{display:flex; align-items:baseline; gap:.6rem; margin:0 0 1.1rem;
font-family:var(--titular); font-size:clamp(1.5rem,2.4vw,1.9rem)}
.paso-rotulo b{font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.14em;
color:var(--vino); border:1px solid var(--vino); border-radius:50%;
width:1.9em; height:1.9em; display:inline-flex; align-items:center; justify-content:center}
.familia{margin:0 0 1.6rem}
.rotulo-familia{margin:0 0 .7rem; font-family:var(--titular); font-size:clamp(1.3rem,2vw,1.6rem);
font-weight:400; letter-spacing:0; color:var(--vino); opacity:1; line-height:1}
.raya{border:0; border-top:1px dashed var(--linea); margin:0 0 2.6rem}
/* los dos titulos de seccion pesan lo mismo: son dos mundos, no uno mayor que otro */
.seccion-oferta h2.display,
.legend-seccion .display{font-family:var(--titular); font-size:clamp(1.8rem,3.4vw,2.6rem);
line-height:1.05; margin:0}
.ficha .pie-ficha{font-size:13px; letter-spacing:.1em; opacity:.7}
.ficha .pie-ficha:empty{display:none}
/* que las fichas de una misma fila casen linea a linea: nombre con nombre,
precio con precio, texto con texto. Si el navegador no sabe de subgrid,
se queda como estaba y no pasa nada. */
@supports (grid-template-rows: subgrid){
.rejilla .ficha{display:grid; grid-template-rows:subgrid; grid-row:span 3}
.rejilla .ficha-elegible{grid-row:span 4}
.rejilla .ficha .nombre, .rejilla .ficha .tarifa-ficha,
.rejilla .ficha .desc, .rejilla .ficha .pie-ficha{margin:0}
.rejilla .ficha .tarifa-ficha{align-self:start}
.rejilla .ficha .desc{align-self:start; padding-top:.15rem}
.rejilla .ficha .pie-ficha{align-self:end; padding-top:.8rem}
}
/* ---------- el tigre, al lado del nombre ---------- */
/* el tigre, suelto a la derecha de la cabecera y a su tamano */
.tigre-marca{height:5.4em; width:auto; flex:none; margin-left:-1.05rem;
align-self:center; pointer-events:none}
/* ---------- el punto final del pie: los dos dormidos ---------- */
.dormidos{display:block; width:min(100%,260px); height:auto; margin:2.6rem auto 0;
opacity:.9}
@media (max-width:700px){ .tigre-marca{height:3.2em; margin-left:.1rem} .dormidos{width:min(100%,200px)} }
/* ---------- ajustes de lectura: los rotulos en verso mayuscula pedian cuerpo ---------- */
.recuadro .etiqueta{font-size:13px}
.campo span{font-size:13px; letter-spacing:.08em}
.resumen .etiqueta{font-size:15px; letter-spacing:.16em}
.oferta thead th{font-size:13px}
.ficha .pie-ficha{font-size:13px}
.ficha .tarifa-ficha i{font-size:13px}
.fecha .plazas.llena{font-size:13px}
footer h3{font-size:13px}
/* ---------- los pasos: numero grande y centrado con su titulo ---------- */
.reserva legend, .paso-rotulo{align-items:center; gap:.7rem}
.reserva legend b, .paso-rotulo b{
font-family:var(--titular); font-size:1.25em; font-weight:400; letter-spacing:0;
width:1.5em; height:1.5em; line-height:1; border-width:1.5px;
display:inline-flex; align-items:center; justify-content:center; flex:none;
padding-bottom:.08em} /* la tipografia de la casa monta alto: se baja un pelin */
/* ---------- las fichas elegibles: al pasar por encima ya se ven elegidas ---------- */
.ficha-elegible:hover{background:var(--vino); color:var(--fondo); border-style:solid;
transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta)}
.ficha-elegible:hover .cifra-ficha, .ficha-elegible:hover .prop{color:var(--fondo)}
.ficha-elegible:hover .desc, .ficha-elegible:hover .pie-ficha{opacity:.85}
.ficha-elegible .marca-elegido{letter-spacing:.16em}
/* la ficha dice lo que hay que hacer, y luego lo que ya hiciste */
.ficha-elegible .marca-elegir, .ficha-elegible .marca-elegido{
position:absolute; top:.6rem; right:.9rem;
font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; transition:opacity .2s ease}
.ficha-elegible .marca-elegir{opacity:.45}
.ficha-elegible:hover .marca-elegir{opacity:.9}
.ficha-elegible.elegida .marca-elegir{opacity:0}
.ficha-elegible .marca-elegido{opacity:0}
.ficha-elegible.elegida .marca-elegido{opacity:.95}
/* "sin reserva" y "con reserva": pastilla, no letra pequeña */
.seccion-oferta h2 em, .legend-seccion em{
display:inline-block; vertical-align:.32em; margin-left:.8rem;
background:var(--vino); color:var(--fondo); opacity:1;
padding:.5em .85em .45em; border-radius:2px;
font-size:14px; font-weight:700; letter-spacing:.18em;
transform:rotate(-1.4deg); box-shadow:2px 2px 0 rgba(0,0,0,.08)}
.legend-seccion em{transform:rotate(1.2deg)}
@media (max-width:700px){
.seccion-oferta h2 em, .legend-seccion em{display:block; width:fit-content;
margin:.6rem 0 0; vertical-align:baseline; font-size:13px}
}
/* ---------- las dos maneras de venir, arriba del todo ---------- */
.caminos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1rem; margin:0 0 1.6rem}
.camino{display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:inherit;
border:1.5px solid var(--vino); border-radius:3px; padding:1.3rem 1.4rem 1.1rem;
background:var(--papel);
transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.3,1)}
.camino:nth-child(1){transform:rotate(-.6deg)}
.camino:nth-child(2){transform:rotate(.5deg)}
.camino:hover, .camino.aqui{background:var(--vino); color:var(--fondo); transform:rotate(0) translateY(-2px); box-shadow:3px 3px 0 var(--tinta)}
.camino-nom{font-family:var(--titular); font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.05}
.camino-dicho{font-family:var(--texto); font-size:14px; line-height:1.6; opacity:.9}
.camino-pie{margin-top:auto; padding-top:.5rem; font-family:var(--texto); font-size:13px;
font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--vino)}
.camino:hover .camino-pie, .camino.aqui .camino-pie{color:var(--fondo)}
/* al saltar a una seccion, que no se esconda bajo la cabecera */
html{scroll-behavior:smooth}
#catalogo, #planear{scroll-margin-top:7.5rem}
/* la proxima fecha, justo antes del punto final del pie */
.proxima{margin:2.4rem auto 0; max-width:none; text-align:center; font-family:var(--texto); font-size:13px;
letter-spacing:.03em}
.proxima b{font-weight:700; color:var(--vino); letter-spacing:.1em; text-transform:uppercase;
font-size:13px; margin-right:.4em}
.proxima a{color:var(--vino); font-weight:700; text-decoration:none}
.proxima a:hover{text-decoration:underline; text-underline-offset:4px}
/* la ficha sin boton no parte el texto: ocupa el ancho de la caja */
.wrap .recuadro:not(.llamada) p, .recuadro:not(.llamada) p{max-width:none}
/* ---------- movil (2026-10-06): cabecera quieta, verticales mas bajas, barra de eleccion ---------- */
.elegido-flot{display:none}
@media (max-width:760px){
header{position:static}
.bloque .foto.vertical, .foto-relato{width:min(100%,260px); margin-left:auto; margin-right:auto}
.elegido-flot{position:fixed; left:0; right:0; bottom:34px; z-index:40; display:flex; justify-content:space-between;
gap:1rem; padding:.65rem 16px; background:var(--vino); color:var(--fondo); text-decoration:none;
font-family:var(--texto); font-size:13px; font-weight:700; border-top:1px solid var(--tinta)}
.elegido-flot[hidden]{display:none}
body.con-barra .wasap{margin-bottom:48px}
.elegido-flot span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
/* textos de 10 px a 12 px en movil (2026-10-06) */
@media (max-width:760px){
.precio small, .sello .pie span, .calendario .mes, .calendario .semana,
.ficha-elegible .marca-elegir, .ficha-elegible .marca-elegido{font-size:13px}
}
/* ---------- movil: menu desplegable, titular, texto y botones (2026-10-06) ---------- */
.menu-btn, .reservar-movil, .idiomas-menu, .franja-idioma{display:none}
@media (max-width:1180px){
header{position:relative}
.bar{flex-wrap:nowrap; align-items:center; gap:.6rem; padding:.5rem 0}
.con-menu .bar .idiomas{display:none}
.reservar-movil{display:inline-block; margin-left:auto; padding:.5rem .8rem; background:var(--vino); color:var(--fondo);
text-decoration:none; font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.menu-btn{display:inline-block; padding:.5rem .8rem; background:transparent; color:var(--tinta); border:1px solid var(--tinta);
font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer}
.con-menu .bar nav{display:none; position:absolute; left:0; right:0; top:100%; z-index:50; margin:0;
flex-direction:column; gap:0; padding:.4rem 16px 1rem; background:var(--fondo); border-bottom:1px solid var(--linea)}
.con-menu header.abierto .bar nav{display:flex}
.con-menu .bar nav a{padding:.8rem .1rem; font-size:15px; border-bottom:1px solid var(--linea)}
.con-menu .bar nav a.destacado-nav{display:none}
.con-menu .bar nav .idiomas-menu{display:flex; padding-top:.9rem; font-size:14px}
.con-menu .bar nav .idiomas-menu a{padding:0; border:0; font-size:14px}
}
@media (max-width:760px){
.hero h1{font-size:2rem}
body{font-size:15px; line-height:27px}
.btn{letter-spacing:.08em; padding:.9rem 1.1rem; text-align:center}
.recuadro .etiqueta{flex-wrap:wrap; gap:.1rem 1rem; letter-spacing:.1em}
}
/* logotipo mas grande en movil (2026-10-06) */
@media (max-width:760px){
.marca .nombre{font-size:2.9rem}
.marca em{font-size:13px}
}
/* movil, tanda 3 (2026-10-06): tigre mayor, Menu/Cerrar iguales, lista del menu mas compacta */
@media (max-width:760px){
.tigre-marca{height:3.9em}
.menu-btn{min-width:78px; padding:.5rem .5rem; text-align:center}
.reservar-movil{padding:.5rem .65rem}
}
@media (max-width:1180px){
.con-menu .bar nav{padding:.2rem 16px .7rem}
.con-menu .bar nav a{padding:.42rem .1rem; line-height:1.3}
.con-menu .bar nav .idiomas-menu{padding-top:.6rem}
}
/* tigre en pantallas de 360 px: mas pequeno y botones mas ajustados; solo desaparece por debajo de 340 */
@media (max-width:370px){
.tigre-marca{height:3.3em; margin-left:0}
.menu-btn{min-width:70px; padding:.5rem .4rem}
.reservar-movil{padding:.5rem .5rem; letter-spacing:.06em}
.bar{gap:.45rem}
}
@media (max-width:339px){ .tigre-marca{display:none} }
/* pie apilado en movil (2026-10-06) */
@media (max-width:760px){
.pie{grid-template-columns:1fr; gap:1.4rem; line-height:1.7}
footer .pie > div:last-child{padding-right:76px}
}
/* franja de idioma encima de la cabecera, solo con el menu de movil (2026-10-06) */
@media (max-width:1180px){
html.con-menu .franja-idioma{display:flex; justify-content:flex-end; align-items:baseline; gap:.4rem;
padding:.3rem 16px; font-family:var(--texto); font-size:13px; line-height:1.4; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; background:var(--fondo)}
.franja-idioma a{text-decoration:underline; text-underline-offset:4px; color:inherit}
.franja-idioma .apagado{opacity:.4; cursor:default}
}
/* bloque fijo: franja de idioma + cabecera (2026-10-06) */
@media (max-width:1180px){
html.con-menu .cab-fija{position:sticky; top:0; z-index:30; background:var(--fondo); transition:transform .25s ease}
html.con-menu .cab-fija.oculta{transform:translateY(-100%)}
}
/* solo la franja de idioma se esconde al bajar; la cabecera queda fija (2026-10-06) */
@media (max-width:1180px){
}
/* el mono asomando por el borde derecho en movil; el fondo sigue su silueta y es del color de la pagina (2026-10-06) */
@media (max-width:980px){
.mono-flotante{display:block; left:auto !important; right:-33px; width:62px; z-index:5; opacity:1;
background:url(mono-fondo-rosa.png) center/100% 100% no-repeat;
transform-origin:50% 100%; transition:top .35s cubic-bezier(.22,.8,.3,1)}
body.verde .mono-flotante{background-image:url(mono-fondo-verde.png)}
body.blanco .mono-flotante{background-image:url(mono-fondo-blanco.png)}
}
/* el bloque de cabecera es ahora el elemento fijo tambien en escritorio (2026-10-06) */
.cab-fija{position:sticky; top:0; z-index:30}
/* la franja se oculta moviendo el punto donde se pega el bloque, sin cambiar su altura (2026-10-06):
evita que el documento crezca y encoja al hacer scroll y que la pagina tiemble */
@media (max-width:1180px){
html.con-menu .cab-fija{top:-27px; transition:top .25s ease}
html.con-menu .cab-fija.con-franja{top:0}
}
/* ======================= V2 (2026-10-09) ======================= */
/* franja superior en todos los anchos: a la izquierda la puerta «Pasa sin llamar», a la derecha los idiomas */
.franja-idioma{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
padding:.3rem 16px; font-family:var(--texto); font-size:13px; line-height:1.4; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; background:var(--fondo)}
@media (min-width:1181px){ .franja-idioma{padding:.32rem max(24px, calc((100vw - 1180px)/2)); font-size:13px} }
.franja-idioma a{color:inherit}
.franja-idioma .franja-puerta{text-decoration:none; color:var(--vino)}
.franja-idioma .franja-puerta:hover{text-decoration:underline; text-underline-offset:4px}
.franja-idioma .franja-lang{display:flex; gap:.4rem; align-items:baseline}
.franja-idioma .franja-lang a{text-decoration:underline; text-underline-offset:4px}
.franja-idioma .apagado{opacity:.4; cursor:default}
@media (min-width:1181px){ header .idiomas{display:none} }
@media (max-width:1180px){ html.con-menu .franja-idioma{justify-content:space-between} }
/* las dos puertas de la portada */
.camino-etq{align-self:flex-start; background:var(--vino); color:var(--fondo);
font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
padding:.42em .8em .38em; border-radius:2px; transform:rotate(-1.2deg); box-shadow:2px 2px 0 rgba(0,0,0,.08)}
.camino:hover .camino-etq, .camino.aqui .camino-etq{background:var(--fondo); color:var(--vino)}
.caminos-portada{margin:1.6rem 0 1.8rem}
.caminos-portada .camino-dicho{font-size:14px}
/* cinco tarjetas de actividades en la portada: tres arriba y dos abajo */
.puertas.cinco{grid-template-columns:repeat(6,1fr)}
.puertas.cinco .puerta{grid-column:span 2}
.puertas.cinco .puerta:nth-child(n+4){grid-column:span 3}
@media (max-width:980px){
.puertas.cinco{grid-template-columns:1fr}
.puertas.cinco .puerta, .puertas.cinco .puerta:nth-child(n+4){grid-column:auto}
}
/* titular de página con su pastilla de «cuándo» */
.portadilla .chip-cuando{display:inline-block; margin:.2rem 0 .9rem; background:var(--vino); color:var(--fondo);
font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
padding:.45em .85em .4em; border-radius:2px; transform:rotate(-1.4deg); box-shadow:2px 2px 0 rgba(0,0,0,.08)}
.solo-lector{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.seccion-carta{margin-bottom:3rem; scroll-margin-top:7.5rem}
.seccion-carta h2.display{margin:0 0 .4rem}
.seccion-carta .entradilla{font-size:14px; line-height:1.8; margin:.4rem 0 1.8rem; max-width:62ch}
.seccion-carta .familia{margin:0 0 1.8rem}
.cruce{margin:2.4rem 0 0; padding:1.2rem 1.4rem; border:1.5px dashed var(--vino); border-radius:3px; max-width:62ch}
.cruce p{margin:0 0 .5rem}
/* V2: la portada en tres filas, para que las dos puertas se vean en la primera pantalla */
.hero{grid-template-areas:"texto foto" "puertas puertas" "mes mes"; row-gap:1.6rem}
.hero > div:first-child{grid-area:texto}
.hero > .foto-hero{grid-area:foto}
.hero > .caminos-portada{grid-area:puertas; margin:.4rem 0 0}
.hero > .recuadro-mes{grid-area:mes; max-width:62ch}
.caminos-portada .camino{padding:1.1rem 1.3rem .95rem}
.caminos-portada .camino-dicho{font-size:14px}
@media (max-width:980px){
.hero{grid-template-areas:"texto" "puertas" "mes" "foto"; row-gap:1.6rem}
}
.seccion-carta h2.display{font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.05}
/* ===== V2: la agenda con papel (2026-10-09) ===== */
/* «Este mes»: hoja de calendario de pared */
.hero > .hoja-mes{grid-area:mes}
.hoja-mes{display:block; max-width:520px; text-decoration:none; color:inherit; position:relative;
border:1.5px solid var(--vino); border-radius:3px; background:var(--papel); transform:rotate(-1.1deg);
transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease, color .25s ease}
.hoja-cabeza{position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
background:var(--vino); color:var(--fondo); padding:.95rem 1.3rem .7rem;
font-family:var(--texto); text-transform:uppercase; font-weight:700}
.hoja-nom{font-family:var(--titular); font-weight:400; font-size:1.5rem; letter-spacing:.08em; line-height:1}
.hoja-etq{font-size:13px; letter-spacing:.2em}
/* las dos anillas de arriba y el borde de arrancar abajo de la franja */
.hoja-anillas::before, .hoja-anillas::after{content:""; position:absolute; top:5px; width:9px; height:9px;
border-radius:50%; background:var(--fondo); box-shadow:inset 0 1px 0 rgba(0,0,0,.25)}
.hoja-anillas::before{left:22%} .hoja-anillas::after{right:22%}
.hoja-cabeza::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:8px;
background:radial-gradient(circle at 8px 0, var(--vino) 0 4.5px, transparent 5px) 0 0 / 16px 8px repeat-x}
.hoja-cuerpo{display:flex; gap:1.3rem; align-items:center; padding:1.5rem 1.3rem .7rem}
.hoja-fecha{display:flex; flex-direction:column; align-items:center; flex:0 0 5.4rem; text-align:center}
.hoja-dia{font-family:var(--titular); font-weight:400; font-size:4.6rem; line-height:.85; color:var(--vino)}
.hoja-sem{font-size:13px; letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin-top:.5rem}
.hoja-texto{display:flex; flex-direction:column; gap:.4rem; font-size:14px; line-height:1.7}
.hoja-titulo{font-family:var(--titular); font-weight:400; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.1}
.hoja-pie{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding:.4rem 1.3rem 1.1rem; font-size:13px; letter-spacing:.04em}
.hoja-precio b{font-family:var(--titular); font-weight:400; font-size:1.7rem; color:var(--vino); letter-spacing:0; margin-right:.2rem}
.hoja-cta{font-weight:700; color:var(--vino)}
.hoja-mes:hover, .hoja-mes:focus-visible{transform:rotate(0) translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta); background:var(--vino); color:var(--fondo)}
/* al pasar por encima: el cuerpo se llena de vino y la cabecera pasa a clara con el texto en vino; el borde rasgado se conserva en claro */
.hoja-mes:hover .hoja-cabeza, .hoja-mes:focus-visible .hoja-cabeza{background:var(--fondo); color:var(--vino)}
.hoja-mes:hover .hoja-cabeza::after, .hoja-mes:focus-visible .hoja-cabeza::after{background:radial-gradient(circle at 8px 0, var(--fondo) 0 4.5px, transparent 5px) 0 0 / 16px 8px repeat-x}
.hoja-mes:hover .hoja-anillas::before, .hoja-mes:hover .hoja-anillas::after,
.hoja-mes:focus-visible .hoja-anillas::before, .hoja-mes:focus-visible .hoja-anillas::after{background:var(--vino)}
.hoja-mes:hover .hoja-dia, .hoja-mes:hover .hoja-precio b, .hoja-mes:hover .hoja-cta,
.hoja-mes:focus-visible .hoja-dia, .hoja-mes:focus-visible .hoja-precio b, .hoja-mes:focus-visible .hoja-cta{color:var(--fondo)}
@media (max-width:760px){
.hoja-mes{max-width:none}
.hoja-dia{font-size:3.8rem}
.hoja-fecha{flex-basis:4.6rem}
}
/* la agenda: cuaderno de espiral con gomilla y cinta */
.cuaderno{position:relative; margin:2.2rem 0 3.4rem; padding:2.2rem 2.2rem 1.4rem 4.6rem; gap:0;
background:
linear-gradient(color-mix(in srgb, var(--vino) 55%, transparent), color-mix(in srgb, var(--vino) 55%, transparent)) 3.9rem 0 / 1px 100% no-repeat,
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(20,18,16,.11) 27px 28px),
rgba(255,255,255,.5);
border:1.5px solid var(--tinta); border-radius:4px 12px 12px 4px; box-shadow:4px 4px 0 rgba(20,18,16,.16)}
/* las hojas de debajo */
.cuaderno::before{content:""; position:absolute; inset:5px -6px -7px 5px; z-index:-1;
border:1.5px solid var(--tinta); border-radius:4px 12px 12px 4px; background:rgba(255,255,255,.35); transform:rotate(.7deg)}
/* la espiral: barra de alambre y agujero, cada 28 px */
.cuaderno::after{content:""; position:absolute; left:-13px; top:14px; bottom:14px; width:44px; pointer-events:none;
background:
linear-gradient(to bottom, transparent 0 12px, var(--tinta) 12px 15px, transparent 15px) 0 0 / 34px 28px repeat-y,
radial-gradient(circle at 36px 13.5px, var(--fondo) 0 4.4px, var(--tinta) 4.9px 6px, transparent 6.5px) 0 0 / 44px 28px repeat-y}
.cuaderno .goma{position:absolute; top:-8px; bottom:-8px; right:2.3rem; width:13px; background:var(--vino);
border-radius:3px; box-shadow:2px 0 0 rgba(0,0,0,.15), -1px 0 0 rgba(0,0,0,.15); z-index:2; pointer-events:none}
.cuaderno .cinta{position:absolute; top:-9px; left:30%; width:16px; height:78px; background:var(--vino); z-index:2;
clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); pointer-events:none; opacity:.92}
.cuaderno .pestana-mes{position:relative; z-index:1; margin:.4rem -2.7rem .6rem auto; width:fit-content;
background:var(--vino); color:var(--fondo); padding:.3rem 1.6rem .26rem 1rem; border-radius:3px 0 0 3px;
font-family:var(--titular); font-weight:400; font-size:1.35rem; letter-spacing:.06em; line-height:1.2;
box-shadow:2px 2px 0 rgba(0,0,0,.14)}
.cuaderno .pestana-mes ~ .pestana-mes{margin-top:1.6rem}
.cuaderno .fecha{border-top:0; border-bottom:0; padding:1.1rem 0; position:relative}
.cuaderno .fecha:last-child{border-bottom:0}
.cuaderno .fecha + .fecha::before{content:""; position:absolute; left:0; right:0; top:0; border-top:1px dashed var(--linea)}
/* la fecha, apuntada a mano y rodeada con boli */
.cuaderno .calendario{border:0; background:none; padding:.4rem .2rem; position:relative}
.cuaderno .calendario::before{content:""; position:absolute; inset:0 -.1rem; border:2px solid var(--vino);
border-radius:52% 46% 55% 44% / 48% 56% 44% 52%; transform:rotate(-4deg); opacity:.8}
.cuaderno .calendario .dia{font-size:2.6rem; transform:rotate(-3deg); position:relative}
.cuaderno .calendario .mes, .cuaderno .calendario .semana{position:relative}
.cuaderno .fecha .plazas{font-weight:700}
.cuaderno .fecha.completa{opacity:1}
.cuaderno .fecha.completa .loque h3{text-decoration:line-through; text-decoration-color:var(--vino);
text-decoration-thickness:2px; opacity:.65}
.cuaderno .fecha.completa .loque p, .cuaderno .fecha.completa .calendario{opacity:.6}
.cuaderno .fecha .plazas.llena{display:inline-block; border:2px solid var(--vino); color:var(--vino);
padding:.1rem .6rem; transform:rotate(-4deg); border-radius:2px; letter-spacing:.2em}
@media (max-width:760px){
.cuaderno{padding:3.1rem 1.1rem 1.1rem 1.1rem;
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(20,18,16,.11) 27px 28px),
rgba(255,255,255,.5)}
/* en movil la espiral va arriba */
.cuaderno::after{left:14px; right:14px; top:-12px; bottom:auto; width:auto; height:44px;
background:
linear-gradient(to right, transparent 0 12px, var(--tinta) 12px 15px, transparent 15px) 0 0 / 28px 34px repeat-x,
radial-gradient(circle at 13.5px 36px, var(--fondo) 0 4.4px, var(--tinta) 4.9px 6px, transparent 6.5px) 0 0 / 28px 44px repeat-x}
.cuaderno .goma{right:1.2rem}
.cuaderno .cinta{left:auto; right:3.4rem; top:-9px}
.cuaderno .pestana-mes{margin-right:-1.4rem}
}
/* la gomilla pasa por el margen derecho, sin tapar precios ni botones */
.cuaderno{padding-right:4.6rem}
.cuaderno .goma{right:1.9rem}
.cuaderno .pestana-mes{z-index:3; margin-right:-4.7rem}
@media (max-width:760px){
.cuaderno{padding-right:2.7rem}
.cuaderno .goma{right:.8rem}
.cuaderno .pestana-mes{margin-right:-2.8rem}
.cuaderno .cinta{right:4.4rem}
}
/* V2: el mono se va al borde derecho en cuanto deja de caber en el pasillo de la izquierda (2026-10-09).
Hasta ~1470 px su pasillo izquierdo es mas estrecho que el y empieza a tapar el contenido: se pasa al
borde derecho, con el relleno del color de la pagina, igual que en movil. */
@media (max-width:1470px){
.mono-flotante{display:block; left:auto !important; right:-33px; width:62px; z-index:5; opacity:1;
background:url(mono-fondo-rosa.png) center/100% 100% no-repeat;
transform-origin:50% 100%; transition:top .35s cubic-bezier(.22,.8,.3,1)}
body.verde .mono-flotante{background-image:url(mono-fondo-verde.png)}
body.blanco .mono-flotante{background-image:url(mono-fondo-blanco.png)}
}
/* V2: en anchos medios el boton de WhatsApp se queda fijo abajo a la derecha, como en movil; solo el mono se desliza (2026-10-09) */
@media (max-width:1470px) and (min-width:981px){
.wasap{right:16px; width:56px; top:auto !important; bottom:1.6rem; position:fixed}
}
/* V2 (2026-10-09): la franja superior queda siempre fija, tambien al bajar */
html.con-menu .cab-fija, html.con-menu .cab-fija.con-franja{top:0}
/* V2: los colores abajo y todo el comportamiento de movil a partir del mismo punto de estrechez (1470 px) */
@media (max-width:1470px){
.paleta{flex-direction:row; top:auto; bottom:0; left:0; right:0; transform:none;
justify-content:center; gap:2rem; border-right:0; border-top:1px solid var(--linea); padding:.6rem}
.paleta button{writing-mode:horizontal-tb; transform:none; flex-direction:row}
.paleta .muestra{transform:none}
body{padding-bottom:3.5rem}
}
@media (max-width:1470px) and (min-width:981px){
.wasap{bottom:4.6rem}
}
/* V2: la agenda sale del arranque y va en su propia seccion, centrada y mas pequena (2026-10-09) */
.hero{grid-template-areas:"texto foto" "puertas puertas"}
@media (max-width:980px){ .hero{grid-template-areas:"texto" "puertas" "foto"} }
.seccion-agenda{text-align:center; padding-top:2.4rem; padding-bottom:2.4rem}
.seccion-agenda h2.display{margin:0 0 1.6rem}
.seccion-agenda .hoja-mes{margin:0 auto; max-width:340px; text-align:left}
.seccion-agenda .hoja-nom{font-size:1.25rem}
.seccion-agenda .hoja-cabeza{padding:.8rem 1.1rem .6rem}
.seccion-agenda .hoja-cuerpo{padding:1.3rem 1.1rem .5rem; gap:1rem}
.seccion-agenda .hoja-fecha{flex-basis:4.2rem}
.seccion-agenda .hoja-dia{font-size:3.6rem}
.seccion-agenda .hoja-titulo{font-size:1.25rem}
.seccion-agenda .hoja-pie{padding:.3rem 1.1rem .9rem}
.seccion-agenda .enlace{margin-top:1.4rem}
.seccion-agenda .enlace, .seccion-agenda .enlace.bajo-puertas{display:flex; justify-content:center; width:100%; max-width:none; margin-left:0; margin-right:0; text-align:center}
/* V2: la agenda de la portada, con titulo mas grande y la hoja a un tamano intermedio (2026-10-09) */
.seccion-agenda h2.display{font-size:clamp(2.7rem,5.4vw,4rem); margin:0 0 2rem}
.seccion-agenda .hoja-mes{max-width:440px}
.seccion-agenda .hoja-nom{font-size:1.4rem}
.seccion-agenda .hoja-cabeza{padding:.9rem 1.2rem .65rem}
.seccion-agenda .hoja-cuerpo{padding:1.4rem 1.2rem .6rem; gap:1.2rem}
.seccion-agenda .hoja-fecha{flex-basis:4.8rem}
.seccion-agenda .hoja-dia{font-size:4.2rem}
.seccion-agenda .hoja-titulo{font-size:1.45rem}
.seccion-agenda .hoja-pie{padding:.4rem 1.2rem 1rem}
@media (max-width:760px){ .seccion-agenda .hoja-dia{font-size:3.6rem} .seccion-agenda .hoja-titulo{font-size:1.3rem} }
/* V2: las salidas bajo las tarjetas, centradas del todo (la medida de lectura las dejaba a la izquierda) */
.bajo-puertas{max-width:none; width:100%}
p.enlace.bajo-puertas{max-width:none; width:100%}
/* enlace de salida dentro de un párrafo de entrada: estilo de enlace con flecha, sin subrayado */
.intro a.sale{color:var(--vino); font-weight:700; font-size:13px; letter-spacing:.04em; text-decoration:none; white-space:nowrap}
.intro a.sale:hover{text-decoration:underline}
/* menú de escritorio: todo centrado en vertical, para que el botón Reservar no quede más bajo que el texto */
@media (min-width:1181px){
.bar{align-items:center; gap:1.6rem}
nav{align-items:center; gap:1.05rem}
nav a.destacado-nav{margin-left:.2rem}
}
/* tarjetas de la portada: el precio centrado, con su botón */
.puertas .precio{align-self:center; text-align:center}
/* Pasa sin llamar: el texto y la foto del plato hacen un solo bloque, a la izquierda */
.portadilla-fila{display:flex; align-items:flex-start; justify-content:flex-start; gap:clamp(2rem,5vw,4.5rem)}
.portadilla-texto{flex:0 1 auto; min-width:0}
.foto-portadilla{flex:0 0 clamp(300px,34vw,460px); aspect-ratio:4/3; overflow:hidden; margin:0}
.foto-portadilla img{width:100%; height:100%; object-fit:cover}
@media (max-width:760px){
.portadilla-fila{flex-direction:column; align-items:stretch; gap:1.4rem}
.foto-portadilla{flex:none; width:100%; max-width:420px; margin:0 0 2.4rem}
}
@media (min-width:1100px){.portadilla-texto{flex:0 0 auto}.portadilla-texto .epigrafe{white-space:nowrap}}
.intro-portadilla{font-size:14px; line-height:1.8; margin:1.1rem 0 0; max-width:44ch}
.seccion-carta > h2.display{margin-bottom:1.6rem}
/* la carta de Pasa sin llamar: títulos y precios con más cuerpo */
.seccion-carta .ficha .nombre, .seccion-carta .ficha-chica .nombre{font-size:1.5rem; line-height:1.1; margin-bottom:.7rem}
.seccion-carta .ficha .cifra-ficha, .seccion-carta .ficha-chica .cifra-ficha{font-size:2.1rem}
.seccion-carta .ficha .cifra-ficha.texto{font-size:2.1rem}
.seccion-carta .ficha .desc{font-size:14px}
/* ===== El barrio a pie (2026-10-10) ===== */
.portadilla-ruta{align-items:center}
.ilus-portada{flex:0 0 clamp(200px,24vw,330px); width:clamp(200px,24vw,330px); height:auto}
.vueltas-nav{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0; max-width:none}
.vuelta{padding:3.6rem 0 2rem}
.vuelta-cab{margin-bottom:1.6rem}
.vuelta-cab .display{margin:0 0 .4rem}
.vuelta-datos{margin:0; font-size:14px; max-width:none}
.vuelta-datos b{color:var(--vino)}
.vuelta-cuerpo{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2.6rem; align-items:start}
.vuelta .mapa{position:sticky; top:9rem}
.vuelta .mapa svg, .vuelta .mapa img{width:100%; height:auto; display:block}
.vuelta .sale{font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--vino); margin:0 0 .8rem; max-width:none}
.paradas{list-style:none; margin:0 0 1.2rem; padding:0}
.paradas li{display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.9rem; padding:1rem 0; align-items:start}
.parada-num{display:inline-flex; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--vino); color:var(--fondo); font-size:13px; font-weight:700; align-items:center; justify-content:center; line-height:1; margin-top:.2rem}
.paradas h3{font-family:var(--titular); font-weight:400; font-size:1.45rem; line-height:1.1; margin:0 0 .35rem}
.paradas p{margin:0; font-size:14px; line-height:1.7; max-width:none}
.parada-ilus{width:clamp(96px,9vw,130px); height:auto; align-self:center}
.rotulo-pausa{font-family:var(--titular); font-weight:400; font-size:1.45rem; color:var(--vino); margin:1.4rem 0 .6rem}
.pausas{list-style:none; margin:0; padding:0}
.pausas li{display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.9rem; padding:.55rem 0; align-items:start}
.pausa-letra{width:1.15rem; height:1.15rem; margin:.35rem .3rem 0; border:2px solid var(--vino); color:var(--vino); font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transform:rotate(45deg); border-radius:3px}
.pausa-letra{line-height:1}
.pausas li b{display:block; font-weight:700; font-size:14px}
.pausas li span:not(.pausa-letra){display:block; font-size:13px; opacity:.75; line-height:1.55}
@media (max-width:900px){
.vuelta-cuerpo{grid-template-columns:1fr; gap:1.6rem}
.vuelta .mapa{position:static}
.ilus-portada{display:none}
}
@media (max-width:560px){
.paradas li{grid-template-columns:2rem minmax(0,1fr)}
.parada-ilus{grid-column:2; width:130px; margin-top:.6rem}
}
@media (min-width:1100px){.portadilla-ruta > .portadilla-texto{flex:1 1 auto; max-width:640px}.portadilla-ruta > .portadilla-texto .epigrafe{white-space:normal}}
.portadilla-ruta .portadilla-texto .epigrafe{max-width:30ch; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.15}
.vuelta .aqui-paras{margin:0; font-size:14px; line-height:1.7; max-width:none; padding:.9rem 1rem; border-left:3px solid var(--vino); background:var(--papel)}
.vuelta .aqui-paras a{color:var(--vino); font-weight:700; text-decoration:none; white-space:nowrap}
.vuelta .aqui-paras a:hover{text-decoration:underline; text-underline-offset:4px}
.barrio-enlace{margin:3.2rem 0 1.2rem; display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem)}
.barrio-enlace .texto{flex:1 1 auto; max-width:var(--lectura)}
.barrio-enlace .ilus-enlace{flex:0 0 clamp(150px,18vw,230px); width:clamp(150px,18vw,230px); height:auto}
@media (max-width:640px){.barrio-enlace{flex-direction:column; align-items:flex-start}.barrio-enlace .ilus-enlace{order:-1; width:160px}}
.barrio-enlace h3{margin:0 0 .5rem}
.barrio-enlace .directo{margin:.8rem 0 0}
.barrio-enlace h3{font-family:var(--titular); font-weight:400; font-size:1.7rem; line-height:1.1}
/* el bloque «Y sin salir del barrio»: centrado como conjunto, y el enlace con el estilo de siempre (vino, negrita, flecha, sin subrayar) */
.barrio-enlace{justify-content:center; margin-left:auto; margin-right:auto}
.barrio-enlace .texto{flex:0 1 52ch}
.barrio-enlace .directo a{color:var(--vino); font-weight:700; font-size:13px; letter-spacing:.04em; text-decoration:none}
.barrio-enlace .directo a:hover{text-decoration:underline; text-underline-offset:4px}
@media (max-width:640px){.barrio-enlace{align-items:flex-start}}
.barrio-enlace{max-width:min(100%,880px)}
.barrio-enlace .ilus-enlace{order:-1}
/* «Y para terminar»: sin foto, todo centrado */
.bloque.cierre-ruta{display:block; text-align:center}
.bloque.cierre-ruta .texto-largo{margin:0 auto; max-width:var(--lectura)}
.bloque.cierre-ruta .btn{margin-top:1.2rem}
/* las ilustraciones de las paradas, más grandes: debajo del texto, al ancho de la columna */
.paradas li{grid-template-columns:2rem minmax(0,1fr)}
.paradas li .parada-ilus{grid-column:2; width:min(100%,380px); margin-top:.9rem; align-self:start}
/* «Por el camino»: rincones de paso, sin número */
.vuelta .por-camino{list-style:none; margin:0 0 1.4rem; padding:0}
.vuelta .por-camino li{padding:.55rem 0 .55rem 1.1rem; position:relative}
.vuelta .por-camino li::before{content:""; position:absolute; left:0; top:1.05rem; width:6px; height:6px; border-radius:50%; background:var(--vino)}
.vuelta .por-camino b{display:block; font-weight:700; font-size:14px}
.vuelta .por-camino span{display:block; font-size:14px; line-height:1.65; opacity:.85}
/* reservar: segundo camino de salida, por correo */
.resumen .salida .btn.hueco{margin-top:.7rem}
.resumen .estado-envio{margin:.7rem 0 0; font-size:13px; line-height:1.6; min-height:1.2em; max-width:none}
.resumen .estado-envio.error{color:var(--vino); font-weight:700}
.resumen .privacidad-envio{margin:.4rem 0 0; font-size:13px; opacity:.65; max-width:none}
/* ===== Fotos con recorte irregular (elegido por Gaby, 2026-10-11): sustituye al marco de pincel ===== */
.marco-pincel{padding:0; overflow:hidden; background:none; border:0; box-shadow:none}
.marco-pincel::after{display:none !important}
/* con !important: algunas fotos (las tarjetas de la portada, «Quién») traían un recorte propio más tímido que ganaba por especificidad */
.marco-pincel[data-r="0"], .botella img[data-r="0"]{clip-path:polygon(1.2% 0.9%,24% 0,50% 1.2%,78% 0.3%,100% 1.2%,98.8% 30%,100% 55%,98.8% 98.8%,70% 100%,45% 98.5%,18% 99.7%,0 98.8%,1.1% 62%,0.2% 30%) !important}
.marco-pincel[data-r="1"], .botella img[data-r="1"]{clip-path:polygon(0 1.6%,27% 0.3%,56% 1.2%,84% 0,100% 1.1%,99.1% 40%,100% 70%,98.8% 100%,66% 98.5%,35% 100%,6% 98.8%,0 97.5%,1.2% 48%) !important}
.marco-pincel[data-r="2"], .botella img[data-r="2"]{clip-path:polygon(1.1% 0,30% 1.2%,62% 0.2%,97.5% 0.9%,100% 0.2%,98.9% 36%,100% 68%,99.1% 99.4%,60% 98.5%,28% 100%,0 98.9%,1.2% 70%,0 35%) !important}
.marco-pincel[data-r="3"], .botella img[data-r="3"]{clip-path:polygon(0 0.9%,18% 0.2%,50% 1.6%,82% 0.5%,99.4% 1.2%,100% 50%,98.5% 78%,100% 100%,72% 98.5%,40% 99.8%,12% 98.3%,0.9% 100%,1.6% 55%) !important}
.marco-pincel[data-r="4"], .botella img[data-r="4"]{clip-path:polygon(1.6% 0.5%,35% 0,66% 1.2%,100% 0,98.8% 33%,100% 66%,99.3% 99.1%,64% 100%,30% 98.5%,0 99.4%,0.9% 66%,0 32%) !important}
/* ---------- el dibujo animado que cierra el pie ---------- */
.dibujo-final{display:block; width:min(100%,360px); height:auto; margin:2.6rem auto 0}
.firma-dibujo{font-family:var(--titular); font-size:1.5rem; text-align:center; width:min(100%,440px); margin:.6rem auto 0}
/* enlaces legales del pie */
.legales{margin:1.4rem auto 0; text-align:center; font-size:13px; letter-spacing:.04em; opacity:.8}
.legales a{color:inherit; text-decoration:none; display:inline-block; transition:transform .15s, color .15s}
.legales a:hover, .legales a:focus-visible{transform:translate(-2px,-2px); color:var(--vino)}
/* texto corrido de las paginas legales */
.prosa{margin:.4rem 0 3rem}
.prosa h2{font-size:1.05rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:2.2rem 0 .7rem}
.prosa h2:first-child{margin-top:1rem}
.prosa p{max-width:var(--lectura); margin:0 0 .85rem; font-size:.95rem}
/* 2026-10-12: dibujo final de Gaby a 360 px (antes 440) */
/* ilustraciones en tinta: se funden con el color de la página (rosa, verde o blanco) */
.parada-ilus, .ilus-portada, .ilus-enlace{mix-blend-mode:multiply}
/* Pies de las ilustraciones (2026-10-12) */
.fig-ilus{margin:0}
.fig-ilus figcaption{margin-top:.5rem; font-size:13px; line-height:1.4; opacity:.75; text-align:center}
.fig-portada{flex:0 0 clamp(200px,24vw,330px)}
.fig-portada .ilus-portada{width:100%}
.fig-enlace{flex:0 0 clamp(150px,18vw,230px); order:-1}
.fig-enlace .ilus-enlace{width:100%}
@media (max-width:900px){.fig-portada{display:none}}
@media (max-width:640px){.fig-enlace{width:160px; flex:none}}
.fig-enlace{flex:0 0 clamp(190px,22vw,270px)}
@media (max-width:640px){.fig-enlace{width:min(100%,250px); flex:none}}
/* El símbolo del barrio (2026-10-12): menú de la portadilla y marca de cada vuelta */
.flor-nav{margin:1.6rem 0 0}
.flor-nav .flor{display:block; width:min(100%,280px); height:auto; overflow:visible}
.flor-nav a{cursor:pointer}
.flor-nav a:hover .fl-p path:nth-child(2), .flor-nav a:hover .fl-p circle:nth-child(2){fill-opacity:.22}
.flor-nav a:hover text{fill:var(--vino)}
.vuelta-titulo{display:flex; align-items:center; gap:1rem}
.vuelta-titulo .display{margin:0}
.flor-mini{flex:0 0 auto; width:80px; height:80px}
@media (max-width:640px){.flor-nav .flor{width:min(100%,290px)}.flor-mini{width:68px; height:68px}}
/* La vuelta grande, solo nombres (2026-10-13): lo que hay que saber de cada parada está en las cortas */
.paradas-nombres{list-style:none; margin:0 0 1rem; padding:0}
.paradas-nombres li{display:flex; align-items:center; gap:.9rem; padding:.45rem 0}
.paradas-nombres .parada-num{margin-top:0; flex:0 0 auto}
.paradas-nombres .parada-nombre{font-size:15px; font-weight:600}
.grande-enlaces{font-size:14px; line-height:1.7; margin:0 0 1.2rem; max-width:none}
/* en la página del barrio los saltos largos van directos, sin deslizarse (marea) */
html:has(.flor-nav){scroll-behavior:auto}
/* Cabecera sin franja en escritorio (2026-10-13): los idiomas pasan debajo de «Reservar» */
@media (min-width:1181px){
.franja-idioma{display:none}
.bar{position:relative}
header .idiomas{display:flex; position:absolute; right:0; top:calc(50% + 1.425rem); bottom:0; width:6.48rem;
justify-content:center; align-items:center; gap:.4rem;
font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
header .idiomas a{color:inherit; text-decoration:none}
header .idiomas a[aria-current]{text-decoration:none}
header .idiomas a[href="#"]:not([aria-current]){opacity:.45}
}
/* en móvil la franja deja solo los idiomas, a la derecha */
@media (max-width:1180px){ html.con-menu .franja-idioma{justify-content:flex-end} }
/* enlace con flecha dentro de un párrafo de portadilla */
.enlace-flecha{color:var(--vino); font-weight:700; font-size:13px; letter-spacing:.04em; text-decoration:none}
.enlace-flecha:hover{text-decoration:underline; text-underline-offset:4px}
/* «Copas y tapas» (antes «Carta») entra en el menú como puerta: borde de vino y sin relleno (2026-10-13) */
@media (min-width:1181px){
nav a.puerta-nav{color:var(--vino); border:1.5px solid var(--vino); padding:.42rem .8rem; white-space:nowrap}
nav a.puerta-nav:hover{background:var(--vino); color:var(--fondo)}
}
/* Sello «Copas y tapas» (2026-10-13): texto en bloque con la gilda pegada y solapada, centrado entre el logo y Mesas */
.puerta-nav .sello-dib{display:none}
@media (min-width:1181px){
nav{flex:1; margin-left:0}
nav a.puerta-nav{display:flex; flex-direction:row; align-items:center; justify-content:center; margin:0 auto; padding:0; border:0;
color:var(--vino); transform:rotate(-3deg); white-space:nowrap}
nav a.puerta-nav::after{display:none}
nav a.puerta-nav:hover{background:none; color:var(--vino)}
.sello-texto{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center;
font-family:var(--titular); font-weight:400; font-size:1.5rem; line-height:.84; letter-spacing:.01em; text-transform:uppercase}
.sello-texto span{display:block}
.sello-texto .s1{font-size:1.15em; letter-spacing:.13em; margin-right:-.13em}
nav a.puerta-nav .sello-dib{display:block; position:relative; z-index:0; flex:0 0 auto; width:4.2rem; height:4.2rem; margin-left:-.95rem; margin-right:-.2rem; transform:rotate(-16deg); overflow:visible}
}
@media (min-width:1181px) and (max-width:1340px){
.sello-texto{font-size:1.25rem}
nav a.puerta-nav .sello-dib{width:3.6rem; height:3.6rem; margin-left:-.85rem}
}
/* La gilda del sello: extremos y centro en colores opuestos; al pasar el ratón se intercambian. Los huecos, siempre al contrario de su pieza. */
.sello-dib .g-base{fill:var(--fondo)}
.sello-dib .g-linea{fill:var(--vino)}
.sello-dib .g-ext{fill:var(--fondo)}
.sello-dib .g-ext-h{fill:var(--vino)}
.sello-dib .g-muesca{fill:var(--fondo)}
.sello-dib .g-cen{fill:var(--vino)}
.sello-dib .g-cen-h{fill:var(--fondo)}
.sello-dib rect{transition:fill .28s ease}
a.puerta-nav:hover .g-ext, a.puerta-nav:focus-visible .g-ext{fill:var(--vino)}
a.puerta-nav:hover .g-ext-h, a.puerta-nav:focus-visible .g-ext-h{fill:var(--fondo)}
a.puerta-nav:hover .g-muesca, a.puerta-nav:focus-visible .g-muesca{fill:var(--vino)}
a.puerta-nav:hover .g-cen, a.puerta-nav:focus-visible .g-cen{fill:var(--fondo)}
a.puerta-nav:hover .g-cen-h, a.puerta-nav:focus-visible .g-cen-h{fill:var(--vino)}
/* ===== La etiqueta de Jugo colgando de un cordel (2026-10-13): sustituye al mono flotante ===== */
.etq, .etq-hilo{display:none !important}
.etq{position:fixed; z-index:8; pointer-events:none; width:clamp(78px,6.4vw,124px); left:clamp(32px,2.8vw,56px); transform-origin:51.87% 12.28%; will-change:transform}
.etq img{display:block; width:100%; height:auto; filter:drop-shadow(0 3px 4px rgba(20,18,16,.2)); user-select:none}
.etq-cuerda{position:fixed; z-index:8; width:2.4px; pointer-events:none;
background:repeating-linear-gradient(162deg,#a98262 0 1.6px,#dcc7a6 1.6px 3.2px)}
.etq.etq-borde{left:auto; right:-56px; width:86px}
/* el botón de WhatsApp, fijo abajo a la derecha, también en pantallas grandes */
@media (min-width:1471px){ .wasap{top:auto !important; bottom:2rem; right:clamp(32px,2.8vw,56px)} }
/* el cordel de la etiqueta es ahora un trazo SVG que se curva y ondula (2026-10-13) */
.etq-hilo{position:fixed; z-index:9; pointer-events:none; overflow:visible}
/* un ligero movimiento de la gilda al pasar el ratón por el sello (2026-10-13) */
@media (min-width:1181px){
nav a.puerta-nav .sello-dib{transition:transform .38s cubic-bezier(.34,1.56,.64,1)}
nav a.puerta-nav:hover .sello-dib, nav a.puerta-nav:focus-visible .sello-dib{transform:rotate(-11deg) translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){ nav a.puerta-nav .sello-dib{transition:none} nav a.puerta-nav:hover .sello-dib, nav a.puerta-nav:focus-visible .sello-dib{transform:rotate(-16deg)} }
/* ---------- fotos sin ningún efecto (Antonio, 2026-10-16): rectángulo limpio, sin recorte, trazo, giro ni sombra ---------- */
.foto-hero, .puerta .foto, .puerta:nth-child(n) .foto, .quien .foto, .foto-guia, .foto-relato, .foto-ancha,
.bloque .foto, .bloque:nth-of-type(n) .foto, .cierre-visual figure, .foto-portadilla,
.marco-pincel, .marco-pincel[data-r], .botella img, .botella img[data-r]{
clip-path:none !important; -webkit-clip-path:none !important; transform:none !important; filter:none !important; box-shadow:none !important}
.marco-pincel{padding:0}
.marco-pincel::after{content:none !important; display:none !important}
/* portada en escritorio (2026-10-16): dos columnas iguales; las dos cajas y la foto comparten ancho y la foto queda alineada con la caja de la derecha */
@media (min-width:1181px){
.hero{grid-template-columns:repeat(2,minmax(0,33rem)); column-gap:1rem; justify-content:start}
.hero > .caminos-portada{grid-template-columns:repeat(2,minmax(0,33rem)); gap:1rem}
.foto-hero{margin:0; width:100%}
}
/* 2026-10-17 (Antonio): fuera «vinos vivos» del logotipo y JUGO sensiblemente mas grande.
Se oculta, no se borra: para recuperarlo, quitar este bloque. */
.marca em{display:none !important}
.marca .nombre{font-size:clamp(3.6rem,6.6vw,5.6rem)}
@media (max-width:980px){ .marca .nombre{font-size:2.2rem} }
@media (max-width:760px){ .marca .nombre{font-size:3.4rem} }
/* 2026-10-17 (Antonio): la gilda del sello «Copas y tapas», un poco más grande y algo más separada del texto */
@media (min-width:1181px){
nav a.puerta-nav .sello-dib{width:5rem; height:5rem; margin-left:-.3rem}
}
@media (min-width:1181px) and (max-width:1340px){
nav a.puerta-nav .sello-dib{width:4.3rem; height:4.3rem; margin-left:-.25rem}
}
/* 2026-10-17 (Antonio, en prueba): el menú de ordenador en la letra de Jugo. Para volver atrás, quitar este bloque. */
@media (min-width:1181px){
nav a:not(.puerta-nav){font-family:var(--titular); font-weight:400; font-size:1.2rem; letter-spacing:.03em; line-height:1;
-webkit-text-stroke:.012em currentColor; paint-order:stroke fill}
nav a.destacado-nav{font-size:1.2rem; padding:.55rem 1rem .45rem}
}
@media (min-width:1181px) and (max-width:1400px){
nav a:not(.puerta-nav), nav a.destacado-nav{font-size:1.1rem}
}
/* 2026-10-17 (Antonio): alineaciones. Lo que va a los lados toca los bordes del contenido (los mismos que el logo y Reservar),
y la columna de texto de los bloques con foto empieza donde empieza la segunda columna de los bloques gemelos. */
@media (min-width:1181px){
/* portada: las dos cajas y la foto llegan hasta el borde derecho */
.hero{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero > .caminos-portada{grid-template-columns:repeat(2,minmax(0,1fr))}
/* portada: la foto del relato al borde derecho y la de «Quién está detrás» al izquierdo */
.foto-relato{margin-left:auto; margin-right:0}
.quien .foto{margin-left:0; margin-right:auto}
.foto-guia{margin-left:auto; margin-right:0} /* la de la guía de viticultores, también al borde derecho */
/* bloques con foto: dos columnas iguales, como los gemelos; la foto pegada a su borde */
.bloque:has(> .foto){display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,4vw,3.5rem)}
.bloque:has(> .foto) > .foto{justify-self:start; margin-inline:0}
.bloque:nth-of-type(even):has(> .foto) > .foto{justify-self:end}
}
/* «desde» delante de una cifra grande (Mesas, 2026-10-17): misma etiqueta que en las fichas de Reservar */
.tarifa .cifra .desde{font-family:var(--texto); font-style:normal; font-size:13px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-right:.35em; vertical-align:.4em}
/* 2026-10-17 (Antonio): la agenda deja de ser un cuaderno de espiral y vuelve a la lista sobria de antes
(la clase .cuaderno ya no se usa; sus reglas se conservan arriba por si se recupera). El mes, un rótulo sencillo. */
.cartelera .pestana-mes{font-family:var(--titular); font-weight:400; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1;
margin:2rem 0 .2rem; padding-bottom:.5rem; border-bottom:1px solid var(--linea)}
.cartelera .pestana-mes:first-child{margin-top:.4rem}
/* 2026-10-17 (Antonio): «Este mes» de la portada pasa de hoja de calendario a cartel de letras grandes, a todo el ancho.
La hoja (.hoja-mes) queda en el CSS sin usar. Se actualiza a mano, como la agenda. */
.cartel-mes{display:grid; grid-template-columns:auto 1fr; gap:2.4rem; align-items:end; text-align:left;
text-decoration:none; color:inherit; border-top:3px solid var(--tinta); border-bottom:3px solid var(--tinta); padding:1.8rem 0 1.6rem}
.cartel-cuando{display:flex; flex-direction:column; align-items:center; line-height:.8}
.cartel-num{font-family:var(--titular); font-size:clamp(6rem,13vw,10rem); line-height:.78; -webkit-text-stroke:.02em currentColor; paint-order:stroke fill}
.cartel-sem{font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; margin-top:.9rem; white-space:nowrap}
.cartel-que{display:block; font-family:var(--titular); font-size:clamp(2.2rem,5vw,4.2rem); line-height:.95; text-transform:uppercase; margin:0 0 1.1rem;
transition:color .2s ease}
.cartel-pie{display:flex; gap:.6rem 2rem; align-items:baseline; flex-wrap:wrap; font-family:var(--texto); font-size:13px; font-weight:700;
letter-spacing:.16em; text-transform:uppercase}
.cartel-pie b{font-family:var(--titular); font-weight:400; font-size:2rem; letter-spacing:0; color:var(--vino)}
.cartel-cta{color:var(--vino)}
.cartel-mes:hover .cartel-que, .cartel-mes:focus-visible .cartel-que{color:var(--vino)}
@media (max-width:760px){
.cartel-mes{grid-template-columns:1fr; gap:1rem; padding:1.4rem 0 1.2rem}
.cartel-cuando{flex-direction:row; align-items:baseline; gap:1rem}
.cartel-num{font-size:5rem}
.cartel-sem{margin-top:0}
.cartel-que{font-size:2.2rem}
}
/* 2026-10-17 (Antonio): el menú del móvil también en la letra de Jugo (lista desplegable y los dos botones de la cabecera) */
@media (max-width:1180px){
.con-menu .bar nav a{font-family:var(--titular); font-weight:400; font-size:1.55rem; letter-spacing:.03em; line-height:1.15;
-webkit-text-stroke:.012em currentColor; paint-order:stroke fill}
.reservar-movil, .menu-btn{font-family:var(--titular); font-weight:400; font-size:1.05rem; letter-spacing:.03em; line-height:1.1}
.menu-btn{min-width:0}
}
/* 2026-10-17 (Gaby, por Antonio): ocho parejas de colores «arriesgadas» para probar, en el selector del borde izquierdo.
Fondo claro poco habitual + acento oscuro del lado opuesto del círculo. Todas pasan el contraste AA (texto 4,5:1).
Cuando Gaby elija, se quitan las que sobren (botones .duo de cada página y estas reglas). */
body.chicle{--fondo:#FFC6DD; --vino:#0E5A3A; --tinta:#141210} /* Rosa chicle y verde botella */
body.limon{--fondo:#F4EE8C; --vino:#4A1E6B; --tinta:#141210} /* Amarillo limón y berenjena */
body.celeste{--fondo:#CFE6F6; --vino:#A63D16; --tinta:#141210} /* Celeste y teja */
body.pistacho{--fondo:#DCEBAE; --vino:#9C0F57; --tinta:#141210} /* Pistacho y fucsia */
body.lila{--fondo:#E2D3F6; --vino:#B3241A; --tinta:#141210} /* Lila y rojo tomate */
body.melocoton{--fondo:#FFD2A6; --vino:#1E3DA6; --tinta:#141210} /* Melocotón y azul cobalto */
body.menta{--fondo:#C9F0DE; --vino:#5B1F8C; --tinta:#141210} /* Menta y púrpura */
body.mostaza{--fondo:#F3D877; --vino:#0F4C5C; --tinta:#141210} /* Mostaza y azul petróleo */
.paleta .duos{display:flex; flex-direction:column; align-items:center; gap:.75rem; padding-top:1.1rem; border-top:1px solid var(--linea)}
.paleta button.duo{gap:0}
.paleta .duo .muestra, .paleta button.duo[aria-pressed="true"] .muestra{width:15px; height:15px; border:1px solid var(--tinta);
background:linear-gradient(135deg,var(--m1) 50%,var(--m2) 50%)}
.paleta button.duo[aria-pressed="true"] .muestra{outline:2px solid var(--tinta); outline-offset:2px}
.paleta button.duo:hover .muestra{transform:rotate(180deg) scale(1.2)}
@media (max-width:980px){
.paleta{flex-wrap:wrap; row-gap:.55rem}
.paleta .duos{flex-direction:row; flex-basis:100%; justify-content:center; gap:1rem; padding-top:.55rem}
.paleta button.duo:hover .muestra{transform:scale(1.2)}
}
/* el mono del móvil: con estas parejas, su silueta se rellena del color del fondo que toque */
@media (max-width:980px){
body:is(.chicle,.limon,.celeste,.pistacho,.lila,.melocoton,.menta,.mostaza) .mono-flotante{
background-image:none; background-color:var(--fondo);
-webkit-mask:url(mono-fondo-rosa.png) center/100% 100% no-repeat; mask:url(mono-fondo-rosa.png) center/100% 100% no-repeat}
}
/* 2026-10-17 (Antonio): menú del móvil con la letra algo más pequeña */
@media (max-width:1180px){
.con-menu .bar nav a{font-size:1.25rem}
.reservar-movil, .menu-btn{font-size:.95rem}
}
/* las parejas en la barra de abajo (de 1470 px hacia abajo): en la misma fila, separadas por una raya; en móvil, segunda fila */
@media (max-width:1470px){
.paleta .duos{flex-direction:row; gap:1rem; padding:0 0 0 1.6rem; border-top:0; border-left:1px solid var(--linea)}
.paleta button.duo:hover .muestra{transform:scale(1.2)}
}
@media (max-width:980px){
.paleta .duos{flex-basis:100%; justify-content:center; padding:.55rem 0 0; border-left:0; border-top:1px solid var(--linea)}
body{padding-bottom:5rem}
}
/* 2026-10-17 (Antonio): en móvil la franja de idiomas desaparece de arriba y ESP · ENG pasa a la primera línea del menú desplegado */
@media (max-width:1180px){
html.con-menu .franja-idioma{display:none}
.con-menu .bar{position:relative}
.con-menu header.abierto .bar .idiomas{display:flex; position:absolute; right:16px; top:calc(100% + .55rem); z-index:51; gap:.4rem;
font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.con-menu header.abierto .bar .idiomas a{opacity:1; color:inherit; text-decoration:underline; text-underline-offset:4px}
.con-menu header.abierto .bar .idiomas a[href="#"]:not([aria-current]), .con-menu header.abierto .bar .idiomas a:not([aria-current]){opacity:.5}
.con-menu header.abierto .bar nav{padding-top:2.4rem}
}
/* 2026-10-17 (Antonio): menú del móvil en dos columnas; «Copas y tapas» ocupa la fila entera de arriba */
@media (max-width:1180px){
.con-menu header.abierto .bar nav{display:grid; grid-template-columns:1fr 1fr; column-gap:1.4rem}
.con-menu .bar nav a.puerta-nav{grid-column:1 / -1}
}
/* 2026-10-17: dos parejas con acento neón (fondo neutro claro; el neón solo en el segundo color) */
body.neonlima{--fondo:#FFFDF2; --vino:#1B2BFF; --tinta:#141210} /* Marfil y azul eléctrico */
body.neonnaranja{--fondo:#FBF8F3; --vino:#D6006F; --tinta:#141210} /* Blanco roto y magenta neón */
@media (max-width:980px){
body:is(.neonlima,.neonnaranja) .mono-flotante{background-image:none; background-color:var(--fondo);
-webkit-mask:url(mono-fondo-rosa.png) center/100% 100% no-repeat; mask:url(mono-fondo-rosa.png) center/100% 100% no-repeat}
}
/* 2026-10-17 (Antonio): menú del móvil a todo el ancho, sin rayas, cinco y cinco en dos columnas con los textos centrados */
@media (max-width:1180px){
.con-menu header.abierto .bar nav{grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,auto); grid-auto-flow:column; column-gap:0;
padding-left:0; padding-right:0; border-bottom:0}
.con-menu .bar nav a, .con-menu .bar nav a.puerta-nav{grid-column:auto; border-bottom:0; text-align:center; justify-self:stretch}
.con-menu .bar nav a.puerta-nav{display:block}
.con-menu .bar nav a.puerta-nav .sello-dib{display:none}
.con-menu .bar nav a.puerta-nav .sello-texto{display:inline; font:inherit; letter-spacing:inherit}
.con-menu .bar nav a.puerta-nav .sello-texto span{display:inline}
}
@media (max-width:1180px){ .con-menu .bar{position:static} } /* el menú desplegado se ancla a la cabecera, que ocupa todo el ancho */
/* 2026-10-17 (Antonio): en móvil ESP · ENG va fijo debajo de «Reservar» y «Menú», como en ordenador, siempre visible y sin hueco de más;
el menú desplegado ya no reserva una línea para los idiomas y la raya de la cabecera se mantiene. */
@media (max-width:1180px){
.con-menu .bar{padding-bottom:1.55rem}
.con-menu .bar .idiomas, .con-menu header.abierto .bar .idiomas{display:flex; position:absolute; right:16px; left:auto; top:auto; bottom:.3rem; z-index:3;
gap:.4rem; font-family:var(--texto); font-size:13px; line-height:1; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.con-menu .bar .idiomas a{color:inherit; text-decoration:none; opacity:.45}
.con-menu .bar .idiomas a[aria-current]{opacity:1; text-decoration:underline; text-underline-offset:4px}
.con-menu header.abierto .bar nav{padding-top:.4rem}
.con-menu header{border-bottom:1px solid var(--linea)}
}
/* 2026-10-17 (Antonio): idiomas del móvil más cerca de los botones; sin subrayado al pasar el ratón */
@media (max-width:1180px){
.con-menu .bar{padding-bottom:1.2rem}
.con-menu .bar .idiomas, .con-menu header.abierto .bar .idiomas{bottom:.12rem}
}
.idiomas a:hover, .idiomas a:focus-visible{text-decoration:none !important}
/* 2026-10-17 (Antonio): idiomas del móvil casi pegados a los botones y sin ningún subrayado (el idioma activo se distingue por el tono) */
@media (max-width:1180px){
.con-menu .bar{padding-bottom:.95rem}
.con-menu .bar .idiomas, .con-menu header.abierto .bar .idiomas{bottom:.18rem}
.con-menu .bar .idiomas a, .con-menu .bar .idiomas a[aria-current], .con-menu header.abierto .bar .idiomas a{text-decoration:none}
}
@media (max-width:1180px){ .con-menu .bar{padding-bottom:.45rem} }
/* 2026-10-17 (Antonio): el relleno del mono, cuando se superpone al texto (hasta 1470 px), es ahora su silueta completa en vector
(cuerpo, melena, brocheta y cola), con el color de fondo de la pareja elegida. Sustituye a los tres PNG mono-fondo-*.png. */
@media (max-width:1470px){
body[class] .mono-flotante, body.verde .mono-flotante, body.blanco .mono-flotante{
background-image:none; background-color:var(--fondo);
-webkit-mask:url(mono-silueta.svg) center/100% 100% no-repeat; mask:url(mono-silueta.svg) center/100% 100% no-repeat}
}
/* 2026-10-17 (Antonio): foto nueva de la portada (vertical): se recorta a 4:3 centrada en la mesa y la estantería */
.hero .foto-hero img{object-position:50% 66%}
/* 2026-10-17 (Antonio): la foto de la portada va en vertical (4:5). En ordenador ocupa la columna derecha entera
y las dos cajas «Hoy mismo / Con tiempo» se apilan a la izquierda, bajo el titular. */
.hero .foto-hero{aspect-ratio:4/5}
.hero .foto-hero img{object-position:50% 50%}
@media (min-width:1181px){
.hero{grid-template-areas:"texto foto" "puertas foto"; grid-template-rows:auto 1fr; align-items:start}
.hero > .caminos-portada{grid-template-columns:1fr; gap:1rem; margin:0; align-self:start}
.hero > .foto-hero{grid-area:foto; align-self:start}
}
@media (max-width:1180px){
.hero .foto-hero{width:min(100%,420px)}
}
@media (min-width:1181px){
.hero > .foto-hero{aspect-ratio:auto; align-self:stretch; min-height:0} /* la foto llega hasta el pie de la segunda caja */
.hero > .foto-hero img{position:absolute; inset:0}
.hero > .foto-hero{position:relative}
}
/* 2026-10-17 (Antonio): cajas «Hoy mismo / Con tiempo» algo más pequeñas, con la misma proporción, y aire entre ellas y la foto */
@media (min-width:1181px){
.hero{column-gap:4rem}
.hero > .caminos-portada{zoom:.88}
}
/* 2026-10-17 (Antonio): la foto de la portada, del mismo tamaño que la vertical de «Esto empezó siendo una tienda…» */
@media (min-width:1181px){
.hero{grid-template-columns:minmax(0,1fr) auto}
.hero > .foto-hero{position:static; align-self:start; justify-self:end; aspect-ratio:3/4; width:auto; height:var(--f-vertical)}
.hero > .foto-hero img{position:static; inset:auto; width:100%; height:100%}
.hero > .caminos-portada{zoom:1; max-width:33rem}
}
/* 2026-10-17 (Antonio): al abrir la página tienen que verse la foto y las dos cajas. En ordenador las cajas van una al lado de la otra
bajo el titular, a la izquierda de la foto. */
@media (min-width:1181px){
.hero{padding-top:1.4rem; row-gap:1.2rem}
.hero > .caminos-portada{grid-template-columns:1fr 1fr; gap:1rem; max-width:none; margin:0}
.hero > .caminos-portada .camino{padding:.95rem 1.1rem .8rem}
.hero > .caminos-portada .camino-nom{font-size:1.3rem}
.hero > .caminos-portada .camino-dicho{font-size:13px; line-height:1.55}
.hero h1{margin-bottom:.9rem}
.hero .lema{margin-bottom:.9rem}
}
/* 2026-10-17 (Antonio): en móvil el mono, anclado al mismo sitio (asomando por el borde derecho) pero más grande */
@media (max-width:980px){
.mono-flotante{width:104px; right:-62px}
}
/* 2026-10-17 (Antonio): cajas más arriba y foto recortada por abajo, para que en pantallas de ~680 px de alto se vea todo al abrir */
@media (min-width:1181px){
.hero h1{font-size:clamp(2.3rem,3.7vw,3rem); line-height:1.02; margin-bottom:.7rem}
.hero .lema{font-size:.95rem; line-height:1.7; margin-bottom:.4rem}
.hero{row-gap:.8rem; padding-top:1rem}
.hero > .foto-hero{height:470px}
.hero > .foto-hero img{object-position:50% 20%}
}
/* 2026-10-17 (Antonio): el mapa de «El barrio a pie» deja de quedarse fijo mientras se baja por la lista de paradas */
.vuelta .mapa{position:static}
/* 2026-10-17 (Antonio): la foto de la portada vuelve a ser como la vertical de abajo (420 × 560, sin recorte inferior) y las cajas
se hacen más pequeñas para que quepan junto a ella al abrir. */
@media (min-width:1181px){
.hero > .foto-hero{height:var(--f-vertical)}
.hero > .foto-hero img{object-position:50% 50%}
.hero > .caminos-portada{zoom:.84}
.hero > .caminos-portada .camino{padding:.8rem 1rem .7rem}
}
/* 2026-10-17 (Antonio): la foto de la portada se recorta por arriba (se pierde parte del techo y las luces), 420 × 500 */
@media (min-width:1181px){
.hero > .foto-hero{height:500px}
.hero > .foto-hero img{object-position:50% 100%}
}
/* 2026-10-17 (Antonio): cajas de la portada otra vez a tamaño completo (más altas, letra grande); la foto, recortada, cabe a su lado */
@media (min-width:1181px){
.hero > .caminos-portada{zoom:1}
.hero > .caminos-portada .camino{padding:1.15rem 1.3rem 1rem}
.hero > .caminos-portada .camino-nom{font-size:1.5rem}
.hero > .caminos-portada .camino-dicho{font-size:14px; line-height:1.65}
}
/* 2026-10-17 (Antonio): foto como la de abajo (420 × 560); cajas algo más estrechas y un poco más altas */
@media (min-width:1181px){
.hero > .foto-hero{height:var(--f-vertical)}
.hero > .foto-hero img{object-position:50% 50%}
.hero > .caminos-portada{max-width:43rem}
.hero > .caminos-portada .camino{padding:1.35rem 1.3rem 1.25rem}
}
/* 2026-10-17 (Antonio): «El barrio a pie»: sin la ilustración de la plaza; la rueda de los cinco paseos ocupa su sitio, a la derecha del titular,
y todo lo de abajo sube. */
.portadilla-ruta .flor-nav{margin:0; flex:0 0 auto; width:clamp(240px,27vw,360px)}
.portadilla-ruta .flor-nav .flor{width:100%}
@media (max-width:1099px){ .portadilla-ruta .flor-nav{width:min(100%,320px); margin:0 auto} }
/* 2026-10-17 (Antonio): la foto de la portada, recortada por arriba para que suba su borde inferior (420 × 520, enfocada abajo) */
@media (min-width:1181px){
.hero > .foto-hero{height:520px; margin-top:0}
.hero > .foto-hero img{object-position:50% 100%}
}
/* recorte de verdad: la foto conserva el tamaño de la de 560 px y se corta por arriba (no se reduce) */
@media (min-width:1181px){
.hero > .foto-hero{position:relative; overflow:hidden}
.hero > .foto-hero img{position:absolute; left:50%; bottom:0; top:auto; width:auto; height:var(--f-vertical); max-width:none; transform:translateX(-50%); object-fit:initial}
}
@media (min-width:1181px){ .hero > .foto-hero{aspect-ratio:auto; width:420px} } /* mismo ancho que la de abajo: solo cambia el alto */
/* 2026-10-17 (Antonio): la rueda, centrada en el espacio libre a la derecha del texto (no pegada al borde) */
@media (min-width:1100px){
.portadilla-ruta .flor-nav{flex:1 1 auto; width:auto; display:flex; justify-content:center}
.portadilla-ruta .flor-nav .flor{width:clamp(240px,27vw,360px); flex:0 0 auto}
}
@media (min-width:1100px){ .portadilla-ruta .flor-nav{padding-right:clamp(60px,8vw,150px)} } /* y la rueda algo más hacia el centro de la página */
@media (min-width:1100px){ .portadilla-ruta > .portadilla-texto{flex:0 0 min(570px,46%)} } /* el texto no se estrecha al desplazar la rueda */
/* la rueda, mucho más cerca del texto: pegada a su izquierda con un hueco fijo (Antonio, «la veo casi igual») */
@media (min-width:1100px){
.portadilla-ruta .flor-nav{justify-content:flex-start; padding-right:0; padding-left:clamp(80px,9vw,170px)}
}
/* rueda y texto más juntos: texto de 480 px y la rueda justo a su lado (Antonio: «ahora la has alejado») */
@media (min-width:1100px){
.portadilla-ruta > .portadilla-texto{flex:0 0 min(480px,42%)}
.portadilla-ruta .flor-nav{padding-left:12px; padding-right:0; justify-content:flex-start}
}
/* más cerca todavía: menos hueco entre el texto y la rueda (Antonio: «sigue lejos») */
@media (min-width:1100px){
.portadilla-ruta{gap:1rem}
.portadilla-ruta .flor-nav{padding-left:0; margin-left:-2.5rem}
}
/* 2026-10-17 (Antonio): JUGO un poco más pequeño (antes clamp(3.6rem,6.6vw,5.6rem)) */
.marca .nombre{font-size:clamp(3.2rem,5.9vw,4.9rem)}
@media (max-width:980px){ .marca .nombre{font-size:2.05rem} }
@media (max-width:760px){ .marca .nombre{font-size:3.1rem} }
/* 2026-10-17 (Antonio): con el menú del móvil desplegado se mantiene la raya de la cabecera (el menú empezaba 1 px más arriba y la tapaba) */
@media (max-width:1180px){
.con-menu header.abierto .bar nav{margin-top:1px; border-top:1px solid var(--linea)}
}
/* una sola raya: la de la cabecera. El menú desplegado empieza justo debajo de ella, sin raya propia ni hueco */
@media (max-width:1180px){
.con-menu header.abierto .bar nav{margin-top:0; border-top:0; top:calc(100% + 1px)}
}
/* 2026-10-17 (Antonio): la cita de Gaby de Mesas empieza justo donde empieza la segunda columna (la de los textos de los bloques) */
@media (min-width:1181px){
.voz-gabi{width:calc((100% - clamp(2rem,4vw,3.5rem)) / 2); margin-left:clamp(2rem,4vw,3.5rem)}
}
@media (min-width:1181px){ .voz-gabi{margin-top:4.7rem} } /* la cita empieza bajo el titular, para que este no se parta en dos líneas */
/* Mesas, ordenador: la cita de Gaby va en su sitio (la segunda columna), debajo del titular y sin partirlo; el epígrafe ocupa la primera columna */
@media (min-width:1181px){
.portadilla:has(> .voz-gabi){position:relative; min-height:23rem}
.portadilla > .voz-gabi{position:absolute; float:none; right:0; top:11.5rem; margin:0; width:calc((100% - clamp(2rem,4vw,3.5rem)) / 2)}
.portadilla:has(> .voz-gabi) > .epigrafe{max-width:calc((100% - clamp(2rem,4vw,3.5rem)) / 2)}
}
@media (min-width:1181px){ .portadilla:has(> .voz-gabi){min-height:21rem} }
/* 2026-10-17 (Antonio): Mesas, ordenador: «Comidas y cenas / privadas» en dos líneas en la primera columna, el epígrafe debajo y la cita
en la segunda columna desde la altura del titular; la página sube. */
@media (min-width:1181px){
.portadilla:has(> .voz-gabi){display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,4vw,3.5rem);
grid-template-rows:auto auto 1fr; align-items:start; min-height:0}
.portadilla:has(> .voz-gabi) > .volver{grid-column:1 / -1; grid-row:1}
.portadilla:has(> .voz-gabi) > h1{grid-column:1; grid-row:2; max-width:none}
.portadilla:has(> .voz-gabi) > .epigrafe{grid-column:1; grid-row:3; max-width:none}
.portadilla > .voz-gabi{position:static; grid-column:2; grid-row:2 / span 2; width:auto; margin:.6rem 0 0}
}
.como-llegar{margin:0 0 -.4rem}
/* 2026-10-17 (Antonio): foto nueva de «Pasa sin llamar» (vertical 4:5) en lugar del plato de conservas */
.foto-portadilla.foto-portadilla-v{aspect-ratio:4/5; flex:0 0 clamp(240px,24vw,360px)}
.foto-portadilla.foto-portadilla-v img{object-position:50% 40%}
@media (max-width:1099px){ .foto-portadilla.foto-portadilla-v{width:min(100%,320px); flex:none} }
/* 2026-10-17 (Antonio): «Cómo llegar a Jugo» sin subrayado; al pasar por encima, el gesto de la casa (2 px arriba y a la izquierda) y el texto pasa a vino */
.como-llegar a{display:inline-flex; align-items:center; gap:.5em; color:var(--tinta); font-weight:700; text-decoration:none !important;
transition:transform .18s ease, color .18s ease}
.como-llegar a span{text-decoration:none}
.como-llegar a .ico{margin:0; width:1.3em; height:1.3em; vertical-align:0}
.como-llegar a:hover, .como-llegar a:focus-visible{transform:translate(-2px,-2px); color:var(--vino); text-decoration:none !important}
/* 2026-10-17 (Antonio): el menú del móvil con el mismo hover que el de ordenador (la marca inclinada bajo la palabra);
también al tocar (:active) y al enfocar. Cada enlace ocupa solo lo que mide su palabra, para que la marca no se estire a toda la columna. */
@media (max-width:1180px){
.con-menu .bar nav a:not(.destacado-nav){justify-self:center; width:fit-content; padding:.5rem .1rem}
.con-menu .bar nav a::after{bottom:.42rem; left:-.35rem; right:-.35rem}
.con-menu .bar nav a:hover::after, .con-menu .bar nav a:focus-visible::after, .con-menu .bar nav a:active::after{opacity:.35; transform:scaleX(1) skewX(-8deg)}
}
/* 2026-10-17 (Antonio): en cada vuelta, el texto de datos («2,7 km · 36 min andando…») va como sublínea del titular,
a la derecha de la flor y bajo el nombre. */
.vuelta-cab{display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center}
.vuelta-cab .vuelta-titulo{display:contents}
.vuelta-cab .flor-mini{grid-column:1; grid-row:1 / span 2}
.vuelta-cab .vuelta-titulo .display{grid-column:2; grid-row:1; align-self:end; margin:0 0 .2rem}
.vuelta-cab .vuelta-datos{grid-column:2; grid-row:2; align-self:start}
/* 2026-10-17 (Antonio): la cita de Gaby, un poco más grande para que se lea mejor (1,02 → 1,25 rem) */
.voz-gabi p{font-size:1.25rem; line-height:1.14}
/* 2026-10-17 (Antonio): tarjeta «Nuestras joyas» en el hueco de la cabecera de Copas y tapas, igual que las de la portada */
.portadilla-texto .camino-joyas{margin-top:1.6rem; max-width:26rem}
.portadilla-texto .camino-joyas .camino-pie{text-transform:none; letter-spacing:.06em; font-size:13px}
/* 2026-10-17 (Antonio): «Lo que hay» y Copas en el hueco de la cabecera de Copas y tapas, a la izquierda de la foto; las tres copas, apiladas.
La tarjeta «Nuestras joyas» ocupa el sitio de Copas al principio de la carta. */
.hero-carta{margin-top:1.4rem}
.hero-carta h2.display{font-size:clamp(1.8rem,3vw,2.4rem); margin:0 0 .8rem}
.hero-carta .familia{margin:0}
.hero-carta .rejilla-chica{grid-template-columns:1fr; gap:.55rem}
.hero-carta .ficha-chica{padding:.7rem 1rem .6rem}
.hero-carta .ficha-chica .nombre{font-size:1.15rem; margin-bottom:.15rem}
.hero-carta .ficha-chica .cifra-ficha{font-size:1.6rem}
.hero-carta .ficha-chica .desc{font-size:13px; line-height:1.5}
.familia-joyas .camino-joyas{margin:0; max-width:none}
/* las tres copas, una al lado de otra y compactas, para que la cabecera no crezca más que la foto */
@media (min-width:1181px){
.hero-carta .rejilla-chica{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem}
.hero-carta .ficha-chica{padding:.6rem .7rem .55rem}
.hero-carta .ficha-chica .nombre{font-size:.98rem; line-height:1.1}
.hero-carta .ficha-chica .cifra-ficha{font-size:1.35rem}
.hero-carta .ficha-chica .desc{font-size:13px; line-height:1.4}
.hero-carta{margin-top:1rem}
.hero-carta h2.display{margin-bottom:.5rem}
}
@media (min-width:1100px){ .portadilla-texto:has(.hero-carta){flex:1 1 0; min-width:0; max-width:640px} }
.familia-joyas .camino-joyas{max-width:40rem} /* la tarjeta de joyas, sin estirarse a todo el ancho */
/* hero: las dos copas ocupan el ancho del texto; la familia Vinos (joyas + botella) en dos columnas */
@media (min-width:1181px){ .hero-carta .rejilla-chica{grid-template-columns:repeat(2,minmax(0,1fr))} }
.familia .rejilla-chica .camino-joyas{max-width:none; height:100%}
.seccion-carta .familia .rejilla-chica{align-items:stretch}
.seccion-carta .familia .rejilla-chica .camino-joyas{height:auto; align-self:stretch; justify-content:center}
.seccion-carta .familia .rejilla-chica .camino-joyas{height:100%; min-height:100%; box-sizing:border-box}
.seccion-carta .familia .rejilla-chica .camino-joyas{grid-row:span 3; height:auto; min-height:0} /* ocupa las tres filas de la rejilla, como la ficha de al lado */
/* 2026-10-17 (Antonio): las copas de la cabecera y «Nuestras joyas»/Degustaciones con los mismos estilos de texto y la misma disposición */
.hero-carta .ficha-chica{padding:revert-layer}
.hero-carta .ficha-chica .nombre{font-size:1.5rem; line-height:1.1; margin-bottom:.7rem}
.hero-carta .ficha-chica .cifra-ficha, .hero-carta .ficha-chica .cifra-ficha.texto{font-size:2.1rem}
.hero-carta .ficha-chica .desc{font-size:14px; line-height:inherit}
.hero-carta .rejilla-chica{gap:inherit}
@media (min-width:1181px){
.hero-carta .rejilla-chica{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.hero-carta .ficha-chica{padding:1rem 1.1rem 1.1rem}
}
/* 2026-10-17 (Antonio): la ficha de las puertas de la portada llevaba la raya de arriba continua y el resto punteado; ahora todo punteado, como las demás fichas */
.puerta .ficha{border-top:1px dashed var(--vino); padding:1rem 1.1rem 1.1rem}
/* 2026-10-17 (Antonio): «Pasa sin llamar»: la etiqueta «Hoy mismo» junto al título (no en línea aparte) y «Ven a sentarte a nuestra mesa.» como su subtítulo,
con lo de debajo más arriba. */
.portadilla-texto:has(> .chip-cuando){display:flex; flex-wrap:wrap; align-items:center; column-gap:1rem}
.portadilla-texto:has(> .chip-cuando) > .volver{flex:0 0 100%}
.portadilla-texto:has(> .chip-cuando) > h1{flex:0 1 auto; margin:0}
.portadilla-texto:has(> .chip-cuando) > .chip-cuando{flex:0 0 auto; margin:0}
.portadilla-texto:has(> .chip-cuando) > .epigrafe{flex:0 0 100%; margin:.25rem 0 0}
.portadilla-texto:has(> .chip-cuando) > .entradilla{flex:0 0 100%; margin:.6rem 0 0}
.portadilla-texto:has(> .chip-cuando) > .hero-carta{flex:0 0 100%; margin-top:.9rem}
/* 2026-10-17 (Antonio): «Lo planeamos juntos» (Reservar) igual que «Pasa sin llamar»: etiqueta junto al título y la frase de debajo como subtítulo */
.portadilla:has(> .chip-cuando){display:flex; flex-wrap:wrap; align-items:center; column-gap:1rem}
.portadilla:has(> .chip-cuando) > .volver{flex:0 0 100%}
.portadilla:has(> .chip-cuando) > h1{flex:0 1 auto; margin:0}
.portadilla:has(> .chip-cuando) > .chip-cuando{flex:0 0 auto; margin:0}
.portadilla:has(> .chip-cuando) > .epigrafe{flex:0 0 100%; margin:.25rem 0 0; max-width:none}
.portadilla:has(> .chip-cuando) > .intro{flex:0 0 100%; margin:.6rem 0 0}
/* 2026-10-17 (Antonio): en «Pasa sin llamar» la foto crece hacia abajo y hacia la derecha: llega al borde derecho del contenido
(el de las fichas de debajo) y baja hasta el pie de las copas. */
@media (min-width:1100px){
.portadilla-fila:has(.foto-portadilla-v){align-items:stretch}
.foto-portadilla.foto-portadilla-v{position:relative; flex:1 1 0; min-width:0; aspect-ratio:auto; align-self:stretch; width:auto}
.foto-portadilla.foto-portadilla-v img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
}
@media (min-width:1100px){ .portadilla-texto:has(.hero-carta){flex:0 0 640px; max-width:640px} } /* el texto y las copas conservan su ancho; la foto ocupa el resto */
/* 2026-10-17 (Antonio): la foto de «Pasa sin llamar» crece SIN recortarse (misma proporción 4:5) hasta que su borde inferior coincide con el pie de las copas;
el ancho sale de la proporción, no del borde derecho. */
@media (min-width:1100px){
.foto-portadilla.foto-portadilla-v{flex:0 0 auto; width:auto; aspect-ratio:4/5; align-self:stretch}
.foto-portadilla.foto-portadilla-v img{object-fit:cover; object-position:50% 50%}
}
@media (min-width:1100px){
.foto-portadilla.foto-portadilla-v{display:flex; aspect-ratio:auto; width:auto; overflow:hidden}
.foto-portadilla.foto-portadilla-v img{position:static; inset:auto; height:100%; width:auto; max-width:none; flex:none; object-fit:fill}
}
/* la foto: sin contar para la altura de la fila (imagen absoluta); su ancho lo fija un pequeño guion de la página (proporción 4:5) */
@media (min-width:1100px){
.foto-portadilla.foto-portadilla-v{display:block; position:relative; flex:0 0 auto; aspect-ratio:auto; align-self:stretch; overflow:hidden}
.foto-portadilla.foto-portadilla-v img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%}
}
/* 2026-10-17 (Antonio): enlace «Nuestras bodegas →» en azul (el acento) bajo «Nuestros vinos», a la derecha; sin subrayado, con el gesto de la casa al pasar el ratón */
.enlace-bodegas{margin:.2rem 0 0; text-align:right}
.enlace-bodegas a{display:inline-flex; align-items:center; gap:.5em; color:var(--vino); font-weight:700; text-decoration:none !important; transition:transform .18s ease}
.enlace-bodegas a span{text-decoration:none}
.enlace-bodegas a:hover, .enlace-bodegas a:focus-visible{transform:translate(-2px,-2px)}
/* 2026-10-17 (Antonio): la foto de la cena de Mesas sube y se desplaza a la derecha, con el mismo tamaño y proporción,
para ocupar parte del espacio en blanco que queda bajo el título (sin tocar el texto). Solo en ordenador. */
@media (min-width:1181px){
.bloque .foto.foto-sube{transform:translate(2.5rem,-2.8rem) !important}
}
.enlace-bodegas{max-width:none; width:100%; margin-top:.8rem} /* a la derecha del todo, bajo la ficha de la botella (la zona marcada por Antonio) */
.seccion-carta p.enlace.enlace-bodegas{max-width:none !important; width:100%}
/* 2026-10-17 (Antonio, corrección): la foto de la cena de Mesas CRECE (8 %, misma proporción) anclada abajo a la izquierda,
así que su borde superior sube y el derecho se abre, sin desplazarse. Sustituye al desplazamiento anterior. */
@media (min-width:1181px){
.bloque .foto.foto-sube{transform:scale(1.08) !important; transform-origin:0 100% !important}
}
/* 2026-10-17 (Antonio): la frase «¡Te la abrimos aquí si prefieres quedarte!» con carácter, en el color de acento */
.ficha .desc em.abrimos{display:block; margin-top:.35rem; font-style:normal; font-family:var(--titular); font-size:1.15rem; line-height:1.1; letter-spacing:.02em; color:var(--vino)}
/* 2026-10-17 (Antonio): una reseña real que rota, bajo los sellos de la portada */
#resena-rota{display:block; margin-top:1.8rem; text-align:center}
.resena{margin:0 auto; max-width:46ch}
.resena p{font-family:var(--titular); font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.05; margin:0 0 .6rem; text-transform:uppercase}
.resena a{font-size:13px; letter-spacing:.04em; text-decoration:none; color:var(--vino)}
.resena a{display:inline-block; transition:transform .15s}
.resena a:hover{text-decoration:none; transform:translate(-2px,-2px)}
/* 2026-10-18 (Antonio): una reseña que toca, antes del cierre de cada página */
.resena-pagina{padding:1.5rem 0 .5rem}
.resena-pagina #resena-rota{margin-top:0}
.resena-pagina .resena p{font-size:clamp(1.3rem,2.4vw,1.7rem)}
/* 2026-10-18 (Antonio): las reseñas se alternan solas, con fundido; la altura se reserva para que no salte la página */
.resena{transition:opacity .45s ease}
.resena.sale{opacity:0}
#resena-rota{min-height:11rem}
.resena-pagina #resena-rota{min-height:9rem}
/* 2026-10-18 (Antonio): ningún hover subraya. Un solo gesto para todo enlace de texto: sube 2 px y 2 a la izquierda, sin subrayado. */
footer a, .nota-mesa a, .proxima a, .franja-idioma .franja-puerta, .franja-idioma .franja-lang a,
.intro a.sale, .vuelta .aqui-paras a, .barrio-enlace .directo a, .enlace-flecha, .resena a{display:inline-block; transition:transform .15s, color .15s}
footer a:hover, .nota-mesa a:hover, .proxima a:hover, .franja-idioma .franja-puerta:hover, .franja-idioma .franja-lang a:hover,
.intro a.sale:hover, .vuelta .aqui-paras a:hover, .barrio-enlace .directo a:hover, .enlace-flecha:hover, .resena a:hover{
text-decoration:none; transform:translate(-2px,-2px)}
a:hover{text-decoration:none}
/* 2026-10-18 (Antonio): sello de prensa propio, con su cita, aparte de las reseñas que rotan */
.avales .sello-prensa{display:grid; grid-template-rows:auto auto auto; max-width:30rem; width:100%; transform:rotate(.6deg)}
.avales .sello-prensa:hover{transform:rotate(0) translateY(-2px); box-shadow:3px 3px 0 var(--tinta)}
.sello .cita-sello{font-family:var(--titular); font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.05; text-transform:uppercase}
.avales .wrap + .wrap{margin-top:1.6rem}
/* 2026-10-18 (Antonio): dos sellos de prensa (The Guardian, Decanter), uno junto al otro */
.avales .wrap:has(.sello-prensa){display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem}
.avales .sello-prensa{flex:1 1 20rem; width:auto}
.avales .sello-prensa + .sello-prensa{transform:rotate(-.7deg)}
.avales .sello-prensa + .sello-prensa:hover{transform:rotate(0) translateY(-2px)}
/* 2026-10-18 (Antonio): la prensa, discreta y ligera: sin caja, con una letra parecida a la de cada cabecera */
.avales .sello-prensa{background:transparent; color:var(--tinta); border:0; border-top:1px solid var(--tinta); border-radius:0;
padding:.9rem 0 0; gap:.4rem; box-shadow:none; transform:none; flex:1 1 18rem; max-width:24rem; text-align:left}
.avales .sello-prensa:hover, .avales .sello-prensa + .sello-prensa:hover{transform:translate(-2px,-2px); box-shadow:none; background:transparent; color:var(--vino)}
.avales .wrap:has(.sello-prensa){gap:2.2rem; justify-content:center}
.sello-prensa .cara{display:block}
.sello-prensa .nota{font-size:1.5rem; line-height:1}
.prensa-guardian .nota{font-family:"Playfair Display",Georgia,serif; font-weight:700; letter-spacing:-.01em}
.prensa-decanter .nota{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; letter-spacing:.32em; text-transform:uppercase; font-size:1.3rem}
.sello-prensa .cita-sello{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:500; font-size:1.15rem; line-height:1.3; text-transform:none}
.prensa-guardian .cita-sello{font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:.98rem}
.sello-prensa .pie{border-top:0; padding-top:0; font-size:13px; opacity:.7}
.avales .wrap:has(.sello-prensa){align-items:flex-start}
/* 2026-10-18 (Antonio): «Lo que dicen de nosotros» en dos columnas, ligero; lo que viene de fuera, sin la letra de Jugo */
.avales .wrap{display:block; text-align:left}
.avales .rotulo{margin:0 0 1.6rem}
.avales-cuerpo{display:grid; grid-template-columns:1fr 1.15fr; gap:3.2rem; align-items:start}
.av-sub{font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.1rem; opacity:.65}
.av-prensa{display:grid; gap:1.7rem}
.prensa-item{display:block; text-decoration:none; color:inherit}
.prensa-item .nota{display:block; margin-bottom:.35rem}
.prensa-item .cita-sello{display:block; margin-bottom:.35rem}
.prensa-item .pie{display:flex; gap:.5em; flex-wrap:wrap; font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.65}
.prensa-item:hover{color:var(--vino); transform:translate(-2px,-2px)}
.prensa-item{transition:transform .15s, color .15s}
.prensa-guardian .nota{font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:1.5rem; letter-spacing:-.01em; line-height:1}
.prensa-decanter .nota{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:1.3rem; letter-spacing:.32em; text-transform:uppercase; line-height:1}
.prensa-item .cita-sello{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:500; font-size:1.2rem; line-height:1.3; text-transform:none}
.prensa-guardian .cita-sello{font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:1rem}
/* los clientes: la reseña que rota, en serif, y debajo las notas de cada plataforma */
.av-clientes .resena{max-width:none; margin:0; text-align:left}
.resena p{font-family:"Playfair Display",Georgia,serif; font-style:italic; font-weight:500; text-transform:none; font-size:clamp(1.35rem,2.3vw,1.75rem); line-height:1.3; margin:0 0 .7rem}
.av-clientes #resena-rota{min-height:8rem; margin:0; text-align:left}
.plataformas{display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; margin:1.1rem 0 0}
.plat{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; transition:transform .15s, color .15s}
.plat:hover{color:var(--vino); transform:translate(-2px,-2px)}
.plat .nota{font-family:var(--texto); font-weight:700; font-size:1.2rem; line-height:1}
.plat .logo{height:1.15rem; width:auto; fill:currentColor}
.plat .pie{display:flex; gap:.5em; font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.75}
@media (max-width:820px){ .avales-cuerpo{grid-template-columns:1fr; gap:2rem} }
/* 2026-10-18: la salida del resumen de Reservar no cabía en móvil (desbordaba a 540 px) */
@media (max-width:820px){ .resumen .salida{flex:1 1 100%; min-width:0; text-align:left} .resumen .salida p{white-space:normal} }
/* 2026-10-18 (Antonio): la zona de precio, del mismo color en todas partes: cifra y leyenda en el acento, «Consultar» incluido */
.precio, .precio.pendiente, .tarifa .cifra, .tarifa .cifra.pendiente, .recuadro .precio b{color:var(--vino); opacity:1}
.precio small, .tarifa span{color:var(--vino); opacity:.8}
.pendiente{color:var(--vino)}
/* 2026-10-18 (Antonio): «Lo que dicen de nosotros», todo centrado: prensa en una línea, carrusel de reseñas con gancho y pastillas de Google y Tripadvisor en paralelo */
.avales .wrap{display:block; text-align:center}
.avales .rotulo{margin:0 0 2rem}
.avales .av-sub{font-family:var(--texto); font-size:1.15rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.6rem; opacity:.85}
.avales .av-prensa{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:2.5rem 5rem; margin:0 0 3.2rem}
.avales .prensa-item{flex:0 1 26rem; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start}
.avales .prensa-item .pie{justify-content:center}
.avales .prensa-guardian .nota{font-size:2.1rem}
.avales .prensa-decanter .nota{font-size:1.8rem}
.avales .prensa-item .cita-sello{font-size:1.3rem}
.avales .prensa-guardian .cita-sello{font-size:1.1rem}
.avales .prensa-item .pie{font-size:13px}
/* el carrusel */
.avales #resena-rota{min-height:12rem; margin:0 auto 1.6rem; max-width:46rem; text-align:center}
.avales .resena{max-width:none; margin:0; text-align:center}
.avales .resena .estrellas{display:block; color:var(--vino); font-size:1.5rem; letter-spacing:.35em; margin:0 0 .5rem; padding-left:.35em}
.avales .resena p{font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.25}
.avales .resena a{font-size:14px}
.avales .puntos{display:flex; justify-content:center; gap:.5rem; margin-top:1rem}
.avales .puntos button{width:9px; height:9px; padding:0; border-radius:50%; border:1.5px solid var(--vino); background:transparent; cursor:pointer}
.avales .puntos button.on{background:var(--vino)}
.avales .fila{display:flex; flex-wrap:nowrap; justify-content:center; gap:.9rem}
@media (max-width:820px){ .avales .av-prensa{gap:2rem} .avales .fila{flex-wrap:wrap} .avales .sello{width:100%} }
/* lo mismo en las demás páginas (reseña de cada tema) */
.resena .estrellas{display:block; color:var(--vino); font-size:1.2rem; letter-spacing:.35em; margin:0 0 .4rem; padding-left:.35em}
.resena-pagina .puntos{display:flex; justify-content:center; gap:.5rem; margin-top:.8rem}
.resena-pagina .puntos button{width:9px; height:9px; padding:0; border-radius:50%; border:1.5px solid var(--vino); background:transparent; cursor:pointer}
.resena-pagina .puntos button.on{background:var(--vino)}
/* 2026-10-18 (Antonio): subtítulos en etiqueta en negativo, y la prensa en una rejilla: las dos columnas alineadas fila a fila (nombre, cita, guía, fecha) */
.avales .av-sub{display:inline-block; background:var(--vino); color:var(--fondo); opacity:1; padding:.5rem 1.5rem; font-size:1.3rem; letter-spacing:.2em; margin:0 0 1.8rem}
.avales .av-prensa{display:grid; grid-template-columns:repeat(2,auto); justify-content:center; grid-template-rows:auto auto auto auto; column-gap:5rem; row-gap:.35rem}
.avales .prensa-item{display:grid; grid-row:span 4; grid-template-rows:subgrid; justify-items:center; align-items:start; flex:none}
.avales .prensa-item .pie{display:contents}
.avales .prensa-item .pie b, .avales .prensa-item .pie span{font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; text-align:center}
@media (min-width:1250px){ .avales .prensa-item .cita-sello{white-space:nowrap} }
@media (max-width:820px){ .avales .av-prensa{grid-template-columns:1fr; row-gap:.35rem} .avales .prensa-item{margin-bottom:1.6rem} .avales .av-sub{font-size:1rem; padding:.4rem 1rem; letter-spacing:.14em; white-space:normal} }
/* 2026-10-18 (Antonio): el título en una línea y grande; los subtítulos, su análogo más pequeño */
.avales .rotulo{font-size:clamp(2.2rem,5.2vw,4rem); line-height:1.05; margin:0 0 2.2rem}
@media (min-width:640px){ .avales .rotulo{white-space:nowrap} }
.avales .av-sub{font-size:.95rem; padding:.4rem 1.2rem; letter-spacing:.2em; margin:0 0 1.5rem}
@media (max-width:820px){ .avales .av-sub{font-size:.85rem; padding:.35rem .9rem} }
/* 2026-10-18: cada bloque de prensa ocupa todo su ancho (si no, el contenido se pegaba a la izquierda a partir de 412 px) */
.avales .prensa-item{grid-template-columns:1fr; width:100%}
/* 2026-10-18 (Antonio): ningún enlace sin hover. Criterio único:
- enlaces de texto sueltos (flecha, cierre, avisos): suben 2 px y a la izquierda, sin subrayado
- enlaces dentro de un párrafo: cambian al color de acento, sin subrayado
- menú y idiomas: color de acento
- logo, «Reservar», cartel y «Seguir»: el gesto de lo pulsable (sube 2 px y sombra maciza) */
p.enlace a, .cierre a:not(.btn), .directo a, .wrap > p > a:only-child:not(.btn), p a.enlace-suelto{display:inline-block; transition:transform .15s, color .15s}
p.enlace a:hover, .cierre a:not(.btn):hover, .directo a:hover, .wrap > p > a:only-child:not(.btn):hover{transform:translate(-2px,-2px); color:var(--vino); text-decoration:none}
main p a:not(.btn):not(.enlace-flecha):hover, main li a:not(.btn):hover{color:var(--vino) !important; text-decoration:none}
header nav a:not(.destacado-nav):not(.puerta-nav):hover, header .idiomas a:hover, .franja-idioma a:hover{color:var(--vino) !important; opacity:1; text-decoration:none}
a.marca, .reservar-movil, a.cartel-mes, a.elegido-flot{transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, color .2s ease}
a.marca:hover, a.reservar-movil:hover, a.cartel-mes:hover, a.elegido-flot:hover{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta); text-decoration:none}
a.marca:hover{box-shadow:none}
a.cartel-mes:hover .cartel-que{color:var(--vino)}
/* 2026-10-18: correcciones de hover (Antonio) */
/* el botón «Reservar» del menú: su propio gesto, sin el marcador del resto del menú y con el texto en su color */
nav a.destacado-nav::after{display:none !important}
/* botón «Menú» del móvil: el mismo gesto que «Reservar» */
.menu-btn, .reservar-movil{transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease}
.menu-btn:hover, .menu-btn:focus-visible{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--tinta)}
/* 2026-10-18 (Antonio): «Próximo evento», más pequeño y compacto, centrado y no a todo el ancho; enlace destacado a todos los eventos */
#agenda-portada{text-align:center}
#agenda-portada h2{font-size:clamp(1.8rem,3vw,2.4rem); margin:0 0 1.4rem}
#agenda-portada .cartel-mes{max-width:46rem; margin:0 auto; grid-template-columns:auto 1fr; gap:1.8rem; align-items:center; padding:1.2rem 1.4rem}
#agenda-portada .cartel-cuando{min-width:8.5rem; padding-right:1.6rem; border-right:1.5px solid var(--tinta); align-self:stretch; justify-content:center}
#agenda-portada .cartel-num{font-size:clamp(3.6rem,7vw,5.4rem)}
#agenda-portada .cartel-sem{margin-top:.6rem; font-size:12px; letter-spacing:.2em}
#agenda-portada .cartel-que{font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.05; margin:0 0 .8rem}
#agenda-portada .cartel-pie{gap:.4rem 1.4rem; font-size:13px}
#agenda-portada .cartel-pie b{font-size:1.5rem}
.agenda-todo{margin:1.6rem 0 0}
@media (max-width:640px){
#agenda-portada .cartel-mes{grid-template-columns:1fr; text-align:center; gap:.6rem}
#agenda-portada .cartel-cuando{border-right:0; border-bottom:1.5px solid var(--tinta); padding:0 0 .6rem; flex-direction:row; gap:.9rem; justify-content:center}
#agenda-portada .cartel-pie{justify-content:center}
}
.agenda-todo{text-align:center}
.agenda-todo{max-width:none; margin-left:auto; margin-right:auto}
/* 2026-10-18 (Antonio): el botón de próximos eventos, más discreto y con un hover sencillo (sin sombra ni desplazamiento); el cartel, también sin sombra */
a.cartel-mes:hover{transform:none; box-shadow:none}
/* 2026-10-18 (Antonio): hover del cartel más llamativo pero sin la sombra maciza: se tiñe de acento (filetes, fecha y título), con un fondo suave y 2 px de elevación */
a.cartel-mes{transition:transform .2s ease, background-color .2s ease, border-color .2s ease}
a.cartel-mes .cartel-num, a.cartel-mes .cartel-sem, a.cartel-mes .cartel-que{transition:color .2s ease}
a.cartel-mes:hover, a.cartel-mes:focus-visible{transform:translateY(-2px); box-shadow:none; background-color:color-mix(in srgb, var(--vino) 9%, transparent); border-top-color:var(--vino); border-bottom-color:var(--vino)}
a.cartel-mes:hover .cartel-num, a.cartel-mes:hover .cartel-sem, a.cartel-mes:hover .cartel-que,
a.cartel-mes:focus-visible .cartel-num, a.cartel-mes:focus-visible .cartel-sem, a.cartel-mes:focus-visible .cartel-que{color:var(--vino)}
#agenda-portada .cartel-cuando{transition:border-color .2s ease}
#agenda-portada a.cartel-mes:hover .cartel-cuando{border-right-color:var(--vino)}
.agenda-todo .btn{display:inline-block}
/* 2026-10-18: «Otras rutas» (Granja y huerta) en Rutas del vino: centrado, con el mismo ancho de lectura */
.otras-rutas{text-align:center; font-size:clamp(1.8rem,3vw,2.5rem); margin:3.5rem 0 1.6rem}
.ruta-huerta{display:block}
.ruta-huerta .texto-largo{max-width:46rem; margin:0 auto}
.ruta-huerta .tarifa{margin-left:auto; margin-right:auto; align-items:center}
.sub-ruta{font-family:var(--texto); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:1.6rem 0 .6rem; color:var(--vino)}
.lista-ruta{margin:0 0 1.2rem; padding-left:1.2rem}
.lista-ruta li{margin:0 0 .7rem; line-height:1.6}
.ruta-huerta .btn{margin-top:.6rem}
.ruta-huerta .texto-largo h3{text-align:center}
/* 2026-10-18: título de sección «Visitando el origen», con el mismo aire que «Otras rutas» */
.titulo-seccion{text-align:center; font-size:clamp(1.8rem,3vw,2.5rem); margin:1rem 0 1.6rem}
.ruta-huerta{margin-top:3rem}
/* ===== 2026-10-18 (Antonio): Degustaciones, dos filas ===== */
/* Aire sobre la primera seccion de la carta, como el de las demas. */
#carta > .familia:first-child{margin-top:2rem}
/* Fila de arriba: info del jamon, foto del jamon y el platillo. Los dos primeros
bloques juntos miden lo mismo que las cajas de Copas de arriba. */
#carta .rejilla-destacada{grid-template-columns:1fr 1fr 1.7fr; align-items:stretch; margin-bottom:1.1rem}
#carta .rejilla-destacada > .ficha{min-height:190px}
/* Fila de abajo: tres fichas a lo ancho. */
#carta .rejilla-resto{grid-template-columns:repeat(3,minmax(0,1fr))}
/* estas dos rejillas no llevan el subgrid de tres lineas de la carta */
#carta .rejilla-destacada > .ficha:not(.ficha-foto),
#carta .rejilla-resto > .ficha{grid-row:auto; display:flex; flex-direction:column}
/* el bloque de la foto: la imagen a caja, pegada al borde y sin hueco blanco */
#carta .ficha-foto{padding:0; overflow:hidden; grid-row:auto; display:block}
#carta .ficha-foto .foto-ficha{position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:50% 50%; display:block; margin:0}
/* las copas de la cabecera: el relleno y el hueco se habian perdido */
.hero-carta .ficha-chica{padding:1rem 1.1rem 1.1rem}
.hero-carta .rejilla-chica{gap:.7rem}
@media (max-width:640px){
.hero-carta .ficha-chica{max-width:21rem}
#carta .rejilla-destacada{grid-template-columns:1fr 1fr}
#carta .rejilla-destacada > .ficha:last-child{grid-column:1 / -1}
#carta .rejilla-resto{grid-template-columns:repeat(2,minmax(0,1fr))}
#carta .ficha-foto{min-height:170px}
}
/* 2026-10-18 (Antonio): un poco de aire entre «Lo que hay» y «Copas». */
.hero-carta h2.display{margin-bottom:1.5rem}
/* 2026-10-19 (Antonio): gilda de ejemplo en el sello «Copas y tapas» (imagen con tres aceitunas), de pie y ladeada; sustituye a la gilda en vector */
@media (min-width:1181px){
nav a.puerta-nav img.sello-dib-ejemplo{display:block; position:relative; z-index:0; flex:0 0 auto; width:auto; height:5.2rem; margin-left:.1rem; margin-right:0; transform:rotate(22deg); transition:transform .38s cubic-bezier(.34,1.56,.64,1)}
nav a.puerta-nav:hover img.sello-dib-ejemplo, nav a.puerta-nav:focus-visible img.sello-dib-ejemplo{transform:rotate(14deg) translateY(-3px)}
}
@media (min-width:1181px) and (max-width:1340px){
nav a.puerta-nav img.sello-dib-ejemplo{height:4.4rem}
}
@media (prefers-reduced-motion:reduce){ nav a.puerta-nav img.sello-dib-ejemplo{transition:none} nav a.puerta-nav:hover img.sello-dib-ejemplo{transform:rotate(22deg)} }
/* 2026-10-19 (Antonio): la gilda de ejemplo, más separada del texto y con otro movimiento: al pasar el ratón se balancea como pinchada en un palillo */
@keyframes gilda-balanceo{0%{transform:rotate(22deg)} 25%{transform:rotate(8deg)} 55%{transform:rotate(34deg)} 80%{transform:rotate(16deg)} 100%{transform:rotate(22deg)}}
@media (min-width:1181px){
nav a.puerta-nav img.sello-dib-ejemplo{margin-left:.75rem; transition:none}
nav a.puerta-nav:hover img.sello-dib-ejemplo, nav a.puerta-nav:focus-visible img.sello-dib-ejemplo{transform:rotate(22deg); animation:gilda-balanceo .9s ease-in-out 1}
}
@media (prefers-reduced-motion:reduce){ nav a.puerta-nav:hover img.sello-dib-ejemplo{animation:none} }
/* 2026-10-19 (Antonio): «Copas y tapas» más pequeño, con la gilda de ejemplo a juego */
@media (min-width:1181px){
.sello-texto{font-size:1.2rem}
nav a.puerta-nav img.sello-dib-ejemplo{height:4.3rem; margin-left:.6rem}
}
@media (min-width:1181px) and (max-width:1340px){
.sello-texto{font-size:1.05rem}
nav a.puerta-nav img.sello-dib-ejemplo{height:3.7rem}
}
/* 2026-10-19 (Antonio): «Copas y tapas» más grande que al principio (1,5 rem), con la gilda de ejemplo a juego */
@media (min-width:1181px){
.sello-texto{font-size:1.75rem}
nav a.puerta-nav img.sello-dib-ejemplo{height:5.9rem; margin-left:.7rem}
}
@media (min-width:1181px) and (max-width:1340px){
.sello-texto{font-size:1.45rem}
nav a.puerta-nav img.sello-dib-ejemplo{height:4.9rem}
}
/* 2026-10-19 (Antonio): serie de tres fotos de «Viaje a la huerta» (rectángulo limpio, sin efectos) */
.serie-huerta{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.4rem 0 1.6rem}
.foto-serie{aspect-ratio:3/4; overflow:hidden}
.foto-serie img{width:100%; height:100%; object-fit:cover}