/* Valentina Astróloga — hoja única.

   OJO: los colores de :root son PROVISIONALES. Se eligieron sin haber visto
   su Instagram, y por eso el sitio se siente genérico. Cuando estén los de
   verdad, se cambian ahí y solo ahí: ni un color está escrito a mano fuera
   de ese bloque, así que el sitio entero cambia de marca sin tocar nada más.

   Paleta oscura con dorado: la marca es esotérica pero el servicio cuesta
   199 USD, así que el sitio tiene que leerse caro y serio, no de feria. */

:root{
  /* Paleta sacada de su feed real (@valentinastrologa), no inventada.
     Sus vídeos son interiores luminosos: crema, hueso y dorado, con el oro
     en los objetos. Los golpes de color vienen de su ropa (amarillo, coral,
     fucsia) y por eso acá se usan con cuentagotas: si se reparten por todo
     el sitio dejan de leerse como ella y se leen como ruido. */
  --fondo:#FAF6EF;
  --superficie:#FFFFFF;
  --superficie-alta:#F4EADA;
  --borde:#E7DAC5;
  --oro:#A8842B;          /* oro legible sobre crema, para texto */
  --oro-claro:#D9BC72;    /* oro decorativo, para trazos y brillos */
  --tinta:#2B231C;
  --texto:#2B231C;
  --tenue:#7A6B5C;
  --coral:#E0745B;
  --violeta:#A8842B;
  --violeta-claro:#D9BC72;
  --ok:#4E8C6A;
  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Parisienne",cursive;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ancho:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ── Barra ─────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,239,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
}
.barra-in{max-width:var(--ancho);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{font-family:var(--script);font-size:27px;letter-spacing:.01em;
  text-decoration:none;color:var(--texto)}
.marca span{color:var(--oro)}
.barra nav{display:flex;gap:26px}
.barra nav a{color:var(--tenue);text-decoration:none;font-size:14px}
.barra nav a:hover{color:var(--texto)}
@media(max-width:760px){.barra nav{display:none}}

/* ── Botones ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-oro{background:var(--oro);color:#FFF8EA;box-shadow:0 10px 26px rgba(168,132,43,.22)}
.btn-oro:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(168,132,43,.32)}
.btn-linea{border-color:var(--borde);color:var(--texto)}
.btn-linea:hover{border-color:var(--violeta);background:var(--superficie)}
.btn[disabled]{opacity:.45;pointer-events:none;transform:none;box-shadow:none}
.btn-ancho{width:100%}

/* ── Portada ───────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:96px 0 84px;text-align:center}
.hero::before{
  content:"";position:absolute;inset:-30% 20% auto;height:520px;
  background:radial-gradient(circle,rgba(217,188,114,.34),transparent 66%);
  filter:blur(30px);pointer-events:none;
}
.hero > *{position:relative}
.ojo{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin:0 0 20px}
.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(40px,7vw,68px);line-height:1.08;margin:0 auto 22px;max-width:15ch;
}
.hero p{color:var(--tenue);font-size:19px;max-width:52ch;margin:0 auto 34px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bajo-cta{margin-top:20px;font-size:14px;color:var(--tenue)}
.bajo-cta b{color:var(--texto);font-weight:600}

/* ── Secciones ─────────────────────────────────────────── */
section{padding:76px 0}
.titulo{font-family:var(--display);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(30px,4.6vw,44px);line-height:1.15;margin:0 0 16px}
.entrada{color:var(--tenue);max-width:58ch;margin:0 0 44px;font-size:17px}
.centrado{text-align:center}
.centrado .entrada{margin-left:auto;margin-right:auto}

/* ── La validación: el bloque más importante del sitio ─── */
.validacion{
  background:linear-gradient(180deg,var(--superficie-alta),rgba(244,234,218,0));
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.escudo{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--superficie-alta);border:1px solid var(--borde);margin-bottom:24px;
}
.validacion-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center}
@media(max-width:860px){.validacion-grid{grid-template-columns:1fr;gap:36px}}
.lista-check{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:16px}
.lista-check li{display:flex;gap:13px;align-items:flex-start;color:var(--tenue)}
.lista-check svg{flex:none;margin-top:4px;color:var(--ok)}
.lista-check b{color:var(--texto);font-weight:600}

/* ── Pasos ─────────────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:860px){.pasos{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pasos{grid-template-columns:1fr}}
.paso{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:18px;padding:26px 22px;
}
.paso-n{font-family:var(--script);font-size:44px;color:var(--oro);line-height:1;margin-bottom:12px;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.paso h3{font-size:16px;margin:0 0 8px}
.paso p{color:var(--tenue);font-size:14.5px;margin:0}

/* ── Precio ────────────────────────────────────────────── */
.ficha{
  max-width:520px;margin:0 auto;background:var(--superficie);
  border:1px solid var(--borde);border-radius:24px;padding:38px 34px;text-align:center;
}
.precio{display:flex;align-items:baseline;gap:14px;justify-content:center;margin:6px 0 4px}
.precio-antes{color:var(--tenue);text-decoration:line-through;font-size:20px}
.precio-hoy{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;color:var(--oro);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.precio-mon{color:var(--tenue);font-size:15px}
.incluye{list-style:none;padding:0;margin:26px 0 0;text-align:left;display:grid;gap:12px}
.incluye li{display:flex;gap:11px;color:var(--tenue);font-size:15px}
.incluye svg{flex:none;margin-top:5px;color:var(--violeta)}

/* ── Aviso de suplantación ─────────────────────────────── */
.aviso{
  border:1px solid rgba(168,132,43,.30);background:rgba(217,188,114,.14);
  border-radius:18px;padding:26px 28px;display:flex;gap:18px;align-items:flex-start;
}
.aviso svg{flex:none;color:var(--oro);margin-top:3px}
.aviso h3{margin:0 0 8px;font-size:16px}
.aviso p{margin:0;color:var(--tenue);font-size:15px}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
details{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:20px 24px}
details[open]{border-color:var(--violeta)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--oro);font-size:20px;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--tenue);margin:14px 0 0;font-size:15px}

/* ── Checkout ──────────────────────────────────────────── */
.pago{min-height:calc(100vh - 74px);display:grid;place-items:center;padding:56px 24px}
.pago-caja{
  width:100%;max-width:480px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:24px;padding:38px 34px;
}
.pago-caja h1{font-family:var(--display);font-weight:800;font-size:30px;margin:0 0 8px}
.pago-caja > p{color:var(--tenue);margin:0 0 28px;font-size:15px}
.linea-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);margin-bottom:26px;
}
.linea-total > span{color:var(--tenue);font-size:15px}
.linea-total b{font-family:var(--display);font-size:34px;color:var(--oro);font-weight:800;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.candado{display:flex;gap:9px;align-items:flex-start;justify-content:center;
  margin-top:18px;color:var(--tenue);font-size:13px;text-align:left}
.candado svg{flex:none;margin-top:3px}
.candado svg{color:var(--ok)}
.recordatorio{
  margin-top:24px;padding:16px 18px;border-radius:12px;
  background:var(--superficie-alta);border:1px solid var(--borde);
  color:var(--tenue);font-size:13.5px;line-height:1.55;
}
.sin-config{
  margin-top:20px;padding:16px 18px;border-radius:12px;
  background:rgba(217,188,114,.16);border:1px solid rgba(168,132,43,.3);
  color:var(--oro);font-size:13.5px;
}

/* ── Cierre y pie ──────────────────────────────────────── */
.cierre{text-align:center;background:linear-gradient(180deg,rgba(217,188,114,.20),transparent)}
footer{border-top:1px solid var(--borde);padding:44px 0;color:var(--tenue);font-size:13.5px}
.pie-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.legal{margin:22px auto 0;max-width:70ch;font-size:12.5px;line-height:1.6;opacity:.75}
footer a{color:var(--tenue)}


/* ══ Movimiento ═══════════════════════════════════════════════════════ */

/* El cielo del encabezado. Va detrás de todo y no intercepta clics. */
#cielo{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.hero > .contenedor{position:relative;z-index:1}

/* Estado inicial de lo que entra al hacer scroll. Si el JS no corre, el
   `.visible` nunca llega — por eso la regla vive bajo :root.js-anim, que
   solo existe cuando el script arrancó. Sin JS se ve todo, quieto. */
:root.js-anim [data-revela]{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1);
}
:root.js-anim [data-revela].visible{opacity:1;transform:none}

/* El encabezado NO se esconde esperando al observador. Es lo primero que se
   ve y entra con animación pura de CSS, así que si el script falla, se cae
   la red o el navegador es raro, igual aparece. Un observador que no dispara
   dejaría la página en blanco, y eso no se puede arriesgar acá. */
:root.js-anim .hero [data-revela]{
  opacity:0;transform:translateY(22px);
  animation:entra .7s cubic-bezier(.22,.7,.3,1) forwards;
  transition:none;
}
:root.js-anim .hero [data-revela="0"]{animation-delay:.05s}
:root.js-anim .hero [data-revela="1"]{animation-delay:.14s}
:root.js-anim .hero [data-revela="2"]{animation-delay:.23s}
:root.js-anim .hero [data-revela="3"]{animation-delay:.32s}
:root.js-anim .hero [data-revela="4"]{animation-delay:.41s}
@keyframes entra{to{opacity:1;transform:none}}

/* Micro-interacciones */
.paso{transition:transform .3s ease,border-color .3s ease,background .3s ease}
.paso:hover{transform:translateY(-5px);border-color:var(--violeta);background:var(--superficie-alta)}
.lista-check li{transition:transform .25s ease}
.lista-check li:hover{transform:translateX(4px)}
details{transition:border-color .25s ease,background .25s ease}
summary::after{transition:transform .25s ease}
details[open] summary::after{transform:rotate(180deg)}

/* El dorado del hero respira. Muy lento y muy sutil: si se nota, molesta. */
@keyframes respira{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.06)}
}
.hero::before{animation:respira 11s ease-in-out infinite}

/* ══ Fotos ════════════════════════════════════════════════════════════ */

.retrato{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--borde);background:var(--superficie-alta);
  aspect-ratio:4/5;
}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;
  transition:transform .6s cubic-bezier(.22,.7,.3,1)}
.retrato:hover img{transform:scale(1.04)}
/* Un velo desde abajo para que el texto que va encima siempre se lea,
   sea cual sea la foto que ella mande. */
.retrato::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(43,35,28,.72));
}
.retrato-pie{
  position:absolute;left:0;right:0;bottom:0;padding:20px 22px;z-index:1;
  font-size:14px;color:var(--texto);
}

/* Mientras no haya foto real, el hueco no puede verse como un error.
   `.sin-foto` lo deja como un espacio intencional con una nota. */
.retrato.sin-foto{
  display:grid;place-items:center;text-align:center;padding:28px;
  border-style:dashed;color:var(--tenue);font-size:13.5px;line-height:1.5;
}
.retrato.sin-foto::after{display:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}


/* ── La firma tipográfica de ella ──────────────────────────────────────
   En todas sus piezas el titular son dos renglones: uno en negrita y otro
   en cursiva dorada debajo. Replicarlo es lo que hace que el sitio se lea
   como suyo y no como una plantilla. */
.script{
  display:block;font-family:var(--script);font-weight:400;
  color:var(--oro);letter-spacing:.01em;
  font-size:1.06em;line-height:1.25;margin-top:.08em;
  text-transform:none;
}
.hero h1 .script{font-size:1em}

/* Sombra suave: sobre crema, el borde solo no separa las tarjetas del fondo. */
.paso,.ficha,.pago-caja,.retrato{box-shadow:0 2px 14px rgba(43,35,28,.05)}
.paso:hover{box-shadow:0 12px 30px rgba(43,35,28,.10)}
.barra{border-bottom:1px solid var(--borde)}
.lista-check svg{color:var(--ok)}
.incluye svg{color:var(--oro)}
details[open]{border-color:var(--oro-claro)}
.retrato.sin-foto{background:var(--superficie-alta)}


/* ── Servicios ────────────────────────────────────────────────────────
   Ocupa el sitio que antes tenía el bloque antiestafa. Es lo que la
   persona vino a buscar, así que va de segundo y con el retrato al lado. */
.servicios-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
@media(max-width:880px){.servicios-grid{grid-template-columns:1fr;gap:36px}}

.servicio-lista{display:grid;gap:22px;margin:34px 0 34px}
.servicio{display:flex;gap:18px;align-items:flex-start}
.servicio-n{
  font-size:30px;color:var(--oro-claro);line-height:1;flex:none;
  min-width:46px;
}
.servicio h3{margin:0 0 5px;font-size:17px;font-weight:600}
.servicio p{margin:0;color:var(--tenue);font-size:15px}

/* ── Franja de confianza ──────────────────────────────────────────────
   Lo que antes era una sección entera. Se dice y se sigue: quien duda
   necesita verlo, pero no es lo que vino a leer. */
.confianza{padding:46px 0;background:var(--superficie-alta);
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.confianza-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:760px){.confianza-grid{grid-template-columns:1fr;gap:22px}}
.confianza-grid > div{display:flex;flex-direction:column;gap:5px}
.confianza-grid b{font-size:15px;color:var(--tinta)}
.confianza-grid span{font-size:14px;color:var(--tenue);line-height:1.55}

/* El retrato ya no lleva pie: la foto habla sola y el texto encima le
   robaba protagonismo justo al único elemento visual del sitio. */
.servicios .retrato{aspect-ratio:4/5}

.confianza-titulo{font-size:clamp(26px,3.4vw,34px);margin:0 0 30px;text-align:center}

.ficha-cabecera{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.ficha-duracion{font-size:46px;color:var(--oro);line-height:1.1}
.ficha-sub{font-size:15px;color:var(--tenue)}