/* Screen-reader only (SEO H1 hidden visually) */
.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;
}
/* ==============================
   VARIABLES Y RESET 
============================== */
:root {
  /* Paleta de colores */
  --color-primary: #b66d4c;      /* Actualiza el color primario al del manual de marca*/
  --color-primary-light: #ee9c77;
  --color-secondary: #a3ac99;    /* Verde sage manual de marca */
  --color-secondary-light: #b0c6b4;
  --color-beige: #f9f1e7;        /* Fondo principal */
  --color-beige-dark: #e8d5c0;
  --color-text: #4a3c31;         /* Texto principal - marrón oscuro */
  --color-text-light: #7c6d63;   /* Texto secundario */
  --color-white: #ffffff;
  
  /* Tipografía */
  --font-primary: 'Times New Roman', serif;
  --font-secondary: 'Caviar Dreams', 'Arial', sans-serif;
  
  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;
  
  /* Bordes */
  --border-radius: 8px;
  
  /* Transiciones */
  --transition: all 0.3s ease;
}

/* Declaración de fuente personalizada */
@font-face {
  font-family: 'Dream Avenue';
  /* Variante propia: glifos ¿ ¡ regenerados rotando 180° a partir de ? !
     del original, para que tengan el mismo trazo y queden consistentes
     con la font. Script en /tmp/font-rotate-pannabhumi.py. */
  src: url('../fonts/Dream-Avenue-Pannabhumi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caviar Dreams'; /* Fuente secundaria */
  src: url('../fonts/CaviarDreams.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.mobile-logo span,
.logo h1 {
  font-family: 'Dream Avenue', var(--font-primary);
  font-size: 1.8rem;
  font-weight: lighter;
  letter-spacing: 2px;
  color: #b66d4c;
}

.logo h1 {
  margin-top: var(--spacing-xs);
  text-align: center;
}

/* Aplicar la fuente también a los títulos de sección para coherencia visual */
.section-title {
  font-family: 'Dream Avenue', var(--font-primary);
  color: #b66d4c;
  font-weight: bold;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Para navegación suave al hacer clic en los enlaces de anclaje */
}

body {
  font-family: var(--font-secondary);
  color: var(--color-text);
  background-color: var(--color-beige);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

/* ==============================
   BANNER SUPERIOR
============================== */
.top-banner {
  width: 100%;
  background-color: var(--color-beige);
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70px; /* Controla la altura del banner */
}

/* ==============================
   LAYOUT GENERAL
============================== */
.section-title {
  font-family: 'Dream Avenue', var(--font-primary);
  text-align: center;
  color: #b66d4c;
  margin-bottom: var(--spacing-md);
  font-size: 2rem;
  font-weight: bold;
}

section {
  padding: var(--spacing-lg) var(--spacing-sm);
  /* margin-bottom: var(--spacing-xs); */ /* Espacio entre secciones pequeño */
  margin-bottom: 0; /* Eliminar margen entre todas las secciones */
}

.hidden {
  display: none;
}

/* ==============================
   HEADER Y NAVEGACIÓN
============================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-beige);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para enlaces dentro del contenido */
.content-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: var(--transition);
}

.content-link:hover {
    color: var(--color-primary-light);
}

.nav-main {
  padding: var(--spacing-sm);
}

.nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-item {
  margin: var(--spacing-xs) 0;
  position: relative;
}

/* Aplicar la fuente al menú y logo */
.nav-link {
  font-family: 'Dream Avenue', var(--font-primary);
  font-size: 1rem; /* Ajustar según se vea la fuente */
  padding: var(--spacing-xs);
  letter-spacing: 1.5px;
  color: #b66d4c;
  font-weight: bold;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary-light);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: var(--transition);
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

.logo {
  margin: var(--spacing-sm) 0;
}

/* Centrado del logo y el nombre */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-img {
  width: 120px;
  height: 120px;
  /* border-radius: 50%; */
}

/* ==============================
   HERO SECTION
============================== */
.hero {
  background-image: url('../images/buddha-hero.jpg'); /* Imagen específica, revisar mejor resolucion */
  background-size: cover;
  background-position: center;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
}

/* Estado inicial: overlay invisible */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Completamente transparente inicialmente */
  transition: background-color 1.5s ease; /* Transición suave */
}

/* Estado con overlay visible - lo voy a aplicar luego con Javasccript */
.hero.fade-in::before {
  background-color: rgba(0, 0, 0, 0.35); /* Nivel final de oscurecimiento - reducido */
}

/* La cita comienza invisible */
.hero-quote {
  font-family: 'Caviar Dreams', var(--font-primary);
  opacity: 0; /* Inicialmente invisible */
  transform: translateY(20px); /* Ligeramente abajo para efecto de entrada */
  transition: opacity 1s ease, transform 1s ease; /* Transición suave */
  transition-delay: 1s; /* Esperar a que el fondo se oscurezca primero */
}

/* Estado de cita visible - se aplicará con JS */
.hero-quote.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Estilos base para el hero content y quote */
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--spacing-md);
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-quote {
  font-family: 'Caviar Dreams', var(--font-primary);
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para mejorar legibilidad */
  padding: 1.2rem;
  border-radius: var(--border-radius);
  margin: 0 auto;
  max-width: 90%;
}

.hero-quote p {
  font-size: 1.5rem;
  margin-bottom: 0.5rem; /* Reducido de var(--spacing-sm) */
  line-height: 1.2; /* Interlineado reducido */
}

.hero-quote footer {
  font-size: 1rem;
  line-height: 1.2; /* Interlineado reducido también para el footer */
}

/* ==============================
   MONASTERIO SECTION
============================== */
.monasterio {
  background-image: url('../images/3.jpg'); /* Imagen específica 3.jpg */
  background-size: cover;
  background-position: center;
  position: relative;
}

.monasterio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(249, 241, 231, 0.85); /* Transparencia con el color de fondo */
}

.monasterio-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--spacing-sm);
}

.monasterio .section-title {
  position: relative;
  z-index: 1;
}

.highlighted-text {
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
}

/* ==============================
   ACTIVIDADES Y EVENTOS
============================== */
.actividades-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.tab {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--font-primary);
  color: var(--color-text-light);
  transition: var(--transition);
}

.tab.active {
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.tab:hover {
  color: var(--color-primary);
}

.tab-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hover-instructions {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

.actividades-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.actividad-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.actividad-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.actividad-info {
  padding: var(--spacing-sm);
}

.actividad-info h3 {
  font-family: var(--font-primary);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.hover-grow:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Estilo de botón para enlaces de plataformas - versión general */
a.platform-link {
  display: inline-block;
  color: var(--color-primary);
  padding: 2px 8px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
  background-color: transparent;
}

a.platform-link:hover {
  background-color: var(--color-beige-dark);
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Estilo de botón para enlaces de plataformas como Zoom */
.actividad-info a.platform-link {
  display: inline-block;
  color: var(--color-primary);
  padding: 2px 8px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
  background-color: transparent;
}

.actividad-info a.platform-link:hover {
  background-color: var(--color-beige-dark);
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Versión alternativa con ícono */
.actividad-info a.platform-link-icon::before {
  font-family: "Font Awesome 5 Free";
  content: "\f03d"; /* Ícono de video */
  margin-right: 5px;
}

/* ==============================
   VARIABLES Y RESET 
============================== */
:root {
  /* Paleta de colores */
  --color-primary: #b66d4c;      /* Actualiza el color primario al del manual de marca*/
  --color-primary-light: #ee9c77;
  --color-secondary: #a3ac99;    /* Verde sage manual de marca */
  --color-secondary-light: #b0c6b4;
  --color-beige: #f9f1e7;        /* Fondo principal */
  --color-beige-dark: #e8d5c0;
  --color-text: #4a3c31;         /* Texto principal - marrón oscuro */
  --color-text-light: #7c6d63;   /* Texto secundario */
  --color-white: #ffffff;
  
  /* Tipografía */
  --font-primary: 'Times New Roman', serif;
  --font-secondary: 'Caviar Dreams', 'Arial', sans-serif;
  
  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;
  
  /* Bordes */
  --border-radius: 8px;
  
  /* Transiciones */
  --transition: all 0.3s ease;
}

/* Declaración de fuente personalizada */
@font-face {
  font-family: 'Dream Avenue';
  /* Variante propia: glifos ¿ ¡ regenerados rotando 180° a partir de ? !
     del original, para que tengan el mismo trazo y queden consistentes
     con la font. Script en /tmp/font-rotate-pannabhumi.py. */
  src: url('../fonts/Dream-Avenue-Pannabhumi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caviar Dreams'; /* Fuente secundaria */
  src: url('../fonts/CaviarDreams.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.mobile-logo span,
.logo h1 {
  font-family: 'Dream Avenue', var(--font-primary);
  font-size: 1.8rem;
  font-weight: lighter;
  letter-spacing: 2px;
  color: #b66d4c;
}

.logo h1 {
  margin-top: var(--spacing-xs);
  text-align: center;
}

/* Aplicar la fuente también a los títulos de sección para coherencia visual */
.section-title {
  font-family: 'Dream Avenue', var(--font-primary);
  color: #b66d4c;
  font-weight: bold;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Para navegación suave al hacer clic en los enlaces de anclaje */
}

body {
  font-family: var(--font-secondary);
  color: var(--color-text);
  background-color: var(--color-beige);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

/* ==============================
   BANNER SUPERIOR
============================== */
.top-banner {
  width: 100%;
  background-color: var(--color-beige);
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70px; /* Controla la altura del banner */
}

/* ==============================
   LAYOUT GENERAL
============================== */
.section-title {
  font-family: 'Dream Avenue', var(--font-primary);
  text-align: center;
  color: #b66d4c;
  margin-bottom: var(--spacing-md);
  font-size: 2rem;
  font-weight: bold;
}

section {
  padding: var(--spacing-lg) var(--spacing-sm);
  /* margin-bottom: var(--spacing-xs); */ /* Espacio entre secciones pequeño */
  margin-bottom: 0; /* Eliminar margen entre todas las secciones */
}

.hidden {
  display: none;
}

/* ==============================
   HEADER Y NAVEGACIÓN
============================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-beige);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para enlaces dentro del contenido */
.content-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: var(--transition);
}

.content-link:hover {
    color: var(--color-primary-light);
}

.nav-main {
  padding: var(--spacing-sm);
}

.nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-item {
  margin: var(--spacing-xs) 0;
  position: relative;
}

/* Aplicar la fuente al menú y logo */
.nav-link {
  font-family: 'Dream Avenue', var(--font-primary);
  font-size: 1rem; /* Ajustar según se vea la fuente */
  padding: var(--spacing-xs);
  letter-spacing: 1.5px;
  color: #b66d4c;
  font-weight: bold;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary-light);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: var(--transition);
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

.logo {
  margin: var(--spacing-sm) 0;
}

/* Centrado del logo y el nombre */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-img {
  width: 120px;
  height: 120px;
  /* border-radius: 50%; */
}

/* ==============================
   HERO SECTION
============================== */
.hero {
  background-image: url('../images/buddha-hero.jpg'); /* Imagen específica, revisar mejor resolucion */
  background-size: cover;
  background-position: center;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
}

/* Estado inicial: overlay invisible */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Completamente transparente inicialmente */
  transition: background-color 1.5s ease; /* Transición suave */
}

/* Estado con overlay visible - lo voy a aplicar luego con Javasccript */
.hero.fade-in::before {
  background-color: rgba(0, 0, 0, 0.35); /* Nivel final de oscurecimiento - reducido */
}

/* La cita comienza invisible */
.hero-quote {
  font-family: 'Caviar Dreams', var(--font-primary);
  opacity: 0; /* Inicialmente invisible */
  transform: translateY(20px); /* Ligeramente abajo para efecto de entrada */
  transition: opacity 1s ease, transform 1s ease; /* Transición suave */
  transition-delay: 1s; /* Esperar a que el fondo se oscurezca primero */
}

/* Estado de cita visible - se aplicará con JS */
.hero-quote.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Estilos base para el hero content y quote */
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--spacing-md);
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-quote {
  font-family: 'Caviar Dreams', var(--font-primary);
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para mejorar legibilidad */
  padding: 1.2rem;
  border-radius: var(--border-radius);
  margin: 0 auto;
  max-width: 90%;
}

.hero-quote p {
  font-size: 1.5rem;
  margin-bottom: 0.5rem; /* Reducido de var(--spacing-sm) */
  line-height: 1.2; /* Interlineado reducido */
}

.hero-quote footer {
  font-size: 1rem;
  line-height: 1.2; /* Interlineado reducido también para el footer */
}

/* ==============================
   MONASTERIO SECTION
============================== */
.monasterio {
  background-image: url('../images/3.jpg'); /* Imagen específica 3.jpg */
  background-size: cover;
  background-position: center;
  position: relative;
}

.monasterio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(249, 241, 231, 0.85); /* Transparencia con el color de fondo */
}

.monasterio-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--spacing-sm);
}

.monasterio .section-title {
  position: relative;
  z-index: 1;
}

.highlighted-text {
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
}

/* ==============================
   ACTIVIDADES Y EVENTOS
============================== */
.actividades-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.tab {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--font-primary);
  color: var(--color-text-light);
  transition: var(--transition);
}

.tab.active {
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.tab:hover {
  color: var(--color-primary);
}

.tab-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hover-instructions {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

.actividades-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.actividad-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.actividad-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.actividad-info {
  padding: var(--spacing-sm);
}

.actividad-info h3 {
  font-family: var(--font-primary);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.hover-grow:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Estilo de botón para enlaces de plataformas - versión general */
a.platform-link {
  display: inline-block;
  color: var(--color-primary);
  padding: 2px 8px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
  background-color: transparent;
}

a.platform-link:hover {
  background-color: var(--color-beige-dark);
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Estilo de botón para enlaces de plataformas como Zoom */
.actividad-info a.platform-link {
  display: inline-block;
  color: var(--color-primary);
  padding: 2px 8px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
  background-color: transparent;
}

.actividad-info a.platform-link:hover {
  background-color: var(--color-beige-dark);
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Versión alternativa con ícono */
.actividad-info a.platform-link-icon::before {
  font-family: "Font Awesome 5 Free";
  content: "\f03d"; /* Ícono de video */
  margin-right: 5px;
}

/* ==============================
   ENTRADILLA ACTIVIDADES (usando estilos existentes)
============================== */

/* Ajuste específico para la entradilla en actividades */
.actividades-eventos .monasterio-content {
    margin-bottom: var(--spacing-md);
    max-width: 700px; /* Ligeramente más pequeño */
}

/* Mejorar visibilidad del enlace platform-link en esta sección */
.actividades-eventos .platform-link {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 4px 12px;
    font-weight: bold;
}

.actividades-eventos .platform-link:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* ==============================
   CÁPSULAS DE BHANTE
============================== */

/* Estilo para la sección de cápsulas con fondo verde sage del manual de marca*/
.capsulas {
  background-color: var(--color-secondary); /* Verde sage */
  position: relative;
  padding: var(--spacing-lg) var(--spacing-sm);
}

/* Cambiar el color del título para mejorar contraste */
.capsulas .section-title {
  color: var(--color-beige); /* Usar el color beige en lugar del color primario */
}

.video-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.video-instructions {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

.video-placeholder {
  background-color: var(--color-secondary-light);
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  background-image: url('../images/video-thumbnail.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.video-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
}

.play-button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  z-index: 2;
}

.play-button:hover {
  background-color: var(--color-primary-light);
  transform: scale(1.1);
}

.play-button i {
  font-size: 1.5rem;
}

/* ==============================
   TESTIMONIOS
============================== */
.testimonios-slider {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.testimonio-slide {
  padding: var(--spacing-md);
  background-color: var(--color-beige-dark);
  border-radius: var(--border-radius);
}

.testimonio-content {
  display: flex;
  flex-direction: column; /* Cambiado a columna para apilar elementos */
  align-items: center; /* Centrar horizontalmente */
  text-align: center; /* Centrar el texto */
}

.testimonio-imagen {
  margin-right: 0; /* Eliminar margen derecho */
  margin-bottom: var(--spacing-sm); /* Añadir espacio debajo de la imagen */
}

.testimonio-foto {
  width: 100px; /* Aumentado de 80px */
  height: 100px; /* Aumentado de 80px */
  border-radius: 50%; /* Mantener circular */
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Añadir sombra suave */
}

.testimonio-texto {
  width: 100%; /* Usar todo el ancho disponible */
}

.testimonio-nombre {
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}

.testimonio-mensaje {
  font-style: italic;
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  padding: 0 var(--spacing-xs);
}

.slider-arrow {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.slider-arrow:hover {
  background-color: var(--color-primary-light);
  transform: scale(1.1);
}

/* ==============================
   CONTACTO
============================== */
.contacto {
  background-image: url('../images/0.jpg'); /* Imagen específica 0.jpg */
  background-size: cover;
  background-position: center;
  position: relative;
}

.contacto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.contacto .section-title {
  color: var(--color-white);
  position: relative;
  z-index: 1;
}

.contacto-form {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: none;
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-secondary);
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
  background-color: var(--color-white);
}

.btn-submit {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  display: block;
  margin: 0 auto;
}

.btn-submit:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#form-status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    position: relative; /* Crea un nuevo contexto de apilamiento */
    z-index: 1;         /* Al mismo nivel que el formulario, o incluso 2 pra estar seguro */
                        /* También probar sin z-index primero, solo con position: relative */
    max-width: 600px; /* Para que tenga el mismo ancho que el formulario y se centre bien */
    margin-left: auto;  /* Para centrarlo si tiene max-width */
    margin-right: auto; /* Para centrarlo si tiene max-width */
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==============================
   SECCIÓN INVITACIÓN WHATSAPP
============================== */
.whatsapp-invite {
    background-color: var(--color-beige-dark);
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
}

.whatsapp-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
    background-color: var(--color-beige);
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.invite-title {
    font-family: 'Dream Avenue', var(--font-primary);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
}

.invite-description {
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.whatsapp-button {
    display: inline-block;
    background-color: #5a9a6e; /* Verde orgánico armonizado */
    color: white;
    font-family: var(--font-secondary);
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(90, 154, 110, 0.3);
}

.whatsapp-button:hover {
    background-color: #4a8560; /* Verde orgánico hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(90, 154, 110, 0.4);
}

.whatsapp-button i {
    font-size: 1.2rem;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==============================
   FOOTER extendido
   Mobile: stacked. Desktop (>=768px): 3 columnas alineadas arriba.
============================== */
.footer {
  background-color: var(--color-secondary);
  color: var(--color-text);
  padding: 2.2rem 1.2rem 1.6rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.footer-logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* Logo Paññābhūmi sobre fondo sage del footer: forzar tono crema
     (como el texto del footer) para que se integre. Pedido Bhante 2-jun. */
  filter: brightness(0) invert(1) brightness(0.97) sepia(0.15);
}
.footer-slogan {
  font-family: 'Dream Avenue', var(--font-primary);
  color: var(--color-white);
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin: 0;
  opacity: 0.92;
}
.footer-nav-title {
  font-family: var(--font-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  color: var(--color-white);
  opacity: 0.85;
  margin: 0 0 10px;
  font-weight: 600;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.92rem;
  font-family: var(--font-secondary);
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .footer-nav a:hover { opacity: 1; text-decoration: underline; }
}
.footer-meta {
  font-family: var(--font-secondary);
  color: var(--color-white);
  font-size: 0.85rem;
  opacity: 0.85;
}
.footer-meta-line { margin: 2px 0; }
.footer-meta-small { font-size: 0.78rem; opacity: 0.7; }

@media (min-width: 768px) {
  .footer { padding: 3rem 2rem 2rem; }
  .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
    text-align: left;
    align-items: start;
  }
  .footer-brand { align-items: flex-start; }
  .footer-meta { text-align: right; }
}

/* ==============================
   MEDIA QUERIES
============================== */
@media (min-width: 768px) {
  .nav-list {
    flex-direction: row;
    justify-content: space-around;
  }
  
  .nav-item {
    margin: 0 var(--spacing-sm);
  }
  
  /* Mantenemos el logo centrado incluso en pantallas grandes */
  .logo-container {
    flex-direction: column;
    text-align: center;
  }
  
  .logo h1 {
    margin-top: var(--spacing-xs);
    margin-left: 0;
  }
  
  .hero-content {
    padding-top: 30vh; /* Mantiene tu valor actual */
    padding-bottom: 0.7rem; /* Un poco más de espacio inferior en desktop */
    min-height: 80vh;
  }

  .hero-quote p {
    font-size: 1.8rem;
    line-height: 1.15; /* Interlineado aún más reducido */

  }
  
  .hero-quote footer {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  .highlighted-text {
    font-size: 1.5rem;
  }
}

@media (min-width: 992px) {
  section {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  /* Logo central (antes 150x150 -> 80x80 quedaba muy chico; 100x100 es
     balance entre presencia visual y ahorro de scroll). */
  .logo-img {
    width: 100px;
    height: 100px;
  }

  .logo h1 {
    font-size: 1.5rem;
  }

  .nav-link {
    font-size: 1.15rem;
  }
  
  .hero {
    height: 80vh;
  }
  
  .hero-quote p {
    font-size: 2.5rem;
  }
}

/* ==============================
   CÁPSULAS DE BHANTE - VIDEO
============================== */
.video-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
}

/* Hacer que los controles del video sean siempre visibles */
.video-player::-webkit-media-controls {
  opacity: 1 !important;
  visibility: visible !important;
}

.video-player::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}
/* Para Firefox */
.video-player {
  --mozilla-video-control-display: block !important;
}

.video-player:hover::-webkit-media-controls {
  opacity: 1;
}

/* Hacer que el contenedor del video tenga un poco de espacio abajo para los controles */
.video-wrapper {
  margin-bottom: 10px;
}

/* Para asegurar que el borde naranja se aplica correctamente a la imagen del testimonio */
.testimonio-foto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Estilos para centrar perfectamente el logo */

/* Estilo para la navegación principal */
.nav-main {
  padding: var(--spacing-sm);
  width: 100%;
}

/* Ajustar el contenedor de la lista de navegación */
.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Agrupar los elementos de navegación izquierdos */
.nav-left-group {
  display: flex;
  position: absolute;
  left: 0;
  width: calc(50% - 100px); /* Ajustar según el tamaño del logo */
  justify-content: space-around;
}

/* Agrupar los elementos de navegación derechos */
.nav-right-group {
  display: flex;
  position: absolute;
  right: 0;
  width: calc(50% - 100px); /* Ajustar según el tamaño del logo */
  justify-content: space-around;
}

/* Centrar el logo absolutamente */
.logo {
  margin: var(--spacing-sm) 0;
  position: relative;
  z-index: 2;
  /* No necesita position: absolute porque ya está centrado por el flex del padre */
}

/* Mantener el contenedor del logo centrado y limpio */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

/* Estilo para los elementos de navegación individuales */
.nav-item {
  margin: var(--spacing-xs) var(--spacing-sm);
  white-space: nowrap; /* Evitar que el texto se rompa */
}


/* Estilos para la navegación responsive */

/* Barra móvil - solo visible en mobile */
.mobile-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-beige);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 101;
}

/* Para separar el texto en el menu de hamburguesa */
.mobile-break {
  display: none;
}

.mobile-logo {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.mobile-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
}

/* Botón de hamburguesa */
.menu-toggle {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  cursor: pointer;
  position: relative;
  z-index: 102;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-primary);
  position: relative;
  transition: var(--transition);
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

/* Animación del botón hamburguesa cuando está activo */
.menu-toggle.active .hamburger {
  background-color: transparent;
}

.menu-toggle.active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle.active .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Estilos para el menú mobile */
.nav-main {
  transition: var(--transition);
}

/* Por defecto, ocultar elementos desktop en mobile */
.desktop-only {
  display: none;
}

/* =================================
   Estilos responsive para el mobile
==================================== */
@media (max-width: 767px) {
  /* 1. NAVEGACIÓN MÓVIL - ESTRUCTURA */
  .nav-main {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: var(--color-beige);
      padding-top: 80px;
      z-index: 100;
      transform: translateX(-100%); /* Oculto por defecto */
      opacity: 0;
  }
  
  .nav-main.open {
      transform: translateX(0);
      opacity: 1;
  }
  
  /* 2. ELEMENTOS DEL MENÚ */
  .nav-list {
      flex-direction: column;
      align-items: flex-start;
      padding: 0 8px !important; /* Valor optimizado */
  }
  
  header.header nav.nav-main ul.nav-list {
      font-size: 1rem !important;
  }
  
  .nav-left-group, 
  .nav-right-group {
      position: static;
      width: 100%;
      padding: 0 4px;
      justify-content: center;
  }
  
  .nav-item {
      margin: var(--spacing-sm) 0;
      width: 100%;
  }
  
  .nav-link {
      display: block;
      padding: 0.7rem 0;
      border-bottom: 1px solid var(--color-beige-dark);
      font-size: 1rem; /* Valor unificado */
  }
  
  .nav-link::after {
      display: none; /* Eliminar underline animation */
  }
  
  /* 3. LOGO Y BOTÓN DE MENÚ */
  .logo {
      margin: var(--spacing-md) 0;
  }
  
  .menu-toggle {
      padding: 10px;
      margin-right: 5px;
  }
  
  /* 4. HERO SECTION */
  .hero-content {
    padding-bottom: 0.5rem; /* Más espacio en la parte inferior para móvil */
    min-height: 70vh;
    padding-top: 20vh; /* Menos padding superior en móvil */
  }
  
  .hero-quote p {
      line-height: 1.3;
      font-size: 1.4rem;
      margin-bottom: 0.3rem;
  }
  
  .hero-quote footer {
      font-size: 1rem;
  }

  /* 5. TIPOGRAFÍA GENERAL */
  p {
      font-size: 1.1rem !important;
      line-height: 1.3 !important;
  }
  
  .mobile-break {
      display: inline;
  }

  /* 6. ESTRUCTURA DE CONTENIDO */
  .section-title {
      margin-bottom: 12px !important;
  }
  
  /* 7. CARDS Y COMPONENTES */
  .actividad-card {
      margin-bottom: 12px !important;
  }
  
  .actividad-img {
      height: 150px !important;
  }

  .actividades-eventos, .capsulas, .testimonios, .footer {
    padding-top: var(--spacing-xs) !important;    /*  Espaciado esta en :root donde el xs es 0.5 rem sm 1rem md 2rem */
    padding-bottom: var(--spacing-xs) !important; /* Usaremos xs q es 0.5rem (~8px) */
}

    .whatsapp-invite {
        padding: var(--spacing-sm) var(--spacing-xs);
    }
    
    .whatsapp-container {
        padding: var(--spacing-sm);
    }
    
    .invite-title {
        font-size: 1.5rem;
    }

}

/* Estilos para desktop */
@media (min-width: 768px) {
  .mobile-bar {
      display: none;
  }
  
  .desktop-only {
      display: block;
  }
  
  .nav-main {
      transform: none !important;
      opacity: 1 !important;
      position: static;
      height: auto;
      padding-top: 0;
  }
  
  /* Restaurar estilos de navegación desktop */
  .nav-list {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 0;
      margin: 0;
      width: 100%;
  }
  
  .nav-left-group {
      display: flex;
      position: absolute;
      left: 0;
      width: calc(50% - 100px);
      justify-content: space-around;
  }
  
  .nav-right-group {
      display: flex;
      position: absolute;
      right: 0;
      width: calc(50% - 100px);
      justify-content: space-around;
  }
  
  .nav-item {
      margin: var(--spacing-xs) var(--spacing-sm);
      white-space: nowrap;
  }
}

/* ==============================
   CÁPSULAS DE BHANTE
============================== */

/* Estilo para la sección de cápsulas con fondo verde sage del manual de marca*/
.capsulas {
  background-color: var(--color-secondary); /* Verde sage */
  position: relative;
  padding: var(--spacing-lg) var(--spacing-sm);
}

/* Cambiar el color del título para mejorar contraste */
.capsulas .section-title {
  color: var(--color-beige); /* Usar el color beige en lugar del color primario */
}

.video-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.video-instructions {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

.video-placeholder {
  background-color: var(--color-secondary-light);
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  background-image: url('../images/video-thumbnail.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.video-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
}

.play-button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  z-index: 2;
}

.play-button:hover {
  background-color: var(--color-primary-light);
  transform: scale(1.1);
}

.play-button i {
  font-size: 1.5rem;
}

/* ==============================
   TESTIMONIOS
============================== */
.testimonios-slider {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.testimonio-slide {
  padding: var(--spacing-md);
  background-color: var(--color-beige-dark);
  border-radius: var(--border-radius);
}

.testimonio-content {
  display: flex;
  flex-direction: column; /* Cambiado a columna para apilar elementos */
  align-items: center; /* Centrar horizontalmente */
  text-align: center; /* Centrar el texto */
}

.testimonio-imagen {
  margin-right: 0; /* Eliminar margen derecho */
  margin-bottom: var(--spacing-sm); /* Añadir espacio debajo de la imagen */
}

.testimonio-foto {
  width: 100px; /* Aumentado de 80px */
  height: 100px; /* Aumentado de 80px */
  border-radius: 50%; /* Mantener circular */
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Añadir sombra suave */
}

.testimonio-texto {
  width: 100%; /* Usar todo el ancho disponible */
}

.testimonio-nombre {
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}

.testimonio-mensaje {
  font-style: italic;
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  padding: 0 var(--spacing-xs);
}

.slider-arrow {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.slider-arrow:hover {
  background-color: var(--color-primary-light);
  transform: scale(1.1);
}

/* ==============================
   CONTACTO
============================== */
.contacto {
  background-image: url('../images/0.jpg'); /* Imagen específica 0.jpg */
  background-size: cover;
  background-position: center;
  position: relative;
}

.contacto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.contacto .section-title {
  color: var(--color-white);
  position: relative;
  z-index: 1;
}

.contacto-form {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: none;
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-secondary);
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
  background-color: var(--color-white);
}

.btn-submit {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  display: block;
  margin: 0 auto;
}

.btn-submit:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#form-status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    position: relative; /* Crea un nuevo contexto de apilamiento */
    z-index: 1;         /* Al mismo nivel que el formulario, o incluso 2 pra estar seguro */
                        /* También probar sin z-index primero, solo con position: relative */
    max-width: 600px; /* Para que tenga el mismo ancho que el formulario y se centre bien */
    margin-left: auto;  /* Para centrarlo si tiene max-width */
    margin-right: auto; /* Para centrarlo si tiene max-width */
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==============================
   SECCIÓN INVITACIÓN WHATSAPP
============================== */
.whatsapp-invite {
    background-color: var(--color-beige-dark);
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
}

.whatsapp-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
    background-color: var(--color-beige);
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.invite-title {
    font-family: 'Dream Avenue', var(--font-primary);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
}

.invite-description {
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.whatsapp-button {
    display: inline-block;
    background-color: #5a9a6e; /* Verde orgánico armonizado */
    color: white;
    font-family: var(--font-secondary);
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(90, 154, 110, 0.3);
}

.whatsapp-button:hover {
    background-color: #4a8560; /* Verde orgánico hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(90, 154, 110, 0.4);
}

.whatsapp-button i {
    font-size: 1.2rem;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==============================
   FOOTER extendido
   Mobile: stacked. Desktop (>=768px): 3 columnas alineadas arriba.
============================== */
.footer {
  background-color: var(--color-secondary);
  color: var(--color-text);
  padding: 2.2rem 1.2rem 1.6rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.footer-logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* Logo Paññābhūmi sobre fondo sage del footer: forzar tono crema
     (como el texto del footer) para que se integre. Pedido Bhante 2-jun. */
  filter: brightness(0) invert(1) brightness(0.97) sepia(0.15);
}
.footer-slogan {
  font-family: 'Dream Avenue', var(--font-primary);
  color: var(--color-white);
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin: 0;
  opacity: 0.92;
}
.footer-nav-title {
  font-family: var(--font-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  color: var(--color-white);
  opacity: 0.85;
  margin: 0 0 10px;
  font-weight: 600;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.92rem;
  font-family: var(--font-secondary);
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .footer-nav a:hover { opacity: 1; text-decoration: underline; }
}
.footer-meta {
  font-family: var(--font-secondary);
  color: var(--color-white);
  font-size: 0.85rem;
  opacity: 0.85;
}
.footer-meta-line { margin: 2px 0; }
.footer-meta-small { font-size: 0.78rem; opacity: 0.7; }

@media (min-width: 768px) {
  .footer { padding: 3rem 2rem 2rem; }
  .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
    text-align: left;
    align-items: start;
  }
  .footer-brand { align-items: flex-start; }
  .footer-meta { text-align: right; }
}

/* ==============================
   MEDIA QUERIES
============================== */
@media (min-width: 768px) {
  .nav-list {
    flex-direction: row;
    justify-content: space-around;
  }
  
  .nav-item {
    margin: 0 var(--spacing-sm);
  }
  
  /* Mantenemos el logo centrado incluso en pantallas grandes */
  .logo-container {
    flex-direction: column;
    text-align: center;
  }
  
  .logo h1 {
    margin-top: var(--spacing-xs);
    margin-left: 0;
  }
  
  .hero-content {
    padding-top: 30vh; /* Mantiene tu valor actual */
    padding-bottom: 0.7rem; /* Un poco más de espacio inferior en desktop */
    min-height: 80vh;
  }

  .hero-quote p {
    font-size: 1.8rem;
    line-height: 1.15; /* Interlineado aún más reducido */

  }
  
  .hero-quote footer {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  .highlighted-text {
    font-size: 1.5rem;
  }
}

@media (min-width: 992px) {
  section {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  /* Logo central (antes 150x150 -> 80x80 quedaba muy chico; 100x100 es
     balance entre presencia visual y ahorro de scroll). */
  .logo-img {
    width: 100px;
    height: 100px;
  }

  .logo h1 {
    font-size: 1.5rem;
  }

  .nav-link {
    font-size: 1.15rem;
  }
  
  .hero {
    height: 80vh;
  }
  
  .hero-quote p {
    font-size: 2.5rem;
  }
}

/* ==============================
   CÁPSULAS DE BHANTE - VIDEO
============================== */
.video-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
}

/* Hacer que los controles del video sean siempre visibles */
.video-player::-webkit-media-controls {
  opacity: 1 !important;
  visibility: visible !important;
}

.video-player::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}
/* Para Firefox */
.video-player {
  --mozilla-video-control-display: block !important;
}

.video-player:hover::-webkit-media-controls {
  opacity: 1;
}

/* Hacer que el contenedor del video tenga un poco de espacio abajo para los controles */
.video-wrapper {
  margin-bottom: 10px;
}

/* Para asegurar que el borde naranja se aplica correctamente a la imagen del testimonio */
.testimonio-foto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Estilos para centrar perfectamente el logo */

/* Estilo para la navegación principal */
.nav-main {
  padding: var(--spacing-sm);
  width: 100%;
}

/* Ajustar el contenedor de la lista de navegación */
.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Agrupar los elementos de navegación izquierdos */
.nav-left-group {
  display: flex;
  position: absolute;
  left: 0;
  width: calc(50% - 100px); /* Ajustar según el tamaño del logo */
  justify-content: space-around;
}

/* Agrupar los elementos de navegación derechos */
.nav-right-group {
  display: flex;
  position: absolute;
  right: 0;
  width: calc(50% - 100px); /* Ajustar según el tamaño del logo */
  justify-content: space-around;
}

/* Centrar el logo absolutamente */
.logo {
  margin: var(--spacing-sm) 0;
  position: relative;
  z-index: 2;
  /* No necesita position: absolute porque ya está centrado por el flex del padre */
}

/* Mantener el contenedor del logo centrado y limpio */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

/* Estilo para los elementos de navegación individuales */
.nav-item {
  margin: var(--spacing-xs) var(--spacing-sm);
  white-space: nowrap; /* Evitar que el texto se rompa */
}


/* Estilos para la navegación responsive */

/* Barra móvil - solo visible en mobile */
.mobile-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-beige);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 101;
}

/* Para separar el texto en el menu de hamburguesa */
.mobile-break {
  display: none;
}

.mobile-logo {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.mobile-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
}

/* Botón de hamburguesa */
.menu-toggle {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  cursor: pointer;
  position: relative;
  z-index: 102;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-primary);
  position: relative;
  transition: var(--transition);
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

/* Animación del botón hamburguesa cuando está activo */
.menu-toggle.active .hamburger {
  background-color: transparent;
}

.menu-toggle.active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle.active .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Estilos para el menú mobile */
.nav-main {
  transition: var(--transition);
}

/* Por defecto, ocultar elementos desktop en mobile */
.desktop-only {
  display: none;
}

/* =================================
   Estilos responsive para el mobile
==================================== */
@media (max-width: 767px) {
  /* 1. NAVEGACIÓN MÓVIL - ESTRUCTURA */
  .nav-main {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: var(--color-beige);
      padding-top: 80px;
      z-index: 100;
      transform: translateX(-100%); /* Oculto por defecto */
      opacity: 0;
  }
  
  .nav-main.open {
      transform: translateX(0);
      opacity: 1;
  }
  
  /* 2. ELEMENTOS DEL MENÚ */
  .nav-list {
      flex-direction: column;
      align-items: flex-start;
      padding: 0 8px !important; /* Valor optimizado */
  }
  
  header.header nav.nav-main ul.nav-list {
      font-size: 1rem !important;
  }
  
  .nav-left-group, 
  .nav-right-group {
      position: static;
      width: 100%;
      padding: 0 4px;
      justify-content: center;
  }
  
  .nav-item {
      margin: var(--spacing-sm) 0;
      width: 100%;
  }
  
  .nav-link {
      display: block;
      padding: 0.7rem 0;
      border-bottom: 1px solid var(--color-beige-dark);
      font-size: 1rem; /* Valor unificado */
  }
  
  .nav-link::after {
      display: none; /* Eliminar underline animation */
  }
  
  /* 3. LOGO Y BOTÓN DE MENÚ */
  .logo {
      margin: var(--spacing-md) 0;
  }
  
  .menu-toggle {
      padding: 10px;
      margin-right: 5px;
  }
  
  /* 4. HERO SECTION */
  .hero-content {
    padding-bottom: 0.5rem; /* Más espacio en la parte inferior para móvil */
    min-height: 70vh;
    padding-top: 20vh; /* Menos padding superior en móvil */
  }
  
  .hero-quote p {
      line-height: 1.3;
      font-size: 1.4rem;
      margin-bottom: 0.3rem;
  }
  
  .hero-quote footer {
      font-size: 1rem;
  }

  /* 5. TIPOGRAFÍA GENERAL */
  p {
      font-size: 1.1rem !important;
      line-height: 1.3 !important;
  }
  
  .mobile-break {
      display: inline;
  }

  /* 6. ESTRUCTURA DE CONTENIDO */
  .section-title {
      margin-bottom: 12px !important;
  }
  
  /* 7. CARDS Y COMPONENTES */
  .actividad-card {
      margin-bottom: 12px !important;
  }
  
  .actividad-img {
      height: 150px !important;
  }

  .actividades-eventos, .capsulas, .testimonios, .footer {
    padding-top: var(--spacing-xs) !important;    /*  Espaciado esta en :root donde el xs es 0.5 rem sm 1rem md 2rem */
    padding-bottom: var(--spacing-xs) !important; /* Usaremos xs q es 0.5rem (~8px) */
}

    .whatsapp-invite {
        padding: var(--spacing-sm) var(--spacing-xs);
    }
    
    .whatsapp-container {
        padding: var(--spacing-sm);
    }
    
    .invite-title {
        font-size: 1.5rem;
    }

}

/* Estilos para desktop */
@media (min-width: 768px) {
  .mobile-bar {
      display: none;
  }
  
  .desktop-only {
      display: block;
  }
  
  .nav-main {
      transform: none !important;
      opacity: 1 !important;
      position: static;
      height: auto;
      padding-top: 0;
  }
  
  /* Restaurar estilos de navegación desktop */
  .nav-list {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 0;
      margin: 0;
      width: 100%;
  }
  
  .nav-left-group {
      display: flex;
      position: absolute;
      left: 0;
      width: calc(50% - 100px);
      justify-content: space-around;
  }
  
  .nav-right-group {
      display: flex;
      position: absolute;
      right: 0;
      width: calc(50% - 100px);
      justify-content: space-around;
  }
  
  .nav-item {
      margin: var(--spacing-xs) var(--spacing-sm);
      white-space: nowrap;
  }
}

/* Hacer que el platform-link en monasterio-content se vea igual que en actividad-info */
.monasterio-content p a.platform-link {
    display: inline-block;
    color: var(--color-primary);
    padding: 2px 8px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.2s ease;
    background-color: transparent;
}

.monasterio-content p a.platform-link:hover {
    background-color: var(--color-beige-dark);
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
/* ==============================
   TIPOGRAFÍA - AJUSTES GLOBALES
============================== */

/* Aumentar subtítulos H3 */
.actividad-info h3 {
  font-size: 1.15rem;
}

@media (min-width: 768px) {
  .actividad-info h3 {
    font-size: 1.25rem;
  }
}

/* ==============================
   LEER MÁS - ACCORDION MONASTERIO
============================== */
.read-more-wrapper {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-sm);
}

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease;
  opacity: 0;
}

.read-more-content.open {
  max-height: 300px;
  opacity: 1;
}

.read-more-btn {
  background: none;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
  margin-top: var(--spacing-sm);
  transition: var(--transition);
}

.read-more-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ==============================
   LIGHTBOX - ZOOM DE IMAGEN
============================== */
.actividad-img-zoom {
  cursor: zoom-in;
}

.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md);
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 15px;
  right: 25px;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10000;
  line-height: 1;
  transition: var(--transition);
}

.lightbox-close:hover {
  color: var(--color-primary-light);
  transform: scale(1.2);
}

/* ==============================
   ACTIVIDADES - PIE DE SECCIÓN
============================== */
.actividades-footer {
  text-align: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
}

.btn-programacion {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-weight: bold;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(182, 109, 76, 0.3);
  font-size: 1rem;
}

.btn-programacion:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(182, 109, 76, 0.4);
}

.actividades-footer-text {
  color: var(--color-text-light);
  margin-top: var(--spacing-sm);
  font-style: italic;
  font-size: 0.95rem;
}

/* ==============================
   DONACIÓN CTA
============================== */
/* CTA de donación: dos columnas en desktop (foto + contenido), apilado en mobile.
   Imagen del Piṇḍapāta como evocación clásica del dāna. Texto inspirador,
   botón terracota prominente y sublink discreto a las formas de apoyo.

   Fondo blanco para diferenciarla visualmente de las secciones beige que la
   flanquean (Actividades arriba, Testimonios abajo). Sin esta separación las
   tres se ven como un solo bloque continuo. */
.donacion-cta {
  background-color: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-md);
}

.donacion-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  align-items: center;
}

.donacion-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 10px 30px rgba(74, 60, 49, 0.18);
}
.donacion-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}
/* Acento decorativo en la esquina inferior izquierda (paisley sutil) */
.donacion-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to top, rgba(74, 60, 49, 0.35), transparent);
  pointer-events: none;
}

.donacion-content {
  text-align: center;
}

.donacion-eyebrow {
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.78rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  font-style: italic;
}

.donacion-titulo {
  font-family: 'Dream Avenue', var(--font-primary);
  color: var(--color-primary);
  font-size: 2.2rem;
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.donacion-texto {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 28px;
}

.donacion-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Modifier para el .donar-botones cuando vive en el hero del index:
   no necesita margin-top (la gap del wrapper ya lo separa) */
.donacion-botones {
  margin-top: 0;
}

.btn-donacion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 16px 38px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(182, 109, 76, 0.32);
  letter-spacing: 0.5px;
}
.btn-donacion i { font-size: 1.05rem; }
@media (hover: hover) {
  .btn-donacion:hover {
    background-color: #a05b3d;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(182, 109, 76, 0.42);
    color: var(--color-white);
  }
}

.donacion-sublink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.92rem;
  font-family: var(--font-secondary);
  transition: color 0.2s ease, transform 0.2s ease;
}
.donacion-sublink i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .donacion-sublink:hover {
    color: var(--color-primary);
  }
  .donacion-sublink:hover i { transform: translateX(3px); }
}

/* Desktop: dos columnas. Imagen a la izquierda, contenido a la derecha. */
@media (min-width: 768px) {
  .donacion-cta {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  .donacion-inner {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--spacing-xl);
  }
  .donacion-content {
    text-align: left;
  }
  .donacion-texto {
    margin-left: 0;
  }
  .donacion-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
  }
  .donacion-titulo {
    font-size: 2.6rem;
  }
}

@media (max-width: 767px) {
  .donacion-cta {
    padding: var(--spacing-md) var(--spacing-sm);
  }
  .donacion-titulo {
    font-size: 1.8rem;
  }
  .actividades-footer {
    margin-top: var(--spacing-md);
  }
}

/* ============================================================
   Botones de donar — compartidos entre apoyo.html (3 lugares)
   e index.html (hero de "Apoyar la enseñanza").
   ============================================================ */
.donar-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.btn-donar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.4rem;
    border-radius: 30px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    border: 1.5px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    min-height: 44px;
}

.btn-donar i {
    font-size: 1.05rem;
}

.btn-donar:hover,
.btn-donar:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
    outline: none;
}

/* Botón PayPal — estilo terracota uniforme con los otros.
   Logo PayPal se renderiza en blanco con filter invert. */
.btn-donar-paypal {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-donar-paypal:hover,
.btn-donar-paypal:focus-visible {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-white);
}

/* Wordmark oficial PayPal forzado a blanco para contrastar con fondo terracota */
.btn-donar-paypal-logo {
    height: 1.25rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px);
    filter: brightness(0) invert(1);
}

/* Botones WU y Transferencia bancaria */
.btn-donar-secondary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-donar-secondary:hover,
.btn-donar-secondary:focus-visible {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-white);
}

@media (max-width: 600px) {
    .donar-botones {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .btn-donar {
        width: 100%;
    }
}

/* ==============================
   Página /contacto.html
   Card centrada (blanco) sobre fondo beige, como las demás páginas
   del sitio (apoyo, activities, online). Página discreta porque no
   está en el menú principal.
============================== */
.contacto-page {
  padding: 2.5rem 1rem 4rem;
  background: var(--color-beige);
  min-height: 50vh;
}
.contacto-page-inner {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-white);
  padding: 2.5rem 2rem;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(74, 60, 49, 0.08);
}
.contacto-intro {
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 1.8rem;
  text-align: center;
  font-family: var(--font-secondary);
}
.contacto-intro::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-primary);
  margin: 0 auto 1.2rem;
  opacity: 0.6;
}
.contacto-form .form-group {
  margin-bottom: 1.1rem;
}
.contacto-form label {
  display: block;
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 6px;
  font-weight: 500;
}
.contacto-form input,
.contacto-form select,
.contacto-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-beige-dark);
  border-radius: 10px;
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.contacto-form input:focus,
.contacto-form select:focus,
.contacto-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.contacto-form textarea { resize: vertical; min-height: 120px; }
.contacto-form .btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.6rem;
}
.contacto-form .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
@media (hover: hover) {
  .contacto-form .btn-submit:hover {
    background: #a05b3d;
    transform: translateY(-1px);
  }
}
.contacto-form-status {
  margin-top: 1rem;
  font-size: 0.92rem;
  min-height: 1.2em;
  color: var(--color-text-light);
}
.contacto-form-status.success { color: #2e7d4f; }
.contacto-form-status.error { color: #c0392b; }
.contacto-aviso {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--color-beige);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* ==============================
   Submenús de navegación (S3.4)
   Desktop: hover dropdown. Mobile: expandible al tap.
============================== */

/* Indicador visual de que el item tiene submenú */
.nav-item.has-submenu > .nav-link::after {
  /* Mantiene el subrayado existente, pero agregamos un chevron sutil */
}
.nav-link .nav-chevron {
  display: inline-block;
  font-size: 0.65rem;
  margin-left: 4px;
  opacity: 0.7;
  transition: transform 0.2s ease;
  vertical-align: middle;
}
.nav-item.has-submenu.expanded .nav-link .nav-chevron,
.nav-item.has-submenu:focus-within .nav-link .nav-chevron {
  transform: rotate(180deg);
}

/* Submenu: oculto por defecto */
.nav-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* === Mobile (hamburguesa abierta): submenú expandible === */
@media (max-width: 767px) {
  .nav-submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    background: rgba(182, 109, 76, 0.04);
    border-radius: 6px;
    margin-top: 4px;
  }
  .nav-item.has-submenu.expanded .nav-submenu {
    max-height: 400px;
    opacity: 1;
    padding: 6px 0;
  }
  .nav-submenu li {
    margin: 0;
    padding: 0;
  }
  .nav-submenu a {
    display: block;
    padding: 10px 28px;
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    letter-spacing: 0.3px;
  }
  .nav-submenu a:active { background: rgba(182, 109, 76, 0.08); }
}

/* === Desktop: dropdown al hover/focus === */
@media (min-width: 768px) {
  .nav-item.has-submenu {
    position: relative;
  }
  .nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-beige-dark);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(74, 60, 49, 0.14);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 100;
  }
  /* Mostrar dropdown solo en devices con puntero real (no sticky-hover en touch) */
  @media (hover: hover) {
    .nav-item.has-submenu:hover .nav-submenu,
    .nav-item.has-submenu:focus-within .nav-submenu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      transition-delay: 0s;
    }
  }
  /* Tablet/touch (iPad): el dropdown se abre con .expanded (toggle via JS).
     Uso !important porque en algunos paths el default opacity:0 + el transition
     de visibility:0s con delay 0.18s pelean con la entrada; con !important nos
     aseguramos de que se vea apenas se setea .expanded. */
  .nav-item.has-submenu.expanded > .nav-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    transition-delay: 0s !important;
  }
  .nav-submenu li { margin: 0; }
  .nav-submenu a {
    display: block;
    padding: 8px 16px;
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 0.88rem;
    text-decoration: none;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }
  @media (hover: hover) {
    .nav-submenu a:hover {
      background: var(--color-beige);
      color: var(--color-primary);
    }
  }
  /* Puente invisible entre el nav-link y el dropdown para que el hover no se rompa */
  .nav-item.has-submenu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
  }
}

/* Active marker: nav-link de la sección visible (IntersectionObserver) */
.nav-link.section-active,
.nav-submenu a.section-active {
  color: var(--color-primary);
  font-weight: 600;
}
.nav-submenu a.section-active::before {
  content: '· ';
  margin-right: 2px;
  color: var(--color-primary);
}

/* ==============================
   Active marker (doble affordance): bold + subrayado en el nav-link
   de la página actual. Reemplaza/refuerza el estilo viejo .nav-link.active
   que era muy sutil. Se aplica tanto a desktop como a mobile.
============================== */
.nav-link.active,
.nav-link.has-submenu-trigger.active {
  font-weight: 700;
  color: var(--color-primary);
}
.nav-link.active::after {
  width: 100%;
  height: 2.5px;
  background-color: var(--color-primary);
  bottom: -2px;
}
/* En desktop el subrayado se ve más limpio si la línea NO se hace al hover
   sobre items distintos al active (para no confundir cuál es el actual). */
@media (hover: hover) and (min-width: 768px) {
  .nav-link:not(.active):hover::after { opacity: 0.6; }
}

/* ==============================
   Logo central con submenu (desktop): el chevron abre el dropdown
   con las 8 secciones del home. En mobile el item INICIO de la
   hamburguesa cumple esa función (este logo es desktop-only).
============================== */
.mobile-only {
  /* Visible por defecto (mobile). En desktop se oculta abajo. */
}
@media (min-width: 768px) {
  li.nav-item.mobile-only,
  .mobile-only { display: none !important; }
}

/* Chevron AL LADO del logo central (no abajo, para no agregar altura
   al nav y empujar el hero). Position absolute relative al li.logo. */
.nav-item.logo.has-submenu {
  position: relative;
}
.logo-chevron {
  display: none; /* hidden en mobile (el logo no se ve) */
  font-size: 0.9rem;
  color: var(--color-primary);
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
@media (min-width: 768px) {
  .logo-chevron {
    display: inline-block;
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
  }
  @media (hover: hover) {
    .nav-item.logo.has-submenu:hover .logo-chevron,
    .nav-item.logo.has-submenu:focus-within .logo-chevron {
      opacity: 1;
      transform: translateY(-50%) translateX(3px);
    }
  }
}

/* === scroll-margin-top: offset para anchors que evita que queden
   tapados por el header sticky. ===
   El header tiene ~192px en desktop y ~70-90px en mobile.
   Aplica a TODAS las secciones con id, faqs, etc. */
section[id],
[id="audios"],
[id="videos"],
[id="biblioteca"],
[id="faq"],
[id="capsulas"],
[id="monasterio"],
[id="esta-semana"],
[id="actividades"],
[id="donacion"],
[id="testimonios"],
[id="whatsapp"],
[id="contacto"],
[id="encuentro-bhante"],
[id="eventos-especiales-section"],
[id="sesion-dominical"],
[id="meditacion-guiada"],
[id="pregunta-bhante"],
[id="campanas-section"],
[id="pindapata-section"],
[id="campania-50"] {
  scroll-margin-top: 100px;
}
@media (min-width: 768px) {
  section[id],
  [id="audios"], [id="videos"], [id="biblioteca"], [id="faq"],
  [id="capsulas"], [id="monasterio"], [id="esta-semana"],
  [id="actividades"], [id="donacion"], [id="testimonios"],
  [id="whatsapp"], [id="contacto"],
  [id="encuentro-bhante"], [id="eventos-especiales-section"],
  [id="sesion-dominical"], [id="meditacion-guiada"], [id="pregunta-bhante"],
  [id="campanas-section"], [id="pindapata-section"], [id="campania-50"] {
    scroll-margin-top: 140px;
  }
}

/* Submenú del logo: posicionado centrado debajo del logo */
.nav-submenu.nav-submenu-logo {
  /* Hereda casi todo de .nav-submenu, pero en desktop se centra justo
     debajo del logo. */
}
@media (min-width: 768px) {
  .nav-submenu.nav-submenu-logo {
    /* El submenu del logo aparece centrado un poquito mas abajo que
       los otros (porque el chevron está debajo del logo, no al lado). */
    top: 100%;
    margin-top: 4px;
  }
}

/* === Intro de sección (texto italic claro debajo del title).
   Reutilizable en cualquier página, no solo /media. === */
.repo-section-intro {
  text-align: center;
  color: var(--color-text-light);
  font-family: var(--font-primary);
  font-style: italic;
  margin-bottom: var(--spacing-md);
  margin-top: -8px;
}

/* La contacto-page header (section-title + intro) van en .container
   centrado, antes del card del form. Ajustar margin. */
.contacto-page > .container {
  margin-bottom: var(--spacing-md);
}
.contacto-page .section-title {
  margin-top: 0;
}

/* ==============================
   Menú móvil REFACTOR (override del CSS legacy)
   El menú legacy tenía .nav-left-group y .nav-right-group como <div>
   dentro del <ul> y eso rompía el layout en mobile (items en grid 2x2).
   Acá lo aplastamos a una lista vertical limpia, full-width, con
   submenús expandibles.
============================== */
@media (max-width: 767px) {
  header.header nav.nav-main {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-beige);
    padding: 80px 0 32px;
    z-index: 100;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.32s ease, opacity 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  header.header nav.nav-main.open {
    transform: translateX(0);
    opacity: 1;
  }

  /* Aplanar el layout: nav-list + nav-left-group + nav-right-group
     todos como columna full-width. */
  header.header nav.nav-main ul.nav-list,
  header.header nav.nav-main .nav-left-group,
  header.header nav.nav-main .nav-right-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0 !important;
  }

  header.header nav.nav-main .nav-item {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(74, 60, 49, 0.08);
    list-style: none;
  }
  /* Logo central NO se ve en mobile (ya está en mobile-bar) */
  header.header nav.nav-main .nav-item.logo {
    display: none !important;
  }
  /* INICIO mobile-only ya tiene display:list-item por defecto;
     desktop lo oculta. */

  header.header nav.nav-main .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 18px 28px !important;
    font-size: 1.05rem !important;
    font-family: 'Dream Avenue', var(--font-primary);
    color: var(--color-primary);
    letter-spacing: 1.2px;
    text-decoration: none;
    border-bottom: none !important;
    background: transparent;
    transition: background 0.15s ease;
  }
  header.header nav.nav-main .nav-link:active {
    background: rgba(182, 109, 76, 0.06);
  }
  /* Quitar el subrayado animado del nav-link en mobile (sobra) */
  header.header nav.nav-main .nav-link::after {
    display: none !important;
  }
  /* Active marker en mobile: solo bold (el subrayado es desktop) */
  header.header nav.nav-main .nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
    background: rgba(182, 109, 76, 0.04);
  }

  /* El chevron va al final del nav-link, alineado a la derecha */
  header.header nav.nav-main .nav-item.has-submenu .nav-link {
    flex: 1;
  }
  header.header nav.nav-main .nav-chevron {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    color: var(--color-primary);
    opacity: 0.85;
    font-size: 1rem;
    cursor: pointer;
    pointer-events: auto;  /* clickeable para expandir */
    transition: opacity 0.2s ease, background 0.15s ease;
    z-index: 2;
  }
  header.header nav.nav-main .nav-chevron:active {
    background: rgba(182, 109, 76, 0.08);
  }
  /* La rotación del chevron está en .has-submenu.expanded .nav-chevron arriba,
     pero acá tiene que respetar también el centrado vertical via flex (no transform). */
  header.header nav.nav-main .nav-item.has-submenu.expanded .nav-chevron {
    transform: rotate(180deg);
  }
  header.header nav.nav-main .nav-item.has-submenu {
    position: relative;
  }
  header.header nav.nav-main .nav-item.has-submenu.expanded .nav-chevron {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Submenu: indentado, fondo suave, transición smooth */
  header.header nav.nav-main .nav-submenu {
    background: rgba(182, 109, 76, 0.04) !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
  }
  header.header nav.nav-main .nav-submenu li {
    border-top: 1px solid rgba(74, 60, 49, 0.06);
    margin: 0;
    width: 100%;
  }
  header.header nav.nav-main .nav-submenu a {
    display: block !important;
    padding: 14px 28px 14px 52px !important;
    font-family: var(--font-secondary);
    font-size: 0.95rem !important;
    color: var(--color-text) !important;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background 0.15s ease;
  }
  header.header nav.nav-main .nav-submenu a:active {
    background: rgba(182, 109, 76, 0.08) !important;
  }
}

/* ============================================================
   Card de evento destacado (index.html "Actividades y eventos")
   Modificador .actividad-card--evento: marco terracota + badge
   superior con la fecha/estado. La imagen del flyer suele ser
   vertical (3:4) asi que ampliamos altura.
   ============================================================ */
.actividad-card--evento {
  position: relative;
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 14px rgba(182, 109, 76, 0.18);
}

.actividad-card--evento:hover {
  box-shadow: 0 8px 24px rgba(182, 109, 76, 0.28);
}

.actividad-card--evento .actividad-img {
  height: 320px;
  object-fit: cover;
  object-position: center;
}

.actividad-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.4rem 0.85rem;
  border-radius: 30px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .actividad-card--evento .actividad-img {
    height: 280px;
  }
  .actividad-card-badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
  }
}

/* Nota + CTA dentro de actividad-card (index.html sesion dominical
   presencial). Boton consistente con .btn-programacion pero compacto. */
.actividad-card-nota {
  color: var(--color-text-light);
  font-size: 0.92rem;
  font-style: italic;
  margin: 0.65rem 0 0.9rem;
  line-height: 1.5;
}

.actividad-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 3px 8px rgba(182, 109, 76, 0.25);
  font-size: 0.95rem;
}

.actividad-card-cta:hover,
.actividad-card-cta:focus-visible {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(182, 109, 76, 0.35);
  outline: none;
  color: var(--color-white);
}

.actividad-card-cta i {
  font-size: 0.9rem;
}


/* ============================================================
   Switcher de idioma ES|EN — pill sage sutil, integrado como
   nav-item dentro de .nav-right-group (después de APOYAR).
   Estilo coincide con tipografía del nav (Caviar Dreams).
   ============================================================ */
.nav-item.lang-switch {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 14px;
    padding: 4px 11px;
    border: 1px solid rgba(163, 172, 153, 0.45);
    border-radius: 14px;
    font-family: 'Caviar Dreams', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transition: border-color 0.25s ease, background 0.25s ease;
    white-space: nowrap;
}
.nav-item.lang-switch:hover {
    border-color: rgba(163, 172, 153, 0.85);
    background: rgba(163, 172, 153, 0.06);
}
.nav-item.lang-switch a {
    color: var(--color-text-light);
    text-decoration: none;
    padding: 2px 4px;
    transition: color 0.22s ease;
    line-height: 1;
}
.nav-item.lang-switch a:hover { color: var(--color-primary); }
.nav-item.lang-switch a.active {
    color: var(--color-secondary);
}
.nav-item.lang-switch .lang-sep {
    color: var(--color-text-light);
    opacity: 0.4;
}
/* En mobile el nav se vuelve drawer — la pill se acomoda
   al final del drawer, centrada. */
@media (max-width: 768px) {
    .nav-item.lang-switch {
        margin: 14px auto 8px;
        align-self: center;
        font-size: 0.78rem;
        letter-spacing: 2px;
        padding: 5px 14px;
    }
}