/* ========================================================================
   STYLE.CSS - ARCHIVO CSS UNIFICADO DEL PROYECTO NEUMA
   Consolidación de todos los archivos CSS en un solo archivo
   Enfoque: Mobile-First
   ======================================================================== */

/* ========================================================================
   BASE.CSS - ESTILOS GLOBALES, VARIABLES Y COMPONENTES COMUNES
   Contiene: Variables, Reset, Tipografí­a, Navbar y Footer Global
   ======================================================================== */

/* === 1. IMPORTACIÓN DE FUENTES === */
/* EB Garamond (Desde Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/* Acumin Pro (Desde tu Azure Storage) */
@font-face {
  font-family: 'Acumin Pro';
  src: url('https://neumastorage2025.blob.core.windows.net/esdibcontainerg9/fonts/Acumin-RPro.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('https://neumastorage2025.blob.core.windows.net/esdibcontainerg9/fonts/Acumin-ItPro.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('https://neumastorage2025.blob.core.windows.net/esdibcontainerg9/fonts/Acumin-BdPro.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('https://neumastorage2025.blob.core.windows.net/esdibcontainerg9/fonts/Acumin-BdItPro.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}


/* === 2. VARIABLES (ROOT) === */
:root {
  /* Tipografía Definida */
  --font-title: 'EB Garamond', serif;
  /* Para Títulos */
  --font-body: 'Acumin Pro', sans-serif;
  /* Para Textos */

  /* Paleta de Colores - Textos */
  --color-bg: #ffffff;
  --color-text: #5C5C5C;
  --color-title: #5C5C5C;

  /* Paleta de Colores - Fondos Secciones */
  --bg-medita: #ebdac4;
  --bg-escucha: #D3C4AE;
  --bg-siente: #D0DFA3;
  --footer-bg: #FAF7F2;

  /* Elementos UI */
  --circle-bg: #ECDFD3;

  /* Gradientes */
  --gradient-green: #B8D977;
  --gradient-yellow: #F5D07A;
  --gradient-beige: #F4E8D8;

  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
}

/* === 3. RESET Y BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Mantenemos el scroll suave nativo */
  height: 100%;
}

body {
  font-family: var(--font-body);
  /* Todo el cuerpo usa Acumin Pro por defecto */
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  font-family: var(--font-body);
}

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

ul {
  list-style: none;
}

/* === TIPOGRAFÍA APLICADA === */

/* Tí­tulos (EB Garamond) */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.logo-text {
  font-family: var(--font-title);
  font-weight: 650;
  color: var(--color-title);
  line-height: 1.2;
}

h1,
h2 {
  font-size: 3rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 0.9rem;
  font-weight: 400;
  font-family: var(--font-main);
  margin-top: 0.25rem;
}

/* Textos (Acumin Pro) */
p,
span,
li,
button,
input,
textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

/* Subtí­tulos Especí­ficos (Acumin Pro Italic) */
.hero-subtitle,
.card-subtitle,
.page-subtitle,
.section-subtitle,
.hero-corner-left,
.hero-corner-right {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 200;
  /* Usará Acumin-ItPro.otf */
}

/* === 4. UTILIDADES === */

/* Bloqueo de scroll (usado por JS al abrir menú móvil) */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
}

/* Botones Comunes */
.btn-back {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-title);
  color: #fff;
  border-radius: 1.563rem;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-family: var(--font-body);
}

.btn-back:hover {
  background-color: var(--color-text);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
}

.btn-more {
  display: inline-block;
  text-decoration: none;
  color: var(--color-title);
  border-bottom: 0.063rem solid var(--color-title);
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
  transition: opacity 0.3s ease;
  font-family: var(--font-body);
}

.btn-more:hover {
  opacity: 0.6;
}

/* Flecha de enlace grande */
.big-arrow-link img {
  width: 100px;
  margin-top: var(--spacing-sm);
  transition: transform 0.3s ease;
}

.big-arrow-link:hover img {
  transform: translateX(0.625rem);
}

/* === 5. NAVBAR (MOBILE FIRST) === */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}

.logo {
  z-index: 1003;
}

.logo img {
  width: 5.625rem;
  height: auto;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Enlaces Desktop (Ocultos en móvil) */
.desktop-links {
  display: none;
}

/* Menú Hamburguesa (Visible en móvil) */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 1.875rem;
  height: 1.125rem;
  cursor: pointer;
  z-index: 1003;
}

.menu-toggle span {
  display: block;
  height: 0.125rem;
  background-color: var(--color-title);
  transition: all 0.3s ease;
  border-radius: 0.125rem;
}

.menu-toggle span:nth-child(1),
.menu-toggle span:nth-child(3) {
  width: 100%;
}

.menu-toggle span:nth-child(2) {
  width: 60%;
}

/* Animación Toggle */
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(0.313rem, 0.313rem);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(0.313rem, -0.375rem);
}

/* Menú Desplegable (Móvil) */
.dropdown-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  overflow: hidden;
}

.dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  font-family: var(--font-title);
  /* Tí­tulos en el menú móvil quedan bien en Garamond */
  font-size: 1.8rem;
  color: var(--color-text);
  font-weight: 400;
  transition: color 0.3s ease;
}

.dropdown-menu a:hover {
  color: var(--color-title);
}

/* === 6. FOOTER GLOBAL (SIMPLE) === */
.simple-footer {
  background-color: var(--footer-bg);
  padding: var(--spacing-xxl) var(--spacing-lg);
  text-align: center;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  margin-bottom: var(--spacing-xl);
}

.footer-logo img {
  width: 150px;
  margin: 0 auto;
  padding-top: 1rem;
}

.footer-separator {
  width: 12.5rem;
  margin: var(--spacing-lg) auto;
  border: none;
  border-top: 0.063rem solid var(--color-title);
  opacity: 0.8;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg) var(--spacing-md);
  max-width: 25rem;
  margin: 0 auto;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-title);
}

/* ========================================================================
   MEDIA QUERIES GLOBALES (DESKTOP > 768px)
   ======================================================================== */
@media (min-width: 768px) {

  /* Tipografí­a Base Desktop */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-title);
    font-weight: 650;
    color: var(--color-title);
    line-height: 1.2;
  }

  h1,
  h2 {
    font-size: 3rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  /* --- Navbar Desktop --- */
  .navbar {
    padding: 1.5rem 3rem;
  }

  .logo img {
    width: 110px;
  }

  /* Menú Hamburguesa: VISIBLE en Desktop */
  .menu-toggle {
    display: flex;
    margin-left: 2rem;
  }

  /* Enlaces visibles directos */
  .desktop-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
  }

  .desktop-links a {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-text);
    transition: all 0.3s ease;
  }

  .desktop-links a:hover,
  .desktop-links a.active {
    color: var(--color-title);
    font-weight: 600;
  }

  /* Dropdown Menu (Estilo "Pop-up" Pequeño) */
  .dropdown-menu {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: auto;
    right: 3rem;
    width: 15.625rem;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 1.5rem;
    align-items: flex-start;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.625rem);
  }

  .dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-menu a {
    font-family: var(--font-body);
    /* En el popup de desktop queda mejor la Sans */
    font-size: 1.1rem;
    padding: 0.5rem 0;
    width: 100%;
    text-align: left;
    border-bottom: 0.063rem solid #f0f0f0;
  }

  .dropdown-menu a:last-child {
    border-bottom: none;
  }

  /* OCULTAR opciones que ya están fuera */
  .dropdown-menu a[href="index.html"],
  .dropdown-menu a[href="origen.html"],
  .dropdown-menu a[href="equipo.html"] {
    display: none;
  }

  /* --- Footer Desktop (Diseño Full Width) --- */
  .simple-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    width: 100%;
    max-width: none;
    margin: 0;
    background-color: var(--footer-bg);
    padding: 3rem max(4rem, calc((100% - 1400px) / 2));
  }

  .footer-logo {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .footer-logo img {
    width: 140px;
    margin: 0 3rem 0 7rem;
  }

  .footer-separator {
    width: 0.1rem;
    height: 5rem;
    background-color: var(--color-title);
    border: none;
    margin: 0 3rem;
    opacity: 0.7;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1rem 3rem;
    flex-grow: 1;
    max-width: 37.5rem;
  }

  .footer-links a {
    text-align: left;
    font-size: 1.4rem;
  }
}

/* ========================================================================
   PÁGINA: INDEX (Inicio)
   ======================================================================== */
/* ========================================================================
   INDEX.CSS - Estilos especí­ficos para la página de Inicio (Home)
   Dependencias: Requiere base.css cargado previamente
   ======================================================================== */

/* === 1. HERO SECTION (Primera Pantalla) === */
.hero-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centrado horizontal */

  /* Gradiente animado */
  background: linear-gradient(180deg, var(--gradient-green) 0%, var(--gradient-yellow) 50%, var(--gradient-beige) 100%);
  background-size: 100% 200%;
  animation: gradientShift 15s ease infinite;

  text-align: center;
  position: relative;

  /* AJUSTE MÓVIL: Padding superior para evitar el navbar y distribuir espacio */
  padding: 7rem 2rem 3rem;
}

/* Animación del fondo */
@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* --- ESTILOS BASE (MÓVIL - ORDEN VERTICAL) --- */

/* 1. Texto Superior: "Disfruta de tu momento" */
.hero-corner-right {
  position: static;
  /* En móvil no es absoluto */
  order: 1;
  /* Va primero */
  color: #ffffff;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.031rem;
  margin-bottom: auto;
  /* Empuja el resto hacia abajo */
}

/* 2. Logo Central */
.hero-logo {
  width: 250px;
  filter: brightness(0) invert(1);
  /* Blanco */
  order: 2;
  /* Va segundo */
  margin-bottom: 1rem;
}

/* 3. Subtí­tulo: "Deja el estrés atrás" */
.hero-subtitle {
  order: 3;
  /* Va tercero */
  font-size: 1.25rem;
  color: #ffffff;
  font-style: italic;
  letter-spacing: 0.031rem;
  margin-bottom: auto;
  /* Empuja el texto inferior hacia abajo */
}


/* 4. Texto Inferior: "Disfruta de tu momento" */
.hero-corner-left {
  position: static;
  /* En móvil no es absoluto */
  order: 4;
  /* Va último */
  color: #ffffff;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.031rem;
  margin-top: 2rem;
}


/* === 2. SECCIONES PRINCIPALES (Medita, Escucha, Siente) === */

/* Contenedor de tarjeta (Mobile: Columna vertical) */
.full-width-card {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
}

/* Fondos de color */
.bg-medita {
  background-color: var(--bg-medita);
}

.bg-escucha {
  background-color: var(--bg-escucha);
}

.bg-siente {
  background-color: var(--bg-siente);
}

/* Contenido interno */
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  max-width: 25rem;
}

.card-content h2 {
  font-size: 4rem;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--color-title);
}

.card-content .card-subtitle {
  font-size: 1.6rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  line-height: 1.5;
}

/* En móvil limitamos el ancho para que no sea ilegible */
.card-content .card-description {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  line-height: 1.4;
  max-width: 320px;
}

/* Cí­rculo con Icono */
.circle-icon {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: var(--spacing-md) 0;
}

.circle-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* AJUSTE MOBILE: Reordenamiento visual interno de las tarjetas */
.text-side,
.visual-side {
  display: contents;
}

.card-content h2 {
  order: 1;
}

.card-content .card-subtitle {
  order: 2;
}

.circle-icon {
  order: 3;
  margin: 0.7rem 0;
}

.card-content .card-description {
  order: 4;
}

.big-arrow-link {
  order: 5;
  margin-top: 0.5rem;
}


/* ========================================================================
   MEDIA QUERIES DESKTOP (Min-width: 768px)
   Aquí restauramos el diseño original que ya te gustaba
   ======================================================================== */
@media (min-width: 768px) {

  /* --- 1. HERO RESTAURADO PARA ESCRITORIO --- */
  .hero-container {
    padding: var(--spacing-lg);
    justify-content: center;
    /* Centrado vertical clásico */
  }

  .hero-logo {
    width: 300px;
    margin-bottom: var(--spacing-lg);
    order: unset;
    /* Quitamos el orden flex */
  }

  .hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    order: unset;
    /* Quitamos el orden flex */
  }

  /* Restauramos posición absoluta en las esquinas */
  .hero-corner-left,
  .hero-corner-right {
    position: absolute;
    bottom: var(--spacing-lg);
    font-size: 1.2rem;
    margin: 0;
    order: unset;
  }

  .hero-corner-left {
    left: var(--spacing-lg);
  }

  .hero-corner-right {
    right: var(--spacing-lg);
  }


  /* --- 2. TARJETAS ZIG-ZAG (Ajustes de Texto) --- */
  .full-width-card {
    min-height: auto;
    padding: 4rem 2rem;
    background-color: transparent !important;
  }

  .card-content {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    width: 100%;
    border-radius: 2.5rem;
    padding: 4rem 5rem;
    margin: 2rem auto;
  }

  .bg-medita .card-content {
    background-color: var(--bg-medita);
  }

  .bg-escucha .card-content {
    background-color: var(--bg-escucha);
  }

  .bg-siente .card-content {
    background-color: var(--bg-siente);
  }

  .text-side {
    display: flex;
    flex-direction: column;
    width: 60%;
    /* Ocupa el 60% de la tarjeta */
    text-align: left;
    align-items: flex-start;
    z-index: 5;
  }

  .visual-side {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    z-index: 10;
  }

  .text-side h2 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
  }

  /* CORRECCIÓN: Quitamos el límite de ancho en desktop para que se reparta bien */
  .card-content .card-description {
    max-width: 100%;
    /* Permite que el texto llene el contenedor text-side */
    font-size: 1.3rem;
  }

  .circle-icon {
    width: 625px;
    height: 625px;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
  }

  .circle-icon img {
    width: 90%;
    height: auto;
  }

  .normal-order .text-side {
    margin-right: auto;
  }

  .normal-order .visual-side {
    right: -220px;
  }

  .reverse-order {
    flex-direction: row-reverse;
  }

  .reverse-order .text-side {
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
  }

  .reverse-order .visual-side {
    left: -10rem;
  }
}

/* ========================================================================
   PÁGINA: MEDITA
   ======================================================================== */
/* ========================================================================
   MEDITA.CSS
   ======================================================================== */

/* Variable de color local para fácil clonación en Siente */
:root {
  --bg-medita-theme: #EAE0D5;
  /* Color beige/arena del wireframe */
  --color-medita-text: #5c5c5c;
  --color-medita-title: #5C5C5C;
}

/* === 1. HERO (Fondo Blanco) === */
.medita-hero {
  background-color: #fff;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-icon-container {
  width: 21.875rem;
  height: 21.875rem;
  border-radius: 50%;
  /*background-color: var(--bg-medita-theme); */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.hero-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.page-title {
  font-size: 4rem;
  color: var(--color-medita-title);
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.page-subtitle {
  font-size: 1.5rem;
  color: var(--color-medita-text);
  font-style: italic;
  font-weight: 300;
}


/* === 2. SECCIONES DE CONTENIDO (Fondo Beige) === */
.bg-medita-theme {
  background-color: var(--bg-medita-theme);
  padding: 4rem 1.5rem;
  min-height: 50vh;
  /* Asegura que ocupe espacio */
}

.pt-0 {
  padding-top: 0 !important;
}

.section-header {
  text-align: left;
  max-width: 50rem;
  margin: 0 auto 3rem;
}

.section-header h2 {
  font-size: 1.7rem;
  color: var(--color-medita-title);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 1.5rem;
  color: var(--color-medita-text);
  font-style: italic;
}


/* === 3. ACORDEONES === */
.accordion-item {
  max-width: 50rem;
  margin: 0 auto 2rem;
  border-bottom: 0.063rem solid rgba(0, 0, 0, 0.1);
  padding-bottom: 2rem;
}

.accordion-item:last-child {
  border-bottom: none;
}

/* Cabecera del item (Clickable) */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0;
}

.accordion-header h3 {
  font-size: 1.5rem;
  color: var(--color-medita-title);
  font-weight: 500;
  margin: 0;
}

.accordion-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

.arrow-icon {
  width: 1.25rem;
  /* Tamaño de la flecha */
  height: auto;
  display: block;
}

/* Texto de descripción (siempre visible) */
.accordion-preview {
  font-size: 1rem;
  color: var(--color-medita-text);
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 90%;
}


/* === 4. CONTENIDO DESPLEGABLE (ZIG-ZAG) === */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  opacity: 0;
}

/* Clase activa para abrir */
.accordion-item.active .accordion-content {
  max-height: 62.5rem;
  /* Altura suficiente para el contenido */
  opacity: 1;
  transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
  margin-top: 2rem;
}

/* Contenedor Zig-Zag */
.zig-zag-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem;
}

.step {
  max-width: 70%;
  /* No ocupan todo el ancho para notar el zig-zag */
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--color-medita-text);
  position: relative;
}

.step strong {
  font-weight: 600;
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

/* Lógica Zig-Zag CSS */
/* Impares a la izquierda */
.step:nth-child(odd) {
  align-self: flex-start;
  text-align: left;
}

/* Pares a la derecha */
.step:nth-child(even) {
  align-self: flex-end;
  text-align: right;
}




/* === MEDIA QUERIES === */
@media (min-width: 768px) {
  .medita-hero {
    padding: 8rem 2rem 6rem;
  }

  .page-title {
    font-size: 5rem;
  }

  .section-header,
  .accordion-item {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .step {
    font-size: 1.8rem;
  }

  .accordion-preview {
    font-size: 1.2rem;
  }

}

/* ... resto del código anterior ... */

.yoga-posture-img {
  /* Control de tamaño */
  width: 100%;
  /* Ocupa el ancho disponible */
  max-width: 25rem;
  /* Ancho máximo razonable (puedes bajarlo a 400px si las quieres más pequeñas) */
  height: auto;
  /* IMPORTANTE: Esto mantiene la proporción original sin deformar */
  max-height: 25rem;
  /* Lí­mite de altura para que las fotos verticales no sean eternas */

  /* Visualización */
  object-fit: contain;
  /* Asegura que se vea la imagen entera sin recortes */
  border-radius: 1.25rem;

  /* Posicionamiento */
  display: block;
  margin-top: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* 
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.yoga-posture-img:hover {
  transform: scale(1.02);
}
*/

/* ========================================================================
   PÁGINA: ESCUCHA
   ======================================================================== */
/* ========================================================================
   ESCUCHA.CSS - Estilos visuales ajustados
   ======================================================================== */

/* --- 1. CONFIGURACIÓN GENERAL Y NAVBAR --- */
body.bg-escucha-theme {
  background-color: #ffffff;
}

.bg-escucha-theme .navbar {
  background-color: #ffffff;
}

/* --- 2. INTRODUCCIÓN --- */
.page-intro {
  padding: 4rem 1rem 2rem;
  background-color: #ffffff;
  text-align: center;
}

.intro-icon img {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
  object-fit: contain;
}

.page-intro h1 {
  font-size: 3.5rem;
  color: var(--color-title);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-family: var(--font-title);
}

.page-intro p {
  font-size: 1.5rem;
  color: var(--color-text);
  font-style: italic;
  font-family: var(--font-main);
}

/* --- 3. BARRA DE BÚSQUEDA --- */
.search-section {
  background-color: #ffffff;
  padding: 0 1.5rem 3rem;
  width: 100%;
}

.search-container {
  max-width: 25rem;
  margin: 0 auto;
  position: relative;
}

.search-bar {
  width: 100%;
  padding: 1rem 1.5rem 1rem 3rem;
  font-family: var(--font-main);
  font-size: 1rem;
  border: none;
  border-radius: 1.25rem;
  background-color: #E2D5C8;
  color: #5C5C5C;
  transition: all 0.3s ease;
}

.search-bar::placeholder {
  color: #7A7A7A;
}

.search-bar:focus {
  outline: none;
  background-color: #DCCfc2;
}

/* Icono Lupa */
.search-container::before {
  content: '';
  background-image: url(https://neumastorage2025.blob.core.windows.net/esdibcontainerg9/imagenes_juntas_Neuma/iconografia_lupa.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  width: 2rem;
  height: 1.9rem;
  pointer-events: none;
}

/* --- 4. GRID DE SONIDOS (VISTA GALERÍA) --- */
.escucha-grid {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1.5rem 6rem;
  max-width: 62.5rem;
  margin: 0 auto;
}

.sound-card {
  position: relative;
  height: 15.625rem;
  border-radius: 3.125rem;
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.sound-card:hover {
  transform: scale(1.02);
}

.sound-card-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
}

.sound-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.sound-card h3 {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
  font-family: var(--font-main);
  letter-spacing: 0.031rem;
}


/* --- 5. VISTA DETALLE (VISTA REPRODUCTOR) --- */
.sound-detail-page {
  padding: 5rem 1.5rem 4rem;
  /* Padding superior aumentado para evitar solapamiento con navbar en móvil */
  min-height: 80vh;
  display: flex;
  justify-content: center;
  background-color: #F9F4EF;
}

.sound-detail-container {
  width: 100%;
  max-width: 37.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Imagen Principal */
.sound-detail-image {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1 / 1;
  border-radius: 2.5rem;
  overflow: hidden;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.detail-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Controles Flotantes (Contenedor) */
.sound-detail-controls {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;

  background: rgba(255, 255, 255, 0.3);
  /* Un poco más visible */
  backdrop-filter: blur(0.938rem);
  padding: 0.625rem 1.563rem;
  border-radius: 3.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.25rem 0.938rem rgba(0, 0, 0, 0.15);

  /* Asegura que el contenedor crezca si los botones crecen */
  width: auto;
  min-width: 300px;
}

/* Botones base */
.audio-btn-large {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  padding: 0;
}

.audio-btn-large:hover {
  transform: scale(1.1);
}

.audio-btn-large:active {
  transform: scale(0.95);
}

/* === TAMAÑO DE ICONOS (MÓVIL) === */
.icon-control {
  width: 35px;
  /* Tamaño decente para móvil */
  height: auto;
  filter: drop-shadow(0 0.125rem 0.188rem rgba(0, 0, 0, 0.3));
}

.icon-play-pause {
  width: 40px;
  /* Play destaca más */
  height: auto;
  filter: drop-shadow(0 0.125rem 0.188rem rgba(0, 0, 0, 0.3));
}

/* Textos Detalle */
.sound-detail-title {
  font-size: 2rem;
  color: var(--color-title, #5C5C5C);
  margin: 0;
  font-weight: 400;
}

.sound-detail-description {
  font-size: 0.5rem;
  line-height: 1.2;
  color: var(--color-text, #5C5C5C);
  max-width: 31.25rem;
}

.btn-back {
  display: inline-block;
  margin-top: 1rem;
  text-decoration: none;
  color: #ffffff;
  border: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  transition: all 0.3s ease;
}

/*
.btn-back:hover {
  background-color: #333;
  color: #fff;
  border-color: #333;
}
*/


/* ========================================================================
   6. MEDIA QUERIES DESKTOP (Min-width: 768px)
   Aquí­ está todo lo que cambia en pantallas grandes
   ======================================================================== */
@media (min-width: 768px) {

  /* Ajustes Generales */
  .page-intro {
    padding-top: 6rem;
  }

  /* --- GRID DE SONIDOS (Escritorio) --- */
  .escucha-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .sound-card {
    height: 18.75rem;
    border-radius: 2.5rem;
  }

  /* --- VISTA DETALLE / REPRODUCTOR (Escritorio) --- */
  .sound-detail-page {
    padding-top: 6rem;
  }

  /* Hacemos la imagen del reproductor más grande en escritorio */
  .sound-detail-image {
    max-width: 600px;
    border-radius: 3.75rem;
  }

  /* Controles más grandes y espaciados */
  .sound-detail-controls {
    padding: 0.625rem 1.25rem;
    gap: 2.5rem;
    bottom: 0.625rem;
  }

  /* === TAMAÑO DE ICONOS (ESCRITORIO - MÁS GRANDES) === */
  .icon-control {
    width: 120px;
    /* Avanzar/Retroceder grandes */
  }

  .icon-play-pause {
    width: 60px;
    /* Play muy grande */
  }

  .sound-detail-title {
    font-size: 3.5rem;
  }
}

/* ========================================================================
   PÁGINA: SIENTE
   ======================================================================== */
/* ========================================================================
   SIENTE.CSS
   Clon de medita.css con cambio de paleta de colores
   ======================================================================== */

:root {
  /* CAMBIO DE COLOR: Ajusta este HEX al color oficial de Siente */
  --bg-siente-theme: #D0DFA3;
  /* Azul suave por defecto */
  --color-siente-text: #5C5C5C;
  --color-siente-title: #5C5C5C;
}

/* === 1. HERO (Fondo Blanco) === */
.siente-hero {
  background-color: #fff;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-icon-container {
  width: 21.875rem;
  height: 21.875rem;
  border-radius: 50%;
  /*background-color: var(--bg-medita-theme); */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.hero-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.page-title {
  font-size: 5rem;
  color: var(--color-siente-title);
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.page-subtitle {
  font-size: 1.5rem;
  color: var(--color-siente-text);
  font-style: italic;
  font-weight: 300;
}


/* === 2. SECCIONES DE CONTENIDO (Fondo Color) === */
.bg-siente-theme {
  background-color: var(--bg-siente-theme);
  padding: 4rem 1.5rem;
  min-height: 50vh;
}

.pt-0 {
  padding-top: 0 !important;
}

.section-header {
  text-align: left;
  max-width: 50rem;
  margin: 0 auto 3rem;
}

.section-header h2 {
  font-size: 2.3rem;
  color: var(--color-siente-title);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 1.4rem;
  color: var(--color-siente-text);
  font-style: italic;
}


/* === 3. ACORDEONES (Estilos compartidos) === */
.accordion-item {
  max-width: 800px;
  margin: 0 auto 2rem;
  border-bottom: 0.063rem solid rgba(0, 0, 0, 0.1);
  padding-bottom: 2rem;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0;
}

.accordion-header h3 {
  font-size: 2rem;
  color: var(--color-siente-title);
  font-weight: 500;
  margin: 0;
}

.accordion-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

.arrow-icon {
  width: 20px;
  height: auto;
  display: block;
}

.accordion-preview {
  font-size: 1rem;
  color: var(--color-siente-text);
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 90%;
}


/* === 4. CONTENIDO DESPLEGABLE (ZIG-ZAG) === */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
  margin-top: 2rem;
}

.zig-zag-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem;
}

.step {
  max-width: 70%;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-siente-text);
  position: relative;
}

.step strong {
  font-weight: 600;
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

/* Lógica Zig-Zag */
.step:nth-child(odd) {
  align-self: flex-start;
  text-align: left;
}

.step:nth-child(even) {
  align-self: flex-end;
  text-align: right;
}


/* === MEDIA QUERIES === */
@media (min-width: 768px) {
  .siente-hero {
    padding: 8rem 2rem 6rem;
  }

  .page-title {
    font-size: 5rem;
  }

  .section-header,
  .accordion-item {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.siente-img {
  /* Control de tamaño inteligente */
  width: 100%;
  max-width: 400px;
  /* Ancho máximo para que no sea enorme en PC */
  height: auto;
  /* Mantiene proporción original */
  max-height: 400px;
  /* Lí­mite de altura */

  /* Visualización */
  object-fit: contain;
  border-radius: 20px;

  /* Posicionamiento */
  display: block;
  margin-top: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* 
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.siente-img:hover {
  transform: scale(1.02);
}
*/

/* ========================================================================
   PÁGINA: EQUIPO
   ======================================================================== */
/* ========================================================================
   EQUIPO.CSS
   ======================================================================== */

/* --- 1. INTRODUCCIÓN (Fondo Beige) --- */
.page-intro-section {
  background-color: var(--footer-bg);
  /* Beige unificado */
  width: 100%;
  padding: 4rem 1.5rem 2rem;
  margin: 0;
}

.intro-header,
.equipo-columns {
  max-width: 75rem;
  margin: 0 auto;
}

.intro-header {
  text-align: left;
  margin-bottom: 3rem;
  max-width: 90%;
}

.intro-header h1 {

  margin-bottom: 1rem;
  padding-top: 2rem;
}

.intro-separator {
  border: none;
  border-top: 1px solid var(--color-title);
  width: 100%;
  opacity: 0.5;
  margin-top: 1rem;
}

/* Columnas de Texto */
.equipo-columns {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: left;
  /* Alineación izquierda general */
  max-width: 90%;
}

.column h3 {
  font-size: 2.15rem;
  font-weight: 500;
  color: var(--color-title);
  margin: 1rem 0 1rem;
}

.column p {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* Espaciador para alinear visualmente las columnas sin tí­tulo */
.spacer {
  display: none;
  /* En móvil no hace falta */
}

/* --- 2. SECCIÓN VISUAL (Foto Izq | Gráficos + Proyecto Der) --- */
.equipo-visual-section {
  padding: 4rem 1.5rem;
  width: 100%;
  background-color: #fff;
}

.visual-content {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Lado Foto */
.team-photo-side {
  width: 100%;
}

.main-group-photo {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  object-fit: cover;
}

/* Lado Derecho (Gráficos + Texto) */
.team-right-side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Área de Gráficos (Collage) */
.graphics-area {
  position: relative;
  width: 100%;
  height: 28.125rem;
  /* Altura para distribuir iconos */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Posicionamiento relativo de iconos para imitar el dibujo */
.icon-formula {
  width: 320px;
  /* ESDIB + SJO = EXITO */
  z-index: 2;
}

.icon-star-filled {
  position: absolute;
  top: 0;
  left: -10%;
  width: 200px;
}

.icon-star-outline {
  position: absolute;
  top: 0.625rem;
  right: -10%;
  width: 250px;
}

.icon-star-small {
  position: absolute;
  bottom: -30px;
  left: -15%;
  width: 250px;
  transform: rotate(-15deg);
}

.icon-smile {
  position: absolute;
  bottom: 0;
  right: -10%;
  width: 200px;
  transform: rotate(10deg);
}

/* Texto Proyecto */

.proyecto-text-area {
  max-width: 80%;
  align-self: center;
}

.proyecto-text-area h2 {
  font-size: 2.5rem;
  color: var(--color-title);
  margin-bottom: 1.05rem;
  font-family: var(--font-title);
}

.proyecto-text-area p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 31.25rem;
  /* Ancho de lectura cómodo */
}

/* --- 3. CARRUSEL CONTAINER --- */
.equipo-carousel-section {
  padding: 4rem 0;
  /* Sin padding lateral para que el carrusel toque bordes si quiere */
  background-color: #fff;
  overflow: hidden;
  /* Importante para el marquee */
  display: flex;
  justify-content: center;
}


/* ========================================================================
   MEDIA QUERIES DESKTOP
   ======================================================================== */
@media (min-width: 768px) {

  .page-intro-section {
    padding: 6rem 2rem 4rem;
  }

  .intro-header h1 {
    font-size: 5rem;
  }

  /* 3 Columnas */
  .equipo-columns {
    flex-direction: row;
    gap: 4rem;
  }

  .column {
    flex: 1;
  }

  /* El espaciador simula la altura del tí­tulo "Quién" */
  .spacer {
    display: block;
    height: 4rem;
  }

  /* Layout Visual: Foto Izq (50%) - Contenido Der (40%) */
  .visual-content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .team-photo-side {
    width: 50%;
  }

  .team-right-side {
    width: 40%;
    padding-top: 2rem;
  }
}

/* ========================================================================
   PÁGINA: ORIGEN
   ======================================================================== */
/* ========================================================================
   ORIGEN.CSS - Estilos especí­ficos para Origen
   ======================================================================== */

/* --- 1. INTRODUCCIÓN (Fondo Color + Ancho Completo) --- */
.about-intro {
  background-color: var(--footer-bg);
  /* Beige unificado */
  width: 100%;
  max-width: none;
  padding: 4rem 1.5rem 0;
  /* Quitamos padding inferior para unir con la siguiente */
  margin: 0;
}

.intro-header,
.origin-columns {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.intro-header {
  text-align: left;
  margin-bottom: 3rem;
  max-width: 90%;
}

.intro-header h1 {

  margin-bottom: 1rem;
  padding-top: 2rem;
}

.intro-separator {
  border: none;
  border-top: 0.063rem solid var(--color-title);
  width: 100%;
  opacity: 0.5;
}

.origin-columns {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  text-align: left;
  max-width: 90%;
  padding-bottom: 4rem;
  /* Espacio visual antes de la siguiente sección */
}

.origin-column h3 {
  font-size: 2.15rem;
  font-weight: 500;
  color: var(--color-title);
  margin: 1rem 0 1rem;
}

.origin-column p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  padding: 0;
}


/* --- 2. IDENTIDAD (Fondo Color + Ancho Completo) --- */
.values-section {
  background-color: #ffff;
  /* Beige unificado */
  width: 100%;
  max-width: none;
  padding: 3.125rem 1.5rem 4rem;
  /* Sin padding superior para unir con la anterior */
  margin: 0;
}

.values-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 62.5rem;
  margin: 0 auto;
  align-items: flex-start;
  text-align: left;
}

.values-title {
  font-size: 1.7rem;
  color: var(--color-title);
  margin: 1rem 0 1rem;
  font-family: var(--font-title);
  line-height: 1.6;
  width: 60%;
  text-align: left;
  justify-self: center;
}

.definition-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 60%;
  text-align: left;
  justify-self: center;
}

.identity-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 1rem 0 1rem;
  max-width: 90%;
  justify-self: center;
}


/* --- 3. CARRUSEL (Fondo Color + Ancho Completo) --- */
.visual-gallery {
  background-color: #ffff;
  /* Beige unificado: AQUÍ ESTABA EL CAMBIO */
  width: 100%;
  max-width: none;
  /* Permitimos que el fondo ocupe todo */
  padding: 0 1.5rem 6rem;
  /* Padding inferior generoso antes del footer */
  margin: 0;
}

/* Contenedor interno para limitar el ancho visual del carrusel pero no el fondo */
.carousel-container-origen {
  width: 100%;
  max-width: 62.5rem;
  /* El carrusel sigue contenido */
  margin: 0 auto;
}


/* ========================================================================
   MEDIA QUERIES DESKTOP (Min-width: 768px)
   ======================================================================== */
@media (min-width: 768px) {

  /* Ajustes padding desktop */
  .about-intro {
    padding: 6rem 2rem 0;
  }

  .values-section {
    padding: 4rem 2rem;
  }

  .visual-gallery {
    padding: 0 2rem 6rem;
  }

  .intro-header h1 {
    font-size: 5rem;
  }

  /* Columnas Intro */
  .origin-columns {
    flex-direction: row;
    justify-content: space-between;
    gap: 4rem;
    text-align: left;
    padding-bottom: 6rem;
    /* Más aire en desktop */
  }

  .origin-column {
    flex: 1;
  }

  .origin-column p {
    padding: 0;
  }

  /* Identidad Desktop */
  .values-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .identity-text-side {
    flex: 1;
    max-width: 50%;
    padding-right: 2rem;
  }

  .values-title {
    font-size: 2.1rem;
    margin-bottom: 1.8rem;
  }

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

  .identity-image-side {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .identity-img {
    max-width: 450px;
  }
}

/* ========================================================================
   PÁGINA: COMUNIDAD
   ======================================================================== */
.community-container {
  max-width: 56.25rem;
  margin: 4rem auto;
  padding: 1.5rem 1rem;
}

.community-container p {
  font-size: 1rem;
  text-align: left;
  margin-bottom: 2rem;
  color: #666;
}


/* Formulario */
.upload-box {
  background: #FDFBF7;
  border: 2px dashed #C7B59D;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 4rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  border: 0.063rem solid #ccc;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
}

.btn-submit {
  background: #a4c3b2;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 1.875rem;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
  transition: background 0.3s ease;
}

.btn-submit:hover {
  background: #8fa38f;
}

.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Muro de Posts */
.posts-grid {
  display: grid;
  gap: 2rem;
}

.post-card {
  background: white;
  border: 0.063rem solid #eee;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: #888;
  font-size: 0.9rem;
}

.post-category {
  background: #E3D595;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
  color: #444;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: bold;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-top: 1rem;
  object-fit: cover;
  max-height: 400px;
}

.song-link {
  display: inline-block;
  margin-top: 1rem;
  color: #a4c3b2;
  text-decoration: none;
  font-weight: bold;
}

.song-link:hover {
  text-decoration: underline;
}

.post-audio {
  width: 100%;
  margin-top: 1rem;
  border-radius: 0.5rem;
  outline: none;
}

.post-audio::-webkit-media-controls-panel {
  background-color: #f5f5f5;
}


/* ========================================================================
   COMPONENTE: CARRUSEL (Equipo)
   ======================================================================== */
/* ========================================================================
   CARRUSEL.CSS (Versión Marquee Animado)
   Adaptado para integración en Neuma
   ======================================================================== */

.carousel {
  /* Variables de configuración */
  --items: 8;
  /* Número de miembros */
  --carousel-duration: 40s;
  --carousel-item-width: 250px;
  --carousel-item-height: 380px;
  --carousel-item-gap: 2rem;

  /* Ancho total del contenedor visible */
  width: 100%;
  max-width: 1200px;
  /* Lí­mite de ancho para que no se desmadre */
  height: var(--carousel-item-height);

  position: relative;
  overflow: hidden;
  /* Oculta lo que sale */
  margin: 0 auto;

  /* Máscara de desvanecimiento en los bordes */
  mask-image: linear-gradient(to right, transparent, black 10% 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10% 90%, transparent);
}

/* Ajuste de velocidad para pantallas grandes */
@media (min-width: 768px) {
  .carousel {
    --carousel-duration: 30s;
    --carousel-item-width: 280px;
  }
}

/* Pausar animación al pasar el ratón */
.carousel:hover>article {
  animation-play-state: paused;
}

/* --- TARJETA INDIVIDUAL (ARTICLE) --- */
.carousel>article {
  position: absolute;
  top: 0;
  /* Posición inicial fuera de pantalla a la derecha */
  left: 100%;

  width: var(--carousel-item-width);
  height: var(--carousel-item-height);

  display: flex;
  flex-direction: column;

  border-radius: 12px;
  background: #fff;
  /* Fondo blanco */
  box-shadow: 0 0.25rem 1.563rem rgba(0, 0, 0, 0.05);
  /* Sombra suave */
  overflow: hidden;

  /* ANIMACIÓN MARQUEE */
  will-change: transform;
  animation-name: marquee;
  animation-duration: var(--carousel-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* Retraso calculado para que salgan en orden: (Duración / Items) * Indice * -1 */
  animation-delay: calc(var(--carousel-duration) / var(--items) * (var(--items) - var(--i)) * -1);
}

/* Asignación de í­ndices para el cálculo del delay */
.carousel>article:nth-child(1) {
  --i: 1;
}

.carousel>article:nth-child(2) {
  --i: 2;
}

.carousel>article:nth-child(3) {
  --i: 3;
}

.carousel>article:nth-child(4) {
  --i: 4;
}

.carousel>article:nth-child(5) {
  --i: 5;
}

.carousel>article:nth-child(6) {
  --i: 6;
}

.carousel>article:nth-child(7) {
  --i: 7;
}

.carousel>article:nth-child(8) {
  --i: 8;
}

/* --- ESTILOS INTERNOS DE LA TARJETA --- */
.carousel>article img {
  width: 100%;
  height: 80%;
  /* La imagen ocupa el 80% */
  object-fit: cover;
  object-position: top center;
}

.carousel>article>div {
  padding: 1rem;
  text-align: center;
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.carousel>article h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-main);
}

.carousel>article p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.063rem;
}

/* --- KEYFRAMES --- */
@keyframes marquee {

  /* Empieza a la derecha (controlado por left: 100%) y se mueve hacia la izquierda */
  from {
    transform: translateX(0);
  }

  to {
    /* Se mueve la distancia total de todos los items + gaps */
    transform: translateX(calc((var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1));
  }
}

/* ========================================================================
   COMPONENTE: CARRUSEL ORIGEN
   ======================================================================== */
/* ========================================================================
   CARRUSEL-ORIGEN.CSS
   Estilos avanzados con Scroll Snap y Anchor Positioning
   ======================================================================== */

:root {
  --body-padding: 2rem;
  --card-width: 300px;
}

.carousel {
  display: grid;
  gap: 2rem;
  grid-auto-flow: column;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  anchor-name: --trip-carousel;
  counter-reset: day;

  /* --- CORRECCIÓN: LIMITAR ANCHO --- */
  width: 100%;
  max-width: 1000px;
  /* Limitamos el ancho para que no sea infinito */
  margin: 0 auto;
  /* Centramos el carrusel en la pantalla */
  /* -------------------------------- */

  padding-bottom: 2rem;

  /* hide scrollbar  */
  scrollbar-width: none;

  /* smooth scrolling  */
  scroll-behavior: smooth;

  /* Botones de navegación (Solo Desktop / Chrome Canary) */
  &::scroll-button(left) {
    content: "arrow_back_ios" / "Scroll Left";
    position-area: left;
    padding-left: 0.75rem;
    transform: translateX(-1rem);
  }

  &::scroll-button(right) {
    content: "arrow_forward_ios" / "Scroll Right";
    position-area: right;
    transform: translateX(1rem);
  }

  &::scroll-button(*) {
    position: absolute;
    position-anchor: --trip-carousel;
    z-index: 10;
    font-size: 1.5rem;
    font-family: "Material Symbols Outlined";
    font-variation-settings: "wght" 100;
    display: grid;
    place-items: center;
    width: 3rem;
    color: white;
    aspect-ratio: 1 / 1;
    border: 0.125rem solid dimgray;
    background: #333;
    border-radius: 100%;
    cursor: pointer;
    transition: font-variation-settings 0.25s ease, scale 0.25s ease;
  }

  &::scroll-button(*):disabled {
    border: 0.125rem solid #555;
    color: gray;
    opacity: 0.5;
  }

  &::scroll-button(*):not(:disabled):hover {
    font-variation-settings: "wght" 400;
    scale: 1.05;
  }

  /* Scroll Markers */
  scroll-marker-group: after;

  &::scroll-marker-group {
    position: fixed;
    position-anchor: --trip-carousel;
    position-area: bottom;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 10;
  }

  li::scroll-marker {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
  }

  li::scroll-marker:target-current {
    background: var(--color-title);
    transform: scale(1.2);
  }
}

.day-card {
  width: var(--card-width);
  height: 400px;
  position: relative;
  overflow: hidden;
  counter-increment: day-num;
  scroll-snap-align: center;
  border-radius: 0.75rem;
  container-type: scroll-state; /*En la validación, pone que "container-type" no existe, pero sí lo identifica VisualStudio*/

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Efecto Hover para Desktop */
  &:hover,
  &:focus {
    .meta {
      transform: translateY(0);
    }
  }

  /* Información de la tarjeta */
  .meta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1.5rem;
    transition: transform 0.4s ease;
    text-align: left;
  }

  h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.063rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
  }

  .desc {
    font-size: 1rem;
    opacity: 0.9;
  }
}

/* =========================================
   MEDIA QUERY MÓVIL (max-width: 768px)
   ========================================= */

   /* Estilo java carrusel decisión de los de 2º SJO, responsables del backend*/

@media (max-width: 768px) {

  .carousel::scroll-button(*) {
    display: none;
  }

  .day-card {
    width: 85vw;
  }

  .day-card .meta {
    transform: translateY(0) !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    padding-top: 3rem;
  }

  h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.063rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
  }

  .desc {
    font-size: 0.7rem;
  }
}