/* =========================================================================
   Lilit — Centro de Ascensión Vibracional
   Hoja de estilos ÚNICA y compartida por todas las páginas.

   A diferencia de elsoldelavida.cc (que lleva el CSS dentro de cada
   archivo), aquí todo el estilo vive en este fichero. Un cambio aquí
   se aplica al sitio entero. No añadir bloques <style> a las páginas.

   Paleta y tipografías tomadas de "plantilla-lilit.html" (guía de estilo).
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  /* Paleta */
  --malva:        #E7DAE6;   /* fondo general */
  --malva-hondo:  #CFB8CD;   /* bandas y cabecera */
  --malva-humo:   #DCCBDA;   /* bandas suaves */
  --tinta:        #33223A;   /* texto */
  --tinta-suave:  #5F4A66;   /* texto secundario */
  --ciruela:      #7A4A78;   /* títulos y color de marca */
  --ciruela-hondo:#5E3760;   /* hover sobre ciruela */
  --rosa:         #C96BA0;   /* acento */
  --agua:         #3F9384;   /* acento */
  --ocre:         #C8A340;   /* acento */
  --blanco:       #FBF7FB;   /* tarjetas y campos */

  /* Medidas */
  --medida:  33rem;          /* ancho cómodo de lectura */
  --ancho:   64rem;          /* ancho máximo de sección */
  --canal:   11rem;          /* laterales reservados al dibujo */

  /* Ritmo vertical */
  --e-xs: .5rem;
  --e-sm: 1rem;
  --e-md: 1.75rem;
  --e-lg: clamp(2.5rem, 6vw, 4rem);
  --e-xl: clamp(3.5rem, 9vw, 6rem);

  --radio: 10px;
  --sombra: 0 2px 14px rgba(51, 34, 58, .09);
  --sombra-alta: 0 6px 26px rgba(51, 34, 58, .15);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* que los anclajes no queden bajo la barra */
}

body{
  margin: 0;
  background: var(--malva);
  color: var(--tinta);
  font: 400 1.0625rem/1.75 "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;         /* nada de scroll horizontal en móvil */
}

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

a{ color: var(--ciruela); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover{ color: var(--ciruela-hondo); }

/* Foco visible — accesibilidad */
:focus-visible{
  outline: 2px solid var(--ciruela);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Sólo para lectores de pantalla */
.solo-lectores{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido (primer tabulador) */
.saltar{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ciruela); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radio) 0;
}
.saltar:focus{ left: 0; color: #fff; }

/* --------------------------------------------------------- tipografía */
.evocador{
  font-family: "Cormorant Infant", Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.55;
}

h1, h2, h3{ margin: 0 0 .7em; }

h1{
  font-family: "Cormorant Infant", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.2;
  color: var(--ciruela);
}

h2{
  font-family: "Cormorant Infant", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  color: var(--ciruela);
}

h3{
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--tinta-suave);
}

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

.antetitulo{
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa);
  margin: 0 0 var(--e-sm);
}

.entradilla{
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  color: var(--tinta-suave);
  line-height: 1.7;
}

/* ------------------------------------------------------------ cabecera */
/* OJO: no usar el selector `nav a` a secas. En elsoldelavida.cc esa regla
   se colaba en el menú móvil y descolocaba los enlaces largos. Aquí todo
   va marcado con su clase. */

.barra{
  position: sticky; top: 0; z-index: 100;
  background: rgba(231, 218, 230, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122, 74, 120, .16);
}

.barra-caja{
  max-width: var(--ancho);
  margin: 0 auto;
  padding: .6rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
}

.marca{
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ciruela);
}
.marca img{ width: 42px; height: auto; }
.marca-texto{
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  letter-spacing: .04em;
}
.marca-lema{
  display: block;
  font-family: "Karla", sans-serif;
  font-size: .58rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: .22em;
}

.menu{ display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 1.7rem); }

.menu-enlace{
  font-size: .93rem;
  font-weight: 400;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.menu-enlace:hover,
.menu-enlace[aria-current="page"]{
  color: var(--ciruela);
  border-bottom-color: var(--rosa);
}

/* Botón hamburguesa — sólo visible en móvil */
.menu-boton{
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: .4rem; color: var(--ciruela);
  line-height: 0;
}

@media (max-width: 47.99rem){
  .menu-boton{ display: block; }
  .menu{
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--malva);
    border-bottom: 1px solid rgba(122, 74, 120, .16);
    box-shadow: var(--sombra);
    padding: var(--e-xs) 0;
  }
  .menu[hidden]{ display: none; }
  .menu-enlace{
    padding: .85rem clamp(1rem, 4vw, 2rem);
    border-bottom: 1px solid rgba(122, 74, 120, .09);
    white-space: normal;      /* los nombres largos parten línea, no se salen */
  }
  .menu-enlace:hover,
  .menu-enlace[aria-current="page"]{ border-bottom-color: rgba(122,74,120,.09); }
}

/* ---------------------------------------------------- portada / hero */
.portada{
  background: var(--malva-hondo);
  padding: clamp(1.5rem, 5vw, 3rem) 1rem clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}
.portada-caja{ position: relative; max-width: 56rem; margin: 0 auto; }
.portada-marco{ width: 100%; }
.portada-logo{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(44%, 21rem);
}
.portada-lema{
  margin: var(--e-md) auto 0;
  max-width: 32rem;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  letter-spacing: .03em;
  color: var(--tinta);
}

/* La enseñanza de la Luna, bajo el logo de la portada */
.luna{
  margin: var(--e-md) auto 0;
  max-width: 36rem;
  border: 0;
  padding: 0;
  text-align: center;
  color: var(--tinta);
}
.luna p{
  font-family: "Cormorant Infant", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.9vw, 1.5rem);
  line-height: 1.6;
  margin: 0 0 .55em;
}
.luna p:last-child{ margin-bottom: 0; }
/* La petición a la Luna, en cursiva y algo más grande */
.luna .peticion{
  font-style: italic;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  color: var(--ciruela);
  margin-bottom: .5em;
}

/* Cabecera breve para páginas interiores */
.cabecera-pagina{
  background: var(--malva-hondo);
  padding: var(--e-lg) clamp(1.25rem, 5vw, 2rem);
  text-align: center;
}
.cabecera-pagina h1{ margin-bottom: .4em; }
.cabecera-pagina .entradilla{ max-width: var(--medida); margin: 0 auto; }

/* ----------------------------------------------------------- secciones */
section{
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--e-lg) clamp(1.25rem, 5vw, 2rem);
}

.texto{ max-width: var(--medida); margin: 0 auto; }
.centrado{ text-align: center; }

.banda{ background: var(--malva-humo); }
.banda-honda{ background: var(--malva-hondo); }
.banda > section{ padding-block: var(--e-lg); }

/* Separadores dibujados */
.sep{
  margin: var(--e-lg) auto;
  width: min(88%, 30rem);
}
.sep.chico{ width: min(62%, 19rem); }

/* Laterales dibujados: viven en canales propios, nunca bajo el texto.
   Regla de la guía de estilo: el texto siempre en zona limpia. */
.concanales{ position: relative; }
.concanales .canal{
  position: absolute; top: 0; height: 100%;
  width: var(--canal);
  display: flex; align-items: center;
  pointer-events: none;
}
.concanales .canal img{ max-height: 88%; width: auto; margin: 0 auto; opacity: .9; }
.concanales .canal.izq{ left: 0;  justify-content: flex-start; }
.concanales .canal.der{ right: 0; justify-content: flex-end; }
@media (max-width: 63.99rem){
  .concanales .canal{ display: none; }
}

/* ------------------------------------------------------------ tarjetas */
.rejilla{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.tarjeta{
  background: var(--blanco);
  border: 1px solid rgba(122, 74, 120, .14);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--sombra);
  transition: transform .2s, box-shadow .2s;
}
.tarjeta:hover{ transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tarjeta h3{ color: var(--ciruela); font-size: 1.25rem; font-weight: 400;
             font-family: "Cormorant Infant", Georgia, serif; }

.tarjeta-precio{
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: 2rem; color: var(--ciruela);
  margin: var(--e-xs) 0 var(--e-sm);
}
.tarjeta-precio .detalle{
  display: block;
  font-family: "Karla", sans-serif;
  font-size: .82rem; color: var(--tinta-suave);
}
.tarjeta-pie{
  margin-top: var(--e-sm);
  font-size: .82rem; color: var(--tinta-suave);
}

/* ------------------------------------------------------------- botones */
.boton{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--ciruela); color: #fff;
  font-family: "Karla", sans-serif;
  font-size: .95rem; font-weight: 600;
  letter-spacing: .02em;
  padding: .85rem 1.7rem;
  border: 1px solid var(--ciruela);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.boton:hover{
  background: var(--ciruela-hondo); border-color: var(--ciruela-hondo);
  color: #fff; transform: translateY(-1px);
}
.boton.hueco{ background: transparent; color: var(--ciruela); }
.boton.hueco:hover{ background: var(--ciruela); color: #fff; }
.boton.agua{ background: var(--agua); border-color: var(--agua); }
.boton.agua:hover{ background: #34796D; border-color: #34796D; }

/* --------------------------------------------------------------- horarios */
.horario{
  background: var(--blanco);
  border: 1px solid rgba(122, 74, 120, .14);
  border-left: 4px solid var(--ciruela);
  border-radius: var(--radio);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  box-shadow: var(--sombra);
}
.horario h3{
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: 1.4rem; font-weight: 400; color: var(--ciruela);
  margin-bottom: .3em;
}
.horario-dias{
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rosa);
  margin-bottom: var(--e-sm);
}
.horario-grupos{ list-style: none; margin: 0; padding: 0; }
.horario-grupos li{
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem 0;
  border-top: 1px solid rgba(122, 74, 120, .1);
  font-variant-numeric: tabular-nums;
}
.horario-grupos li:first-child{ border-top: 0; }
.horario-grupos .grupo{
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave);
  min-width: 4.6rem;
}
.horario-grupos .hora{ font-size: 1.05rem; color: var(--tinta); }

.aviso-nombre{
  background: rgba(200, 163, 64, .13);
  border: 1px solid rgba(200, 163, 64, .4);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  font-size: .95rem;
  color: var(--tinta);
  max-width: var(--medida);
  margin: var(--e-md) auto 0;
}
.aviso-nombre strong{ color: var(--ciruela); }

/* ------------------------------------------------------------ formulario */
.formulario{
  max-width: 44rem;
  margin: 0 auto;
  background: var(--blanco);
  border: 1px solid rgba(122, 74, 120, .14);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: var(--sombra);
}

.bloque{
  padding-bottom: var(--e-md);
  margin-bottom: var(--e-md);
  border-bottom: 1px solid rgba(122, 74, 120, .12);
}
.bloque:last-of-type{ border-bottom: 0; }

.bloque-titulo{
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: 1.35rem; font-weight: 400; color: var(--ciruela);
  margin: 0 0 .2em;
}
.bloque-nota{ font-size: .88rem; color: var(--tinta-suave); margin-bottom: var(--e-sm); }

.campo{ margin-bottom: var(--e-sm); }
.fila{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sm); }
@media (max-width: 33rem){ .fila{ grid-template-columns: 1fr; } }

label{
  display: block;
  font-size: .88rem; font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: .35rem;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], select, textarea{
  width: 100%;
  font: 400 1rem/1.5 "Karla", system-ui, sans-serif;
  color: var(--tinta);
  background: #fff;
  border: 1px solid rgba(122, 74, 120, .28);
  border-radius: 7px;
  padding: .7rem .85rem;
  transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--ciruela);
  box-shadow: 0 0 0 3px rgba(122, 74, 120, .14);
}
textarea{ resize: vertical; min-height: 6.5rem; }

.obligatorio{ color: var(--rosa); }
.ayuda{ font-size: .8rem; color: var(--tinta-suave); margin: .3rem 0 0; }

.casilla{
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: var(--e-sm);
}
.casilla input{ margin-top: .28rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ciruela); }
.casilla label{ margin: 0; font-weight: 400; font-size: .92rem; color: var(--tinta); }

/* Bloque de precio y forma de pago */
.inversion{
  background: rgba(122, 74, 120, .07);
  border: 1px solid rgba(122, 74, 120, .2);
  border-radius: var(--radio);
  padding: clamp(1.2rem, 3vw, 1.7rem);
  margin-bottom: var(--e-md);
  text-align: center;
}
.inversion .servicio{
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: 1.3rem; color: var(--ciruela); margin-bottom: .2em;
}
.inversion .precio{
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: clamp(2.1rem, 6vw, 2.8rem);
  color: var(--tinta); line-height: 1.1; margin: 0 0 .3em;
}
.inversion .precio .iva{
  display: block;
  font-family: "Karla", sans-serif;
  font-size: .82rem; color: var(--tinta-suave); letter-spacing: .02em;
}
.pago{
  border-top: 1px solid rgba(122, 74, 120, .2);
  padding-top: var(--e-sm);
  margin-top: var(--e-sm);
  font-size: .93rem;
  text-align: left;
}
.pago-bizum{
  font-weight: 600; color: var(--ciruela);
  font-size: 1.05rem;
  margin: .3em 0 .6em;
}

.turnstile{ display: flex; justify-content: center; margin: var(--e-md) 0 var(--e-sm); }
.error-turnstile{
  display: none; text-align: center; color: #B03A5B;
  font-size: .9rem; margin-bottom: var(--e-sm);
}
.error-turnstile.visible{ display: block; }

.enviar{ width: 100%; font-size: 1rem; padding: 1rem 1.7rem; }

/* ------------------------------------------------------------------ pie */
.pie{
  background: var(--tinta);
  color: rgba(251, 247, 251, .82);
  padding: var(--e-lg) clamp(1.25rem, 5vw, 2rem) var(--e-md);
  font-size: .92rem;
}
.pie-caja{
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: var(--e-md);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pie h3{
  color: var(--malva);
  font-family: "Cormorant Infant", Georgia, serif;
  font-size: 1.2rem; font-weight: 400;
  margin-bottom: .6em;
}
.pie-lista{ list-style: none; margin: 0; padding: 0; }
.pie-lista li{ margin-bottom: .45rem; }
.pie-enlace{ color: rgba(251, 247, 251, .82); text-decoration: none; }
.pie-enlace:hover{ color: var(--malva); text-decoration: underline; }

.pie-legal{
  max-width: var(--ancho);
  margin: var(--e-md) auto 0;
  padding-top: var(--e-sm);
  border-top: 1px solid rgba(251, 247, 251, .18);
  font-size: .82rem;
  color: rgba(251, 247, 251, .6);
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  justify-content: space-between; align-items: center;
}

.redes{ display: flex; gap: .8rem; }
.redes a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem;
  border: 1px solid rgba(251, 247, 251, .3);
  border-radius: 50%;
  color: rgba(251, 247, 251, .82);
  transition: background .18s, color .18s, border-color .18s;
}
.redes a:hover{ background: var(--malva); color: var(--tinta); border-color: var(--malva); }

/* --------------------------------------------------------- fundido de entrada */
/* El umbral va en píxeles efectivos, NO en porcentaje: con `threshold` alto
   las secciones más altas que la ventana nunca llegan a cruzarlo y se
   quedaban invisibles (le pasó a elsoldelavida.cc en 22 páginas). */
.aparece{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.aparece.visible{ opacity: 1; transform: none; }

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .aparece{ opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ impresión */
@media print{
  .barra, .pie, .boton, .turnstile{ display: none !important; }
  body{ background: #fff; color: #000; }
  .aparece{ opacity: 1; transform: none; }
}