/* ==========================================================================
   EL OBRADOR DE EMILIO · hoja de estilo
   Rehecha el 24-sep-2026. La anterior venía de una plantilla de titulares
   enormes y a Mario le saturaba: aquí manda la foto y el texto se hace a un
   lado. Referencia que él pasó: una tienda de pastelería con letra pequeña,
   mucho aire y rejillas de producto.

   Seis decisiones y de ahí no se sale:
   1. Una serif (Fraunces) para títulos, una sans (Inter Tight) para todo lo
      demás. Nada de mayúsculas gigantes.
   2. Escala fija: 12 · 14 · 16 · 20 · 24 · 32 · 44. Ningún tamaño inventado.
   3. Rejilla de 4px. Secciones a 96px de aire, 64 en móvil.
   4. Un solo acento (el rosa terroso del logo) y solo para lo que se pulsa.
   5. Un borde de 1px casi invisible y una sola sombra, siempre la misma.
   6. Las fotos nunca se estiran: recorte fijo con aspect-ratio y object-fit.
   ========================================================================== */

:root{
  /* La paleta de May Yoga, que es la que pidió Mario: hueso rosado de fondo,
     rosa fuerte SOLO para lo que se pulsa y rosa claro en las bandas. El
     texto es casi negro cálido, nunca rosa: un pastel no se lee sobre hueso. */
  /* 24-sep: todo en beige. El rosa fuera, también de los botones: el acento
     pasa a ser el marrón cacao del logotipo, que es lo que ya lleva la marca. */
  --crema:#F7F1E4;      /* beige pastel · fondo general */
  --hueso:#FFFCF5;      /* tarjetas */
  --rosa:#EFE5D3;       /* bandas de sección */
  --rosa-2:#DFD0B6;     /* bordes y rellenos suaves */
  --tinta:#221A12;      /* casi negro, cálido */
  --tinta-60:#6A584C;   /* texto secundario */
  --tinta-40:#9C8A78;   /* apoyos */
  --acento:#7A5230;     /* marrón cacao · botones, enlaces y rótulos */
  --acento-oscuro:#5F3F24;
  --linea:rgba(34,26,18,.11);
  --sombra:0 1px 2px rgba(34,26,18,.04), 0 8px 24px rgba(34,26,18,.07);
  --radio:14px;
  --radio-g:20px;
  /* 24-sep: se probó una didona tipo Vogue y no le convenció. Vuelve la de
     siempre, y 'titulo' apunta a la misma para no tener dos criterios. */
  --serif:'Fraunces','Iowan Old Style',Georgia,serif;
  --titulo:var(--serif);
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ancho:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--crema);color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;padding-bottom:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;
  letter-spacing:-.01em;color:var(--tinta)}
h1{font-size:44px}
h2{font-size:32px}
h3{font-size:20px}
@media(max-width:720px){
  h1{font-size:32px}
  h2{font-size:24px}
  h3{font-size:18px}
}
p{color:var(--tinta-60)}
.lead{font-size:16px;max-width:62ch}

.env{max-width:var(--ancho);margin:0 auto;padding-inline:24px}
section{padding-block:96px}
@media(max-width:720px){section{padding-block:64px}.env{padding-inline:20px}}

.ojo{                       /* el rótulo pequeño de encima de cada título */
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acento);font-weight:600;margin-bottom:12px}

/* --- botones ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 26px;border-radius:99px;border:1px solid transparent;
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-1{background:var(--acento);color:#fff}
.btn-1:hover{background:var(--acento-oscuro)}
.btn-2{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn-2:hover{border-color:var(--acento);color:var(--acento)}
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--acento);outline-offset:3px}

/* --- cabecera ----------------------------------------------------------- */
.cab{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--crema) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab .env{display:flex;align-items:center;gap:24px;height:72px}
.cab .marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.cab .marca img{height:44px;width:auto}
.cab .marca .txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.cab .marca .txt b{font-family:var(--serif);font-size:15px;font-weight:600;white-space:nowrap}
.cab .marca .txt i{font-style:normal;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tinta-40);font-weight:600}
@media(max-width:560px){.cab .marca .txt{display:none}.cab .marca img{height:40px}}
.cab nav{display:flex;gap:28px}
.cab nav a{font-size:14px;text-decoration:none;color:var(--tinta-60);transition:color .16s ease}
.cab nav a:hover{color:var(--tinta)}
.cab nav a.aqui{color:var(--tinta);font-weight:600}
@media(max-width:860px){.cab nav{display:none}.cab .env{height:64px}}

/* --- portada ------------------------------------------------------------ */
.portada{padding-block:72px}
.portada .env{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.portada .foto{border-radius:var(--radio-g);overflow:hidden;box-shadow:var(--sombra)}
.portada .foto img{width:100%;aspect-ratio:5/4;object-fit:cover}
.portada p{margin:18px 0 28px;max-width:44ch}
.portada .acciones{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){
  .portada{padding-block:40px}
  .portada .env{grid-template-columns:1fr;gap:32px}
  .portada .texto{order:2}
}

/* --- tira de garantías -------------------------------------------------- */
.tira{border-block:1px solid var(--linea);background:var(--hueso)}
.tira .env{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:22px}
.tira div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tinta-60)}
.tira b{display:block;font-size:13px;font-weight:600;color:var(--tinta)}
.tira i{font-style:normal;font-size:18px;opacity:.7}
@media(max-width:860px){
  .tira .env{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* --- cabecera de sección ------------------------------------------------ */
.titulo-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:32px}
.titulo-fila a{font-size:14px;color:var(--acento);text-decoration:none;white-space:nowrap}
.titulo-fila a:hover{text-decoration:underline}

/* --- rejilla de categorías y de producto -------------------------------- */
.rejilla{display:grid;gap:20px}
.rejilla-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.rejilla{gap:14px}}

.pieza{
  display:flex;flex-direction:column;width:100%;min-width:0;text-align:left;
  background:var(--hueso);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;font:inherit;color:inherit;cursor:pointer;
  transition:box-shadow .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent}
.pieza:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.pieza img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pieza .cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pieza .n{font-family:var(--serif);font-size:17px;line-height:1.25}
.pieza .d{font-size:13px;color:var(--tinta-40)}
.pieza .pie{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.pieza .enc{font-size:13px;font-weight:600;color:var(--acento)}
.pieza .flecha{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--rosa);color:var(--acento);font-size:14px;flex:0 0 auto}

/* --- bloque rosa ancho -------------------------------------------------- */
.bloque{
  background:var(--rosa);border:1px solid var(--rosa-2);border-radius:var(--radio-g);
  overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:center}
.bloque .texto{padding:48px}
.bloque p{margin:12px 0 24px;max-width:46ch;color:#6E534D}
.bloque img{width:100%;height:100%;min-height:280px;object-fit:cover}
@media(max-width:860px){
  .bloque{grid-template-columns:1fr}
  .bloque .texto{padding:32px 24px}
  .bloque img{min-height:220px;aspect-ratio:16/10}
}

/* --- filtros del catálogo ----------------------------------------------- */
.filtros{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--linea);
  margin-bottom:32px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{
  flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 16px;font:inherit;font-size:14px;color:var(--tinta-60);cursor:pointer;
  transition:color .16s ease,border-color .16s ease}
.filtros button:hover{color:var(--tinta)}
.filtros button[aria-pressed="true"]{color:var(--acento);border-bottom-color:var(--acento);
  font-weight:600}

/* --- ficha de producto -------------------------------------------------- */
.velo{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(26,15,20,.46);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s}
.velo.ver{opacity:1;visibility:visible}
.ficha{
  position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;
  background:var(--hueso);border-radius:var(--radio-g);box-shadow:var(--sombra);
  display:grid;grid-template-columns:1fr 1fr;
  transform:translateY(10px);transition:transform .22s ease}
.velo.ver .ficha{transform:none}
.ficha .foto img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.ficha .cuerpo{padding:32px 30px}
.ficha .cuerpo p{margin:10px 0 22px;font-size:15px}
.ficha .cerrar{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--tinta);font-size:20px;line-height:1;
  cursor:pointer;display:grid;place-items:center}
@media(max-width:720px){
  .ficha{grid-template-columns:1fr}
  .ficha .foto img{aspect-ratio:4/3}
  .ficha .cuerpo{padding:24px 20px}
}

/* --- formulario --------------------------------------------------------- */
.form{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.form .ancho{grid-column:1/-1}
.form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form input,.form select,.form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;
  background:var(--hueso);font:inherit;font-size:15px;color:var(--tinta)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(122,82,48,.16)}
@media(max-width:560px){.form{grid-template-columns:1fr}}

/* --- datos de contacto -------------------------------------------------- */
.datos{display:grid;gap:18px}
.datos div{display:flex;gap:12px;align-items:flex-start}
.datos i{font-style:normal;font-size:16px;opacity:.6;margin-top:2px}
.datos b{display:block;font-size:13px}
.datos span{font-size:14px;color:var(--tinta-60)}

/* --- pie ---------------------------------------------------------------- */
footer{border-top:1px solid var(--linea);background:var(--hueso);padding-block:48px}
footer .env{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer img.logo{height:56px;margin-bottom:14px}
footer p,footer a{font-size:14px;color:var(--tinta-60);text-decoration:none}
footer a:hover{color:var(--acento)}
footer h3{font-size:14px;font-family:var(--sans);font-weight:600;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
.legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--linea);
  font-size:12px;color:var(--tinta-40)}
@media(max-width:860px){footer .env{grid-template-columns:1fr;gap:24px}}

/* --- barra de móvil ----------------------------------------------------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:color-mix(in srgb,var(--crema) 95%,#fff);backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.barra a{
  flex:1;display:grid;place-items:center;min-height:56px;padding:8px 4px;
  font-size:12px;font-weight:600;text-decoration:none;color:var(--tinta-40);
  border-top:2px solid transparent}
.barra a.aqui{color:var(--acento);border-top-color:var(--acento)}
@media(max-width:860px){
  .barra{display:flex}
  body{padding-bottom:64px}
}

/* --- aviso de propuesta ------------------------------------------------- */
.propuesta{
  background:var(--tinta);color:#F3E7E3;font-size:12px;text-align:center;
  padding:8px 16px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* --- contacto: formulario y datos ---------------------------------------
   En móvil esto tiene que ser una sola columna: con dos, el formulario se
   queda en 200px y no se puede ni escribir. */
.dos-col{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
@media(max-width:860px){.dos-col{grid-template-columns:1fr;gap:36px}}

/* ==========================================================================
   LA BARRA DE ABAJO, con icono.
   Solo texto quedaba soso y además cuesta encontrar la pestaña de un vistazo.
   Los iconos son SVG dibujados a mano en el propio HTML: nada de emojis, que
   cambian de dibujo en cada móvil.
   ========================================================================== */
.barra a{
  gap:4px;align-content:center;color:var(--tinta-40);
  transition:color .16s ease,background .16s ease}
.barra a svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.barra a.aqui{background:linear-gradient(180deg,rgba(122,82,48,.10),transparent)}
.barra a:active{background:rgba(122,82,48,.08)}

/* --- el pie, con más presencia ------------------------------------------ */
footer{background:var(--rosa);border-top:1px solid var(--rosa-2)}
footer .marca-pie{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer .marca-pie img{height:54px;margin:0}
footer .marca-pie b{font-family:var(--serif);font-size:17px;font-weight:600}
footer .redes{display:flex;gap:10px;margin-top:16px}
footer .redes a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--hueso);border:1px solid var(--rosa-2);color:var(--acento);
  transition:background .16s ease}
footer .redes a:hover{background:#fff}
footer .redes svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}

/* --- la familia, en el obrador ------------------------------------------ */
.familia{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.familia img{width:100%;height:100%;object-fit:cover;border-radius:var(--radio)}
.familia .col{display:grid;gap:16px}
.familia .grande{aspect-ratio:4/5}
.familia .peque{aspect-ratio:4/3}
@media(max-width:720px){
  .familia{grid-template-columns:1fr}
  .familia .grande{aspect-ratio:4/3}
}

/* ==========================================================================
   PORTADA A SANGRE · la que pidió Mario, como la del carrusel: la foto
   entera, el sello encima y el titular en blanco. El velo va de arriba y de
   abajo para que se lean el menú y el texto sin apagar el dulce del centro.
   ========================================================================== */
.portada-foto{
  position:relative;padding:0;min-height:clamp(440px,76vh,680px);
  display:grid;align-items:center;overflow:hidden}
.portada-foto>picture,.portada-foto>picture img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.velo-hero{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,15,20,.52) 0%,rgba(26,15,20,.26) 28%,
                    rgba(26,15,20,.54) 62%,rgba(26,15,20,.78) 100%)}
.portada-foto .env{position:relative;z-index:2;text-align:center;padding-block:56px}

.portada-foto .ojo{color:#F0D9BE}
.portada-foto h1{color:#fff;font-weight:500}
.portada-foto h1 span{
  display:block;font-style:italic;font-weight:400;color:#F0D9BE;
  font-size:.74em;margin-top:.06em}
.portada-foto p{color:rgba(255,255,255,.92);margin:16px auto 28px;max-width:46ch}
.portada-foto .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-claro{background:rgba(255,255,255,.92);color:var(--tinta)}
.btn-claro:hover{background:#fff}
@media(max-width:720px){.portada-foto{min-height:72vh}}

/* ==========================================================================
   UNA SOLA PÁGINA · lo que hacía falta al juntarlo todo
   ========================================================================== */
.banda{background:var(--rosa)}

/* Los retratos van SOLOS, uno debajo de otro. Nada de mosaicos ni fotos
   montadas encima de otras: a Mario le chirriaba y con razón, una persona
   no es una textura de fondo. */
.retrato{margin:36px auto 0;max-width:560px}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radio-g)}
.retrato.ancha{max-width:860px;margin-top:40px}
.retrato.ancha img{aspect-ratio:4/3}
.retrato figcaption{
  margin-top:12px;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:16px;color:var(--tinta-60)}
.texto-medio{max-width:62ch;margin:32px auto 0}
.texto-medio p+p{margin-top:14px}

.filtros{margin-top:36px}
.mapa{width:100%;height:320px;border:1px solid var(--linea);
  border-radius:var(--radio-g);margin-top:40px}

/* el menú de arriba y la barra de abajo llevan anclas: que el título no se
   quede debajo de la cabecera fija al saltar */
section[id]{scroll-margin-top:84px}

/* ==========================================================================
   PORTADA · la foto entera, sin recortar
   Mario la quiere completa ("se tiene que ver perfectamente") y además la
   foto lleva el logotipo dentro, así que cualquier recorte se lo comería.
   Por eso aquí NO hay object-fit:cover: la imagen manda su propia altura y
   el texto se coloca al lado (o debajo en móvil).
   ========================================================================== */
.portada{padding-block:56px}
.portada .env{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.portada .foto img{
  /* aspect-ratio:auto a propósito: arriba hay una regla vieja con 5/4 y
     object-fit:cover que recortaba la foto y se comía el logotipo. */
  width:100%;height:auto;aspect-ratio:auto;object-fit:fill;
  border-radius:var(--radio-g);box-shadow:var(--sombra)}
.portada h1 span{
  display:block;font-style:italic;font-weight:400;color:var(--acento);
  font-size:.74em;margin-top:.04em}
.portada .texto>p{margin:16px 0 28px;max-width:44ch}
.portada .acciones{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){
  .portada{padding-block:32px}
  .portada .env{grid-template-columns:1fr;gap:28px}
  .portada .texto{order:2;text-align:center}
  .portada .texto>p{margin-inline:auto}
  .portada .acciones{justify-content:center}
}

/* ==========================================================================
   ELEGIR VARIOS Y MANDAR UN SOLO WHATSAPP
   Antes cada dulce abría su propio mensaje: para pedir cuatro cosas había que
   mandar cuatro WhatsApps. Ahora se marcan con el + y abajo sale una barra
   con todo junto. No es un carrito (no se paga aquí), es una lista.
   ========================================================================== */
.pieza .anadir{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--rosa);color:var(--acento);font-size:18px;font-weight:600;
  line-height:1;flex:0 0 auto;cursor:pointer;
  border:1px solid transparent;transition:background .16s ease,color .16s ease}
.pieza .anadir:hover{background:var(--rosa-2)}
.pieza .anadir.puesto{background:var(--acento);color:#fff}
.pieza .anadir:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* El menos aparece solo cuando ya llevas alguno, para poder bajar la cantidad
   sin tener que vaciar toda la cesta. Mismo tamaño que el +, más apagado. */
.pieza .menos{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--rosa);color:var(--acento);font-size:18px;font-weight:600;
  line-height:1;flex:0 0 auto;cursor:pointer;margin-right:6px;
  border:1px solid transparent;opacity:.75;
  transition:background .16s ease,opacity .16s ease}
.pieza .menos:hover{background:var(--rosa-2);opacity:1}
.pieza .menos:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* dentro de la ficha abierta */
.ficha .quita{
  display:block;margin-top:10px;background:none;border:0;font:inherit;
  font-size:13px;color:var(--tinta-40);text-decoration:underline;cursor:pointer}

.cesta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--hueso);border-top:1px solid var(--linea);
  box-shadow:0 -6px 24px rgba(26,15,20,.08);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(120%);transition:transform .24s ease}
.cesta.ver{transform:none}
.cesta .env{display:flex;align-items:center;gap:12px}
.cesta .cuenta{font-weight:600;font-size:14px;margin-right:auto}
.cesta .vaciar{
  background:none;border:0;font:inherit;font-size:13px;color:var(--tinta-40);
  cursor:pointer;text-decoration:underline}
.cesta .btn{flex:0 0 auto}
@media(max-width:860px){
  /* la barra de secciones se aparta para que no se pisen */
  .cesta{bottom:64px}
  .cesta .env{gap:8px}
  .cesta .cuenta{font-size:13px}
  .cesta .btn{padding:12px 18px;font-size:13px}
}

/* el arroba de Instagram, con su símbolo para que se reconozca de un vistazo */
.insta{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.insta svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.insta:hover{color:var(--acento)}

/* --- cinta de la oferta -------------------------------------------------- */
.cinta{
  background:var(--rosa);border-bottom:1px solid var(--rosa-2);
  color:var(--tinta);font-size:13.5px;text-align:center;
  padding:10px 16px;display:flex;gap:8px;justify-content:center;
  align-items:center;flex-wrap:wrap}
.cinta b{font-weight:600}
.cinta .cod{
  border:1px dashed var(--acento);border-radius:6px;padding:2px 9px;
  letter-spacing:.1em;font-weight:600;color:var(--acento);white-space:nowrap}
@media(max-width:560px){.cinta{font-size:12.5px;padding:9px 14px}}

/* --- el cartel del descuento -------------------------------------------- */
.cartel{
  position:relative;width:min(380px,100%);background:var(--hueso);
  border:1px solid var(--rosa-2);border-radius:var(--radio-g);
  padding:30px 26px 24px;text-align:center;box-shadow:var(--sombra);
  transform:translateY(12px);transition:transform .24s ease}
.velo.ver .cartel{transform:none}
.cartel .logo{width:96px;margin:0 auto 14px}
.cartel h2{font-size:26px;margin-bottom:8px}
.cartel>p{font-size:14.5px;margin:0 auto 20px;max-width:30ch}
.cartel .codigo{
  border:1px dashed var(--acento);border-radius:12px;padding:12px 16px;
  background:var(--rosa)}
.cartel .codigo span{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-40);margin-bottom:4px}
.cartel .codigo b{display:block;font-size:22px;letter-spacing:.16em;color:var(--acento)}
.cartel small{display:block;margin-top:12px;font-size:13px;color:var(--tinta-60)}
.cartel .btn{display:block;margin-top:20px}
.cartel .ahora-no{
  display:block;width:100%;margin-top:10px;padding:8px;background:none;border:0;
  font:inherit;font-size:14px;color:var(--tinta-40);cursor:pointer}
.cartel .ahora-no:hover{color:var(--tinta)}
/* la X del cartel: la regla de cerrar era solo para .ficha, así que aquí el
   botón se quedaba en el flujo, centrado y con aspecto de botón del sistema */
.cartel .cerrar{
  position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;
  border-radius:50%;background:var(--rosa);color:var(--tinta);font-size:20px;
  line-height:1;cursor:pointer;display:grid;place-items:center}
.cartel .cerrar:hover{background:var(--rosa-2)}

/* ==========================================================================
   LA HISTORIA, COMO UNA PÁGINA DE REVISTA
   Fotos a la izquierda, texto a la derecha, y el texto en la serif: aquí no
   se vende nada, se lee. Por eso la columna es estrecha (unos 58 caracteres,
   que es lo que se lee cómodo), la primera línea entra en cuerpo mayor y el
   primer párrafo lleva capitular, como en una revista de verdad.
   ========================================================================== */
.revista{display:grid;grid-template-columns:.86fr 1.14fr;gap:48px;align-items:start}
.revista .col-foto{display:grid;gap:22px;position:sticky;top:96px}
.revista figure{margin:0}
.revista figure img{width:100%;height:auto;border-radius:var(--radio);display:block}
.revista figcaption{
  margin-top:8px;font-family:var(--serif);font-style:italic;font-size:13.5px;
  color:var(--tinta-60);line-height:1.45}

.revista .col-texto{max-width:58ch}
.revista h2{margin:6px 0 20px;font-size:38px;line-height:1.08}
.revista p{
  font-family:var(--serif);font-size:17.5px;line-height:1.62;color:var(--tinta);
  margin-bottom:16px}
.revista .entradilla{font-size:20px;line-height:1.55}
.revista .entradilla::first-letter{
  float:left;font-size:62px;line-height:.86;padding:4px 10px 0 0;
  color:var(--acento);font-weight:500}
.revista .cierre{font-style:italic;color:var(--tinta-60)}
.revista .firma{
  font-family:var(--serif);font-size:24px;font-style:italic;color:var(--acento);
  margin-top:24px}
.revista .ojo{margin-bottom:6px}

@media(max-width:860px){
  .revista{grid-template-columns:1fr;gap:28px}
  .revista .col-foto{position:static;grid-template-columns:1fr}
  .revista .col-texto{max-width:none}
  .revista h2{font-size:28px}
  .revista p{font-size:16.5px}
  .revista .entradilla{font-size:18px}
  .revista .entradilla::first-letter{font-size:50px}
}

.revista .ojo{letter-spacing:.24em}
.revista .firma{font-size:24px}

/* ==========================================================================
   PORTADA A SANGRE (la que le gustó al principio)
   La foto ocupa toda la pantalla, el sello arriba y el titular encima. Dos
   cosas que costaron: el velo tiene que apretar ARRIBA y ABAJO pero dejar
   limpio el centro, que es donde está el dulce; y el sello no puede ir en
   blanco (la nata también lo es), así que va en su marrón sobre un disco
   crema, como una pegatina puesta encima.
   ========================================================================== */
.portada-foto{
  position:relative;padding:0;min-height:clamp(480px,78vh,700px);
  display:grid;align-items:center;overflow:hidden}
.portada-foto>picture,.portada-foto>picture img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.velo-hero{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,15,20,.46) 0%,rgba(26,15,20,.10) 30%,
                    rgba(26,15,20,.36) 60%,rgba(26,15,20,.74) 100%)}
.portada-foto .env{position:relative;z-index:2;text-align:center;padding-block:52px}
.portada-foto .sello{
  display:grid;place-items:center;width:92px;height:92px;margin:0 auto 22px;
  border-radius:50%;background:rgba(255,248,250,.94);
  box-shadow:0 8px 28px rgba(26,15,20,.28)}
.portada-foto .sello img{width:78px;height:auto}
.portada-foto .ojo{color:#F7DCE4}
.portada-foto h1{color:#fff;font-size:52px;line-height:1.05}
.portada-foto h1 span{
  display:block;font-style:italic;color:#F7DCE4;font-size:.72em;margin-top:.04em}
.portada-foto>.env>p{color:rgba(255,255,255,.94);margin:14px auto 28px;max-width:44ch}
.portada-foto .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-claro{background:rgba(255,255,255,.94);color:var(--tinta)}
.btn-claro:hover{background:#fff}
@media(max-width:720px){
  .portada-foto{min-height:78vh}
  .portada-foto h1{font-size:38px}
  .portada-foto .sello{width:78px;height:78px;margin-bottom:16px}
  .portada-foto .sello img{width:64px}
}

/* ==========================================================================
   LA CINTA DE LA OFERTA · fija arriba del todo
   Antes se quedaba en el sitio y desaparecía al bajar, y además era pequeña.
   Ahora va pegada arriba, se ve siempre y se puede pulsar: abre el WhatsApp
   con el código puesto. La cabecera baja para no taparla.
   ========================================================================== */
.cinta{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;
  background:var(--acento);color:#fff;text-decoration:none;
  font-size:15px;padding:12px 16px calc(12px + env(safe-area-inset-top,0px));
  box-shadow:0 2px 10px rgba(26,15,20,.10)}
.cinta b{font-weight:600}
.cinta .cod{
  border:1px dashed rgba(255,255,255,.75);border-radius:6px;padding:3px 10px;
  letter-spacing:.1em;font-weight:600;white-space:nowrap}
.cinta:hover{background:var(--acento-oscuro)}
.cab{top:var(--alto-cinta,48px)}
body{padding-top:var(--alto-cinta,48px)}
.propuesta{display:none}          /* el aviso se pasa al pie: arriba estorbaba */
@media(max-width:560px){
  .cinta{font-size:13.5px;padding:10px 14px calc(10px + env(safe-area-inset-top,0px))}
  .cinta .cod{padding:2px 8px}
}

/* ==========================================================================
   PORTADA CON EL SELLO
   El logotipo es lo mejor que tienen: aquí manda él, en grande, sobre el
   fondo pastel. Los adornos son tres manchas de color muy suaves, nada de
   dibujos: si se notan, sobran. Debajo, una tira con cuatro dulces reales
   para que se vea producto sin salir de la portada.
   ========================================================================== */
.portada-sello{
  position:relative;overflow:hidden;padding-block:56px 64px;
  background:
    radial-gradient(90% 70% at 50% 0%, #FDF8ED 0%, transparent 62%),
    linear-gradient(180deg,var(--rosa) 0%,var(--crema) 72%)}
.portada-sello .env{position:relative;z-index:2;text-align:center}
.portada-sello .sello{width:min(300px,62vw);height:auto;margin:0 auto 22px}
.portada-sello h1{font-size:50px;line-height:1.06}
.portada-sello h1 span{
  display:block;font-style:italic;color:var(--acento);font-size:.72em;margin-top:.04em}
.portada-sello .frase{margin:14px auto 28px;max-width:46ch}
.portada-sello .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* las manchas de color: rosa y marrón muy diluidos */
.portada-sello .adorno{position:absolute;border-radius:50%;filter:blur(38px);pointer-events:none}
.portada-sello .a1{width:340px;height:340px;left:-90px;top:40px;
  background:rgba(160,120,70,.16)}
.portada-sello .a2{width:300px;height:300px;right:-80px;top:120px;
  background:rgba(160,110,70,.18)}
.portada-sello .a3{width:420px;height:200px;left:50%;bottom:-70px;transform:translateX(-50%);
  background:rgba(160,120,70,.12)}

.tira-fotos{display:flex;gap:12px;justify-content:center;margin-top:40px}
.tira-fotos img{
  width:136px;height:136px;object-fit:cover;border-radius:50%;
  border:3px solid var(--hueso);box-shadow:var(--sombra)}

/* Los dulces de la portada desfilan hacia la izquierda (js/tira.js): el que se
   sale por un lado vuelve a entrar por el otro con otra foto. La fila se mueve
   entera con transform; los bordes se difuminan para que no aparezcan de golpe. */
.tira-fotos.tira-corre{
  display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.tira-fotos.tira-corre .pista{
  display:flex;gap:12px;width:max-content;will-change:transform}
.tira-fotos.tira-corre .pista img{flex:none}
@media(prefers-reduced-motion:reduce){
  .tira-fotos.tira-corre{-webkit-mask-image:none;mask-image:none}
  .tira-fotos.tira-corre .pista{justify-content:center;will-change:auto}
}

@media(max-width:720px){
  .portada-sello{padding-block:36px 44px}
  .portada-sello h1{font-size:36px}
  .portada-sello .sello{width:min(240px,66vw);margin-bottom:16px}
  .tira-fotos{gap:8px;margin-top:28px}
  .tira-fotos img{width:96px;height:96px;border-width:3px}
  .tira-fotos.tira-corre .pista{gap:8px}
}
/* el código se veía vacío: la regla vieja lo pintaba del rosa del propio
   fondo de la cinta, así que quedaba rosa sobre rosa */
.cinta .cod{color:#fff}

/* --- botón flotante de LLAMAR --------------------------------------------
   Va en el marrón de la casa, no en el verde de WhatsApp: si fuera verde la
   gente esperaría un chat y lo que hace es marcar el teléfono. */
.wa-flota{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:65;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--acento);color:#fff;
  box-shadow:0 6px 20px rgba(26,15,20,.24);
  transition:transform .18s ease,box-shadow .18s ease}
.wa-flota svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linejoin:round}
.wa-flota:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,15,20,.28)}
.wa-flota:active{transform:scale(.96)}
@media(max-width:860px){
  /* encima de la barra de secciones, y más arriba aún si hay cesta */
  .wa-flota{bottom:calc(76px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
  .wa-flota svg{width:27px;height:27px}
  body:has(.cesta.ver) .wa-flota{bottom:calc(146px + env(safe-area-inset-bottom,0px))}
}

/* --- los dos avisos: reparto a Santoña y hostelería -----------------------
   No son productos, así que no van en la rejilla: son dos notas al pie de
   los dulces, en su caja, para que no se pierdan. */
.avisos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.avisos>div{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--hueso);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px 20px}
.avisos .ic{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--rosa);color:var(--acento);font-size:17px}
.avisos b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:3px}
.avisos p{font-size:14px;line-height:1.5}
@media(max-width:720px){.avisos{grid-template-columns:1fr;gap:12px}}

/* --- la cinta, con los mensajes turnándose ------------------------------- */
.cinta{display:grid;place-items:center;min-height:58px;padding:14px 16px calc(14px + env(safe-area-inset-top,0px));font-size:15.5px}
.cinta .msg{
  grid-area:1/1;display:flex;gap:10px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;
  opacity:0;transform:translateY(5px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.cinta .msg.ver{opacity:1;transform:none}
@media(max-width:560px){
  .cinta{font-size:14px;min-height:62px}
}

/* --- banda de servicios -------------------------------------------------- */
.servicios{text-align:center}
.servicios h2{margin-bottom:36px}
.rejilla-serv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rejilla-serv article{
  background:var(--hueso);border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:30px 24px 26px;display:flex;flex-direction:column;align-items:center;
  box-shadow:var(--sombra)}
.rejilla-serv .ic{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--rosa);color:var(--acento);margin-bottom:16px}
.rejilla-serv .ic svg{width:28px;height:28px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rejilla-serv h3{font-size:19px;margin-bottom:10px}
.rejilla-serv p{font-size:14.5px;line-height:1.55;margin-bottom:22px}
.rejilla-serv .btn{margin-top:auto;width:100%}
@media(max-width:860px){
  .rejilla-serv{grid-template-columns:1fr;gap:14px}
  .rejilla-serv article{padding:26px 20px 22px}
}
/* los dos mensajes se leían uno encima de otro al cambiar: el que sale se
   apaga primero y el que entra espera a que termine */
.cinta .msg{transition:opacity .26s ease,transform .26s ease}
.cinta .msg.ver{transition-delay:.26s}

/* --- cada familia, su sección ------------------------------------------- */
.familia{padding-block:64px}
.familia .titulo-fila{margin-bottom:24px}
.familia .lead{margin:-8px 0 26px}
@media(max-width:720px){.familia{padding-block:44px}}

/* --- el vídeo del obrador ------------------------------------------------
   Va mudo y arranca solo al llegar (y se para al salir, para no gastar
   batería). Si el móvil no lo deja arrancar, se queda el fotograma de
   portada, que ya es una foto buena. */
.video{margin:40px auto 0;max-width:420px}
.video video{
  width:100%;height:auto;display:block;border-radius:var(--radio-g);
  background:var(--rosa)}
.video figcaption{
  margin-top:10px;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:13.5px;color:var(--tinta-60)}
/* el botón de sonido del vídeo */
.video .marco{position:relative}
.video .sonido{
  position:absolute;right:12px;bottom:12px;width:44px;height:44px;border:0;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(34,26,18,.55);color:#fff;backdrop-filter:blur(4px)}
.video .sonido svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.video .sonido:hover{background:rgba(34,26,18,.72)}