/* =========================================================================
   Centro Fuji Imagen 7 — sistema de diseño
   -------------------------------------------------------------------------
   Sin Bootstrap. El aspecto de plantilla de la web anterior venía en buena
   parte de usar los componentes por defecto del framework, empezando por
   su verde #28a745.
   ========================================================================= */

:root {
  /* --- Color -----------------------------------------------------------
     El verde es el de siempre, dos pasos más oscuro para que el texto
     blanco encima cumpla contraste. El rojo es el del logotipo, que hoy
     no aparecía en ninguna parte de la web. */
  --verde:          #0E6B42;
  --verde-hover:    #0A5334;
  --verde-suave:    #E4F0E8;
  --verde-borde:    #C3DCCE;
  --rojo:           #D62828;   /* solo acentos: campaña, ofertas, alertas */
  --rojo-suave:     #FBE9E7;

  --papel:          #F7F6F2;   /* neutro cálido, no gris de sistema */
  --papel-hondo:    #EDEBE4;
  --blanco:         #FFFFFF;
  --tinta:          #141A16;
  --tinta-media:    #4A574F;
  --tinta-suave:    #7A867E;
  --linea:          #DFDCD3;

  /* --- Tipografía ------------------------------------------------------
     Una sola familia para todo, como en la referencia que pasaste: los
     titulares pesan 800 y van muy apretados, el texto va normal. El
     contraste lo da el peso y el tamaño, no dos tipos distintos. */
  --f-titulo: "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto:  "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs:   0.78rem;
  --t-sm:   0.88rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.35rem;
  --t-xl:   clamp(1.6rem, 3vw, 2.1rem);
  --t-2xl:  clamp(2.1rem, 5vw, 3.2rem);
  --t-3xl:  clamp(2.8rem, 8vw, 5rem);

  /* --- Espacio --------------------------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-8: 3rem;     --e-10: 4rem;
  --e-12: 6rem;    --e-16: 8rem;

  --ancho: 1200px;
  --ancho-texto: 68ch;

  --radio:    14px;
  --radio-sm: 8px;

  --sombra-baja:  0 1px 2px rgba(20, 26, 22, 0.04), 0 2px 8px rgba(20, 26, 22, 0.04);
  --sombra-alta:  0 2px 6px rgba(20, 26, 22, 0.06), 0 18px 40px rgba(20, 26, 22, 0.10);

  /* --- Movimiento ------------------------------------------------------
     Tres curvas, cada una para lo suyo:
       --ease-out     entradas, salidas y respuestas a lo que hace el
                      visitante. Arranca rápido: el movimiento se ve en
                      el mismo instante del clic, que es cuando se mira.
       --ease-in-out  cosas que ya están en pantalla y se desplazan.
       --ease-drawer  paneles que entran desde el borde, como los cajones
                      de iOS.
     `--curva` es la de siempre y la usa media web: ahora apunta a la
     salida fuerte. La anterior (0.22, 0.61, 0.36, 1) era suave de más y
     las transiciones se sentían un punto perezosas al empezar. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --curva: var(--ease-out);
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Safari en iPhone agranda el texto solo al girar el teléfono si no se
     le dice que no. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sin esto, tirar del final de la página arrastra el fondo del
     navegador y se ve la costura. */
  overscroll-behavior-y: none;
  /* El menú móvil cerrado vive fuera de la pantalla, a la derecha. Como
     es `fixed`, se escapa del recorte del <body> y ensancha la página:
     aparecía barra horizontal y todo se veía desplazado. `clip` lo corta
     sin convertir el <html> en contenedor de scroll, que es lo que
     rompería la cabecera pegajosa. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Aquí NO va `overflow-x: hidden`. Ponerlo convierte al <body> en
     contenedor de scroll y eso rompe `position: sticky` de la cabecera:
     en el móvil la barra se quedaba clavada arriba en vez de acompañar.
     El recorte horizontal ya lo hace `overflow-x: clip` en el <html>,
     que no crea contenedor de scroll. */
  /* El destello gris al tocar un enlace delata que es una web. */
  -webkit-tap-highlight-color: transparent;
}

/* iOS hace zoom solo al enfocar cualquier campo por debajo de 16 px.
   Es la causa número uno de que un formulario «se descoloque» en iPhone. */
input, select, textarea { font-size: 16px; }
@media (min-width: 900px) { input, select, textarea { font-size: var(--t-base); } }

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

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 800;
  line-height: 0.98;
  /* Muy apretado: es lo que le da el aire de rótulo grande. */
  letter-spacing: -0.035em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--e-4); max-width: var(--ancho-texto); }

a { color: var(--verde); text-underline-offset: 3px; }
a:hover { color: var(--verde-hover); }

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

.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--verde); color: #fff; padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--radio-sm) 0;
}
.saltar-al-contenido:focus { left: 0; }

/* --- Utilidades de composición ------------------------------------------ */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  /* max() respeta el notch y la curva de la pantalla en el iPhone
     apaisado, sin estrechar el contenido en el resto de dispositivos. */
  padding-left: max(var(--e-5), env(safe-area-inset-left));
  padding-right: max(var(--e-5), env(safe-area-inset-right));
}

.seccion { padding-block: var(--e-12); }
.seccion--ajustada { padding-block: var(--e-10); }
.seccion--papel { background: var(--papel-hondo); }

.seccion__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-8);
  max-width: 44ch;
}
.seccion__cabecera--centrada { margin-inline: auto; text-align: center; }

.antetitulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.seccion__cabecera h2 { margin: 0; }
.seccion__cabecera p { color: var(--tinta-media); margin: 0; font-size: var(--t-md); }

/* --- Botones ------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--curva), color .25s var(--curva),
              transform .2s var(--curva), box-shadow .25s var(--curva);
}
.boton:active { transform: translateY(1px); }

.boton--principal { background: var(--verde); color: #fff; }
.boton--principal:hover { background: var(--verde-hover); color: #fff; box-shadow: var(--sombra-alta); }

.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--secundario:hover { border-color: var(--verde); color: var(--verde); }

.boton--claro { background: rgba(255,255,255,.92); color: var(--tinta); }
.boton--claro:hover { background: #fff; }

.boton--grande { padding: 1em 2em; font-size: var(--t-base); }

/* --- Vidrio -------------------------------------------------------------
   Solo en tres sitios: la barra sobre la portada, las tarjetas que se
   superponen a fotografías y los paneles del editor. Sobre fondo plano
   el efecto se ve sucio; sobre una foto, se ve caro.                      */

.vidrio {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--sombra-alta);
}
.vidrio--oscuro {
  background: rgba(20, 26, 22, 0.42);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Si el navegador no sabe desenfocar, opacamos: nunca texto ilegible. */
@supports not (backdrop-filter: blur(1px)) {
  .vidrio { background: rgba(255,255,255,.95); }
  .vidrio--oscuro { background: rgba(20,26,22,.88); }
}

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* El vidrio va en una capa aparte, no en la propia cabecera.
   Motivo: un elemento con `backdrop-filter` se convierte en el marco de
   referencia de sus descendientes `position: fixed`. Con el filtro puesto
   en la cabecera, el panel del menú móvil dejaba de medir la pantalla y
   se encogía a la altura de la barra — salía una caja blanca vacía de
   120 px. Con el filtro en un pseudoelemento, la cabecera vuelve a ser
   una caja normal y el menú ocupa la pantalla entera. */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, var(--sombra-alta);
  transition: opacity .3s var(--curva);
  pointer-events: none;
}
.cabecera[data-fondo="true"]::before { opacity: 1; }

@supports not (backdrop-filter: blur(1px)) {
  .cabecera::before { background: rgba(255, 255, 255, .96); }
  .menu { background: rgba(255, 255, 255, .98) !important; }
}
.cabecera__barra {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  padding-block: var(--e-3);
}
/* --- Logotipo de la cabecera ---------------------------------------------
   Chapa · raya fina · bloque de marca (firma arriba; debajo la línea roja,
   el nombre y FUJIFILM). Todo el bloque se escala con una sola medida,
   --alto-firma: el nombre y FUJIFILM son proporciones de ella, así que al
   encoger la cabecera las piezas no se descuadran entre sí. */
@property --alto-firma {
  syntax: "<length>";
  inherits: true;
  initial-value: 32px;
}
.cabecera__logo {
  --alto-firma: 32px;
  flex: 0 0 auto;
  display: flex; align-items: center;
  gap: calc(var(--alto-firma) * .34);
  color: var(--tinta);
  text-decoration: none;
  transition: --alto-firma .3s var(--ease-out);
}
/* El sello mide lo mismo que el bloque de letras (firma + línea + nombre),
   así sello y letras forman un solo rectángulo. */
.cabecera__chapa {
  height: calc(var(--alto-firma) * 1.5); width: auto;
  aspect-ratio: 1;
}
.cabecera__marca {
  display: flex; flex-direction: column;
  gap: calc(var(--alto-firma) * .16);
}
.cabecera__firma {
  height: var(--alto-firma); width: auto;
  align-self: flex-start;      /* sin esto la columna la estira a lo ancho */
}
.cabecera__pie {
  display: flex; align-items: center;
  gap: calc(var(--alto-firma) * .28);
  padding-top: calc(var(--alto-firma) * .17);
  border-top: 1.5px solid var(--rojo);
  line-height: 1;
}
.cabecera__nombre {
  font-size: max(9.5px, calc(var(--alto-firma) * .33));
  font-weight: 800;             /* negrita de verdad: el nombre pesa */
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cabecera__punto {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .4;
}
.cabecera__fuji {
  height: max(8px, calc(var(--alto-firma) * .27)); width: auto;
}

/* De cada pieza con dos versiones solo se ve una: la de tinta sobre
   fondo claro, la blanca sobre la portada. */
.cabecera__blanco { display: none; }
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .cabecera__logo { color: #fff; }
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .cabecera__tinta { display: none; }
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .cabecera__blanco { display: block; }
/* Sombra suave para despegar lo blanco de las zonas claras del vídeo. */
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .cabecera__marca,
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .cabecera__chapa {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
}

@media (min-width: 1201px) {
  .cabecera__logo { --alto-firma: 36px; }
}
/* Al bajar, la cabecera se compacta y el logotipo encoge con ella. */
.cabecera[data-fondo="true"] .cabecera__logo { --alto-firma: 29px; }

/* En pantallas estrechas se quita la chapa (y su raya), no la marca: el
   bloque ya lleva el nombre entero. */
@media (max-width: 520px) {
  .cabecera__chapa { display: none !important; }
  .cabecera__logo,
  .cabecera[data-fondo="true"] .cabecera__logo { --alto-firma: 28px; }
  /* El nombre tiene un tamaño mínimo para que se lea; a cambio se aprieta
     un poco y se quita el punto, para que no sea más ancho que la firma. */
  .cabecera__nombre { letter-spacing: .1em; }
  .cabecera__punto { display: none; }
}
@media (max-width: 380px) {
  .cabecera__logo,
  .cabecera[data-fondo="true"] .cabecera__logo { --alto-firma: 25px; }
  .cabecera__nombre { letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera__logo { transition: none; }
}

/* --- Menú de usuario ------------------------------------------------------ */

.usuario { position: relative; }
.usuario__inicial {
  display: inline-flex; align-items: center; justify-content: center;
  /* Ocupa el botón entero, sin el anillo blanco que se veía antes. */
  position: absolute; inset: -1px;
  border-radius: 50%;
  background: var(--verde); color: #fff;
  font-weight: 700; font-size: var(--t-base);
}
.usuario .icono-boton { position: relative; overflow: hidden; padding: 0; }
.usuario__menu {
  position: absolute;
  top: calc(100% + var(--e-2));
  right: 0;
  min-width: 250px;
  /* Nunca más ancho que la pantalla, pase lo que pase con el idioma o
     con la longitud del correo. */
  max-width: calc(100vw - var(--e-6));
  padding: var(--e-2);
  border-radius: var(--radio);
  background: #fff;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s var(--curva), transform .2s var(--curva);
  z-index: 10;
}
.usuario[data-abierto="true"] .usuario__menu {
  opacity: 1; transform: none; pointer-events: auto;
}
.usuario__ficha {
  padding: var(--e-3);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e-2);
  display: flex; flex-direction: column; gap: 2px;
}
.usuario__ficha strong { font-size: var(--t-sm); }
.usuario__ficha span {
  font-size: var(--t-xs); color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis;
}
.usuario__menu a {
  padding: var(--e-3);
  border-radius: var(--radio-sm);
  color: var(--tinta); font-size: var(--t-sm); text-decoration: none;
}
.usuario__menu a:hover { background: var(--verde-suave); color: var(--verde); }
/* «Cerrar sesión» es ahora un botón dentro de un formulario (va por POST).
   Se le quita todo lo de botón para que siga pareciendo un enlace más. */
.usuario__salir-form { display: contents; }
button.usuario__salir {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--linea);
  font: inherit; font-size: var(--t-sm);
  padding: var(--e-3); border-radius: var(--radio-sm);
}
.enlace-form { display: inline; }
.enlace-form button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}
.usuario__salir {
  border-top: 1px solid var(--linea);
  margin-top: var(--e-2); padding-top: var(--e-3) !important;
  color: var(--rojo) !important;
}
.usuario__salir:hover { background: var(--rojo-suave) !important; color: var(--rojo) !important; }

.menu {
  display: flex; align-items: center; gap: 2px;
  margin-inline: auto; flex-wrap: nowrap;
}
.menu__enlace {
  position: relative;
  padding: var(--e-2) 0.6rem;
  border-radius: var(--radio-sm);
  color: var(--tinta);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--curva), background .2s var(--curva);
}
.menu__enlace:hover { color: var(--verde); background: var(--verde-suave); }
.menu__enlace[aria-current="page"] { color: var(--verde); font-weight: 600; }
.menu__enlace--destacado {
  background: var(--verde); color: #fff;
  padding-inline: var(--e-4);
  border-radius: 100px;
}
.menu__enlace--destacado:hover { background: var(--verde-hover); color: #fff; }

/* Desplegable */
.menu__grupo { position: relative; }
.menu__boton {
  display: inline-flex; align-items: center; gap: var(--e-1);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 500;
  color: var(--tinta); padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-sm);
  /* «Foto Regalo» se partía en dos líneas cuando el menú se apretaba y
     quedaba una palabra encima de otra. Nunca se parte. */
  white-space: nowrap;
}
.menu__boton:hover { color: var(--verde); background: var(--verde-suave); }
.menu__boton svg { transition: transform .25s var(--curva); }
.menu__boton[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + var(--e-2));
  left: 0;
  /* Sin este puente invisible, al bajar el ratón del botón al desplegable
     se cruza el hueco de 8 px, el grupo recibe `mouseleave` y el menú se
     cierra en la cara del usuario. */
  min-width: 250px;
  padding: var(--e-2);
  border-radius: var(--radio);
  background: #fff;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s var(--curva), transform .2s var(--curva);
}
.submenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--e-2) - 2px);
  height: calc(var(--e-2) + 2px);
}
.menu__grupo[data-abierto="true"] .submenu {
  opacity: 1; transform: none; pointer-events: auto;
}
.submenu a {
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-sm);
  color: var(--tinta);
  font-size: var(--t-sm);
  text-decoration: none;
}
.submenu a:hover { background: var(--verde-suave); color: var(--verde); }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e-2); }
.icono-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;   /* mínimo táctil que marca Apple */
  border: 1px solid var(--linea); border-radius: 50%;
  background: rgba(255,255,255,.7); color: var(--tinta);
  cursor: pointer; text-decoration: none;
  transition: background .2s var(--curva), color .2s var(--curva), border-color .2s;
}
.icono-boton:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.icono-boton--wasap:hover { background: #25D366; border-color: #25D366; }

.menu-movil-boton { display: none; }

/* Sobre la portada, la cabecera va sin fondo y la foto que hay debajo es
   oscura: el texto tiene que pasar a blanco o desaparece. En cuanto se
   hace scroll entra el vidrio y todo vuelve a su color.
   Solo en escritorio: en móvil el menú es un panel blanco aparte. */
@media (min-width: 1201px) {
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .menu__enlace,
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .menu__boton {
    color: #fff;
  }
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .menu__enlace:hover,
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .menu__boton:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
  }
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .menu__enlace--destacado {
    background: var(--verde);
  }
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .submenu a { color: var(--tinta); }
}

.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .icono-boton {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .icono-boton:hover {
  background: var(--verde); border-color: var(--verde);
}



/* --- Portada ------------------------------------------------------------ */

.portada {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  margin-top: calc(-1 * var(--e-16));
  padding-top: var(--e-16);
  overflow: hidden;
  background: var(--tinta);
}
.portada__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- Fondo difuminado ------------------------------------------------------
   Cuando detrás del titular va un vídeo, se difumina. Tres razones:

   1. El texto se lee. Sobre imagen nítida en movimiento, un titular
      blanco baila y cuesta leerlo; sobre un fondo borroso, no.
   2. El vídeo pasa a ser ambiente, no protagonista. Nadie intenta
      seguir lo que pasa y se queda con el mensaje.
   3. Disimula la calidad. Un vídeo de 720p estirado a pantalla completa
      se ve blando; difuminado a propósito, se ve intencionado.

   El `scale(1.08)` no es decorativo: `blur()` deja los bordes lavados y
   transparentes, y ampliando un poco esos bordes quedan fuera del marco. */

.portada[data-fondo-borroso="true"] .portada__media {
  filter: blur(var(--desenfoque, 14px)) saturate(1.1);
  transform: scale(1.08);
}

/* Con el fondo borroso el velo puede aclararse: ya no compite con un
   fondo nítido, y así el vídeo se sigue intuyendo. */
.portada[data-fondo-borroso="true"] .portada__velo {
  background: linear-gradient(
    to top,
    rgba(12, 16, 13, .74) 0%,
    rgba(12, 16, 13, .38) 45%,
    rgba(12, 16, 13, .22) 100%);
}

/* En móvil se difumina menos: la pantalla es pequeña y pasarse deja el
   fondo en una mancha de color sin forma. */
@media (max-width: 720px) {
  .portada[data-fondo-borroso="true"] .portada__media { --desenfoque: 9px; }
}

/* Difuminar en cada fotograma cuesta batería. Si el visitante ha pedido
   menos movimiento ya no hay vídeo en marcha, así que tampoco hace falta
   gastar en desenfocar: basta con el velo. */
@media (prefers-reduced-motion: reduce) {
  .portada[data-fondo-borroso="true"] .portada__media {
    filter: blur(10px); transform: scale(1.06);
  }
}
.portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 16, 13, .82) 0%,
    rgba(12, 16, 13, .45) 42%,
    rgba(12, 16, 13, .20) 100%);
}
.portada__contenido {
  position: relative;
  padding-block: var(--e-10) var(--e-12);
  color: #fff;
  max-width: 44ch;
}
.portada__contenido h1 { color: #fff; margin-bottom: var(--e-4); }
.portada__contenido p {
  color: rgba(255,255,255,.88);
  font-size: var(--t-md);
  margin-bottom: var(--e-6);
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.portada .antetitulo { color: #9BE3B9; }

/* --- Tarjetas ----------------------------------------------------------- */

.rejilla { display: grid; gap: var(--e-5); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
/* Con `auto-fit` la última fila estiraba las piezas sobrantes y la
   sección quedaba descuadrada. Un número fijo de columnas por tamaño de
   pantalla mantiene todas las ventanas iguales. */
.rejilla--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .rejilla--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rejilla--5 { grid-template-columns: repeat(6, 1fr); } }

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel-hondo); }
.tarjeta__media img, .tarjeta__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--curva);
}
.tarjeta:hover .tarjeta__media img { transform: scale(1.04); }
.tarjeta__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.tarjeta__cuerpo h3 { margin: 0; font-size: var(--t-lg); }
.tarjeta__cuerpo p { margin: 0; color: var(--tinta-media); font-size: var(--t-sm); }
.tarjeta__pie { margin-top: auto; padding-top: var(--e-3); font-weight: 600; font-size: var(--t-sm); color: var(--verde); }

/* Servicio principal: pesa el doble que el secundario */
.servicios { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .servicios { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
}
.servicio {
  position: relative;
  min-height: 420px;
  border-radius: var(--radio);
  overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--tinta);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.servicio:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(12,16,13,.22); }

.servicio img, .servicio video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--curva);
}
.servicio:hover img, .servicio:hover video { transform: scale(1.04); }

/* El degradado que sostiene el texto. Sustituye al panel de cristal: es
   la misma solución que ya usan las ventanas de Foto Regalo, así que las
   dos secciones se leen como de la misma web. */
.servicio::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6, 18, 12, .92) 0%,
    rgba(6, 18, 12, .74) 32%,
    rgba(6, 18, 12, .22) 64%,
    rgba(6, 18, 12, .06) 100%);
}

.servicio__panel {
  position: relative; z-index: 1;
  padding: var(--e-6) var(--e-5) var(--e-5);
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--e-2);
}
.servicio__cinta {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.servicio__panel h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  /* Una sombra muy suave: sobre la parte clara de una foto, el blanco
     sobre blanco desaparece por mucho degradado que haya debajo. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.servicio__panel p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.servicio__panel .boton { margin-top: var(--e-3); }

@media (prefers-reduced-motion: reduce) {
  .servicio, .servicio img, .servicio video { transition: none; }
  .servicio:hover { transform: none; }
  .servicio:hover img, .servicio:hover video { transform: none; }
}

/* Categorías de Foto Regalo: ventanas, no tarjetas de catálogo */
.ventana {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radio); aspect-ratio: 4 / 5;
  text-decoration: none; color: #fff;
  background: var(--papel-hondo);
}
.ventana img, .ventana video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.ventana:hover img, .ventana:hover video { transform: scale(1.05); }
.ventana::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,16,13,.85), rgba(12,16,13,.08) 60%);
}
.ventana__texto { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--e-4); }
.ventana__texto h3 { margin: 0 0 2px; font-size: var(--t-lg); color: #fff; }
.ventana__texto p { margin: 0; font-size: var(--t-xs); color: rgba(255,255,255,.82); }

/* --- Tablas ------------------------------------------------------------- */

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { padding: var(--e-3) var(--e-4); text-align: left; border-bottom: 1px solid var(--linea); }
thead th {
  background: var(--verde-suave); color: var(--verde-hover);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
tbody tr:last-child td { border-bottom: 0; }
td.numero { font-variant-numeric: tabular-nums; text-align: right; }
tr[data-hoy="true"] { background: var(--verde-suave); }
tr[data-cerrado="true"] td { color: var(--tinta-suave); }

/* --- Avisos ------------------------------------------------------------- */

/* --- Avisos ---------------------------------------------------------------
   Flotan sobre la página en vez de insertarse en ella. Así nunca empujan
   el contenido: metidos en el flujo, en la portada se colaban entre la
   cabecera y el vídeo y dejaban la cabecera ilegible. */

.avisos {
  position: fixed;
  /* Por debajo de la cabecera, que es lo único que va por encima. */
  top: calc(var(--e-16) + var(--e-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: min(560px, calc(100vw - 2 * var(--e-4)));
  display: flex; flex-direction: column; gap: var(--e-2);
  /* La caja no intercepta el ratón; cada aviso sí. Sin esto, la franja
     vacía de al lado se tragaría los clics de lo que hay debajo. */
  pointer-events: none;
}

.aviso {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--e-3);
  border-left: 3px solid var(--verde);
  background: var(--verde-suave);
  padding: var(--e-3) var(--e-4);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  box-shadow: 0 10px 30px rgba(12, 16, 13, .16);
  animation: aviso-entra .3s var(--curva) both;
}
.aviso--ojo { border-left-color: var(--rojo); background: var(--rojo-suave); }
.aviso p { margin: 0; flex: 1; font-size: var(--t-sm); }
.aviso[data-yendose="true"] { animation: aviso-sale .3s var(--curva) forwards; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aviso-sale {
  to { opacity: 0; transform: translateY(-10px); }
}

.aviso__cerrar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  margin: -2px -4px 0 0;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit;
  cursor: pointer; opacity: .55;
  transition: opacity .2s var(--curva), background .2s var(--curva);
}
.aviso__cerrar:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
.aviso__cerrar:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso[data-yendose="true"] { animation: none; }
}

.etiqueta {
  display: inline-block; padding: .2em .7em; border-radius: 100px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  background: var(--verde-suave); color: var(--verde-hover);
}
.etiqueta--rojo { background: var(--rojo-suave); color: var(--rojo); }

/* --- Contenido de texto largo (legales, precios) ------------------------- */

.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: var(--t-xl); margin-top: var(--e-8); }
.prosa h3 { font-size: var(--t-lg); margin-top: var(--e-6); }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: var(--e-2); }
.prosa--legal { font-size: var(--t-sm); color: var(--tinta-media); }
.prosa--legal h2 { color: var(--tinta); }

/* --- Pie ---------------------------------------------------------------- */

.pie { background: var(--tinta); color: rgba(255,255,255,.72); padding-block: var(--e-10) var(--e-6); margin-top: var(--e-12); }

/* Fondo del pie: vídeo difuminado lo justo para que se reconozca qué es
   pero no distraiga, con un velo del mismo negro verdoso del pie. El velo
   es más denso arriba —donde empiezan los títulos— y abajo, en la línea
   legal, que es letra pequeña. */
.pie { position: relative; isolation: isolate; overflow: hidden; }
.pie__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pie__fondo video,
.pie__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(1px) saturate(.92);      /* lo mínimo: se ve el carrete, nítido */
  transform: scale(1.02);              /* esconde el borde que deja el blur */
}
/* Con fotograma fijo (poster) se ve desde el primer momento; el vídeo
   arranca encima sin que se note el cambio. */
.pie__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(20, 26, 22, .80) 0%,
      rgba(20, 26, 22, .52) 45%,
      rgba(20, 26, 22, .82) 100%);
}
/* En el móvil el pie es alto y estrecho (las columnas van una debajo de
   otra): el vídeo se centra en los carretes y el velo sube un punto,
   porque ahí el texto ocupa casi todo el fondo. */
@media (max-width: 720px) {
  /* En el móvil el pie mide casi una pantalla y las letras grandes del
     carrete («200», «24») competían con el texto: un poco más de
     desenfoque y de velo, y el vídeo sigue reconociéndose. */
  .pie__fondo video, .pie__fondo img {
    filter: blur(3px) saturate(.85);
    transform: scale(1.06);
    object-position: 40% center;
  }
  .pie__fondo::after {
    background: linear-gradient(to bottom,
      rgba(20, 26, 22, .90) 0%,
      rgba(20, 26, 22, .78) 50%,
      rgba(20, 26, 22, .92) 100%);
  }
}
.pie a { color: rgba(255,255,255,.72); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__rejilla { display: grid; gap: var(--e-8); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pie__marca h3 { color: #fff; font-size: var(--t-xl); margin-bottom: var(--e-2); }
.pie__lema { color: rgba(255,255,255,.55); font-style: italic; }
.pie h4 { color: #fff; font-family: var(--f-texto); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: var(--e-4); }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-sm); }
/* Una línea suelta que el panel puede poner en todas las páginas: cierre
   por vacaciones, un cambio de horario… Vacía, no se pinta. */
.pie__aviso {
  margin: var(--e-8) 0 0; padding: var(--e-3) var(--e-4);
  border-radius: var(--radio-sm);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85); font-size: var(--t-sm);
  text-wrap: pretty;
}
.pie__aviso + .pie__legal { margin-top: var(--e-5); }
.pie__legal {
  margin-top: var(--e-8); padding-top: var(--e-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between;
  font-size: var(--t-xs); color: rgba(255,255,255,.45);
}
.pie__redes { display: flex; gap: var(--e-3); }
.pie__redes a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
}
.pie__redes a:hover { background: rgba(255,255,255,.1); }

/* --- Cookies ------------------------------------------------------------ */

.cookies {
  position: fixed;
  left: var(--e-4); right: var(--e-4);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--e-4));
  z-index: 150; max-width: 460px; margin-left: auto;
  padding: var(--e-5); border-radius: var(--radio);
}
.cookies h4 { font-family: var(--f-texto); font-size: var(--t-base); font-weight: 600; margin: 0 0 var(--e-2); }
.cookies p { font-size: var(--t-sm); color: var(--tinta-media); margin-bottom: var(--e-4); }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cookies__opcion { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-2) 0; border-top: 1px solid var(--linea); font-size: var(--t-sm); }

/* --- Reseñas -------------------------------------------------------------- */

.resenas {
  display: grid;
  gap: var(--e-8);
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-8) var(--e-6);
}
@media (min-width: 820px) {
  .resenas { grid-template-columns: minmax(200px, 260px) 1fr minmax(220px, 280px); }
}

.resenas__nota { text-align: center; }
.resenas__cifra {
  font-family: var(--f-titulo);
  font-size: clamp(3.4rem, 9vw, 4.6rem);
  line-height: .9;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.resenas__estrellas { display: flex; gap: 3px; justify-content: center; margin: var(--e-3) 0 var(--e-2); }
.resenas__estrellas svg { color: #F2B01E; }
.resenas__base { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }

.resenas__reparto { display: flex; flex-direction: column; gap: var(--e-2); }
.reparto-fila {
  display: grid;
  grid-template-columns: 3.4rem 1fr 2.6rem;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
}
.reparto-fila__etiqueta { color: var(--tinta-media); white-space: nowrap; }
.reparto-fila__barra {
  height: 9px;
  border-radius: 100px;
  background: var(--papel-hondo);
  overflow: hidden;
}
.reparto-fila__barra i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: #F2B01E;
}
.reparto-fila__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  font-size: var(--t-xs);
}

.resenas__cta { display: flex; flex-direction: column; gap: var(--e-3); }
.resenas__cta p { font-size: var(--t-sm); color: var(--tinta-media); margin: 0; }

/* --- Formularios --------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.campo > label { font-size: var(--t-sm); font-weight: 600; }
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-suave); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-base);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.campo textarea { min-height: 150px; resize: vertical; }

.campo input:hover, .campo textarea:hover { border-color: var(--tinta-suave); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.campo[data-error="true"] input,
.campo[data-error="true"] textarea { border-color: var(--rojo); }

.campo__error {
  font-size: var(--t-xs);
  color: var(--rojo);
  font-weight: 500;
}

.campo--casilla { flex-direction: row; align-items: flex-start; gap: var(--e-3); }
.campo--casilla input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--verde); flex: 0 0 auto; }
.campo--casilla label { font-weight: 400; font-size: var(--t-sm); }

/* La trampa para robots: fuera de la vista pero no con display:none,
   que algunos la detectan. */
.trampa {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Animación de entrada ------------------------------------------------ */

.revelar { opacity: 1; }
body.js .revelar {
  opacity: 0;
  transform: translateY(12px);
  /* Corto: al bajar deprisa no deben quedar huecos vacíos esperando. */
  transition: opacity .45s var(--curva), transform .45s var(--curva);
}
body.js .revelar.visible { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1200px) {
  .menu-movil-boton { display: inline-flex; }
  .menu {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 380px);
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-1);
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + var(--e-12))
             max(var(--e-5), env(safe-area-inset-right))
             calc(env(safe-area-inset-bottom, 0px) + var(--e-5))
             var(--e-5);
    /* Vidrio de verdad. Aquí el desenfoque sí es seguro: este panel no
       contiene nada `position: fixed`, así que no se convierte en marco
       de referencia de nadie —que era el fallo de la cabecera. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(26px) saturate(1.7);
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    box-shadow: -1px 0 0 rgba(255, 255, 255, .7) inset,
                -24px 0 60px rgba(20, 26, 22, .20);
    border-left: 1px solid rgba(255, 255, 255, .55);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* `visibility` no es cosmética aquí. Sin ella el panel cerrado sigue
       contando para el ancho de la página —aparecía barra horizontal y
       todo se veía desplazado— y sus enlaces seguían siendo tabulables y
       audibles para un lector de pantalla. */
    visibility: hidden;
    transition: transform .35s var(--curva), visibility 0s linear .35s;
    overflow-y: auto;
  }
  .menu[data-abierto="true"] {
    transform: none;
    visibility: visible;
    transition: transform .35s var(--curva), visibility 0s;
  }
  /* Con el menú fuera del flujo, su `margin-inline:auto` ya no empuja
     nada y los iconos se quedaban pegados al logotipo: el desplegable de
     usuario se salía de la pantalla por la izquierda. */
  .cabecera__acciones { margin-left: auto; }

  /* El panel lateral ocupa casi toda la pantalla y se lee con el móvil en
     la mano, a un palmo de la cara: aquí la letra del escritorio se queda
     corta. Sube a 1,2 rem y los renglones separan más, que son los dos
     sitios donde se falla al tocar con el pulgar. */
  .menu__enlace, .menu__boton {
    padding: var(--e-4);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    width: 100%;
    text-align: left;
    min-height: 54px;
    display: flex; align-items: center; gap: var(--e-2);
  }
  .menu__boton { justify-content: space-between; }
  .menu__enlace--destacado {
    justify-content: center;
    text-align: center;
    margin-top: var(--e-3);
    font-size: 1.15rem;
  }
  /* Los de dentro de un desplegable van un punto por debajo, para que se
     vea que cuelgan del de arriba. */
  .submenu a {
    font-size: 1.05rem;
    padding: var(--e-3) var(--e-4);
    min-height: 48px;
    display: flex; align-items: center;
  }
  .submenu {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    border: 0; box-shadow: none; padding: 0 0 0 var(--e-4);
    max-height: 0; overflow: hidden; transition: max-height .3s var(--curva);
  }
  .menu__grupo[data-abierto="true"] .submenu { max-height: 400px; }
  .seccion { padding-block: var(--e-10); }
  .portada { min-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.js .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .pie, .cookies, .portada__media { display: none; }
  body { background: #fff; }
}


/* --- Las dos formas de revelar -------------------------------------------- */

.caminos {
  display: grid; gap: var(--e-5);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  /* El camino de la tienda pesa más: es el que queremos que se coja. */
  .caminos { grid-template-columns: 1.25fr 1fr; align-items: start; }
}

.camino {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-6);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
}
.camino--principal {
  border-color: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-suave);
}
.camino h2 { font-size: var(--t-xl); margin: 0; }
.camino > p { margin: 0; color: var(--tinta-media); }
.camino .etiqueta { align-self: flex-start; }
.camino .boton { align-self: flex-start; }

.camino__lista {
  list-style: none; padding: 0; margin: var(--e-2) 0;
  display: flex; flex-direction: column; gap: var(--e-2);
  font-size: var(--t-sm);
}
.camino__lista li { display: flex; gap: var(--e-3); align-items: flex-start; }
.camino__lista li::before {
  content: "";
  flex: 0 0 auto; margin-top: .45em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
}
.camino__nota { font-size: var(--t-xs); color: var(--tinta-suave); margin: 0; }

/* --- WhatsApp en el menú --------------------------------------------------- */

.menu__enlace--wasap {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--verde) !important;
  font-weight: 600;
}
.menu__enlace--wasap:hover { background: var(--verde-suave) !important; }
/* El verde claro es para cuando el enlace va sobre la portada oscura.
   Solo en escritorio: en móvil el menú es un panel blanco aparte, y ahí
   este verde quedaba casi invisible. Al resto de enlaces ya se les había
   puesto este límite; a este se le pasó. */
@media (min-width: 1201px) {
  .cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) .menu__enlace--wasap {
    color: #9BE3B9 !important;
  }
}

/* --- ¿A quién regalas? ----------------------------------------------------- */

.publico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-5) var(--e-4);
}
@media (min-width: 720px) { .publico { grid-template-columns: repeat(4, 1fr); } }

.publico__uno {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  text-decoration: none; color: var(--tinta);
  text-align: center;
}
.publico__foto {
  width: 100%; max-width: 210px; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--papel-hondo);
  box-shadow: 0 10px 30px rgba(20,26,22,.10);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.publico__foto img { width: 100%; height: 100%; object-fit: cover; }
.publico__uno:hover .publico__foto {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 44px rgba(20,26,22,.18);
}
.publico__uno strong { font-size: var(--t-md); font-weight: 600; }
.publico__uno span { font-size: var(--t-xs); color: var(--verde); font-weight: 600; }

/* --- Índice de productos de una categoría de Foto Regalo ------------------
   Grupos en columnas que se reparten solas (como un periódico): un grupo
   de siete productos y otro de dos no dejan huecos, y en el móvil queda
   una sola columna. */

.ficha-categoria__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Sin tarjeta, sin rayas y sin columna de flechas: con todo eso parecía
   una tabla. Ahora es texto sobre la página, ordenado solo por el espacio:
   el título de cada grupo en verde y los productos como una lista limpia.
   La flecha solo aparece en el producto que señala el ratón. */
.indice {
  margin-top: clamp(4rem, 9vw, 7rem);
  scroll-margin-top: 110px;         /* que la cabecera fija no lo tape */
}

.indice__cabecera { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 52ch; }
.indice__cabecera h2 { margin: 0 0 var(--e-2); font-size: var(--t-xl); text-wrap: balance; }
.indice__cabecera p { margin: 0; color: var(--tinta-media); }

.indice__grupos { column-width: 14rem; column-gap: clamp(2rem, 5vw, 4.5rem); }
.indice__grupo {
  break-inside: avoid;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.indice__grupo h3 {
  margin: 0 0 var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
}
.indice__grupo ul { list-style: none; margin: 0; padding: 0; }
.indice__grupo li a {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 5px;
  color: var(--tinta-media);
  font-size: var(--t-base);
  text-decoration: none;
  transition: color .15s ease;
}
.indice__grupo li a svg {
  flex: none;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .15s ease, transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .indice__grupo li a:hover { color: var(--verde); }
  .indice__grupo li a:hover svg { opacity: 1; transform: none; }
}
.indice__grupo li a:active { color: var(--verde); }

.indice__todos {
  display: inline-flex; gap: 6px; align-items: center;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--verde);
  text-decoration: none;
}
.indice__todos span { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .indice__todos:hover span { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .indice__grupo li a svg, .indice__todos span { transition: none; }
}


/* --- Avatar del personal --------------------------------------------------- */

.usuario__chapa {
  /* A sangre dentro del círculo: la chapa ES el botón, no una pegatina
     dentro de él. `inset: -1px` se come el borde del botón; con `0` se
     quedaba dentro de él y se veía un anillo alrededor de la chapa. */
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover; border-radius: 50%;
  background: #fff;
}
.usuario .icono-boton { border-color: var(--verde); }
/* El sello es verde sobre blanco: se lee igual sobre la portada, sin
   invertirlo (invertido, el verde salía rosa). */
.usuario__chapa { object-fit: contain; padding: 3px; }


/* --- Velo tras el menú móvil ----------------------------------------------- */

@media (max-width: 1200px) {
  .menu::after {
    /* Cubre el resto de la pantalla por detrás del panel. Toca fuera y
       se cierra, que es lo que espera cualquiera en un móvil. */
    content: "";
    position: fixed;
    inset: 0;
    right: min(88vw, 380px);
    z-index: -1;
    background: rgba(20, 26, 22, .28);
    opacity: 0;
    transition: opacity .35s var(--curva);
    pointer-events: none;
  }
  .menu[data-abierto="true"]::after { opacity: 1; pointer-events: auto; }

  .menu__enlace, .menu__boton { border-radius: var(--radio-sm); }
  .menu__enlace:active, .menu__boton:active { background: var(--verde-suave); }
}


/* --- Carrusel de fotos -----------------------------------------------------
   Se usa en la campaña del mes y en el carrusel de la portada: las dos
   son secciones donde lo único que se sube son fotos.

   Por debajo es una fila con scroll por arrastre. Eso ya funciona sin
   JavaScript —se puede deslizar con el dedo o con la rueda— y el JS solo
   añade el paso automático y los puntos. Si el JS no carga, se sigue
   pudiendo ver todo. */

.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: var(--e-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra de scroll estorba en una galería: se navega con el dedo,
     con los puntos o con el teclado. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.carrusel__pista::-webkit-scrollbar { display: none; }

.carrusel__foto {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: #efefec;
  aspect-ratio: 16 / 10;
}
@media (min-width: 760px) { .carrusel__foto { flex-basis: 60%; } }
@media (min-width: 1100px) { .carrusel__foto { flex-basis: 46%; } }

.carrusel__foto img,
.carrusel__foto video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.carrusel__puntos {
  display: flex; justify-content: center; gap: 8px;
  margin-top: var(--e-3);
}
.carrusel__punto {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--linea); cursor: pointer;
  transition: background .2s var(--curva), transform .2s var(--curva);
}
.carrusel__punto[aria-current="true"] { background: var(--verde); transform: scale(1.4); }
/* El punto es diminuto: la zona que se puede pulsar no debe serlo. */
.carrusel__punto::before {
  content: ""; position: absolute;
  width: 32px; height: 32px; margin: -12px 0 0 -12px;
}

.carrusel__flechas { display: none; }
@media (min-width: 760px) {
  .carrusel__flechas {
    display: flex; gap: var(--e-2);
    position: absolute; top: -52px; right: 0;
  }
}


/* --- Fondo difuminado de sección -------------------------------------------
   Una banda con textura detrás del contenido. Muy desenfocado y muy
   apagado a propósito: si se reconoce lo que hay detrás, compite con lo
   que se quiere leer.

   Va en su propia capa con `z-index` negativo, no como `background` de la
   sección, porque `filter` sobre la sección difuminaría también el texto. */

.seccion--con-fondo { position: relative; isolation: isolate; }

.fondo-borroso {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--papel);
}

.fondo-borroso img,
.fondo-borroso video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* `scale` recorta los bordes lavados que deja `blur()`. */
  transform: scale(1.06);
  /* Un desenfoque suave, lo justo para que el fondo no compita con el
     texto. A 22 px la cámara quedaba en manchas irreconocibles; a 8 se
     entiende lo que se está viendo, que era el sentido de ponerlo. */
  filter: blur(var(--desenfoque-seccion, 3px)) saturate(.85) contrast(.98);
  opacity: .8;
}

/* Un velo del color del papel encima: iguala el contraste del texto sea
   cual sea la foto que suban, sin tener que ajustar nada a mano. */
.fondo-borroso::after {
  content: "";
  position: absolute; inset: 0;
  /* El velo se aclara por arriba y por abajo, donde empalma con las
     secciones vecinas, y deja el centro más limpio: así el vídeo se ve
     donde hay sitio y el texto sigue teniendo fondo suficiente. */
  /* Con el vídeo más nítido, el texto necesita algo más de fondo debajo
     o deja de leerse sobre las zonas claras. */
  background: linear-gradient(
    to bottom,
    rgba(247, 246, 242, .9) 0%,
    rgba(247, 246, 242, .55) 38%,
    rgba(247, 246, 242, .55) 64%,
    rgba(247, 246, 242, .92) 100%);
}

@media (max-width: 720px) {
  .fondo-borroso { --desenfoque-seccion: 2px; }
}


/* --- «Nuestro trabajo» -----------------------------------------------------
   Ocupa el sitio que tenía la secuencia de escenas. Se le da algo más de
   aire vertical que a una sección normal porque es la primera parada
   después de la portada y conviene que respire. */

.trabajo { padding-block: var(--e-12); }

.trabajo__acciones {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  justify-content: center;
  margin-top: var(--e-6);
}

@media (max-width: 560px) {
  /* Dos botones grandes uno al lado del otro no caben: se apilan y se
     estiran, que es más fácil de acertar con el pulgar. */
  .trabajo__acciones { flex-direction: column; }
  .trabajo__acciones .boton { width: 100%; }
}


/* --- Los dos vídeos de la portada ------------------------------------------
   Van por debajo del fondo verde, que se queda como tinte encima. Así la
   portada sigue siendo la zona verde de la marca —no se convierte en «una
   portada de vídeo»— pero deja de estar quieta.

   Los dos vídeos se turnan: el que toca está a opacidad 1 y el otro a 0,
   con una transición larga para que el cambio no se note como un corte. */

.portada--con-videos .portada__media {
  /* El verde deja de ser el fondo y pasa a ser el tinte: se mezcla con el
     vídeo en vez de taparlo. `multiply` mantiene los negros del vídeo y
     tiñe de verde el resto. */
  mix-blend-mode: multiply;
  /* Bajado del 92 %: el verde estrellado multiplicando a plena opacidad
     apagaba el vídeo hasta dejarlo casi negro. Al 48 % aporta el grano y
     el color, y deja ver lo que pasa debajo. */
  opacity: .48;
}

.portada__peli {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #0C100D;   /* mientras no hay vídeo, el verde oscuro de la marca */
}

.portada__peli video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--curva);
}
.portada__peli video[data-visible="true"] { opacity: 1; }

/* El tinte verde encima de todo: es lo que hace que se siga leyendo como
   la zona verde y no como un vídeo suelto. */
.portada__tinte {
  position: absolute; inset: 0;
  /* Cerrado abajo, donde va el titular, abierto en el centro para que se
     vea el vídeo… y cerrado otra vez arriba del todo.

     Ese último tramo no es estético: la cabecera va transparente y con el
     texto en blanco, y el vídeo tiene fotos blancas que pasan justo por
     ahí. Sin esta franja, el menú desaparece cada vez que una de ellas
     cruza por detrás. */
  background:
    linear-gradient(to top,
      rgba(8, 26, 17, .86) 0%,
      rgba(10, 38, 24, .5) 42%,
      rgba(12, 46, 29, .3) 72%,
      rgba(8, 26, 17, .72) 100%);
}

/* Sin movimiento no hay vídeo que valga: se queda el verde de siempre. */
@media (prefers-reduced-motion: reduce) {
  .portada__peli { display: none; }
  .portada--con-videos .portada__media { mix-blend-mode: normal; opacity: 1; }
}


/* --- La chapa del pie ------------------------------------------------------
   Es el logotipo, y además la puerta del panel: cinco toques llevan al
   acceso. No se le pone `cursor: pointer` ni ningún otro indicio a
   propósito: si pareciera pulsable, dejaría de estar escondida. */

.pie__chapa {
  display: block;
  width: 52px; height: 52px;
  margin-bottom: var(--e-3);
  border-radius: 50%;
  /* Sin selección ni menú de «guardar imagen» al dejar el dedo puesto:
     dando cinco toques seguidos saltaría constantemente. */
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .2s var(--curva);
}


/* --- Carrusel de una sola foto ---------------------------------------------
   Con una foto no hay nada que pasar, así que no tiene sentido dejarla al
   46 % del ancho, alineada a la izquierda y con el hueco de la siguiente
   al lado: parece que falta algo. Ocupa el ancho entero y punto. */

.carrusel--sola .carrusel__pista { overflow: visible; }

.carrusel--sola .carrusel__foto {
  flex-basis: 100%;
  /* Más apaisada que en el carrusel: una imagen sola a 16/10 en pantalla
     ancha se come demasiado alto. */
  aspect-ratio: 21 / 9;
}

@media (max-width: 760px) {
  /* En vertical, 21/9 deja una tira demasiado estrecha para verse. */
  .carrusel--sola .carrusel__foto { aspect-ratio: 4 / 3; }
}


/* --- Campaña del mes -------------------------------------------------------
   Dos columnas: la foto a la izquierda y el texto a la derecha, como
   estaba antes de convertirla en galería. Lo que cambia es que la
   izquierda ya no es una imagen suelta sino el carrusel, de modo que se
   pueden subir varias fotos desde el panel sin tocar la maqueta. */

.campania { display: grid; gap: var(--e-5); align-items: center; }

@media (min-width: 860px) {
  /* La foto, más pequeña que el texto y con un buen hueco entre las dos
     columnas: ocupando más que el texto y pegada a él, la sección se leía
     como un bloque macizo en vez de como dos cosas. */
  .campania { grid-template-columns: .85fr 1fr; gap: var(--e-9); }
}

/* Y con un tope, para que en pantallas muy anchas no crezca sin fin. */
.campania__foto { max-width: 460px; width: 100%; justify-self: start; }

.campania__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.campania__texto h2 { margin: 0; }
.campania__texto p { margin: 0; color: var(--tinta-media); font-size: var(--t-md); }
.campania__texto .boton { margin-top: var(--e-2); }

/* Dentro de una columna, cada foto ocupa la columna entera: la fracción
   del 46 % es para el carrusel a todo lo ancho, aquí dejaría media foto
   asomando y no hay sitio para eso. */
.campania__foto .carrusel__foto { flex-basis: 100%; aspect-ratio: 4 / 3; }
.campania__foto .carrusel--sola .carrusel__foto { aspect-ratio: 4 / 3; }

/* La foto es pulsable: al pasar por encima se acerca un poco y se
   despega del papel. Es el aviso de que lleva a algún sitio, sin tener
   que escribirlo. */
.carrusel__foto--enlace {
  display: block;
  cursor: pointer;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.carrusel__foto--enlace img,
.carrusel__foto--enlace video {
  transition: transform .5s var(--curva);
}
.carrusel__foto--enlace:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(12, 16, 13, .18);
}
.carrusel__foto--enlace:hover img,
.carrusel__foto--enlace:hover video { transform: scale(1.06); }
.carrusel__foto--enlace:focus-visible {
  outline: 3px solid var(--verde); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__foto--enlace,
  .carrusel__foto--enlace img,
  .carrusel__foto--enlace video { transition: none; }
  .carrusel__foto--enlace:hover { transform: none; }
  .carrusel__foto--enlace:hover img,
  .carrusel__foto--enlace:hover video { transform: none; }
}

/* Las flechas van sobre la foto, no encima de la sección: aquí arriba no
   hay cabecera donde apoyarlas. */
@media (min-width: 760px) {
  .campania__foto .carrusel { position: relative; }
  .campania__foto .carrusel__flechas {
    top: auto; bottom: var(--e-3); right: var(--e-3);
    z-index: 2;
  }
  .campania__foto .carrusel__flechas .icono-boton {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
  }
}


/* --- Antetítulo de marca ---------------------------------------------------
   «Foto Regalo» no es una etiqueta de paso como «La tienda» o «Desde
   1990»: es el nombre del servicio, y tiene que pesar lo suyo. Va más
   grande, en verde y con más aire debajo. */

.antetitulo--marca {
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: none;
  color: var(--verde);
  margin-bottom: var(--e-2);
}

/* La ventana que lleva fuera de la web ya no marca la flecha: con el
   título en tres renglones, el símbolo caía suelto al final y ensuciaba.
   El enlace sigue abriéndose en otra pestaña y eso se dice en su
   `aria-label`, que es donde hace falta avisarlo.

   Sin párrafo debajo, el título se pegaba al borde: se le da el mismo
   aire que tienen las demás ventanas con sus dos líneas. */
.ventana--fuera .ventana__texto { padding-block: var(--e-5); }


/* --- Horario ---------------------------------------------------------------
   Una lista, no una tabla: el día a la izquierda, las horas a la derecha
   y una línea de puntos entre los dos para que la vista no se pierda.
   Sin marco, sin cabecera y sin rayas: solo espacio. */

.horario {
  max-width: 1040px;           /* ancho y con aire: se lee de un vistazo */
  margin-inline: auto;
}
.horario__lista { list-style: none; margin: 0; padding: 0; }

.horario__dia {
  display: flex; align-items: baseline;
  gap: var(--e-3);
  padding-block: 16px;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;   /* las horas quedan alineadas */
}
.horario__nombre {
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: var(--e-2);
}
.horario__puntos {
  flex: 1;
  min-width: var(--e-4);
  border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 22%, transparent);
  transform: translateY(-4px);
}
.horario__horas {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  column-gap: var(--e-2);
  color: var(--tinta-media);
  text-align: right;
}
.horario__y { color: var(--tinta-suave); }
.horario__cerrado { color: var(--tinta-suave); font-style: italic; }
.horario__dia[data-cerrado="true"] .horario__nombre { color: var(--tinta-suave); font-weight: 500; }

/* El día de hoy: nombre y horas en verde y la etiqueta «Hoy». Lo marca el
   JS con `data-hoy`. */
.horario__dia[data-hoy="true"] .horario__nombre,
.horario__dia[data-hoy="true"] .horario__horas { color: var(--verde); font-weight: 700; }
.horario__dia[data-hoy="true"] .horario__puntos {
  border-bottom-color: color-mix(in srgb, var(--verde) 45%, transparent);
}

@media (max-width: 520px) {
  /* En el móvil, mañana y tarde una debajo de otra si no caben. */
  .horario__horas { flex-direction: column; align-items: flex-end; row-gap: 2px; }
  .horario__y { display: none; }
}


/* El lema que acompaña al titular de cada camino de revelado. */
.camino__lema {
  margin: calc(var(--e-2) * -1) 0 var(--e-3);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--verde);
}


/* --- La cabecera siempre legible -------------------------------------------
   Sobre la portada la cabecera va transparente y con el texto en blanco.
   Eso depende de que detrás haya algo oscuro, y eso no siempre se cumple:
   el vídeo tiene fotos claras que pasan por detrás, y cualquier cosa que
   se cuele entre la cabecera y la portada —un aviso, por ejemplo— deja el
   menú en blanco sobre blanco.

   Esta franja es su propio respaldo: viaja con la cabecera, así que el
   menú se lee siempre, haya lo que haya debajo. */

.cabecera[data-sobre-portada="true"]:not([data-fondo="true"])::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* Más alta que la barra, y difuminada hacia abajo para que no se vea
     como una banda pegada. */
  height: calc(100% + 28px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 18, 12, .62) 0%,
    rgba(6, 18, 12, .38) 55%,
    rgba(6, 18, 12, 0) 100%);
}


/* --- Solo para lectores de pantalla ----------------------------------------
   Texto que existe para quien navega a oídas pero no se dibuja. No vale
   `display: none` ni `visibility: hidden`: eso lo borra también para el
   lector. Se saca de la pantalla recortándolo a un píxel.

   La clase se usaba ya en el `<caption>` del horario pero no estaba
   definida en ninguna parte, así que el título de la tabla se veía. */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --- Ficha de una categoría de Foto Regalo ---------------------------------
   Iba con estilos escritos dentro de la plantilla y la rejilla genérica de
   dos columnas. Con un título largo —«Álbumes y libros de fotos»— el
   titular se comía la mitad de la pantalla y los huecos no guardaban
   ninguna relación entre sí. */

.ficha-categoria {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  margin-top: var(--e-6);
}
@media (min-width: 900px) {
  /* Algo más para el texto que para la foto: aquí lo que convence es lo
     que se cuenta, la foto solo acompaña. */
  .ficha-categoria { grid-template-columns: 1.1fr 1fr; gap: var(--e-8); }
}

.ficha-categoria__texto {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--e-3);
}

/* El titular, con tope. Sin él, un nombre de cuatro palabras salía a 80 px
   y aplastaba todo lo demás. */
.ficha-categoria__texto h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.02;
}

.ficha-categoria__entrada {
  margin: 0;
  max-width: 48ch;            /* el renglón deja de ser incómodo de leer */
  font-size: var(--t-md);
  color: var(--tinta-media);
}

.ficha-categoria__texto .boton { margin-top: var(--e-2); }

.ficha-categoria__aviso {
  margin: var(--e-2) 0 0;
  max-width: 52ch;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}

/* La foto, siempre con la misma proporción sea cual sea la que se suba:
   así todas las categorías se ven iguales de altas. */
.ficha-categoria__foto {
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--papel-hondo, #efefec);
  aspect-ratio: 4 / 3;
}
.ficha-categoria__foto img, .ficha-categoria__foto video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.otras__titulo { margin: var(--e-12) 0 var(--e-5); }


/* =========================================================================
   PULIDO DE MOVIMIENTO
   -------------------------------------------------------------------------
   Criterios de las skills de Emil Kowalski (animate, apple-design,
   improve-animations) aplicados sobre lo que ya había, sin cambiar la
   maqueta: solo cómo responde y cómo se mueve.

   Todo lo de aquí queda anulado por el bloque de «reducir movimiento» de
   más arriba, que apaga las transiciones para quien lo pide.
   ========================================================================= */


/* --- 1. Hover solo con ratón ------------------------------------------------
   En una pantalla táctil, tocar una tarjeta dispara su :hover y la deja
   levantada o ampliada hasta que se toca otra cosa. Ninguno de estos
   efectos estaba limitado al ratón, así que en móvil se quedaban
   «enganchados». Aquí se anulan en los dispositivos sin ratón.

   Va ANTES que la respuesta al pulsar (bloque 2): así, en móvil, el toque
   sí se nota aunque el hover esté anulado. */

@media (hover: none), (pointer: coarse) {
  .tarjeta:hover,
  .tarjeta:hover .tarjeta__media img,
  .servicio:hover,
  .servicio:hover img,
  .servicio:hover video,
  .ventana:hover img,
  .destino:hover,
  .publico__uno:hover .publico__foto,
  .carrusel__foto--enlace:hover,
  .carrusel__foto--enlace:hover img,
  .carrusel__foto--enlace:hover video {
    transform: none;
  }
}


/* --- 2. Respuesta al pulsar -------------------------------------------------
   Todo lo que se pulsa se hunde un poco al apretarlo: confirma en el
   mismo instante que la web ha recibido el toque, antes incluso de que
   cargue nada. Antes solo lo hacían los botones de texto, y solo 1 px.

   Entre 0.95 y 0.98: menos no se nota; más parece que el botón se rompe.
   Los pequeños y redondos bajan un poco más para que se aprecie. */

.boton:active { transform: scale(0.97); }

.icono-boton {
  transition: background .2s var(--curva), color .2s var(--curva),
              border-color .2s var(--curva), transform 160ms var(--ease-out);
}
.icono-boton:active { transform: scale(0.94); }

/* Las tarjetas que son enlace. El `transition-duration` corto va en el
   :active: la pulsación responde al momento aunque la tarjeta tenga una
   transición más lenta para el hover. */
.ventana { transition: transform 160ms var(--ease-out); }
.ventana:active { transform: scale(0.98); }

.servicio:active { transform: scale(0.985); transition-duration: 120ms; }
.destino:active  { transform: scale(0.98);  transition-duration: 120ms; }
.carrusel__foto--enlace:active { transform: scale(0.98); transition-duration: 120ms; }

.publico__uno:active .publico__foto {
  transform: scale(0.96);
  transition-duration: 120ms;
}

/* El destello gris que pinta el móvil al tocar un enlace sobra donde ya
   hay respuesta propia: se veían las dos a la vez. */
.boton, .icono-boton, .ventana, .servicio, .destino, .publico__uno,
.carrusel__foto--enlace, .menu__enlace, .menu__boton {
  -webkit-tap-highlight-color: transparent;
}


/* --- 3. Desplegables que nacen del botón ------------------------------------
   Aparecían deslizándose desde arriba, sin relación con lo que se había
   pulsado. Ahora crecen desde su botón —el de Foto Regalo desde la
   izquierda, el de usuario desde la derecha—, que es lo que hace que se
   lean como «esto sale de ahí».

   Y se cierran más rápido de lo que se abren: al abrir, el visitante está
   mirando; al cerrar ya ha decidido y no hay nada que enseñarle. */

@media (min-width: 1201px) {
  .submenu {
    transform-origin: top left;
    transform: translateY(-4px) scale(0.96);
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  }
  .menu__grupo[data-abierto="true"] .submenu {
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
}

.usuario__menu {
  transform-origin: top right;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.usuario[data-abierto="true"] .usuario__menu {
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}


/* --- 4. El cajón del menú en móvil ------------------------------------------
   La curva de los cajones de iOS: sale disparado y frena suave al final,
   como un panel con peso. Entra en 380 ms y se va en 280. */

@media (max-width: 1200px) {
  .menu {
    transition: transform 280ms var(--ease-drawer), visibility 0s linear 280ms;
  }
  .menu[data-abierto="true"] {
    transition: transform 380ms var(--ease-drawer), visibility 0s;
  }
}


/* =========================================================================
   PULIDO DE APARIENCIA
   ========================================================================= */

/* --- 5. Foco visible con teclado --------------------------------------------
   Quien navega con el tabulador tiene que ver dónde está. Casi nada lo
   marcaba. `:where()` deja la especificidad a cero: los elementos que ya
   tenían su propio foco lo conservan. Los campos de formulario quedan
   fuera porque ya tienen el suyo. */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sobre la portada oscura, el verde no se distingue: en blanco. */
.portada :focus-visible,
.cabecera[data-sobre-portada="true"]:not([data-fondo="true"]) :focus-visible {
  outline-color: #fff;
}


/* --- 6. Titulares sin palabras huérfanas ------------------------------------
   `balance` reparte el titular en renglones de largo parecido, en vez de
   dejar una palabra sola en el último («Una foto no termina en la /
   pantalla»). `pretty` hace lo mismo con el final de los párrafos. No
   cambia el tamaño ni el sitio de nada: solo dónde se corta la línea. */

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }


/* --- 7. Números en columna --------------------------------------------------
   En las tablas —precios, horario— cada cifra ocupa el mismo ancho, así
   los precios y las horas quedan alineados de arriba abajo. */

table { font-variant-numeric: tabular-nums; }


/* --- 8. Texto seleccionado con el verde de la marca ------------------------ */

::selection { background: rgba(14, 107, 66, 0.18); color: inherit; }


/* --- 9. El desplegable dentro del menú móvil --------------------------------
   Se marcaba de más: al tocar «Foto Regalo» el botón se quedaba con fondo
   y texto verdes (el hover se queda pegado en táctil), y las opciones
   salían en una tarjeta blanca con esquinas, heredada del desplegable de
   escritorio, que dentro del cristal del menú parecía un parche.

   Ahora, abierto, solo cambia el color del texto y gira la flecha. Las
   opciones cuelgan con sangría y una línea fina a la izquierda: se ve que
   son de ese grupo sin necesitar una caja alrededor. */

@media (max-width: 1200px) {
  .menu__grupo[data-abierto="true"] > .menu__boton {
    color: var(--verde);
    background: transparent;
  }

  .submenu {
    background: transparent;
    border-radius: 0;
    margin: 0 0 var(--e-2) var(--e-4);
    padding: 0 0 0 var(--e-2);
    border-left: 2px solid var(--linea);
  }
  .submenu a {
    color: var(--tinta-media);
    font-weight: 500;
    border-radius: var(--radio-sm);
  }
  .submenu a:active { background: var(--verde-suave); color: var(--verde); }
}

/* En táctil, ningún color de hover se queda puesto después del toque. La
   respuesta al pulsar ya la da :active mientras se aprieta. */
@media (hover: none), (pointer: coarse) {
  /* El botón verde «Enviar mis fotos» queda fuera: es un botón con fondo
     propio, y esto lo dejaría transparente. */
  .menu__enlace:not(.menu__enlace--destacado):hover,
  .menu__boton:hover {
    background: transparent;
    color: inherit;
  }
  .menu__enlace--wasap:hover { background: transparent !important; }
  .menu__grupo[data-abierto="true"] > .menu__boton:hover { color: var(--verde); }
}


/* =========================================================================
   10. Ritmo de la portada: más aire y más ancho
   -------------------------------------------------------------------------
   La idea (no el estilo) de webs como nomic.ai: el contenido ocupa casi
   todo el ancho —con un margen fijo a los lados en vez de una columna de
   1200 px en el centro—, los textos siguen en columnas estrechas, y entre
   una sección y la siguiente hay mucho espacio. Al bajar, cada bloque
   llega solo, sin el siguiente ya asomando.

   Medido allí: 240 px entre secciones y 32 px de margen lateral (24 en
   el móvil). Aquí el hueco sale de sumar el relleno de abajo de una
   sección y el de arriba de la siguiente: 2 × 128 = 256 px en escritorio,
   2 × 88 = 176 px en el móvil. Las bandas de color (papel) se quedan con
   128 px por dentro, que es lo que las deja respirar.

   Solo en la portada. Las páginas de texto (precios, legales) siguen con
   su columna de lectura. */
.pagina-inicio {
  --ancho: 1440px;
  --aire: clamp(5.5rem, 9vw, 8rem);
}
.pagina-inicio .contenedor {
  padding-left: max(clamp(1.5rem, 2.5vw, 2rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.5rem, 2.5vw, 2rem), env(safe-area-inset-right));
}
.pagina-inicio .seccion,
.pagina-inicio .seccion--ajustada { padding-block: var(--aire); }

/* Más distancia entre el titular de una sección y su contenido: el
   titular se lee solo antes de que empiece lo demás. */
.pagina-inicio .seccion__cabecera {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* La portada, alineada con el resto: su bloque de texto también es un
   .contenedor, pero con tope de 44ch, así que salía centrado mientras
   todo lo demás empieza en el margen izquierdo. Ahora el bloque ocupa el
   ancho y lo estrecho son las líneas: el titular no pasa de dos o tres
   renglones y el párrafo mantiene una medida cómoda de leer. */
.pagina-inicio .portada__contenido { max-width: var(--ancho); }
.pagina-inicio .portada__contenido h1 { max-width: 13ch; text-wrap: balance; }
.pagina-inicio .portada__contenido p { max-width: 42ch; }
.pagina-inicio .trabajo__acciones { justify-content: flex-start; }


/* =========================================================================
   11. Redes sociales
   ------------------------------------------------------------------------- */

/* En la cabecera: Instagram y TikTok junto a WhatsApp, solo cuando hay
   ancho de sobra. Por debajo, la barra ya va justa y pasan al menú. */
.cabecera__red { display: none; }
@media (min-width: 1360px) { .cabecera__red { display: inline-flex; } }
.icono-boton--instagram:hover { background: #D62976; border-color: #D62976; color: #fff; }
.icono-boton--tiktok:hover    { background: #141A16; border-color: #141A16; color: #fff; }

/* Dentro del menú del móvil, al final y en fila. */
.menu__redes { display: none; }
@media (max-width: 1200px) {
  .menu__redes {
    display: flex; gap: var(--e-3);
    margin-top: var(--e-5); padding-top: var(--e-5);
    border-top: 1px solid var(--linea);
  }
  .menu__red {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--linea); color: var(--tinta);
  }
  .menu__red:active { background: var(--verde-suave); color: var(--verde); }
}

/* Pie: los mismos círculos de siempre, ahora con WhatsApp. */
.pie__red {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
}
.pie__red:hover { background: rgba(255,255,255,.1); text-decoration: none !important; }

/* Pastillas con icono y usuario, para «Dónde encontrarnos». */
.red-pastilla {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--tinta);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.red-pastilla span { color: var(--tinta-media); }
.red-pastilla strong { color: var(--tinta); font-weight: 600; margin-right: 2px; }
.red-pastilla svg { flex: none; }
.red-pastilla--instagram svg { color: #D62976; }
.red-pastilla--tiktok svg    { color: #141A16; }
.red-pastilla--whatsapp svg  { color: #1FA855; }
@media (hover: hover) and (pointer: fine) {
  .red-pastilla:hover { background: #fff; border-color: var(--verde-borde); }
}
.red-pastilla:active { transform: scale(.98); }


/* =========================================================================
   13. Campaña del mes: carrusel limpio
   -------------------------------------------------------------------------
   Pasa solo, sin flechas, sin marco y sin la sombra que saltaba al pasar
   el ratón (se leía como un borde). Las fotos son verticales: se enseñan
   en 4:5 para no cortarles media cabeza. El foco de teclado sigue ahí,
   pero por dentro de la foto y en blanco, no como un recuadro verde. */
.campania__foto { max-width: 440px; }
.campania__foto .carrusel__foto,
.campania__foto .carrusel--sola .carrusel__foto { aspect-ratio: 4 / 5; }
.campania__foto .carrusel__foto--enlace:hover { transform: none; box-shadow: none; }
.campania__foto .carrusel__foto--enlace:hover img { transform: scale(1.03); }
.campania__foto .carrusel__foto--enlace:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .95);
  outline-offset: -8px;
}
.campania__foto .carrusel__pista:focus-visible { outline: none; }
.campania__foto .carrusel__puntos { margin-top: var(--e-3); }


/* =========================================================================
   14. Páginas de categoría de Foto Regalo: más orden
   -------------------------------------------------------------------------
   Mismo ritmo en los tres bloques (categoría, índice, otras categorías):
   una línea fina y el mismo espacio entre ellos. El índice pasa de
   columnas «de periódico» (cada grupo caía a una altura distinta) a una
   rejilla: los grupos quedan en filas alineadas. */
.miga {
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center;
  margin-bottom: var(--e-6);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.miga a { color: var(--verde); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .miga a:hover { text-decoration: underline; } }
.categoria .ficha-categoria { margin-top: 0; }

.categoria .indice,
.categoria .otras {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--linea);
}
.categoria .indice__grupos {
  column-width: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(2rem, 4vw, 3rem);
}
.categoria .indice__grupo { margin-bottom: 0; }

.otras__titulo {
  margin: 0 0 var(--e-5);
  font-size: var(--t-xl);
}
.otras__rejilla {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px)  { .otras__rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .otras__rejilla { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.otras__rejilla .ventana__texto h3 { font-size: var(--t-md); }


/* =========================================================================
   15. Escaparate: cinta continua
   -------------------------------------------------------------------------
   Dos vueltas iguales de fotos en fila; la pista se desplaza la mitad de
   su ancho y vuelve a empezar, así el bucle no tiene costura. Cada pieza
   lleva su separación como relleno a la derecha (no `gap`): con `gap` la
   mitad exacta caería en medio de un hueco y se vería un saltito. */
.escaparate__cabecera {
  display: grid; gap: var(--e-5);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.escaparate__cabecera .seccion__cabecera { margin-bottom: 0; }
.escaparate__cabecera .trabajo__acciones { margin-top: 0; }
@media (min-width: 900px) {
  .escaparate__cabecera { grid-template-columns: 1fr auto; }
}

.cinta {
  position: relative;
  overflow: hidden;
  /* Se desvanece por los bordes en vez de cortarse en seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cinta__pista {
  display: flex; width: max-content;
  animation: cinta var(--duracion, 30s) linear infinite;
  will-change: transform;
}
.cinta[data-quieta="true"] .cinta__pista { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .cinta:hover .cinta__pista { animation-play-state: paused; }
}
@keyframes cinta { to { transform: translate3d(-50%, 0, 0); } }

.cinta__pieza {
  margin: 0;
  padding-right: clamp(10px, 1.4vw, 18px);
  flex: none;
}
.cinta__pieza > img,
.cinta__pieza > video {
  display: block;
  height: clamp(240px, 34vw, 420px);
  aspect-ratio: 4 / 5;
  width: auto;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--papel-hondo);
}

/* Sin movimiento: la cinta se queda quieta y se desliza a mano. */
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .cinta__pista { animation: none; }
  .cinta__pieza[aria-hidden="true"] { display: none; }
}


/* =========================================================================
   16. Servicios en tienda
   ------------------------------------------------------------------------- */
.tienda__lista {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tienda__ficha {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
/* La foto arriba, a sangre; debajo el texto. */
.tienda__foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--papel-hondo); }
.tienda__foto img, .tienda__foto video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tienda__ficha:hover .tienda__foto img { transform: scale(1.04); }
}
.tienda__cuerpo {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.tienda__icono {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: var(--e-2);
  border-radius: 18px;
  background: var(--verde-suave);
  color: var(--verde);
  overflow: hidden;
}
.tienda__icono svg { width: 38px; height: 38px; }
.tienda__icono--foto { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radio-sm); background: var(--papel-hondo); }
.tienda__icono--foto img, .tienda__icono--foto video { width: 100%; height: 100%; object-fit: cover; }
.tienda__etiqueta {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde);
}
.tienda__ficha h3 { margin: 0; font-size: var(--t-lg); text-wrap: balance; }
.tienda__ficha p { margin: 0; color: var(--tinta-media); }
.tienda__enlace {
  margin-top: auto; padding-top: var(--e-3);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--verde); text-decoration: none;
}
.tienda__enlace span { display: inline-block; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tienda__enlace:hover span { transform: translateX(3px); }
}


/* =========================================================================
   17. Precios: lista limpia, como el horario
   ------------------------------------------------------------------------- */
.tarifas__cabecera { max-width: 60ch; margin-bottom: var(--e-5); }
.tarifas__cabecera h2 { margin: 0 0 var(--e-2); }
.tarifas__cabecera p { margin: 0; color: var(--tinta-media); }
.tarifas { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.tarifas--estrecha { max-width: 560px; }
.tarifa {
  display: flex; align-items: baseline; gap: var(--e-3);
  padding-block: 12px;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}
.tarifa__nombre { font-weight: 600; white-space: nowrap; }
.tarifa__puntos {
  flex: 1; min-width: var(--e-4);
  border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 22%, transparent);
  transform: translateY(-4px);
}
.tarifa__precio { font-weight: 700; color: var(--verde); white-space: nowrap; }
.tarifas__nota { margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--tinta-suave); }


/* =========================================================================
   18. Móvil: que nada ensanche la página
   -------------------------------------------------------------------------
   Con la sesión iniciada la cabecera lleva un botón más (el del personal)
   y en un móvil de 360 px sobraban 5 px: toda la página se podía mover de
   lado y los textos se veían cortados a la izquierda. En el móvil, con
   sesión, el WhatsApp de la barra se esconde (sigue dentro del menú). Y
   como red de seguridad, la página nunca se desplaza en horizontal:
   `clip` recorta sin crear barra de desplazamiento y sin romper la
   cabecera pegajosa (con `hidden` dejaría de pegarse). */
html, body { overflow-x: clip; }

@media (max-width: 480px) {
  .cabecera__acciones { gap: 6px; }
  .cabecera__acciones:has(.usuario) .icono-boton--wasap { display: none; }
}
@media (max-width: 380px) {
  .cabecera__acciones .icono-boton { width: 40px; height: 40px; }
}

/* Las fotos del escaparate son enlaces: al pasar el ratón (la cinta ya se
   ha parado) la foto se levanta un poco. */
a.cinta__pieza { display: block; text-decoration: none; }
.cinta__pieza > img { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.cinta__pieza:hover > img { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(12, 16, 13, .18); }
}
a.cinta__pieza:focus-visible { outline: none; }
a.cinta__pieza:focus-visible > img { outline: 3px solid var(--verde); outline-offset: 3px; }

/* Al saltar a una sección desde el menú (#servicios-tienda, #horario…),
   que la cabecera fija no le tape el titular. */
.seccion[id] { scroll-margin-top: 84px; }


/* =========================================================================
   19. Fluidez
   -------------------------------------------------------------------------
   El «vidrio» (backdrop-filter) obliga al navegador a desenfocar lo que
   hay detrás en cada movimiento. En la cabecera fija, que va encima de
   vídeos mientras se hace scroll, era el mayor gasto de la página; en el
   menú del móvil hacía que el panel entrase a tirones. Se cambia por un
   fondo casi opaco: a la vista es prácticamente igual. */
.cabecera::before {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(250, 250, 247, .96);
}
@media (max-width: 1200px) {
  .menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
          background: rgba(250, 250, 247, .98) !important; }
}

/* Desenfocar un vídeo en marcha se recalcula en cada fotograma: en el pie
   del escritorio el desenfoque era de 1 px (no se apreciaba) y se quita.
   En el móvil el pie ya va con su fotograma fijo, sin vídeo. */
.pie__fondo video { filter: saturate(.92); }


/* =========================================================================
   21. Pie en mosaico
   -------------------------------------------------------------------------
   La foto (carretes) de fondo, un velo oscuro para leer el texto y, por
   encima del velo, una rejilla de teselas con junta oscura. Cada tesela
   tiene una capa de luz (::after) que solo cambia de opacidad —lo más
   barato de animar—: al pasar el ratón se enciende al instante y se apaga
   despacio, así el cursor deja una estela. En el móvil, alguna tesela
   destella sola de vez en cuando. */
.pie__fondo:has(.mosaico) { pointer-events: auto; }
.mosaico {
  position: absolute; inset: 0;
  background: var(--tinta) center / cover no-repeat;
  filter: saturate(.9);
}
/* Por encima del velo (que es el ::after del fondo, z-index 1). */
.pie__fondo::after { z-index: 1; }
.mosaico__teselas {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols, 20), var(--lado, 72px));
  grid-auto-rows: var(--lado, 72px);
  overflow: hidden;
}
.tesela {
  position: relative;
  /* La junta: una línea oscura y, pegada a ella, un filo de luz. Así cada
     tesela se lee como una pieza con volumen y no como una rejilla. */
  box-shadow: inset 0 0 0 1.5px rgba(8, 12, 9, .85),
              inset 1px 1px 0 2.5px rgba(255, 255, 255, .05);
}
/* Textura: no todas las teselas tienen el mismo tono. */
.tesela--sombra { background: rgba(8, 12, 9, .30); }
.tesela--luz { background: rgba(255, 236, 190, .06); }
.tesela::after {
  content: ""; position: absolute; inset: 1px;
  background: radial-gradient(circle at 50% 45%, rgba(255, 236, 190, .42), rgba(255, 236, 190, .16) 72%);
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tesela:hover::after { opacity: 1; transition-duration: .06s; }
}
.tesela--brilla::after { animation: tesela-brillo 2.6s var(--ease-in-out); }
@keyframes tesela-brillo { 45% { opacity: .9; } }

/* El velo del pie, algo más denso: la foto de carretes es muy clara. */
.pie__fondo:has(.mosaico)::after {
  background: linear-gradient(to bottom,
    rgba(20, 26, 22, .88) 0%,
    rgba(20, 26, 22, .70) 45%,
    rgba(20, 26, 22, .90) 100%);
}

/* El contenido del pie deja pasar el ratón hacia las teselas salvo en lo
   que se lee o se pulsa (enlaces, textos, la chapa). */
.pie:has(.mosaico) > .contenedor { pointer-events: none; }
.pie:has(.mosaico) > .contenedor :is(a, button, p, h3, h4, li, span, img) { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .tesela::after { transition: none; }
  .tesela--brilla::after { animation: none; }
}


/* =========================================================================
   22. Dónde encontrarnos
   -------------------------------------------------------------------------
   De arriba abajo: el titular de la sección (como el resto de la
   portada), la panorámica de Jaén en una franja baja que nace del papel,
   y el mapa a todo lo ancho y a todo color que sale de ella. La tarjeta
   con la dirección va a caballo entre la panorámica y el mapa, para que
   se vea nada más llegar a la sección. */
.donde {
  --alto-banda: clamp(260px, 30vw, 440px);
  position: relative;
  background: var(--papel-hondo);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: 84px;
}
.donde__cabecera { position: relative; z-index: 2; }
.donde__cabecera h2 { margin: var(--e-2) 0 0; }

.donde__fondo {
  position: relative;
  height: var(--alto-banda);
  margin-top: calc(var(--alto-banda) * -0.12);   /* el titular se apoya en ella */
}
.donde__fondo picture { display: contents; }
/* Solo la foto de fondo (no las imágenes del rótulo, que van dentro). */
.donde__fondo > img, .donde__fondo picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.donde__fondo::after {
  content: ""; position: absolute; inset: -2px 0;
  background: linear-gradient(180deg, var(--papel-hondo) 0%, rgba(237,235,228,0) 28%, rgba(237,235,228,0) 100%);
}

.donde__zona { position: relative; margin-top: calc(var(--alto-banda) * -0.38); }
.donde__mapa {
  position: relative;
  height: clamp(420px, 36vw, 520px);
  /* Se funde por arriba con la panorámica y por abajo con el papel; la
     máscara solo toca los bordes, el mapa conserva sus colores. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 60px), transparent 100%);
}
.donde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* La capa de la tarjeta deja pasar el ratón al mapa salvo en la tarjeta. */
.donde__capa {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  pointer-events: none;
}
.donde__tarjeta {
  pointer-events: auto;
  width: min(430px, 100%);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(12, 30, 20, .22), 0 3px 10px rgba(12, 30, 20, .08);
}
.donde__direccion { margin: 0 0 var(--e-1); font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.1; text-wrap: balance; }
.donde__ciudad { margin: 0 0 var(--e-4); color: var(--tinta-media); }

/* Hoy: estado en una pastilla (verde con punto si está abierto) + horas. */
.donde__hoy {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-5);
  font-variant-numeric: tabular-nums;
}
.donde__estado {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
  background: var(--papel-hondo); color: var(--tinta-media);
}
.donde__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.donde__hoy[data-abierto="true"] .donde__estado { background: var(--verde-suave); color: var(--verde); }
.donde__hoy[data-abierto="true"] .donde__estado::before { opacity: 1; box-shadow: 0 0 0 3px rgba(14,107,66,.18); }
.donde__horas { font-size: var(--t-sm); color: var(--tinta-media); }
.donde__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.donde__acciones .boton { display: inline-flex; align-items: center; gap: 8px; }

/* Móvil: la Cruz va DETRÁS (como gustaba): ocupa de arriba hasta la
   tarjeta incluida, con hueco entre el titular y la tarjeta para que se
   vea la cruz entera. El mapa, a todo lo ancho, queda debajo sobre papel. */
@media (max-width: 899px) {
  .donde { padding-top: clamp(2rem, 8vw, 3rem); }
  .donde__fondo {
    position: absolute; z-index: 0;
    inset: 0 0 390px 0;              /* todo menos la franja del mapa */
    height: auto; margin: 0;
  }
  .donde__fondo picture > img, .donde__fondo > img { object-position: 46% top; }
  .donde__fondo::after {
    background: linear-gradient(180deg,
      rgba(237,235,228,.55) 0%,
      rgba(237,235,228,.05) 30%,
      rgba(237,235,228,.10) 70%,
      var(--papel-hondo) 100%);
  }
  .donde__zona { display: flex; flex-direction: column; margin-top: 52vw; }
  .donde__capa { position: relative; inset: auto; display: block; padding-top: 0; order: 1; }
  .donde__tarjeta { width: 100%; }
  .donde__zona > .donde__mapa {
    order: 2; height: 360px; margin-top: 30px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* Solo escritorio: la panorámica, algo más abajo. Se encuadra por la
   parte de arriba (se ve la Cruz entera y las torres de las catedrales),
   empieza un poco más separada del titular y el mapa sube menos sobre
   ella. En el móvil no se toca: ahí la imagen va detrás y ya encaja. */
@media (min-width: 900px) {
  .donde { --alto-banda: clamp(300px, 32vw, 480px); }
  .donde__fondo { margin-top: calc(var(--alto-banda) * -0.02); }
  .donde__fondo picture > img, .donde__fondo > img { object-position: 50% 24%; }
  .donde__zona { margin-top: calc(var(--alto-banda) * -0.30); }
}

/* Entre el mapa y el pie no queda ninguna franja: en la portada el pie
   va pegado a «Dónde encontrarnos» y el borde inferior del mapa, que ya
   se desvanecía, se funde hacia el oscuro del pie en vez de hacia el
   papel. Así se pasa del mapa al mosaico sin corte. */
.pagina-inicio .pie { margin-top: 0; }
.pagina-inicio .donde {
  background: linear-gradient(180deg,
    var(--papel-hondo) 0,
    var(--papel-hondo) calc(100% - 70px),
    #1a211c 100%);
}


/* =========================================================================
   23. Pie: sin rejilla y con el texto bien legible
   -------------------------------------------------------------------------
   Las juntas del mosaico formaban una reja sobre la foto y, junto con las
   letras grandes de los carretes, hacían costoso leer el pie. Se quitan
   las juntas y los tonos alternos; queda solo el brillo al pasar el ratón.
   La foto va algo desenfocada (es fija: se calcula una vez) y bajo un velo
   más oscuro, y el texto sube casi a blanco. */
.tesela,
.tesela--sombra,
.tesela--luz { box-shadow: none; background: none; }
.mosaico { filter: saturate(.85) blur(2px); transform: scale(1.03); }
.pie__fondo:has(.mosaico)::after {
  background: linear-gradient(to bottom,
    rgba(16, 21, 18, .90) 0%,
    rgba(16, 21, 18, .82) 45%,
    rgba(16, 21, 18, .93) 100%);
}
.pie { color: rgba(255, 255, 255, .88); }
.pie a { color: rgba(255, 255, 255, .9); }
.pie a:hover { color: #fff; }
.pie__lema { color: rgba(255, 255, 255, .72); }
.pie__legal { color: rgba(255, 255, 255, .62); }
.pie h4 { color: #fff; letter-spacing: .14em; }


/* =========================================================================
   24. Pie: tipografía y unión con el mapa en el móvil
   ------------------------------------------------------------------------- */
/* Todo el pie con la misma letra, en negrita limpia y sin apretar: los
   titulares generales van a -0,035em, que en el pie, sobre la foto,
   quedaba demasiado comprimido. */
.pie { font-family: var(--f-texto); letter-spacing: 0; }
.pie__marca h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}
.pie__lema { font-style: italic; font-weight: 500; font-size: var(--t-md); }
.pie ul a, .pie__contacto, .pie li { font-weight: 500; }

/* En el móvil, el mapa termina limpio y el pie empieza justo debajo: el
   fundido a oscuro dejaba una franja gris con la letra pequeña de Google
   a medio ver. */
@media (max-width: 899px) {
  .pagina-inicio .donde { background: var(--papel-hondo); }
  .donde__zona > .donde__mapa {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px);
            mask-image: linear-gradient(180deg, transparent 0, #000 36px);
  }
}

/* Los textos de las columnas del pie (contacto, servicios, información),
   con la misma letra que el nombre de la tienda: negrita, en blanco y un
   punto más grandes. Los títulos de columna siguen en versalitas
   pequeñas para no competir con ellos. */
.pie ul { gap: var(--e-3); font-size: var(--t-base); }
.pie ul,
.pie ul a,
.pie li {
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}
.pie ul a { text-decoration: none; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .pie ul a:hover { color: #9BE3B9; text-decoration: none; }
}
@media (max-width: 720px) {
  .pie ul { font-size: var(--t-md); }
}


/* =========================================================================
   25. Pie elegante
   -------------------------------------------------------------------------
   Imagen: los carretes en blanco y negro bajo un velo verde oscuro de la
   marca (un duotono) y con viñeta en los bordes, en vez de la foto en
   color apagada. Texto: los enlaces en peso medio y blanco suavizado, con
   una línea que se desliza al pasar el ratón; los títulos de columna en
   verde claro con una rayita encima; y el contacto con iconos finos. */
.mosaico { filter: grayscale(1) contrast(1.12) brightness(.95) blur(1px); transform: scale(1.02); }
.pie__fondo:has(.mosaico)::after {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(6, 14, 10, .55) 100%),
    linear-gradient(to bottom,
      rgba(9, 32, 21, .90) 0%,
      rgba(11, 40, 26, .80) 50%,
      rgba(8, 24, 16, .94) 100%);
}

.pie h4 {
  position: relative;
  padding-top: var(--e-3);
  color: #9BE3B9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}
.pie h4::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .7;
}

.pie ul { gap: 12px; font-size: var(--t-sm); }
.pie ul,
.pie ul a,
.pie li {
  font-family: var(--f-texto);
  font-weight: 500;
  letter-spacing: .005em;
  color: rgba(255, 255, 255, .82);
}
.pie ul a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color .2s ease, background-size .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pie ul a:hover { color: #fff; background-size: 100% 1px; }
}

.pie__contacto li { display: flex; align-items: flex-start; gap: 10px; }
.pie__contacto svg {
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  fill: none; stroke: #9BE3B9; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 720px) {
  .pie ul { font-size: var(--t-base); gap: 14px; }
}


/* Mapa: el recuadro blanco que Google pone arriba a la izquierda repetía
   la dirección de la tarjeta. El mapa se sube dentro de su hueco para
   dejarlo fuera de la vista; la atribución de abajo sigue visible. */
.donde__mapa { overflow: hidden; }
.donde__mapa iframe { top: -90px; height: calc(100% + 90px); }


/* =========================================================================
   26. Nuestros trabajos: cada pieza con su forma
   -------------------------------------------------------------------------
   Todas a la misma altura y cada una con su ancho natural (--ar, que
   calcula el servidor): una vertical, una apaisada y una cuadrada caben
   seguidas sin recortarse. El rótulo opcional va en una pastilla. */
.cinta__pieza { position: relative; }
.cinta__pieza > img,
.cinta__pieza > video {
  height: clamp(240px, 30vw, 400px);
  width: auto;
  aspect-ratio: var(--ar, .8);
  object-fit: cover;
}
.cinta__rotulo {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--verde);
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(12, 16, 13, .18);
  pointer-events: none;
}
@media (max-width: 720px) {
  .cinta__pieza > img, .cinta__pieza > video { height: 260px; }
}

/* Página de la campaña: la misma composición que en la portada, algo
   más grande porque aquí es lo único que hay. */
.campania--pagina .campania__foto { max-width: 520px; }
.campania--pagina h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; }


/* =========================================================================
   27. «Dónde encontrarnos»: panorámica entera y rótulo en la tarjeta
   -------------------------------------------------------------------------
   En escritorio la franja toma la proporción de la imagen (--ar, la pone
   la plantilla), así se ve completa, sin recortes arriba ni abajo; con
   tope de alto en pantallas muy anchas. El rótulo de la tienda encabeza
   la tarjeta de la dirección: sobre blanco se lee limpio (encima del
   dibujo competía con las barandillas y las rocas). */
@media (min-width: 900px) {
  .donde { --alto-banda: min(calc(100vw / var(--ar, 2.4)), 640px); }
  .donde__fondo picture > img, .donde__fondo > img { object-position: 50% 50%; }
  .donde__zona { margin-top: calc(var(--alto-banda) * -0.20); }
}

.donde__firma {
  display: flex; flex-direction: column;
  gap: 8px;
  width: min(100%, 300px);
  margin: 0 0 var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.donde__firma-rotulo { width: 100%; height: auto; }
.donde__firma-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1.5px solid var(--rojo);
  line-height: 1;
}
.donde__firma-nombre {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.donde__firma-fuji { height: .72rem; width: auto; flex: none; }   /* nunca se encoge */

/* Escritorio: impreso en el cielo de la panorámica, a la derecha de la
   Cruz. `multiply` mezcla el verde y la tinta con el dibujo (como tinta
   sobre papel), así parece parte de la imagen y no un adhesivo encima.
   Las posiciones van en % porque la franja tiene la forma de la imagen. */
.donde__firma--cielo { display: none; }
@media (min-width: 900px) {
  .donde__firma--tarjeta { display: none; }
  .donde__firma--cielo {
    display: flex;
    position: absolute; z-index: 1;
    left: 53%; top: 15%;
    width: clamp(260px, 25vw, 400px);
    margin: 0; padding: 0; border: 0;
    gap: .55vw;
    color: #12301F;
    mix-blend-mode: multiply;
    opacity: .9;
  }
  .donde__firma--cielo .donde__firma-pie { padding-top: .55vw; border-top-width: 2px; }
  .donde__firma--cielo .donde__firma-nombre { font-size: clamp(.8rem, 1.05vw, 1.05rem); }
  .donde__firma--cielo .donde__firma-fuji { height: clamp(.68rem, .95vw, .95rem); }
}


/* =========================================================================
   28. Revelado: tabla de precios de la tienda, centrada
   ------------------------------------------------------------------------- */
.precios-tienda { max-width: 720px; margin: 4rem auto 0; text-align: center; }
.precios-tienda__texto {
  /* Subtítulo en verde: el aviso de descuentos tiene que verse. */
  margin-inline: auto;
  color: var(--verde);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
}   /* el párrafo tiene ancho máximo: sin esto se quedaba a la izquierda */
.precios-tienda .tabla-envoltorio { margin-top: var(--e-4); }
.precios-tienda th,
.precios-tienda td,
.precios-tienda td.numero { text-align: center; }
.precios-tienda tbody th { font-weight: 500; }
.precios-tienda__boton { margin-top: 1.5rem; }


/* =========================================================================
   29. Foto Regalo: la foto de cada categoría, con su forma
   -------------------------------------------------------------------------
   Antes todas iban en 4:3 y un vídeo vertical del móvil perdía media
   imagen. Ahora el recuadro toma la proporción de lo subido (--ar, con
   topes 0,62–1,9) y se coloca según su forma:
     vertical  → como un móvil, centrado y con tope de alto de pantalla;
     cuadrada  → hasta 520 px;
     apaisada  → todo el ancho de la columna. */
.ficha-categoria__foto {
  aspect-ratio: var(--ar, 4 / 3);
  width: 100%;
  justify-self: center;
}
.ficha-categoria__foto--vertical { width: min(100%, calc(min(74vh, 620px) * var(--ar))); }
.ficha-categoria__foto--cuadrada { width: min(100%, 520px); }
@media (max-width: 899px) {
  .ficha-categoria__foto--vertical { width: min(100%, calc(60vh * var(--ar))); }
}


/* =========================================================================
   30. Fluidez al desplazarse
   -------------------------------------------------------------------------
   · La cabecera va fija arriba: con `backdrop-filter` el navegador tenía
     que desenfocar EN CADA FOTOGRAMA todo lo que pasaba por debajo (fotos,
     vídeos), que era lo que hacía ir a tirones el desplazamiento. Fondo
     casi opaco del color del papel: a la vista, igual; sin coste.
   · El fondo del pie lleva cuatro filtros; en su propia capa se calcula
     una vez y las teselas que brillan encima no obligan a repintarlo. */
.cabecera::before {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: rgba(247, 246, 242, .96);
}
.mosaico,
.mosaico__teselas { will-change: transform; }