/* =========================================================
   LA CASA SECRETA DE PAPÁ NOEL · estilos.css
   Landing castellano · Temporada 2026
   ---------------------------------------------------------
   ÍNDICE
   01. Tipografías de marca (alojadas en /fuentes)
   02. Colores y medidas (CAMBIAR AQUÍ)
   03. Base
   04. Utilidades de maquetación
   05. Botones y llamadas
   06. Menú superior
   07. Bloque 1 · Cabecera
   08. Secciones y textos comunes
   09. Bloque 2 · Las Casas Secretas
   10. Bloque 3 · Medallón de la Casa Secreta
   11. Bloque 4 · Invitación y pergamino
   12. Bloque 5 · Visita guiada
   13. Bloque 6 · Crónica de las Casas
   14. Bloque 7 · Cierre
   15. Pie
   16. Botón fijo en móvil
   17. Aviso de cookies
   18. Animaciones
   19. Bloque 6 · Momentos mágicos (galería y visor)
   20. Bloque 7 · El Libro de la Casa (carrusel y reseñas)
   21. Bloque 10 · Instagram
   ========================================================= */


/* =========================================================
   01. TIPOGRAFÍAS DE MARCA
   Archivos .woff2 en la carpeta /fuentes (los entrega Raúl).
   ========================================================= */
@font-face {
  font-family: "Cinzel Decorative";
  src: url("../fuentes/cinzel-decorative-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fuentes/cinzel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fuentes/cinzel-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant-garamond-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tangerine";
  src: url("../fuentes/tangerine-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   02. COLORES Y MEDIDAS · Manual de Marca v1.1
   Para cambiar un color en toda la web, cámbialo SOLO aquí.
   ========================================================= */
:root {
  /* Paleta corporativa */
  --negro-profundo:   #070300;  /* fondo principal */
  --verde-esmeralda:  #0B4D3A;  /* botones y banda institucional */
  --rojo-freson:      #94230B;  /* énfasis muy puntual */
  --dorado-antiguo:   #DE8F2D;  /* títulos y ornamentos */
  --dorado-claro:     #E3AA55;  /* brillos y antetítulos */
  --bronce:           #985D1A;  /* marcos y filos */
  --nogal:            #6D4F1A;  /* madera, títulos sobre pergamino */
  --marfil:           #F3E8D2;  /* texto principal y pergamino */

  /* Derivados para la web */
  --fondo-alterno:    #120A03;  /* secciones alternas */
  --fondo-imagen:     #1A1006;  /* hueco de imagen mientras carga */
  --linea:            #2A1A08;  /* separadores */
  --texto-suave:      #E6DAC2;  /* texto secundario */
  --texto-tenue:      #CDBFA5;  /* notas y pie */
  --tinta:            #2A1A08;  /* texto sobre pergamino */
  --tinta-suave:      #3A2A10;

  /* Tipografías */
  --fuente-ceremonial: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --fuente-titulos:    "Cinzel", Georgia, "Times New Roman", serif;
  --fuente-texto:      "Cormorant Garamond", Garamond, Georgia, serif;
  --fuente-firma:      "Tangerine", "Cormorant Garamond", cursive;

  /* Medidas */
  --ancho-maximo:   1240px;
  --margen-lateral: 24px;
  --espacio-seccion: clamp(72px, 10vw, 112px);
  --altura-menu:    88px;
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-menu) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro-profundo);
  color: var(--marfil);
  font-family: var(--fuente-texto);
  font-size: 21px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--fondo-imagen); /* color de hueco si la imagen tarda */
}

a {
  color: var(--dorado-claro);
}
a:hover {
  color: var(--marfil);
}

strong {
  color: var(--dorado-claro);
  font-weight: 600;
}

h1, h2, h3 {
  margin: 0;
}

p {
  margin: 0;
}

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 2px solid var(--dorado-claro);
  outline-offset: 3px;
}

/* Enlace oculto «Saltar al contenido» (accesibilidad) */
.saltar-contenido {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--marfil);
  color: var(--negro-profundo);
  padding: 12px 18px;
  font-family: var(--fuente-titulos);
  font-size: 15px;
}
.saltar-contenido:focus {
  top: 16px;
}


/* =========================================================
   04. UTILIDADES DE MAQUETACIÓN
   ========================================================= */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding-left: var(--margen-lateral);
  padding-right: var(--margen-lateral);
}

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}


/* =========================================================
   05. BOTONES Y LLAMADAS
   ========================================================= */
.boton {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  padding: 18px 32px;
  border: 1px solid var(--dorado-antiguo);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.boton--principal {
  background: var(--verde-esmeralda);
  color: var(--marfil);
}
.boton--principal:hover {
  background: #0E5E47;
  color: var(--marfil);
}

.boton--claro {
  background: var(--marfil);
  color: var(--verde-esmeralda);
}
.boton--claro:hover {
  background: #FFFFFF;
  color: var(--verde-esmeralda);
}

.boton--secundario {
  background: transparent;
  color: var(--marfil);
  border-color: var(--bronce);
}
.boton--secundario:hover {
  border-color: var(--dorado-claro);
  color: var(--marfil);
}

.boton--pequeno {
  font-size: 14px;
  padding: 13px 22px;
}

/* Botón + nota «Te llevamos a la Oficina de Invitaciones…» */
.llamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.llamada__nota {
  font-style: italic;
  font-size: 17px;
  color: var(--texto-tenue);
}

.enlace-whatsapp {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--marfil);
  padding: 12px 8px;
  text-underline-offset: 5px;
}


/* =========================================================
   06. MENÚ SUPERIOR
   ========================================================= */
.menu {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 3, 0, 0.94);
  border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top, 0px);
}

.menu__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.menu__logo img {
  width: 190px;
  height: auto;
  background: none;
}

.menu__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.menu__acciones .enlace-whatsapp {
  text-decoration: none;
}

/* En móvil el botón de invitación del menú se oculta:
   lo sustituye el botón fijo inferior (apartado 16). */
@media (max-width: 720px) {
  .menu__logo img {
    width: 150px;
  }
  .menu__acciones .boton {
    display: none;
  }
}


/* =========================================================
   07. BLOQUE 1 · CABECERA
   ========================================================= */
.cabecera {
  position: relative;
  min-height: 780px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.cabecera__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* ajustar si la cara de Papá Noel queda cortada */
}

/* Oscurece la parte baja de la imagen para que el texto se lea */
.cabecera__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 3, 0, 0) 30%,
    rgba(7, 3, 0, 0.75) 62%,
    var(--negro-profundo) 100%
  );
}

.cabecera__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-bottom: 88px;
  text-align: center;
}

.cabecera__titulo {
  font-family: var(--fuente-ceremonial);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 70px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--dorado-antiguo);
}

.cabecera__descriptor {
  font-family: var(--fuente-titulos);
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}

.cabecera__claim {
  margin-top: 6px;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
}

.cabecera__narradora {
  max-width: 640px;
  font-size: 22px;
  color: var(--texto-suave);
}

.cabecera__promesa {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--marfil);
}

/* Franja de datos: idioma · ubicación · plazas */
.franja-datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  font-family: var(--fuente-titulos);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--dorado-claro);
}
.franja-datos li + li::before {
  content: "·";
  margin: 0 12px;
  color: var(--bronce);
}

.cabecera .llamada {
  margin-top: 10px;
}

.cabecera__seguir {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-style: italic;
  font-size: 18px;
  color: var(--dorado-claro);
  text-decoration: none;
}

@media (max-width: 720px) {
  .cabecera {
    min-height: 680px;
  }
  .cabecera__texto {
    padding-bottom: 64px;
  }
  .cabecera__narradora {
    font-size: 20px;
  }
  .franja-datos {
    flex-direction: column;
    gap: 2px;
  }
  .franja-datos li + li::before {
    content: none;
  }
}


/* =========================================================
   08. SECCIONES Y TEXTOS COMUNES
   ========================================================= */
.seccion {
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
}

.seccion--oscura {
  background: var(--fondo-alterno);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}
.texto--ancho {
  max-width: 760px;
  margin-bottom: 48px;
}
.texto--centrado {
  max-width: 680px;
  margin: 0 auto 48px;
  align-items: center;
  text-align: center;
}

.antetitulo {
  font-family: var(--fuente-titulos);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}

.seccion h2 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.15;
  color: var(--dorado-antiguo);
}

.entradilla {
  font-size: 24px;
  line-height: 1.5;
}

.destacado {
  font-style: italic;
  color: var(--texto-suave);
}

.nota {
  font-style: italic;
  color: var(--texto-tenue);
}


/* =========================================================
   09. BLOQUE 2 · LAS CASAS SECRETAS (mosaico de elfos)
   ========================================================= */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mosaico img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mosaico__grande {
  grid-column: span 2;
  aspect-ratio: 16 / 10 !important;
}


/* =========================================================
   10. BLOQUE 3 · MEDALLÓN DE LA CASA SECRETA DE BARCELONA
   Se apoya sobre la esquina de la foto de la Audiencia,
   como un sello de lacre.
   ========================================================= */
.foto-con-sello {
  position: relative;
}

.medallon {
  position: absolute;
  left: -32px;
  bottom: -32px;
  width: 40%;
  max-width: 200px;
  height: auto;
  background: none; /* sin recuadro de fondo: el PNG es transparente */
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

@media (max-width: 720px) {
  .medallon {
    left: 12px;
    bottom: -24px;
    width: 34%;
  }
  .foto-con-sello {
    margin-bottom: 24px;
  }
}


/* =========================================================
   11. BLOQUE 3 Y 4 · FOTO VERTICAL Y PERGAMINO
   ========================================================= */
.foto-vertical {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pergamino {
  margin-top: 56px;
  background: var(--marfil);
  color: var(--tinta);
  border: 1px solid var(--bronce);
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pergamino h3 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  text-align: center;
  color: var(--nogal);
}

.pergamino__intro,
.pergamino__cierre {
  max-width: 680px;
  margin: 0 auto;
  font-size: 22px;
  text-align: center;
  color: var(--tinta-suave);
}

.pergamino__cierre {
  font-style: italic;
}

.pergamino__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}

.pergamino__lista li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}

.pergamino__lista svg {
  color: var(--rojo-freson);
}

.pergamino .llamada__nota {
  color: #5A4520;
}

.pergamino .boton--principal {
  border-color: var(--bronce);
}


/* =========================================================
   12. BLOQUE 5 · VISITA GUIADA
   ========================================================= */
.rejilla-visita {
  display: grid;
  grid-template-columns: 1fr;             /* móvil: 1 columna */
  gap: 40px 28px;
}
@media (min-width: 600px) {
  .rejilla-visita {
    grid-template-columns: repeat(2, 1fr); /* tableta: 2 + 2 + 2 */
  }
}
@media (min-width: 960px) {
  .rejilla-visita {
    grid-template-columns: repeat(3, 1fr); /* ordenador: 3 + 3 */
  }
}

/* Botón al final de la visita */
.llamada--seccion {
  margin-top: 56px;
}

.estancia {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.estancia img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.estancia h3 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--dorado-claro);
}

.estancia p {
  font-size: 19px;
  color: var(--texto-suave);
}


/* =========================================================
   13. BLOQUE 6 · CRÓNICA DE LAS CASAS
   ========================================================= */
.rejilla-cronica {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}

.casa {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.casa img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 4px;
}

.casa__ano {
  font-family: var(--fuente-titulos);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--dorado-claro);
}

.casa h3 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.casa__lugar {
  font-size: 18px;
  color: var(--texto-tenue);
}


/* =========================================================
   14. BLOQUE 7 · CIERRE
   ========================================================= */
.cierre {
  padding: 0 var(--margen-lateral) var(--espacio-seccion);
}

.cierre__caja {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--verde-esmeralda);
  border: 1px solid var(--dorado-antiguo);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.cierre h2 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--marfil);
}

.cierre__caja > p:not(.firma):not(.firma__cargo) {
  max-width: 640px;
  font-size: 22px;
}

.cierre .llamada__nota {
  color: var(--texto-suave);
}

.firma {
  margin-top: 12px;
  font-family: var(--fuente-firma);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--dorado-claro);
}

.firma__cargo {
  font-family: var(--fuente-titulos);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}


/* =========================================================
   15. PIE
   ========================================================= */
.pie {
  border-top: 1px solid var(--linea);
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 36px;
  padding-bottom: 36px;
  font-size: 17px;
  color: var(--texto-tenue);
}

.pie__interior > p {
  font-family: var(--fuente-titulos);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.pie nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

.pie nav a,
.pie__cookies {
  color: var(--texto-tenue);
  padding: 10px 0;
}

.pie__cookies {
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Espacio para que el botón fijo no tape el pie en móvil */
@media (max-width: 720px) {
  .pie {
    padding-bottom: 84px;
  }
}


/* =========================================================
   16. BOTÓN FIJO EN MÓVIL
   Se esconde mientras se ve la cabecera (lo controla main.js).
   ========================================================= */
.boton-fijo {
  display: none;
}

@media (max-width: 720px) {
  .boton-fijo {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    background: var(--verde-esmeralda);
    color: var(--marfil);
    border: 1px solid var(--dorado-antiguo);
    border-radius: 2px;
    padding: 16px 20px;
    text-align: center;
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s ease;
  }
  /* Mientras se ve la cabecera (que ya tiene su botón), se esconde.
     Si main.js falta o falla, el botón se muestra siempre. */
  .boton-fijo.en-cabecera {
    transform: translateY(160%);
  }
}


/* =========================================================
   17. AVISO DE COOKIES
   ========================================================= */
.aviso-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  max-width: 520px;
  margin-left: auto;
  background: var(--fondo-alterno);
  border: 1px solid var(--bronce);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--texto-suave);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.aviso-cookies[hidden] {
  display: none;
}

.aviso-cookies__titulo {
  font-family: var(--fuente-titulos);
  font-size: 17px;
  font-weight: 600;
  color: var(--dorado-claro);
}

.aviso-cookies__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* =========================================================
   18. ANIMACIONES
   Un único momento orquestado: la cabecera aparece al cargar
   y el pergamino se despliega al llegar a él. Nada más.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Entrada de la cabecera al cargar la página */
  .js .cabecera__texto > * {
    animation: aparecer 0.9s ease both;
  }
  .js .cabecera__titulo      { animation-delay: 0.15s; }
  .js .cabecera__descriptor  { animation-delay: 0.35s; }
  .js .cabecera__claim       { animation-delay: 0.55s; }
  .js .cabecera__narradora        { animation-delay: 0.85s; }
  .js .cabecera .llamada     { animation-delay: 1.15s; }
  .js .cabecera__texto > .enlace-whatsapp { animation-delay: 1.25s; }
  .js .cabecera__seguir      { animation-delay: 1.6s; }

  /* El pergamino se despliega.
     main.js añade .por-desplegar al cargar y .esta-abierto al llegar a él.
     Si main.js falta o falla, el pergamino se ve siempre. */
  .pergamino.por-desplegar {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .pergamino.por-desplegar.esta-abierto {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Quien tiene activado «reducir movimiento» lo ve todo sin animar */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .boton-fijo {
    transition: none;
  }
}


/* =========================================================
   19. BLOQUE 6 · MOMENTOS MÁGICOS (galería y visor)
   ========================================================= */
.galeria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* móvil: 2 columnas */
  gap: 12px;
}
@media (min-width: 720px) {
  .galeria {
    grid-template-columns: repeat(3, 1fr); /* ordenador: 3 × 3 */
    gap: 20px;
  }
}

.galeria__enlace {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}

.galeria__enlace img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.galeria__enlace:hover img {
  transform: scale(1.04);
}

/* Visor a pantalla completa */
.visor {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 16px calc(56px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: rgba(7, 3, 0, 0.96);
  color: var(--marfil);
}
.visor[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.visor::backdrop {
  background: rgba(7, 3, 0, 0.96);
}

.visor__imagen {
  max-width: 100%;
  max-height: calc(100% - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: none;
}

.visor__pie {
  font-style: italic;
  font-size: 18px;
  color: var(--texto-suave);
  text-align: center;
}

.visor__boton {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 1px solid var(--bronce);
  border-radius: 50%;
  background: rgba(18, 10, 3, 0.85);
  color: var(--marfil);
  font-family: var(--fuente-titulos);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.visor__boton:hover {
  border-color: var(--dorado-claro);
}
.visor__cerrar {
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
}
.visor__anterior,
.visor__siguiente {
  top: 50%;
  transform: translateY(-50%);
}
.visor__anterior  { left: 16px; }
.visor__siguiente { right: 16px; }

@media (max-width: 720px) {
  /* En móvil las flechas bajan para no tapar la foto (también se puede deslizar) */
  .visor__anterior,
  .visor__siguiente {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
}


/* =========================================================
   20. BLOQUE 7 · EL LIBRO DE LA CASA (carrusel y reseñas)
   El carrusel usa el desplazamiento nativo del navegador:
   en el móvil se pasa con el dedo aunque falle el JavaScript.
   ========================================================= */
.carrusel {
  --por-vista: 1.15;               /* móvil: 1 reseña y se intuye la siguiente */
  --separacion: 16px;
}
@media (min-width: 720px) {
  .carrusel { --por-vista: 2; --separacion: 24px; }
}
@media (min-width: 1040px) {
  .carrusel { --por-vista: 3; }   /* ordenador: 3 reseñas a la vez */
}

.carrusel__pista {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  gap: var(--separacion);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.resena-libro {
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * var(--separacion)) / var(--por-vista));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resena-libro__foto {
  display: block;
  cursor: zoom-in;
  border: 1px solid var(--bronce);
}

.resena-libro__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.resena-libro__texto {
  margin: 0;
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--marfil);
}

.resena__origen {
  font-family: var(--fuente-titulos);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--dorado-claro);
}

.carrusel__controles {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.carrusel__flecha {
  width: 48px;
  height: 48px;
  border: 1px solid var(--bronce);
  border-radius: 50%;
  background: transparent;
  color: var(--marfil);
  font-family: var(--fuente-titulos);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.carrusel__flecha:hover {
  border-color: var(--dorado-claro);
}
.carrusel__flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

.carrusel__puntos {
  display: flex;
  gap: 8px;
}
.carrusel__puntos span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bronce);
  transition: background-color 0.3s ease;
}
.carrusel__puntos span.es-actual {
  background: var(--dorado-claro);
}
/* Con muchas reseñas, contador de texto en lugar de puntos */
.carrusel__puntos.es-contador {
  min-width: 110px;
  justify-content: center;
  font-family: var(--fuente-titulos);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

/* Comentarios de Instagram en tarjetas */
.opiniones {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.opinion {
  border: 1px solid var(--bronce);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.opinion__icono {
  color: var(--dorado-claro);
}

.opinion blockquote {
  margin: 0;
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--marfil);
}

.opinion__autor {
  font-family: var(--fuente-titulos);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--dorado-claro);
}


/* =========================================================
   21. BLOQUE 10 · INSTAGRAM
   ========================================================= */
.instagram {
  border-top: 1px solid var(--linea);
}

.instagram h2 {
  font-size: clamp(24px, 3vw, 36px);
  word-break: break-word;
}

.instagram__fotos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* móvil: 3 × 2 */
  gap: 8px;
}
@media (min-width: 720px) {
  .instagram__fotos {
    grid-template-columns: repeat(6, 1fr); /* ordenador: una fila de 6 */
    gap: 12px;
  }
}

.instagram__fotos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.instagram .boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}