/* ====================================================================
   ARCHIVO: styles.css
   PROYECTO: El Baúl de la Abuela – Fotografía a la Antigua
   FUENTE DE DISEÑO: Figma → WEB_baul_dela_abuela
     • Colores    → frame "Colores.png" del design system
     • Tipografía → frame "Tipografía.png" del design system
     • Layout     → frames "prototipo compu color" (escritorio)
                          "prototipo celu color"   (móvil)

   ÍNDICE:
     1.  VARIABLES (tokens del design system)
     2.  RESET Y BASE
     3.  NAVBAR — escritorio
     4.  NAVBAR — hamburguesa y menú móvil
     5.  HERO — sección carrusel
     6.  CARRUSEL — slides, estados y botones
     7.  CARRUSEL — puntos indicadores (dots)
     8.  CATEGORÍAS — grid de 3 tarjetas
     9.  FOOTER — logo y foto de la abuela
     10. WHATSAPP FAB — botón flotante móvil
     11. ANIMACIONES
     12. ACCESIBILIDAD
     13. RESPONSIVE — tablet (769px–1024px)
     14. RESPONSIVE — móvil (≤768px)
==================================================================== */


/* ====================================================================
   1. VARIABLES — TOKENS DEL DESIGN SYSTEM
   ──────────────────────────────────────────────────────────────────
   Fuente: frame "Colores" del archivo de Figma.
   Organizado exactamente igual que la paleta del diseño:
     • Primario  → tonos cálidos marrón/dorado (navbar, botones, bordes)
     • Secundario → tonos rojos oscuros (navbar fondo, footer, overlays)
     • Terceario → tonos oscuros tierra (placeholders, fondos secundarios)
     • Neutros   → grises y blancos (texto, fondos)

   Fuente: frame "Tipografía" del archivo de Figma.
     • --font-display → Lusitana  (títulos, labels de tarjetas, footer)
     • --font-body    → Montserrat (nav links, subtítulos, body)

   El resto de variables (espaciado, radios, sombras, transiciones)
   son tokens de sistema para mantener consistencia en toda la UI.
==================================================================== */
:root {

  /* ── PALETA PRIMARIO (marrones/dorados) ─────────────────────── */
  --color-primario-800: #886544;
  /* Más oscuro → detalles de énfasis */
  --color-primario-700: #B3855A;
  --color-primario-600: #C29061;
  --color-primario-500: #D19B69;
  --color-primario-400: #DBA36E;
  /* Borde del logo navbar y footer portrait */
  --color-primario-300: #E3A871;
  /* Color de links hover en navbar */
  --color-primario-200: #E8B88C;
  --color-primario-100: #ECC6A4;
  --color-primario-50: #D6BFAA;
  /* 50% opacidad */

  /* ── PALETA SECUNDARIO (rojos oscuros) ──────────────────────── */
  --color-secundario-800: #400D0A;
  /* Fondo del navbar y overlay de tarjetas */
  --color-secundario-700: #8C1D17;
  /* Fondo del footer y hover del navbar */
  --color-secundario-600: #9A3A35;
  --color-secundario-500: #A24945;
  --color-secundario-400: #AF6460;
  --color-secundario-300: #D18B84;
  --color-secundario-200: #DDABA8;
  --color-secundario-100: #E6C3C1;
  --color-secundario-50: #C38B8B;
  /* 50% opacidad */

  /* ── PALETA TERCEARIO (tierras oscuras) ─────────────────────── */
  --color-terceario-800: #120B03;
  --color-terceario-700: #271605;
  --color-terceario-600: #3C2D1E;
  /* Fondo del logo-img placeholder */
  --color-terceario-500: #4D3F32;
  /* Fondo del portrait placeholder */
  --color-terceario-400: #605448;
  /* Fondo de slides y placeholders */
  --color-terceario-300: #6C6156;
  --color-terceario-200: #796F65;
  --color-terceario-100: #8C847B;
  --color-terceario-50: #90887F;
  /* 50% opacidad */

  /* ── NEUTROS (texto y superficies) ──────────────────────────── */
  --color-titulo: #080009;
  /* Títulos principales */
  --color-subtitulo: #222531;
  /* Subtítulos */
  --color-body: #444951;
  /* Texto de cuerpo */
  --color-activo: #444951;
  /* Estado activo (igual que body) */
  --color-gris-05: #888E91;
  /* Texto deshabilitado / predeterminado */
  --color-gris-06: #CCD0CF;
  /* Bordes suaves */
  --color-gris-07: #EFEFEF;
  /* Texto claro en fondos oscuros / button text */
  --color-blanco: #FFFFFF;

  /* ── COLOR DE FONDO HERO ─────────────────────────────────────── */
  /* Extraído del fondo crema del prototipo de Figma */
  --color-bg-hero: #E8D9C4;

  /* ── TIPOGRAFÍAS (Figma → Tipografía.png) ───────────────────── */
  --font-display: 'Lusitana', Georgia, serif;
  /* Títulos, labels */
  --font-body: 'Montserrat', Arial, sans-serif;
  /* Navegación, cuerpo */

  /* ── SISTEMA DE ESPACIADO ────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* ── RADIOS DE BORDE ─────────────────────────────────────────── */
  --radius-card: 20px;
  /* Tarjetas y slides del carrusel */
  --radius-full: 9999px;
  /* Elementos circulares (logo, portrait, dots) */

  /* ── SOMBRAS ─────────────────────────────────────────────────── */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.28);

  /* ── TRANSICIÓN BASE ─────────────────────────────────────────── */
  --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ====================================================================
   2. RESET Y BASE
   ──────────────────────────────────────────────────────────────────
   Reset mínimo siguiendo las guías de Google para HTML/CSS:
   - box-sizing en todos los elementos
   - Elimina márgenes y paddings del navegador
   - Scroll suave global
   - Tipografía base desde las variables del design system
==================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Base para cálculos rem */
}

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background-color: var(--color-blanco);
  line-height: 1.6;
  overflow-x: hidden;
  /* Evita scroll horizontal por el carrusel */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--color-bg-hero);
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}


/* ====================================================================
   3. NAVBAR — ESCRITORIO
   ──────────────────────────────────────────────────────────────────
   Origen Figma: barra superior en "prototipo compu color"
     • Fondo: --color-secundario-800 (#400D0A) → rojo muy oscuro
     • Logo circular a la izquierda con borde dorado
     • Links de navegación a la derecha separados por líneas verticales
     • Altura fija 64px, sticky para que siga al hacer scroll
==================================================================== */

/* Barra completa */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Por encima de todo el contenido */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-secundario-800);
  padding: 0 var(--space-lg) 0 8px;
  height: 80px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Enlace que envuelve el logo */
.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Contenedor del logo */
.navbar__logo-img {
  height: 150px;
  width: auto;
  display: flex;
  align-items: center;
}

/* Imagen real dentro del logo */
.navbar__logo-img img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Lista de links de navegación (solo escritorio) */
.navbar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
  transform: translateX(-80px);
  /* Los links se tocan, la separación la dan los bordes */
}

/* Cada link del nav escritorio
   Origen Figma: links en la barra superior con separadores verticales */
.navbar__nav-link {
  font-family: var(--font-display);
  font-size: 16px;
  /* 15px */
  font-weight: 500;
  /* lusitana Medium */
  color: var(--color-gris-07);
  /* #EFEFEF — texto claro sobre fondo oscuro */
  padding: 0 28px;
  height: 64px;
  /* Igual a la barra para que el borde llegue de extremo a extremo */
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  /* Separador sutil */
  transition: background-color var(--transition-base),
    color var(--transition-base);
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* No rompe en dos líneas */
}

/* El primer link también tiene borde izquierdo */
.navbar__nav-link:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* Estado hover y foco del link */
.navbar__nav-link:hover,
.navbar__nav-link:focus-visible {
  background-color: var(--color-secundario-700);
  /* Rojo un poco más claro */
  color: var(--color-primario-300);
  /* Dorado */
  outline: none;
}

.navbar__nav-link:focus-visible {
  outline: 2px solid var(--color-primario-300);
  outline-offset: -2px;
}


/* ====================================================================
   4. NAVBAR — HAMBURGUESA Y MENÚ MÓVIL
   ──────────────────────────────────────────────────────────────────
   Origen Figma: "prototipo celu color" → menú apilado verticalmente
   con las 4 opciones de navegación.
   El botón hamburguesa solo se muestra en móvil (media query sección 14).
==================================================================== */

/* Botón ☰ — oculto en escritorio, visible en móvil */
.navbar__hamburger {
  display: none;
  /* Se activa en @media móvil */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 6px;
  transition: background-color var(--transition-base);
}

.navbar__hamburger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Las 3 líneas del ícono ☰ */
.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-gris-07);
  border-radius: 2px;
  transition: transform var(--transition-base),
    opacity var(--transition-base);
}

/* Animación ☰ → ✕ cuando está abierto (clase .is-open añadida por JS) */
.navbar__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú desplegable móvil — oculto por defecto */
.navbar__mobile-menu {
  display: none;
  position: absolute;
  /* Relativo a .navbar (position:sticky) */
  top: 64px;
  /* Exactamente debajo de la barra */
  left: 0;
  right: 0;
  background: var(--color-secundario-800);
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* Se muestra cuando JS añade la clase .is-open */
.navbar__mobile-menu.is-open {
  display: flex;
}

/* Espaciado en el <li> para que el hover no abarque toda la fila */
.navbar__mobile-menu li {
  padding: 8px 32px;
}

/* Cada link — solo del ancho de su texto */
.navbar__mobile-link {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-gris-07);
  display: inline;
  padding: 0;
  border-bottom: none;
  transition: color var(--transition-base),
    font-weight var(--transition-base);
  letter-spacing: 0.02em;
}

.navbar__mobile-link:hover {
  color: var(--color-primario-300);
  font-weight: 700;
}


/* ====================================================================
   5. HERO — SECCIÓN DEL CARRUSEL
   ──────────────────────────────────────────────────────────────────
   Origen Figma: zona superior crema de ambos prototipos.
   Fondo: --color-bg-hero (#E8D9C4) → crema envejecido
   Contiene el carrusel centrado con padding generoso.
==================================================================== */
.hero {
  background-color: var(--color-bg-hero);
  padding: 48px var(--space-lg) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  min-height: 480px;
  animation: fadeInUp 0.6s ease both;
  /* Entrada suave al cargar */
}

/* Contenedor que limita el ancho del carrusel */
.carousel-wrapper {
  width: 100%;
  max-width: 1200px;
  position: relative;
}


/* ====================================================================
   6. CARRUSEL — SLIDES, ESTADOS Y BOTONES
   ──────────────────────────────────────────────────────────────────
   Origen Figma: carrusel de imágenes en ambos prototipos.
   El slide central (active) es grande y al 100% de opacidad.
   Los laterales (prev/next) son más pequeños y al 55% de opacidad.
   Los slides ocultos (hidden-*) están fuera del área visible.

   La lógica de posición la controla JS mediante el atributo data-state.
   Este CSS interpreta ese atributo con selectores de atributo.
==================================================================== */

/* Ventana visible del carrusel */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 380px;
}

/* ── Botones ← → ─────────────────────────────────────────────── */
.carousel__btn {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: rgba(64, 13, 10, 0.75);
  /* --color-secundario-800 con alfa */
  border: 2px solid var(--color-primario-400);
  /* Borde dorado */
  color: var(--color-primario-200);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base),
    transform var(--transition-base);
  backdrop-filter: blur(4px);
}

.carousel__btn:hover {
  background-color: var(--color-secundario-700);
  transform: translateY(-50%) scale(1.08);
}

.carousel__btn--prev {
  left: calc(50% - 347px);
}

.carousel__btn--next {
  right: calc(50% - 347px);
}

/* ── Track: contenedor de slides ─────────────────────────────── */
.carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Slide base — aplica a todos ─────────────────────────────── */
.carousel__slide {
  position: absolute;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  /* Todas las propiedades visuales transicionan suavemente */
  transition:
    transform var(--transition-base),
    opacity var(--transition-base),
    width var(--transition-base),
    height var(--transition-base);
}

/* ── Estado: ACTIVO (slide central, grande y opaco) ──────────── */
.carousel__slide[data-state="active"] {
  width: 589px;
  height: 336px;
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
}

/* ── Estado: PREV (slide inmediatamente a la izquierda) ──────── */
.carousel__slide[data-state="prev"] {
  width: 360px;
  height: 204px;
  transform: translateX(-560px);
  opacity: 0.55;
  z-index: 2;
}

/* ── Estado: NEXT (slide inmediatamente a la derecha) ────────── */
.carousel__slide[data-state="next"] {
  width: 360px;
  height: 204px;
  transform: translateX(560px);
  opacity: 0.55;
  z-index: 2;
}

/* ── Estado: OCULTO IZQUIERDA (fuera del área visible) ───────── */
.carousel__slide[data-state="hidden-left"] {
  width: 200px;
  height: 113px;
  transform: translateX(-900px) scale(0.85);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Estado: OCULTO DERECHA (fuera del área visible) ─────────── */
.carousel__slide[data-state="hidden-right"] {
  width: 200px;
  height: 113px;
  transform: translateX(900px) scale(0.85);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Imagen real dentro del slide ────────────────────────────── */
.carousel__img-placeholder {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel__img-placeholder span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 0 var(--space-md);
}

/* ── Overlay: degradado en la base del slide ─────────────────── */
/* Origen Figma: texto sobre la imagen con degradado oscuro abajo */
.carousel__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(to top,
      rgba(64, 13, 10, 0.85) 0%,
      transparent 100%);
  pointer-events: none;
}

/* Texto más pequeño en slides laterales */
.carousel__slide[data-state="prev"] .carousel__overlay-text,
.carousel__slide[data-state="next"] .carousel__overlay-text {
  font-size: 1rem;
}

/* Etiqueta en la parte inferior del slide */
.carousel__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px var(--space-md);
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primario-100);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  letter-spacing: 0.02em;
}


/* ====================================================================
   7. CARRUSEL — PUNTOS INDICADORES (DOTS)
   ──────────────────────────────────────────────────────────────────
   Puntos debajo del carrusel que indican el slide activo.
   El dot activo se alarga horizontalmente como pastilla.
   Generados dinámicamente por JS.
==================================================================== */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-primario-300);
  opacity: 0.35;
  cursor: pointer;
  border: none;
  padding: 0;
  /* Animación de expansión al activarse */
  transition: opacity var(--transition-base),
    width var(--transition-base),
    background-color var(--transition-base);
}

/* Dot activo: más ancho y color secundario */
.carousel__dot.is-active {
  width: 28px;
  /* Se expande horizontalmente */
  opacity: 1;
  background-color: var(--color-secundario-700);
}


/* ====================================================================
   8. CATEGORÍAS — GRID DE 3 TARJETAS
   ──────────────────────────────────────────────────────────────────
   Origen Figma: fila de 3 tarjetas bajo el carrusel en ambos
   prototipos. La tarjeta central (Giftcard) es más alta y ancha.
   Las laterales (Familias, Niños y Bebés) son más pequeñas.
   Fondo: mismo crema del hero (--color-bg-hero).
==================================================================== */

/* Sección contenedora */
.categories {
  background-color: var(--color-bg-hero);
  padding: 0 var(--space-lg) 56px;
  display: flex;
  justify-content: center;
}

/* Grid de 3 columnas: lados pequeños, centro grande */
.categories__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  /* Centro 40% más ancho que los lados */
  gap: var(--space-lg);
  width: 100%;
  max-width: 1200px;
  align-items: center;
  /* Centra verticalmente las tarjetas de diferente alto */
}

/* Tarjeta base */
.category-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
    box-shadow var(--transition-base);
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Tarjeta lateral (Familias / Niños y Bebés) */
.category-card--side {
  height: 240px;
}

/* Tarjeta central (Giftcard) — más alta */
.category-card--center {
  height: 320px;
}

/* Contenedor que ocupa 100% de la tarjeta */
.category-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Imagen real con filtro sepia (fotografía antigua) */
.category-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.5) contrast(1.05);
  /* Efecto vintage, fiel al estilo del sitio */
}


.category-card__placeholder span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 0 var(--space-sm);
}

/* Degradado oscuro en la base de la tarjeta */
.category-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to top,
      rgba(64, 13, 10, 0.7) 0%,
      transparent 60%);
}

/* Nombre de la categoría sobre la imagen */
.category-card__label {
  font-family: var(--font-display);
  /* Lusitana — igual que en Figma */
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-blanco);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

/* El label de la tarjeta central es más grande */
.category-card--center .category-card__label {
  font-size: 1.75rem;
  text-align: right;
  width: 100%;
}


/* ====================================================================
   9. FOOTER — LOGO Y FOTO DE LA ABUELA
   ──────────────────────────────────────────────────────────────────
   Origen Figma: bloque inferior rojo oscuro en ambos prototipos.
     • Fondo: --color-secundario-700 (#8C1D17) — rojo oscuro
     • Izquierda: foto circular de la abuela con borde dorado y
       anillo decorativo interior
     • Derecha: logo grande del sitio con tagline
   En escritorio: en fila horizontal.
   En móvil: apilado verticalmente (ver sección responsive).
==================================================================== */

/* Sección footer completa */
.site-footer {
  background: var(--color-secundario-700);
  padding: 56px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  /* Permite el apilado en pantallas pequeñas */
  flex-grow: 1;
}

/* ── Foto circular de la abuela ──────────────────────────────── */
/* Origen Figma: círculo con borde dorado doble en esquina izquierda */
.footer__portrait {
  width: 308px;
  height: 308px;
}

/* Imagen real de la abuela */
.footer__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.footer__portrait-placeholder span {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 0 var(--space-sm);
}

/* ── Logo grande del footer ──────────────────────────────────── */
/* Origen Figma: logotipo grande a la derecha del footer */
.footer__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* Contenedor del logo — se ajusta al ancho de la imagen */
.footer__logo-img {
  max-width: 800px;
  width: 100%;
}

/* Imagen real del logo footer */
.footer__logo-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}


/* Nombre de la marca — Lusitana Bold, color dorado */
.footer__brand-name {
  font-family: var(--font-display);
  /* Lusitana */
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primario-400);
  /* Dorado */
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

/* Tagline — Montserrat, versales espaciadas */
.footer__tagline {
  font-family: var(--font-body);
  /* Montserrat */
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primario-200);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}


/* ====================================================================
   10. WHATSAPP FAB — BOTÓN FLOTANTE MÓVIL
   ──────────────────────────────────────────────────────────────────
   Origen Figma: "prototipo celu color" → botón verde flotante
   en la esquina inferior derecha de la pantalla móvil.
   Se oculta en escritorio y tablet, solo visible en móvil.
==================================================================== */
.whatsapp-fab {
  display: block;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 900;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-base);
}

.whatsapp-fab:hover {
  transform: scale(1.08);
}

.whatsapp-fab svg {
  width: 60px;
  height: 60px;
}


/* ====================================================================
   11. ANIMACIONES
   ──────────────────────────────────────────────────────────────────
   fadeInUp: entrada suave del hero al cargar la página.
   Se aplica en .hero con animation-delay 0.
==================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ====================================================================
   12. ACCESIBILIDAD
   ──────────────────────────────────────────────────────────────────
   - :focus-visible para navegación por teclado
   - .sr-only para texto solo para lectores de pantalla
==================================================================== */
:focus-visible {
  outline: 3px solid var(--color-primario-400);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ====================================================================
   13. RESPONSIVE — TABLET (769px – 1024px)
   ──────────────────────────────────────────────────────────────────
   Ajustes intermedios para pantallas tipo iPad o tablet Android.
   El navbar sigue mostrando links de escritorio.
   El carrusel y las tarjetas se reducen ligeramente.
==================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Carrusel tablet: slides un poco más pequeños */
  .carousel__slide[data-state="active"] {
    width: 340px;
    height: 320px;
  }

  .carousel__slide[data-state="prev"] {
    width: 220px;
    height: 240px;
    transform: translateX(-280px);
  }

  .carousel__slide[data-state="next"] {
    width: 220px;
    height: 240px;
    transform: translateX(280px);
  }

  /* Tarjetas tablet */
  .categories__grid {
    gap: var(--space-md);
  }

  .category-card--side {
    height: 200px;
  }

  .category-card--center {
    height: 270px;
  }
}


/* ====================================================================
   14. RESPONSIVE — MÓVIL (≤ 768px)
   ──────────────────────────────────────────────────────────────────
   Origen Figma: "prototipo celu color"
     • Navbar: logo centrado, hamburguesa visible, links ocultos
     • Carrusel: slides más pequeños, botones en extremos
     • Categorías: 3 columnas compactas horizontales
     • Footer: foto arriba, logo abajo, centrados
     • WhatsApp FAB visible
==================================================================== */
@media (max-width: 768px) {

  /* ── Navbar móvil ─────────────────────────────────────────────
     Origen Figma: navbar celu con logo centrado y menú desplegable */
  .navbar {
    padding: 0 var(--space-md);
    position: relative;
    /* Para que el menú absoluto sea relativo al navbar */
  }

  /* Ocultar links de escritorio */
  .navbar__nav {
    display: none;
  }

  /* Mostrar el botón hamburguesa */
  .navbar__hamburger {
    display: flex;
  }

  /* ── Hero móvil ──────────────────────────────────────────────── */
  .hero {
    padding: 56px var(--space-md) 40px;
    min-height: auto;
  }

  /* ── Carrusel móvil ───────────────────────────────────────────
     Origen Figma: carrusel celu con imagen central destacada
     y las laterales parcialmente visibles */
  .carousel {
    height: 360px;
  }

  .carousel__slide[data-state="active"] {
    width: 300px;
    height: 300px;
  }

  .carousel__slide[data-state="prev"] {
    width: 180px;
    height: 180px;
    transform: translateX(-260px);
  }

  .carousel__slide[data-state="next"] {
    width: 180px;
    height: 180px;
    transform: translateX(260px);
  }

  .carousel__slide[data-state="hidden-left"] {
    transform: translateX(-500px) scale(0.85);
  }

  .carousel__slide[data-state="hidden-right"] {
    transform: translateX(500px) scale(0.85);
  }

  /* Botones alineados al centro vertical del carrusel */
  .carousel__btn--prev {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel__btn--next {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel__btn--prev:hover,
  .carousel__btn--next:hover {
    transform: translateY(-50%) scale(1.08);
  }

  .carousel__overlay-text {
    font-size: 1.1rem;
  }

  /* ── Categorías móvil ────────────────────────────────────────
     Origen Figma: 3 tarjetas horizontales compactas */
  .categories {
    padding: 0 var(--space-md) 40px;
  }

  .categories__grid {
    grid-template-columns: 1fr 1.4fr 0.8fr;
    /* Ajuste proporcional para móvil */
    gap: var(--space-sm);
  }

  .category-card--side {
    height: 160px;
  }

  .category-card--center {
    height: 210px;
  }

  .category-card__label {
    font-size: 0.9rem;
  }

  .category-card--center .category-card__label {
    font-size: 1.1rem;
  }

  /* ── Footer móvil ────────────────────────────────────────────
     Origen Figma: foto encima y logo debajo, centrados */
  .site-footer {
    padding: 40px var(--space-md);
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .footer__portrait {
    width: 130px;
    height: 130px;
  }

  .footer__brand-name {
    font-size: 1.75rem;
  }

  /* ── WhatsApp FAB: visible solo en móvil ─────────────────────
     Origen Figma: "prototipo celu color" → botón verde flotante */
  .whatsapp-fab {
    display: block;
  }
}

/* ====================================================================
   15. PÁGINA SESIONES — BANNER WHATSAPP
   Origen Figma: sesiones.png y sesiones__1_.png
   Sección superior roja oscura con ícono WhatsApp + botón píldora dorado.
==================================================================== */

.sesiones-banner {
  background: linear-gradient(to right, #8C1D17, #9A3A35, #8C1D17);
  padding: 32px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.sesiones-banner__icon {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform var(--transition-base);
}

.sesiones-banner__icon:hover {
  transform: scale(1.08);
}

/* Botón píldora dorado — Lusitana Bold, fondo --color-primario-500 */
.sesiones-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-titulo);
  background-color: var(--color-primario-500);
  padding: 20px 48px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
}

.sesiones-banner__btn:hover {
  background-color: var(--color-primario-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sesiones-banner__btn:active {
  transform: translateY(0);
}

/* ====================================================================
   16. PÁGINA SESIONES — SECCIÓN CARRUSEL
   Origen Figma: zona crema con carrusel de 6 imágenes.
   Reutiliza todas las clases .carousel__* del home. Solo agrega
   el contenedor específico de esta página.
==================================================================== */

.sesiones-carousel-section {
  background-color: var(--color-bg-hero);
  padding: 48px var(--space-lg) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ====================================================================
   17. PÁGINA SESIONES — BOTÓN "REVISA NUESTROS VALORES"
   Origen Figma: botón píldora beige centrado bajo el carrusel.
   Al hacer clic va a precios.html.
==================================================================== */

.sesiones-valores {
  background-color: var(--color-bg-hero);
  padding: 8px var(--space-lg) 64px;
  display: flex;
  justify-content: center;
}

.sesiones-valores__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-titulo);
  background-color: var(--color-primario-500);
  padding: 22px 64px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sesiones-valores__btn:hover {
  background-color: var(--color-primario-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sesiones-valores__btn:active {
  transform: translateY(0);
}

@media (min-width: 1025px) {
  .sesiones-banner__btn {
    font-size: 2.2rem;
    padding: 28px 72px;
  }

  .whatsapp-fab {
    width: 90px;
    height: 90px;
  }

  .whatsapp-fab svg {
    width: 90px;
    height: 90px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sesiones-banner__btn {
    font-size: 1.25rem;
    padding: 18px 36px;
  }

  .sesiones-banner__icon {
    width: 70px;
    height: 70px;
  }

  .sesiones-valores__btn {
    font-size: 1.25rem;
    padding: 18px 48px;
  }
}

@media (max-width: 768px) {
  .sesiones-banner {
    padding: 28px var(--space-md);
    gap: var(--space-md);
  }

  .sesiones-banner__btn {
    font-size: 1.75rem;
    padding: 20px 36px;
    width: 100%;
    max-width: 340px;
  }

  .sesiones-banner__icon {
    width: 90px;
    height: 90px;
  }

  .sesiones-carousel-section {
    padding: 32px var(--space-md) 32px;
  }

  .sesiones-valores {
    padding: 8px var(--space-md) 48px;
  }

  .sesiones-valores__btn {
    font-size: 1.4rem;
    padding: 22px 40px;
    width: 100%;
    max-width: 360px;
    white-space: normal;
    text-align: center;
  }
}


/* ====================================================================
   18. TEXTURA DE PAPEL — OVERLAY SOBRE FONDOS CREMA
   ──────────────────────────────────────────────────────────────────
   Archivo: textura-papel.jpg (misma carpeta que index.html)
   Se superpone encima del color --color-bg-hero al 30% de opacidad.
   isolation: isolate crea un contexto de apilamiento local para que
   z-index: -1 en ::before quede entre el fondo y el contenido.
==================================================================== */

.hero,
.categories,
.sesiones-carousel-section,
.sesiones-valores,
.precios-planes {
  position: relative;
  isolation: isolate;
}

.hero::before,
.categories::before,
.sesiones-carousel-section::before,
.sesiones-valores::before,
.precios-planes::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('textura-papel.jpg');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}


/* ====================================================================
   19. PÁGINA PRECIOS — SECCIÓN ATENCIÓN
==================================================================== */

.precios-atencion {
  background: linear-gradient(to right, #8C1D17, #9A3A35, #8C1D17);
  padding: 40px var(--space-lg);
}

/* Layout base — se sobreescribe con el flex en sección 22 */
.precios-atencion__inner {
  max-width: 980px;
  margin: 0 auto;
}

.precios-atencion__titulo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primario-200);
  margin-bottom: var(--space-md);
}

.precios-atencion__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.precios-atencion__lista li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.precios-atencion__lista li::before {
  content: '•';
  color: var(--color-primario-300);
  position: absolute;
  left: 0;
  font-size: 1.1rem;
  line-height: 1.4;
}


/* ====================================================================
   20. PÁGINA PRECIOS — SECCIÓN PLANES
==================================================================== */

.precios-planes {
  background-color: var(--color-bg-hero);
  padding: 48px var(--space-lg) 72px;
}

.precios-planes__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.precios-planes__titulo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-titulo);
  text-align: center;
  margin-bottom: var(--space-sm);
}


/* ── Tarjeta de grupo de sesión ──────────────────────────────── */
.precio-grupo,
.precio-marcos {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: rgba(255, 255, 255, 0.65);
}

.precio-grupo__cabecera {
  background: linear-gradient(to right, #8C1D17, #9A3A35, #8C1D17);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.precio-grupo__icono {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primario-400);
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.precio-grupo__titulo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primario-100);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.precio-grupo__subtitulo {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(236, 198, 164, 0.8);
}


/* ── Fila de formato dentro de una tarjeta ───────────────────── */
.precio-grupo__cuerpo {
  display: flex;
  flex-direction: column;
}

.precio-formato {
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.precio-formato:last-child {
  border-bottom: none;
}

.precio-formato__nombre {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-subtitulo);
  margin-bottom: var(--space-md);
}

.precio-formato__nombre em {
  font-style: normal;
  color: var(--color-primario-800);
}


/* ── Grid de 3 promos ────────────────────────────────────────── */
.precio-promos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.precio-promo {
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.precio-promo--a {
  background-color: rgba(219, 163, 110, 0.12);
  border: 1px solid rgba(219, 163, 110, 0.35);
}

.precio-promo--b {
  background-color: rgba(219, 163, 110, 0.22);
  border: 1px solid rgba(219, 163, 110, 0.5);
}

.precio-promo--c {
  background-color: rgba(140, 29, 23, 0.08);
  border: 1px solid rgba(140, 29, 23, 0.2);
}

.precio-promo__etiqueta {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primario-800);
}

.precio-promo__valor {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-secundario-700);
  line-height: 1;
}

.precio-promo__detalle {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-body);
  line-height: 1.45;
  margin-top: 2px;
}


/* ── Sección Fotos con marcos ────────────────────────────────── */
.precio-marcos__cuerpo {
  padding: 8px 24px 16px;
}

.precio-marco-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  gap: var(--space-md);
}

.precio-marco-fila:last-child {
  border-bottom: none;
}

.precio-marco-fila__formato {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-subtitulo);
}

.precio-marco-fila__valor {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-secundario-700);
  white-space: nowrap;
}


/* ====================================================================
   21. PÁGINA PRECIOS — RESPONSIVE MÓVIL
==================================================================== */

@media (max-width: 768px) {

  .precios-atencion {
    padding: 28px var(--space-md);
  }

  .precios-atencion__titulo {
    font-size: 1.625rem;
  }

  .precios-atencion__lista li {
    font-size: 0.875rem;
  }

  .precios-planes {
    padding: 32px var(--space-md) 56px;
  }

  .precios-planes__titulo {
    font-size: 1.5rem;
  }

  .precio-grupo__cabecera {
    padding: 14px var(--space-md);
  }

  .precio-grupo__titulo {
    font-size: 1.1rem;
  }

  .precio-formato {
    padding: 20px var(--space-md);
  }

  /* Promos en columna única en móvil */
  .precio-promos {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* En móvil: etiqueta y precio en la misma fila */
  .precio-promo {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 12px 14px;
  }

  .precio-promo__etiqueta {
    flex: 0 0 72px;
    font-size: 0.6875rem;
  }

  .precio-promo__valor {
    flex: 1;
    font-size: 1.125rem;
    text-align: right;
  }

  .precio-promo__detalle {
    flex: 0 0 100%;
    font-size: 0.7rem;
    margin-top: 6px;
    color: var(--color-gris-05);
  }

  .precio-marcos__cuerpo {
    padding: 4px var(--space-md) 12px;
  }

  .precio-marco-fila__formato {
    font-size: 0.875rem;
  }

  .precio-marco-fila__valor {
    font-size: 1rem;
  }
}


/* ====================================================================
   22. PÁGINA PRECIOS — MINI CARRUSELES (SECCIÓN ATENCIÓN)
   ──────────────────────────────────────────────────────────────────
   4 carruseles independientes, 3 slides cada uno, auto-rotate.
   Tamaño: 184 × 184 px desktop — 120 × 120 px móvil.

   Escritorio: texto a la izquierda + 2×2 grid de carruseles a la derecha.
   Móvil: texto arriba + carruseles en fila centrada (2×2).

   PARA AGREGAR IMAGEN EN UN SLIDE:
     Elimina el bloque <div class="precio-mini-carousel__ph"> y ponle:
     <img class="precio-mini-carousel__img"
          src="imagenes/muestra-XX.jpg" alt="Muestra de sesión" />
==================================================================== */

/* Convierte el inner de Atención en layout de dos columnas */
.precios-atencion__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Bloque de texto (título + bullets) */
.precios-atencion__texto {
  flex: 1;
  min-width: 0;
}

/* Grid 2×2 de mini carruseles */
.precios-atencion__carruseles {
  display: grid;
  grid-template-columns: repeat(2, 184px);
  grid-template-rows: repeat(2, 184px);
  gap: 10px;
  flex-shrink: 0;
}

/* Contenedor de cada mini carrusel */
.precio-mini-carousel {
  position: relative;
  width: 184px;
  height: 184px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--color-primario-600);
  background: var(--color-terceario-500);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Inner que apila los slides */
.precio-mini-carousel__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Cada slide ocupa todo el espacio, opacidad 0 por defecto */
.precio-mini-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* Slide visible */
.precio-mini-carousel__slide--active {
  opacity: 1;
}

/* Imagen real dentro del slide */
.precio-mini-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder mientras no hay imagen */
.precio-mini-carousel__ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-terceario-400);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  text-align: center;
  padding: 12px;
  line-height: 1.4;
}

/* Puntos indicadores */
.precio-mini-carousel__dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.precio-mini-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  transition: background var(--transition-base);
}

.precio-mini-carousel__dot.is-active {
  background: var(--color-primario-300);
}


/* ====================================================================
   23. PÁGINA PRECIOS — SEPARADORES ENTRE PLANES
   ──────────────────────────────────────────────────────────────────
   Cada separador muestra:
     • Una foto encima (foto de sesión a modo de muestra)
     • Un marco debajo con otra foto dentro

   Los marcos crecen progresivamente:
     --sz1 ≈ 10×15 cm  (más pequeño)
     --sz2 ≈ 13×18 cm
     --sz3 ≈ 20×20 cm  (cuadrado)
     --sz4 ≈ 20×25 cm
     --sz5 ≈ 30×40 cm  (más grande)

   PARA AGREGAR IMÁGENES:
     Foto arriba: elimina <div class="precio-separador__foto-ph">
       y pon: <img src="imagenes/sep-foto-XX.jpg" alt="…" />
     Foto del marco: elimina <div class="precio-separador__marco-ph">
       y pon: <img src="imagenes/sep-marco-XX.jpg" alt="…" />
==================================================================== */

.precio-separador {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 24px;
}

/* ── Foto sobre el marco ────────────────────────────────────── */
.precio-separador__foto-ph,
.precio-separador__foto img {
  width: 170px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-terceario-400);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  text-align: center;
  padding: 12px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* ── Marco de foto ───────────────────────────────────────────── */
/* Borde exterior oscuro (madera) + línea interior dorada */
.precio-separador__marco {
  position: relative;
  background: var(--color-terceario-500);
  border: 9px solid var(--color-primario-800);
  /* Línea dorada interior */
  box-shadow:
    inset 0 0 0 2px var(--color-primario-500),
    /* Línea dorada exterior */
    0 0 0 1px var(--color-primario-700),
    0 8px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin-top: -4px;
  /* Solapa levemente con la foto de arriba */
}

/* Foto dentro del marco */
.precio-separador__marco-ph,
.precio-separador__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-terceario-500);
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
  font-size: 0.5rem;
  text-align: center;
  padding: 8px;
  line-height: 1.4;
}

/* ── Tamaños de marco (proporciones de los formatos reales) ─── */
/* sz1 ≈ 10×15 cm */
.precio-separador__marco--sz1 {
  width: 84px;
  height: 126px;
}

/* sz2 ≈ 13×18 cm */
.precio-separador__marco--sz2 {
  width: 104px;
  height: 144px;
}

/* sz3 ≈ 20×20 cm (cuadrado) */
.precio-separador__marco--sz3 {
  width: 130px;
  height: 130px;
}

/* sz4 ≈ 20×25 cm */
.precio-separador__marco--sz4 {
  width: 130px;
  height: 163px;
}

/* sz5 ≈ 30×40 cm */
.precio-separador__marco--sz5 {
  width: 156px;
  height: 208px;
}


/* ====================================================================
   24. PÁGINA PRECIOS — RESPONSIVE MÓVIL (nuevos elementos)
==================================================================== */

@media (max-width: 768px) {

  /* Atención: texto arriba, carruseles abajo centrados */
  .precios-atencion__inner {
    flex-direction: column;
    gap: 24px;
  }

  /* Grid 2×2 de carruseles de 120 × 120 px */
  .precios-atencion__carruseles {
    grid-template-columns: repeat(2, 120px);
    grid-template-rows: repeat(2, 120px);
    gap: 8px;
    align-self: center;
  }

  .precio-mini-carousel {
    width: 120px;
    height: 120px;
  }

  /* Foto del separador un poco más pequeña */
  .precio-separador__foto-ph,
  .precio-separador__foto img {
    width: 130px;
    height: 108px;
  }

  /* Los marcos se escalan al 80 % en móvil */
  .precio-separador__marco--sz1 { width: 67px;  height: 101px; }
  .precio-separador__marco--sz2 { width: 83px;  height: 115px; }
  .precio-separador__marco--sz3 { width: 104px; height: 104px; }
  .precio-separador__marco--sz4 { width: 104px; height: 130px; }
  .precio-separador__marco--sz5 { width: 125px; height: 166px; }
}


/* ====================================================================
   25. PÁGINA PRECIOS — BANNER ATENCIÓN (nuevo diseño)
   ──────────────────────────────────────────────────────────────────
   Fondo rojo degradado. Izquierda: "Atención" enorme en cursiva.
   Derecha: 5 líneas de aviso en texto blanco, sin viñetas.
   Override completo de las reglas anteriores (sección 19).
==================================================================== */

.precios-atencion {
  background: linear-gradient(to right, #400D0A, #8C1D17 30%, #9A3A35 50%, #8C1D17 70%, #400D0A);
  padding: 40px 64px;
}

.precios-atencion__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 56px;
}

/* Columna izquierda: solo el título gigante */
.precios-atencion__titulo-col {
  flex-shrink: 0;
}

.precios-atencion__titulo {
  font-family: var(--font-display);
  font-size: 5.5rem;       /* ~88px — igual al diseño */
  font-weight: 700;
  font-style: italic;
  color: var(--color-primario-200);   /* dorado claro */
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Lista de avisos — sin viñetas, solo texto limpio */
.precios-atencion__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.precios-atencion__lista li {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.precios-atencion__lista li::before {
  content: none;
}

.precios-atencion__lista li svg {
  flex-shrink: 0;
  color: var(--color-primario-300);
}

.precios-atencion__logo-circular {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  align-self: center;
  margin-left: -56px;
}


/* ====================================================================
   26. PÁGINA PRECIOS — SECCIÓN PLANES DE SESIONES
   ──────────────────────────────────────────────────────────────────
   Fondo crema. Título + fila de botones + grupos de sesión.
==================================================================== */

.planes-sesiones {
  background-color: var(--color-bg-hero);   /* crema #E8D9C4 */
  padding: 48px 48px 64px;
}

.planes-sesiones__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Título de sección */
.planes-sesiones__titulo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-titulo);
  letter-spacing: 0.01em;
}


/* ── Selector de personas ──────────────────────────────────────── */
.planes-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.planes-selector__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 6px 14px 8px;
  background-color: var(--color-secundario-700);  /* rojo oscuro */
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--transition-base),
              transform 0.15s ease;
  text-decoration: none;
  gap: 1px;
}

.planes-selector__btn:hover,
.planes-selector__btn:focus-visible {
  background-color: var(--color-secundario-800);
  transform: translateY(-2px);
  outline: 2px solid var(--color-primario-300);
  outline-offset: 2px;
}

.planes-selector__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primario-100);
  line-height: 1.1;
  white-space: nowrap;
}

.planes-selector__label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(236, 198, 164, 0.85);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ── Grupo por cantidad de personas ────────────────────────────── */
.planes-grupo {
  display: flex;
  flex-direction: column;
  gap: 0;                            /* sin gap global — cada hijo controla su espacio */
  padding: 40px 0 28px;
  margin-inline: -48px;
  padding-inline: 48px;
  border-top: 14px solid var(--color-secundario-700);
  scroll-margin-top: 80px;
}

.planes-grupo:first-of-type {
  border-top: none;
  padding-top: 28px;
}

/* Fila superior: carrusel + precios en dos columnas */
.planes-grupo__top {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 8px;               /* pequeño espacio hasta las promos */
}

/* Promos A/B/C — ancho completo, igual que la fila de arriba */
.planes-grupo__promos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

/* Fila de marcos — centrada */
.planes-grupo__marcos {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(136, 101, 68, 0.12);
  flex-wrap: wrap;
  justify-content: center;
}

/* Título "Fotos con marco" dentro del grupo */
.planes-marcos__titulo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-titulo);
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 4px;
}


/* ── Carrusel crossfade ─────────────────────────────────────────── */
.planes-carousel {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(64, 13, 10, 0.28);
  position: relative;
  background-color: var(--color-terceario-400);
}

.planes-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Cada slide se apila y cambia opacidad */
.planes-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.planes-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.planes-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder (mientras no hay imagen real) */
.planes-carousel__ph {
  width: 100%;
  height: 100%;
}

.planes-carousel__ph .planes-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── Bloque de precios ──────────────────────────────────────────── */
.planes-precios {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Título del grupo: "Sesión 1 persona" */
.planes-precios__titulo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-titulo);
  margin-bottom: 4px;
}

/* Opciones base (archivo digital, etc.) */
.planes-precios__base {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-base-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(136, 101, 68, 0.18);
}

.plan-base-item__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-body);
  flex: 1;
}

.plan-base-item__price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-titulo);
  white-space: nowrap;
}

/* Promos A / B / C */
.planes-precios__promos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-promo {
  padding: 10px 14px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(136, 101, 68, 0.18);
}

.plan-promo__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
}

/* Etiqueta "Promo A / B / C" */
.plan-promo__label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secundario-700);  /* rojo oscuro */
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.plan-promo__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-body);
  line-height: 1.4;
}

.plan-promo__price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-titulo);
  white-space: nowrap;
  text-align: right;
}


/* ====================================================================
   27. PÁGINA PRECIOS — SECCIÓN FOTOS CON MARCO
   ──────────────────────────────────────────────────────────────────
   Fondo crema con faja inferior. Título a la izquierda (vertical),
   4 tarjetas de marco en fila horizontal.
==================================================================== */

.fotos-marco {
  background-color: var(--color-bg-hero);
  border-top: 2px solid rgba(136, 101, 68, 0.2);
  padding: 40px 48px 56px;
}

.fotos-marco__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/* Columna izquierda: título "Fotos con marco" */
.fotos-marco__titulo-col {
  flex-shrink: 0;
  padding-top: 8px;
}

.fotos-marco__titulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-titulo);
  line-height: 1.25;
  text-align: left;
}

/* Grid de 4 marcos en fila — centrado en ambos modos */
.fotos-marco__grid {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
}

/* Tarjeta de marco individual */
.marco-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Contenedor del marco — tamaño crece según clase */
.marco-item__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen real del marco (cuando se reemplace el placeholder) */
.marco-item__frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Placeholder visual del marco: borde dorado + foto interior */
.marco-item__frame-ph {
  border: 6px solid var(--color-primario-500);
  border-radius: 4px;
  background-color: #f5ede0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 3px var(--color-primario-700),
              0 4px 14px rgba(64, 13, 10, 0.22);
  width: 100%;
  height: 100%;
  padding: 10px;
}

.marco-item__foto-ph {
  width: 100%;
  height: 100%;
  background-color: var(--color-terceario-300);
  border-radius: 2px;
  opacity: 0.5;
}

/* Tamaños proporcionales de los marcos (ratio ~2:3 portrait) */
.marco-item__frame--sm {
  width: 100px;
  height: 140px;
}

.marco-item__frame--md {
  width: 120px;
  height: 165px;
}

.marco-item__frame--lg {
  width: 145px;
  height: 200px;
}

.marco-item__frame--xl {
  width: 170px;
  height: 235px;
}

/* Texto debajo del marco */
.marco-item__size {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-titulo);
  text-align: center;
}

.marco-item__price {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-secundario-700);
  text-align: center;
}


/* ====================================================================
   28. PÁGINA PRECIOS — RESPONSIVE MÓVIL (nuevo diseño)
   ──────────────────────────────────────────────────────────────────
   Aplica a ≤ 768 px. Apila todo verticalmente.
==================================================================== */

@media (max-width: 768px) {

  /* -- Atención -- */
  .precios-atencion {
    padding: 32px 20px;
  }

  .precios-atencion__inner {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .precios-atencion__titulo {
    font-size: 3.5rem;
  }

  .precios-atencion__lista li {
    font-size: 0.9rem;
  }

  .precios-atencion__logo-circular {
    display: none;
  }

  /* -- Planes -- */
  .planes-sesiones {
    padding: 32px 20px 48px;
  }

  .planes-sesiones__inner {
    gap: 20px;
  }

  .planes-sesiones__titulo {
    font-size: 1.35rem;
  }

  .planes-selector {
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .planes-selector::-webkit-scrollbar {
    display: none;
  }

  .planes-selector__btn {
    min-width: 54px;
    flex-shrink: 0;
    padding: 5px 10px 6px;
  }

  .planes-selector__num {
    font-size: 0.9rem;
  }

  /* Top del grupo: carrusel 120x120 a la izquierda + precios a la derecha */
  .planes-grupo__top {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }

  /* Carrusel 120×120 en móvil */
  .planes-carousel {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 8px;
  }

  /* Promos en móvil */
  .planes-grupo__top {
    margin-bottom: 12px;
  }

  .planes-grupo__promos {
    margin-top: 0;
    margin-bottom: 20px;
  }

  /* Títulos y textos de precio más compactos en móvil */
  .planes-precios__titulo {
    font-size: 1rem;
  }

  .plan-base-item__desc {
    font-size: 0.78rem;
  }

  .plan-base-item__price {
    font-size: 0.85rem;
  }

  /* Promos: etiqueta encima, descripción + precio abajo */
  .plan-promo__header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 2px;
  }

  .plan-promo__label {
    grid-column: 1 / -1;
    font-size: 1rem;
  }

  .plan-promo__desc {
    font-size: 0.8rem;
    grid-column: 1;
  }

  .plan-promo__price {
    font-size: 0.88rem;
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: end;
  }

  /* Marcos del grupo: centrados */
  .planes-grupo__marcos {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .planes-marcos__titulo {
    white-space: normal;
    text-align: center;
  }

  /* Grid de marcos: 4 en fila, centrado */
  .fotos-marco__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .marco-item__frame--sm { width: 64px;  height: 90px;  }
  .marco-item__frame--md { width: 76px;  height: 106px; }
  .marco-item__frame--lg { width: 92px;  height: 128px; }
  .marco-item__frame--xl { width: 108px; height: 150px; }
}

@media (max-width: 480px) {
  .planes-selector__btn {
    min-width: 46px;
    padding: 4px 8px 5px;
  }

  .planes-selector__num {
    font-size: 0.8rem;
  }

  .planes-selector__label {
    font-size: 0.55rem;
  }
}


/* ====================================================================
   29. PÁGINA ARRIENDO DE TRAJES — BANNER
   ──────────────────────────────────────────────────────────────────
   Fondo rojo degradado. Título grande + 2 líneas de info en blanco.
==================================================================== */

.arriendo-banner {
  background: linear-gradient(to right, #400D0A, #8C1D17 30%, #9A3A35 50%, #8C1D17 70%, #400D0A);
  padding: 36px 64px;
}

.arriendo-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arriendo-banner__titulo {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: #EDE0D5;
  line-height: 1.15;
}

.arriendo-banner__info {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: #EDE0D5;
  line-height: 1.5;
}


/* ====================================================================
   30. PÁGINA ARRIENDO DE TRAJES — TIPOS
   ──────────────────────────────────────────────────────────────────
   Fondo crema. Subtítulo "Tipos" + 3 tarjetas en fila (desktop)
   o apiladas (móvil).

   Desktop: solo título de categoría, sin imagen.
   Móvil:   título izq + placeholder imagen der.
==================================================================== */

.arriendo-tipos {
  background-color: var(--color-bg-hero);
  padding: 48px 64px 64px;
}

.arriendo-tipos__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.arriendo-tipos__subtitulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-titulo);
}

/* Grid de 3 tarjetas en fila */
.arriendo-tipos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Tarjeta individual */
.arriendo-card {
  border-radius: 20px;
  overflow: hidden;
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--color-terceario-400);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
}

.arriendo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Título oculto */
.arriendo-card__titulo {
  display: none;
}

/* Contenedor imagen — llena toda la card */
.arriendo-card__img-ph {
  width: 100%;
  height: 100%;
}

.arriendo-card__img-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Row wrapper y placeholder decorativo — invisibles en desktop */
.arriendo-row {
  display: contents;
}

.arriendo-deco-ph {
  display: none;
}

/* Grid móvil — oculto en desktop */
.arriendo-mob-grid {
  display: none;
}


/* ====================================================================
   31. PÁGINA ARRIENDO DE TRAJES — RESPONSIVE MÓVIL
   ──────────────────────────────────────────────────────────────────
   Tarjetas apiladas. Cada tarjeta: flex-row con título izq + placeholder der.
==================================================================== */

@media (max-width: 768px) {

  .arriendo-banner {
    padding: 28px 20px;
  }

  .arriendo-banner__titulo {
    font-size: 1.4rem;
  }

  .arriendo-banner__info {
    font-size: 0.875rem;
  }

  .arriendo-tipos {
    padding: 32px 20px 48px;
  }

  /* Ocultar grid desktop en móvil */
  .arriendo-tipos__grid {
    display: none;
  }

  /* Mostrar grid móvil */
  .arriendo-mob-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Cada item: placeholder + label opcional */
  .arriendo-mob-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base);
  }

  .arriendo-mob-item:hover {
    transform: translateY(-2px);
  }

  /* Placeholder de imagen — cuadrado */
  .arriendo-mob-ph {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-terceario-400);
    border-radius: 16px;
    overflow: hidden;
  }

  .arriendo-mob-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Reemplazar .arriendo-mob-ph por <img> cuando tengas la foto:
     <img src="imagenes/traje-mujeres.jpg" alt="..." style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;" /> */

  /* Label de categoría debajo del placeholder izquierdo */
  .arriendo-mob-label {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-secundario-700);
    padding: 4px 8px 8px;
  }
}


/* ====================================================================
   36. PÁGINA VAMOS A TU EVENTO — HERO PLACEHOLDER
   ──────────────────────────────────────────────────────────────────
   Imagen grande full-width en la parte superior.
   Desktop: ~480px alto. Móvil: ~230px alto.
==================================================================== */

.evento-hero {
  background-color: var(--color-terceario-400);
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evento-hero__placeholder {
  width: 100%;
  height: 100%;
}

.evento-hero__placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Imagen real: reemplaza el placeholder por:
   <img class="evento-hero__img" src="imagenes/evento-collage.jpg" alt="Fotos collage" /> */
.evento-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ====================================================================
   37. PÁGINA VAMOS A TU EVENTO — SECCIÓN INFO
   ──────────────────────────────────────────────────────────────────
   Fondo crema. Desktop: texto izquierda + fotos solapadas derecha.
   Móvil: texto + botón arriba, fotos lado a lado abajo.
==================================================================== */

.evento-info {
  background-color: var(--color-bg-hero);
  padding: 64px var(--space-xl);
  position: relative;
  isolation: isolate;
}

.evento-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('textura-papel.jpg');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

.evento-info__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

/* ── Columna texto ──────────────────────────────────────────────── */
.evento-info__texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evento-info__titulo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-titulo);
  line-height: 1.25;
}

.evento-info__subtitulo {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-body);
  line-height: 1.6;
}

/* ── Checklist ──────────────────────────────────────────────────── */
.evento-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evento-checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-subtitulo);
}

.evento-checklist__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-secundario-700);
}

/* ── Botón Cotiza tu evento ─────────────────────────────────────── */
.evento-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-titulo);
  background-color: var(--color-primario-500);
  padding: 18px 48px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  align-self: flex-start;
  margin-top: 8px;
}

.evento-btn:hover {
  background-color: var(--color-primario-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.evento-btn:active {
  transform: translateY(0);
}

/* ── Columna fotos (desktop: solapadas) ─────────────────────────── */
.evento-info__fotos {
  position: relative;
  flex-shrink: 0;
  width: 370px;
  height: 400px;
}

.evento-foto {
  position: absolute;
  border-radius: 12px;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

/* Imagen grande: esquina superior derecha */
.evento-foto--grande {
  width: 288px;
  height: 288px;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: var(--color-terceario-400);
}

/* Carrusel dentro del placeholder grande */
.evento-carousel {
  position: relative;
}

.evento-carousel__track {
  width: 100%;
  height: 100%;
  position: relative;
}

.evento-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.evento-carousel__slide.is-active {
  opacity: 1;
}

.evento-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Imagen chica: inferior izquierda, solapada un poco sobre la grande */
.evento-foto--chica {
  width: 240px;
  height: 240px;
  left: -150px;
  bottom: 0;
  z-index: 2;
  background-color: var(--color-terceario-300);
}

.evento-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ====================================================================
   38. PÁGINA VAMOS A TU EVENTO — RESPONSIVE
==================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .evento-info {
    padding: 48px var(--space-lg);
  }

  .evento-info__fotos {
    width: 300px;
    height: 330px;
  }

  .evento-foto--grande {
    width: 230px;
    height: 230px;
  }

  .evento-foto--chica {
    width: 190px;
    height: 190px;
  }
}

@media (max-width: 768px) {
  /* Hero más bajo en móvil */
  .evento-hero {
    height: 230px;
  }

  /* Info section: columna */
  .evento-info {
    padding: 40px var(--space-md);
  }

  .evento-info__inner {
    flex-direction: column;
    gap: 32px;
  }

  .evento-info__titulo {
    font-size: 1.35rem;
  }

  .evento-btn {
    font-size: 1.05rem;
    padding: 16px 36px;
    align-self: flex-start;
  }

  /* Fotos: en móvil salen del flujo absoluto y se ponen en fila */
  .evento-info__fotos {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 12px;
  }

  .evento-foto {
    position: static;
    flex: 1;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
  }

  /* En móvil ambas tienen el mismo tamaño */
  .evento-foto--grande,
  .evento-foto--chica {
    width: auto;
    height: auto;
  }
}


/* ====================================================================
   32. FOOTER SIMPLE — SOLO LOGO NOMBRE
   ──────────────────────────────────────────────────────────────────
   Footer minimalista aplicado a todas las páginas.
   Fondo rojo oscuro, logo centrado horizontalmente.
==================================================================== */

.site-footer-simple {
  background: var(--color-secundario-700);
  padding: 16px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer-simple__logo {
  max-width: 320px;
  width: 100%;
}

.site-footer-simple__logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
  .site-footer-simple {
    padding: 14px var(--space-md);
  }

  .site-footer-simple__logo {
    max-width: 180px;
  }
}


/* ====================================================================
   33. PÁGINA CONTACTANOS — BANNER
   ──────────────────────────────────────────────────────────────────
   Fondo rojo degradado. Tres elementos en fila:
     1. Ícono WhatsApp (grande, clickeable)
     2. Botón píldora "Contáctanos" (enlace a WhatsApp)
     3. Texto informativo (color #EDE0D5)
   En móvil: ícono + botón en fila, texto debajo.
==================================================================== */

.contacto-banner {
  background: linear-gradient(to right, #400D0A, #8C1D17 30%, #9A3A35 50%, #8C1D17 70%, #400D0A);
  padding: 40px var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.contacto-banner__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Ícono WhatsApp */
.contacto-banner__icon {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform var(--transition-base);
}

.contacto-banner__icon:hover {
  transform: scale(1.08);
}

/* Botón píldora dorado */
.contacto-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-titulo);
  background-color: var(--color-primario-500);
  padding: 22px 56px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.contacto-banner__btn:hover {
  background-color: var(--color-primario-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.contacto-banner__btn:active {
  transform: translateY(0);
}

/* Texto informativo a la derecha (desktop) */
.contacto-banner__info {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: #EDE0D5;
  line-height: 1.6;
  width: 100%;
  text-align: center;
}

.contacto-banner__info p {
  margin: 0;
}

.contacto-banner__info p + p {
  margin-top: 6px;
}


/* ====================================================================
   34. PÁGINA CONTACTANOS — SECCIÓN REDES SOCIALES
   ──────────────────────────────────────────────────────────────────
   Fondo crema. Título centrado. 3 íconos 200×200 (desktop),
   100×100 (móvil) con etiqueta debajo de cada uno.
==================================================================== */

.contacto-redes {
  background-color: var(--color-bg-hero);
  padding: 56px var(--space-lg) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  isolation: isolate;
}

.contacto-redes::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('textura-papel.jpg');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

.contacto-redes__titulo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-titulo);
  text-align: center;
}

.contacto-redes__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.contacto-redes__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform var(--transition-base);
}

.contacto-redes__item:hover {
  transform: translateY(-4px);
}

.contacto-redes__icon {
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  flex-shrink: 0;
}

.contacto-redes__icon svg,
.contacto-redes__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.contacto-redes__label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-titulo);
  text-align: center;
}


/* ====================================================================
   35. PÁGINA CONTACTANOS — RESPONSIVE
==================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .contacto-banner__btn {
    font-size: 1.4rem;
    padding: 18px 40px;
  }

  .contacto-banner__icon {
    width: 80px;
    height: 80px;
  }

  .contacto-redes__icon {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 768px) {
  .contacto-banner {
    padding: 28px var(--space-md);
    gap: 20px;
  }

  /* En móvil: ícono + botón en fila, texto en fila separada abajo */
  .contacto-banner__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  .contacto-banner__icon {
    width: 72px;
    height: 72px;
  }

  .contacto-banner__btn {
    font-size: 1.2rem;
    padding: 14px 32px;
  }

  .contacto-banner__info {
    font-size: 0.875rem;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }

  /* Redes sociales: íconos 100×100 en móvil */
  .contacto-redes {
    padding: 40px var(--space-md) 48px;
    gap: 28px;
  }

  .contacto-redes__titulo {
    font-size: 1.4rem;
  }

  .contacto-redes__grid {
    gap: 24px;
  }

  .contacto-redes__icon {
    width: 100px;
    height: 100px;
    border-radius: 16px;
  }

  .contacto-redes__label {
    font-size: 0.875rem;
  }
}


/* ====================================================================
   38. PÁGINAS DE TRAJES — MUJERES / HOMBRES (Estilos)
   ──────────────────────────────────────────────────────────────────
   Fondo crema. Título "Estilos" + grid de 3 tarjetas clicables.
   Cada tarjeta: placeholder imagen → título → descripción.

   Desktop: 3 columnas, texto centrado.
   Móvil:   1 columna apilada, texto alineado izquierda.
==================================================================== */

/* ====================================================================
   39. PÁGINAS DE GALERÍA DE ESTILO
   ──────────────────────────────────────────────────────────────────
   6 páginas de detalle: charleston, cancan, dama-antigua,
   caballero-elegante, vaquero, gentleman-victoriano.

   Desktop: back btn + H1 + 2 filas × 5 columnas, texto bajo c/imagen
   Móvil:   back btn + H1 + 1 hero ancho + grid 2 columnas
            cada columna: placeholder + texto chico abajo
==================================================================== */

.galeria-trajes {
  background-color: var(--color-bg-hero);
  padding: 48px 56px 72px;
}

.galeria-trajes__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.galeria-trajes__titulo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-titulo);
}

/* ── HERO — 1 placeholder ancho, solo visible en móvil ─────────── */
.galeria-hero {
  display: none;
  text-decoration: none;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.galeria-hero:hover {
  transform: translateY(-2px);
}

.galeria-hero__ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-terceario-400);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* Imagen real cuando esté disponible:
   <img class="galeria-hero__img" src="..." alt="..." /> */
.galeria-hero__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: var(--shadow-card);
}

.galeria-hero__texto {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-subtitulo);
}

/* ── GRID: 5 cols desktop / 2 cols móvil ──────────────────────── */
/* Desktop: 2 filas × 5 columnas = 10 items */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Ítem individual */
.galeria-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.galeria-item:hover {
  transform: translateY(-3px);
}

/* Placeholder cuadrado (reemplazar por <img class="galeria-item__img"> ) */
.galeria-item__ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-terceario-400);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Imagen dentro del placeholder — ocupa todo el card */
.galeria-item__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.galeria-item:hover .galeria-item__ph img {
  transform: scale(1.08);
}

.galeria-item__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s ease;
}

.galeria-item:hover .galeria-item__img {
  transform: scale(1.08);
}

/* Mini texto bajo cada imagen */
.galeria-item__texto {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-subtitulo);
  line-height: 1.3;
  text-align: center;
}

/* ── Responsive móvil ──────────────────────────────────────────── */
@media (max-width: 768px) {

  .galeria-trajes {
    padding: 24px 16px 56px;
  }

  .galeria-trajes__titulo {
    font-size: 1.5rem;
  }

  /* Mostrar hero en móvil */
  .galeria-hero {
    display: flex;
  }

  /* 2 columnas en móvil */
  .galeria-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .galeria-item__ph {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .galeria-item__img {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .galeria-item__texto {
    text-align: left;
    font-size: 0.72rem;
  }
}


/* Botón flecha volver */
.trajes-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-secundario-800);
  color: var(--color-gris-07);
  flex-shrink: 0;
  align-self: flex-start;
  transition: background-color var(--transition-base),
              transform var(--transition-base);
}

.trajes-back-btn:hover {
  background-color: var(--color-secundario-700);
  transform: translateX(-2px);
}

.trajes-estilos {
  background-color: var(--color-bg-hero);
  padding: 48px 64px 72px;
}

.trajes-estilos__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.trajes-estilos__titulo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-titulo);
}

/* Grid escritorio: 3 columnas iguales */
.trajes-estilos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Tarjeta individual — enlace clicable */
.traje-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.traje-card:hover {
  transform: translateY(-4px);
}

/* Placeholder de imagen (reemplazar por <img> cuando haya fotos) */
.traje-card__img-ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-terceario-400);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Imagen real cuando esté disponible */
.traje-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: var(--shadow-card);
}

/* Bloque de texto bajo la imagen */
.traje-card__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

/* Título del estilo, ej. "Charleston" + "Años '20" */
.traje-card__titulo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-titulo);
  line-height: 1.25;
  text-align: center;
}

/* Descripción/inspiración */
.traje-card__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-subtitulo);
  line-height: 1.5;
  text-align: center;
}

/* ── Responsive móvil ──────────────────────────────────────────── */
@media (max-width: 768px) {

  .trajes-estilos {
    padding: 32px 20px 56px;
  }

  .trajes-estilos__titulo {
    font-size: 1.5rem;
  }

  .trajes-estilos__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .traje-card__img-ph {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  .traje-card__img {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  .traje-card__img--lower {
    object-position: center 30%;
  }

  .traje-card__titulo {
    text-align: left;
    font-size: 1.05rem;
  }

  .traje-card__desc {
    text-align: left;
    font-size: 0.875rem;
  }
}