/* =============================================================================
   Say Notary v2 — COMPONENTES: cabecera + hero + footer
   Depende de tokens.css + base.css. Solo var(--sn-*).
   ============================================================================= */

/* ---------------- Botón grande ---------------- */
.sn-btn--lg { padding: 1.05em 1.9em; font-size: 1.05rem; }

/* ============================================================================
   CABECERA — transparente sobre el hero; sólida (crema) al hacer scroll
   ============================================================================ */
.sn-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--sn-z-header);
  transition: background-color var(--sn-dur-hover) var(--sn-ease-out),
              box-shadow var(--sn-dur-hover) var(--sn-ease-out);
}
.sn-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sn-space-5);
  padding-block: var(--sn-space-4);
}
.sn-header__logo { display: inline-flex; align-items: center; }
.sn-header__logo img { height: 38px; width: auto; display: block; }
/* dos versiones del logo: crema sobre el hero, oscuro al hacer scroll */
.sn-header__logo .logo-dark  { display: none; }
.sn-header__logo .logo-light { display: block; }

.sn-nav__list {
  display: flex; gap: var(--sn-space-6); list-style: none; margin: 0; padding: 0;
  font-size: 0.95rem; font-weight: var(--sn-fw-body-medium);
}
.sn-nav__list a { color: var(--sn-on-dark-heading); opacity: .88; transition: opacity var(--sn-dur-micro) var(--sn-ease-out); }
.sn-nav__list a:hover { opacity: 1; }

.sn-header__actions { display: flex; align-items: center; gap: var(--sn-space-3); }

/* Botón "Reservar" de la barra: píldora pequeña, en armonía con el hero */
.sn-header__actions .sn-btn--primary {
  padding: 0.5rem 1.25rem;
  font-size: 0.88rem;
  border-radius: 999px;
  background: var(--sn-rose);
  box-shadow: 0 6px 18px -10px rgba(255,46,136,.7);
}
.sn-header__actions .sn-btn--primary::after { content: none; }   /* sin flecha (minimal) */
.sn-header__actions .sn-btn--primary:hover {
  background: #ff1f7e;
  box-shadow: 0 8px 22px -8px rgba(255,46,136,.85);
}

/* Escritorio: logo a la izquierda · menú centrado · botón a la derecha */
@media (min-width: 861px) {
  .sn-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .sn-header__logo    { justify-self: start; }
  .sn-nav             { justify-self: center; }
  .sn-header__actions { justify-self: end; }
}

/* Estado scrolled */
.sn-header.is-scrolled {
  background: color-mix(in srgb, var(--sn-cream) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--sn-hairline);
}
.sn-header.is-scrolled .sn-header__logo .logo-dark  { display: block; }
.sn-header.is-scrolled .sn-header__logo .logo-light { display: none; }
.sn-header.is-scrolled .sn-nav__list a { color: var(--sn-ink-heading); }

/* Toggle móvil */
.sn-nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.sn-nav-toggle span { width: 24px; height: 2px; background: var(--sn-on-dark-heading); border-radius: 2px; transition: background var(--sn-dur-micro); }
.sn-header.is-scrolled .sn-nav-toggle span { background: var(--sn-ink-heading); }

/* ============================================================================
   HERO — video de fondo + velo ciruela + contenido
   ============================================================================ */
.sn-hero {
  position: sticky; top: 0; z-index: 0;   /* se queda fijo; la sección siguiente sube por encima */
  min-height: 100svh;
  display: grid; align-items: center;      /* contenido centrado → aire arriba y abajo */
  overflow: hidden;
  background: var(--sn-wine-night); /* base sólida por si el video no carga */
}
/* La(s) sección(es) tras el hero lo cubren al scrollear (el video "se esconde detrás") */
.sn-after { position: relative; z-index: 1; background: var(--sn-cream); }
.sn-hero__video {
  position: absolute; top: 0; right: 0; left: auto;
  width: 60%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: var(--sn-z-hero-video);
  --edge: 66%;
  /* el borde del video se funde en DIAGONAL, fundido largo (sin costura) */
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, transparent 12%, #000 var(--edge));
          mask-image: linear-gradient(102deg, transparent 0%, transparent 12%, #000 var(--edge));
}
/* Velo ciruela: alfa alto a la izquierda (donde va el texto) → mínimo a la derecha,
   más un degradado inferior. Absorbe el gris del video hacia la ciruela. */
.sn-hero__scrim {
  position: absolute; inset: 0; z-index: var(--sn-z-hero-overlay);
  background:
    /* lavado ciruela DIAGONAL muy gradual: disuelve el gris del video sin banda visible */
    linear-gradient(102deg,
      var(--sn-wine-night) 0%,
      var(--sn-wine-night) 34%,
      rgba(14,7,16,.82) 44%,
      rgba(14,7,16,.5) 54%,
      rgba(14,7,16,.2) 64%,
      rgba(14,7,16,0) 76%),
    /* degradado inferior para el pie de texto */
    linear-gradient(180deg, rgba(14,7,16,0) 52%, rgba(14,7,16,.62) 100%),
    /* leve tinte borgoña global: baja el brillo del gris de estudio */
    linear-gradient(0deg, rgba(122,28,70,.14), rgba(122,28,70,.14));
}
.sn-hero__inner {
  position: relative; z-index: var(--sn-z-hero-content);
  width: 100%;
  padding-block: clamp(5rem, 11vh, 8.5rem);   /* aire generoso arriba y abajo */
  --sn-hero-col: 600px;        /* columna del bloque (a la izquierda del video) */
}
.sn-hero .sn-eyebrow { color: var(--sn-champagne); margin-bottom: var(--sn-space-4); }

.sn-hero__title {
  color: var(--sn-on-dark-heading);
  font-size: clamp(4.5rem, 12vw, 10.5rem);   /* titular XL: domina el hero */
  line-height: 0.86;          /* "Notary" y "Public" más unidas */
  letter-spacing: -0.045em;
  max-width: var(--sn-hero-col);
  margin: 0 auto var(--sn-space-5) 0;   /* columna anclada a la izquierda */
  text-align: center;         /* titular centrado en la columna */
  text-wrap: pretty;
}
.sn-hero__title .w { display: inline-block; }         /* para el reveal por palabra */
.sn-hero__title .sn-em {                              /* acento Fraunces itálica (Public) */
  color: var(--sn-accent);
  font-size: 1.18em;         /* equilibrado ópticamente con Inter (Fraunces) */
  letter-spacing: 0;
  text-shadow: 0 0 40px rgba(255,46,136,.5);   /* glow magenta */
}

.sn-hero__sub {
  color: var(--sn-on-dark-body);
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);   /* lo más pequeño posible */
  line-height: 1.5;
  max-width: var(--sn-hero-col);   /* mismo eje que el titular */
  margin: var(--sn-space-4) auto var(--sn-space-6) 0;
  text-align: center;
}
/* Segunda línea del subtítulo: aclaración en Fraunces itálica (salvedad Miami) */
.sn-hero__aside {
  font-family: var(--sn-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.22em;          /* la serif se lee mejor algo más grande */
  letter-spacing: 0;
  color: var(--sn-champagne);  /* tono aparte, como nota */
}
.sn-hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--sn-space-4);
  max-width: var(--sn-hero-col);   /* mismo eje que el titular */
  margin-right: auto;
  justify-content: center;         /* botones centrados en la columna */
}

/* ---- Botones del hero: PÍLDORAS GLASS (pequeñas, redondeadas, cristal esmerilado) ---- */
.sn-hero__cta .sn-btn {
  padding: 0.62rem 1.35rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 999px;                 /* píldora */
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: background var(--sn-dur-hover) var(--sn-ease-out),
              border-color var(--sn-dur-hover) var(--sn-ease-out),
              transform var(--sn-dur-micro) var(--sn-ease-out),
              box-shadow var(--sn-dur-hover) var(--sn-ease-out);
}
.sn-hero__cta .sn-btn:hover { transform: translateY(-1px); }
.sn-hero__cta .sn-btn:active { transform: scale(.985); }

/* Primario: cristal con tinte magenta + glow sutil, sin flecha (minimal) */
.sn-hero__cta .sn-btn--primary {
  background: rgba(255,46,136,.28);
  border-color: rgba(255,46,136,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 26px -14px rgba(255,46,136,.6);
}
.sn-hero__cta .sn-btn--primary:hover { background: rgba(255,46,136,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 36px -12px rgba(255,46,136,.7); }
.sn-hero__cta .sn-btn--primary::after { content: none; }

/* Secundario: cristal blanco sutil, borde fino */
.sn-hero__cta .sn-btn--champagne {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--sn-cream);
}
.sn-hero__cta .sn-btn--champagne:hover { background: rgba(255,255,255,.15); }

/* ============================================================================
   RON — Notarización en línea (sección estrella): proceso + precios
   ============================================================================ */
.sn-ron { padding-block: clamp(4.5rem, 10vh, 8rem); }
.sn-ron__head { max-width: 62ch; margin: 0 auto var(--sn-space-8); text-align: center; }
.sn-ron__title {
  font-size: var(--sn-fs-display-l);
  color: var(--sn-ink-heading);
  letter-spacing: -0.02em; line-height: 1.05;
  margin: var(--sn-space-3) 0 var(--sn-space-4);
}
.sn-ron__intro { font-size: var(--sn-fs-lead); color: var(--sn-ink-body); margin: 0 auto; max-width: 52ch; }

/* --- Proceso paso a paso --- */
.sn-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sn-space-4);
  margin-bottom: var(--sn-space-9);
}
.sn-step {
  position: relative;
  padding: var(--sn-space-6) var(--sn-space-5) var(--sn-space-5);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-card);
  border: 1px solid var(--sn-hairline);
  box-shadow: var(--sn-shadow-soft);
  transition: transform var(--sn-dur-hover) var(--sn-ease-out), box-shadow var(--sn-dur-hover) var(--sn-ease-out);
}
.sn-step:hover { transform: translateY(-3px); box-shadow: var(--sn-shadow-card); }
.sn-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; margin-bottom: var(--sn-space-4);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sn-rose), var(--sn-violet));
  color: #fff; font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 18px -8px rgba(255,46,136,.6);
}
.sn-step__t { font-size: 1.05rem; font-weight: 600; color: var(--sn-ink-heading); margin-bottom: var(--sn-space-2); }
.sn-step__d { font-size: var(--sn-fs-small); color: var(--sn-ink-body); line-height: 1.55; }

/* --- Tarjetas de precio --- */
.sn-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sn-space-4); }
.sn-price {
  display: flex; flex-direction: column; gap: var(--sn-space-2);
  padding: var(--sn-space-6) var(--sn-space-5);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-card);
  border: 1px solid var(--sn-hairline);
  text-align: center;
  transition: transform var(--sn-dur-hover) var(--sn-ease-out), box-shadow var(--sn-dur-hover) var(--sn-ease-out);
}
.sn-price:hover { transform: translateY(-3px); box-shadow: var(--sn-shadow-card); }
.sn-price__label { font-size: var(--sn-fs-small); font-weight: 600; color: var(--sn-ink-heading); text-transform: uppercase; letter-spacing: .06em; }
.sn-price__amt { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; color: var(--sn-ink-heading); line-height: 1; letter-spacing: -0.02em; }
.sn-price__amt small { display: block; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sn-burgundy); margin-top: .35rem; }
.sn-price__detail { font-size: var(--sn-fs-small); color: var(--sn-ink-body); }
/* Tarjeta estrella ($35): destacada en ciruela oscuro con acento magenta */
.sn-price--star {
  background: linear-gradient(160deg, var(--sn-wine-raised), var(--sn-wine-night));
  border-color: rgba(255,46,136,.5);
  box-shadow: 0 0 0 1px rgba(255,46,136,.3), 0 20px 60px -20px rgba(255,46,136,.5);
}
.sn-price--star .sn-price__label { color: var(--sn-champagne); }
.sn-price--star .sn-price__amt { color: #fff; }
.sn-price--star .sn-price__amt small { color: var(--sn-rose); }
.sn-price--star .sn-price__detail { color: var(--sn-on-dark-body); }
.sn-price__tag {
  align-self: center; margin-bottom: var(--sn-space-2);
  font-size: 0.7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sn-rose);
}
/* Tarjeta de cotización (sin número $): texto mediano en borgoña */
.sn-price--quote .sn-price__amt { font-size: 1.3rem; color: var(--sn-burgundy); font-weight: 600; letter-spacing: 0; }

@media (max-width: 900px) {
  .sn-steps, .sn-prices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sn-steps, .sn-prices { grid-template-columns: 1fr; }
}

/* Reveal on scroll (solo cuando el JS confirma que anima; si no, visible) */
html.sn-js .sn-reveal { opacity: 0; transform: translateY(18px); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.sn-footer { padding-block: var(--sn-space-8); }
.sn-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sn-space-4);
}
.sn-footer__logo { height: 34px; width: auto; }
.sn-footer__copy { color: var(--sn-on-dark-body); font-size: var(--sn-fs-small); }
.sn-footer__copy a { color: var(--sn-champagne); }

/* ============================================================================
   FUTURISMO — botones premium, aurora y grano
   ============================================================================ */

/* Botón primario: degradado magenta + doble glow (magenta + violeta) + flecha */
.sn-btn--primary {
  background: linear-gradient(135deg, #FF3D96 0%, #E01E74 100%);
  box-shadow: 0 0 0 1px rgba(255,46,136,.35),
              0 10px 28px -8px rgba(255,46,136,.5),
              0 0 46px -14px rgba(177,76,255,.5);
}
.sn-btn--primary::after {
  content: "\2192"; /* → */
  font-weight: 600;
  margin-left: .15em;
  transition: transform var(--sn-dur-hover) var(--sn-ease-out);
}
.sn-btn--primary:hover {
  box-shadow: 0 0 0 1px rgba(255,46,136,.55),
              0 14px 34px -8px rgba(255,46,136,.62),
              0 0 62px -12px rgba(177,76,255,.6);
}
.sn-btn--primary:hover::after { transform: translateX(4px); }

/* Botón champán: brillo metálico al pasar */
.sn-btn--champagne {
  transition: transform var(--sn-dur-micro) var(--sn-ease-out),
              background-color var(--sn-dur-hover) var(--sn-ease-out),
              box-shadow var(--sn-dur-hover) var(--sn-ease-out);
}
.sn-btn--champagne:hover { box-shadow: 0 0 30px -10px rgba(231,203,176,.6); }


/* Aurora de luz (magenta→violeta) tras el titular del hero */
.sn-hero__glow {
  position: absolute; z-index: var(--sn-z-hero-overlay);
  left: -8%; bottom: -6%;
  width: min(62vw, 820px); height: min(62vw, 820px);
  background: radial-gradient(circle at 42% 58%,
              rgba(255,46,136,.5), rgba(177,76,255,.26) 46%, transparent 70%);
  filter: blur(72px); opacity: .5; pointer-events: none;
  animation: sn-aurora 16s ease-in-out infinite alternate;
}
@keyframes sn-aurora {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(9%, -7%) scale(1.16); }
}

/* Halo violeta futurista alrededor de Maite (derecha) */
.sn-hero::before {
  content: ""; position: absolute; z-index: var(--sn-z-hero-overlay);
  right: -6%; top: 6%;
  width: min(50vw, 700px); height: min(50vw, 700px);
  background: radial-gradient(circle at 55% 45%,
              rgba(177,76,255,.32), rgba(255,46,136,.15) 42%, transparent 68%);
  filter: blur(80px); opacity: .5; pointer-events: none;
  animation: sn-aurora2 19s ease-in-out infinite alternate;
}
@keyframes sn-aurora2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-6%, 6%) scale(1.12); }
}

/* Grano/textura sutil sobre el hero */
.sn-hero::after {
  content: ""; position: absolute; inset: 0; z-index: var(--sn-z-hero-overlay);
  pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   CURSOR SELLO (solo escritorio; lo inyecta cursor.js)
   ============================================================================ */
html.sn-cursor-on, html.sn-cursor-on * { cursor: none; }
#sn-cursor {
  position: fixed; top: 0; left: 0;
  width: 74px; height: 74px;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .3s ease, filter .25s ease;
  --seal-c: #E3CBB0;              /* champán (sobre oscuro) */
  --seal-star: #F1E4CF;
  filter: drop-shadow(0 0 10px rgba(231, 203, 176, .55)) drop-shadow(0 0 2px rgba(23, 7, 13, .35));
}
/* Sobre secciones claras → sello MAGENTA (rosa eléctrico) para que se vea */
#sn-cursor.on-light {
  --seal-c: #FF2E88;
  --seal-star: #FF2E88;
  filter: drop-shadow(0 0 10px rgba(255, 46, 136, .5)) drop-shadow(0 0 1.5px rgba(23, 7, 13, .25));
}
#sn-cursor svg { width: 100%; height: 100%; animation: sn-cursor-spin 8s linear infinite; }
@keyframes sn-cursor-spin { to { transform: rotate(360deg); } }
#sn-cursor-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 860px) {
  .sn-nav, .sn-header__actions { display: none; }
  .sn-nav-toggle { display: flex; }

  .sn-header.menu-open { background: var(--sn-wine-night); }
  .sn-header.menu-open .sn-nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sn-wine-night); padding: var(--sn-space-5) var(--sn-gutter) var(--sn-space-6);
  }
  .sn-header.menu-open .sn-nav__list { flex-direction: column; gap: var(--sn-space-4); }
  .sn-header.menu-open .sn-nav__list a { color: var(--sn-on-dark-heading); }
  .sn-header.menu-open .sn-header__actions {
    display: flex; position: absolute; top: calc(100% + 190px); left: 0; right: 0;
    padding: 0 var(--sn-gutter) var(--sn-space-6); background: var(--sn-wine-night);
  }
  .sn-header.menu-open .sn-nav-toggle span { background: var(--sn-on-dark-heading); }

  .sn-hero__title { max-width: 100%; }
}