/* ===== PRUEBA OSCURA «Tierra» (2026-11-10) — no es la paleta de marca =====
   Inspirada en las referencias de Sofía: carbón cálido (Serenity), musgo, hueso, taupe, nogal. */
:root{
  --carbon:#1E1D1A;   /* fondo principal: casi negro, cálido */
  --carbon-2:#262520; /* secciones alternas */
  --musgo:#AAAE95;    /* banda verde salvia empolvado (referencia «Nature», 2026-11-10); antes #2E3726, demasiado oscuro */
  --musgo-tinta:#2B2A25; /* texto sobre la banda salvia */
  --salvia:#9C9D75;   /* rótulos */
  --hueso:#EEE7DE;    /* texto y títulos */
  --taupe:var(--acento);    /* botones y acento cursivo */
  --nogal:#684C36;
  --linea:rgba(238,231,222,.18);
  /* se reasignan los tokens de la maqueta */
  --fondo:var(--carbon); --fondo-2:var(--carbon-2);
  --tinta:#D9D1C6; --tinta-suave:#A79F94; --oro:var(--hueso); --oro-linea:var(--taupe);
  --rosa-texto:var(--salvia); --blanco:var(--carbon-2); --misty:var(--musgo);
}
body{background:var(--carbon);color:var(--tinta)}
h1,h2,h3{color:var(--hueso);font-weight:400}
h2 em,h1 em{font-style:italic;color:var(--taupe)}
.eyebrow{color:var(--salvia)}
.filete{background:var(--taupe);opacity:.6}

/* Botones: píldora taupe */
.btn{border-radius:999px;border-color:var(--taupe);color:var(--hueso);letter-spacing:.16em;padding:15px 34px}
.btn:hover{background:var(--taupe);color:var(--carbon)}
.btn.lleno{background:var(--taupe);border-color:var(--taupe);color:var(--carbon)}
.btn.lleno:hover{background:transparent;color:var(--taupe)}

/* Cabecera */
header{background:rgba(30,29,26,.82);border-bottom:1px solid var(--linea)}
.menu a{color:var(--hueso)}
.menu a:hover,.menu a.activo{color:var(--taupe)}
.menu a.activo{border-bottom-color:var(--taupe)}

/* Portada: óleo dorado oscurecido, a sangre */
.hero{background:linear-gradient(180deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.35) 45%,rgba(30,29,26,.92) 92%,var(--carbon)),url('img/fondo-oleo.jpg') center/cover !important}
.hero h1 .filo{color:var(--hueso);filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.hero .eyebrow{color:var(--hueso);filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))} /* mismo color que FILO (Sofía, 2026-11-10) */

/* La filosofía: carbón, cita en hueso, líneas finas */
.explica{background:var(--carbon)}
.explica .cita-intro,.filosofia .cita{color:var(--hueso)}
.explica .destacada{color:var(--taupe)}
.explica .rotulo-fuerzas{color:var(--salvia)}
.fuerzas{border-top:1px solid var(--linea)}
.fuerzas > div{border-right:1px solid var(--linea)}
.fuerzas span{color:var(--taupe);filter:none;opacity:.7}

/* Cursos: banda musgo, fotos en círculo como en Serenity */
.explica ~ .cursos,.cursos{background:var(--musgo)}
.curso{background:transparent;border:0;align-items:center;text-align:center}
.curso:hover{transform:none;box-shadow:none}
.curso .foto{width:min(240px,70%);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto;transition:transform .6s ease}
.curso:hover .foto{transform:scale(1.04)}
.curso .foto::after{background:linear-gradient(180deg,rgba(30,29,26,0) 40%,rgba(30,29,26,.55))}
.curso .num{left:0;right:0;bottom:18px;text-align:center;font-size:2.2rem;color:var(--hueso)}
.curso .cuerpo{padding:22px 10px 0;align-items:center}
.curso .tag{color:var(--salvia)}
.curso p{color:var(--tinta-suave)}
.curso .pie{width:100%;border-top:1px solid var(--linea);color:var(--hueso)}
.curso .pie .precio{color:var(--taupe)}
.pendiente{color:var(--salvia)}

/* Grupo: carbón con un círculo de línea fina como detalle */
.grupo{background:var(--carbon-2);overflow:hidden}
.grupo::before{content:"";position:absolute;width:340px;height:340px;border:1px solid var(--linea);border-radius:50%;right:8%;top:50%;transform:translateY(-50%);pointer-events:none}
.grupo .eyebrow{color:var(--salvia)}
.grupo .intro{color:var(--hueso)}

footer{background:#171613;border-top:1px solid var(--linea);color:var(--tinta-suave)}
.aviso{background:var(--taupe);color:var(--carbon)}
section{position:relative}

/* Grano de película: textura que suaviza el oscuro */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Interruptor entre versiones (solo maqueta) */
.cambiar-version{position:fixed;right:16px;bottom:16px;z-index:40;background:var(--hueso);color:var(--carbon);border-radius:999px;padding:10px 18px;font-size:.72rem;letter-spacing:.08em;box-shadow:0 6px 24px rgba(0,0,0,.35)}
@media (max-width:700px){.aviso{display:none}}

/* Banda salvia clara: texto en oscuro */
.explica ~ .cursos,.cursos{color:var(--musgo-tinta)}
.cursos h2,.cursos h3{color:var(--musgo-tinta)}
.cursos h2 em{color:var(--nogal)}
.cursos .eyebrow,.curso .tag{color:#55593F}
.cursos .filete{background:var(--nogal);opacity:.5}
.curso p,.cursos .pendiente{color:#4A4A40}
.curso .pie{border-top-color:rgba(43,42,37,.25);color:var(--musgo-tinta)}
.curso .pie .precio{color:var(--nogal)}
.cursos .btn{border-color:var(--musgo-tinta);color:var(--musgo-tinta)}
.cursos .btn:hover{background:var(--musgo-tinta);color:var(--hueso)}

/* ===== Fondos con imagen: selva y agua (prueba 2026-11-10) ===== */
/* Portada: palmeras entre la niebla (foto de Sofía), con velo carbón para que el título se lea */
.hero{background:
  linear-gradient(180deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.30) 40%,rgba(30,29,26,.85) 88%,var(--carbon)),
  url('fondos-prueba/sendero-luz.jpg') center 45%/cover !important}
/* Constelaciones en grupo: el agua (olas vistas desde arriba), oscurecida */
.grupo{background:
  linear-gradient(180deg,rgba(30,29,26,.78),rgba(30,29,26,.70) 50%,rgba(30,29,26,.85)),
  url('img/fondo-manifiesto.jpg') center/cover}
/* En ordenador, la foto se queda quieta mientras el texto sube (parallax suave) */
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .hero,.grupo{background-attachment:fixed !important}
}


/* Botones como en la prueba salvia (Sofía, 2026-11-10: «estos botones me gustan más así») */
.hero .btn.lleno{background:#E6E3DC;border-color:#E6E3DC;color:#2F332A}
.hero .btn.lleno:hover,.hero .btn.lleno:active,.hero .btn.lleno:focus-visible{background:rgba(47,51,42,.22);border-color:rgba(230,227,220,.35);color:#E6E3DC;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} /* al pulsar: verde hoja translúcido, como el aviso (Sofía, 2026-11-10) */
.aviso{background:#2F332A;color:#E6E3DC}

/* Difuminado de la portada (Sofía, 2026-11-10: «¿qué pasó con el difuminado? ponlo»).
   El velo va en una capa propia que baja con la sección; solo la foto se queda quieta (parallax).
   Antes iba en el mismo fondo fijo y, al bajar, el borde quedaba cortado. */
.hero{background:url('fondos-prueba/sendero-luz.jpg') center 45%/cover !important} /* DEFINITIVA (Sofía, 2026-11-10): «Sendero de luz», ampliada con IA x4, 2560 px */
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .hero{background-attachment:fixed !important}
}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  /* Arriba casi sin velo (Sofía: debe quedar claro como en su captura); oscurece solo hacia abajo para fundirse */
  background:linear-gradient(180deg,rgba(20,19,17,.32) 0%,rgba(20,19,17,.26) 45%,rgba(30,29,26,.62) 82%,#1E1D1A 100%)}
.hero > .wrap{position:relative;z-index:1}

/* TODOS los botones como «Ver los cursos» (Sofía, 2026-11-10: «los botones que sean siempre como el ver cursos, misma transición»)
   Reposo: píldora hueso, texto verde hoja. Al pasar / pulsar: verde hoja muy translúcido, borde hueso tenue, texto hueso. */
.btn,.btn.lleno,.hero .btn.lleno,.cursos .btn,.grupo .btn,.explica .btn,.explica button.btn{
  background:#E6E3DC;border:1px solid #E6E3DC;color:#2F332A;border-radius:999px;
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,backdrop-filter .35s ease}
.btn:hover,.btn:active,.btn:focus-visible,
.btn.lleno:hover,.hero .btn.lleno:hover,.hero .btn.lleno:active,.hero .btn.lleno:focus-visible,
.cursos .btn:hover,.grupo .btn:hover,.explica .btn:hover,.explica button.btn:hover{
  background:rgba(47,51,42,.22);border-color:rgba(230,227,220,.35);color:#E6E3DC;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Sobre la banda salvia (clara) el velo verde va más denso para que el texto hueso se lea */
.cursos .btn:hover,.cursos .btn:active,.cursos .btn:focus-visible{background:rgba(47,51,42,.72);border-color:rgba(47,51,42,.72)}


/* ===== TODA LA PÁGINA CON LOS COLORES DE LA PORTADA (Sofía, 2026-11-10: «cuadra todos los apartados con estos colores») =====
   Carbón #1E1D1A · Hueso #EEE7DE / #E6E3DC · Verde hoja #2F332A · Taupe var(--acento) (acento) · Oro solo en SOFÍA y logo.
   Fuera: el salvia #9C9D75/#AAAE95 y el nogal. */
:root{--salvia:var(--acento);--taupe-hondo:var(--acento-hondo)}
.eyebrow,.explica .rotulo-fuerzas{color:var(--acento)}

/* La filosofía: carbón (como la cabecera) */
.explica{background:#1E1D1A}
.explica h2,.explica .cita-intro,.explica .texto p{color:#EEE7DE}
.explica .texto p{color:#D9D1C6}
.explica h2 em,.explica .destacada{color:var(--acento)}

/* Cursos: banda HUESO (el claro de la paleta), texto verde hoja */
.explica ~ .cursos,.cursos{background:#EEE7DE;color:#2F332A} /* hueso de FILO (Sofía, 2026-11-10) */
.cursos h2,.cursos h3{color:#2F332A}
.cursos h2 em{color:var(--taupe-hondo)}
.cursos .eyebrow,.curso .tag{color:var(--taupe-hondo)}
.cursos .filete{background:var(--acento);opacity:1}
.curso p,.cursos .pendiente{color:#4A4E42}
.curso .pie{border-top-color:rgba(47,51,42,.18);color:#2F332A}
.curso .pie .precio{color:var(--taupe-hondo)}
/* Botón sobre hueso: misma píldora, con un borde verde hoja tenue para que se vea; al pasar, verde hoja */
.cursos .btn{background:#EEE7DE;border-color:rgba(47,51,42,.35);color:#2F332A}
.cursos .btn:hover,.cursos .btn:active,.cursos .btn:focus-visible{background:rgba(47,51,42,.85);border-color:rgba(47,51,42,.85);color:#E6E3DC}

/* Constelaciones en grupo: el agua con velo VERDE HOJA (el verde de la foto de portada) */
.grupo{background:linear-gradient(180deg,rgba(47,51,42,.86),rgba(47,51,42,.76) 50%,rgba(30,29,26,.92)),url('img/fondo-manifiesto.jpg') center/cover}
.grupo h2,.grupo .intro{color:#EEE7DE}
.grupo h2 em,.grupo .eyebrow{color:var(--acento)}
.grupo::before{border-color:rgba(238,231,222,.16)}

/* Pie: carbón, como la cabecera */
footer{background:#1E1D1A;color:var(--acento);border-top:1px solid rgba(238,231,222,.12)}

/* ===== PÁGINAS INTERIORES con el estilo de la portada (2026-11-10) ===== */
/* Banda de cabecera de cada página: el mismo bosque de luz, más oscurecido, con difuminado abajo */
.banda{background:url('fondos-prueba/sendero-luz.jpg') center 40%/cover !important;color:#EEE7DE;overflow:hidden}
.banda::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.45) 55%,rgba(30,29,26,.85) 88%,#1E1D1A 100%)}
.banda > .wrap{position:relative;z-index:1}
.banda h1{color:#EEE7DE !important;background:none !important;-webkit-text-fill-color:#EEE7DE !important;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.banda h1 em{color:var(--acento);-webkit-text-fill-color:var(--acento)}
.banda .eyebrow{color:#EEE7DE;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.banda p{color:#E6E3DC}
.banda .pendiente{color:var(--acento)}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.banda{background-attachment:fixed !important}}

/* Cursos (página): tarjetas sobre hueso, como en inicio */
.curso.vivido{background:transparent}
/* Constelaciones en grupo (página): dos columnas sobre el agua con velo verde hoja */
.dos{background:rgba(238,231,222,.14)}
.dos > div{background:rgba(30,29,26,.55)}
.dos h3{color:#EEE7DE}
.dos p{color:#D9D1C6}
.grupo .pendiente{color:var(--acento)}
/* La filosofía (página) */
.filosofia{background:#1E1D1A}
.filosofia .cita{color:#EEE7DE}
/* Contacto */
.contacto{background:#1E1D1A}
.contacto h2{color:#EEE7DE}
.contacto p{color:#D9D1C6}
.faq{background:#262520}
.faq h2{color:#EEE7DE}
.faq details{border-bottom-color:rgba(238,231,222,.14)}
.faq summary{color:#EEE7DE}
.faq summary::after{color:var(--acento)}
.faq details p{color:#B9B2A7}


/* ===== ACENTO VERDE en vez de taupe (Sofía, 2026-11-10: «estos detalles en ese color no, no combina»)
   --acento: sobre oscuro (menú activo, rótulos, cursivas, filetes) · --acento-hondo: el mismo verde más oscuro, sobre la banda hueso */
:root{--acento:#A9AE84;--acento-hondo:#6B7044}   /* DEFINITIVO: Oliva suave (Sofía, 2026-11-10) */

/* Banda de cursos: CLARA (blanco o gris) con difuminado oscuro arriba y abajo, para no perder la esencia
   (Sofía, 2026-11-10: «me gusta más blanco o gris pero que tenga un difuminado oscuro») */
:root{--banda-clara:#E6E3DC}                       /* gris (por defecto) */
html[data-banda="blanco"]{--banda-clara:#F5F4F1}    /* blanco roto */
.explica ~ .cursos,.cursos{background:
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.55) 50px,rgba(30,29,26,0) 150px,rgba(30,29,26,0) calc(100% - 150px),rgba(30,29,26,.55) calc(100% - 50px),#1E1D1A 100%),
  var(--banda-clara) !important}
.cursos .btn{background:var(--banda-clara)}
.selector-banda{position:fixed;left:16px;bottom:16px;z-index:41;display:flex;gap:6px;align-items:center;background:rgba(30,29,26,.88);border:1px solid rgba(238,231,222,.18);border-radius:999px;padding:6px 8px 6px 14px;font-size:.7rem;letter-spacing:.06em;color:#E6E3DC}
.selector-banda button{display:inline-flex;align-items:center;gap:6px;font:inherit;border-radius:999px;padding:5px 12px 5px 6px;cursor:pointer;background:transparent;color:#E6E3DC;border:1px solid rgba(230,227,220,.25)}
.selector-banda button i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.selector-banda button[aria-pressed="true"]{border-color:#E6E3DC;background:rgba(230,227,220,.12)}

/* Opción «Gris verdoso» para la banda de cursos: el tono de «Constelaciones en grupo», con difuminado oscuro (Sofía: «algo así me refiero») */
html[data-banda="verdoso"] .explica ~ .cursos,html[data-banda="verdoso"] .cursos{background:
  radial-gradient(ellipse 70% 60% at 50% 45%,rgba(90,98,88,.55),rgba(90,98,88,0) 70%),
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.5) 60px,rgba(30,29,26,0) 170px,rgba(30,29,26,0) 62%,rgba(30,29,26,.55) calc(100% - 80px),#1E1D1A 100%),
  #4D5249 !important;color:#EEE7DE}
html[data-banda="verdoso"] .cursos h2,html[data-banda="verdoso"] .cursos h3{color:#EEE7DE}
html[data-banda="verdoso"] .cursos h2 em,html[data-banda="verdoso"] .cursos .eyebrow,html[data-banda="verdoso"] .curso .tag,html[data-banda="verdoso"] .curso .pie .precio{color:var(--acento)}
html[data-banda="verdoso"] .curso p,html[data-banda="verdoso"] .cursos .pendiente{color:#D9D1C6}
html[data-banda="verdoso"] .curso .pie{border-top-color:rgba(238,231,222,.16);color:#EEE7DE}
html[data-banda="verdoso"] .cursos .filete{background:var(--acento)}
html[data-banda="verdoso"] .cursos .btn{background:#E6E3DC;border-color:#E6E3DC;color:#2F332A}
html[data-banda="verdoso"] .cursos .btn:hover,html[data-banda="verdoso"] .cursos .btn:active{background:rgba(47,51,42,.22);border-color:rgba(230,227,220,.35);color:#E6E3DC}

/* ===== (Sofía, 2026-11-10) 1) Menú: al pasar el cursor, ORO CLARO. 2) Botones: en reposo, cristal translúcido con borde hueso;
   al pasar el cursor, VERDE OLIVA translúcido ===== */
.menu a:hover,.menu a.activo:hover{color:#E4CC97}
.btn,.btn.lleno,.hero .btn.lleno,.cursos .btn,.grupo .btn,.explica .btn,.explica button.btn,
html[data-banda="verdoso"] .cursos .btn{
  background:rgba(47,51,42,.22);border:1px solid rgba(230,227,220,.35);color:#EEE7DE;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.btn:hover,.btn:active,.btn:focus-visible,.btn.lleno:hover,
.hero .btn.lleno:hover,.hero .btn.lleno:active,.hero .btn.lleno:focus-visible,
.cursos .btn:hover,.cursos .btn:active,.cursos .btn:focus-visible,.grupo .btn:hover,.explica .btn:hover,.explica button.btn:hover,
html[data-banda="verdoso"] .cursos .btn:hover,html[data-banda="verdoso"] .cursos .btn:active{
  background:rgba(169,174,132,.38);border-color:rgba(169,174,132,.7);color:#F4F1EA}
/* En las bandas claras (gris claro / blanco) el cristal no se vería: texto y borde oscuros */
html:not([data-banda="verdoso"]) .cursos .btn{background:rgba(47,51,42,.06);border-color:rgba(47,51,42,.4);color:#2F332A}
html:not([data-banda="verdoso"]) .cursos .btn:hover{background:rgba(107,112,68,.45);border-color:rgba(107,112,68,.8);color:#F4F1EA}
.menu a.activo{color:#E4CC97;border-bottom-color:#E4CC97} /* página activa también en oro claro (Sofía, 2026-11-10) */

/* «La filosofía» con fondo TRANSLÚCIDO: el bosque de la portada sigue por debajo, tras un velo carbón (Sofía, 2026-11-10) */
.explica{background:
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.84) 140px,rgba(30,29,26,.78) 50%,rgba(30,29,26,.88) calc(100% - 140px),#1E1D1A 100%),
  url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.explica{background-attachment:scroll,fixed !important}}

/* ===== FONDOS INTERCAMBIADOS (Sofía, 2026-11-10: «invierte el fondo de la filosofía con el de aprende a vivir») =====
   La filosofía → gris verdoso con difuminado oscuro · Cursos → translúcido sobre el bosque. Textos claros en ambas. */
.selector-banda{display:none}
.explica{background:
  radial-gradient(ellipse 70% 60% at 50% 45%,rgba(90,98,88,.55),rgba(90,98,88,0) 70%),
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.5) 60px,rgba(30,29,26,0) 170px,rgba(30,29,26,0) 62%,rgba(30,29,26,.55) calc(100% - 80px),#1E1D1A 100%),
  #4D5249 !important;background-attachment:scroll !important}
html[data-banda="verdoso"] .explica ~ .cursos,html[data-banda="verdoso"] .cursos{background:
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.84) 140px,rgba(30,29,26,.78) 50%,rgba(30,29,26,.88) calc(100% - 140px),#1E1D1A 100%),
  url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  html[data-banda="verdoso"] .cursos{background-attachment:scroll,fixed !important}}

/* ===== TRANSICIONES LIMPIAS entre secciones (Sofía, 2026-11-10: «queda un difuminado raro, cuida los detalles»)
   Regla: cada sección termina exactamente en el color con el que empieza la siguiente. Sin franjas intermedias. */
/* Portada → La filosofía: el bosque se funde directo en el gris verdoso (#4D5249), sin pasar por carbón */
.hero::before{background:linear-gradient(180deg,rgba(20,19,17,.32) 0%,rgba(20,19,17,.26) 45%,rgba(56,60,54,.72) 80%,#4D5249 100%) !important}
/* La filosofía: arranca en gris verdoso (sin oscurecer arriba) y termina en carbón para entrar en cursos */
.explica{background:
  radial-gradient(ellipse 70% 60% at 50% 45%,rgba(90,98,88,.45),rgba(90,98,88,0) 70%),
  linear-gradient(180deg,rgba(30,29,26,0) 0,rgba(30,29,26,0) 60%,rgba(30,29,26,.6) calc(100% - 90px),#1E1D1A 100%),
  #4D5249 !important;background-attachment:scroll !important}
/* Cursos → Grupo: el agua empieza en carbón y se abre a su velo verde */
.grupo{background:
  linear-gradient(180deg,#1E1D1A 0,rgba(47,51,42,.86) 150px,rgba(47,51,42,.76) 50%,rgba(30,29,26,.9) calc(100% - 60px),#1E1D1A 100%),
  url('img/fondo-manifiesto.jpg') center/cover}
/* Grupo: solo la foto del agua queda fija; el degradado baja con la sección (si no, el fundido superior se pierde) */
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.grupo{background-attachment:scroll,fixed !important}}
/* Difuminado de la portada más corto (Sofía, 2026-11-10: «un difuminado un poco menor»): empieza más abajo */
.hero::before{background:linear-gradient(180deg,rgba(20,19,17,.32) 0%,rgba(20,19,17,.24) 55%,rgba(20,19,17,.28) 74%,rgba(56,60,54,.75) 92%,#4D5249 100%) !important}
/* Aún más corto (Sofía: «menos»): el fundido ocupa solo el último ~12 % */
.hero::before{background:linear-gradient(180deg,rgba(20,19,17,.32) 0%,rgba(20,19,17,.22) 55%,rgba(20,19,17,.24) 86%,rgba(56,60,54,.8) 96%,#4D5249 100%) !important}
/* Fundido corto a NEGRO (carbón) (Sofía: «pero negro») */
.hero::before{background:linear-gradient(180deg,rgba(20,19,17,.32) 0%,rgba(20,19,17,.22) 55%,rgba(20,19,17,.26) 84%,rgba(30,29,26,.85) 95%,#1E1D1A 100%) !important}
/* La filosofía recoge ese negro y se abre despacio a su gris verdoso, sin escalón */
.explica{background:
  radial-gradient(ellipse 70% 60% at 50% 50%,rgba(90,98,88,.45),rgba(90,98,88,0) 70%),
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.7) 70px,rgba(30,29,26,.3) 160px,rgba(30,29,26,0) 260px,rgba(30,29,26,0) 60%,rgba(30,29,26,.6) calc(100% - 90px),#1E1D1A 100%),
  #4D5249 !important;background-attachment:scroll !important}

/* ===== VUELTA ATRÁS del intercambio (Sofía, 2026-11-10: «prefiero este apartado en oscuro como estaba antes y el siguiente en el verde») ===== */
/* La filosofía: oscuro translúcido sobre el bosque (arranca en el negro de la portada, termina en negro) */
.explica{background:
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.84) 140px,rgba(30,29,26,.78) 50%,rgba(30,29,26,.88) calc(100% - 140px),#1E1D1A 100%),
  url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important;background-attachment:scroll !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.explica{background-attachment:scroll,fixed !important}}
/* Cursos: gris verdoso con brillo central, abriéndose desde el negro y volviendo a él */
html[data-banda="verdoso"] .explica ~ .cursos,html[data-banda="verdoso"] .cursos{background:
  radial-gradient(ellipse 70% 60% at 50% 45%,rgba(90,98,88,.55),rgba(90,98,88,0) 70%),
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.6) 80px,rgba(30,29,26,.2) 180px,rgba(30,29,26,0) 260px,rgba(30,29,26,0) 62%,rgba(30,29,26,.55) calc(100% - 90px),#1E1D1A 100%),
  #4D5249 !important;background-attachment:scroll !important}
/* La filosofía: COLOR OSCURO liso, sin foto (Sofía, 2026-11-10: «color oscuro, no translúcido») */
.explica{background:#1E1D1A !important;background-attachment:scroll !important}

/* ===== BANDA NEGRA entre la portada y La filosofía (Sofía, 2026-11-10) =====
   Pausa en carbón liso: la portada se funde en negro, la banda respira y la filosofía (translúcida) arranca desde ese negro. */
.pausa{background:#1E1D1A;padding:clamp(56px,8vw,110px) 0;text-align:center}
.pausa .wrap{display:flex;justify-content:center;align-items:center;min-height:2px}
.filete-pausa{display:block;width:120px;height:1px;background:linear-gradient(90deg,rgba(228,204,151,0),#E4CC97,rgba(228,204,151,0))}
.pausa .frase-pausa{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);color:#EEE7DE;max-width:760px;margin:0 auto 26px;line-height:1.4}
/* La filosofía: otra vez translúcida sobre el bosque, empezando en negro */
.explica{background:
  linear-gradient(180deg,#1E1D1A 0,rgba(30,29,26,.84) 160px,rgba(30,29,26,.78) 50%,rgba(30,29,26,.88) calc(100% - 140px),#1E1D1A 100%),
  url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important;background-attachment:scroll !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.explica{background-attachment:scroll,fixed !important}}

/* ===== NUEVO APARTADO «Mi mirada» antes de La filosofía (2026-11-10) — frases literales de Sofía ===== */
/* Portada → gris verdoso con un difuminado MÁS SUAVE (largo y gradual) */
.hero::before{background:linear-gradient(180deg,rgba(20,19,17,.30) 0%,rgba(20,19,17,.22) 45%,rgba(40,43,38,.38) 66%,rgba(56,60,54,.66) 84%,#4D5249 100%) !important}
.pausa{display:none}
.enfoque{background:
  radial-gradient(ellipse 70% 55% at 50% 40%,rgba(90,98,88,.5),rgba(90,98,88,0) 70%),
  linear-gradient(180deg,rgba(30,29,26,0) 0,rgba(30,29,26,0) 62%,rgba(30,29,26,.6) calc(100% - 100px),#1E1D1A 100%),
  #4D5249;color:#EEE7DE;text-align:center}
.enfoque h2{color:#EEE7DE}
.enfoque h2 em{color:var(--acento)}
.enfoque .filete{background:var(--acento)}
.enfoque-lema{max-width:760px;margin:0 auto;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.4;color:#EEE7DE}
.enfoque-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);max-width:1000px;margin:clamp(48px,6vw,80px) auto 0;text-align:left}
.enfoque-tres > div{border-top:1px solid rgba(238,231,222,.18);padding-top:22px}
.enfoque-tres .eyebrow{color:var(--acento)}
.enfoque-tres p{margin-top:12px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.35rem;line-height:1.45;color:#E6E3DC}
@media (max-width:760px){.enfoque-tres{grid-template-columns:1fr}}
.enfoque-lema,.explica .cita-intro,.enfoque-tres p{text-wrap:balance}

/* Separación «Mi mirada» → «La filosofía» SIN difuminado: corte limpio (Sofía, 2026-11-10) */
.enfoque{background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(90,98,88,.5),rgba(90,98,88,0) 70%),#4D5249}
.explica{background:
  linear-gradient(180deg,rgba(30,29,26,.82) 0,rgba(30,29,26,.78) 50%,rgba(30,29,26,.88) calc(100% - 140px),#1E1D1A 100%),
  url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important}
.explica .desplegable{grid-template-rows:1fr !important;opacity:1 !important} /* explicación siempre a la vista (Sofía, 2026-11-10) */

/* Portada → «Mi mirada»: difuminado MÁS SUAVE (Sofía, 2026-11-10).
   Curva con muchas paradas (sin escalones) y todo en el mismo tono gris verdoso, para que no aparezca una franja más oscura. */
.hero::before{background:linear-gradient(180deg,
  rgba(20,19,17,.28) 0%,rgba(20,19,17,.20) 38%,
  rgba(77,82,73,.10) 46%,rgba(77,82,73,.20) 54%,rgba(77,82,73,.32) 62%,rgba(77,82,73,.45) 70%,
  rgba(77,82,73,.58) 77%,rgba(77,82,73,.70) 83%,rgba(77,82,73,.81) 88%,rgba(77,82,73,.90) 93%,rgba(77,82,73,.96) 97%,#4D5249 100%) !important}
/* «Mi mirada» arranca exactamente en #4D5249: el brillo central baja para no aclarar el borde superior */
.enfoque{background:radial-gradient(ellipse 65% 45% at 50% 62%,rgba(90,98,88,.45),rgba(90,98,88,0) 70%),#4D5249}

/* PRUEBA (Sofía, 2026-11-10): «Mi mirada» en COLOR OSCURO (carbón) en vez de gris verdoso.
   La portada se funde igual de suave, pero hacia el carbón, en un solo tono. */
.hero::before{background:linear-gradient(180deg,
  rgba(20,19,17,.28) 0%,rgba(20,19,17,.20) 38%,
  rgba(30,29,26,.12) 46%,rgba(30,29,26,.22) 54%,rgba(30,29,26,.34) 62%,rgba(30,29,26,.47) 70%,
  rgba(30,29,26,.60) 77%,rgba(30,29,26,.72) 83%,rgba(30,29,26,.83) 88%,rgba(30,29,26,.91) 93%,rgba(30,29,26,.97) 97%,#1E1D1A 100%) !important}
.enfoque{background:#1E1D1A}
/* PRUEBA: portada SIN difuminado abajo — la foto termina en corte limpio contra el carbón. Se mantiene solo el velo suave para leer el título. */
.hero::before{background:linear-gradient(180deg,rgba(20,19,17,.28) 0%,rgba(20,19,17,.20) 45%,rgba(20,19,17,.24) 100%) !important}
/* «Mi mirada» → solo UNA frase (Sofía, 2026-11-10), protagonista y con aire */
.enfoque{padding:clamp(90px,12vw,170px) 0}
.enfoque .enfoque-lema{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:900px;line-height:1.35}
.enfoque{background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(90,98,88,.5),rgba(90,98,88,0) 70%),#4D5249} /* la frase, sobre gris verdoso (Sofía, 2026-11-10) */

/* «Aprende a vivir en la filosofía» (cursos): CARBÓN LISO y SIN difuminados en sus dos bordes (Sofía, 2026-11-10) */
html[data-banda="verdoso"] .explica ~ .cursos,html[data-banda="verdoso"] .cursos{background:#1E1D1A !important;background-attachment:scroll !important}
/* La filosofía termina sin fundido (corte limpio contra cursos) */
.explica{background:linear-gradient(180deg,rgba(30,29,26,.82) 0,rgba(30,29,26,.78) 50%,rgba(30,29,26,.84) 100%),url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important}
/* El grupo empieza sin fundido (corte limpio contra cursos) */
.grupo{background:linear-gradient(180deg,rgba(47,51,42,.86) 0,rgba(47,51,42,.76) 50%,rgba(30,29,26,.9) calc(100% - 60px),#1E1D1A 100%),url('img/fondo-manifiesto.jpg') center/cover}
:root{--acento:#D4B06C;--acento-hondo:#A8813A} /* DETALLES EN DORADO en todas las secciones (Sofía, 2026-11-10); antes oliva #A9AE84 */
.explica .rotulo-fuerzas{color:#A9AE84 !important} /* «Las fuerzas del amor» en verde oliva (Sofía, 2026-11-10) */

/* PRUEBA (Sofía, 2026-11-10): cursos en BLANCO PIEDRA, cortes limpios, textos oscuros y detalles en dorado hondo */
html[data-banda] .explica ~ .cursos,html[data-banda] .cursos{background:#E7E4DE !important;color:#2B2A25}
html[data-banda] .cursos h2,html[data-banda] .cursos h3{color:#1E1D1A}
html[data-banda] .cursos h2 em,html[data-banda] .cursos .eyebrow,html[data-banda] .curso .tag,html[data-banda] .curso .pie .precio{color:#A8813A}
html[data-banda] .cursos .filete{background:#A8813A}
html[data-banda] .curso p,html[data-banda] .cursos .pendiente{color:#55574D}
html[data-banda] .curso .pie{border-top-color:rgba(30,29,26,.16);color:#2B2A25}
html[data-banda] .cursos .btn{background:transparent;border-color:rgba(30,29,26,.4);color:#1E1D1A;backdrop-filter:none}
html[data-banda] .cursos .btn:hover,html[data-banda] .cursos .btn:active,html[data-banda] .cursos .btn:focus-visible{background:rgba(107,112,68,.45);border-color:rgba(107,112,68,.8);color:#1E1D1A}
/* Portada → frase: difuminado MUY MUY SUAVE (Sofía, 2026-11-10). Solo el último ~20 %, en el mismo tono gris verdoso,
   con curva lenta (muchas paradas) para que no se note dónde empieza. */
.hero::before{background:linear-gradient(180deg,
  rgba(20,19,17,.28) 0%,rgba(20,19,17,.20) 45%,rgba(20,19,17,.20) 78%,
  rgba(77,82,73,.08) 81%,rgba(77,82,73,.18) 84%,rgba(77,82,73,.30) 87%,rgba(77,82,73,.44) 90%,
  rgba(77,82,73,.58) 93%,rgba(77,82,73,.72) 95.5%,rgba(77,82,73,.86) 97.8%,#4D5249 100%) !important}
.enfoque{background:radial-gradient(ellipse 60% 70% at 50% 60%,rgba(90,98,88,.45),rgba(90,98,88,0) 70%),#4D5249}
/* Corrección del «difuminado extraño» (Sofía, 2026-11-10):
   1) curva «smoothstep» repartida en el último 30 %: empieza y termina sin aceleración, así no se dibuja una línea;
   2) el apartado de la frase en gris verdoso LISO (el brillo central aclaraba su borde superior y no casaba con el final de la foto). */
.hero::before{background:linear-gradient(180deg,
  rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.16) 68%,
  rgba(77,82,73,0) 70%,rgba(77,82,73,.028) 73%,rgba(77,82,73,.104) 76%,rgba(77,82,73,.216) 79%,rgba(77,82,73,.352) 82%,
  rgba(77,82,73,.5) 85%,rgba(77,82,73,.648) 88%,rgba(77,82,73,.784) 91%,rgba(77,82,73,.896) 94%,rgba(77,82,73,.972) 97%,#4D5249 100%) !important}
.enfoque{background:#4D5249 !important}
/* Corrección de la franja clara a media foto: dos capas superpuestas, sin saltos.
   Capa 1 (encima): fundido smoothstep al gris verdoso en el último 30 %. Capa 2 (debajo): velo oscuro continuo para leer el título. */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 70%,rgba(77,82,73,.028) 73%,rgba(77,82,73,.104) 76%,rgba(77,82,73,.216) 79%,rgba(77,82,73,.352) 82%,
    rgba(77,82,73,.5) 85%,rgba(77,82,73,.648) 88%,rgba(77,82,73,.784) 91%,rgba(77,82,73,.896) 94%,rgba(77,82,73,.972) 97%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 100%) !important}
/* Fundido más FINO (Sofía: «no tan gordo»): misma curva smoothstep, ahora solo en el último 15 % */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 85%,rgba(77,82,73,.028) 86.5%,rgba(77,82,73,.104) 88%,rgba(77,82,73,.216) 89.5%,rgba(77,82,73,.352) 91%,
    rgba(77,82,73,.5) 92.5%,rgba(77,82,73,.648) 94%,rgba(77,82,73,.784) 95.5%,rgba(77,82,73,.896) 97%,rgba(77,82,73,.972) 98.5%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 100%) !important}

.hero{min-height:calc(100vh - 83px) !important;min-height:calc(100svh - 83px) !important} /* portada a pantalla completa (Sofía, 2026-11-10: «era más larga») */
/* Fundido portada → frase: sube un poco más y es algo más OSCURO (Sofía, 2026-11-10).
   Capa verde smoothstep desde el 78 %; debajo, el velo oscuro se intensifica suave hacia abajo. Termina en #4D5249 opaco (sin línea). */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 78%,rgba(77,82,73,.028) 80.2%,rgba(77,82,73,.104) 82.4%,rgba(77,82,73,.216) 84.6%,rgba(77,82,73,.352) 86.8%,
    rgba(77,82,73,.5) 89%,rgba(77,82,73,.648) 91.2%,rgba(77,82,73,.784) 93.4%,rgba(77,82,73,.896) 95.6%,rgba(77,82,73,.972) 97.8%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 66%,rgba(20,19,17,.26) 78%,rgba(20,19,17,.40) 90%,rgba(20,19,17,.48) 100%) !important}
/* Más FINA, más ABAJO y un poco más OSCURA (Sofía, 2026-11-10): verde smoothstep solo en el último 12 %; velo oscuro que se intensifica al final */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 88%,rgba(77,82,73,.028) 89.2%,rgba(77,82,73,.104) 90.4%,rgba(77,82,73,.216) 91.6%,rgba(77,82,73,.352) 92.8%,
    rgba(77,82,73,.5) 94%,rgba(77,82,73,.648) 95.2%,rgba(77,82,73,.784) 96.4%,rgba(77,82,73,.896) 97.6%,rgba(77,82,73,.972) 98.8%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 76%,rgba(20,19,17,.30) 86%,rgba(20,19,17,.50) 94%,rgba(20,19,17,.58) 100%) !important}
/* DEFINITIVO (Sofía, 2026-11-10: «así está perfecto, solo baja un poquito más»): misma forma, desplazada hacia abajo */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 91%,rgba(77,82,73,.028) 91.9%,rgba(77,82,73,.104) 92.8%,rgba(77,82,73,.216) 93.7%,rgba(77,82,73,.352) 94.6%,
    rgba(77,82,73,.5) 95.5%,rgba(77,82,73,.648) 96.4%,rgba(77,82,73,.784) 97.3%,rgba(77,82,73,.896) 98.2%,rgba(77,82,73,.972) 99.1%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 82%,rgba(20,19,17,.30) 90%,rgba(20,19,17,.50) 96%,rgba(20,19,17,.58) 100%) !important}
/* Un poco más oscuro (Sofía, 2026-11-10): mismas posiciones, el velo del tramo final más intenso */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 91%,rgba(77,82,73,.028) 91.9%,rgba(77,82,73,.104) 92.8%,rgba(77,82,73,.216) 93.7%,rgba(77,82,73,.352) 94.6%,
    rgba(77,82,73,.5) 95.5%,rgba(77,82,73,.648) 96.4%,rgba(77,82,73,.784) 97.3%,rgba(77,82,73,.896) 98.2%,rgba(77,82,73,.972) 99.1%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 80%,rgba(20,19,17,.38) 89%,rgba(20,19,17,.62) 95.5%,rgba(20,19,17,.72) 100%) !important}
/* Más FINO (Sofía, 2026-11-10): la misma oscuridad, comprimida en el último tramo */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 94%,rgba(77,82,73,.028) 94.6%,rgba(77,82,73,.104) 95.2%,rgba(77,82,73,.216) 95.8%,rgba(77,82,73,.352) 96.4%,
    rgba(77,82,73,.5) 97%,rgba(77,82,73,.648) 97.6%,rgba(77,82,73,.784) 98.2%,rgba(77,82,73,.896) 98.8%,rgba(77,82,73,.972) 99.4%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 86%,rgba(20,19,17,.38) 92%,rgba(20,19,17,.62) 97%,rgba(20,19,17,.72) 100%) !important}
/* Difuminado igual, un poquito MÁS ABAJO (Sofía, 2026-11-10): portada 20px más alta → se ve más selva */
.hero{min-height:calc(100vh - 63px) !important;min-height:calc(100svh - 63px) !important}
/* «Mi mirada» → «La filosofía»: el MISMO difuminado fino que la portada, en espejo (Sofía, 2026-11-10).
   Arranca en #4D5249 opaco (sin línea) y se abre a la imagen en ~60px con la misma curva suave. */
.explica{background:
  linear-gradient(180deg,#4D5249 0,rgba(77,82,73,.972) 6px,rgba(77,82,73,.896) 12px,rgba(77,82,73,.784) 18px,rgba(77,82,73,.648) 24px,rgba(77,82,73,.5) 30px,
    rgba(77,82,73,.352) 36px,rgba(77,82,73,.216) 42px,rgba(77,82,73,.104) 48px,rgba(77,82,73,.028) 54px,rgba(77,82,73,0) 60px),
  linear-gradient(180deg,rgba(30,29,26,.82) 0,rgba(30,29,26,.78) 50%,rgba(30,29,26,.84) 100%),
  url('fondos-prueba/sendero-luz.jpg') center 60%/cover !important;background-attachment:scroll !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.explica{background-attachment:scroll,scroll,fixed !important}}
/* ===== CONTACTO en la portada — mismo contenido y disposición que la web original (Sofía, 2026-11-10), en la paleta oscura ===== */
.contacto-portada{color:#EEE7DE}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;text-align:left}
@media (max-width:900px){.contacto-grid{grid-template-columns:1fr;gap:44px}}
.contacto-texto .eyebrow{display:block;margin-bottom:16px;color:var(--acento)}
.contacto-texto h2{font-size:clamp(2.2rem,3.6vw,3rem);font-weight:500;color:#EEE7DE;margin-bottom:22px}
.contacto-pregunta{font-family:'Cormorant Garamond',serif;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.4;margin-bottom:22px;color:#EEE7DE}
.contacto-intro{color:rgba(238,231,222,.82);margin-bottom:26px}
.contacto-medios{list-style:none;padding:0}
.contacto-medios li{margin-bottom:10px;color:rgba(238,231,222,.9)}
.contacto-medios strong{color:var(--acento);font-weight:600}
.contacto-medios a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(212,176,108,.35);transition:color .25s}
.contacto-medios a:hover{color:var(--acento)}
.contacto-form{background:#EEE7DE;border-radius:8px;padding:40px 38px;box-shadow:0 20px 50px rgba(0,0,0,.30)}
.contacto-form label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.05em;color:#1E1D1A;margin-bottom:8px}
.contacto-form input,.contacto-form textarea{width:100%;box-sizing:border-box;font-family:'Montserrat',sans-serif;font-size:.95rem;font-weight:300;color:#1E1D1A;background:#FBF8F3;border:1px solid rgba(30,29,26,.22);border-radius:4px;padding:13px 15px;margin-bottom:22px;transition:border-color .25s}
.contacto-form input:focus,.contacto-form textarea:focus{outline:none;border-color:#A8813A}
.contacto-form textarea{resize:vertical;min-height:130px;line-height:1.6}
.contacto-form .btn{background:#1E1D1A;color:#EEE7DE;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;backdrop-filter:none}
.contacto-form .btn:hover{background:#4D5249;color:#EEE7DE}
.contacto-form .btn[disabled]{opacity:.55;cursor:default}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-estado{margin-top:16px;font-size:.88rem;min-height:1.3em;color:#1E1D1A}
.form-estado.ok{color:#3f6b4a}
.form-estado.error{color:#a8443a}
/* Contacto con el MISMO fondo que la portada (Sofía, 2026-11-10): «Sendero de luz», mismo velo suave y el mismo difuminado fino abajo, hacia el carbón del pie */
.contacto-portada{background:
  linear-gradient(180deg,rgba(30,29,26,0) 0%,rgba(30,29,26,0) 94%,rgba(30,29,26,.028) 94.6%,rgba(30,29,26,.104) 95.2%,rgba(30,29,26,.216) 95.8%,rgba(30,29,26,.352) 96.4%,
    rgba(30,29,26,.5) 97%,rgba(30,29,26,.648) 97.6%,rgba(30,29,26,.784) 98.2%,rgba(30,29,26,.896) 98.8%,rgba(30,29,26,.972) 99.4%,#1E1D1A 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 86%,rgba(20,19,17,.38) 92%,rgba(20,19,17,.62) 97%,rgba(20,19,17,.72) 100%),
  url('fondos-prueba/sendero-luz.jpg') center 45%/cover !important;background-attachment:scroll !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.contacto-portada{background-attachment:scroll,scroll,fixed !important}}
/* Contacto: CAPA TRANSLÚCIDA VERDE (gris verdoso) encima de la foto (Sofía, 2026-11-10; antes negra) */
.contacto-portada{background:
  linear-gradient(180deg,rgba(30,29,26,0) 0%,rgba(30,29,26,0) 94%,rgba(30,29,26,.028) 94.6%,rgba(30,29,26,.104) 95.2%,rgba(30,29,26,.216) 95.8%,rgba(30,29,26,.352) 96.4%,
    rgba(30,29,26,.5) 97%,rgba(30,29,26,.648) 97.6%,rgba(30,29,26,.784) 98.2%,rgba(30,29,26,.896) 98.8%,rgba(30,29,26,.972) 99.4%,#1E1D1A 100%),
  linear-gradient(rgba(47,51,42,.6),rgba(47,51,42,.6)),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 86%,rgba(20,19,17,.38) 92%,rgba(20,19,17,.62) 97%,rgba(20,19,17,.72) 100%),
  url('fondos-prueba/sendero-luz.jpg') center 45%/cover !important;background-attachment:scroll !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.contacto-portada{background-attachment:scroll,scroll,scroll,fixed !important}}
/* Contacto: fondo LISO gris verdoso, el mismo de «Mi mirada» (#4D5249), sin foto ni capas (Sofía, 2026-11-10) */
.contacto-portada{background:#4D5249 !important;background-attachment:scroll !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){.contacto-portada{background-attachment:scroll !important}}
/* ===== CURSOS — opción 2: un curso a la vez, SIN fotos, sobre el gris verdoso de «Mi mirada» (Sofía, 2026-11-10) ===== */
.cursos-uno{background:#4D5249;color:#EEE7DE;text-align:center;padding:clamp(90px,12vw,160px) 0}
.cursos-uno .eyebrow{color:var(--acento)}
.cursos-uno h2{font-size:clamp(2.4rem,5.4vw,3.8rem);line-height:1.08;margin-top:18px;color:#EEE7DE;text-wrap:balance}
.cu-frase{max-width:720px;margin:18px auto 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.4;color:#EEE7DE;text-wrap:balance}
.cursos-uno .btn{margin-top:30px}
.cu-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:34px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem}
.cu-nav button{background:none;border:1px solid rgba(238,231,222,.3);color:#EEE7DE;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1rem;transition:border-color .2s}
.cu-nav button:hover,.cu-nav button:focus-visible{border-color:var(--acento);outline:none}
.cu-cnt{color:var(--acento);min-width:5ch}
/* ===== CURSOS — opción 1: LISTA EDITORIAL sobre el gris verdoso de «Mi mirada» (Sofía, 2026-11-10). Sustituye a la opción 2. ===== */
.cursos-lista{background:#4D5249;color:#EEE7DE;padding:clamp(90px,12vw,150px) 0}
.cursos-lista .section-head{text-align:center}
.cursos-lista .eyebrow{color:var(--acento)}
.cursos-lista h2{color:#EEE7DE}
.cursos-lista h2 em{color:var(--acento)}
.cursos-lista .filete-pausa{margin:18px auto 0}
.cl-lista{list-style:none;margin:clamp(36px,5vw,56px) auto 0;padding:0;max-width:900px}
.cl-lista li{border-top:1px solid rgba(238,231,222,.18)}
.cl-lista li:last-child{border-bottom:1px solid rgba(238,231,222,.18)}
.cl-lista a{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;align-items:center;gap:18px;padding:26px 4px;text-decoration:none;color:#EEE7DE;position:relative}
.cl-n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--acento)}
.cl-t{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;transition:transform .35s ease,color .35s}
.cl-t small{display:block;font-style:italic;font-size:1.05rem;color:#D9D1C6;margin-top:4px}
.cl-d{font-family:'Montserrat',sans-serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#D9D1C6;white-space:nowrap}
.cl-d b{color:var(--acento);font-weight:500}
.cl-ver{position:absolute;right:22%;top:50%;width:170px;aspect-ratio:4/5;background-size:cover;background-position:center;border-radius:3px;opacity:0;transform:translateY(-50%) scale(.94) rotate(-2deg);transition:opacity .35s,transform .45s;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:2}
.cl-lista a:hover .cl-ver,.cl-lista a:focus-visible .cl-ver{opacity:1;transform:translateY(-50%) scale(1) rotate(-2deg)}
.cl-lista a:hover .cl-t,.cl-lista a:focus-visible .cl-t{transform:translateX(10px);color:#fff}
.cl-lista a:focus-visible{outline:1px solid var(--acento);outline-offset:-1px}
@media (max-width:640px){.cl-lista a{grid-template-columns:2.2rem minmax(0,1fr)}.cl-d{grid-column:2}.cl-ver{display:none}}
@media (prefers-reduced-motion:reduce){.cl-t,.cl-ver{transition:none}}
.cl-mas{text-align:center;margin-top:clamp(40px,5vw,56px)} /* botón «Ver más» bajo la lista de cursos (Sofía, 2026-11-10) */
/* ===== PÁGINA DE CURSOS con estructura de TIENDA (Sofía, 2026-11-10): buscador + rejilla de 4 + fichas con «Ver curso» y «Comprar ahora» ===== */
.tienda{background:#1E1D1A;padding:clamp(48px,6vw,80px) 0 clamp(80px,10vw,130px)}
.t-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.t-buscar{display:flex;max-width:560px;margin:0 auto clamp(40px,5vw,64px);border:1px solid rgba(238,231,222,.22);border-radius:999px;padding:6px;background:#26251F}
.t-buscar input{flex:1;min-width:0;background:none;border:none;color:#EEE7DE;font-family:'Montserrat',sans-serif;font-weight:300;font-size:.95rem;padding:10px 18px}
.t-buscar input::placeholder{color:rgba(238,231,222,.5)}
.t-buscar input:focus{outline:none}
.t-buscar:focus-within{border-color:var(--acento)}
.t-buscar button{background:var(--acento);color:#1E1D1A;border:none;border-radius:999px;padding:10px 26px;font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.t-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
@media (max-width:1100px){.t-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.t-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.t-rejilla{grid-template-columns:1fr}}
.t-card{background:#2F332A;border:1px solid rgba(238,231,222,.1);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.t-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.t-card[hidden]{display:none}
.t-foto{display:block;aspect-ratio:1/1;background-size:cover;background-position:center}
.t-cuerpo{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:22px 20px 24px;text-align:center;flex:1}
.t-cuerpo h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.5rem;line-height:1.2;color:#EEE7DE;margin:0;text-wrap:balance}
.t-precio{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--acento);margin:0 0 6px}
.t-cuerpo .t-precio.pendiente{font-size:1.05rem}
.t-btn{display:block;border-radius:999px;padding:12px 16px;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
.t-cuerpo .t-precio + .t-btn{margin-top:auto}
.t-ver{border:1px solid rgba(238,231,222,.45);color:#EEE7DE}
.t-ver:hover,.t-ver:focus-visible{border-color:var(--acento);color:var(--acento);outline:none}
.t-comprar{background:var(--acento);border:1px solid var(--acento);color:#1E1D1A}
.t-comprar:hover,.t-comprar:focus-visible{background:#E4CC97;border-color:#E4CC97;outline:none}
.t-vacio{text-align:center;color:#D9D1C6;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;margin-top:24px}
@media (prefers-reduced-motion:reduce){.t-card{transition:none}.t-card:hover{transform:none}}
/* 2026-11-10 — Sofía: probado el oliva y descartado; vuelve el gris verdoso pero «un pelo» más claro: #474C44 → #4D5249 (cambio global) */
/* 2026-11-10 — Sofía: la tienda de cursos vuelve a fondo OSCURO (carbón); se quita la prueba marfil. La banda de arriba ya se funde en #1E1D1A, así que el paso es un difuminado sin línea. */
.t-card{background:#4D5249;border-color:rgba(238,231,222,.12)} /* fichas de cursos en el MISMO gris verdoso de los fondos (Sofía, 2026-11-10); antes #2F332A, demasiado oscuro */
.t-card{background:#575C52} /* fichas un poco más claras (Sofía, 2026-11-10) */
.t-card{background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),#575C52;border-color:rgba(255,255,255,.18)} /* capa TRANSLÚCIDA BLANCA sobre las fichas (Sofía, 2026-11-10) */
/* PRUEBA 2 (Sofía, 2026-11-10): la tienda de cursos otra vez en BLANCO MARFIL, ahora CON DIFUMINADO desde la cabecera del bosque */
.tienda{background:#F3EEE4}
.banda:has(+ .tienda)::before{background:linear-gradient(180deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.45) 50%,rgba(20,19,17,.40) 70%,rgba(243,238,228,.35) 84%,rgba(243,238,228,.75) 93%,#F3EEE4 100%)}
.t-buscar{background:#FBF8F2;border-color:rgba(30,29,26,.18)}
.t-buscar input{color:#1E1D1A}
.t-buscar input::placeholder{color:rgba(30,29,26,.45)}
.t-buscar:focus-within{border-color:#A8813A}
.t-buscar button{background:#A8813A;color:#FBF8F2}
.t-card{background:#FBF8F2;border-color:rgba(30,29,26,.1);box-shadow:0 2px 10px rgba(30,29,26,.05)}
.t-card:hover{box-shadow:0 18px 40px rgba(30,29,26,.14)}
.t-cuerpo h3{color:#1E1D1A}
.t-precio{color:#A8813A}
.t-ver{border-color:rgba(30,29,26,.4);color:#1E1D1A}
.t-ver:hover,.t-ver:focus-visible{border-color:#A8813A;color:#A8813A}
.t-comprar{background:#A8813A;border-color:#A8813A;color:#FBF8F2}
.t-comprar:hover,.t-comprar:focus-visible{background:#8E6B2C;border-color:#8E6B2C}
.t-vacio{color:#55574D}
/* Sofía: el marfil es SOLO PARA EL FONDO — las fichas vuelven a verde con capa translúcida blanca, con sus textos y botones de antes */
.t-card{background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),#575C52;border-color:rgba(255,255,255,.18);box-shadow:0 6px 18px rgba(30,29,26,.12)}
.t-card:hover{box-shadow:0 18px 40px rgba(30,29,26,.25)}
.t-cuerpo h3{color:#EEE7DE}
.t-precio{color:var(--acento)}
.t-ver{border-color:rgba(238,231,222,.45);color:#EEE7DE}
.t-ver:hover,.t-ver:focus-visible{border-color:var(--acento);color:var(--acento)}
.t-comprar{background:var(--acento);border-color:var(--acento);color:#1E1D1A}
.t-comprar:hover,.t-comprar:focus-visible{background:#E4CC97;border-color:#E4CC97}
/* Sofía (2026-11-10): MENOS difuminado entre la cabecera y el marfil (solo el último tramo, curva fina como la portada) */
.banda:has(+ .tienda)::before{background:linear-gradient(180deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.45) 55%,rgba(20,19,17,.42) 86%,
  rgba(243,238,228,.10) 89%,rgba(243,238,228,.30) 92%,rgba(243,238,228,.55) 95%,rgba(243,238,228,.80) 97.5%,#F3EEE4 100%)}
/* Fichas en VERDE CLARO (salvia), textos oscuros y detalles en dorado hondo */
.t-card{background:#CDD1BE;border-color:rgba(30,29,26,.10);box-shadow:0 4px 14px rgba(30,29,26,.08)}
.t-card:hover{box-shadow:0 18px 40px rgba(30,29,26,.16)}
.t-cuerpo h3{color:#1E1D1A}
.t-precio{color:#8E6B2C}
.t-ver{border-color:rgba(30,29,26,.45);color:#1E1D1A}
.t-ver:hover,.t-ver:focus-visible{border-color:#8E6B2C;color:#8E6B2C}
.t-comprar{background:#A8813A;border-color:#A8813A;color:#FBF8F2}
.t-comprar:hover,.t-comprar:focus-visible{background:#8E6B2C;border-color:#8E6B2C}

/* Cabecera translúcida SOBRE la foto desde el principio (Sofía, 2026-11-10: «esto quiero que esté así por defecto»).
   La portada (y la banda de las páginas interiores) sube por debajo de la cabecera: el cristal difumina el bosque nada más abrir. */
.hero{margin-top:-83px;padding-top:83px !important;min-height:100vh !important;min-height:100svh !important}
.banda{margin-top:-83px;padding-top:calc(83px + clamp(70px,9vw,110px)) !important}
header{background:rgba(30,29,26,.55);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
/* Difuminado MÁS ABAJO (Sofía, 2026-11-10): misma forma, el oscurecimiento empieza al 91 % y el verde al 96 % → se ve más selva */
.hero::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 96%,rgba(77,82,73,.028) 96.4%,rgba(77,82,73,.104) 96.8%,rgba(77,82,73,.216) 97.2%,rgba(77,82,73,.352) 97.6%,
    rgba(77,82,73,.5) 98%,rgba(77,82,73,.648) 98.4%,rgba(77,82,73,.784) 98.8%,rgba(77,82,73,.896) 99.2%,rgba(77,82,73,.972) 99.6%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.26) 0%,rgba(20,19,17,.18) 45%,rgba(20,19,17,.18) 91%,rgba(20,19,17,.38) 95%,rgba(20,19,17,.62) 98.4%,rgba(20,19,17,.72) 100%) !important}
#filosofia,.explica{scroll-margin-top:83px} html{scroll-behavior:smooth} /* el menú «La filosofía» baja a su apartado en inicio, sin taparlo la cabecera */

/* Tienda: SIN foto arriba — fondo solo blanco y título en verde (Sofía, 2026-11-10).
   La banda y la tienda comparten el mismo blanco, así no hay corte. La cabecera queda sobre el carbón (no sobre el blanco) para seguir oscura. */
.banda:has(+ .tienda){background:#F8F7F4 !important;margin-top:0 !important;padding-top:clamp(70px,9vw,110px) !important;padding-bottom:clamp(20px,3vw,36px) !important}
.banda:has(+ .tienda)::before{display:none !important}
.banda:has(+ .tienda) h1{color:#4D5249 !important;-webkit-text-fill-color:#4D5249 !important;filter:none !important}
.banda:has(+ .tienda) .eyebrow{color:#A8813A;filter:none}
.banda:has(+ .tienda) p,.banda:has(+ .tienda) .pendiente{color:#A8813A}
.tienda{background:#F8F7F4 !important}
/* Tienda: blanco con una CAPA VERDE TRANSLÚCIDA (el verde de los apartados #4D5249 al 10 %) y título en ese mismo verde (Sofía, 2026-11-10) */
.banda:has(+ .tienda),.tienda{background:linear-gradient(rgba(77,82,73,.10),rgba(77,82,73,.10)),#F8F7F4 !important}
.banda:has(+ .tienda) h1{color:#4D5249 !important;-webkit-text-fill-color:#4D5249 !important}
/* Corrección (Sofía: «capa negra, no verde»): el blanco de la tienda lleva una capa NEGRA translúcida al 10 %; título sigue en verde #4D5249 */
.banda:has(+ .tienda),.tienda{background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),#F8F7F4 !important}
.banda:has(+ .tienda) h1{color:#6F7768 !important;-webkit-text-fill-color:#6F7768 !important} /* título de la tienda en el mismo verde, más claro (Sofía, 2026-11-10) */
.banda:has(+ .tienda){margin-top:-83px !important;padding-top:calc(83px + clamp(70px,9vw,110px)) !important} /* la cabecera translúcida queda SOBRE el fondo de la tienda, como en inicio (Sofía, 2026-11-10) */
:root{--niebla:#DFDEDC;--gris-perla:var(--niebla)} /* «NIEBLA» (Sofía, 2026-11-10): fondo claro de la Tienda, para reutilizar en otros apartados = blanco #F8F7F4 + negro al 10 % */

/* Fichas de la Tienda SIN verde: cristal translúcido esmerilado, como la cabecera (Sofía, 2026-11-10) */
.t-card{background:rgba(255,255,255,.28) !important;border:1px solid rgba(255,255,255,.55) !important;
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 10px 30px -18px rgba(30,29,26,.35)}
.t-card:hover{box-shadow:0 22px 44px -20px rgba(30,29,26,.45)}
.t-ver{background:rgba(255,255,255,.18)}

/* ===== PIE DE PÁGINA rediseñado: translúcido como la cabecera del inicio (Sofía, 2026-11-10) =====
   El bosque de la portada, desenfocado, con el mismo cristal carbón encima. Logo arriba, lema debajo, todo centrado y con aire. */
footer{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid rgba(238,231,222,.14) !important;
  background:#1E1D1A !important;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:clamp(48px,6vw,72px) 16px calc(clamp(48px,6vw,72px) + 56px) !important;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#C9C2B6 !important;text-align:center}
footer::before{content:"";position:absolute;inset:-40px;z-index:-2;background:url('fondos-prueba/sendero-luz.jpg') center 70%/cover;filter:blur(14px) saturate(1.1)}
footer::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(30,29,26,.62)}
footer .logo-w{margin:0 !important}
footer .logo{font-size:1.9rem}
/* Pie: DIFUMINADO desde el verde de Contacto (#4D5249) hacia el cristal del bosque, sin línea; y apartado MÁS ESTRECHO (Sofía, 2026-11-10) */
footer{border-top:0 !important;gap:10px;padding:clamp(34px,4vw,48px) 16px calc(clamp(30px,3.6vw,42px) + 52px) !important}
footer::after{background:
  linear-gradient(180deg,#4D5249 0,rgba(77,82,73,.972) 7%,rgba(77,82,73,.896) 14%,rgba(77,82,73,.784) 21%,rgba(77,82,73,.648) 28%,rgba(77,82,73,.5) 35%,
    rgba(77,82,73,.352) 42%,rgba(77,82,73,.216) 49%,rgba(77,82,73,.104) 56%,rgba(77,82,73,.028) 63%,rgba(77,82,73,0) 70%),
  rgba(30,29,26,.62)}
footer .logo{font-size:1.6rem}
footer{padding:clamp(38px,4.4vw,52px) 16px !important;justify-content:center} /* contenido centrado en el medio del pie, mismo aire arriba y abajo (Sofía, 2026-11-10) */
/* El fundido verde ocupa solo los primeros 40px (antes el 70 % del pie): el cristal llena el pie y el contenido se ve en el centro de verdad */
footer::after{background:
  linear-gradient(180deg,#4D5249 0,rgba(77,82,73,.972) 4px,rgba(77,82,73,.896) 8px,rgba(77,82,73,.784) 12px,rgba(77,82,73,.648) 16px,rgba(77,82,73,.5) 20px,
    rgba(77,82,73,.352) 24px,rgba(77,82,73,.216) 28px,rgba(77,82,73,.104) 32px,rgba(77,82,73,.028) 36px,rgba(77,82,73,0) 40px),
  rgba(30,29,26,.62)}
/* Pie MÁS TRANSPARENTE (Sofía, 2026-11-10): el cristal carbón baja del 62 % al 30 % y se ve mucho más el bosque */
footer::after{background:
  linear-gradient(180deg,#4D5249 0,rgba(77,82,73,.972) 4px,rgba(77,82,73,.896) 8px,rgba(77,82,73,.784) 12px,rgba(77,82,73,.648) 16px,rgba(77,82,73,.5) 20px,
    rgba(77,82,73,.352) 24px,rgba(77,82,73,.216) 28px,rgba(77,82,73,.104) 32px,rgba(77,82,73,.028) 36px,rgba(77,82,73,0) 40px),
  rgba(30,29,26,.30)}
footer{color:#EEE7DE !important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
footer .logo{text-shadow:none !important} footer .logo-w{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.45))} /* el logo dorado se lee sobre el bosque claro */
/* Pie SIN imagen (Sofía, 2026-11-10: «debajo está el color verde del apartado»): el verde de Contacto #4D5249 sigue por debajo
   y encima solo un cristal carbón translúcido, como la cabecera. Sin foto. */
footer{background:#4D5249 !important}
footer::before{display:none !important;content:none !important}
footer::after{background:rgba(30,29,26,.30) !important}
footer{border-top:1px solid rgba(238,231,222,.10) !important}
footer{padding:clamp(22px,2.6vw,30px) 16px !important;gap:6px !important} footer .logo{font-size:1.35rem !important} /* pie más estrecho (Sofía, 2026-11-10) */
footer{border-top:0 !important;background:linear-gradient(90deg,rgba(238,231,222,0) 0%,rgba(238,231,222,.38) 50%,rgba(238,231,222,0) 100%) top center/100% 1px no-repeat,#4D5249 !important} /* línea superior DIFUMINADA hacia los lados (Sofía, 2026-11-10) */
footer::after{background:linear-gradient(180deg,rgba(30,29,26,0) 0,rgba(30,29,26,.008) 5px,rgba(30,29,26,.031) 10px,rgba(30,29,26,.065) 15px,rgba(30,29,26,.106) 20px,rgba(30,29,26,.15) 25px,rgba(30,29,26,.194) 30px,rgba(30,29,26,.235) 35px,rgba(30,29,26,.269) 40px,rgba(30,29,26,.292) 45px,rgba(30,29,26,.30) 50px) !important} /* el paso al pie se DIFUMINA: el cristal oscuro entra suave en 50px (Sofía, 2026-11-10) */
footer{background:#4D5249 !important;border-top:0 !important} /* sin la línea blanca superior (Sofía, 2026-11-10) */
footer{background:linear-gradient(90deg,rgba(238,231,222,0) 0%,rgba(238,231,222,.38) 50%,rgba(238,231,222,0) 100%) top center/100% 1px no-repeat,#4D5249 !important} /* vuelve la línea difuminada: «con la línea mejor» (Sofía, 2026-11-10) */

/* ===== CONTACTO rediseñado (Sofía, 2026-11-10: «mejora la estética de este apartado») =====
   Banda del bosque que se funde en el verde (como inicio) · tres tarjetas de cristal con el dato real · preguntas sobre el mismo verde. */
.banda:has(+ .contacto)::before{background:
  linear-gradient(180deg,rgba(77,82,73,0) 0%,rgba(77,82,73,0) 78%,rgba(77,82,73,.104) 82%,rgba(77,82,73,.352) 87%,rgba(77,82,73,.648) 92%,rgba(77,82,73,.896) 96.5%,#4D5249 100%),
  linear-gradient(180deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.42) 60%,rgba(20,19,17,.30) 100%) !important}
.contacto,.faq{background:#4D5249 !important}
.contacto{padding:clamp(30px,4vw,56px) 0 clamp(60px,7vw,96px) !important}
.canales-tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);max-width:980px;margin:0 auto}
.canal{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:clamp(28px,3vw,40px) 20px;border-radius:14px;
  background:rgba(30,29,26,.30);border:1px solid rgba(238,231,222,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .35s,border-color .35s,transform .35s;min-width:0}
.canal .eyebrow{color:var(--acento)}
.canal-dato{font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,1.8vw,1.55rem);color:#EEE7DE;overflow-wrap:anywhere}
.canal-accion{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#C9C2B6;transition:color .35s}
.canal:hover,.canal:focus-visible{background:rgba(169,174,132,.38);border-color:rgba(169,174,132,.7);transform:translateY(-3px);outline:none}
.canal:hover .canal-accion,.canal:focus-visible .canal-accion{color:#F4F1EA}
.faq{padding-top:clamp(40px,5vw,70px) !important;background-image:linear-gradient(90deg,rgba(238,231,222,0),rgba(238,231,222,.3),rgba(238,231,222,0)) !important;background-size:min(980px,90%) 1px !important;background-position:top center !important;background-repeat:no-repeat !important}
.faq .eyebrow{color:var(--acento)}
.faq h2{color:#EEE7DE}
.faq details{border-bottom-color:rgba(238,231,222,.16) !important}
.faq summary{color:#EEE7DE}
.faq summary::after{color:var(--acento)}
.faq details p{color:#D9D1C6}
.faq .pendiente{color:var(--acento)}
@media (max-width:760px){.canales-tarjetas{grid-template-columns:1fr}}
/* Contacto: la imagen ENTERA, sin difuminado a media página (Sofía, 2026-11-10). Banda más alta, solo un velo suave uniforme para leer el texto; corte limpio con el verde. */
.banda:has(+ .contacto){min-height:68vh;display:flex;align-items:center;justify-content:center;background-position:center 55% !important}
.banda:has(+ .contacto)::before{background:rgba(20,19,17,.30) !important}
.banda:has(+ .contacto) h1,.banda:has(+ .contacto) p,.banda:has(+ .contacto) .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.45)}
/* Contacto SIN el corte del medio (Sofía, 2026-11-10): el bosque sigue por detrás de las tarjetas.
   Banda y tarjetas comparten la misma foto FIJA (anclada a la pantalla), así encajan sin costura; el mismo velo al 30 %,
   que en la parte baja se funde poco a poco en el verde de las preguntas. */
.banda:has(+ .contacto){background:url('fondos-prueba/sendero-luz.jpg') center 55%/cover !important}
.contacto{background:
  linear-gradient(180deg,rgba(20,19,17,.30) 0,rgba(20,19,17,.30) 35%,rgba(56,60,54,.55) 62%,rgba(70,75,66,.82) 82%,#4D5249 100%),
  url('fondos-prueba/sendero-luz.jpg') center 55%/cover !important}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .banda:has(+ .contacto){background-attachment:fixed !important}
  .contacto{background-attachment:scroll,fixed !important}}
.canal{background:rgba(30,29,26,.38)}

/* 2026-11-11 — Sofía: el título «Aprende a vivir en la filosofía» con un verde que destaque más.
   Antes #4D5249 (gris verdoso, se perdía sobre el gris claro). Ahora verde bosque más vivo y algo más de peso. */
.banda:has(+ .tienda) h1{color:#3E5B3A !important;-webkit-text-fill-color:#3E5B3A !important;font-weight:500}

/* 2026-11-11 — Sofía: «los botones deben ser de color verde agua» (tienda de cursos). Antes dorado #A8813A. PRUEBA 2026-11-11: verde OLIVA de la marca (--acento-hondo). El verde agua era 5E9C8F / 477F73 / 3F7468. Aclarado (Sofía: «un poco más claro»): antes 6B7044 / 565A35. */
.t-comprar{background:#828A55 !important;border-color:#828A55 !important;color:#FBF8F2 !important}
.t-comprar:hover,.t-comprar:focus-visible{background:#6B7044 !important;border-color:#6B7044 !important}
.t-ver{border-color:#828A55 !important;color:#6B7044 !important}
.t-ver:hover,.t-ver:focus-visible{border-color:#6B7044 !important;color:#6B7044 !important;background:rgba(130,138,85,.12) !important}

/* ===== 2026-11-11 — Sofía: «esta página en blanco como el apartado de cursos, bueno blanco marfil».
   Página Constelaciones en grupo = mismo fondo que la Tienda (marfil #F8F7F4 + negro al 10 % = «niebla»), sin foto arriba,
   título en verde, fichas de cristal esmerilado y botones en el oliva claro de la Tienda. ===== */
.banda:has(+ .grupo){background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),#F8F7F4 !important;
  margin-top:-83px !important;padding-top:calc(83px + clamp(70px,9vw,110px)) !important;padding-bottom:clamp(20px,3vw,36px) !important}
.banda:has(+ .grupo)::before{display:none !important}
.banda:has(+ .grupo) h1{color:#3E5B3A !important;-webkit-text-fill-color:#3E5B3A !important;filter:none !important;font-weight:500}
.banda:has(+ .grupo) .eyebrow{color:#A8813A !important;filter:none !important}
.banda + .grupo{background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),#F8F7F4 !important;background-attachment:scroll !important}
.banda + .grupo::before{border-color:rgba(30,29,26,.12) !important}
.banda + .grupo .intro{color:#3E4A3B !important}
.banda + .grupo .eyebrow,.banda + .grupo .pendiente{color:#A8813A !important}
.banda + .grupo .dos{background:rgba(30,29,26,.10) !important}
.banda + .grupo .dos > div{background:rgba(255,255,255,.28) !important;backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.banda + .grupo .dos h3{color:#1E1D1A !important}
.banda + .grupo .dos p{color:#3A3935 !important}
.banda + .grupo .btn{background:#828A55 !important;border-color:#828A55 !important;color:#FBF8F2 !important}
.banda + .grupo .btn:hover,.banda + .grupo .btn:focus-visible{background:#6B7044 !important;border-color:#6B7044 !important;color:#FBF8F2 !important}

/* 2026-11-11 — Sofía: «probemos con esta foto de fondo con una capa translúcida» (Constelaciones en grupo).
   Foto del sendero de selva al amanecer, fija detrás de toda la página, con un velo MARFIL translúcido encima
   para que siga leyéndose como la página blanca. Para quitar: borrar este bloque. */
body:has(.banda + .grupo){background:linear-gradient(rgba(243,240,233,.80),rgba(243,240,233,.80)),url('img/fondo-grupo-sendero.jpg') center/cover fixed !important}
.banda:has(+ .grupo),.banda + .grupo{background:transparent !important}

/* 2026-11-11 — Sofía: «translúcido negro, como el primer apartado de la página de inicio». PRUEBA: foto de la cascada (fondo-grupo-cascada.jpg); antes el sendero (fondo-grupo-sendero.jpg).
   Constelaciones en grupo: misma foto del sendero, ahora con velo CARBÓN translúcido (como la portada) y textos claros.
   Anula el velo marfil y los colores oscuros de los bloques anteriores. */
body:has(.banda + .grupo){background:linear-gradient(rgba(20,19,17,.48),rgba(20,19,17,.48)),url('img/fondo-grupo-sendero-hd.jpg') center/cover fixed !important}
.banda:has(+ .grupo) h1{color:#EEE7DE !important;-webkit-text-fill-color:#EEE7DE !important;font-weight:400}
.banda:has(+ .grupo) .eyebrow{color:#EEE7DE !important}
.banda + .grupo::before{border-color:rgba(238,231,222,.16) !important}
.banda + .grupo .intro{color:#EEE7DE !important}
.banda + .grupo .eyebrow,.banda + .grupo .pendiente{color:var(--acento) !important}
.banda + .grupo .dos{background:rgba(238,231,222,.14) !important}
.banda + .grupo .dos > div{background:rgba(30,29,26,.40) !important}
.banda + .grupo .dos h3{color:#EEE7DE !important}
.banda + .grupo .dos p{color:#D9D1C6 !important}

/* 2026-11-11 — Sofía: «me gusta más la otra (el sendero), aplícale más calidad y ponla también en el apartado de tienda».
   Foto del sendero ampliada a 1920 px con más nitidez (fondo-grupo-sendero-hd.jpg). Grupo: vuelve al sendero.
   TIENDA: el mismo fondo (foto + velo carbón 48 %), título y textos claros, fichas de cristal oscuro. */
body:has(.banda + .tienda){background:linear-gradient(rgba(20,19,17,.48),rgba(20,19,17,.48)),url('img/fondo-grupo-sendero-hd.jpg') center/cover fixed !important}
.banda:has(+ .tienda),.tienda{background:transparent !important}
.banda:has(+ .tienda) h1{color:#EEE7DE !important;-webkit-text-fill-color:#EEE7DE !important;font-weight:400}
.banda:has(+ .tienda) .eyebrow,.banda:has(+ .tienda) p,.banda:has(+ .tienda) .pendiente{color:var(--acento) !important}
.tienda .t-card{background:rgba(30,29,26,.40) !important;border:1px solid rgba(238,231,222,.16) !important}
.tienda .t-cuerpo h3{color:#EEE7DE !important}
.tienda .t-precio{color:var(--acento) !important}
.tienda .t-ver{border-color:rgba(238,231,222,.55) !important;color:#EEE7DE !important;background:rgba(255,255,255,.06) !important}
.tienda .t-ver:hover,.tienda .t-ver:focus-visible{border-color:#EEE7DE !important;background:rgba(130,138,85,.25) !important}
.tienda .t-buscar{background:rgba(30,29,26,.40) !important;border-color:rgba(238,231,222,.25) !important}
.tienda .t-buscar input{color:#EEE7DE !important}
.tienda .t-buscar input::placeholder{color:rgba(238,231,222,.55) !important}
.tienda .t-buscar button{background:#828A55 !important;color:#FBF8F2 !important}
.tienda .t-vacio{color:#D9D1C6 !important}

/* 2026-11-11 — Sofía: «ahora prueba el fondo oscuro» → «déjalo en negro»: DEFINITIVO. Tienda y Constelaciones en grupo SIN foto, fondo carbón liso
   (mismos textos claros y fichas de cristal oscuro). Para volver al sendero: borrar este bloque. */
body:has(.banda + .tienda),body:has(.banda + .grupo){background:#1E1D1A !important}
.tienda .t-card,.banda + .grupo .dos > div{background:rgba(238,231,222,.05) !important}

/* 2026-11-11 — Sofía (con muestra del gris verdoso #4D5249 de los apartados): «para los botones quiero esta misma gama de color pero más claro».
   Botones de Tienda y Constelaciones en grupo: gris verdoso claro #7A8175; al pasar, el tono de la muestra #4D5249. Antes oliva #828A55. */
.t-comprar,.tienda .t-buscar button,.banda + .grupo .btn{background:#7A8175 !important;border-color:#7A8175 !important;color:#FBF8F2 !important}
.t-comprar:hover,.t-comprar:focus-visible,.tienda .t-buscar button:hover,.banda + .grupo .btn:hover,.banda + .grupo .btn:focus-visible{background:#4D5249 !important;border-color:#4D5249 !important;color:#FBF8F2 !important}
.tienda .t-ver:hover,.tienda .t-ver:focus-visible{background:rgba(122,129,117,.30) !important}

/* ===== 2026-11-11 — Texto nuevo de «La filosofía» (aprobado por Sofía) con visual fácil de leer:
   entradilla · intro centrada · 4 pilares en fichas (2×2) · cierre · frase destacada · fuerzas del amor ===== */
.fi-intro{max-width:680px;margin:0 auto clamp(40px,5vw,64px);text-align:center;font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.8;color:#D9D1C6;text-wrap:pretty}
.pilares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);max-width:980px;margin:0 auto}
.pilares article{background:rgba(238,231,222,.045);border:1px solid rgba(238,231,222,.12);border-top:1px solid var(--acento);
  border-radius:4px;padding:clamp(26px,3vw,38px) clamp(22px,3vw,36px);text-align:left}
.pilares .p-n{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;color:var(--acento);line-height:1;margin-bottom:6px}
.pilares h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.6rem,2.2vw,1.95rem);color:#EEE7DE;margin:0 0 14px;line-height:1.15}
.pilares p{font-size:.98rem;line-height:1.75;color:#CFC8BC;margin:0 0 12px;text-wrap:pretty}
.pilares p:last-child{margin-bottom:0}
.pilares strong,.fi-cierre strong{color:#EEE7DE;font-weight:600}
.fi-cierre{max-width:680px;margin:clamp(40px,5vw,64px) auto 0;text-align:center;font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.8;color:#D9D1C6;text-wrap:balance}
.filosofia .cita{margin-bottom:clamp(24px,3vw,36px)}
.filosofia .rotulo-fuerzas{text-align:center;margin-top:clamp(56px,7vw,90px);letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--acento)}
@media (max-width:720px){.pilares{grid-template-columns:1fr}}
.filosofia .destacada{text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--acento);margin:clamp(30px,4vw,48px) 0 0}
.explica .cita-intro + .desplegable .fi-intro,.explica .fi-intro{margin-top:clamp(18px,2.4vw,28px)}

/* ===== 2026-11-11 — La filosofía v2 (Sofía: «no siento que sea un texto que deba explicar en la página»):
   su texto base con voz de web, en 5 bloques uno debajo de otro: rótulo dorado, texto centrado y estrecho, mucho aire. Sustituye a las fichas. ===== */
.fi-intro{font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,1.9vw,1.5rem);color:#EEE7DE;margin-bottom:clamp(44px,6vw,72px)}
.fi-bloques{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(34px,4.5vw,52px);text-align:center}
.fi-bloques h3{font-family:'Montserrat',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acento);margin:0 0 14px}
.fi-bloques p{font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.85;color:#D9D1C6;margin:0;text-wrap:pretty}
.fi-bloques > div + div::before{content:"";display:block;width:36px;height:1px;background:rgba(212,176,108,.45);margin:0 auto clamp(34px,4.5vw,52px)}

/* 2026-11-11 — Sofía: el botón «Ver los cursos» de la portada, al pasar por encima, con el color del botón «Buscar» de la Tienda (#7A8175). */
.hero .btn.lleno:hover,.hero .btn.lleno:active,.hero .btn.lleno:focus-visible{background:#7A8175 !important;border-color:#7A8175 !important;color:#FBF8F2 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* ===== 2026-11-11 — REGLA DE MARCA (Sofía): «serán todos los botones de ese color a partir de ahora».
   Color de botón = gris verdoso claro #7A8175 (el de «Buscar»). Al pasar por encima, todos los botones y las fichas de contacto
   se rellenan de #7A8175 con texto blanco roto. Los que ya están rellenos de #7A8175 se oscurecen a #4D5249 al pasar. ===== */
.btn:hover,.btn:active,.btn:focus-visible,
.btn.lleno:hover,.btn.lleno:active,.btn.lleno:focus-visible,
.cursos .btn:hover,.grupo .btn:hover,.explica .btn:hover,.explica button.btn:hover,
.t-ver:hover,.t-ver:focus-visible,.tienda .t-ver:hover,.tienda .t-ver:focus-visible{background:#7A8175 !important;border-color:#7A8175 !important;color:#FBF8F2 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.canal:hover,.canal:focus-visible{background:rgba(122,129,117,.94) !important;border-color:#7A8175 !important}
.canal:hover .canal-accion,.canal:focus-visible .canal-accion,.canal:hover .eyebrow,.canal:focus-visible .eyebrow{color:#FBF8F2 !important}
/* los rellenos de #7A8175 en reposo (Comprar, Buscar, grupo) mantienen su oscurecido a #4D5249 */
.t-comprar:hover,.t-comprar:focus-visible,.tienda .t-buscar button:hover,.banda + .grupo .btn:hover,.banda + .grupo .btn:focus-visible{background:#4D5249 !important;border-color:#4D5249 !important}

/* 2026-11-11 — Sofía: «estos botones (contacto) hazlos más pequeños y minimalistas».
   Fichas más bajas y estrechas, cristal casi transparente con borde fino, sin la línea «Escribir →» (el propio botón ya lo dice).
   Al pasar: #7A8175 (regla de marca). */
.canales-tarjetas{max-width:760px !important;gap:clamp(12px,1.6vw,18px) !important}
.canal{padding:clamp(16px,1.8vw,22px) 16px !important;gap:6px !important;border-radius:10px !important;
  background:rgba(30,29,26,.22) !important;border:1px solid rgba(238,231,222,.22) !important;box-shadow:none !important}
.canal .eyebrow{font-size:.62rem !important;letter-spacing:.28em !important}
.canal-dato{font-size:clamp(1.02rem,1.35vw,1.18rem) !important}
.canal-accion{display:none !important}
.canal:hover,.canal:focus-visible{transform:translateY(-2px) !important}

/* ===== 2026-11-11 — La filosofía v3 (texto de Sofía ordenado, sin preguntas): 3 párrafos centrados + cierre.
   «constelaciones familiares» subrayado con nota emergente (al pasar el ratón o al tocar en el móvil). ===== */
.fi-texto{max-width:660px;margin:clamp(8px,1.5vw,16px) auto 0;text-align:center}
.fi-texto p{font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.9;color:#D9D1C6;margin:0 0 1.4em;text-wrap:pretty}
.fi-texto p:last-child{margin-bottom:0}
.nota{position:relative;color:#EEE7DE;text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:1px;text-underline-offset:4px;cursor:help;outline:none}
.nota-txt{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);width:min(300px,80vw);padding:14px 16px;border-radius:8px;
  background:rgba(30,29,26,.96);border:1px solid rgba(212,176,108,.35);color:#E6E3DC;font-size:.88rem;line-height:1.6;text-align:left;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s;z-index:20;text-decoration:none}
.nota-txt::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:rgba(30,29,26,.96)}
.nota:hover .nota-txt,.nota:focus .nota-txt,.nota:focus-within .nota-txt{opacity:1;visibility:visible;transform:translate(-50%,0)}
.explica .desplegable,.explica .desplegable .dentro,.filosofia,.filosofia .wrap{overflow:visible !important} /* que la nota de «constelaciones familiares» no se recorte */
.fi-accion{text-align:center;margin:clamp(26px,3.5vw,40px) 0 0} /* botón tras «Y la felicidad, en el presente.» (2026-11-11) */

/* 2026-11-11 — Sofía: las fuerzas del amor se explican con el visual de la rejilla (01–04), dentro del texto, en vez de escritas en el párrafo.
   La lista de abajo se elimina; cada fuerza lleva una línea corta debajo. */
.fuerzas-en-texto{max-width:1000px;margin:clamp(36px,5vw,56px) auto !important;text-align:left}
.fuerzas-en-texto > div{padding-bottom:26px !important}
.fuerzas-en-texto p{font-size:.92rem;line-height:1.65;color:#CFC8BC;margin:10px 0 0;text-wrap:pretty}
.fuerzas-en-texto + .fi-texto{margin-top:0}

/* ===== «Constela conmigo» (Sofía, 2026-11-11): constelaciones.html — títulos de bloque y fichas 2×2 ===== */
.constela .fi-intro{margin-bottom:clamp(18px,2.4vw,28px)}
.constela .fi-intro-2{margin-top:clamp(48px,6vw,76px)}
.constela .pilares{margin-top:clamp(20px,3vw,32px)}
.grupo.constela .intro{margin-bottom:clamp(14px,2vw,22px)}
.grupo.constela .fi-texto{margin-bottom:clamp(40px,5vw,60px)}

/* ===== Preguntas frecuentes «qué necesito para constelar / representar» (Sofía, 2026-11-11): respuestas con varios párrafos ===== */
.faq details p + p{margin-top:10px}
.faq details p strong{color:#EEE7DE;font-weight:600}

/* Anotación (Sofía, 2026-11-12): «Este camino no busca culpables…» + «Y la felicidad…» van juntas como nota aparte, no como parte del texto */
.anotacion{max-width:40em;margin:clamp(30px,4vw,48px) auto 0;padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,34px);
  border-left:1px solid var(--acento);background:rgba(30,29,26,.45);text-align:left}
.anotacion-rotulo{display:block;font-family:'Montserrat',sans-serif;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--acento);margin-bottom:10px}
.anotacion p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:var(--tinta-suave);margin:0;text-align:left}
.anotacion .anotacion-final{margin-top:10px;color:var(--acento)}

/* Frases de Bert Hellinger con su foto, en la franja del lema (Sofía, 2026-11-12) */
.hc{display:flex;align-items:center;gap:clamp(24px,4vw,56px);max-width:900px;margin:0 auto;text-align:left}
.hc-foto{flex:0 0 auto;width:clamp(110px,14vw,170px);aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05);opacity:.92;box-shadow:0 0 0 1px rgba(238,231,222,.35),0 10px 30px rgba(0,0,0,.35)}
.hc-cuerpo{flex:1;min-width:0}
.hc-frases{display:grid}
.hc-frase{grid-area:1/1;margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.45rem,2.6vw,2.2rem);line-height:1.35;color:#EEE7DE;text-wrap:balance;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.hc-frase.activa{opacity:1;visibility:visible}
.hc-autor{margin:16px 0 0;font-family:'Montserrat',sans-serif;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(238,231,222,.75)}
.hc-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.hc-flecha{background:none;border:1px solid rgba(238,231,222,.4);color:#EEE7DE;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer;transition:background .3s,border-color .3s}
.hc-flecha:hover,.hc-flecha:focus-visible{background:#7A8175;border-color:#7A8175}
.hc-cuenta{font-family:'Montserrat',sans-serif;font-size:.72rem;letter-spacing:.14em;color:rgba(238,231,222,.7)}
@media (max-width:700px){.hc{flex-direction:column;text-align:center}.hc-nav{justify-content:center}}
@media (prefers-reduced-motion:reduce){.hc-frase{transition:none}}
.enfoque .hc-lema{margin:0 auto clamp(40px,5vw,64px);text-align:center}
.hc-lema + .hc .hc-frase{font-size:clamp(1.3rem,2.2vw,1.85rem)}
.hc-lema + .hc{max-width:780px}
.hc-lema + .hc .hc-cuerpo{max-width:520px}
.hc-frase{align-self:end}
.hc-lema::after{content:"";display:block;width:56px;height:1px;background:rgba(238,231,222,.4);margin:clamp(28px,3.5vw,40px) auto 0}
/* Separación: la frase es de Sofía, el carrusel es de Hellinger (2026-11-12) */
.enfoque .hc-lema{margin-bottom:clamp(64px,8vw,104px)}
.hc-lema::after{width:100%;max-width:420px;margin-top:clamp(56px,7vw,88px)}
.hc-rotulo{display:block;text-align:center;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(238,231,222,.7) !important;margin:0 auto clamp(26px,3vw,36px)}
/* Hellinger: foto pequeña en la esquina con su pie (Sofía, 2026-11-12) */
.hc-lema + .hc{display:block;max-width:760px}
.hc-lema + .hc .hc-cuerpo{max-width:none}
.hc .hc-frase{text-align:center;font-size:clamp(1.4rem,2.4vw,2rem)}
.hc-pie{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(36px,4.5vw,56px)}
.hc-firma{display:flex;align-items:center;gap:14px;margin:0}
.hc-firma .hc-foto{width:58px;height:58px;box-shadow:0 0 0 1px rgba(238,231,222,.35)}
.hc-firma figcaption{display:flex;flex-direction:column;gap:2px;text-align:left;font-family:'Montserrat',sans-serif;line-height:1.35}
.hc-firma strong{font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#EEE7DE}
.hc-firma span{font-size:.7rem;letter-spacing:.08em;color:rgba(238,231,222,.65)}
.hc-firma em{font-family:'Cormorant Garamond',serif;font-size:.98rem;color:rgba(238,231,222,.8)}
.hc-firma .hc-fuente{font-size:.62rem;letter-spacing:.04em;color:rgba(238,231,222,.5);margin-top:3px;max-width:34ch}
.hc .hc-nav{margin-top:0}
.hc-rotulo{display:none}
@media (max-width:700px){.hc-pie{flex-direction:column-reverse;gap:22px}}
/* Orden invertido (Sofía, 2026-11-12): primero Hellinger, luego la línea y su frase como cierre */
.hc-lema::after{display:none}
.hc + .hc-lema{margin:0 auto}
.hc + .hc-lema::before{content:"";display:block;width:100%;max-width:420px;height:1px;background:rgba(238,231,222,.4);margin:clamp(56px,7vw,88px) auto clamp(56px,7vw,88px)}
.hc{max-width:760px}
.hc .hc-cuerpo{max-width:none}
/* «Nueva visión» encima de la frase de Sofía (2026-11-12): la línea pasa a ir encima del rótulo */
.hc + .hc-lema::before{display:none}
.hc-vision{display:block;text-align:center;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--acento);margin:0 auto clamp(18px,2.2vw,26px)}
.hc + .hc-vision::before{content:"";display:block;width:100%;max-width:420px;height:1px;background:rgba(238,231,222,.4);margin:clamp(56px,7vw,88px) auto clamp(48px,6vw,72px)}
.hc-titulo{display:block;text-align:center;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--acento);margin:0 auto clamp(26px,3.2vw,40px)}
/* Flecha hacia abajo entre la franja del lema y «La filosofía» (Sofía, 2026-11-12) */
.baja{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:clamp(48px,6vw,80px) auto 0;border:1px solid rgba(238,231,222,.4);border-radius:50%;color:#EEE7DE;transition:background .3s,border-color .3s;animation:baja-mece 2.4s ease-in-out infinite}
.baja:hover,.baja:focus-visible{background:#7A8175;border-color:#7A8175}
@keyframes baja-mece{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.baja{animation:none}}
html{scroll-behavior:smooth}
/* Hellinger tras «La filosofía»: fondo oscuro para separarlo de la franja de cursos (2026-11-12) */
section.enfoque.hellinger{background:var(--carbon-2) !important;background-image:none !important;padding:clamp(72px,9vw,120px) 0}
section.enfoque.hellinger::before,section.enfoque.hellinger::after{display:none !important}
/* Apartado «Las constelaciones familiares» (2026-11-12) */
.hellinger .section-head{text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.hellinger .section-head h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);color:#EEE7DE;margin:10px 0 0}
.hellinger .section-head h2 em{color:var(--acento)}
.cf-bloques{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto;border-top:1px solid var(--linea)}
.cf-bloque{padding:clamp(24px,3vw,36px) clamp(18px,2.2vw,28px);text-align:left;border-left:1px solid var(--linea)}
.cf-bloque:first-child{border-left:0}
.cf-n{display:block;font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:rgba(238,231,222,.45);line-height:1}
.cf-bloque h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.35rem;color:#EEE7DE;margin:12px 0 6px;line-height:1.25}
.cf-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:var(--acento);margin:0 0 10px}
.cf-bloque p{font-size:.92rem;line-height:1.7;color:#D9D1C6;margin:0}
.cf-bloque .pendiente{font-style:italic}
.cf-separa{width:100%;max-width:420px;height:1px;background:rgba(238,231,222,.3);margin:clamp(64px,8vw,104px) auto clamp(56px,7vw,88px)}
@media (max-width:800px){.cf-bloques{grid-template-columns:1fr}.cf-bloque{border-left:0;border-top:1px solid var(--linea)}.cf-bloque:first-child{border-top:0}}
.hellinger .cf-bloque .cf-sub{font-size:1.08rem !important;font-family:"Cormorant Garamond",serif !important;font-style:italic;color:var(--acento) !important;margin:0 0 10px !important}
.constela-portada::before{display:none !important}
/* Cita de Hellinger en el apartado 2: opción B (comilla grande dorada + filete) con la foto de Bert a la izquierda (Sofía, 2026-11-12) */
.enfoque .ec{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:940px;margin:0 auto;text-align:left}
.ec-foto{width:clamp(130px,15vw,190px);aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05);opacity:.92;box-shadow:0 0 0 1px rgba(238,231,222,.35),0 10px 30px rgba(0,0,0,.35)}
.enfoque .enfoque-cita{position:relative;margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.65;color:rgba(238,231,222,.92);padding-top:clamp(52px,5.5vw,70px);text-wrap:pretty}
.enfoque .enfoque-cita::before{content:"“";position:absolute;top:0;left:-4px;font-style:normal;font-size:clamp(5rem,7.5vw,7rem);line-height:1;color:var(--acento)}
.enfoque .enfoque-cita::after{content:"";display:block;width:56px;height:1px;background:var(--acento);margin:26px 0 0}
.enfoque .enfoque-firma{justify-content:flex-start;margin:20px 0 0}
.enfoque .ec + .baja{margin-top:clamp(40px,5vw,60px)}
@media (max-width:700px){.enfoque .ec{grid-template-columns:1fr;justify-items:center;text-align:center}.enfoque .enfoque-cita::before{left:50%;transform:translateX(-50%)}.enfoque .enfoque-cita::after{margin:26px auto 0}.enfoque .enfoque-firma{justify-content:center}.enfoque .enfoque-firma figcaption{text-align:center}}
/* Fondo de «Constela conmigo» en la portada: cascada (opción C, Sofía, 2026-11-12). Antes: fondo-manifiesto con velo verde */
.constela-portada{background:linear-gradient(180deg,rgba(30,29,26,.78),rgba(30,29,26,.86)),url('img/fondo-grupo-cascada.jpg') center/cover !important}
/* «Constela conmigo» en la portada, versión sencilla y minimalista con precios (Sofía, 2026-11-12) */
.constela-portada .cm-precios{display:flex;justify-content:center;max-width:520px;margin:clamp(30px,4vw,44px) auto 0;border-top:1px solid rgba(238,231,222,.18);border-bottom:1px solid rgba(238,231,222,.18)}
.constela-portada .cm-precios>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 12px}
.constela-portada .cm-precios>div+div{border-left:1px solid rgba(238,231,222,.18)}
.constela-portada .cm-que{font-family:'Montserrat',sans-serif;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--acento)}
.constela-portada .cm-precio{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3rem);font-weight:400;line-height:1;color:#EEE7DE}
.constela-portada .cm-modo{margin:22px 0 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:rgba(238,231,222,.8)}
.constela-portada .fi-accion{margin-top:30px}
.constela-portada .cm-precio{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.constela-portada .cm-intro{font-family:'Montserrat',sans-serif !important;font-style:normal !important;font-weight:300;font-size:1rem;letter-spacing:.06em;color:rgba(238,231,222,.85)}
/* Contacto en el pie, minimalista (Sofía, 2026-11-12) */
footer .pie-contacto{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin:14px 0 10px;font-family:'Montserrat',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
footer .pie-contacto a{color:#EEE7DE;text-decoration:none;opacity:.85;transition:opacity .2s,color .2s}
footer .pie-contacto a:hover{opacity:1;color:var(--acento)}
footer .pie-contacto a[href^="mailto"]{text-transform:none;letter-spacing:.06em}
footer .pie-contacto{gap:26px;margin:16px 0 12px}
footer .pie-contacto a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(238,231,222,.28);border-radius:50%}
footer .pie-contacto a:hover{border-color:var(--acento)}
footer .pie-contacto svg{width:19px;height:19px}

/* 2026-11-13 — Sofía: la nota «Este camino no busca culpables» va en una esquina (derecha), no centrada */
.anotacion{max-width:26em;margin-left:auto;margin-right:0}
@media (max-width:640px){.anotacion{max-width:none;margin-left:0}}

/* 2026-11-13 — Sofía: la nota al lado del párrafo «Nacemos dentro…», en columna, para que no quede un hueco a la izquierda */
.fi-con-nota{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21em);gap:clamp(32px,5vw,72px);align-items:center;max-width:1000px;margin:clamp(8px,1.5vw,16px) auto 0}
.fi-con-nota .fi-texto{max-width:none;margin:0;text-align:left}
.fi-con-nota .anotacion{max-width:none;margin:0}
@media (max-width:820px){.fi-con-nota{grid-template-columns:1fr}.fi-con-nota .fi-texto{text-align:center}}

/* 2026-11-13 — Sofía: estilo F. La nota se integra en el texto y el cierre queda solo, grande */
.fi-cierre{max-width:760px;margin:clamp(44px,6vw,64px) auto 0;text-align:center}
.fi-cierre-filete{display:block;width:60px;height:1px;background:var(--acento);margin:0 auto 26px}
.fi-cierre p{font-family:'Cormorant Garamond',serif;font-style:italic;margin:0;text-wrap:balance}
.fi-cierre-grande{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.3;color:#EEE7DE}
.fi-cierre-pie{margin-top:18px !important;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;color:#D9D1C6}
.fi-cierre-pie em{color:var(--acento)}
/* 2026-11-13 — Sofía: en grande y dorado solo la pregunta; la respuesta, en dorado debajo */
.fi-cierre-grande{color:var(--acento)}
.fi-cierre-pie{color:var(--acento);font-size:clamp(1.3rem,2vw,1.6rem)}
/* 2026-11-13 — Sofía: tamaño invertido: la pregunta más pequeña, «Solo en el presente.» en grande */
.fi-cierre-grande{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.4}
.fi-cierre-pie{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.3;margin-top:10px !important}
/* 2026-11-13 — Sofía: sin filete; el cierre es continuación del texto */
.fi-cierre{margin-top:clamp(22px,3vw,32px)}
/* 2026-11-13 — definición larga de constelaciones en el globo: más ancho */
.nota-txt{width:min(420px,86vw);font-size:.84rem;line-height:1.6}

/* 2026-11-13 — Sofía: fuerzas en estilo C. El sí a la vida arriba, sola y destacada (sostiene a las demás); las otras tres debajo. Números en el verde de siempre */
.fuerzas.fuerzas-en-texto{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,56px);border-top:0;max-width:1000px;text-align:center}
.fuerzas-en-texto > div{border:0 !important;padding:0 0 26px !important}
.fuerzas-en-texto > div:first-child{grid-column:1/-1;max-width:560px;margin:0 auto clamp(40px,5vw,56px);padding-bottom:clamp(36px,4vw,48px) !important;border-bottom:1px solid rgba(212,176,108,.35) !important}
.fuerzas-en-texto span{color:var(--taupe);opacity:.85;filter:none;font-weight:300}
.fuerzas-en-texto > div:first-child span{font-size:3.6rem}
.fuerzas-en-texto > div:first-child h3{font-size:2.2rem;font-style:italic}
.fuerzas-en-texto > div:first-child p{font-size:1rem}
@media (max-width:820px){.fuerzas.fuerzas-en-texto{grid-template-columns:1fr}.fuerzas-en-texto > div{border-bottom:0 !important}.fuerzas-en-texto > div:first-child{border-bottom:1px solid rgba(212,176,108,.35) !important}}
/* 2026-11-13 — Sofía: más separación entre el párrafo y la pregunta de la felicidad */
.fi-cierre{margin-top:clamp(48px,6vw,72px)}
/* 2026-11-13 — Sofía: cierre con la pregunta entre dos filetes dorados cortos; respuesta grande en cursiva dorada. Sin halo ni sombra */
.fi-cierre-grande{display:flex;align-items:center;justify-content:center;gap:18px;font-size:clamp(1.25rem,1.9vw,1.5rem);color:var(--acento)}
.fi-cierre-grande i{display:block;flex:0 0 44px;height:1px;background:rgba(212,176,108,.6)}
.fi-cierre-pie{font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.25;margin-top:12px !important;text-shadow:none}
@media (max-width:520px){.fi-cierre-grande i{flex-basis:24px}.fi-cierre-grande{gap:10px}}

/* 2026-11-13 — Sofía: el texto de «El sí a la vida» del mismo tamaño que el de las otras fuerzas */
.fuerzas-en-texto > div:first-child p{font-size:.92rem}

/* 2026-11-13 — Sofía: «El sí a la vida» con todo del mismo tamaño que las demás fuerzas (número, título y texto); sigue arriba */
.fuerzas-en-texto > div:first-child span{font-size:2.6rem}
.fuerzas-en-texto > div:first-child h3{font-size:1.4rem;font-style:normal}

/* 2026-11-13 — Sofía: la línea bajo «El sí a la vida» en el mismo verde que los números */
.fuerzas-en-texto > div:first-child{border-bottom-color:rgba(170,174,149,.6) !important}