/* =========================================================
   PROYECTO UNICORNIO — Hoja de estilos
   Dirección visual: "Galaxia serena"
   Paleta y reglas de contraste según el sistema de marca.
   ========================================================= */

:root{
  /* Paleta oficial */
  --noche:        #1A1040;  /* Noche profunda  — texto principal / fondos oscuros */
  --violeta:      #7B5EA7;  /* Violeta cosmos  — color de identidad */
  --azul-nebulosa:#A8D8EA;  /* Azul nebulosa   — calma (SOLO fondo/decoración) */
  --rosa-aurora:  #F4C2D8;  /* Rosa aurora     — calidez (SOLO fondo/decoración) */
  --blanco:       #F9F5FF;  /* Blanco estelar  — luz / fondo principal */
  --azul-orbita:  #4F8FB8;  /* Azul órbita     — auxiliar */
  --lila-bruma:   #E6DDF5;  /* Lila bruma      — fondos suaves */

  --violeta-oscuro:#5F4587;  /* variante accesible del violeta para texto pequeño */
  --texto-suave:   #3B2E63;  /* texto secundario sobre fondo claro */

  --tipo-titulo: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --tipo-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 1140px;
  --radio: 20px;
  --aire: clamp(4.5rem, 10vw, 8.5rem);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--blanco);
  color:var(--noche);
  font-family:var(--tipo-texto);
  font-size:clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3{
  font-family:var(--tipo-titulo);
  font-weight:600;
  line-height:1.2;
  margin:0;
  text-wrap:balance;
}

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

a{ color:var(--violeta-oscuro); }

:focus-visible{
  outline:3px solid var(--violeta);
  outline-offset:3px;
  border-radius:4px;
}

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

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--noche); color:var(--blanco);
  padding:.9rem 1.4rem; border-radius:0 0 12px 0;
  font-weight:600; text-decoration:none;
}
.salto-contenido:focus{ left:0; }

/* ---------- Estructura ---------- */
.contenedor{
  width:min(100% - 2.75rem, var(--ancho));
  margin-inline:auto;
}
.contenedor--medio{ max-width:820px; }
.contenedor--estrecho{ max-width:720px; }

.seccion{ padding-block:var(--aire); position:relative; }
.seccion--clara{  background:var(--blanco); }
.seccion--bruma{  background:linear-gradient(180deg, var(--blanco) 0%, var(--lila-bruma) 55%, var(--blanco) 100%); }
.seccion--noche{  background:var(--noche); color:var(--blanco); overflow:hidden; }
.seccion--aurora{
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(244,194,216,.55) 0%, rgba(244,194,216,0) 62%),
    radial-gradient(100% 120% at 10% 100%, rgba(168,216,234,.45) 0%, rgba(168,216,234,0) 60%),
    var(--blanco);
}

/* =========================================================
   PORTADA
   ========================================================= */
.portada{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(3.5rem,9vh,7rem) 1.5rem clamp(5rem,10vh,7rem);
  background:
    radial-gradient(120% 90% at 50% 30%, #2A1C5C 0%, #1A1040 58%, #120B2E 100%);
  color:var(--blanco);
  overflow:hidden;
  text-align:center;
}

/* Cielo sereno: pocas luces, discretas */
.cielo{ position:absolute; inset:0; pointer-events:none; }
.cielo--tenue{ opacity:.55; }

.luz-mayor{
  position:absolute;
  top:34%; left:50%;
  width:min(78vw, 760px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
      rgba(230,221,245,.20) 0%,
      rgba(123,94,167,.16) 38%,
      rgba(26,16,64,0) 70%);
  border-radius:50%;
}

.estrella{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--blanco);
  box-shadow:0 0 10px 2px rgba(249,245,255,.55);
  opacity:.75;
  animation:latido var(--t,6s) ease-in-out var(--d,0s) infinite;
}
.estrella.pequena{ width:3px; height:3px; opacity:.5; box-shadow:0 0 7px 1px rgba(168,216,234,.5); }

@keyframes latido{
  0%,100%{ opacity:.28; transform:scale(.9); }
  50%    { opacity:.85; transform:scale(1.15); }
}

.portada__interior{ position:relative; z-index:2; max-width:860px; }

.marca-titulo{ margin:0; }

.marca{
  width:min(88vw, 760px);
  margin:0 auto clamp(1.5rem,4vh,2.75rem);
}

.portada__entrada{
  font-family:var(--tipo-titulo);
  font-weight:300;
  font-size:clamp(1.15rem, 1rem + 1.05vw, 1.6rem);
  line-height:1.55;
  color:rgba(249,245,255,.88);
  margin-bottom:1.9rem;
}

.portada__claim{
  display:inline-block;
  font-family:var(--tipo-titulo);
  font-weight:500;
  font-size:clamp(1rem, .95rem + .35vw, 1.2rem);
  color:var(--blanco);
  padding-top:1.6rem;
  border-top:1px solid rgba(249,245,255,.28);
}

/* Indicador de scroll */
.bajar{
  position:absolute; bottom:2.4rem; left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:44px; height:56px;
  display:grid; place-items:center;
  text-decoration:none;
}
.bajar__linea{
  width:1px; height:42px;
  background:linear-gradient(180deg, rgba(249,245,255,0) 0%, rgba(249,245,255,.75) 100%);
  animation:respirar 3.4s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{ opacity:.35; transform:translateY(-5px); }
  50%    { opacity:1;   transform:translateY(5px); }
}

/* =========================================================
   TIPOGRAFÍA DE SECCIÓN
   ========================================================= */
.antetitulo{
  font-family:var(--tipo-titulo);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--violeta-oscuro);
  margin-bottom:1rem;
}
.antetitulo--claro{ color:rgba(249,245,255,.85); }

.titulo{
  font-size:clamp(1.65rem, 1.3rem + 1.7vw, 2.65rem);
  color:var(--noche);
  margin-bottom:1.1rem;
  max-width:22ch;
}
.titulo--centro{ margin-inline:auto; text-align:center; max-width:18ch; }

.entradilla{
  font-size:clamp(1.05rem, 1rem + .35vw, 1.25rem);
  color:var(--texto-suave);
  max-width:56ch;
  margin-bottom:3rem;
}
.entradilla em{ font-style:normal; color:var(--violeta-oscuro); font-weight:600; }

/* =========================================================
   DECLARACIÓN (idea fuerza)
   ========================================================= */
.declaracion{ text-align:center; }

.declaracion__texto{
  font-family:var(--tipo-titulo);
  font-weight:300;
  font-size:clamp(1.4rem, 1.05rem + 1.85vw, 2.4rem);
  line-height:1.42;
  color:var(--noche);
  margin-bottom:2.4rem;
  text-wrap:balance;
}
.declaracion__texto em{
  font-style:normal;
  font-weight:600;
  color:var(--violeta-oscuro);
}

.filete{
  display:block;
  width:64px; height:2px;
  margin:0 auto 2.4rem;
  background:linear-gradient(90deg, rgba(123,94,167,0), var(--violeta), rgba(123,94,167,0));
}

.declaracion__pie{
  font-size:clamp(1rem, .97rem + .3vw, 1.15rem);
  color:var(--texto-suave);
  max-width:54ch;
  margin-inline:auto;
}

/* =========================================================
   TARJETAS
   ========================================================= */
.rejilla{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(265px, 1fr));
}

.tarjeta{
  background:rgba(249,245,255,.92);
  border:1px solid rgba(123,94,167,.16);
  border-radius:var(--radio);
  padding:2.3rem 1.9rem 2rem;
  box-shadow:0 14px 38px -26px rgba(26,16,64,.45);
}

.tarjeta__icono{
  display:grid; place-items:center;
  width:56px; height:56px;
  margin-bottom:1.35rem;
  border-radius:50%;
  background:rgba(168,216,234,.30);
  color:var(--violeta-oscuro);
}
.tarjeta__icono svg{ width:28px; height:28px; }

.tarjeta h3{
  font-size:1.2rem;
  color:var(--noche);
  margin-bottom:.6rem;
}
.tarjeta p{
  font-size:1rem;
  color:var(--texto-suave);
  line-height:1.7;
}

/* =========================================================
   ESENCIA (sección noche)
   ========================================================= */
.esencia{ text-align:center; }
.esencia .contenedor{ position:relative; z-index:2; }

.cadena{
  list-style:none; margin:0 0 3rem; padding:0;
  display:grid; gap:1.1rem;
  font-family:var(--tipo-titulo);
  font-weight:300;
  font-size:clamp(1.3rem, 1.05rem + 1.35vw, 2.05rem);
  line-height:1.35;
  color:rgba(249,245,255,.88);
}
.cadena span{ color:var(--blanco); font-weight:600; }

.esencia__cierre{
  display:inline-block;
  padding-top:2rem;
  border-top:1px solid rgba(249,245,255,.25);
  font-size:clamp(1rem, .96rem + .3vw, 1.15rem);
  color:rgba(249,245,255,.92);
  max-width:44ch;
}

/* =========================================================
   COMPROMISO
   ========================================================= */
.lista-compromiso{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  border-top:1px solid rgba(123,94,167,.22);
}
.lista-compromiso li{
  padding:1.9rem 0;
  border-bottom:1px solid rgba(123,94,167,.22);
}
.lista-compromiso h3{
  font-size:clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
  color:var(--violeta-oscuro);
  margin-bottom:.5rem;
}
.lista-compromiso p{
  color:var(--texto-suave);
  max-width:62ch;
}

/* =========================================================
   CIERRE
   ========================================================= */
.cierre{ text-align:center; }
.cierre__texto{
  font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color:var(--texto-suave);
  max-width:52ch;
  margin:0 auto 2rem;
}
.cierre__nota{
  font-family:var(--tipo-titulo);
  font-weight:500;
  font-size:1.02rem;
  color:var(--violeta-oscuro);
  max-width:44ch;
  margin-inline:auto;
}

/* =========================================================
   PIE
   ========================================================= */
.pie{
  background:var(--noche);
  color:var(--blanco);
  padding-block:clamp(3.5rem,7vw,5.5rem);
  text-align:center;
}
.pie__simbolo{
  width:66px; height:auto;
  margin:0 auto 2.2rem;
  opacity:.9;
}
.pie__contacto{
  font-family:var(--tipo-titulo);
  font-size:clamp(1.05rem, 1rem + .4vw, 1.3rem);
  font-weight:500;
  margin-bottom:2.6rem;
}
.pie__contacto a{
  color:var(--blanco);
  text-decoration:none;
  border-bottom:1px solid rgba(249,245,255,.4);
  padding-bottom:2px;
  transition:border-color .2s ease;
}
.pie__contacto a:hover{ border-color:var(--blanco); }
.pie__separador{ display:inline-block; margin-inline:.85rem; opacity:.5; }

.pie__legal{
  font-size:.9rem;
  line-height:2;
  color:rgba(249,245,255,.78);
}
.pie__legal a{ color:rgba(249,245,255,.88); text-decoration:underline; text-underline-offset:3px; }
.pie__legal a:hover{ color:var(--blanco); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:640px){
  .portada{ min-height:92svh; }
  .marca{ width:min(92vw, 460px); }
  .titulo{ max-width:100%; }
  .tarjeta{ padding:1.9rem 1.5rem; }
  .pie__separador{ display:block; height:0; margin:.3rem 0; visibility:hidden; }
}

/* =========================================================
   PREFERENCIAS DE ACCESIBILIDAD
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .estrella{ opacity:.6; }
}

@media print{
  .portada{ min-height:auto; background:#fff; color:#000; }
  .cielo,.bajar{ display:none; }
}