/* =====================================================================
   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. El horno (catálogo de pastelería)
   25. Reseñas
   26. Responsive de las reseñas
   27. Catálogo (la tienda como tienda)
   28. Responsive del catálogo
   24. 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" 0, "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" 0; }

.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" 0, "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;

  /* El menú abierto es hermano suyo y lleva z-index 150, así que en
     algunos navegadores se pintaba por encima del botón y el toque
     para cerrar no llegaba: se quedabas dentro del menú sin salida.
     Con position y un z-index más alto, la equis siempre está arriba. */
  position: relative;
  z-index: 210;
}
.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" 0, "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" 0;
  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" 0;
  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" 0;
  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; }


/* ============ 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" 0, "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" 0;
  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" 0, "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" 0;
  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" 0, "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); }
/* La presentación arriba y el catálogo a todo el ancho.

   Antes iban en dos columnas, con el catálogo metido en la mitad
   derecha: entraban dos productos por fila y sobraba media página en
   blanco debajo del texto. Una tienda necesita el ancho entero. */
.tienda__grid{ display: block; }
.tienda__intro{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.tienda__intro .section__title{ margin-bottom: 0; }
.tienda__texto p{ color: var(--ink-soft); margin: 0 0 .9rem; }
.tienda__texto p:last-child{ margin-bottom: 0; }

/* 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" 0;
  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" 0, "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" 0;
  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" 0;
  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" 0, "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. EL HORNO (catálogo de pastelería) ============
   Tres bloques (tartas, bandejas dulces, bandejas saladas) que se
   dibujan desde contenido/pasteleria.json.

   El aviso de alérgenos del final se deja con contraste alto y sin
   adornos a propósito: es información de seguridad, no letra pequeña,
   y tiene que leerse aunque alguien pase de largo. */
.horno{ background: var(--cream-2); }

/* Las tres columnas de texto que había aquí se han ido: el obrador
   usa ahora el mismo catálogo de fichas que el almacén (sección 27).
   Lo que queda es el texto de la casa y el aviso de alérgenos. */


/* el texto de la casa */
.horno__lema-caja{
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius);
}
.horno__lema{
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  max-width: 28ch;
}
.horno__lema-caja p{
  margin: 0 0 .9rem;
  color: rgba(242,236,225,.78);
  max-width: 64ch;
}
.horno__lema-caja p:last-child{ margin-bottom: 0; }

/* llamada a la acción */
.horno__pie{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.horno__pie-nota{
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
}

/* aviso de alérgenos: legible, no decorativo */
.horno__aviso{
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--terra);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.65;
  max-width: 78ch;
}



/* ============ 25. RESEÑAS ============
   La nota grande manda: es lo único que se lee de lejos. Las tres
   opiniones están para dar textura, no para leerse enteras. */
.resenas{ background: var(--cream-2); }

.resenas__cabecera{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.resenas__nota{ text-align: center; flex: none; }
.resenas__cifra{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 8vw, 5.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--terra);
}
.resenas__estrellas{
  display: flex;
  justify-content: center;
  gap: .18rem;
  margin: .5rem 0 .4rem;
}
.estrella{
  width: 1.05rem; height: 1.05rem;
  fill: var(--cream-3);
}
.estrella.is-llena{ fill: var(--terra); }
.estrella.is-media{ fill: var(--terra-light); }

.resenas__cuantas{
  margin: 0;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.resenas__intro .section__intro{ margin-top: .9rem; max-width: 46ch; }

.resenas__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.resena{
  margin: 0;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.resena blockquote{ margin: 0; flex: 1; }
.resena blockquote p{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height: 1.5;
}
/* comillas de apertura, como marca de cita */
.resena blockquote p::before{
  content: "\201C";
  color: var(--terra-light);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -.25em;
  margin-right: .1em;
}
.resena figcaption{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .7rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-soft);
}
.resena figcaption b{ color: var(--ink); font-weight: 500; }

.resenas__pie{ margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }


/* ============ 26. RESPONSIVE DE LAS RESEÑAS ============ */
@media (max-width: 760px){
  .resenas__cabecera{
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 1.5rem;
    text-align: left;
  }
  /* La nota, las estrellas y el recuento en una fila. El recuento se
     va a la línea de abajo él solo: al lado de las estrellas se
     partía en dos y quedaba descolgado. */
  .resenas__nota{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .8rem;
    text-align: left;
  }
  .resenas__cifra{ font-size: 2.9rem; }
  .resenas__estrellas{ margin: 0; }
  .resenas__cuantas{ flex-basis: 100%; white-space: normal; }
}



/* ============ 27. CATÁLOGO (tienda como tienda) ============
   La clienta lo dijo claro: la tienda se leía como un texto y no como
   un sitio donde comprar, y el botón de pedir se perdía al final.

   Lo que lo arregla no son las fotos, es esto: cada producto en su
   ficha, el precio grande, y un botón de pedir en cada uno que abre
   el WhatsApp con ese producto ya escrito. */

/* --- filtros por apartado --- */
.catalogo__filtros{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55em 1.05em;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: none;
  color: var(--ink);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.chip i{
  font-style: normal;
  font-size: .9em;
  opacity: .5;
}
.chip:hover{ border-color: var(--ink); }
.chip.is-activo{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.chip.is-activo i{ opacity: .65; }

/* --- rejilla --- */
.catalogo{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.producto{
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.producto:hover{
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px -22px rgba(43,33,26,.45);
}
.producto[hidden]{ display: none; }

.producto__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
  overflow: hidden;
}
.producto__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease);
}
.producto:hover .producto__media img{ transform: scale(1.04); }

/* El azulejo de cuando todavía no hay foto. Con las rayas del sello,
   para que parezca una decisión y no una imagen que no ha cargado. */
.producto__sinfoto{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background:
    repeating-linear-gradient(-18deg,
      var(--cream-3) 0 7px,
      var(--cream-2) 7px 19px);
}

.producto__cuerpo{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(.9rem, 2vw, 1.2rem);
}
.producto__grupo{
  margin: 0 0 .35rem;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terra);
}
.producto__nombre{
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
}
.producto__desc{
  margin: 0 0 1rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-soft);

  /* Tres líneas y a otra cosa: el texto largo es justo lo que hacía
     que esto pareciera una lectura en vez de una tienda. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.producto__pie{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.producto__precio{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.01em;
}
.producto__precio--consultar{
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.producto__pedir{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  padding: .55em 1em;
  border-radius: 100px;
  background: var(--terra);
  color: var(--cream);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.producto__pedir svg{ width: 13px; height: 13px; }
.producto__pedir:hover{ background: var(--terra-deep); transform: translateX(2px); }

.catalogo__nota{
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink-soft);
}

.tienda__como{ color: var(--ink); }
.tienda__como b{ font-weight: 500; }


/* ============ 28. RESPONSIVE DEL CATÁLOGO ============ */
@media (max-width: 620px){
  .catalogo{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .producto__cuerpo{ padding: .8rem; }
  .producto__nombre{ font-size: .9rem; }
  .producto__desc{ -webkit-line-clamp: 2; font-size: .8rem; }
  .producto__precio{ font-size: 1.05rem; }

  /* En dos columnas el precio y el botón no caben en la misma línea */
  .producto__pie{ flex-direction: column; align-items: stretch; gap: .5rem; }
  .producto__pedir{ justify-content: center; padding: .7em 1em; }

  /* Los apartados pasan a tira arrastrable, como las de la carta */
  .catalogo__filtros{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: .25rem;
  }
  .catalogo__filtros::-webkit-scrollbar{ display: none; }
  .chip{ flex-shrink: 0; min-height: 44px; }
}

/* ============ 24. 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 0 auto;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    padding: var(--header-h) var(--gutter) max(3rem, env(safe-area-inset-bottom) + 1.5rem);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--ease);
    z-index: 150;

    /* Ojo con esto, que es la parte que no se ve en un emulador.

       En un móvil de verdad, un position: fixed con inset: 0 no se mide
       contra lo que ves, sino contra la pantalla entera, como si la
       barra del navegador estuviera escondida. Resultado: el final del
       menú se queda por debajo de la barra y parece cortado.

       dvh es la altura que de verdad se ve en cada momento. El vh de
       arriba queda de repuesto para navegadores viejos. */
    height: 100vh;
    height: 100dvh;

    /* Antes esto era justify-content: center sin overflow. En un móvil
       pequeño, o con la barra del navegador a la vista, los seis
       enlaces y el botón no caben: se salían por arriba y por abajo y
       no había forma de llegar a ellos, porque el centrado con flex
       recorta por los dos lados y no deja hacer scroll.

       Con flex-start y márgenes automáticos se centra igual cuando
       sobra sitio, pero cuando no cabe se puede desplazar y no se
       pierde nada. */
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .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;
    margin-top: auto;      /* con estos dos, el bloque queda centrado  */
    flex-shrink: 0;        /* si cabe, y arriba del todo si no cabe    */
  }
  .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" 0;
    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 auto;   /* el auto de abajo cierra el centrado */
    padding: 1.1em 1.4em;
    font-size: .78rem;
    flex-shrink: 0;
    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,

  .footer__top{ grid-template-columns: 1fr; }
  .nosotros__media{ order: 2; max-width: 30rem; }
  .faq__aside{ position: static; }
  .tienda__intro{ grid-template-columns: 1fr; align-items: start; }
  .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)); }
}

/* ---- Pantallas bajas ----
   Móviles pequeños, o cualquier móvil con la barra del navegador a la
   vista. El menú se apreta para que quepa entero sin desplazarlo: se
   puede desplazar igualmente, pero es mejor no tener que hacerlo. */
@media (max-width: 900px) and (max-height: 720px){
  .nav__list a{ font-size: 1.35rem; padding-block: .78rem; }
  .nav__cta{ margin-top: 1.5rem; padding: .95em 1.4em; }
}

/* ---- 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; }

  /* Las categorías pasan a ser una tira que se arrastra con el dedo.
     Tres cosas que antes la hacían parecer rota:

     1. Se cortaba en el margen del texto, así que parecía que la lista
        se acababa ahí. Ahora sale hasta el borde de la pantalla.
     2. No se veía que hubiera más categorías. El degradado de los
        lados lo dice sin tener que escribirlo.
     3. Al tocar una pestaña del borde se quedaba medio tapada. Ahora
        se centra sola (lo hace activarTabs). */
  .tabs__nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 1.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;

    --desvanece: 2.5rem;
    --mascara: linear-gradient(90deg, #000 0, #000 calc(100% - var(--desvanece)), transparent 100%);
    -webkit-mask-image: var(--mascara);
            mask-image: var(--mascara);
  }
  /* El atributo lo pone main.js según por dónde vaya la tira */
  .tabs__nav[data-borde="medio"]{
    --mascara: linear-gradient(90deg, transparent 0, #000 var(--desvanece), #000 calc(100% - var(--desvanece)), transparent 100%);
  }
  .tabs__nav[data-borde="final"]{
    --mascara: linear-gradient(90deg, transparent 0, #000 var(--desvanece), #000 100%);
  }
  .tabs__nav[data-borde="entera"]{ --mascara: none; }
  .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; scroll-snap-align: center; }
  .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%; }

  .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; }
}

/* El botón de las dos tarjetas de encargos. Antes era un enlace de
   texto que se perdía al final de la tarjeta; la clienta decía que no
   se entendía que ahí se pedía algo. */
.encargo__btn{ margin-top: 1.1rem; align-self: start; }

/* El botón para abrir una descripción cortada. Solo lo pone main.js
   cuando el texto se corta de verdad: si cabe entero, no aparece. */
.producto__mas{
  align-self: flex-start;
  width: 1.65rem;
  height: 1.65rem;
  margin: -.5rem 0 1rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.producto__mas:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.producto.is-abierta .producto__desc{
  -webkit-line-clamp: unset;
  overflow: visible;
}

@media (max-width: 620px){
  /* El círculo se queda pequeño a la vista, pero el área que
     responde al dedo llega a los 44 px que respeta el resto de la
     web. 26 + 9 por cada lado = 44. */
  .producto__mas{ position: relative; }
  .producto__mas::after{ content: ""; position: absolute; inset: -9px; }
}

/* La vuelta de los packs: la misma ficha enseña lo que hay dentro y
   la caja cerrada. Quien compra un regalo quiere saber las dos cosas,
   y así no hace falta una sección aparte. */
.producto__vuelta{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.producto__media.is-vuelta .producto__vuelta{ opacity: 1; }

.producto__girar{
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  z-index: 1;
  padding: .4em .85em;
  border: 0;
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--cream);
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .35s var(--ease);
}
.producto__girar:hover{ background: var(--ink); }

@media (max-width: 620px){
  .producto__girar{ left: .45rem; bottom: .45rem; font-size: .62rem; padding: .45em .7em; }
}

/* ============ 29. LUPA DE PRODUCTO ============
   Las fichas recortan a 4:3 y hay fotos verticales —el cuaderno, la
   lámina botánica— de las que solo se veía la franja del centro.
   Tocando la foto se abre entera encima de la página. */
.producto__media{ cursor: zoom-in; }

/* Ojo: .lupa lleva display:grid, que por especificidad gana al
   [hidden] del navegador. Sin esta regla la capa se queda siempre
   puesta, invisible y por encima de todo, y se come los clics de la
   página entera. */
.lupa[hidden]{ display: none; }

.lupa{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lupa.is-abierta{ opacity: 1; }

.lupa__fondo{
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.lupa__figura{
  position: relative;
  margin: 0;
  max-width: min(100%, 62rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  transform: scale(.97);
  transition: transform .4s var(--ease);
}
.lupa.is-abierta .lupa__figura{ transform: none; }

.lupa__figura img{
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.lupa__figura figcaption{
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: center;
  max-width: 34ch;
}

.lupa__cerrar{
  position: absolute;
  top: clamp(.75rem, 2.5vw, 1.5rem);
  right: clamp(.75rem, 2.5vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea-clara, rgba(242,236,225,.3));
  border-radius: 50%;
  background: none;
  color: var(--cream);
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.lupa__cerrar svg{ width: 20px; height: 20px; }
.lupa__cerrar:hover{ background: rgba(242,236,225,.15); }

html.menos-movimiento .lupa,
html.menos-movimiento .lupa__figura{ transition: none; }