/* =====================================================================
   LÚCIDO · Café con Sentido — Sant Andreu del Palomar, Barcelona
   Hoja de estilos principal
   Autor: DAIP
   ---------------------------------------------------------------------
   Índice
   01. Tokens de marca
   02. Reset y base
   03. Tipografía y utilidades
   04. Botones y enlaces
   05. Animaciones de entrada
   06. Header y navegación
   07. Hero
   08. Marquee
   09. Valores
   10. Carta
   11. El día en Lúcido
   12. Manifiesto
   13. Nosotros
   14. Comunidad
   15. Próximamente (agenda)
   16. Encargos: catering y tartas
   17. Tienda del almacén
   18. Galería
   19. Visítanos y mapa
   20. Reservar y formulario
   21. FAQ
   22. Footer
   23. Responsive
   ===================================================================== */


/* ============ 01. TOKENS DE MARCA ============ */
:root{
  /* Paleta extraída de la identidad real de Lúcido */
  --cream:        #F2ECE1;   /* papel, fondo principal */
  --cream-2:      #EAE2D4;   /* superficie alterna */
  --cream-3:      #E1D7C6;   /* bordes suaves, relleno */
  --ink:          #2B211A;   /* texto principal */
  --ink-soft:     #6E5F51;   /* texto secundario — 5,2:1 sobre crema */
  --terra:        #9C5230;   /* primario — terracota del sello, 4,9:1 sobre crema */
  --terra-deep:   #82421F;
  --terra-light:  #C99A80;
  --sage:         #9FB287;   /* secundario — verde salvia */
  --sage-deep:    #6E8256;
  --forest:       #2C3A2E;   /* verde carpintería, secciones oscuras */
  --forest-2:     #222E24;

  --line:         rgba(43,33,26,.14);
  --line-strong:  rgba(43,33,26,.26);

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Métrica */
  --shell:   1220px;
  --gutter:  clamp(1.25rem, 5vw, 3.5rem);
  --header-h: 78px;
  --radius:  4px;

  /* Movimiento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  .9s;

  color-scheme: light;
}


/* ============ 02. RESET Y BASE ============ */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .97rem + .18vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .002em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grano de papel: quita la sensación de "plano digital".
   Sin mix-blend-mode a propósito: mezclar una capa fija obliga al
   navegador a recomponer la página entera en cada scroll y se nota
   en móviles de gama media. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video{ display: block; max-width: 100%; }
[hidden]{ display: none !important; }
img{ height: auto; }

button, input, select, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; }

a{ color: inherit; }

:focus-visible{
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection{ background: var(--terra); color: var(--cream); }

.skip-link{
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: var(--radius);
  transition: top .25s var(--ease);
}
.skip-link:focus{ top: 1rem; }

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ============ 03. TIPOGRAFÍA Y UTILIDADES ============ */
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
  line-height: 1.03;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

em{ font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1; }

.eyebrow{
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 1.5rem;
}

.section{ padding-block: clamp(5rem, 11vw, 9.5rem); }

.section__head{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.section__head--center{
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.section__title{
  font-size: clamp(2.35rem, 5.6vw, 4.25rem);
}
.section__title em{ color: var(--terra); }

.section__intro{
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0;
}
.section__intro--center{ margin-inline: auto; }

.legend{
  display: block;
  margin-top: 1rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
}
.legend b{ color: var(--terra); font-weight: 500; }


/* ============ 04. BOTONES Y ENLACES ============ */
.btn{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:hover::before{ transform: translateY(0); }
.btn:active{ transform: translateY(0); }

.btn--solid{
  --btn-bg: var(--terra);
  --btn-fg: var(--cream);
  --btn-bd: var(--terra);
}
.btn--solid::before{ background: var(--terra-deep); }
.btn--solid:hover{ border-color: var(--terra-deep); }

.btn--ghost:hover{ color: var(--cream); border-color: var(--ink); }

.btn--lg{ padding: 1.1em 2.1em; }
.btn--block{ width: 100%; }

.btn__ico{ width: 1.05em; height: 1.05em; transition: transform .45s var(--ease); }
.btn:hover .btn__ico{ transform: translateX(4px); }

.link{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 1.4rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--terra);
  padding-bottom: .35em;
  border-bottom: 1px solid color-mix(in srgb, var(--terra) 35%, transparent);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.link svg{ width: 1.05em; height: 1.05em; transition: transform .4s var(--ease); }
.link:hover{ border-color: var(--terra); }
.link:hover svg{ transform: translateX(4px); }

.ulink{
  text-decoration: none;
  background-image: linear-gradient(var(--terra), var(--terra));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease), color .45s var(--ease);
  padding-bottom: 2px;
}
.ulink:hover{ color: var(--terra); background-size: 100% 1px; }


/* ============ 05. ANIMACIONES DE ENTRADA ============ */
[data-reveal]:not(.line){
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in:not(.line){ opacity: 1; transform: none; }

[data-reveal-delay="1"]{ transition-delay: .09s; }
[data-reveal-delay="2"]{ transition-delay: .18s; }
[data-reveal-delay="3"]{ transition-delay: .27s; }
[data-reveal-delay="4"]{ transition-delay: .36s; }
[data-reveal-delay="5"]{ transition-delay: .45s; }
[data-reveal-delay="6"]{ transition-delay: .54s; }
[data-reveal-delay="7"]{ transition-delay: .63s; }

/* Revelado por líneas con máscara (hero y manifiesto) */
.line{
  display: block;
  overflow: hidden;
  padding-block: .06em .14em;
  margin-block: -.06em -.14em;
}
.line__inner{
  display: block;
  transform: translateY(106%);
  transition: transform 1.05s var(--ease);
}
.is-in .line__inner,
.line.is-in .line__inner{ transform: none; }

.hero__title.is-in .line:nth-child(1) .line__inner{ transition-delay: .05s; }
.hero__title.is-in .line:nth-child(2) .line__inner{ transition-delay: .16s; }

/* Dibujado del sello */
.seal-draw path{
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: draw 1.6s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }


/* ============ 06. HEADER Y NAVEGACIÓN ============ */
.site-header{
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-stuck{
  height: 64px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark{
  width: 38px; height: 38px;
  color: var(--terra);
  stroke: currentColor;
  transition: transform .8s var(--ease), color .5s var(--ease);
}
.brand:hover .brand__mark{ transform: rotate(-12deg); color: var(--sage-deep); }

.brand__text{ display: flex; flex-direction: column; line-height: 1; }
.brand__name{
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand__tag{
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .35em;
}

.nav{ display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }
.nav__list{
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a{
  position: relative;
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding-block: .4em;
}
.nav__list a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__list a:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav__cta{ padding: .8em 1.4em; font-size: .74rem; }

.burger{
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  margin-right: -10px;
}
.burger span{
  display: block; height: 1.5px; background: var(--ink);
  transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ width: 26px; }
.burger span:nth-child(2){ width: 18px; }
.burger[aria-expanded="true"] span:nth-child(1){ width: 26px; transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ width: 26px; transform: translateY(-4.25px) rotate(-45deg); }


/* ============ 07. HERO ============ */
.hero{
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}

.hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero__title{
  font-size: clamp(3.1rem, 9.4vw, 7.4rem);
  font-variation-settings: "SOFT" 10, "WONK" 1, "opsz" 144;
  letter-spacing: -.032em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__title em{ color: var(--terra); }

.hero__lead{
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.hero__actions{ display: flex; flex-wrap: wrap; gap: .85rem; }

.status{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 2.25rem;
  padding: .5rem .95rem .5rem .8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: color-mix(in srgb, var(--cream-2) 60%, transparent);
  font-size: .78rem;
  letter-spacing: .06em;
}
.status__dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-soft);
  position: relative;
  flex-shrink: 0;
}
.status__dot.is-open{ background: var(--sage-deep); }
.status__dot.is-open::after{
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--sage-deep);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(.7); opacity: .9; }
  100%{ transform: scale(1.9); opacity: 0; }
}
.status__text b{ font-weight: 500; }

/* Media del hero: forma de arco */
/* isolation: la pila 3D de la portada usa z-index altos y no deben salir de aquí */
.hero__media{ position: relative; isolation: isolate; }

.arch{
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 50vw 50vw 6px 6px / 34vw 34vw 6px 6px;
  background: var(--cream-3);
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 70px -40px rgba(43,33,26,.55);
}
.arch img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.arch:hover img{ transform: scale(1.09); }

/* El sello monta sobre el arco: la superposición es intencionada y
   es lo que da la sensación de composición impresa. */
.hero__seal{
  position: absolute;
  left: clamp(-96px, -9vw, -48px);
  bottom: 6%;
  width: clamp(112px, 15vw, 176px);
  color: var(--sage);
  stroke: currentColor;
  opacity: .92;
  z-index: 3;
  animation: float 9s ease-in-out infinite;
}
@keyframes float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(-5deg); }
}

.hero__note{
  position: absolute;
  right: 0; bottom: -1.75rem;
  display: flex; flex-direction: column;
  text-align: right;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0;
}

.hero__vertical{
  position: absolute;
  left: calc(var(--gutter) * .28);
  bottom: clamp(3rem, 10vw, 7rem);
  margin: 0;
  writing-mode: vertical-rl;
  font-size: .68rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .34;
}


/* ============ 08. MARQUEE ============ */
.marquee{
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--cream-2);
  padding-block: 1.05rem;
  user-select: none;
}
.marquee__track{
  display: flex;
  width: max-content;
  animation: slide 48s linear infinite;
}
.marquee__track span{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  letter-spacing: .04em;
  white-space: nowrap;
  padding-right: 1.5rem;
}
.marquee__track i{
  font-style: normal;
  color: var(--terra);
  padding-inline: 1.1rem;
}
@keyframes slide{ to{ transform: translateX(-50%); } }


/* ============ 09. VALORES ============ */
.values{ padding-block: clamp(4rem, 9vw, 7rem); }
.values__grid{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.value{
  background: var(--cream);
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.2vw, 1.9rem);
  transition: background-color .6s var(--ease);
}
.value:hover{ background: var(--cream-2); }
.value__ico{
  width: 40px; height: 40px;
  color: var(--terra);
  margin-bottom: 1.5rem;
  transition: transform .7s var(--ease), color .5s var(--ease);
}
.value:hover .value__ico{ transform: translateY(-4px); color: var(--sage-deep); }
.value h3{
  font-size: 1.3rem;
  margin-bottom: .7rem;
}
.value p{
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.68;
}


/* ============ 10. CARTA ============ */
.carta{ background: var(--cream); }

.tabs__nav{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.tab{
  padding: .7em 1.35em;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.tab:hover{ border-color: var(--ink); }
.tab.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.panel{ display: none; animation: fadeUp .7s var(--ease) both; }
.panel.is-active{ display: block; }
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}

.menu{
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  columns: 2;
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
}
.menu__item{
  break-inside: avoid;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.menu__name{
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  letter-spacing: -.01em;
}
.menu__dots{
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-.28em);
}
.menu__price{
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--terra);
  white-space: nowrap;
}
.menu__price::after{ content: " €"; font-size: .8em; opacity: .6; }
.menu__desc{
  grid-column: 1 / -1;
  font-size: .87rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: .25rem;
}
.tag{
  display: inline-block;
  margin-left: .5em;
  padding: .18em .5em;
  border: 1px solid var(--sage-deep);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--sage-deep);
  vertical-align: middle;
}
.menu__foot{
  font-size: .85rem;
  color: var(--ink-soft);
  padding-top: .5rem;
}
.menu__foot b{ color: var(--ink); font-weight: 400; }


/* Apartados dentro de una categoría (Iced, Smoothies, Planchados...):
   título verde con una línea terracota debajo, como en la carta impresa */
.panel__lema{
  margin: 0 0 1.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--terra);
}
.menu__grupo{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--forest);
  margin: 0 0 .35rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--terra-light);
}
.menu + .menu__grupo{ margin-top: 1rem; }

/* La carta de mesa: páginas dibujadas con los datos del panel y el
   diseño de la carta impresa de Lúcido. Todo dentro de .hoja se mide en
   cqw (ancho de la hoja): la misma hoja sirve de miniatura, de página
   grande en el visor y de A4 al imprimir, sin recalcular nada. */
.impresa{
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.impresa__head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.impresa__head .eyebrow{ margin-bottom: .9rem; }
.impresa__title{
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: .6rem;
}
.impresa__intro{
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0;
}
.impresa__paginas{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.impresa__pagina{
  display: block;
  cursor: pointer;
  border-radius: var(--radius);
}
.impresa__pagina:focus-visible{ outline: 2px solid var(--terra); outline-offset: 6px; }
/* la miniatura: proporción A4, recorta si la página crece */
.mini{
  aspect-ratio: 595 / 842;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -30px rgba(43,33,26,.5);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.impresa__pagina:hover .mini,
.impresa__pagina:focus-visible .mini{
  transform: translateY(-4px);
  box-shadow: 0 26px 46px -28px rgba(43,33,26,.55);
}
.impresa__pagina > span{
  display: block;
  margin-top: .8rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- la hoja ---- */
.hoja{
  --hoja-fondo: #F0ECE0;      /* el crema exacto de su carta */
  --hoja-verde: #4E6B1F;      /* el verde oliva de los títulos */
  --hoja-verde-2: #6B8A3A;
  --hoja-terra: #C4826A;      /* la línea terracota bajo los títulos */
  --hoja-terra-2: #D9A38C;    /* «BE BE» */
  container-type: inline-size;
  position: relative;
  width: 100%;
  background: var(--hoja-fondo);
  color: var(--hoja-verde);
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
/* proporción A4 como mínimo; si hay más productos, la hoja crece */
.hoja::before{ content: ""; float: left; width: 0; padding-top: 141.5%; }
.hoja::after{ content: ""; display: block; clear: both; }
.hoja__cuerpo{
  position: relative;
  padding: 7cqw 7cqw 24cqw;
  line-height: 1.35;
}
.hoja *{ margin: 0; }

/* portada */
.hoja--portada .hoja__cuerpo{
  min-height: 141.5cqw;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 7cqw;
}
.portada__centro{ align-self: center; text-align: center; padding-top: 12cqw; }
.portada__marca{
  font-size: 14cqw;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.portada__carta{
  margin-top: 1.5cqw;
  font-size: 4.2cqw;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.portada__sello{ width: 30cqw; height: 30cqw; margin: 3cqw auto 0; color: var(--hoja-verde); stroke: currentColor; display: block; }
.portada__pie{
  display: flex; justify-content: space-between; align-items: start; gap: 4cqw;
  padding-bottom: 12cqw;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.9cqw;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.portada__pie span:first-child{ text-align: left; }
.portada__pie span:last-child{ text-align: right; }
.portada__pie span:nth-child(2){ max-width: 36cqw; }

/* cabecera de categoría */
.hoja__cab{ margin-bottom: 4cqw; }
.hoja__titulo{
  font-size: 7cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
}
.hoja__lema{
  font-family: "Sacramento", "Brush Script MT", cursive;
  font-weight: 400;
  font-size: 5.2cqw;
  line-height: 1;
  margin-top: 1.2cqw;
  color: var(--hoja-verde-2);
}

/* columnas y apartados */
.hoja__cols{
  columns: var(--cols, 2);
  column-gap: 6cqw;
  column-rule: 1px solid var(--hoja-terra);
}
/* los apartados largos pueden partirse entre columnas; el título nunca se queda solo abajo */
.hoja__grupo{ margin-bottom: 5cqw; }
.hoja__grupo h5{
  break-after: avoid;
  font-size: 3.9cqw;
  font-weight: 700;
  line-height: 1.1;
  padding-bottom: 1.2cqw;
  margin-bottom: 1.6cqw;
  border-bottom: .3cqw solid var(--hoja-terra);
}
.hoja__grupo ol{ list-style: none; padding: 0; counter-reset: plato; }
.hoja__grupo li{
  break-inside: avoid;
  counter-increment: plato;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.2cqw;
  padding: 1.15cqw 0;
  font-size: 2.45cqw;
}
.hoja__grupo li::before{
  content: counter(plato) ".";
  font-weight: 400;
  font-size: .85em;
  color: var(--hoja-verde-2);
}
.hoja__nombre{ font-weight: 600; }
.hoja__precio{ font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hoja__desc{
  grid-column: 2 / -1;
  font-weight: 400;
  font-style: italic;
  font-size: .86em;
  line-height: 1.3;
  color: var(--hoja-verde-2);
}
.hoja__nota{
  margin-top: 2cqw;
  font-weight: 400;
  font-style: italic;
  font-size: 2.3cqw;
  color: var(--hoja-verde-2);
}
.hoja__nota b{ font-weight: 700; font-style: normal; color: var(--hoja-verde); }

/* última página: lista a la izquierda y el texto manuscrito a la derecha */
.hoja__dos{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 6cqw; }
.hoja__cierre{
  font-family: "Sacramento", "Brush Script MT", cursive;
  font-weight: 400;
  font-size: 4.3cqw;
  line-height: 1.22;
  padding-top: 6cqw;
}
.hoja__firma{ margin-top: 3cqw; font-size: 3.8cqw; }

/* dibujos de su carta: la taza y la huella */
.hoja__deco{ position: absolute; pointer-events: none; }
.hoja__deco--taza{ left: 5cqw; bottom: 2cqw; width: 24cqw; }
.hoja__cuerpo:has(.hoja__deco--taza) .hoja__nota{ margin-left: 30cqw; }
.hoja__deco--huella{ right: 7cqw; bottom: 5cqw; width: 11cqw; }
.hoja__cuerpo:has(.hoja__deco--huella)::after{
  content: "Somos pet family";
  position: absolute; right: 19cqw; bottom: 6cqw;
  font-family: "Sacramento", cursive;
  font-weight: 400;
  font-size: 5cqw;
  line-height: 1;
  color: var(--hoja-verde-2);
}

/* Visor a pantalla completa */
.visor{
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
}
.visor__scrim{
  position: absolute; inset: 0;
  background: rgba(43,33,26,.82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.visor__figura{
  position: relative; z-index: 1;
  margin: 0;
  width: min(100%, 680px);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 3px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  background: #F0ECE0;
  animation: fadeUp .5s var(--ease) both;
}
.visor__btn{
  position: absolute; z-index: 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), background-color .3s;
}
.visor__btn svg{ width: 22px; height: 22px; }
.visor__btn:hover{ transform: scale(1.06); }
.visor__btn--cerrar{ top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.visor__btn--ant{ left: clamp(.75rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.visor__btn--sig{ right: clamp(.75rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.visor__btn--ant:hover, .visor__btn--sig:hover{ transform: translateY(-50%) scale(1.06); }
.visor__num{
  position: absolute; z-index: 2;
  left: 50%; bottom: clamp(.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  margin: 0;
  padding: .35em .9em;
  border-radius: 100px;
  background: rgba(242,236,225,.14);
  color: var(--cream);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
body.is-visor{ overflow: hidden; }

/* «Descargar en PDF»: se imprime solo la carta de mesa, una hoja por A4 */
@media print{
  @page{ size: A4; margin: 0; }
  body.imprimiendo{ overflow: visible !important; }
  body.imprimiendo *{ visibility: hidden; }
  body.imprimiendo::after{ display: none; }
  body.imprimiendo .impresa__paginas,
  body.imprimiendo .impresa__paginas *{ visibility: visible; }
  /* que nada por encima de la lista la desplace ni la recorte */
  body.imprimiendo main,
  body.imprimiendo main > section,
  body.imprimiendo .shell,
  body.imprimiendo .tabs,
  body.imprimiendo .impresa{ position: static !important; overflow: visible !important; opacity: 1 !important; transform: none !important; }
  body.imprimiendo .impresa__paginas{
    position: absolute; left: 0; top: 0; width: 100%;
    display: block; margin: 0; padding: 0;
  }
  body.imprimiendo .impresa__paginas li{
    width: 100%; min-height: 100vh;
    background: #F0ECE0;
    break-after: page; page-break-after: always;
  }
  body.imprimiendo .impresa__paginas li:last-child{ break-after: auto; page-break-after: auto; }
  body.imprimiendo .impresa__pagina > span{ display: none; }
  body.imprimiendo .mini{ aspect-ratio: auto; height: auto; overflow: visible; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  body.imprimiendo .hoja{ min-height: 100vh; }
}


/* ============ 10b. REEL: un día en Lúcido en vídeo ============ */
.reel{
  position: relative;
  background: var(--forest-2);
  color: var(--cream);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* el fotograma del clip actual, desenfocado, llena el fondo: así el clip
   vertical no queda como un sello en medio del verde */
.reel__fondo{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.reel__blur{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(42px) saturate(1.1) brightness(.55);
  transform: scale(1.2);
  opacity: .7;
  transition: opacity .9s var(--ease);
}
.reel__blur.is-swapping{ opacity: 0; }
.reel__fondo::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(34,46,36,.85) 0%, rgba(34,46,36,.35) 55%, rgba(34,46,36,.55) 100%);
}
.reel__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.eyebrow--claro{ color: var(--sage); }
.reel__title{ color: var(--cream); }
.reel__title em{ color: var(--sage); }
.reel__pie{
  display: flex; align-items: baseline; gap: 1rem;
  margin: 1.8rem 0 1.4rem;
  min-height: 2.4rem;
}
.reel__hora{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--sage);
}
.reel__nota{
  color: rgba(242,236,225,.78);
  transition: opacity .4s var(--ease);
}
.reel__pie.is-swapping .reel__nota,
.reel__pie.is-swapping .reel__hora{ opacity: 0; }
/* puntos de progreso: el activo se rellena con el tiempo del clip */
.reel__puntos{
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: flex; gap: .5rem;
}
.reel__puntos button{
  --p: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.reel__puntos button::before{
  content: "";
  width: 34px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sage) calc(var(--p) * 100%), rgba(242,236,225,.28) 0);
  transition: transform .3s var(--ease);
}
.reel__puntos button:hover::before{ transform: scaleY(1.6); }
.reel__puntos button.is-active::before{ background: linear-gradient(90deg, var(--sage) calc(var(--p) * 100%), rgba(242,236,225,.4) 0); }
.reel__sonido{
  display: inline-flex; align-items: center; gap: .6em;
  padding: .7em 1.2em;
  border: 1px solid rgba(242,236,225,.35);
  border-radius: 100px;
  color: var(--cream);
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .3s, background-color .3s;
}
.reel__sonido:hover{ border-color: var(--cream); }
.reel__sonido[aria-pressed="true"]{ background: var(--cream); color: var(--forest-2); border-color: var(--cream); }
.reel__sonido svg{ width: 1.2em; height: 1.2em; }
.reel__sonido[aria-pressed="false"] .reel__ondas{ opacity: .35; }
/* el clip, vertical, como se grabó */
.reel__marco{
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  border-radius: 22px;
  overflow: hidden;
  background: var(--forest);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(242,236,225,.12);
}
.reel__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.reel__video.is-front{ opacity: 1; }
.reel__movil{ display: none; }
@media (max-width: 900px){
  .reel__inner{ grid-template-columns: 1fr; gap: 2rem; }
  .reel__marco{ width: min(100%, 360px); max-height: none; }
  .reel__pie{ display: none; }
  .reel__puntos{ margin-bottom: 1.25rem; }
  /* en móvil la hora y la frase van sobre el propio vídeo */
  .reel__movil{
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: .15rem;
    margin: 0;
    padding: 3rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(34,46,36,.85), transparent);
    color: var(--cream);
    transition: opacity .4s var(--ease);
  }
  .reel__movil.is-swapping{ opacity: 0; }
  .reel__movil span:first-child{ font-family: var(--font-display); font-size: 1.5rem; color: var(--sage); }
  .reel__movil span:last-child{ font-size: .95rem; opacity: .85; }
}
html.menos-movimiento .reel__blur, html.menos-movimiento .reel__video, html.menos-movimiento .reel__nota,
html.menos-movimiento .reel__hora, html.menos-movimiento .reel__movil{ transition: none; }


/* ============ 10c. SERVIR: el vaso que se sirve con el scroll ============ */
.servir{ background: var(--cream); }
.servir__track{ position: relative; height: 320vh; }
.servir__stage{
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: grid; align-items: center;
  overflow: hidden;
}
.servir__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.servir__paso{
  margin-top: 1.6rem;
  min-height: 3.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--terra);
  transition: opacity .4s var(--ease);
}
.servir__vaso{
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 2 / 3;
  max-height: 82vh;
}
.servir__poster,
.servir__lienzo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.servir__poster{ transition: opacity .3s; }
.servir.is-ready .servir__poster{ opacity: 0; }
/* la pista de abajo: desaparece en cuanto se empieza a bajar */
.servir__pista{
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity .5s var(--ease);
}
.servir__pista span{
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, var(--terra));
  animation: servir-gota 1.8s var(--ease) infinite;
}
.servir__pista.is-oculta{ opacity: 0; }
@keyframes servir-gota{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 900px){
  .servir__track{ height: 260vh; }
  .servir__inner{ grid-template-columns: 1fr; gap: 1.25rem; align-content: center; }
  .servir__texto .section__title{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .servir__paso{ margin-top: .8rem; min-height: 2.8rem; font-size: 1.05rem; }
  .servir__vaso{ width: min(100%, 300px); max-height: 52vh; }
}
html.menos-movimiento .servir__pista span{ animation: none; transform: none; }


/* ============ 11. EL DÍA EN LÚCIDO ============ */
.dia{ background: var(--cream-2); }

.timeline{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.moment{
  display: grid;
  grid-template-columns: clamp(6rem, 16vw, 13rem) minmax(0, 1fr) clamp(150px, 15vw, 210px);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  position: relative;
}

/* Un clip vertical por momento, en formato de pantalla de móvil: es el
   formato en el que el cliente graba y en el que su público lo consume */
.moment__media{
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream-3);
  box-shadow: 0 24px 50px -30px rgba(43,33,26,.5);
}
.moment__video{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.moment::before{
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--terra);
  transition: width 1.1s var(--ease);
}
.moment.is-in::before{ width: 100%; }

.moment__time{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 2.9rem);
  font-variation-settings: "SOFT" 10, "WONK" 1, "opsz" 144;
  color: var(--terra);
  letter-spacing: -.03em;
  line-height: 1;
}
.moment__body{ max-width: 42rem; }
.moment__body h3{
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin-bottom: .8rem;
}
.moment__body p{ color: var(--ink-soft); }
.moment__pick{
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin-top: 1.1rem;
}
.moment__pick b{ color: var(--terra); font-weight: 400; }

/* Caja "ahora mismo" */
.nowbox{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.nowbox__seal{
  width: clamp(48px, 7vw, 68px);
  flex-shrink: 0;
  color: var(--sage);
  stroke: currentColor;
}
.nowbox__label{
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .45rem;
}
.nowbox__text{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.35;
  margin: 0;
}


/* ============ 12. MANIFIESTO ============ */
.manifiesto{
  position: relative;
  background: var(--forest);
  color: var(--cream);
  padding-block: clamp(6rem, 14vw, 12rem);
  overflow: hidden;
}
.manifiesto__inner{
  position: relative;
  text-align: center;
  max-width: 56rem;
}
.manifiesto__seal{
  width: clamp(90px, 13vw, 148px);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  color: var(--sage);
  stroke: currentColor;
  opacity: .9;
}
.manifiesto__quote{ margin: 0; }
.manifiesto__quote p{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.1vw, 3.15rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  line-height: 1.24;
  letter-spacing: -.02em;
  margin: 0;
}
.manifiesto__quote em{ color: var(--sage); }
.manifiesto__quote footer{
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .6;
}
.manifiesto__post{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(242,236,225,.16);
  font-size: .82rem;
  letter-spacing: .1em;
  color: rgba(242,236,225,.62);
  max-width: 32rem;
  margin-inline: auto;
}


/* ============ 13. NOSOTROS ============ */
.nosotros__grid{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.nosotros__media{ position: relative; padding-bottom: 4rem; }
.arch--sm{ aspect-ratio: 3 / 4; }
.arch--xs{
  position: absolute;
  right: -1.5rem; bottom: 0;
  z-index: 2;
  width: 46%;
  aspect-ratio: 3 / 4;
  box-shadow: 0 24px 50px -30px rgba(43,33,26,.6);
  outline: 8px solid var(--cream);
}
.nosotros__copy p{ color: var(--ink-soft); max-width: 33rem; }
.nosotros__copy .section__title{ margin-bottom: 1.75rem; }

.facts{
  list-style: none;
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  padding: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
.facts li{ display: flex; flex-direction: column; gap: .3rem; }
.facts b{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  color: var(--terra);
  line-height: 1;
}
.facts span{
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* ============ 14. COMUNIDAD ============ */
.comunidad{ background: var(--cream-2); }

/* Dos columnas: la tarjeta con foto a la izquierda ocupa todo el alto y
   las dos de texto se apilan a la derecha. Así los bloques cuadran sin
   dejar huecos muertos. */
.cards{
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card{
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -40px rgba(43,33,26,.65);
}
.card--feature{ grid-row: span 2; }
.card--feature .card__media{ aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; }
.card--feature .card__body{ flex: 0 0 auto; }
.card__media{ aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-3); }
.card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease);
}
.card:hover .card__media img{ transform: scale(1.06); }

/* El cuerpo ocupa lo que sobre y el enlace se ancla abajo: así las
   tarjetas de distinta longitud siguen alineadas entre sí. */
.card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.75rem, 3vw, 2.35rem);
}
.card__body .link{ margin-top: auto; padding-top: 1.5rem; align-self: flex-start; }
.card__kicker{
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .9rem;
}
.card h3{
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  margin-bottom: .9rem;
}
.card p{ font-size: .93rem; color: var(--ink-soft); line-height: 1.68; }
.card em{ color: var(--ink); }


/* ============ 15. PRÓXIMAMENTE (AGENDA) ============ */
.proximo{ background: var(--cream); }

.agenda{
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.agenda__item{
  display: grid;
  grid-template-columns: clamp(7rem, 16vw, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line);
}

/* La columna de fecha, en display, como los titulares de un cartel */
.agenda__when{ display: flex; flex-direction: column; gap: .15rem; }
.agenda__mes{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-variation-settings: "SOFT" 10, "WONK" 1, "opsz" 144;
  color: var(--terra);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.agenda__anyo{
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.agenda__body{ max-width: 42rem; }
.agenda__estado{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}
.agenda__estado::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: .5;
}
.agenda__estado--abierto{ color: var(--sage-deep); }
.agenda__estado--abierto::before{ background: var(--sage-deep); opacity: 1; }

.agenda__body h3{
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  margin-bottom: .85rem;
}
.agenda__body p{ color: var(--ink-soft); }
.agenda__cta{ margin-top: 1.75rem; }

/* Lo confirmado pesa más que lo que aún no tiene fecha */
.agenda__item--next .agenda__body h3{ color: var(--ink); }
.agenda__item:not(.agenda__item--next) .agenda__mes{ color: var(--ink-soft); opacity: .75; }


/* ============ 16. ENCARGOS: CATERING Y TARTAS ============ */
.encargos{ background: var(--cream-2); }

.encargos__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
/* Las fotos son verticales: van como una franja a toda altura en el lado
   izquierdo de la tarjeta, sin recortes raros, y el texto a la derecha */
.encargo{
  --pad: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: var(--pad);
  align-content: start;
  background: var(--cream);
  padding: var(--pad);
  transition: background-color .6s var(--ease);
}
.encargo:hover{ background: color-mix(in srgb, var(--cream) 70%, var(--cream-2)); }
.encargo > *{ grid-column: 2; }
.encargo__media{
  grid-column: 1;
  grid-row: 1 / -1;
  margin: calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  min-height: 100%;
  overflow: hidden;
  background: var(--cream-3);
}
.encargo__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease);
}
.encargo:hover .encargo__media img{ transform: scale(1.04); }

.encargo__ico{
  width: 44px; height: 44px;
  color: var(--terra);
  margin-bottom: 1.6rem;
  transition: transform .7s var(--ease), color .5s var(--ease);
}
.encargo:hover .encargo__ico{ transform: translateY(-4px); color: var(--sage-deep); }

.encargo h3{
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  margin-bottom: .9rem;
}
.encargo > p{ color: var(--ink-soft); font-size: .95rem; }

.encargo__lista{
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.encargo__lista li{
  position: relative;
  padding-left: 1.5rem;
  font-size: .92rem;
  color: var(--ink);
}
.encargo__lista li::before{
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 1px;
  background: var(--terra);
}

.encargo__nota{
  margin-top: 1.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* El enlace se ancla abajo para que las dos columnas cierren a la misma altura */
.encargo .link{ margin-top: auto; padding-top: 1.5rem; align-self: flex-start; }


/* ============ 17. TIENDA DEL ALMACÉN ============ */
.tienda{ background: var(--cream); }
.tienda__grid{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.tienda__intro{ position: sticky; top: calc(var(--header-h) + 2.5rem); }
.tienda__intro .section__title{ margin-bottom: 1.75rem; }
.tienda__intro p{ color: var(--ink-soft); max-width: 30rem; }
.tienda__cta{ margin-top: 2.25rem; }

/* Una sola columna: la lista ya vive en media página */
.menu--single{ columns: 1; margin-bottom: 1.75rem; }
/* la tienda va por apartados, como la carta, pero a una columna */
.tienda__grupos .menu__grupo{ font-size: 1.25rem; margin-top: 2.25rem; }
.tienda__grupos .menu__grupo:first-child{ margin-top: 0; }
.tienda__grupos .menu--single{ margin-bottom: 0; }

/* Aviso si el contenido editable no llega a cargar: mejor una frase
   amable con salida que un hueco en blanco */
.contenido-error{
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: .95rem;
}


/* ============ 18. GALERÍA ============ */
.galeria{ padding-bottom: clamp(4rem, 9vw, 7rem); }
.galeria__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.15rem);
  align-items: start;
}
/* Las piezas pares bajan un poco: rompe la rejilla perfecta y da
   ritmo editorial en lugar de "galería de plantilla". */
.galeria__item{
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--cream-3);
  aspect-ratio: 3 / 4;
}
.galeria__item:nth-child(even){
  aspect-ratio: 4 / 5;
  margin-top: clamp(1.75rem, 5vw, 4rem);
}
.galeria__item img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
  filter: saturate(.94);
}
.galeria__item:hover img{ transform: scale(1.05); filter: saturate(1.05); }
.galeria__foot{
  margin-top: 1.75rem;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.galeria__foot a{ color: var(--terra); text-decoration: none; border-bottom: 1px solid currentColor; }


/* ============ 19. VISÍTANOS Y MAPA ============ */
.visitanos{ background: var(--cream); }
.visitanos__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.info-block{ margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.info-block h3{
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.info-block p{ line-height: 1.9; }
.info-cols{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.info-cols b{ font-weight: 400; color: var(--terra); }

.horario{ list-style: none; margin: 0; padding: 0; }
.horario li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .62rem;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.horario li span:first-child{ color: var(--ink-soft); }
.horario li.is-closed span:last-child{ color: var(--terra); }
.horario li.is-today{
  color: var(--ink);
  font-weight: 400;
  padding-inline: .75rem;
  margin-inline: -.75rem;
  background: var(--cream-2);
  border-radius: 3px;
}
.horario li.is-today span:first-child{ color: var(--ink); }
.horario li.is-today span:first-child::before{
  content: "→ ";
  color: var(--terra);
}

.visitanos__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.mapa{
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-3);
}
.mapa iframe{ width: 100%; height: 100%; border: 0; display: block; }
.mapa__ph{ position: relative; width: 100%; height: 100%; }
.mapa__ph img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.8); }
.mapa__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2rem;
  text-align: center;
  background: color-mix(in srgb, var(--forest) 74%, transparent);
  color: var(--cream);
}
.mapa__overlay p{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  margin: 0;
  max-width: 18rem;
}
.mapa__overlay small{ font-size: .68rem; letter-spacing: .1em; opacity: .68; max-width: 20rem; }
.mapa__overlay .btn{ flex-shrink: 0; }   /* que no lo aplaste el flex si el mapa queda bajo */
.mapa__overlay .btn--solid::before{ background: var(--cream); }
.mapa__overlay .btn--solid:hover{ color: var(--terra-deep); }


/* ============ 20. RESERVAR Y FORMULARIO ============ */
.reservar{
  background: var(--forest-2);
  color: var(--cream);
  padding-block: clamp(5rem, 11vw, 9rem);
}
.reservar__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.reservar .eyebrow{ color: var(--sage); }
.reservar__title{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  line-height: 1.1;
  margin-bottom: 1.75rem;
}
.reservar__copy p{ color: rgba(242,236,225,.7); max-width: 32rem; }
.reservar__alt{ margin-top: 2rem; font-size: .9rem; }
.reservar__alt .ulink{ color: var(--sage); background-image: linear-gradient(var(--sage), var(--sage)); }
.reservar__alt .ulink:hover{ color: var(--sage); }

.form{ display: grid; gap: 1.1rem; }
.form__row{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.1rem; }

.field{ display: grid; gap: .5rem; }
.field > span{
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242,236,225,.55);
}
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: .95rem 1.1rem;
  background: rgba(242,236,225,.05);
  border: 1px solid rgba(242,236,225,.2);
  border-radius: 4px;
  color: var(--cream);
  font-size: .95rem;
  font-weight: 300;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.field textarea{ resize: vertical; min-height: 7rem; }
.field input::placeholder,
.field textarea::placeholder{ color: rgba(242,236,225,.5); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--sage);
  background: rgba(242,236,225,.09);
}
.field select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2ECE1' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.05rem;
  padding-right: 2.75rem;
}
.field select option{ background: var(--forest-2); color: var(--cream); }
.field.has-error input,
.field.has-error textarea{ border-color: var(--terra-light); }

.form .btn--solid{ margin-top: .5rem; }
.form__note{
  font-size: .76rem;
  letter-spacing: .05em;
  color: rgba(242,236,225,.68);
  margin: 0;
  text-align: center;
}
.form__note.is-error{ color: var(--terra-light); }


/* ============ 21. FAQ ============ */
.faq{ background: var(--cream); }
.faq__inner{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq__aside{ position: sticky; top: calc(var(--header-h) + 2.5rem); }

.acc{ border-bottom: 1px solid var(--line); }
.acc:first-child{ border-top: 1px solid var(--line); }
.acc summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.32rem);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  letter-spacing: -.01em;
  transition: color .4s var(--ease);
}
.acc summary::-webkit-details-marker{ display: none; }
.acc summary:hover{ color: var(--terra); }
.acc__ico{
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.acc__ico::before,
.acc__ico::after{
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 14px; height: 1.5px;
  background: var(--terra);
  transition: transform .5s var(--ease);
}
.acc__ico::after{ transform: rotate(90deg); }
.acc[open] .acc__ico::after{ transform: rotate(0deg); }
.acc__body{
  padding-bottom: 1.75rem;
  max-width: 40rem;
}
.acc__body p{ color: var(--ink-soft); font-size: .95rem; }
.acc__body b{ color: var(--terra); font-weight: 400; }
.acc[open] .acc__body{ animation: fadeUp .55s var(--ease) both; }


/* ============ 22. FOOTER ============ */
.footer{
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.footer__seal{
  width: 56px;
  color: var(--terra);
  stroke: currentColor;
  margin-bottom: 1.25rem;
}
.footer__name{
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.footer__tag{
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer__nav{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer__nav h3{
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.15rem;
}
.footer__nav ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__nav a{
  text-decoration: none;
  font-size: .89rem;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}
.footer__nav a:hover{ color: var(--terra); }

.footer__mantra{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9.5vw, 7rem);
  font-weight: 300;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
  color: var(--terra);
  opacity: .17;
  margin: 0 0 2rem;
  user-select: none;
}

.footer__legal{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.footer__legal small{ font-size: .75rem; color: var(--ink-soft); }
.footer__legal ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.5rem;
}
.footer__legal a{
  font-size: .75rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .35s var(--ease);
}
.footer__legal a:hover{ color: var(--terra); }


/* ============ 23. RESPONSIVE ============ */

/* ---- Portátil ---- */
@media (max-width: 1100px){
  .values__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--feature{ grid-row: span 1; grid-column: span 2; display: grid; grid-template-columns: .8fr 1.2fr; }
  .card--feature .card__media{ aspect-ratio: auto; height: 100%; }
  .nav__list{ gap: 1.1rem; }
  .nav__list a{ font-size: .72rem; letter-spacing: .1em; }
}

/* ---- Tablet ---- */
@media (max-width: 900px){
  :root{ --header-h: 66px; }

  /* Menú desplegable a pantalla completa */
  .burger{ display: flex; }
  .nav{
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: var(--cream);
    padding: var(--header-h) var(--gutter) 3rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--ease);
    z-index: 150;
  }
  .nav.is-open{ clip-path: inset(0 0 0 0); }
  .nav__list{
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
  }
  .nav__list li{
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .nav__list a{
    display: block;
    padding-block: 1.15rem;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-variation-settings: "SOFT" 20, "WONK" 1;
    letter-spacing: 0;
    text-transform: none;
    transform: translateY(110%);
    transition: transform .7s var(--ease);
  }
  .nav.is-open .nav__list a{ transform: none; }
  .nav.is-open .nav__list li:nth-child(1) a{ transition-delay: .12s; }
  .nav.is-open .nav__list li:nth-child(2) a{ transition-delay: .18s; }
  .nav.is-open .nav__list li:nth-child(3) a{ transition-delay: .24s; }
  .nav.is-open .nav__list li:nth-child(4) a{ transition-delay: .30s; }
  .nav.is-open .nav__list li:nth-child(5) a{ transition-delay: .36s; }
  .nav.is-open .nav__list li:nth-child(6) a{ transition-delay: .42s; }
  .nav__list a::after{ display: none; }
  .nav__cta{
    width: 100%;
    max-width: 26rem;
    margin: 2.5rem auto 0;
    padding: 1.1em 1.4em;
    font-size: .78rem;
    opacity: 0;
    transition: opacity .5s var(--ease) .48s;
  }
  .nav.is-open .nav__cta{ opacity: 1; }
  body.is-locked{ overflow: hidden; }

  /* Hero apilado */
  .hero__grid{ grid-template-columns: 1fr; gap: clamp(3rem, 8vw, 4rem); }
  .hero__copy{ order: 1; }
  .hero__media{ order: 2; max-width: 30rem; margin-inline: auto; width: 100%; }
  .hero__seal{ left: auto; right: -18px; bottom: auto; top: -34px; width: 96px; }
  .hero__note{ position: static; text-align: left; margin-top: 1.5rem; flex-direction: row; gap: 1rem; flex-wrap: wrap; }
  .hero__vertical{ display: none; }

  .section__head{ grid-template-columns: 1fr; align-items: start; gap: 1.75rem; }
  .nosotros__grid,
  .visitanos__grid,
  .reservar__grid,
  .faq__inner,
  .tienda__grid,
  .footer__top{ grid-template-columns: 1fr; }
  .nosotros__media{ order: 2; max-width: 30rem; }
  .faq__aside{ position: static; }
  .tienda__intro{ position: static; }
  .mapa{ position: static; aspect-ratio: 4 / 3; }

  .menu{ columns: 1; }
  /* Las páginas de la carta: tira horizontal con imán, se ve la siguiente asomando */
  .impresa__paginas{
    display: flex;
    gap: 1rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);   /* que el imán respete el margen */
    scrollbar-width: none;
  }
  .impresa__paginas::-webkit-scrollbar{ display: none; }
  .impresa__paginas li{ flex: 0 0 62%; scroll-snap-align: start; }
  /* En el móvil, la hoja del visor se lee a una columna y con letra
     grande: es HTML, no una foto, así que puede reordenarse */
  .visor .hoja__cuerpo{ padding: 9cqw 8cqw 28cqw; }
  .visor .hoja__cols{ columns: 1 !important; }
  .visor .hoja__dos{ grid-template-columns: 1fr; gap: 8cqw; }
  .visor .hoja__titulo{ font-size: 10cqw; }
  .visor .hoja__lema{ font-size: 7cqw; margin-top: 2cqw; }
  .visor .hoja__grupo h5{ font-size: 5.6cqw; padding-bottom: 1.8cqw; margin-bottom: 2.4cqw; }
  .visor .hoja__grupo li{ font-size: 3.9cqw; padding: 1.8cqw 0; column-gap: 2cqw; }
  .visor .hoja__nota{ font-size: 3.6cqw; margin-top: 4cqw; }
  .visor .hoja__cierre{ font-size: 6.4cqw; padding-top: 2cqw; }
  .visor .hoja__firma{ font-size: 5.6cqw; }
  .visor .hoja__deco--taza{ width: 26cqw; }
  .visor .hoja__cuerpo:has(.hoja__deco--taza) .hoja__nota{ margin-left: 0; margin-bottom: 4cqw; }
  .visor .hoja__cuerpo:has(.hoja__deco--huella)::after{ font-size: 7cqw; right: 22cqw; }
  .visor .hoja__deco--huella{ width: 13cqw; }
  .visor .portada__pie{ flex-direction: column; align-items: center; gap: 2cqw; font-size: 2.6cqw; }
  .visor .portada__pie span{ text-align: center !important; max-width: none !important; }
  .impresa__head{ align-items: start; }
  .visor__btn--ant, .visor__btn--sig{ top: auto; bottom: clamp(.75rem, 2vw, 1.5rem); transform: none; }
  .visor__btn--ant:hover, .visor__btn--sig:hover{ transform: scale(1.06); }
  .visor__num{ bottom: calc(clamp(.75rem, 2vw, 1.5rem) + 12px); }
  /* En móvil el clip queda a la derecha del texto, como un móvil pequeño */
  .moment{
    grid-template-columns: minmax(0, 1fr) 124px;
    grid-template-areas: "time media" "body media";
    gap: .6rem 1.25rem;
  }
  .moment__time{ grid-area: time; }
  .moment__body{ grid-area: body; }
  .moment__media{ grid-area: media; align-self: start; border-radius: 10px; }
  .moment__time{ font-size: clamp(1.5rem, 6vw, 2rem); }

  /* La fecha pasa a ir encima del evento, como en un cartel apilado */
  .agenda__item{ grid-template-columns: 1fr; gap: 1rem; }
  .agenda__when{ flex-direction: row; align-items: baseline; gap: .6rem; }
  .agenda__mes{ font-size: clamp(1.4rem, 5.5vw, 1.9rem); }

  .encargos__grid{ grid-template-columns: 1fr; }

  .galeria__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Móvil ---- */
@media (max-width: 620px){
  :root{ --gutter: 1.35rem; }

  body{ line-height: 1.68; }

  .hero{ padding-top: calc(var(--header-h) + 2.25rem); }
  .hero__title{ font-size: clamp(2.9rem, 15vw, 4.2rem); }
  .hero__actions{ flex-direction: column; align-items: stretch; }
  .hero__actions .btn{ width: 100%; }
  .arch{ border-radius: 50vw 50vw 5px 5px / 26vw 26vw 5px 5px; }

  .values__grid{ grid-template-columns: 1fr; }
  .value{ padding: 1.85rem 0; }
  .value:hover{ background: var(--cream); }
  .value__ico{ margin-bottom: 1rem; width: 34px; height: 34px; }

  .tabs__nav{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 1.1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs__nav::-webkit-scrollbar{ display: none; }

  /* Áreas táctiles: los controles llegan a 44 px de alto. Los enlaces
     que van dentro de un párrafo se dejan en línea a propósito: WCAG
     los exime y separarlos rompería la lectura del texto. */
  .tab{ flex-shrink: 0; min-height: 46px; }
  .link{ min-height: 44px; align-items: flex-end; padding-bottom: .85em; }
  .brand{ min-height: 44px; }
  .footer__nav a,
  .footer__legal a{ display: inline-flex; align-items: center; min-height: 44px; }
  .footer__nav ul{ gap: 0; }

  .menu__item{ padding-block: 1rem; }
  .menu__name{ font-size: 1.06rem; }

  .cards{ grid-template-columns: 1fr; }
  .card--feature{ grid-column: span 1; grid-template-columns: 1fr; }
  .card--feature .card__media{ aspect-ratio: 4 / 3; }

  .nowbox{ flex-direction: column; align-items: flex-start; text-align: left; }

  .agenda__cta{ width: 100%; }
  /* en móvil la foto va arriba, apaisada pero alta, y el texto debajo */
  .encargo{
    --pad: clamp(1.35rem, 6vw, 2rem);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .encargo > *{ grid-column: 1; }
  .encargo__media{
    grid-column: 1; grid-row: auto;
    margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 1.5rem;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
  .encargo__media img{ object-position: 50% 40%; }
  .tienda__cta{ width: 100%; }

  .nosotros__media{ padding-bottom: 3rem; }
  .arch--xs{ width: 52%; right: -.5rem; outline-width: 6px; }

  .info-cols{ grid-template-columns: 1fr; }
  .visitanos__actions{ flex-direction: column; }
  .visitanos__actions .btn{ width: 100%; }

  .horario li{ font-size: .87rem; flex-direction: column; gap: .1rem; align-items: flex-start; }
  .horario li span:last-child{ font-size: .82rem; }

  .form__row{ grid-template-columns: 1fr; }

  .galeria__item:nth-child(even){ margin-top: 1.25rem; }

  .footer__nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer__mantra{ font-size: clamp(2rem, 12vw, 3rem); }
  .footer__legal{ flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}


/* ---- Accesibilidad: movimiento reducido ----
   La clase la pone el interruptor de index.html (window.LUCIDO). Con
   movimientoSiempre en true nunca se añade: el cliente quiere las
   animaciones también para quien tiene el ajuste del sistema activado. */
html.menos-movimiento{ scroll-behavior: auto; }
html.menos-movimiento *, html.menos-movimiento *::before, html.menos-movimiento *::after{
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html.menos-movimiento [data-reveal]:not(.line){ opacity: 1 !important; transform: none !important; }
html.menos-movimiento .line__inner{ transform: none !important; }
html.menos-movimiento .marquee__track{ animation: none; }
html.menos-movimiento .hero__seal{ animation: none; }
html.menos-movimiento .moment::before{ width: 100%; }

/* ---- Impresión ---- */
@media print{
  .site-header, .marquee, .mapa, .form, .btn, .hero__seal, body::after{ display: none !important; }
  body{ background: #fff; color: #000; }
  .manifiesto, .reservar{ background: #fff; color: #000; }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
}