/* ============================================================
   LE MULÉ PATISSERIE — sistema visual 2026-08 "traducción Grolet"
   Blanco puro, negro, gris de dato y un único acento: el oro
   del logo oficial. Cero sombras, cero radios,
   cero tarjetas: el producto es el diseño.
   ============================================================ */

:root{
  --blanco:#FFFFFF;
  --negro:#0B0B0B;
  --gris:#6E6E6E;            /* gris de dato SOBRE BLANCO: 5,10x. El #8F8F8F de antes daba 3,23x
                                 y dejaba el PRECIO de cada pieza por debajo de AA. */
  --gris-noche:#8F8F8F;      /* el mismo gris SOBRE NEGRO: 6,09x, ya cumplia. Se conserva igual
                                 para que las secciones oscuras no cambien de aspecto. */
  --gris-linea:#E4E4E4;
  /* EL ACENTO ES ORO (28/08). Antes era el verde del rotulo del local; ahora la web
     acompana al logo, que es dorado. Cada verde se ha cambiado por el oro de su MISMA
     luminancia, asi que los contrastes medidos entonces siguen valiendo hoy. */
  --acento:#D8B23A;          /* oro del rotulo: 9,70x sobre negro. SOBRE BLANCO da 2,03x,
                                 asi que ahi no se usa nunca: va --acento-tinta. */
  --acento-tinta:#9C7F04;    /* el mismo oro bajado hasta cumplir en los DOS fondos:
                                 3,85x sobre blanco y 5,11x sobre negro. Foco y hovers. */
  --oro-suave:#EBD08F;       /* oro palido, para texto y detalles SOBRE NEGRO: 13,08x */
  --oro-vivo:#E0BF52;        /* oro encendido de los hovers sobre negro: 11,01x */
  /* EL DORADO DE LA MARCA. Muestreado del logo oficial (material/logo-oficial.png):
     el mulo, LE MULE y PATISSERIE van todos en este oro. Sobre blanco da 2,99x, que
     sostiene el nombre en grande pero NO la linea pequena de PATISSERIE: para esa va
     --oro-tinta. Sobre foto sube --oro-claro, que el velo del hero se come el resto. */
  --oro:#B39204;
  --oro-claro:#D8B23A;       /* el mismo oro aclarado para leerse SOBRE FOTO */
  --oro-tinta:#866C03;       /* el mismo oro bajado hasta 5,05x sobre blanco: PATISSERIE */
  --sans:'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --marca:'Cinzel', Georgia, serif;
  --header-h:74px;
  --info-h:84px;      /* alto fijo de la etiqueta bajo cada foto */
  --pad:clamp(16px, 4vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* sin scroll-snap: con secciones de pantalla completa el anclaje tiraba de la página
     y se notaba pegajoso al bajar con la rueda. Cada sección sigue ocupando 100svh. */
}
body{
  margin:0; background:var(--blanco); color:var(--negro);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
button{ font:inherit; }

::selection{ background:var(--negro); color:var(--blanco); }
:focus-visible{ outline:2px solid var(--acento-tinta); outline-offset:3px; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--negro); color:var(--blanco); padding:10px 14px; }

/* ---------- utilidades tipográficas ---------- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris);
}
/* el mismo kicker aparece sobre blanco (carta, obrador) y sobre negro
   (encargos, visitanos): cada fondo pide su gris para cumplir AA. */
.encargo .eyebrow,
.visita .eyebrow{ color:var(--gris-noche); }
.titular{
  font-weight:600; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(2.1rem, 6vw, 4.6rem);
}

/* ============================ CABECERA ============================ */
/* Vuelve a ser una barra —blanco, borde fino, la de siempre— pero ya no esta ahi todo el
   rato: entra al SUBIR y se va al bajar, y nunca dentro del hero. Lleva la marca centrada
   y el boton de encargar a la derecha; la navegacion sigue entera en el panel lateral. */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:99;
  background:var(--blanco); color:var(--negro);
  border-bottom:1px solid var(--gris-linea);
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 var(--pad);
  transform:translateY(-100%);
  transition:transform .38s cubic-bezier(.22,.9,.3,1);
}
.site-header.entra{ transform:none; }
/* Con el panel abierto la barra ENTRA aunque estuviera fuera —si no, la X se iria con ella
   y el panel se quedaria sin cierre visible— pero entra desnuda: sin fondo, sin borde y
   con la marca y el CTA apagados, porque el panel ya trae los suyos. Sube por encima del
   panel para que la X quede accesible, y la franja transparente devuelve los clics. */
body.menu-abierto .site-header{
  transform:none; z-index:102;
  background:transparent; border-bottom-color:transparent; color:var(--blanco);
  pointer-events:none;
}
body.menu-abierto .site-header > *{ pointer-events:auto; }
body.menu-abierto .brand,
body.menu-abierto .header-cta{ opacity:0; pointer-events:none; }

/* la marca va al centro OPTICO de la ventana, no al centro del hueco que dejan el boton y
   el CTA: por eso se posiciona absoluta y no como pieza del flex */
.brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:11px;
}
/* el simbolo no trae atributos de pintura: sin esto sale del negro por defecto */
/* EL CONTORNO, que es la marca. Sube de tamaño y lleva un trazo moderado para que las dos
   lineas del dibujo se lean negras sin fundirse en una silueta. */
.brand svg{
  width:104px; height:auto; color:currentColor; fill:currentColor; fill-rule:evenodd;
  stroke:currentColor; stroke-width:9; stroke-linejoin:round; stroke-linecap:round; paint-order:stroke fill;
}
.brand .brand-name{ font-size:29px; }
.brand .brand-name{ font-family:var(--marca); font-size:28px; letter-spacing:.13em; white-space:nowrap; }

/* EL LOGO DICE DONDE ESTAS. Dentro de una familia la marca lleva debajo el nombre de la
   categoria. No es adorno: aqui la barra esta SIEMPRE puesta —no hay hero de pantalla
   completa que la esconda— y quien entra desde Google a una pagina suelta sabe en que
   mostrador ha caido sin bajar hasta el titular.
   Va en la SANS y no en Cinzel a proposito: la serif es el logotipo, y repetirla debajo
   ponia dos marcas a competir. Lleva el tratamiento de .eyebrow —600, versalitas, tracking
   abierto— pero en NEGRO y no en gris: es una señal de sitio, tiene que leerse de un
   vistazo y no quedarse en pie de foto. */
.brand--familia{ gap:12px; }
.brand-texto{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.brand-familia{
  font-family:var(--sans); font-weight:600; font-size:13.5px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  /* el nombre de la familia va en ORO, como el logo. Aqui va --oro-tinta y no el oro de
     marca: son 13,5 px en versalitas, texto pequeño, y el oro del logo da 2,99x sobre
     blanco —vale para el nombre en grande de la portada, no para una linea de este
     cuerpo—. --oro-tinta es el mismo oro bajado hasta 5,05x. */
  color:var(--oro-tinta); white-space:nowrap;
}
/* con el panel abierto la barra se queda sin fondo: sobre negro el oro puede subir, y
   sube, que si heredase la tinta blanca dejaria de ser oro justo ahi */
body.menu-abierto .brand-familia{ color:var(--oro-suave); }
.bf-corto{ display:none; }
/* "MACARONS & PETITS FOURS" deja de caber entre el mando y el boton de encargar en cuanto
   la pantalla baja de 560 px —se montaba encima del CTA—. Ahi el nombre pasa a su forma
   corta, que es la misma que usan los titulos del hero, y encoge un punto. */
@media (max-width:560px){
  .bf-largo{ display:none; }
  .bf-corto{ display:inline; }
  .brand--familia{ gap:9px; }
  .brand-familia{ font-size:12.5px; letter-spacing:.12em; }
}

.header-cta{
  border:1px solid currentColor; padding:11px 21px;
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s, color .2s, border-color .2s;
}
.header-cta:hover{ background:var(--negro); color:var(--blanco); }
/* UNA SOLA PUERTA. El boton lleva el numero de piezas del encargo cuando hay alguna:
   "Encargar · 2". Vacio, no ocupa sitio. */
.header-cta-cuenta{ margin-left:.55em; }
.header-cta-cuenta[hidden]{ display:none; }

/* ---------- el mando: dos lineas que se cruzan ----------
   Va DENTRO de la barra: se pone y se quita con ella, asi que bajando no queda nada
   flotando sobre el producto. Ya no necesita halo —debajo siempre tiene el blanco de la
   barra— salvo con el panel abierto, donde la barra se queda sin fondo. */
.menu-btn{
  margin-right:auto;      /* con .site-header en flex-end, esto lo manda a la izquierda */
  margin-left:-11px;      /* el trazo, no la caja de 44px, es lo que se alinea al margen */
  width:52px; height:52px; border:0; background:transparent; padding:0;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  /* un <button> NO hereda color: el navegador le pone su "buttontext". Las lineas van de
     currentColor, asi que sin esto se quedaria negro tambien sobre el panel abierto. */
  color:inherit;
  transition:color .3s ease;
}

.menu-btn-linea{
  display:block; width:29px; height:1.7px; background:currentColor;
  transition:transform .3s ease, opacity .2s ease;
}
.menu-abierto .menu-btn-linea:first-child{ transform:translateY(3.75px) rotate(45deg); }
.menu-abierto .menu-btn-linea:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* ---------- panel lateral ---------- */
.menu-velo{
  position:fixed; inset:0; z-index:100; background:rgba(5,4,3,.62);
  opacity:0; transition:opacity .42s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.menu-velo[hidden]{ display:none; }
.menu-velo.visible{ opacity:1; }

.menu-lateral{
  position:fixed; inset:0 auto 0 0; z-index:101;
  width:min(400px,86vw);
  background:var(--negro); color:var(--blanco);
  display:flex; flex-direction:column; gap:clamp(26px,5vh,48px);
  padding:calc(var(--header-h) + clamp(18px,3vh,32px)) clamp(24px,4vw,40px) clamp(24px,4vh,36px);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-100%);
  transition:transform .42s cubic-bezier(.22,.9,.3,1);
}
/* display:flex anula el hidden del navegador: sin esto el panel invisible se come
   TODOS los clics de la pagina. Y mientras se va al cerrar, tampoco estorba. */
.menu-lateral[hidden]{ display:none; }
.menu-lateral.visible{ transform:none; }

.menu-marca{ display:flex; align-items:center; gap:12px; color:var(--blanco); }
.menu-marca svg{ width:60px; height:auto; color:currentColor; fill:currentColor; fill-rule:evenodd; }
.menu-marca span{ font-family:var(--marca); font-size:21px; letter-spacing:.13em; }

.menu-lateral nav{ display:flex; flex-direction:column; gap:clamp(12px,2.2vh,20px); }
/* La de la carta, no la del logo: Cinzel es el LOGOTIPO y usarlo tambien para navegar
   diluia la marca —cuatro destinos escritos igual que el nombre de la casa—. Se pasa a
   la sans del cuerpo con el tratamiento de los titulares de la web: peso 600 y el
   tracking apretado que llevan .encargo h2 y las cuatro categorias del hero. */
.menu-lateral nav a{
  font-family:var(--sans); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.7rem,4.8vw,2.3rem); line-height:1.12;
  transition:color .25s ease, transform .35s cubic-bezier(.16,.84,.44,1);
}
.menu-lateral nav a:hover, .menu-lateral nav a:focus-visible{
  color:var(--oro-vivo); transform:translateX(8px);
}
.menu-lateral nav a:active{ color:var(--oro-suave); }
/* El club es un destino mas del menu, pero abre el popup en vez de ir a otra URL: por eso es
   <button>, vestido exactamente como los enlaces de al lado. */
.menu-lateral nav .menu-club{
  background:transparent; border:0; padding:0; text-align:left; cursor:pointer; color:inherit;
  font-family:var(--sans); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.7rem,4.8vw,2.3rem); line-height:1.12;
  transition:color .25s ease, transform .35s cubic-bezier(.16,.84,.44,1);
}
.menu-lateral nav .menu-club:hover,
.menu-lateral nav .menu-club:focus-visible{ color:var(--oro-vivo); transform:translateX(8px); }

/* LAS CINCO FAMILIAS EN EL MENU. Cuelgan de "La carta" y no compiten con ella: son
   destinos de segundo nivel, asi que van a la escala del dato y no a la del titular. A
   2,3 rem como los demas, cuatro destinos mas cinco familias se salian de la pantalla en
   cuanto el movil era corto. */
.menu-familias{
  display:flex; flex-direction:column; gap:clamp(6px,1.1vh,10px);
  margin:2px 0 4px; padding-left:2px;
}
.menu-lateral nav .menu-familia{
  font-size:clamp(.95rem,2.6vw,1.05rem); font-weight:500; letter-spacing:-.01em;
  color:var(--gris-noche);
}
.menu-lateral nav .menu-familia:hover,
.menu-lateral nav .menu-familia:focus-visible{ color:var(--oro-vivo); transform:translateX(6px); }

/* el pie se apoya abajo: con cuatro destinos sobra alto y el bloque quedaba flotando */
.menu-pie{ margin-top:auto; border-top:1px solid #1F1F1F; padding-top:clamp(18px,3vh,26px); }
.menu-cta, .menu-wa{
  display:block; text-align:center; padding:13px 24px;
  font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
}
.menu-cta{ border:1px solid var(--blanco); transition:background .2s, color .2s; }
.menu-cta:hover{ background:var(--blanco); color:var(--negro); }
.menu-wa{ background:var(--blanco); color:var(--negro); margin-top:10px; }
.menu-pie p{ margin-top:16px; font-size:13px; line-height:1.6; color:var(--gris-noche); }

/* con el panel abierto el mando se lee en blanco sobre el negro del panel y se queda
   solo: la marca sobra —el panel trae la suya— y la barra de abajo estorba. */
/* sobre el negro plano del panel el halo no sostiene nada y solo emborrona la X */
body.menu-abierto .barra-movil{ display:none; }

/* ============================ HERO ============================ */
/* Negro pleno con el nombre en el tercio superior y, apoyada en el inferior, la lista de
   las cuatro categorias. En reposo NO hay foto: la sala se enciende sola cuando se mira o
   se elige una categoria (ver .hero-escena--cats). La foto fija que abria antes la web
   —"la mesa de la manana"— vive ahora de fondo en #encargo. */
/* HERO EN BLANCO (24/08). La portada es papel blanco con la marca en tinta negra, como la
   carta que viene justo debajo. Las fotos de las familias siguen encendiendose al mirar un
   nombre (y en el carrusel del movil): en cuanto hay foto detras, la tinta pasa a blanca.
   Todo cuelga de --hero-tinta, que cambia con la clase .con-foto que pone el JS. */
.hero{
  --hero-tinta:var(--negro); --hero-sub:var(--gris); --hero-cat:var(--gris);
  --hero-oro:var(--oro); --hero-oro-sub:var(--oro-tinta);
  min-height:100svh; color:var(--hero-tinta); background:var(--blanco);
  transition:color 1s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:calc(var(--header-h) + clamp(28px,7vh,84px)) var(--pad) 56px;
  position:relative; overflow:hidden;
}
.hero.con-foto{ --hero-tinta:var(--blanco); --hero-sub:#D8D4CC; --hero-cat:#8E8A82; }
.hero.con-foto{ --hero-oro:var(--oro-claro); --hero-oro-sub:var(--oro-claro); }
.hero-escena{ position:absolute; inset:0; z-index:0; }
.hero-escena img{
  width:100%; height:100%; object-fit:cover; object-position:44% 68%;
  transform:scale(1.07); transform-origin:50% 62%;
}
.hero-escena::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(5,4,3,.78) 0%, rgba(5,4,3,.46) 40%, rgba(5,4,3,.1) 60%, rgba(5,4,3,.42) 100%);
}
/* la escena espera al levantarse el velo: animarla debajo era gasto invisible */
.hero-anim .hero-escena{ animation:escena-entra 1.2s ease 2.3s backwards; }
.hero-anim .hero-escena img{ animation:escena-deriva 32s ease-out 2.55s forwards; }
@keyframes escena-entra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes escena-deriva{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

/* ---------- LA ESCENA DE LAS CATEGORIAS ----------
   Aqui el fondo del hero no es una foto, son CUATRO apiladas y apagadas: en reposo manda
   el negro de la seccion y solo se enciende la de la categoria que se mira o se elige.
   La deriva de la foto unica sobra —cada imagen trae su propio zoom al encenderse—, por
   eso se anula: si no, escena-deriva pisaria el transform que hace ese gesto. */
.hero-escena--cats img{
  position:absolute; inset:0; object-position:50% 50%;
  opacity:0; transform:scale(1.05); transform-origin:50% 50%;
  /* SUAVE. Sobre papel blanco un fundido de medio segundo era un fogonazo: la foto entra
     en un segundo largo con curva lenta, y el velo (abajo) llega un poco despues. */
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), transform 7s ease-out;
  animation:none;
}
.hero-escena--cats img.visible{ opacity:1; transform:scale(1); }
/* El velo se refuerza abajo: ahi vive la lista, y sobre un croissant a plena luz los
   titulos —mas aun dibujados solo a contorno— se caian. Arriba sigue oscuro para el
   nombre y el centro se abre para que la pieza se vea entera. Este degradado va a TODO
   el ancho y de arriba abajo a proposito: un halo centrado bajo la lista sostenia igual
   el contraste, pero se leia como un recuadro negro recortado sobre la foto. */
.hero-escena--cats::after{
  opacity:0; transition:opacity 1.3s cubic-bezier(.4,0,.2,1) .1s;
  /* velo mas ligero que cuando el hero era negro: ya no tiene que fundirse con un fondo
     oscuro, solo sostener la marca arriba y los nombres abajo */
  background:linear-gradient(to bottom,
    rgba(5,4,3,.52) 0%, rgba(5,4,3,.34) 28%, rgba(5,4,3,.3) 46%,
    rgba(5,4,3,.5) 66%, rgba(5,4,3,.72) 86%, rgba(5,4,3,.8) 100%);
}
.hero.con-foto .hero-escena--cats::after{ opacity:1; }
.hero-marca{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:3; }
.hero-scroll{ position:relative; z-index:3; }
.hero h1{ display:flex; flex-direction:column; align-items:center; }
.hero-mulo{
  width:clamp(132px,20.5vw,296px); height:auto; color:var(--hero-oro);
  transition:color 1s cubic-bezier(.4,0,.2,1);   /* acompaña al nombre; sin esto saltaba a blanco de golpe */
  margin-bottom:clamp(12px,2.4vh,24px); opacity:.92;
  fill:currentColor; fill-rule:evenodd;   /* el simbolo #mule-trazo no trae atributos: pinta el CSS */
}

/* el velo del dibujo: apagado salvo durante la coreografia */
.hero-velo{ position:absolute; inset:0; z-index:1; background:var(--blanco); opacity:0; pointer-events:none; will-change:opacity; }
.hero.con-foto .hero-velo{ background:#050403; }
.hero-anim .hero-velo{ opacity:.86; animation:velo-sube 1.1s ease 2.55s forwards; }
@keyframes velo-sube{ to{ opacity:0; } }

/* EL TRAZO: el mulo se dibuja a si mismo en grande (pathLength=100 normaliza el contorno),
   se asienta en tinta y baja a su sitio; el nombre espera y se abre cuando el ya esta. */
.hero-anim .hero-mulo{
  will-change:transform;   /* capa propia: el trazo se repinta solo, sin arrastrar al hero */
  fill:transparent; stroke:currentColor; stroke-width:5;
  stroke-dasharray:100; stroke-dashoffset:100;
  /* el dibujo ocupa el centro del hero: escala y bajada por tamaño de pantalla */
  /* Se escala SOBRE el mulo ya colocado: al crecer este un 29 %, mantener el 2,5 sacaba
     el dibujo de la pantalla. El factor baja en la misma proporcion para que el trazo
     siga ocupando el mismo hueco de antes. */
  transform:scale(var(--mulo-esc,1.95)) translateY(var(--mulo-baja,72%));
  animation:
    mulo-dibuja 2.1s cubic-bezier(.45,.05,.55,.95) .15s forwards,
    mulo-tinta .6s ease 2.05s forwards,
    mulo-asienta .95s cubic-bezier(.22,.9,.3,1) 2.45s forwards;
}
@keyframes mulo-dibuja{ to{ stroke-dashoffset:0; } }
/* currentColor y no un color fijo: el fill que deja una animacion con forwards no transiciona,
   pero currentColor SI sigue a la transicion de color del texto, y asi mulo y nombre cambian a la vez */
@keyframes mulo-tinta{ to{ fill:currentColor; stroke-width:0; } }
@keyframes mulo-asienta{ to{ transform:none; } }

.hero-word{
  display:block; font-family:var(--marca); font-weight:400; color:var(--hero-oro);
  transition:color 1s cubic-bezier(.4,0,.2,1);
  font-size:clamp(3.8rem, 12.8vw, 9rem); line-height:1; letter-spacing:.01em;
}
.hero-sub{
  display:block; font-size:clamp(13px,1.4vw,17px); font-weight:500; letter-spacing:.62em;
  text-transform:uppercase; margin-top:clamp(8px,1.5vh,18px); padding-left:.62em; color:var(--hero-oro-sub);
  transition:color 1s cubic-bezier(.4,0,.2,1);
}
.hero-anim .hero-word{
  opacity:0; clip-path:inset(0 50% 0 50%);
  animation:hero-word-abre .85s cubic-bezier(.22,.9,.3,1) 2.85s forwards;
}
@keyframes hero-word-abre{ to{ opacity:1; clip-path:inset(0 0 0 0); } }
.hero-anim .hero-sub{
  opacity:0; letter-spacing:1.1em; padding-left:1.1em;
  animation:hero-sub-abre .9s cubic-bezier(.22,.9,.3,1) 3.25s forwards;
}
@keyframes hero-sub-abre{ to{ opacity:1; letter-spacing:.62em; padding-left:.62em; } }
/* Cada uno con SU keyframe, y ninguno acaba en transform:none.
   Una animacion con fill-mode:both conserva su fotograma final para siempre y gana sobre
   la regla base, asi que un "to{transform:none}" compartido borraba el translateX(-50%)
   con el que .hero-scroll se centra: el indicador aparecia 62 px a la derecha en cuanto
   terminaba la entrada. Cada keyframe repite ahora la traslacion base que le toca. */
.hero-anim .hero-scroll{ animation:scroll-entra .85s cubic-bezier(.22,.9,.3,1) 3.8s both; }
@keyframes scroll-entra{
  from{ opacity:0; transform:translateX(-50%) translateY(14px); }
  to  { opacity:1; transform:translateX(-50%); }
}

/* al bajar la marca solo se APAGA: ni encoge ni se mueve (ver main.js) */
.hero.a-la-vista .hero-marca{ will-change:opacity; }

/* ---------- LAS CUATRO CATEGORIAS EN EL HERO ----------
   Abajo, en #encargo, la lista es una columna de titulos alineados a la izquierda porque
   comparte fila con el selector. Aqui el hero esta centrado y a pantalla completa: la
   misma lista pasa a FILA, se apoya en el tercio inferior (margin-top:auto) y deja el
   nombre solo arriba. El hover ya no empuja a la derecha —en fila no hay hacia donde—,
   levanta. */
.hero-cats{
  position:relative; z-index:3; width:100%;
  margin-top:auto; margin-bottom:clamp(52px,10vh,104px);
}
.hero .cats{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:clamp(12px,3.2vw,44px); margin-top:0;
}
.hero .cat{
  width:auto; text-align:center; padding:4px 0;
  font-size:clamp(1.15rem,2.5vw,2rem);
  /* EL TRAZO DEL MULO, EN LAS PALABRAS. El burro del logo entra dibujado solo por el
     contorno y luego se rellena de tinta; aqui la categoria hace el camino de ida: al
     mirarla el relleno se retira y queda el perfil de la letra.
     El grosor se deja SIEMPRE puesto y lo que se anima es su COLOR: -webkit-text-stroke-
     width no interpola, asi que animarlo daria un salto seco en vez de un fundido. */
  -webkit-text-stroke:1.1px transparent;
  transition:color .7s cubic-bezier(.4,0,.2,1), -webkit-text-stroke-color .5s ease,
             transform .35s cubic-bezier(.16,.84,.44,1);
}
/* mirada y eleccion comparten dibujo: lo que las separa es el punto dorado, que solo
   lleva la elegida (.cat[aria-pressed="true"]::after, mas arriba) */
.hero .cat{ color:var(--hero-cat); }
.hero .cat:hover,
.hero .cat:focus-visible,
.hero .cat[aria-pressed="true"]{
  color:transparent;
  -webkit-text-stroke-color:var(--hero-oro);
}
.hero .cat:hover, .hero .cat:focus-visible{ transform:translateY(-4px); }
/* EN TACTIL EL HERO ES UN CARRUSEL: la familia activa lleva el mismo trazo que el hover de
   escritorio y un punto debajo, para que se lea que "va por ahi". */
.hero .cat.activa{ color:transparent; -webkit-text-stroke-color:var(--hero-oro); }
.hero .cat.activa::after{
  content:""; display:block; width:5px; height:5px; border-radius:50%;
  background:var(--oro-vivo); margin:6px auto 0;
}
@media (hover:hover) and (pointer:fine){ .hero .cat.activa{ color:inherit; -webkit-text-stroke-color:transparent; } .hero .cat.activa::after{ display:none; } }
.hero-anim .hero-cats{ animation:cats-entra .85s cubic-bezier(.22,.9,.3,1) 3.65s both; }
@keyframes cats-entra{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

.hero-scroll{
  position:absolute; left:50%; bottom:20px;
  transform:translateX(-50%); transition:color 1s cubic-bezier(.4,0,.2,1);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--hero-sub);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll::after{ content:''; width:1px; height:24px; background:var(--hero-tinta); animation:linea 2.2s ease-in-out infinite; }
@keyframes linea{ 0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- HERO CLARO: "la mesa de la manana" · DESACTIVADO ----------
   NO SE APLICA: ni <section class="hero"> lleva ya .hero--claro ni <body> lleva
   .hero-claro. Se conserva entero porque es la ruta de vuelta: devolver esas dos clases
   y poner una sola <img src="assets/img/hero/manana-*.webp"> en .hero-escena (sin el
   modificador --cats) restaura el hero claro tal y como estaba.
   Como estaba: fondo luminoso generado desde SU foto real del interior (vitrina, paneles
   mostaza, sillas verdes). Con luz clara la marca viste tinta oscura; el velo del dibujo
   sigue siendo oscuro: el mulo se traza en blanco a oscuras y, cuando se hace de dia, la
   tinta se oscurece a la vez que se levanta el velo. */
.hero--claro{ --hero-tinta:#241F18; --hero-tinta-suave:#57503F; }
.hero--claro .hero-escena::after{
  background:linear-gradient(to bottom, rgba(248,245,239,.80) 0%, rgba(248,245,239,.38) 38%, rgba(248,245,239,.06) 62%, rgba(248,245,239,.42) 100%);
}
.hero--claro .hero-escena img{ object-position:50% 62%; }
.hero--claro .hero-marca::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:52%; transform:translate(-50%,-50%) translateZ(0);
  width:170%; height:185%; will-change:opacity;
  background:radial-gradient(ellipse at center,
    rgba(252,250,246,.82) 0%, rgba(252,250,246,.58) 42%, rgba(252,250,246,0) 72%);
}
/* el halo se enciende con la luz: durante el dibujo la sala sigue a oscuras */
.hero--claro.hero-anim .hero-marca::before{ opacity:0; animation:halo-entra 1.1s ease 2.55s forwards; }
@keyframes halo-entra{ to{ opacity:1; } }
.hero--claro.hero-anim .hero-escena{ animation:none; }   /* el velo ya hace de entrada */
.hero--claro .hero-word{ color:var(--hero-tinta); }
.hero--claro .hero-mulo{ color:var(--hero-tinta); }
.hero--claro .hero-sub{ color:var(--hero-tinta); font-weight:600; }
.hero--claro .hero-scroll{ color:var(--hero-tinta); font-weight:600; }
.hero--claro .hero-scroll::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:38%; transform:translate(-50%,-50%) translateZ(0);
  width:210%; height:150%;
  background:radial-gradient(ellipse at center,
    rgba(252,250,246,.72) 0%, rgba(252,250,246,.34) 40%, rgba(252,250,246,0) 78%);
}
.hero--claro .hero-scroll::after{ background:var(--hero-tinta); }

/* con animacion: el trazo se dibuja en blanco (la sala esta a oscuras) y al encenderse
   la luz el mulo viste la tinta oscura; el nombre espera a que haya luz para abrirse */
.hero--claro.hero-anim .hero-mulo{
  color:var(--blanco);
  animation:
    mulo-dibuja 1.7s cubic-bezier(.45,.05,.55,.95) .1s forwards,
    mulo-tinta .5s ease 1.8s forwards,
    mulo-viste .4s ease 2.3s forwards,
    mulo-asienta .95s cubic-bezier(.22,.9,.3,1) 2.7s forwards;
}
@keyframes mulo-viste{
  from{ color:var(--blanco); fill:var(--blanco); }
  to  { color:var(--hero-tinta); fill:var(--hero-tinta); }
}
.hero--claro.hero-anim .hero-word{ animation-delay:3.1s; }
.hero--claro.hero-anim .hero-sub{ animation-delay:3.45s; }
.hero--claro.hero-anim .hero-scroll{ animation-delay:3.9s; }

/* Lo que nace fuera de pantalla no se maqueta hasta acercarse: el lag de la entrada
   no era la animacion, eran dos atascos de layout (el inicial de toda la pagina y el
   recolocado al llegar las fuentes). Con esto, ambos se quedan en el primer pantallazo. */
#carta, .encargo, .obrador, .novedades, .visita{
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}
/* el pie queda FUERA a proposito: al ser lo ultimo del documento, expandirse movia el
   suelo bajo el scroll y la firma acababa por encima del borde superior. */

/* ============================ CARTA/* ============================ CARTA ============================ */
.carta-head{
  padding:clamp(44px,7vw,88px) var(--pad) clamp(20px,3vw,34px);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px;
}
.carta-head p.lead{ max-width:34ch; color:var(--gris); font-size:14px; }

.rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.pieza{ position:relative; background:var(--blanco); }
.pieza-media{ position:relative; overflow:hidden; aspect-ratio:1/1; }
.pieza-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,.84,.44,1); }
.pieza:hover .pieza-media img{ transform:scale(1.035); }
/* min-height y no height: la altura fija cortaba las letras por la mitad en tactil
   (nombre a dos lineas + descripcion superaban los 108px de --info-h y el overflow
   se comia el resto). Con min-height las filas de la rejilla siguen igualadas
   —cada fila crece a la carta mas alta— pero ninguna letra se corta. */
.pieza-info{ padding:12px 14px 12px; min-height:var(--info-h); }
.pieza-nombre{
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.pieza-precio{ font-size:13px; color:var(--gris); margin-top:3px; }
/* tope de 3 lineas con elipsis: si una descripcion se alarga, corta en linea
   entera con puntos suspensivos (el texto completo vive en la ficha) */
.pieza-desc{
  font-size:12.5px; color:var(--gris); margin-top:6px; line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* superposición de encargo: solo escritorio con puntero fino */
.pieza-overlay{
  position:absolute; inset:0; background:rgba(11,11,11,.78); color:var(--blanco);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px; text-align:center; opacity:0; transition:opacity .35s ease;
}
/* al pasar el ratón, el nombre y el precio salen sobre la propia foto,
   los dos con exactamente el mismo tratamiento */
.pieza-overlay .ov-nombre,
.pieza-overlay .ov-precio{
  font-size:15px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
  color:var(--blanco);
}
.pieza-overlay .ov-precio{ margin-top:2px; }
.pieza-overlay p{ font-size:12.5px; line-height:1.5; color:#D8D8D8; max-width:26ch; }
.pieza-overlay .encargar{
  border:1px solid var(--blanco); padding:9px 18px; margin-top:2px;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
/* la destacada tiene más sitio: nombre y precio pueden respirar, siempre a la par */
.pieza.destacada .pieza-overlay .ov-nombre,
.pieza.destacada .pieza-overlay .ov-precio{ font-size:19px; }
@media (hover:hover) and (pointer:fine){
  .pieza:hover .pieza-overlay{ opacity:1; }
  .pieza-desc{ display:none; }
}
/* En tactil no hay hover: el boton seguia ahi, invisible y clicable, asi que la foto
   abria la ficha sin que nada lo anunciara. Se deja SOLO la accion, anclada abajo a la
   izquierda, sin velo: la rejilla sigue limpia y la pieza deja de ser un boton secreto. */
@media (hover:none){
  .pieza-overlay{
    opacity:1; background:transparent; padding:10px;
    justify-content:flex-end; align-items:flex-start; gap:0;
  }
  .pieza-overlay .ov-nombre,
  .pieza-overlay .ov-precio{ display:none; }
  /* discreto a proposito: 22 cajas negras rompian la limpieza de la rejilla.
     Se queda en una linea fina sobre velo corto, legible sobre foto clara u oscura. */
  .pieza-overlay .encargar{
    margin:0; border:0; padding:0 0 1px; font-size:9.5px; letter-spacing:.1em;
    border-bottom:1px solid rgba(255,255,255,.85);
    text-shadow:0 1px 4px rgba(11,11,11,.9);
  }
  .pieza-overlay{ background:linear-gradient(to top, rgba(11,11,11,.42) 0%, transparent 34%); }
}
/* Con teclado el foco caia en las 22 piezas sin que se viera nada: el overlay solo
   se encendia en :hover. Ahora tambien al enfocar. */
.pieza:focus-within .pieza-overlay{ opacity:1; }

/* pieza destacada: ocupa dos columnas y dos filas */
.pieza.destacada{ grid-column:span 2; grid-row:span 2; }
.pieza.destacada .pieza-media{ aspect-ratio:auto; height:calc(100% - var(--info-h)); min-height:0; }
.pieza.destacada .pieza-nombre{ font-size:12px; }


/* ---------- LA CABECERA DE CADA FAMILIA ----------
   No es el hero del index y no repite su animacion: aqui la marca ya se presento en la
   pagina anterior y lo que tiene que leerse es el NOMBRE de la familia. Media pantalla, la
   foto debajo del velo y el titular apoyado abajo a la izquierda, que es donde cae la vista
   al terminar de pasar la cabecera. */
/* La cabecera de familia YA NO LLEVA FOTO: es blanco liso, el mismo papel del resto de la
   pagina. Con la imagen detras habia que velarla hasta la penumbra para que el titular y el
   dia de recogida se leyeran encima, y una foto que solo se intuye no vende nada. La foto
   se ha ido al final del apartado, donde ocupa la pantalla entera sin competir (.cierre).
   En blanco la franja encoge: sobre negro el hueco se leia como una decision, sobre el
   papel de la pagina es sitio vacio y nada mas. */
.pagina-hero{
  position:relative; overflow:hidden;
  min-height:clamp(230px,32svh,340px);
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + clamp(24px,5vh,52px)) var(--pad) clamp(26px,4vh,44px);
  background:var(--blanco); color:var(--negro);
}
.pagina-hero-texto{ position:relative; z-index:2; width:100%; }

/* EL DIA DE RECOGIDA, DENTRO DEL HERO.
   Aqui NO se repite la caja de #encargo: alli el selector es una pieza cerrada —borde y
   fondo propio— porque flota sobre una foto clara y necesita su propio suelo. En el hero
   el velo ya oscurece toda la franja, asi que basta con la etiqueta, la fecha y el boton,
   sin caja: una caja mas dentro del hero lo convertiria en un formulario y esto tiene que
   seguir leyendose como una portada.
   La fecha se queda en cuerpo grande —es lo que hay que tocar— y el boton a su lado, no
   debajo: en una franja de media pantalla, apilarlos empujaba el titular fuera de plano. */
.ph-encargo{ margin-top:clamp(14px,2.4vh,22px); max-width:560px; }
/* Todo esto estaba pintado para fondo negro. Sobre papel blanco hay que darle la vuelta
   entera, y no basta con cambiar la tinta:
   · color-scheme pasa a light, o el calendario nativo del navegador sigue saliendo oscuro
     dentro de una pagina clara;
   · el aviso deja el verde pastel —2,2x sobre blanco, ilegible— y se va al gris de dato del
     sistema, que es lo que llevan el precio y los pies de foto;
   · el error cambia de naranja claro a uno quemado que sí cumple AA sobre blanco (5,9x);
   · el boton se invierte: en negro sobre negro era blanco, aqui blanco sobre blanco no se
     veria, asi que va negro y al pasar el raton se vacia. */
.ph-etq{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.ph-fila{ display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
.ph-encargo input[type="date"]{
  background:transparent; border:0; border-bottom:1px solid var(--gris-linea);
  color:var(--negro); font-family:var(--sans);
  font-size:clamp(1.2rem,2.2vw,1.7rem); font-weight:500; letter-spacing:-.02em;
  padding:7px 2px; color-scheme:light; flex:1 1 190px; min-width:0;
}
.ph-encargo input[type="date"]:focus{ border-bottom-color:var(--acento-tinta); outline:none; }
.ph-encargo .btn-wa{
  margin-top:0; padding:12px 20px; flex:0 0 auto;
  background:var(--negro); color:var(--blanco); border-color:var(--negro);
}
.ph-encargo .btn-wa:hover{ background:transparent; color:var(--negro); }
.ph-encargo .aviso{ font-size:12.5px; color:var(--gris); margin-top:9px; min-height:1.2em; }
.ph-encargo .aviso.error{ color:#A04D14; }

@media (max-width:560px){
  /* en el movil el boton baja: a lo ancho, fecha y boton se partian en dos lineas rotas */
  .ph-encargo input[type="date"]{ flex:1 1 100%; }
  .ph-encargo .btn-wa{ width:100%; justify-content:center; }
}

/* ---------- CLUB LE MULÉ ----------
   Hereda de .encargo el fondo, el velo y el negro: es la misma pausa entre la carta y
   Visitanos, con otra cosa escrita encima. Lo que cambia es la caja: el encargo necesitaba
   dos columnas —texto y selector—, y aqui solo hay un mensaje, asi que va en UNA columna
   estrecha y alineada a la izquierda, donde el velo esta mas cerrado y la tinta blanca
   aguanta sobre la foto de la sala.
   El boton no lleva margen propio: lo pone el flujo, para que respire lo mismo que el
   apunte de arriba. */
/* Hereda de .encargo el fondo, el velo y el negro, y tambien su reparto en dos columnas: el
   mensaje a la izquierda, donde el velo esta mas cerrado, y las ventajas a la derecha. La
   seccion sigue pesando lo mismo que cuando ahi iba el selector de fecha.
   Se doblan las clases (.encargo.club) en lo que hay que pisar: este bloque va antes que el
   de .encargo en el archivo, y a igual especificidad ganaba aquel. */
.club-grid{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; width:100%;
  /* El bloque de texto mide 271 px y tenia una columna de 610: 340 px de holgura que no
     usaba nadie. Se le pasan a la lista, que es la que iba justa y partia las tres ventajas
     en dos lineas. */
  display:grid; grid-template-columns:.7fr 1.3fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
/* LA FOTO SE FUNDE CON EL PIE. Terminaba en una linea recta contra el negro del footer y se
   veia el corte, como si la pagina se hubiera cortado ahi. Este degradado apaga la imagen
   hacia abajo hasta el mismo negro del pie, asi que la seccion no acaba: se desvanece.
   Va en ::before porque ::after ya lleva el velo lateral de .encargo, y ambos por debajo de
   .club-grid (z-index:2), que si no se comerian el texto. */
.encargo.club::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,11,11,0) 0%, rgba(11,11,11,.45) 42%, rgba(11,11,11,.85) 78%, var(--negro) 100%);
}
.encargo.club h2{ font-size:clamp(2.6rem,5.6vw,4.9rem); }
.encargo.club .apunte{
  margin-top:16px; max-width:32ch;
  font-size:clamp(17px,1.5vw,20px); color:var(--blanco); letter-spacing:-.01em;
}

/* Las ventajas llevan el tratamiento del NOMBRE DE UNA PIEZA de la carta —versalitas, peso
   600 y el tracking abierto de .pieza-nombre—, no un cuerpo de texto corrido. Asi el club no
   estrena tipografia propia: se lee como una linea mas del mostrador.
   Sube de 12 a 13,5 px y abre el interlineado a 1,7: lo que en la carta es una etiqueta de
   dos palabras aqui son frases de hasta dos lineas, y en versalitas apretadas se leian como
   un muro. Sin numero y sin caja; lo que las separa es la linea fina del pie de la carta. */
.club-ventajas{ list-style:none; margin:0; padding:0; }
/* PUNTO EN VEZ DE RAYA. Las lineas de separacion encajonaban la lista: tres reglas de lado
   a lado sobre una foto pesan mas que las propias frases, y ademas repetian el recurso del
   pie de la carta en un sitio donde no hace falta separar nada —son tres ideas, no una
   tabla—. El punto las enumera sin dibujar cajas y deja respirar la foto de detras.
   Va en sangria francesa: el punto, fuera del texto en absolute, y las lineas que doblan
   entran alineadas con la primera y no debajo de la viñeta.
   Se sube un pelo (top) porque el punto se apoya en la mitad de la x y el texto va en
   VERSALITAS: contra mayusculas se veia bajo, colgando del renglon. */
.club-ventajas li{
  position:relative; padding:0 0 0 clamp(20px,1.6vw,28px);
  font-size:clamp(17px,2vw,26px); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.5; color:var(--blanco);
}
.club-ventajas li + li{ margin-top:clamp(32px,5.6vh,58px); }
.club-ventajas li::before{
  content:"•"; position:absolute; left:0; top:-.06em;
  color:var(--blanco); font-weight:600;
}

@media (max-width:900px), (hover:none){
  /* Las dos columnas se apilan: a 390 px, mantenerlas al lado dejaba cada una en 170 px y
     las ventajas salian a cuatro y cinco lineas cada una, como una columna de periodico.
     Con el alto que escasea en vertical, la lista aprieta su interlineado. */
  .club-grid{ grid-template-columns:1fr; gap:clamp(18px,3vh,28px); }
  .club-ventajas li{ line-height:1.45; }
  .club-ventajas li + li{ margin-top:28px; }
  .encargo.club .apunte{ margin-top:12px; }
  .club-puerta{ margin-top:20px; }
}

/* ---------- EL MULO QUE ABRE EL CLUB ----------
   Entra dibujado solo por el contorno y al mirarlo se rellena de tinta: es el mismo camino
   que hace la marca en la portada cuando termina de trazarse, y aqui sirve de aviso de que
   la pieza responde. Se animan DOS dibujos superpuestos y no un fill: el simbolo solido y
   el de contorno son trazados distintos, asi que no hay nada que interpolar entre ellos.
   Lleva rotulo debajo porque un icono suelto no dice que se pueda pulsar; el mulo manda de
   tamaño, el rotulo solo confirma. */
/* El burro y su pista van juntos en una caja que se encoge al ancho del DIBUJO: asi el
   "(Pulsa en el burro)" queda centrado bajo el burro y no bajo la columna entera, que es
   mucho mas ancha y lo dejaba descolgado a la izquierda. */
/* La caja ocupa la columna entera y centra lo que lleva dentro: asi el burro queda en el
   eje del titulo que tiene encima, y su pista debajo, sin mover de sitio nada mas. El BOTON
   sigue encogido al dibujo —inline-block— porque a lo ancho de la columna se estaria
   pulsando medio apartado vacio. */
/* EL BURRO VA CENTRADO BAJO EL TEXTO, no bajo la columna. La diferencia importa: la
   columna mide 610 px y el texto ocupa unos 275 —lo que da de si "Le Mulé"—, asi que
   centrarlo en la columna lo dejaba flotando en mitad de un hueco vacio, lejos de aquello
   de lo que cuelga.
   Se resuelve encogiendo la CAJA DEL TEXTO a su contenido (width:fit-content): a partir de
   ahi el eje del bloque es el del titulo, y el burro y su pista se centran en el sin tener
   que medir nada a mano ni repetir anchos. */
/* El texto va ALINEADO A LA IZQUIERDA: las tres lineas —"Club", "Le Mulé" y la frase—
   arrancan todas en el mismo borde.
   La caja NO se mueve de sitio: sigue encogida a su contenido (fit-content, o sea lo que
   mide "Le Mulé", la linea mas larga) y anclada donde estaba. Lo unico que cambia es que
   las lineas cortas dejan de repartir su sobrante a los dos lados y lo echan todo a la
   derecha.
   El burro conserva su propio text-align:center, asi que se queda centrado sobre la caja y
   no se mueve con el texto. */
.club-texto{ width:fit-content; text-align:left; }
.club-puerta{
  --burro:clamp(96px,9.6vw,139px);
  display:block; width:100%; text-align:center;
  margin-top:clamp(22px,3.4vh,38px);
  /* Un pelo a la izquierda. Con el texto alineado a la izquierda su tinta pesa a ese lado
     —"Club" y la frase son mas cortas que "Le Mulé"—, asi que el burro clavado en el centro
     geometrico de la caja se veia corrido. Se corre el 10 % del ancho del bloque, que a 1440
     son 27 px y a 390 unos 18: escala con el texto en vez de ser un numero fijo.
     Va en el contenedor, no en el dibujo, para que la pista de debajo se mueva con el. */
  transform:translateX(-10%);
}
.club-mulo{
  background:transparent; border:0; padding:0; cursor:pointer;
  display:inline-block; color:var(--blanco);
}
/* El simbolo trae aire de sobra dentro de su viewBox: a 100 px de caja el burro se
   quedaba en unos 47 de tinta y no se leia como un boton. La caja se agranda hasta que
   el DIBUJO manda, que es lo que se pulsa. */
.cm-dibujo{ position:relative; display:block; width:var(--burro); }
.cm-dibujo svg{ display:block; width:100%; height:auto; fill:currentColor; fill-rule:evenodd; }
.cm-tinta{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.club-mulo:hover .cm-tinta,
.club-mulo:focus-visible .cm-tinta{ opacity:1; }
.cm-linea{ transition:opacity .45s ease; }
.club-mulo:hover .cm-linea,
.club-mulo:focus-visible .cm-linea{ opacity:0; }
/* La indicacion NO va dentro del boton ni lleva subrayado: es una nota, no una segunda
   puerta. Con el tratamiento de rotulo se leia como un enlace y hacia dudar de si habia
   que pulsar el burro o la linea de debajo. Va en el gris de noche —6,1x sobre el velo—,
   en caja baja y sin tracking, para que no compita con las ventajas de al lado. */
.club-pista{
  margin-top:12px; font-size:12.5px; color:var(--gris-noche); letter-spacing:0;
  /* Un pelin mas a la izquierda que el burro. El bloque entero ya va corrido un 10 %
     (ver .club-puerta); esto es SOLO para la nota, que centrada a plomo bajo el dibujo
     se veia pegada a la derecha —el parentesis de cierre abulta menos que el de apertura
     y la linea no pesa donde parece—. Va en em y no en px: es un ajuste de la letra, asi
     que se mueve con ella y no con el ancho de la pantalla. */
  transform:translateX(-0.8em);
}
@media (prefers-reduced-motion:reduce){
  .cm-tinta, .cm-linea{ transition:none; }
}

/* ---------- LA PUERTA DEL CLUB, FLOTANTE ----------
   Abajo a la IZQUIERDA, a ras del suelo y metido un poco por el lado. En reposo es solo el cuadrado con el burro —igual que
   alli, donde el boton no lleva rotulo—; el nombre aparece al acercarse, desplegandose
   hacia la izquierda, que es el lado libre.
   Sin radio ni sombra: el sistema no tiene ninguna de las dos, asi que lo que lo despega
   del fondo es el blanco pleno y una linea fina. */
.club-flotante{
  position:fixed; left:clamp(14px,1.4vw,20px); bottom:0; z-index:90;
  display:flex; align-items:center; padding:0; cursor:pointer;
  /* Apoyado en el suelo pero metido un poco por la izquierda. Solo el lado de ABAJO se queda
     sin borde: es el unico que toca la pantalla, y una linea ahi no separaria de nada —fuera
     no hay pagina— y delataria que el cuadrado esta pegado encima en vez de nacer del borde.
     El de la izquierda si dibuja, que ahora ya da al contenido. */
  border:1px solid var(--gris-linea); border-bottom:0;
  background:var(--blanco); color:var(--negro);
  transition:background .25s ease, color .25s ease, border-color .25s ease,
              opacity .3s ease, transform .3s cubic-bezier(.16,.84,.44,1);
}
/* fuera de su sitio se va hacia abajo mientras se apaga: asi no desaparece de golpe, se
   mete por el borde por el que ha entrado */
.club-flotante.oculto{ opacity:0; transform:translateY(12px); pointer-events:none; }
.cf-cuadro{
  flex:0 0 auto; width:62px; height:62px;
  display:flex; align-items:center; justify-content:center;
  color:var(--oro);            /* el mulo, en el oro de la marca; el rotulo sigue en tinta */
  transition:color .25s ease;  /* acompana al vuelco de fondo del boton */
}
.cf-cuadro svg{ width:58%; height:auto; fill:currentColor; fill-rule:evenodd; }
/* El nombre en reposo mide CERO: nada de esconderlo con opacidad, que seguiria ocupando su
   sitio y el boton no seria un cuadrado. Se abre al mirarlo y arrastra el ancho con el. */
.cf-nombre{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:max-width .34s cubic-bezier(.16,.84,.44,1), padding .34s ease;
}
.club-flotante:hover .cf-nombre,
.club-flotante:focus-visible .cf-nombre{ max-width:180px; padding-right:18px; }
.club-flotante:hover{ background:var(--negro); color:var(--blanco); border-color:var(--negro); }
.club-flotante:hover .cf-cuadro{ color:var(--oro-claro); }

/* con el panel lateral abierto el boton estorba: es una puerta a otro sitio mientras se
   esta dentro de uno */
body.menu-abierto .club-flotante{ opacity:0; pointer-events:none; }

@media (max-width:760px){
  /* la barra fija de abajo mide 50 px y ocupa el suelo: aqui "a ras" es a ras de ELLA, que
     apoyado en el borde de la pantalla quedaria debajo y no se veria */
  .club-flotante{ bottom:50px; left:12px; }
  .cf-cuadro{ width:52px; height:52px; }
}
@media (hover:none){
  /* sin raton no hay forma de desplegar el nombre: el boton se queda en el cuadrado y su
     nombre lo pone el aria-label, que es lo que lee un lector de pantalla */
  .cf-nombre{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cf-nombre{ transition:none; }
}

/* ---------- EL POPUP DEL CLUB ----------
   Mismo patron que la ficha de producto —<dialog> nativo, fondo velado, cierre por X, por
   Escape y pulsando fuera— pero no hereda de .ficha: aquella es una pieza de dos columnas
   con foto a sangre y esto es una sola columna de formulario. Blanco sobre el velo negro,
   como el resto de las capas de la web. */
.club-dialogo{
  border:0; padding:0; width:min(900px, 94vw); max-height:92svh;
  background:var(--blanco); color:var(--negro); overflow:auto;
  /* NADA de position aqui: un dialogo modal ya viene fixed del navegador y sale centrado
     sobre lo que se esta mirando. Al ponerle position propia dejaba de flotar, se maquetaba
     donde vive en el documento —al final de todo— y el navegador SE DESPLAZABA 712 px hasta
     alli para enseñarlo. El boton de cerrar sigue teniendo su contenedor: un elemento fixed
     tambien hace de bloque contenedor para lo que lleve dentro en absolute. */
}
.club-dialogo::backdrop{ background:rgba(11,11,11,.86); }
.club-cerrar{
  position:absolute; top:0; right:0; z-index:2;
  width:52px; height:52px; border:0; background:transparent; color:var(--negro);
  font-size:30px; line-height:1; cursor:pointer;
}
.club-cerrar:hover{ color:var(--acento-tinta); }

.club-form{ padding:clamp(26px,4vw,40px); display:flex; flex-direction:column; }
/* EL LOGO DEL CLUB. La marca de la casa con "Club" delante, montada como en la cabecera:
   simbolo a la izquierda y nombre en Cinzel, que es el logotipo. Da remitente al dialogo,
   que si no se abre una caja blanca de nadie, y de paso ata el club a la marca sin estrenar
   una identidad aparte para tres campos de formulario. */
.club-logo{
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px; color:var(--negro);
}
.club-logo-mulo{ width:44px; height:auto; fill:currentColor; fill-rule:evenodd; }
.club-logo-texto{
  font-family:var(--marca); font-size:17px; letter-spacing:.13em; text-transform:uppercase;
}
/* En el POPUP el logo manda mas que en el resto: es lo primero que se ve al abrirse y lo
   que dice de quien es la caja. Se sube el bloque entero —dibujo, nombre y el aire entre
   ellos— para que no se descompense. Va scopeado al dialogo: el mismo logo aparece en el
   panel del carrito, que tiene sus propias medidas. */
/* Va en clamp y no en un escalon de media query porque el popup encoge con la pantalla
   —min(460px, 92vw)— mientras la X de cerrar se queda clavada arriba a la derecha con sus
   52 px. Con un salto seco quedaba holgado a 360 px y la E de MULE se metia debajo de la X
   a 320. Asi el logo baja al mismo ritmo que la caja y el aire no se pierde en ningun ancho.
   Tope arriba a partir de 500 px de pantalla, que es donde el dialogo ya no crece mas. */
.club-dialogo .club-logo{ gap:clamp(10px, -0.67px + 3.33vw, 16px); margin-bottom:clamp(20px,4vw,30px); }
.club-dialogo .club-logo-mulo{ width:clamp(44px, -23.56px + 21.11vw, 82px); }
.club-dialogo .club-logo-texto{ font-size:clamp(17px, -0.78px + 5.56vw, 27px); }
.club-form h3{
  font-size:clamp(1.5rem,3vw,1.9rem); font-weight:600; letter-spacing:-.03em; line-height:1.05;
}
.club-form-apunte{
  margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--gris); max-width:36ch;
}

/* Los campos toman el dibujo del selector de recogida: sin caja, solo la linea de abajo, y
   la etiqueta arriba en versalitas. Asi el formulario no estrena un lenguaje de controles
   propio —la web no tiene ni un input con borde completo— y se lee como parte de la casa. */
/* LAS TRES VENTAJAS, DENTRO DEL POPUP. Son las palabras de Miguel (21/08/2026), no un
   resumen: quien lo ve por primera vez —el popup salta solo— tiene que saber que gana antes
   de dar su correo. Lista sin caja, con el dato en negrita y el detalle en cuerpo. */
.club-form-ventajas{ list-style:none; margin:14px 0 0; padding:0; }
.club-form-ventajas li{
  position:relative; padding-left:16px; margin-top:8px;
  font-size:13.5px; line-height:1.5; color:#2E2E2E;
}
.club-form-ventajas li::before{ content:"•"; position:absolute; left:0; top:0; color:var(--negro); }
.club-form-ventajas strong{ font-weight:600; color:var(--negro); }
.club-campo{ margin-top:22px; }
.club-campo label,
.club-etq{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.club-campo input,
.club-cumple select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--gris-linea);
  color:var(--negro); font-family:var(--sans); font-size:1.05rem; font-weight:500;
  letter-spacing:-.01em; padding:9px 2px; margin-top:6px;
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.club-campo input:focus,
.club-cumple select:focus{ border-bottom-color:var(--acento-tinta); outline:none; }
/* el campo que se queda vacio al enviar se marca en el color del error, no solo con el
   mensaje: con tres campos, un aviso suelto arriba no dice CUAL falta */
.club-campo input[aria-invalid="true"],
.club-cumple select[aria-invalid="true"]{ border-bottom-color:#A04D14; }

.club-cumple{ display:grid; grid-template-columns:1fr 1.6fr; gap:14px; }
/* sin appearance el select pierde la flecha del sistema: se le dibuja una con un fondo
   svg, del mismo gris de linea que el resto */
.club-cumple select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236E6E6E' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 2px center; background-size:11px;
  padding-right:20px; cursor:pointer;
}

.club-aviso{ margin-top:16px; font-size:12.5px; line-height:1.45; color:var(--gris); min-height:1.2em; }
.club-aviso.error{ color:#A04D14; }
.club-aviso.ok{ color:var(--acento-tinta); }

.club-enviar{
  margin-top:18px; width:100%; cursor:pointer;
  background:var(--negro); color:var(--blanco); border:1px solid var(--negro);
  padding:14px 24px; font-size:12px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; transition:background .2s, color .2s;
}
.club-enviar:hover{ background:transparent; color:var(--negro); }
.club-enviar[disabled]{ opacity:.45; cursor:default; }
.club-enviar[disabled]:hover{ background:var(--negro); color:var(--blanco); }

@media (max-width:900px), (hover:none){
  .club-puerta{ margin-top:20px; }
  .club-puerta{ --burro:86px; }
}

/* ---------- LA CARRETILLA EN LA BARRA ----------
   El carrito de la casa. Va al extremo derecho, despues del CTA, y lleva la cuenta pegada
   arriba. La cuenta se esconde vacia: un cero permanente en la barra es ruido, y ademas
   asi la pieza no reserva sitio hasta que hay algo que contar. */
/* El icono es una escena apaisada (2:1), no un cuadrado: se dimensiona por ALTURA, que es
   lo que tiene que casar con el resto de la barra, y el ancho lo pone el dibujo. Va
   RELLENO, no de trazo: la silueta es lo que lo hace legible a este tamaño. */
/* EL CONTADOR, ENCIMA DE LA CAJA DEL CARRO. No al lado ni en la esquina: sobre la caja,
   que es donde se echa la compra. El 27,4 % es el centro de esa caja medido sobre los
   pixeles del dibujo original —va de x=183 a x=850 de 1881—, y va en PORCENTAJE para que
   siga cuadrando cuando el icono cambia de tamaño entre escritorio y movil.
   Sin globo ni circulito rojo de tienda: una cifra en tinta plena, que el sistema no tiene
   ni radios ni burbujas. */
/* con el panel abierto la barra se queda sin fondo: la carretilla se va con la marca */

/* ---------- EL PANEL ----------
   Mismo patron que la ficha y que el alta del club: <dialog> nativo, velo, Escape y clic
   fuera. Entra pegado a la derecha y a toda la altura, no centrado: es una CARRETILLA que
   se llena mientras se mira la carta, y una caja en mitad de la pantalla la convertiria en
   un tramite. */
.cesta{
  border:0; padding:0; margin:0 0 0 auto;
  width:min(920px,96vw); max-width:none; height:100svh; max-height:100svh;
  background:var(--blanco); color:var(--negro); overflow:hidden;
}
.cesta::backdrop{ background:rgba(11,11,11,.86); }

/* DOS COLUMNAS: a la izquierda lo que se puede añadir, a la derecha lo que ya llevas.
   Separarlas es lo que deja limpio el carrito —las sugerencias colgaban debajo del total y
   se leian como parte del pedido—. Cada columna con su scroll: la carta puede tener veinte
   piezas y el pedido tres, y no tienen por que arrastrarse la una a la otra. */
.cesta-marco{ display:grid; grid-template-columns:minmax(0,352px) minmax(0,1fr); height:100%; }
/* sin nada que ofrecer, el carrito se queda con todo el ancho */
.cesta-marco:has(> .subcarro[hidden]){ grid-template-columns:minmax(0,1fr); }

.subcarro{
  overflow:auto; border-right:1px solid var(--gris-linea);
  padding:clamp(26px,4vw,40px) clamp(22px,2.6vw,30px);
}
/* El rotulo arranca ARRIBA DEL TODO, a la altura del borde superior del panel. Llego a
   bajarse para que su raya cuadrase con la del carrito de al lado, pero eso dejaba una
   franja vacia de 85 px encima de un titulo, que es justo lo que se nota. El aire sobrante
   se va al final de la columna, debajo de la ultima pieza, donde no lo mira nadie. */
.subcarro-titulo{
  margin:0 0 14px; padding-bottom:18px; border-bottom:1px solid var(--gris-linea);
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.subcarro-lista{ list-style:none; margin:0; padding:0; }

.cesta-cuerpo{
  overflow:auto;
  padding:clamp(26px,4vw,40px); display:flex; flex-direction:column; min-height:100%;
}
/* El simbolo del carrito es apaisado (2,25:1): se dimensiona por ALTURA para que case con
   las mayusculas de "LE MULÉ". Por ancho, como el mulo suelto, saldria diminuto y con el
   trazo cerrado sobre si mismo.
   El conjunto va mas grande que el logo del club: aqui es la cabecera de un panel entero,
   no una linea de remitente en una caja de formulario, y ademas el dibujo tiene detalle que
   a 30 px se perdia. Se escala TODO el bloque —dibujo, nombre y aire— para que no se
   descompense, y solo dentro de .cesta: el popup del club se queda como estaba. */
/* el mulo del encargo: silueta solida, que el contorno fino a este tamaño no se leia */
.cesta-mulo{ display:block; width:52px; height:auto; fill:currentColor; fill-rule:evenodd; color:var(--negro); margin-bottom:18px; }
.cesta .club-logo{ gap:14px; margin-bottom:26px; }
.cesta .club-logo-texto{ font-size:22px; letter-spacing:.12em; }
.cesta-cuerpo h3{
  font-size:clamp(1.5rem,3vw,1.9rem); font-weight:600; letter-spacing:-.03em; line-height:1.05;
}
.cesta-vacia{ margin-top:16px; font-size:13.5px; line-height:1.5; color:var(--gris); }

.cesta-lista{ list-style:none; margin:22px 0 0; padding:0; }
/* La linea del pedido lleva la foto delante, como la del sub-carrito: al revisar lo que
   llevas se reconoce la pieza antes de leer el nombre. Iba a baseline, que con una imagen
   al lado descuadra —la linea base del texto no tiene que ver con el alto de la foto—, y
   ahora manda el centro. */
.cesta-lista li{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto auto;
  align-items:center; gap:16px;
  padding:16px 0; border-top:1px solid var(--gris-linea);
}
/* una pieza guardada antes de que hubiera fotos no reserva la columna */
.cesta-lista li.sin-foto{ grid-template-columns:minmax(0,1fr) auto auto; }
.cesta-lista .cesta-foto{
  display:block; width:64px; height:88px; object-fit:cover; background:var(--gris-linea);
}
.cesta-nombre{ font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.cesta-precio{ display:block; margin-top:3px; font-size:12.5px; color:var(--gris); }
/* los mas y menos son texto, no botones dibujados: el sistema no tiene controles con caja */
.cesta-cantidad{ display:flex; align-items:center; gap:10px; }
.cesta-cantidad button{
  border:0; background:transparent; cursor:pointer; padding:2px 4px;
  font-size:16px; line-height:1; color:var(--gris);
  transition:color .2s ease;
}
.cesta-cantidad button:hover{ color:var(--negro); }
.cesta-cantidad span{ font-size:13px; font-weight:600; min-width:14px; text-align:center; }
.cesta-quitar{
  border:0; background:transparent; cursor:pointer; padding:2px;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris);
  text-decoration:underline; text-underline-offset:3px;
}
.cesta-quitar:hover{ color:#A04D14; }

.cesta-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--negro);
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.cesta-total span:last-child{ font-size:1.25rem; letter-spacing:-.01em; text-transform:none; }

/* LA FILA DEL SUB-CARRITO: foto a la izquierda y, a su lado, nombre, precio y boton en
   pila. En 300 px de columna el boton no cabe en una tercera columna, y debajo del precio
   es ademas donde se decide: primero se ve la pieza, luego lo que cuesta, luego se añade. */
.subcarro-lista li{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px;
  align-items:start;
  padding:18px 0; border-bottom:1px solid var(--gris-linea);
}
.subcarro-lista li:first-child{ padding-top:0; }
.subcarro-lista li:last-child{ border-bottom:0; }
/* Cuadrada y a sangre, como las piezas de la carta: el sistema no tiene radios ni marcos.
   Con width/height en el HTML el navegador reserva el hueco antes de descargarla y la
   lista no pega el salto al cargar. */
/* Vertical y no cuadrada: es el formato en el que la pieza se ve mas grande dentro de una
   columna estrecha, y lo que hace que apetezca. A sangre, sin marco ni radio, como en la
   carta. El recorte lo hace object-fit sobre la miniatura cuadrada. */
.subcarro-lista .us-foto{
  display:block; width:96px; height:132px; object-fit:cover; background:var(--gris-linea);
}
.subcarro-lista .us-texto{ display:flex; flex-direction:column; align-items:flex-start; }
.subcarro-lista .us-nombre{ font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.subcarro-lista .us-precio{ margin-top:7px; font-size:13px; color:var(--gris); }
.subcarro-lista button{
  margin-top:14px;
  border:1px solid var(--gris-linea); background:transparent; cursor:pointer;
  padding:6px 14px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s, color .2s, border-color .2s;
}
.subcarro-lista button:hover{ background:var(--negro); color:var(--blanco); border-color:var(--negro); }

/* El cierre —total, boton y nota— se pega al fondo de la columna. El margin-top:auto iba
   antes en el propio boton y NO llegaba a aplicarse: .btn-wa se declara mas abajo en esta
   hoja con margin-top:22px y, a igual especificidad, gana la ultima. Aqui va en el envoltorio,
   que no comparte clase con nada. */
.cesta-cierre{ margin-top:auto; }
.cesta-enviar{ width:100%; justify-content:center; }
.cesta-enviar[disabled]{ opacity:.4; cursor:default; }
.cesta-enviar[disabled]:hover{ background:var(--blanco); color:var(--negro); }
.cesta-nota{ margin-top:12px; font-size:11.5px; line-height:1.5; color:var(--gris); }

/* EL DIA, EN EL CARRITO. Deliberadamente pequeno: no compite con el total ni con el boton,
   solo confirma la fecha que ya se eligio y ofrece la salida para cambiarla. */
.cesta-dia{
  margin-top:12px; font-size:12px; line-height:1.6; color:var(--gris);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.cesta-dia strong{ color:var(--negro); font-weight:600; }
.cesta-dia-btn{ font-size:10px; letter-spacing:.12em; color:var(--gris); }
.cesta-dia-btn:hover{ color:var(--negro); }
.cesta-dia-caja{ margin-top:10px; }
.cesta-dia-etq{
  display:block; font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.cesta-dia-input{
  width:100%; margin-top:6px; background:transparent;
  border:0; border-bottom:1px solid var(--gris-linea);
  color:var(--negro); font-family:var(--sans); font-size:1.05rem; font-weight:500;
  letter-spacing:-.01em; padding:6px 2px; color-scheme:light;
}
.cesta-dia-input:focus{ border-bottom-color:var(--negro); outline:none; }
.cesta-dia-aviso{ margin-top:6px; font-size:11.5px; line-height:1.5; color:#A04D14; min-height:0; }

/* el boton de la ficha ya no manda a WhatsApp: echa a la carretilla */
.ficha-anadir{ cursor:pointer; }

@media (max-width:760px){
  .cesta{ width:100vw; overflow:auto; }
  /* Las dos columnas se apilan, y el CARRITO va primero: en vertical, lo primero que se ve
     tiene que ser lo que ya llevas, no lo que te ofrecen. El sub-carrito queda debajo, que
     es donde cae la vista despues del total. Se apaga el scroll propio de cada columna y
     arrastra el panel entero, que con dos cajas cortas es lo natural. */
  /* height:auto es imprescindible aqui. Con el 100% de escritorio el marco sigue midiendo
     la pantalla, las dos filas tienen que repartirse ese alto fijo y —al llevar el carrito
     min-height:0, que anula su minimo automatico— la suya se encoge a 85 px y el contenido
     se derrama ENCIMA del sub-carrito. En vertical mandan las filas, y las filas las mide
     lo que hay dentro; el que arrastra es el panel. */
  .cesta-marco{ grid-template-columns:minmax(0,1fr); height:auto; }
  .cesta-cuerpo{ order:1; overflow:visible; min-height:0; }
  .subcarro{
    order:2; overflow:visible;
    border-right:0; border-top:1px solid var(--gris-linea);
    padding:clamp(22px,5vw,30px) clamp(26px,4vw,40px) clamp(30px,6vw,44px);
  }
}

/* ---------- EL CIERRE DEL APARTADO ----------
   La foto de la familia, a pantalla completa y a su tamaño real. Aqui NO va velo ni
   degradado: no hay texto encima que sostener, y cualquier capa por delante seria
   ensuciar la unica imagen de la pagina que se ve a plena luz.
   100svh y no 100vh: en movil, con la barra del navegador dentro, vh mide de mas y la foto
   se cortaba por abajo justo donde estaba la pieza. */
.cierre{ height:100svh; width:100%; overflow:hidden; background:var(--negro); }
.cierre img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

/* Lo que esta en el mostrador y todavia no tiene ficha. Va el nombre y nada mas: una pieza
   sin precio confirmado no se inventa, y decirla a medias es mejor que no decirla. Cuando
   Miguel confirme cifra y llegue foto, sube a la rejilla y sale de aqui. */
.fam-extra{ padding:clamp(26px,4vw,44px) var(--pad) 0; }
.fam-extra ul{ list-style:none; margin:8px 0 0; padding:0; }
.fam-extra li{ font-size:14px; color:var(--gris); }

/* CAFE Y BEBIDAS. Sin rejilla y sin foto: no hay imagen de cada taza y una ficha vacia por
   bebida seria relleno. Se cuenta como lo que es —la carta de una barra—: una lista a ancho
   de lectura, nombre a la izquierda y precio a la derecha, debajo del hero. Los precios son
   provisionales hasta que Miguel los confirme (2026-08-26). */
.fam-cafe{ padding:clamp(40px,6vw,80px) var(--pad) 0; }
.fam-cafe-texto{
  /* A la IZQUIERDA, no centrada. Se conserva el ancho de lectura —una carta de barra a
     todo lo ancho obligaria a barrer la pantalla entera del nombre al precio— pero el
     bloque arranca en el margen de la pagina, a plomo con el titular, el dia de recogida
     y el pie de la carta. Con margin:0 auto se quedaba flotando en mitad del blanco. */
  max-width:640px; margin:0;
  display:flex; flex-direction:column; gap:16px;
}
.fam-cafe-lista{ list-style:none; margin:0; padding:0; }
/* Nombre, linea de puntos y precio, como en la pizarra de una barra: el punteado une cada
   nombre con su cifra sin que haya que seguir la fila con el dedo. Cuerpo a 19 px: es
   la unica lectura de la pagina y a 15 se quedaba pequena al lado del titular. */
.fam-cafe-lista li{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--gris-linea);
  font-size:clamp(17px,1.35vw,19px); font-weight:600; letter-spacing:-.01em;
}
.fam-cafe-lista li:last-child{ border-bottom:0; }
.fc-nombre{ order:1; flex:0 1 auto; }
.fam-cafe-lista li::after{
  content:""; order:2; flex:1 1 24px; min-width:24px;
  border-bottom:2px dotted var(--gris-linea); transform:translateY(-.3em);
}
.fc-precio{ order:3; font-weight:400; color:var(--gris); white-space:nowrap; font-variant-numeric:tabular-nums; }
.apunte-cafe{ font-size:15px; color:var(--gris); }

/* EL SELECTOR DE ENCARGO. Los titulos de aqui son los mismos .cat de siempre, pero
   comparten columna con el dia de recogida y el boton: al tamaño del hero —2,5 rem— la
   seccion se pasaba de alto y el WhatsApp se caia fuera de pantalla. */
.encargo-que{ margin-bottom:clamp(20px,3vh,30px); }
.encargo-que .cats{ margin-top:8px; }
.encargo-que .cat{ font-size:clamp(1.05rem,1.9vw,1.45rem); padding:3px 0; }
@media (max-height:800px){
  .encargo-que .cat{ font-size:clamp(1rem,1.6vw,1.2rem); padding:2px 0; }
}

.carta-pie{
  padding:clamp(24px,4vw,44px) var(--pad) clamp(48px,7vw,90px);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  border-top:1px solid var(--gris-linea); margin-top:clamp(24px,4vw,44px);
  font-size:13px; color:var(--gris);
}

/* ============================ FIRMA: RECOGIDA ============================ */
.encargo{
  background:var(--negro); color:var(--blanco);
  padding:clamp(48px,7vw,96px) var(--pad);
  min-height:100svh; display:flex; align-items:center;   /* ocupa la pantalla entera */
  position:relative; overflow:hidden;
}
/* La foto de la manana —la que antes abria la web— aqui de fondo fijo de la seccion.
   Ya no cambia con nada: las cuatro fotos de categoria se fueron al hero. */
.encargo-fondo{
  position:absolute; inset:0; z-index:0;
  /* Es decoracion (aria-hidden): NUNCA debe interceptar un clic. Sin esto, cualquier
     descuido de apilado convierte la foto en una capa fantasma que se come la pagina
     —ya paso con el panel del menu movil el 19/08. */
  pointer-events:none;
}
.encargo-fondo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 58%;
  /* La sala es de dia: vitrina, pared blanca y panel mostaza a plena luz. Subir el velo
     hasta tapar esos blancos dejaba la foto en barro, asi que primero se BAJA la foto
     —brightness aplana los altos sin ensuciar el color— y el velo solo tiene que modelar
     de izquierda a derecha. Asi la sala se sigue reconociendo y la tinta blanca aguanta. */
  filter:brightness(.5) saturate(.92);
}
/* El velo sostiene el contraste del texto. La foto de la manana es CLARA —vitrina, panel
   mostaza, pared blanca— y debajo va tinta blanca: sin velo no se lee nada. Se oscurece
   entera, un punto mas por la izquierda, donde vive el titular, y se afloja hacia la
   derecha para que la sala siga reconociendose detras del selector. */
.encargo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,11,11,.87) 0%, rgba(11,11,11,.79) 34%, rgba(11,11,11,.55) 56%,
    rgba(11,11,11,.36) 76%, rgba(11,11,11,.3) 100%);
}
.encargo-grid{
  max-width:1180px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,70px); align-items:center;
  position:relative; z-index:2;
}

/* ---------- las cuatro categorias: titulos, no fichas ---------- */
.cats{ list-style:none; margin:0; padding:0; }
.cats li{ margin:0; }
.cat{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:5px 0;
  color:#8E8A82;
  font-size:clamp(1.5rem,3.1vw,2.5rem); font-weight:600; letter-spacing:-.03em; line-height:1.12;
  transition:color .25s ease, transform .35s cubic-bezier(.16,.84,.44,1);
}
.cat:hover, .cat:focus-visible{ color:var(--blanco); transform:translateX(10px); }
/* elegida: queda en blanco con el subrayado verde de la marca */
.cat[aria-pressed="true"]{ color:var(--blanco); }
.cat[aria-pressed="true"]::after{
  content:""; display:block; height:2px; width:100%; margin-top:2px;
  background:var(--oro-vivo);
}
/* ---------- TU ENCARGO, dentro de #encargo ----------
   Texto, no botones: dice lo que llevas y como se cambia. El boton de "ver o cambiar" va
   vestido de enlace subrayado porque abre un dialogo, no navega. */
/* ---------- TU ENCARGO, como accion ----------
   Vacio: cuatro piezas con foto y "Añadir" —se empieza a montar aqui, sin salir—. Con
   piezas: la lista con cantidades y el total. El boton de WhatsApp del selector cambia de
   peso con el estado: secundario (solo borde) mientras no hay nada, primario cuando hay. */
.encargo-intro{ margin-top:12px; font-size:15px; line-height:1.55; color:var(--gris-noche); max-width:40ch; }
.encargo-rapido, .encargo-lineas{ list-style:none; margin:16px 0 0; padding:0; border-top:1px solid #2A2A2A; }
.encargo-rapido li{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:0 14px; align-items:center;
  padding:10px 0; border-bottom:1px solid #2A2A2A;
}
.encargo-lineas li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid #2A2A2A;
}
.encargo-lineas .el-precio{ margin:0; color:var(--blanco); }
.encargo-rapido img, .encargo-lineas img{ width:52px; height:52px; object-fit:cover; display:block; }
.er-nombre, .el-nombre{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blanco); line-height:1.25; }
.er-precio, .el-precio{ display:block; margin-top:3px; font-size:13px; color:var(--gris-noche); }
.encargo-rapido button{
  border:1px solid #3A3A3A; background:transparent; color:var(--blanco); cursor:pointer;
  padding:8px 14px; font:inherit; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s, color .2s, border-color .2s;
}
.encargo-rapido button:hover{ background:var(--blanco); color:var(--negro); border-color:var(--blanco); }
.el-cant{ display:flex; align-items:center; gap:2px; }
.el-cant button{
  width:30px; height:30px; border:1px solid #3A3A3A; background:transparent; color:var(--blanco);
  cursor:pointer; font:inherit; font-size:16px; line-height:1; transition:background .2s, color .2s;
}
.el-cant button:hover{ background:var(--blanco); color:var(--negro); }
.el-cant span{ min-width:26px; text-align:center; font-weight:600; font-size:14px; }
.encargo-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-noche); }
.encargo-total strong{ font-size:1.3rem; letter-spacing:-.02em; color:var(--blanco); }
.encargo-mas{ margin-top:14px; }
  .encargo-mas .enlace-linea{ color:var(--blanco); }
.encargo-mas a{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--blanco);
  border-bottom:1px solid #3A3A3A; padding-bottom:2px; transition:border-color .2s, color .2s;
}
.encargo-mas a:hover{ color:var(--oro-vivo); border-bottom-color:var(--oro-vivo); }
.picker-resumen{ margin-top:10px; font-size:13px; line-height:1.5; color:var(--gris-noche); }
.picker-resumen strong{ color:var(--blanco); font-weight:600; }
.picker-resumen .enlace-linea{ font-size:11px; color:var(--blanco); }
.picker-resumen .enlace-linea:hover{ color:var(--oro-vivo); }
.btn-wa.secundario{ background:transparent; color:var(--blanco); border-color:#5A5A5A; }
.btn-wa.secundario:hover{ background:var(--blanco); color:var(--negro); border-color:var(--blanco); }
.btn-wa .btn-wa-txt{ white-space:nowrap; }

.encargo-lleno, .encargo-vacio{ margin-top:14px; font-size:15px; line-height:1.6; color:var(--gris-noche); max-width:40ch; }
.encargo-lleno strong{ color:var(--blanco); font-weight:600; }
.encargo-vacio a{ color:var(--blanco); border-bottom:1px solid #3A3A3A; transition:border-color .2s; }
.encargo-vacio a:hover{ border-bottom-color:var(--oro-vivo); }
.enlace-linea{
  background:transparent; border:0; padding:0 0 1px; cursor:pointer; font:inherit; color:inherit;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid currentColor; transition:color .2s;
}
.encargo-lleno .enlace-linea{ color:var(--blanco); margin-top:8px; display:inline-block; }
.encargo-lleno .enlace-linea:hover{ color:var(--oro-vivo); }
.ph-resumen{ margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--gris); }
.ph-resumen strong{ color:var(--negro); font-weight:600; }
.ph-resumen .enlace-linea{ font-size:11px; color:var(--negro); }
.ph-resumen .enlace-linea:hover{ color:var(--acento-tinta); }
.encargo h2{ font-weight:600; letter-spacing:-.035em; line-height:.98; font-size:clamp(2.2rem,5.4vw,4.4rem); }
.encargo .apunte{ color:var(--gris-noche); font-size:15px; margin-top:20px; max-width:38ch; line-height:1.55; }
/* con foto detras, un recuadro transparente se lee sucio: el selector toma cuerpo */
.picker{
  border:1px solid #2A2A2A; padding:clamp(26px,3.4vw,44px);
  background:rgba(11,11,11,.82);
}
.picker-etq, .picker-etq-fecha, .picker label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-noche);
}
.picker-etq-fecha{ margin-top:22px; }
.picker .fecha-fila{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.picker input[type="date"]{
  background:transparent; border:0; border-bottom:1px solid #3A3A3A; color:var(--blanco);
  font-family:var(--sans); font-size:clamp(1.35rem,2.6vw,2rem); font-weight:500; letter-spacing:-.02em;
  padding:10px 2px; color-scheme:dark; flex:1 1 200px; min-width:0;
}
.picker input[type="date"]:focus{ border-bottom-color:var(--oro-vivo); outline:none; }
.picker .aviso{ font-size:12.5px; color:var(--oro-suave); margin-top:12px; min-height:1.2em; }
.picker .aviso.error{ color:#E8A06A; }
.btn-wa{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  background:var(--blanco); color:var(--negro); border:1px solid var(--blanco);
  padding:14px 24px; font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  cursor:pointer; transition:background .2s, color .2s;
}
.btn-wa:hover{ background:transparent; color:var(--blanco); }
.btn-wa svg{ width:16px; height:16px; fill:currentColor; }

/* TELEFONO Y TACTIL — el mismo gesto, sin hover.
   La foto de #encargo ya no es la banda que cambiaba de categoria: es un fondo fijo y el
   texto va encima a todo el ancho, asi que el velo NO se apaga aqui —al reves, es lo
   unico que sostiene el contraste sobre una foto clara—. Y la lista de categorias vive
   ahora en el hero, donde sin hover se enciende sola la primera (lo decide el JS). */
@media (max-width:900px), (hover:none){
  /* La rejilla se disuelve (display:contents) y sus dos hijos pasan a ser hijos directos
     de la seccion. El fondo se queda absoluto: es fondo, no una pieza del flujo. */
  .encargo{ flex-direction:column; align-items:stretch; justify-content:center; }
  .encargo-grid{ display:contents; }
  /* display:contents borra la caja de .encargo-grid, y con ella su position:relative y su
     z-index:2. Sus hijos se quedan estaticos y el velo (z-index:1) los tapaba: la seccion
     salia en el movil como una foto vacia. Cada uno recupera aqui su sitio en el apilado. */
  .encargo-texto, .encargo-que, .picker{ position:relative; z-index:2; }
  .encargo-texto{ order:1; }
  /* "Tu encargo" entre el titulo y el selector; sin z-index se pintaba BAJO el velo */
  .encargo-que{ order:2; margin:14px 0 0; }
  .picker{ order:3; margin-top:clamp(16px,2.6vh,28px); padding:20px; }
  /* la cabecera es fija: el aire de arriba tiene que descontarla o el kicker "ENCARGOS"
     queda por debajo de ella al llegar por el ancla (medido: caia a 3,23x porque lo que
     habia detras era la cabecera BLANCA, no el negro de la seccion). */
  .encargo{ padding-top:calc(var(--header-h) + 12px); padding-bottom:26px; }
  .encargo h2{ font-size:2rem; }
  .encargo .apunte{ margin-top:14px; font-size:14px; }
  .picker-etq-fecha{ margin-top:0; }
  /* sin hover el texto se apoya en la foto a todo el ancho: el velo sube a plomo */
  .encargo::after{
    background:linear-gradient(180deg,
      rgba(11,11,11,.72) 0%, rgba(11,11,11,.6) 42%, rgba(11,11,11,.66) 100%);
  }
  /* en el hero la fila de categorias encoge y la foto se enciende sin deriva */
  /* el trazo adelgaza con la letra: 1,1px sobre 21px cerraba los ojos de la "a" y la "e"
     y la palabra elegida se leia como una mancha */
  .hero .cat{ font-size:1.3rem; padding:3px 0; -webkit-text-stroke-width:.8px; }
  .hero .cats{ gap:14px 22px; }
  /* el indicador se aparto de la barra fija y subio 46 px: la lista se retira lo mismo,
     o la pregunta se le monta encima */
  .hero-cats{ margin-bottom:clamp(88px,13vh,120px); }
  .hero-escena--cats img{ transition:opacity 1.1s cubic-bezier(.4,0,.2,1); transform:none; }
  .hero-escena--cats img.visible{ transform:none; }
}

/* Telefonos de pantalla corta (375x667, 360x640). Con la banda dentro, la seccion medía
   782 px y solo hay 617 utiles (viewport menos la barra fija): el boton de WhatsApp
   quedaba tapado. Se recortan 165 px repartidos entre las siete piezas —ninguna se
   elimina, todas encogen— para no perder informacion por el camino. */
@media (max-width:900px) and (max-height:700px){
  .encargo{ padding-top:calc(var(--header-h) + 8px); padding-bottom:14px; }
  .encargo h2{ font-size:1.5rem; }
  .encargo .apunte{ margin-top:10px; font-size:13px; line-height:1.45; }
  .hero .cat{ font-size:1.05rem; padding:1px 0; -webkit-text-stroke-width:.7px; }
  .hero-cats{ margin-bottom:clamp(92px,15vh,116px); }
  .picker{ padding:14px; margin-top:10px; }
  .picker input[type="date"]{ font-size:1.25rem; padding:6px 2px; }
  .picker .aviso{ margin-top:8px; font-size:12px; }
  .btn-wa{ margin-top:14px; padding:12px 18px; }
}

/* ============================ OBRADOR ============================ */
.obrador{
  padding:0; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(28px,4.5vh,54px);
}
.obrador-cabecera{
  width:100%; max-width:1180px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,64px); align-items:end;
}
.obrador-texto p{ margin-top:14px; color:#3A3A3A; font-size:clamp(14.5px,1.2vw,16px); max-width:46ch; }
.obrador-texto p:first-child{ margin-top:0; }
/* El texto respira por abajo para no quedarse pegado a la cinta de fotos. Es margen
   INFERIOR y no superior porque la cabecera alinea por el pie (align-items:end): asi el
   texto sube y el titular no se entera.
   Solo de 820 px para arriba: por debajo el parrafo es mas alto que el titular —a 700 px
   le saca 4 px— y es el texto quien manda en la altura de la fila; alli este margen
   empujaria el titular hacia arriba, que es justo lo que no se quiere. */
@media (min-width:820px){
  .obrador-texto{ margin-bottom:clamp(28px,4vw,78px); }
}

/* cinta editorial: dos alturas alternas, bordes fundidos, deriva sola (la mueve el JS)
   y dos mulos que empujan a un lado o al otro */
.cinta-zona{ position:relative; }
.cinta{
  width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent 2%, #000 13%, #000 87%, transparent 98%);
  mask-image:linear-gradient(to right, transparent 2%, #000 13%, #000 87%, transparent 98%);
}
.cinta::-webkit-scrollbar{ display:none; }
.cinta-pista{
  display:flex; gap:clamp(10px,1.2vw,18px); width:max-content; align-items:flex-start;
}

/* los mulos: el de la izquierda mira a la izquierda, y al posar el ratón dan un paso */
/* los mulos van sueltos sobre el blanco de la sección, no encima de las fotos:
   ahí el mulo negro se lee siempre y no necesita caja ni sombra */
/* los mulos van en los extremos de la cinta, apoyados en la zona donde las fotos
   ya se han fundido a blanco: negro sobre blanco, sin caja y siempre legibles */
.cinta-bot{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:74px; height:64px; border:0; background:transparent;
  color:var(--negro); display:grid; place-items:center; cursor:pointer; padding:0;
}
.cinta-bot svg{
  width:62px; height:auto; fill:currentColor; opacity:.42;
  transition:transform .35s cubic-bezier(.16,.84,.44,1), opacity .25s ease;
}
.cinta-bot:hover svg{ opacity:.75; }
/* Los mulos ya no dan un paso: mandan el SENTIDO, y uno de los dos manda siempre. El que
   lleva la cinta va a plena tinta y el otro espera apagado, o no habria forma de saber
   hacia donde va ni que el otro sirve para algo. */
.cinta-bot[aria-pressed="true"] svg{ opacity:1; }
.cinta-bot[aria-pressed="true"]:hover svg{ opacity:1; }
.cinta-atras{ left:0; }
.cinta-adelante{ right:0; }
.cinta-atras svg{ transform:scaleX(-1); }
.cinta-atras:hover svg{ transform:scaleX(-1) translateX(5px) scale(1.06); }   /* el paso, hacia su lado */
.cinta-adelante:hover svg{ transform:translateX(5px) scale(1.06); }
.cinta-item{ position:relative; overflow:hidden; flex:none; margin:0; }
.cinta-item img{ height:clamp(230px,34vh,340px); width:auto; transition:transform .7s cubic-bezier(.16,.84,.44,1); }
.cinta-item:nth-child(even){ margin-top:clamp(26px,5vh,52px); }
.cinta-item:nth-child(even) img{ height:clamp(180px,26vh,264px); }
.cinta-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blanco);
  background:linear-gradient(to top, rgba(11,11,11,.62), transparent);
  opacity:0; transition:opacity .35s ease;
}
.cinta-item:hover img{ transform:scale(1.05); }
.cinta-item:hover figcaption{ opacity:1; }
@keyframes cinta-corre{ to{ transform:translateX(-50%); } }

/* ============================ VISITA ============================ */
.visita{
  background:var(--negro); color:var(--blanco); padding:clamp(48px,7vw,96px) var(--pad);
  min-height:100svh; display:flex; align-items:center;
  position:relative; overflow:hidden;
}
/* la foto vive en su propia capa, a sangre y detras de todo */
.visita-escena{
  position:absolute; inset:0; z-index:0;
  /* El canto de abajo moria a hachazo contra el pie. Arriba el corte es intencionado
     —viene del blanco del obrador, es un cambio de seccion—, pero abajo los dos lados
     son oscuros y la linea recta se lee como un fallo. Se funde solo por abajo. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,.45) 80%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,.45) 80%, transparent 100%);
}
.visita-escena img{
  width:100%; height:100%; object-fit:cover; object-position:70% 50%;
}
/* El velo NO es cosmetica: es lo que garantiza que el texto cumpla AA sobre la foto.
   Cae a negro pleno por la izquierda, justo donde vive la columna de texto, y deja
   respirar el ayuntamiento y los reflejos del suelo por la derecha. */
.visita::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    #0B0B0B 0%, rgba(11,11,11,.97) 30%, rgba(11,11,11,.86) 45%,
    rgba(11,11,11,.55) 66%, rgba(11,11,11,.22) 100%);
}
/* una sola columna: el texto a la izquierda y la plaza ocupando el resto.
   Antes eran dos columnas con dos fotos de 277x346 (178x111 en movil, sellos de correos)
   y el 44 % de la seccion era aire. */
.visita-grid{ max-width:1180px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr; align-items:center; position:relative; z-index:2; }
.visita-grid > div{ max-width:34rem; }
.visita h2{ font-weight:600; letter-spacing:-.03em; line-height:1; font-size:clamp(1.9rem,4.4vw,3.4rem); }
.datos{ margin-top:32px; display:grid; gap:20px; }
.datos dt{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-noche); }
.datos dd{ margin-top:5px; font-size:15px; }
.datos a{ border-bottom:1px solid #3A3A3A; }
.datos a:hover{ border-bottom-color:var(--oro-vivo); color:var(--oro-suave); }
.visita-ctas{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
.btn-linea{
  border:1px solid var(--blanco); padding:13px 22px;
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  transition:background .2s, color .2s;
}
.btn-linea:hover{ background:var(--blanco); color:var(--negro); }
.btn-linea.relleno{ background:var(--blanco); color:var(--negro); }
.btn-linea.relleno:hover{ background:transparent; color:var(--blanco); }
/* portátiles de pantalla baja (1366×768 / 1280×720): que la sección no se corte */
@media (min-width:1100px) and (max-height:800px){
  .visita{ padding-top:52px; padding-bottom:52px; }
  .visita .datos{ margin-top:24px; gap:16px; }
  .visita-ctas{ margin-top:26px; }
}

/* ============================ PIE ============================ */
.pie{
  background:var(--negro); color:var(--blanco);
  /* la cabecera es fija: si el aire de arriba no la descuenta, se come el mulo */
  padding:calc(var(--header-h) + clamp(14px,2.4vh,30px)) var(--pad) 20px;
  min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(16px,2.4vh,30px);
}

/* la marca preside: mulo macizo + wordmark grande */
.pie-firma{ text-align:center; }
.pie-firma-mulo{ width:clamp(64px,7vw,96px); height:auto; color:var(--blanco); }
.pie-firma-word{
  font-family:var(--marca); font-weight:400; line-height:1;
  font-size:clamp(2.5rem,6vw,4.6rem); margin-top:clamp(6px,1.2vh,14px);
}
.pie-firma-sub{
  font-size:clamp(11px,1vw,13px); font-weight:500; letter-spacing:.58em; text-transform:uppercase;
  color:#CFCBC2; margin-top:8px; padding-left:.58em;
}
.pie-firma-linea{ margin-top:clamp(10px,1.5vh,16px); font-size:14px; color:var(--gris-noche); }
.pie-firma-nota{ color:var(--oro-suave); font-weight:600; }

/* ---------- la reputación, en el remate ----------
   Una fila, no un bloque apilado: el pie solo tenia ~100 px de aire en escritorio y
   portatil (medido antes de tocar), asi que esto va en horizontal o no cabe. El 4,9
   manda a la izquierda y el recuento vive en la linea de abajo, dicho sin esconderlo. */
.pie-resenas{
  width:100%; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.4vw,30px); align-items:center;
  padding:clamp(12px,1.8vh,20px) 0;
  border-top:1px solid #1F1F1F; border-bottom:1px solid #1F1F1F;
}
.pr-nota{ display:flex; align-items:center; gap:12px; }
.pr-num{
  font-size:clamp(2.2rem,4.2vw,3.2rem); font-weight:600; letter-spacing:-.04em; line-height:1;
}
.pr-estrellas{
  position:relative; display:inline-block; white-space:nowrap;
  font-size:clamp(.95rem,1.5vw,1.25rem); line-height:1; letter-spacing:.1em;
}
.pr-fondo{ color:#3A3A3A; }
.pr-llenas{ position:absolute; left:0; top:0; width:98%; overflow:hidden; white-space:nowrap; color:var(--oro-suave); }
.pr-texto{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.pr-frase{ font-size:clamp(.95rem,1.4vw,1.15rem); line-height:1.45; }
.pr-pie{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; }
.pr-sub{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris-noche);
}
.pr-cta{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  border-bottom:1px solid #3A3A3A; padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.pie-resenas:hover .pr-cta{ color:var(--oro-suave); border-bottom-color:var(--oro-vivo); }

.pie-cuerpo{
  width:100%; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;
}
.pie-datos dl{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.2vh,24px) 24px; }
.pie-datos dt{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-noche); }
.pie-datos dd{ margin:6px 0 0; font-size:14.5px; line-height:1.55; }
.pie-datos a{ border-bottom:1px solid #3A3A3A; }
.pie-datos a:hover{ border-bottom-color:var(--oro-vivo); color:var(--oro-suave); }

.pie-mapa{ position:relative; display:block; overflow:hidden; border:1px solid #1F1F1F; }
.pie-mapa img{ width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .8s cubic-bezier(.16,.84,.44,1); }
.pie-mapa:hover img{ transform:scale(1.04); }
.pie-pin{
  position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  background:var(--oro-vivo); border-radius:50%; box-shadow:0 0 0 6px rgba(224,191,82,.22);
}
.pie-pin::after{
  content:''; position:absolute; inset:-14px; border:1px solid var(--oro-vivo);
  border-radius:50%; opacity:.45; animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{ 0%{ transform:scale(.6); opacity:.55 } 100%{ transform:scale(1.5); opacity:0 } }
.pie-mapa-cta{
  position:absolute; left:14px; bottom:14px; background:var(--blanco); color:var(--negro);
  padding:9px 16px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.pie-mapa:hover .pie-mapa-cta{ background:var(--oro-suave); }

.pie-legal{
  width:100%; max-width:1180px; margin:0 auto; padding-top:16px; border-top:1px solid #1F1F1F;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 26px;
  font-size:11.5px; color:var(--gris-noche);   /* #6A6A6A daba 3,64x sobre negro */
}
.pie-legal nav{ display:flex; gap:20px; }
.pie-legal a:hover{ color:var(--oro-suave); }
.pie-atrib{ color:var(--gris-noche); }   /* #4E4E4E daba 2,37x: era casi invisible */

/* ---------- EL PIE DE LAS PAGINAS DE FAMILIA: SOLO LA FIRMA ----------
   El de la portada ocupa una pantalla entera —firma, reseñas, datos y mapa— porque es el
   cierre de la visita. Aqui no hay nada que informar: la marca a lo grande y punto final.
   Sin pantalla completa (se cae el min-height) pero con aire de sobra arriba y abajo, que
   una firma pegada al borde no cierra nada, y CENTRADA en vertical con el flex que .pie ya
   trae puesto. */
/* ---------- EL PIE DE LAS PAGINAS INTERIORES ----------
   Traido del sitio anterior. Tres pisos: contacto y enlaces arriba, la MARCA A CONTORNO
   ocupando el ancho en medio y la linea legal abajo. No lleva pantalla completa —eso es
   cosa del pie de la portada, que cierra la visita— pero si el aire suficiente para que la
   firma respire. */
.pie--interior{
  min-height:0; justify-content:flex-start; gap:0;
  padding-top:clamp(20px,2.6vw,34px); padding-bottom:0;
  overflow:clip;   /* la firma es mas ancha que el aire lateral: se recorta, no desborda */
}
.pie--interior > *{ width:100%; max-width:1180px; margin-inline:auto; }

.pie-i-enlaces{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); }

/* LA FIRMA A CONTORNO. color:transparent + text-stroke: la palabra se queda en el perfil,
   el mismo gesto que hacen los titulos del hero al mirarlos. El mulo se posa encima, no al
   lado: asi la firma es una sola pieza y no un logotipo en fila.
   line-height por debajo de 1 a proposito: con el normal, una palabra de este cuerpo deja
   un colchon de aire arriba y abajo que separa el mulo de sus letras. */
/* el mulo lleva su propio aire: con line-height .8 las astas del wordmark le pisaban las patas */
.pie-i-firma{ text-align:center; line-height:1; padding-top:clamp(10px,1.6vw,22px); user-select:none; }
.pie-i-mulo{
  display:block; width:clamp(96px,12vw,180px); height:auto; margin:0 auto clamp(18px,2.6vw,38px);
  color:rgba(255,255,255,.85); fill:currentColor; fill-rule:evenodd;
}
.pie-i-word{
  font-family:var(--marca); font-weight:400; text-transform:uppercase;
  font-size:clamp(3rem,15vw,12.5rem); letter-spacing:.05em;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.5);
}

/* Cuatro grupos en una sola linea: aviso legal, telefono, la coletilla y los enlaces. El
   icono de Instagram es mas alto que el texto, asi que manda el alto de la fila: se le baja
   la caja para que la linea no engorde por su culpa. */
.pie-i-legal{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px 26px;
  margin-top:clamp(8px,1vw,12px); padding-block:8px;
  border-top:1px solid #1F1F1F;
  font-size:11.5px; color:var(--gris-noche);
}
.pie-i-legal .pie-ig{ width:26px; height:26px; }
.pie-i-legal .pie-ig svg{ width:18px; height:18px; }
.pie-i-legal p{ margin:0; }
.pie-i-guino{ font-style:italic; }
.pie-i-legal .pie-i-guino{ margin-left:clamp(10px,2.6vw,38px); }
/* el telefono va en tinta mas viva que el resto de la linea: es el unico dato util que
   queda en el pie y no puede leerse como letra pequeña */
.pie-i-tel{ color:#CFCBC2; letter-spacing:.02em; }
/* el hueco del medio: empuja el telefono y lo que va detras contra la derecha. Doble
   clase a proposito, que .pie-i-legal p ya fija margin:0 y le ganaba a una sola. */
.pie-i-legal .pie-i-tel{ margin-left:auto; }

.pie-ig{
  display:flex; width:34px; height:34px;
  align-items:center; justify-content:center;
  color:var(--gris-noche); transition:color .2s ease;
}
.pie-ig:hover{ color:var(--blanco); }
.pie-ig svg{ width:21px; height:21px; }

/* El enlace a la politica de privacidad. Va en letra pequeña y en gris de noche: es
   obligatorio tenerlo y facil de encontrar, pero no es un destino de la web —nadie entra
   a leerse la privacidad—, asi que no compite con los enlaces que si venden. */
.pie-i-privacidad{ margin:2px 0 0; font-size:12.5px; }
.pie-i-privacidad a{ color:var(--gris-noche); border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.pie-i-privacidad a:hover{ color:var(--oro-suave); border-bottom-color:var(--oro-vivo); }

/* Lo que el cliente tiene que rellenar todavia, marcado a la vista para que no se publique
   sin ello. Cuando lleguen la razon social y el NIF, se quita el <mark> y esta regla sobra. */
mark{ background:#FFF1B8; color:#4A3B00; padding:0 .25em; border-radius:2px; }

.pie-idiomas{ display:flex; align-items:center; gap:16px; }
/* ya son BOTONES, no rotulos: hay que apagarles el aspecto de boton del navegador
   —fondo, borde y padding— para que sigan siendo las tres siglas de antes */
.pie-idioma{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris-noche);
  background:none; border:0; padding:0; margin:0; font-family:inherit; cursor:pointer;
  transition:color .2s ease;
}
.pie-idioma:hover{ color:var(--oro-vivo); }
/* el idioma en el que se esta leyendo va en oro: es el acento de la casa y aqui separa
   mejor que el blanco, que en el pie lo lleva ya medio rotulo */
.pie-idioma[aria-current="true"]{ color:var(--oro-suave); cursor:default; }

@media (max-width:760px){
  /* el trazo adelgaza con la letra: a 1,2 px sobre un cuerpo de 3 rem las astas se cierran
     y la palabra se lee como una mancha */
  .pie-i-word{ -webkit-text-stroke-width:1px; }
  /* con la linea partida en varios renglones el hueco del medio sobra: empujaria el
     telefono al borde de un renglon donde ya no hay nada a su izquierda */
  .pie-i-legal .pie-i-tel,
  .pie-i-legal .pie-i-guino{ margin-left:0; }
  .pie-i-top{ gap:18px; }
  .pie-idiomas{ gap:12px; }
}

/* ============================ FICHA DE PRODUCTO ============================ */
.pieza-ficha{ display:none; }

.ficha{
  border:0; padding:0; width:min(1020px, 94vw);
  /* 1280x610 daba 2,1:1 (un buzon) y dejaba la columna de texto medio vacia.
     A 1020x620 la proporcion baja a 1,65:1: la foto sale mas cuadrada y el
     texto respira sin lineas kilometricas. */
  height:min(86svh, 620px); max-height:86svh; overflow:hidden;
  background:var(--blanco); color:var(--negro);
}
.ficha::backdrop{ background:rgba(11,11,11,.86); }
.ficha-cerrar{
  position:absolute; top:0; right:0; z-index:2;
  width:52px; height:52px; border:0; background:transparent; color:var(--negro);
  font-size:30px; line-height:1; cursor:pointer;
}
.ficha-cerrar:hover{ color:var(--acento-tinta); }
.ficha-grid{ display:grid; grid-template-columns:.92fr 1.08fr; height:100%; }
.ficha-grid img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.ficha-texto{
  padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;   /* nada de scroll: el contenido está dimensionado para caber */
}
.ficha-texto h3{
  font-size:clamp(1.3rem,2.1vw,1.85rem); font-weight:600; letter-spacing:-.03em; line-height:1.05;
}
/* en una ficha de producto el precio es dato principal, no una nota al pie:
   iba en gris a 3,23x y a .98rem. Ahora tinta plena (18,7x) y con peso. */
.ficha-precio{ font-size:1.2rem; font-weight:600; color:var(--negro); margin-top:9px; letter-spacing:-.01em; }
.ficha-elab{ margin-top:10px; font-size:13.5px; line-height:1.5; color:#2E2E2E; max-width:44ch; }
.ficha-bloque{ margin-top:14px; }
.ficha-bloque ul{ margin:9px 0 0; padding:0; list-style:none; }
.ficha-bloque li{
  font-size:14.5px; line-height:1.5; color:#2E2E2E;
  padding:7px 0; border-bottom:1px solid var(--gris-linea);
}

/* ingredientes: columnas según cuántos lleve la pieza (data-cols), sin celdas muertas */
.ficha-ingredientes{ display:grid; grid-template-columns:repeat(var(--ing-cols,5), 1fr); gap:10px 8px; align-items:start; max-width:560px; }
.ficha-ingredientes li{ border:0; padding:0; text-align:center; display:flex; flex-direction:column; }
.ficha-ingredientes img{
  width:82%; max-width:74px; margin:0 auto; aspect-ratio:1/1; object-fit:cover;
  /* closest-side: el fundido muere en el borde y no queda rastro de caja */
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 48%, #000 62%, transparent 99%);
  mask-image:radial-gradient(circle closest-side at 50% 48%, #000 62%, transparent 99%);
  filter:brightness(1.06) contrast(.92) saturate(.93);
}
.ficha-ingredientes span{
  display:block; margin-top:6px; font-size:9.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#4A4A4A; line-height:1.25;
  min-height:1.25em;
}

/* alérgenos con icono de trazo, mismo lenguaje que los ingredientes */
.ficha-alergenos{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:flex-start; }
.ficha-alergenos li{
  border:0; padding:0; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.ficha-alergenos svg{
  width:26px; height:26px; fill:none; stroke:currentColor; color:var(--negro); flex:none;
}
.ficha-alergenos span{
  display:block; margin-top:5px; font-size:9.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#4A4A4A; line-height:1.2;
}

.ficha-pie{ margin-top:22px; }
.ficha-anadir{ align-self:flex-start; background:var(--negro); color:var(--blanco); border-color:var(--negro); margin-top:0; padding:12px 20px; }
.ficha-anadir:hover{ background:transparent; color:var(--negro); }
.ficha-nota{ margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--gris); }

@media (max-width:760px){
  .ficha{ width:100vw; max-width:100vw; max-height:100svh; height:100svh; }
  .ficha-grid{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .ficha-grid img{ aspect-ratio:4/3; height:auto; }
  /* el texto rueda desde arriba: centrado + scroll recorta el titular */
  .ficha-texto{ overflow-y:auto; justify-content:flex-start; padding-top:22px; }
  /* la X va suelta sobre la foto, sin caja */
  .ficha-cerrar{
    background:transparent; color:var(--blanco); font-size:34px; width:58px; height:58px;
    filter:drop-shadow(0 1px 5px rgba(11,11,11,.6));
  }
  .ficha-cerrar:hover{ color:var(--blanco); }
  .ficha-ingredientes{ grid-template-columns:repeat(3, 1fr); }
}

/* ============================ BARRA MÓVIL ============================ */
.barra-movil{ display:none; }

/* ============================ REVELADOS ============================ */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.visible{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .rejilla{ grid-template-columns:repeat(3,1fr); }
  .pie-cuerpo{ grid-template-columns:1fr 1fr; }
  .pie-mapa{ grid-column:1 / -1; }
  .encargo-grid,.obrador-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ --header-h:66px; }
  /* En movil la puerta del encargo es la barra fija de abajo, que lleva el mismo contador.
     El boton de la cabecera se retira: montado sobre la marca centrada no cabia. */
  .header-cta{ display:none; }
  .hero{ --mulo-esc:2.05; --mulo-baja:175%; }
  /* La marca va centrada en la VENTANA, con el boton a un lado y el CTA al otro: en 360 px
     los tres se tocaban (medido: 1 px de aire entre la marca y "Encargar"). Las dos piezas
     de texto encogen; el boton no, que es diana tactil y ha de conservar sus 44 px. */
  .brand{ gap:8px; }
  .brand svg{ width:74px; stroke-width:11; }
  .brand .brand-name{ font-size:23px; letter-spacing:.1em; }
  .header-cta{ padding:9px 15px; font-size:12px; letter-spacing:.08em; }
}
/* Pantallas de 360 px: con el logo ya crecido quedaban 11 px entre la marca y "Encargar".
   El que cede es el BOTON —encoger el logo seria deshacer lo que se acaba de hacer—, y
   cede solo en aire lateral y tracking, no en tamaño de letra. */
/* Por debajo de 380 px la barra ya no da para el tamaño de 390: el mando, la marca y la
   carretilla se tocaban (medido: 2 px de solape a 360). Todos bajan un escalon y baja con
   ellos la franja. El corte va en 380 y no en 400 a proposito: a 390 —el movil mas comun—
   el tamaño grande entra de sobra y encogerlo alli seria perderlo sin motivo. */
@media (max-width:380px){
  :root{ --header-h:60px; }
  .brand svg{ width:60px; }
  .brand .brand-name{ font-size:20px; letter-spacing:.07em; }
  .brand-familia{ font-size:10.5px; letter-spacing:.08em; }
  .menu-btn{ width:46px; height:46px; }
  .menu-btn-linea{ width:25px; }
}

@media (max-width:400px){
  .header-cta{ padding:7px 7px; letter-spacing:.04em; }
  .brand{ gap:6px; }
  /* el nombre de la familia aprieta su tracking —no su cuerpo—: a 360 px son los 5 px que
     separan "PETITS FOURS" del recuadro de Encargar */
  .brand-familia{ letter-spacing:.08em; }
  .rejilla{ grid-template-columns:repeat(2,1fr); }
  .pieza.destacada{ grid-column:span 2; grid-row:auto; }
  .pieza.destacada .pieza-media{ aspect-ratio:1/1; height:auto; }
  :root{ --info-h:108px; }
  .pieza-info{ padding:10px 12px 0; }
  .pieza-nombre{ font-size:11px; }
  /* la reserva para la barra fija vive SOLO en el pie (ver .pie mas abajo):
     duplicarla aqui alargaba el documento y empujaba la firma fuera de pantalla */
  .barra-movil{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:120; background:#1F1F1F;
  }
  .barra-movil a{
    background:var(--negro); color:var(--blanco); text-align:center; padding:17px 8px;
    font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  }
  .barra-movil a.wa{ background:var(--blanco); color:var(--negro); }
  /* la barra fija mide 50 px y el indicador se apoyaba a 20 px del suelo: la pregunta y
     su linea quedaban por debajo, medio comidas. Sube por encima de la barra. */
  .hero-scroll{ bottom:calc(50px + 16px); }
  /* en el telefono el pie se salia de la pantalla (889 px en 844) y la cabecera fija
     se comia el mulo: todo un punto mas apretado para que la firma entera quepa */
  /* el bloque de reseñas suma alto y el pie ya iba justo: se compacta en tres frentes
     (reseñas en una columna con la frase mas corta de cuerpo, mapa mas apaisado y
     menos aire entre piezas) para que la firma NO se corte al llegar al fondo. */
  .pie{ padding-bottom:74px; gap:9px; }
  .pie-resenas{ grid-template-columns:1fr; gap:9px; padding:11px 0; }
  .pr-nota{ gap:10px; }
  .pr-num{ font-size:1.95rem; }
  .pr-estrellas{ font-size:.92rem; }
  .pr-frase{ font-size:.9rem; line-height:1.38; }
  .pr-pie{ gap:4px 14px; }
  .pie-legal{ padding-top:10px; }
  .pie-datos dl{ gap:11px 18px !important; }
  .pie-cuerpo{ grid-template-columns:1fr; gap:16px; }
  .obrador-cabecera{ grid-template-columns:1fr; align-items:start; }
  .cinta-bot{ width:56px; height:50px; }
  .cinta-bot svg{ width:46px; }
  .cinta-item img{ height:clamp(180px,24vh,240px); }
  .cinta-item:nth-child(even) img{ height:clamp(140px,19vh,190px); }
  .cinta-item:nth-child(even){ margin-top:clamp(18px,4vh,34px); }
  /* En vertical no cabe el mismo truco que en escritorio: el texto ocupa la mitad de la
     pantalla y, para que cumpliera contraste, el velo dejaba la plaza en un barrizal
     marron donde no se distinguia nada. Un fondo que no se lee no es atmosfera, es ruido.
     Asi que en el telefono la plaza deja de ser fondo y pasa a ser BANDA INFERIOR nitida:
     el texto vive sobre negro limpio arriba y la foto se ve de verdad abajo. */
  /* La banda NO va posicionada en absoluto: a 360x640 los botones caian 116 px encima
     de la foto. Va en el flujo, empujada abajo con margin-top:auto, asi que por corta
     que sea la pantalla no puede solaparse con el texto. Y como no hay tinta encima,
     el velo sobra: la plaza se ve limpia y se funde en el negro con una mascara. */
  .visita{
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding-top:calc(var(--header-h) + 34px); padding-bottom:0;
  }
  .visita::after{ display:none; }
  .visita-grid{ order:1; align-items:start; }
  .visita-grid > div{ max-width:none; }
  .visita-escena{
    order:2; position:relative; inset:auto; margin:28px calc(var(--pad) * -1) 0;
    margin-top:auto; height:clamp(150px, 30svh, 300px);
    /* funde por los dos cantos: arriba contra el texto y abajo contra el pie */
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 76%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 76%, transparent 100%);
  }
  .visita-escena img{ object-position:50% 62%; }
  .pie-firma-mulo{ width:56px; }        /* antes decia .pie-mulo: no existia, no aplicaba */
  .pie-firma-word{ font-size:1.85rem; margin-top:3px; }
  .pie-firma-sub{ margin-top:6px; }
  .pie-firma-linea{ margin-top:8px; font-size:13px; }
  .pie-datos dl{ grid-template-columns:1fr 1fr; gap:12px 18px; }
  .pie-mapa img{ aspect-ratio:2.7/1; }
  .pie-legal{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Telefonos de pantalla corta (360x640 y parecidos): el pie NUNCA les ha cabido
   —medido: 780 px en un viewport de 640 ya antes de meter las reseñas— y la firma
   aparecia cortada al llegar al fondo. El mapa del pie es utilidad DUPLICADA ("Cómo
   llegar" vive en la barra fija y en Visítanos), asi que en estas pantallas se retira
   y la firma se aprieta. Es la unica pieza que se puede soltar sin perder informacion. */
@media (max-width:760px) and (max-height:700px){
  .pie-mapa{ display:none; }
  .pie-firma-mulo{ width:40px; }
  .pie-firma-word{ font-size:1.5rem; }
  .pie-firma-sub{ margin-top:4px; }
  .pie-firma-linea{ margin-top:6px; font-size:12.5px; }
  .pr-num{ font-size:1.7rem; }
  .pr-frase{ font-size:.86rem; }
  .pr-pie{ gap:2px 12px; }
  .pie-datos dl{ gap:9px 16px !important; }
  .pie-legal{ padding-top:8px; }
  .pie{ gap:8px; }
}

/* Portatiles de pantalla baja (1280x720, 1366x768). Va AQUI, al final, y no junto al
   bloque hermano de mas arriba: las media queries no suman especificidad, asi que las
   reglas .pie normales, al estar despues en el fichero, ganaban y esto no aplicaba nada.
   Medido: a 1280x720 el pie media 774 y la firma salia cortada 37 px. */
@media (min-width:1100px) and (max-height:800px){
  .pie{ gap:10px; padding-bottom:14px; }
  .pie-firma-mulo{ width:58px; }
  .pie-firma-word{ font-size:2.6rem; }
  .pie-firma-linea{ margin-top:8px; }
  .pie-resenas{ padding:10px 0; }
  .pr-num{ font-size:2.1rem; }
  .pie-datos dl{ gap:12px 24px; }
  .pie-legal{ padding-top:10px; }
}

/* ============================ MOVIMIENTO REDUCIDO ============================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-scroll::after{ animation:none; transform:scaleY(1); }
  .cinta{ scroll-behavior:auto; }
  /* la foto de categoria aparece y desaparece sin fundido ni deriva */
  .hero-escena--cats img{ transition:none; transform:none; }
  .hero-escena--cats img.visible{ transform:none; }
}


/* ============================ NOVEDADES (blog) ============================ */
/* La franja de la portada: NO es una seccion de pantalla completa. Es la mas breve de la
   pagina y se lee como una nota al pie del obrador: titulo a la izquierda, tres filas de
   texto a la derecha. Sin fotos ni tarjetas, que el sistema no las tiene. */
.novedades{
  padding:clamp(40px,6vw,80px) var(--pad);
}
.novedades-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,5vw,72px); align-items:start;
}
.titular--menor{ font-size:clamp(1.8rem,4vw,3rem); }
.nov-todas{ margin-top:18px; }
.nov-todas a, .entrada-volver a, .pagina-hero .eyebrow a{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  border-bottom:1px solid var(--gris-linea); padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.nov-todas a:hover, .entrada-volver a:hover, .pagina-hero .eyebrow a:hover{
  color:var(--acento-tinta); border-bottom-color:var(--acento-tinta);
}
.nov-filas{ list-style:none; margin:0; padding:0; border-top:1px solid var(--gris-linea); }
.nov-fila{ border-bottom:1px solid var(--gris-linea); }
.nov-enlace{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px clamp(18px,3vw,40px); align-items:baseline;
  padding:clamp(14px,2vh,20px) 0;
  transition:color .2s;
}
.nov-enlace:hover .nov-titulo{ color:var(--acento-tinta); }
.nov-fecha{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
  white-space:nowrap; min-width:12ch;
}
.nov-texto{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.nov-titulo{ font-weight:600; letter-spacing:-.02em; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.25; transition:color .2s; }
.nov-resumen{ font-size:14px; line-height:1.5; color:var(--gris); max-width:60ch; }
.nov-vacio{ color:var(--gris); font-size:14px; }

/* el listado completo: la fila lleva ademas la miniatura, cuadrada y pequeña, a la derecha */
.novedades-lista{ padding:0 var(--pad) clamp(56px,8vw,110px); }
.novedades-lista .nov-filas{ max-width:1180px; margin:0 auto; }
.novedades-lista .nov-enlace{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
.nov-foto{ width:clamp(72px,8vw,112px); height:auto; aspect-ratio:1/1; object-fit:cover; }
.pagina-hero .lead{ margin-top:12px; }

/* ---------- LA ENTRADA ----------
   Una columna de lectura de 66 caracteres, cuerpo de 17 px, y la foto de portada a lo ancho
   de esa misma columna. Es la unica pagina de la web hecha para LEER, y se nota en el
   interlineado; lo demas —cabecera, pie, marca— es identico al resto. */
.entrada-medida{ max-width:66ch; margin:0 auto; width:100%; }
.pagina-hero--entrada{ min-height:0; align-items:flex-start; padding-bottom:clamp(12px,2vh,20px); }
.pagina-hero--entrada .titular{ font-size:clamp(1.9rem,4.4vw,3.4rem); }
.pagina-hero .eyebrow time{ color:var(--gris); }
.entrada-resumen{ margin-top:14px; font-size:clamp(16px,1.3vw,19px); line-height:1.5; color:#3A3A3A; }
.entrada{ padding:0 var(--pad) clamp(56px,8vw,110px); }
.entrada-portada{ margin:clamp(18px,3vh,30px) 0 clamp(28px,4vh,40px); }
.entrada-portada img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.entrada figcaption{ margin-top:8px; font-size:12px; color:var(--gris); letter-spacing:.02em; }
.entrada-cuerpo{ font-size:17px; line-height:1.65; color:#1E1E1E; }
.entrada-cuerpo p{ margin:0 0 1.15em; }
.entrada-cuerpo h2{ font-size:clamp(1.25rem,2vw,1.6rem); font-weight:600; letter-spacing:-.025em; line-height:1.15; margin:1.8em 0 .6em; }
.entrada-cuerpo ul{ margin:0 0 1.15em; padding-left:1.2em; }
.entrada-cuerpo li{ margin-bottom:.45em; }
.entrada-cuerpo li::marker{ color:var(--gris); }
.entrada-cuerpo a{ border-bottom:1px solid var(--gris-linea); transition:border-color .2s, color .2s; }
.entrada-cuerpo a:hover{ color:var(--acento-tinta); border-bottom-color:var(--acento-tinta); }
.entrada-cuerpo figure{ margin:1.6em 0; }
.entrada-cuerpo figure img{ width:100%; height:auto; }
.entrada-cta{ margin-top:1.6em; }
.btn-linea-negra{
  display:inline-block; cursor:pointer; font:inherit;
  background:var(--negro); color:var(--blanco); border:1px solid var(--negro);
  padding:13px 22px; font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  transition:background .2s, color .2s;
}
.btn-linea-negra:hover{ background:transparent; color:var(--negro); }
.entrada-volver{ margin-top:clamp(32px,5vh,48px); padding-top:18px; border-top:1px solid var(--gris-linea); }

@media (max-width:900px){
  .novedades-grid{ grid-template-columns:1fr; gap:22px; }
  .nov-todas{ margin-top:12px; }
}
@media (max-width:560px){
  .nov-enlace{ grid-template-columns:1fr; gap:4px; }
  .novedades-lista .nov-enlace{ grid-template-columns:minmax(0,1fr) auto; }
  .novedades-lista .nov-fecha{ grid-column:1 / -1; }
  .nov-fecha{ min-width:0; }
  .entrada-cuerpo{ font-size:16px; }
}


/* ============================ EL POPUP DEL CLUB, en dos paneles ============================ */
.club-marco{ display:grid; grid-template-columns:1fr 1fr; min-height:min(560px, 92svh); }
.club-lado{
  background:var(--negro); color:var(--blanco);
  padding:clamp(28px,3.4vw,46px);
  display:flex; flex-direction:column;
}
.club-lado .eyebrow{ color:var(--gris-noche); margin-top:clamp(18px,2.6vh,28px); }
.club-lado-mulo{ width:clamp(48px,5vw,64px); height:auto; fill:currentColor; fill-rule:evenodd; }
.club-lado h3{
  margin-top:8px;
  font-weight:600; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(2.4rem,4.2vw,3.6rem);
}
/* las ventajas con el tratamiento de la seccion del club: versalitas 600 y tracking abierto,
   y debajo el detalle en cuerpo, gris de noche */
.club-lado-ventajas{ list-style:none; margin:auto 0 0; padding:clamp(22px,3.4vh,34px) 0 0; }
.club-lado-ventajas li{ padding:14px 0; border-top:1px solid #1F1F1F; display:flex; flex-direction:column; gap:4px; }
.club-lado-ventajas li:last-child{ border-bottom:1px solid #1F1F1F; }
/* El rotulo de cada ventaja manda sobre su explicacion, asi que tiene que medir MAS.
   Estaba en 12,5 px contra los 13,5 del detalle: en versalitas y con tracking se leia
   como un epigrafe apagado y "5 % DE DESCUENTO" —que es el gancho— pasaba desapercibido.
   Sube a 15,5 y el tracking baja de .1em a .06em: a mas cuerpo, menos separacion hace
   falta para que las versalitas respiren. */
.club-lado-ventajas strong{
  font-size:15.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blanco);
}
.club-lado-ventajas span{ font-size:13.5px; line-height:1.5; color:var(--gris-noche); }

.club-marco .club-form{ padding:clamp(28px,3.4vw,46px); justify-content:center; }
.club-marco .club-form > .eyebrow{ margin-bottom:2px; }
/* EL CONSENTIMIENTO. Letra pequeña pero legible —12,5 px, no 10—: es lo que la persona
   esta aceptando y esconderlo en un cuerpo ilegible lo invalidaria. La casilla no se
   estiliza a mano: la nativa se entiende en cualquier dispositivo y es la que anuncian
   bien los lectores de pantalla. accent-color la tiñe del oro de la casa sin tocar nada mas. */
.club-consent{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  /* debajo del boton: se separa un poco mas para que no se lea como parte de el */
  margin-top:clamp(16px,2.4vh,24px);
}
.club-consent input{
  width:17px; height:17px; margin:2px 0 0; accent-color:var(--oro-tinta); cursor:pointer;
}
.club-consent label{
  font-size:12.5px; line-height:1.45; color:var(--gris); cursor:pointer;
}
.club-consent label strong{ color:var(--negro); font-weight:600; }
.club-consent label a{ color:var(--acento-tinta); border-bottom:1px solid var(--gris-linea); }
.club-consent label a:hover{ border-bottom-color:var(--acento-tinta); }
/* sin marcar y con el formulario enviado: el mismo aviso que llevan los demas campos */
.club-consent input[aria-invalid="true"]{ outline:2px solid var(--alerta, #B3261E); outline-offset:2px; }


@media (max-width:760px){
  .club-dialogo{ width:100vw; max-width:100vw; height:100svh; max-height:100svh; }
  .club-marco{ grid-template-columns:1fr; min-height:0; }
  .club-lado{ padding:22px 22px 20px; }
  .club-lado .eyebrow{ margin-top:14px; }
  .club-lado h3{ font-size:2.1rem; }
  .club-lado-ventajas{ margin-top:16px; padding-top:0; }
  .club-lado-ventajas li{ padding:10px 0; }
  .club-lado-ventajas strong{ font-size:14.5px; }
  .club-lado-ventajas span{ font-size:13px; }
  .club-marco .club-form{ padding:22px 22px 28px; }
  /* la X cae sobre el panel negro */
  .club-dialogo .club-cerrar{ color:var(--blanco); }
}

/* entradas de ejemplo (demo:true en posts.json): la etiqueta se va con ellas */
.nov-demo{
  display:inline-block; vertical-align:middle; margin-left:10px; padding:3px 7px;
  font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acento-tinta); border:1px solid var(--acento-tinta); line-height:1;
}

/* ---------- NOVEDADES COMO HILO: las noticias enteras, una tras otra ---------- */
.hilo{ padding:0 var(--pad) clamp(56px,8vw,110px); }
.hilo-entrada{ padding:clamp(28px,4vh,44px) 0 clamp(36px,5vh,56px); }
.hilo-marco{ max-width:66ch; margin:0 auto; }
.hilo-entrada + .hilo-entrada .hilo-marco{ border-top:1px solid var(--gris-linea); padding-top:clamp(36px,5vh,56px); }
.hilo-enlace--meta{ display:none; }
/* EN ESCRITORIO, MAQUETA EDITORIAL: la columna de lectura sola dejaba dos tercios de pantalla
   en blanco. Fecha, titulo y enlace a la izquierda (quietos, sin sticky); la foto y el texto a
   la derecha, mas anchos. */
@media (min-width:1100px){
  .hilo-marco{
    max-width:1180px;
    display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);
    gap:clamp(40px,5vw,80px); align-items:start;
  }
  .hilo-titulo{ font-size:clamp(2rem,3vw,2.9rem); margin-top:10px; }
  .hilo-enlace--meta{ display:block; margin-top:22px; }
  .hilo-enlace--pie{ display:none; }
  .hilo-cuerpo .entrada-portada{ margin-top:0; }
  .hilo-cuerpo .entrada-cuerpo{ font-size:17.5px; max-width:70ch; }
  .hilo-entrada{ padding-top:clamp(36px,5vh,56px); }
  .hilo-cabecera{ max-width:1180px; }   /* el titulo alineado con el borde de las noticias */
}
.hilo-titulo{
  margin-top:8px; font-weight:600; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
}
.hilo-titulo a{ transition:color .2s; }
.hilo-titulo a:hover{ color:var(--acento-tinta); }
.hilo-entrada .entrada-portada{ margin:clamp(16px,2.6vh,26px) 0 clamp(22px,3.4vh,32px); }
.hilo-enlace{ margin-top:6px; }
.hilo-enlace a{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--gris);
  border-bottom:1px solid var(--gris-linea); padding-bottom:2px; transition:color .2s, border-color .2s;
}
.hilo-enlace a:hover{ color:var(--acento-tinta); border-bottom-color:var(--acento-tinta); }

/* EL BOTON DEL ENCARGO, dentro del dialogo: primario de verdad. Heredaba el blanco de la
   seccion negra y sobre el blanco del dialogo se disolvia. */
.cesta .cesta-enviar{
  width:100%; justify-content:center; margin-top:16px;
  background:var(--negro); color:var(--blanco); border:1px solid var(--negro);
  padding:19px 24px; font-size:13.5px; letter-spacing:.12em;
}
.cesta .cesta-enviar:hover{ background:transparent; color:var(--negro); }
.cesta .cesta-enviar[disabled]{ opacity:.35; cursor:default; }
.cesta .cesta-enviar[disabled]:hover{ background:var(--negro); color:var(--blanco); }
.cesta .cesta-enviar svg{ width:19px; height:19px; }
.cesta .cesta-nota{ text-align:center; }