/* El Terrat by Hafssa — automatisch aus dem Design extrahiert.
   Nicht von Hand ändern: tools/build-templates.py erzeugt diese Datei neu. */
.sellos{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(18px,3.2vw,40px);padding:34px var(--pad) 26px;border-bottom:1px solid rgba(243,236,221,.12);margin-bottom:6px}
.sellos img{height:78px;width:auto;opacity:1;transition:opacity .3s,transform .3s}
.sellos img[alt*="Riofr"]{height:31px;position:relative;top:10px}
.sellos a:hover img{opacity:1;transform:translateY(-2px)}
@media(max-width:600px){.sellos{gap:24px}.sellos img{height:64px}.sellos img[alt*="Riofr"]{height:26px;position:relative;top:7px}}
.btn,.nbtn,.cbtn,.btn-r{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--press,1))}
.btn:active,.nbtn:active,.cbtn:active,.btn-r:active{--press:.96;transition-duration:.12s}
.btn.pressing,.nbtn.pressing,.cbtn.pressing,.btn-r.pressing{--press:.96;transition-duration:.12s}
.tmode.pressing{transform:scale(.88) rotate(12deg);transition-duration:.12s}
.totop.pressing{transform:scale(.88);transition-duration:.12s}
@keyframes tapsheen{from{left:-75%}to{left:125%}}
.nbtn.pressing::after,.btn--solid.pressing::after,.btn-r.pressing::after,.btn--cream.pressing::after{animation:tapsheen .6s cubic-bezier(.22,.68,.16,1) forwards}
.tmode:active{transform:scale(.88) rotate(12deg);transition-duration:.12s}
.totop:active{transform:scale(.88);transition-duration:.12s}
.nbtn,.btn--solid,.btn-r,.btn--cream{position:relative;overflow:hidden}
.nbtn::after,.btn--solid::after,.btn-r::after,.btn--cream::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,.68,.16,1);pointer-events:none}
.nbtn:hover::after,.btn--solid:hover::after,.btn-r:hover::after,.btn--cream:hover::after{left:125%}
svg.rule{display:block!important;opacity:1!important;transform:none!important;width:64px;height:10px;background:none!important;border:0!important;animation:none!important;overflow:visible}
svg.rule path{fill:none;stroke:#C98A5E;stroke-width:1.4;stroke-linejoin:miter;stroke-dasharray:430;stroke-dashoffset:430}
.rev.in svg.rule path,svg.rule.roofgo path{animation:roofDrawU 1.15s cubic-bezier(.4,.6,.2,1) .18s forwards}
svg.sheen{display:block!important;opacity:1!important;transform:none!important;width:64px!important;height:10px!important;background:none!important;border:0!important;margin-left:auto!important;margin-right:auto!important;animation:none!important;overflow:visible}
svg.sheen path{fill:none;stroke:#C98A5E;stroke-width:1.4;stroke-linejoin:miter;stroke-dasharray:430;stroke-dashoffset:430}
.rev.in svg.sheen path,svg.sheen.roofgo path{animation:roofDrawU 1.15s cubic-bezier(.4,.6,.2,1) .18s forwards}
svg.linia-roof{display:block!important;opacity:1!important;transform:none!important;width:64px;height:10px;overflow:visible;margin-bottom:22px}
svg.linia-roof path{fill:none;stroke:#FBEFDC;stroke-width:1.8;stroke-linejoin:miter;stroke-dasharray:430;stroke-dashoffset:430;filter:drop-shadow(0 1px 8px rgba(0,0,0,.55))}
svg.linia-roof.roofgo path{animation:roofDrawU 1s cubic-bezier(.4,.6,.2,1) .3s forwards}
@keyframes roofDrawU{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){svg.rule path,svg.sheen path,svg.linia-roof path{stroke-dashoffset:0!important;animation:none!important}}
@media(min-width:900px){/*roofbig*/svg.rule,svg.sheen,svg.linia-roof,.introof{width:112px!important;height:17px!important}.head svg.sheen{margin-bottom:22px!important}}
.lang.langdd{position:relative;display:inline-flex!important;gap:0!important;border:0!important;background:none!important}
.lang.langdd .flg-cur{display:inline-flex!important;align-items:center;gap:6px;cursor:pointer;font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:6px 4px!important;border:0!important;background:none!important;color:inherit!important;text-decoration:none;opacity:1!important}
.lang.langdd .opts{position:absolute;top:calc(100% + 6px);right:0;z-index:90;display:flex;flex-direction:column;gap:2px;background:var(--bg);border-radius:10px;padding:6px;box-shadow:0 18px 44px rgba(28,26,22,.22);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.lang.langdd.open .opts,.lang.langdd:hover .opts{opacity:1;visibility:visible;transform:none}
.lang.langdd .opts::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.lang.langdd .opts a{display:flex!important;align-items:center;gap:9px;font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:9px 14px 9px 10px;border-radius:7px;color:var(--ink)!important;text-decoration:none;white-space:nowrap;opacity:1!important;transition:background .2s ease}
.lang.langdd .opts a:hover{background:rgba(140,120,90,.12)}
.langdd .chev{width:9px;height:9px;opacity:.5;margin-left:1px;flex:none;transition:transform .3s ease}
.lang.langdd.open .chev,.lang.langdd:hover .chev{transform:rotate(180deg)}
@media(max-width:900px){.lang.langdd{display:none!important}}
.flg{width:22px;height:15px;border-radius:2px;flex:none;display:block;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.mnav__lang.langx{display:flex!important;flex-wrap:wrap;gap:16px!important;align-items:center;justify-content:flex-start}
.mnav__lang.langx a{display:inline-flex!important;padding:0!important;border:0!important;background:none!important;opacity:1!important;border-radius:0}
.mnav__lang.langx .flg{width:28px;height:19px;border-radius:3px;box-shadow:none;filter:grayscale(.65) opacity(.45);transition:filter .25s ease}
.mnav__lang.langx a.on .flg{filter:none}
.mnav{overflow-x:hidden;background-color:var(--bg)!important;background-image:linear-gradient(158deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 54%)!important;background-repeat:no-repeat!important}
.mnav::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:48%;pointer-events:none;z-index:6;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 36%,rgba(255,251,240,.72) 50%,rgba(255,255,255,.12) 64%,rgba(255,255,255,0) 100%);transform:translateX(-170%) skewX(-14deg);opacity:0}
.mnav.open::after{animation:mnavShine 3.6s cubic-bezier(.4,.1,.2,1) .8s infinite}
@keyframes mnavShine{0%{transform:translateX(-170%) skewX(-14deg);opacity:0}10%{opacity:1}38%{transform:translateX(320%) skewX(-14deg);opacity:1}44%{opacity:0}100%{transform:translateX(320%) skewX(-14deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.mnav.open::after{animation:none}}
.rev .label,.rev h2,.rev p,.rev .more,.rev .mrow,.rev .prod__i{filter:blur(3px);transition:opacity .6s cubic-bezier(.22,.68,.16,1),transform .6s cubic-bezier(.22,.68,.16,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.rev.in .label,.rev.in h2,.rev.in p,.rev.in .more,.rev.in .mrow,.rev.in .prod__i{filter:blur(0)}
@media(max-width:900px){
.rev h2{transform:translateY(22px)}
.rev p{transform:translateY(16px)}
.rev.in h2,.rev.in p{transform:none}
}
@media(prefers-reduced-motion:reduce){
.rev .label,.rev h2,.rev p,.rev .more,.rev .mrow,.rev .prod__i{filter:none!important}
}
#page-fade{position:fixed;inset:0;z-index:99990;background:var(--bg,#F7F3EA);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility .5s}
#page-fade.on{opacity:1;visibility:visible;pointer-events:auto}
body{animation:eltPageIn .6s ease .02s both}
@keyframes eltPageIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body{animation:none}#page-fade{transition:none}}
/* 1 · la banda: holgura contenida; el desplazamiento lo controla el script de abajo */
.band .band__img{inset:-16% 0!important}

/* 1b · la frase de la banda, legible sobre cualquier zona de la foto */
.band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 54% at 50% 50%,rgba(10,7,4,.46) 0%,rgba(10,7,4,.18) 62%,rgba(10,7,4,0) 100%)}
.band__t{position:relative;z-index:2}

/* 2 · sin líneas huérfanas: los titulares y las frases reparten el texto */
h1,h2,h3,.hero .hero__sub,.intro p,.band__t,.head p,.pagehead .sub{text-wrap:balance}

/* 3 · el ancho de la frase del hero solo se limita en pantalla grande;
       en móvil manda el bloque del hero (si no, se pisaban entre ellos) */
@media(min-width:701px){.hero .hero__sub{max-width:40ch!important}}
/* ═══ ACABADO ═══ cuatro correcciones de oficio. Nada nuevo en pantalla:
   solo se termina bien lo que ya estaba.

   1 · EL VELO DE LA PIEZA MIDE LO QUE MIDE SU FOTO
   La foto de producto lleva min-height:300px y el velo que se retira al entrar
   en pantalla estaba dibujado solo con aspect-ratio. En un teléfono de 390px
   la foto mide 300px y el velo 225px: un cuarto de la pieza se quedaba sin
   velo, con una línea horizontal dura, y en las cuatro piezas a la vez.
   En escritorio el mínimo queda inerte y por eso no se veía. */
.prod::before{min-height:300px}

/* 2 · LA FOTO VERTICAL SE VE VERTICAL EN UNA PANTALLA VERTICAL
   Tres fotografías de David Oliete son verticales de 1467×2200, y en móvil una
   regla las aplanaba a 16/11: se conservaba el 45% del fotograma y los platos
   quedaban cortados arriba y abajo, sin borde y sin la mesa que los sostiene.
   A 4/5 entran enteras con el encuadre por defecto, así que no hace falta
   ningún object-position. Se hace foto a foto y nunca como regla global.
   El selector usa $= (termina en) y no *= a propósito: plato-gamba-guisantes-2
   es otra toma, apaisada, y no debe quedar atrapada. */
@media(max-width:900px){
  .menus .media img[src$="plato-gamba-guisantes.jpg"]{aspect-ratio:4/5}
  .gx .media img[src$="aperitivos-madera.jpg"]{aspect-ratio:4/5;height:auto}
}
@media(max-width:860px){
  .split .media img[src$="plato-cervol.jpg"]{aspect-ratio:4/5}
}

/* 3 · LA CARTA HABLA CON DOS VOCES
   Hoy el nombre del plato y su nota se imprimen iguales: misma familia, mismo
   color y casi el mismo cuerpo, así que se leen como dos platos seguidos. La
   nota pasa a Newsreader itálica, un punto por debajo. Baja el texto percibido
   sin quitar una palabra. Newsreader ya se descarga en esta página y no se
   usaba en ninguna parte. La opacidad, en vez de un color nuevo, hace que el
   modo noche se resuelva solo. */
.carta .item__d{font-family:"Newsreader",Georgia,serif!important;font-style:italic!important;
  font-weight:400!important;font-size:clamp(1rem,2.6vw,1.06rem)!important;line-height:1.5!important;
  letter-spacing:0!important;margin-top:3px!important;color:var(--cream)!important;opacity:.72}

/* 4 · EL PANEL DEL MENÚ ES UNA HOJA DE PAPEL, NO UN WIDGET
   Radio de aplicación (20px) a radio de imprenta; sombra negra pura —que sobre
   marfil apaga el papel a gris— a tinta cálida en dos capas, contacto y caída;
   y el canto inferior con el mismo bronce que el filo de las láminas del hero,
   para que la hoja que baja sea del mismo papel que el resto de la casa.
   No toca background, así que convive con el barrido de luz ya aprobado. */
.mnav{border-radius:0 0 2px 2px;
  border-bottom:1px solid rgba(201,138,94,.42);
  box-shadow:0 2px 0 rgba(40,26,16,.05),
             0 30px 60px -18px rgba(40,26,16,.34),
             0 8px 20px -8px rgba(40,26,16,.16)}
html.dark .mnav{border-bottom-color:rgba(201,138,94,.34);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.5)}

/* 5 · EL CARRITO ENSEÑA LA PIEZA
   La primera regla del proyecto es que la fotografía manda, y en el carrito
   desaparecía: justo al pagar, el cliente veía una lista de texto igual a la
   de cualquier plantilla. Ahora cada línea lleva la foto real de lo que se
   compra, tomada de la imagen que ya está cargada en la página: cero bytes de
   descarga. El hueco ya estaba previsto —.citem lleva display:flex y gap:14px
   desde el principio— y nunca se llenó. Se emite solo si existe, así que los
   carritos ya guardados en el navegador siguen pintando igual y sin hueco. */
.citem__t{width:54px;flex:none;overflow:hidden;background:var(--bg2)}
.citem__t img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media(max-width:520px){.citem__t{width:46px}}
/* ═══ ACCESO ═══ lo que faltaba para que la web se pueda usar sin ratón
   y se oiga con lector de pantalla. Cada pieza se activa solo si su
   elemento existe, así que el bloque es idéntico en todas las páginas. */

/* contraste: el gris de apoyo subía justo al límite; ahora pasa AA.
   El modo noche define el suyo con html.dark y no se toca. */
:root{--muted:rgba(28,26,22,.72)}
.giftstatus.warn{color:#7A5E28}

/* la fila de opciones de la tarjeta regalo: el punto pegado a su nombre.
   space-between trataba el ::before del radio como tercer elemento y el
   nombre quedaba flotando a mitad de fila. */
.gxo{justify-content:flex-start!important}
.gxo .gx__price{margin-left:auto}

/* texto solo para lectores de pantalla */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}