/* =============================================================================
   SELLO — El sello de Códigos Solares, generado por código (js/sello.js)
   =============================================================================

   Se carga en todas las páginas, después de layout.css.

     .sello-svg y sus piezas → la figura, en tinta solar
     #hero …                 → hero del home: el sello se forma con el scroll
                               y al final entra el texto
     .c-hero-sello           → sello breve sobre el titular de los heros internos
   ============================================================================= */

/* ─── La figura ──────────────────────────────────────────────────────────────── */

.sello-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Aro, filete y estrella: trazos. La estrella lleva el degradado de oro (lo
   pone el script); el aro y el filete van en azul tinta. pathLength="1" en
   cada forma, así el dibujo va de 1 a 0. */
.sello-aro,
.sello-filete,
.sello-estrella {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.sello-aro {
  stroke: var(--sello-tinta);
  stroke-width: 4;
}

.sello-filete {
  stroke: var(--sello-tinta);
  stroke-width: 1;
}

/* Las alas, en zafiro, con un resplandor que les da cuerpo sin engrosar la línea */
.sello-ala-tinta {
  fill: var(--sello-tinta);
}

.sello-alas {
  filter: drop-shadow(0 0 10px rgba(var(--zafiro-luz-rgb), 0.75))
          drop-shadow(0 0 26px rgba(var(--zafiro-luz-rgb), 0.4));
}

/* El punto del centro, en rojo tinta: aparece cuando se cierra la estrella */
.sello-punto {
  fill: var(--sello-punto);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.sello-estrella {
  stroke-width: 4.4;
  stroke-linejoin: miter;
}

/* Llamas: crecen desde su base (el origen lo fija el script en cada una) */
.sello-llama {
  opacity: 0;
  transform: scale(0);
}

/* La onda de calor: una línea clara que recorre la llama por dentro */
.sello-llama-onda {
  fill: none;
  stroke: var(--surface);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Hero del home ──────────────────────────────────────────────────────────── */

/* Contenedor alto: genera el recorrido de scroll */
#hero {
  position: relative;
  height: 230vh;
  background-color: var(--surface);
}

/* Panel que queda fijo, debajo de la barra, mientras se forma el sello */
#hero-sticky {
  position: sticky;
  top: var(--header-h, 76px);
  height: calc(100vh - var(--header-h, 76px));
  overflow: hidden;
}

/* El sello ocupa el centro mientras se forma. Al final sube y se achica
   (lo mueve el script) para dejarle lugar al texto. */
#hero-sello {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(880px, 96vw);
  transform: translate(-50%, -50%);
  will-change: transform;
}

#hero-texto {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  width: min(580px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transform: translateX(-50%);
}

/* El texto espera oculto solo cuando el script está activo */
.js-sello #hero-texto {
  opacity: 0;
  transform: translate(-50%, 12px);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-text);
}

#hero-texto h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.2vw, 0.95rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.hero-ctas .btn-primary,
.hero-ctas .btn-secondary {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--ease-default), color var(--ease-default),
              transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-ctas .btn-primary {
  background-color: var(--accent-fill);
  background-image: var(--accent-gradient);
  color: var(--on-accent);
  box-shadow: inset 0 -2px 0 var(--accent-line);
}

.hero-ctas .btn-primary:hover {
  background-image: var(--accent-gradient-hover);
  transform: translateY(-2px);
  box-shadow: inset 0 -2px 0 var(--accent-line), 0 6px 24px rgba(var(--accent-fill-rgb), 0.25);
}

.hero-ctas .btn-secondary {
  color: var(--secondary-text);
  border-color: var(--secondary-border);
}

.hero-ctas .btn-secondary:hover {
  background-color: rgba(var(--ink-blue-rgb), 0.06);
  transform: translateY(-2px);
}

.hero-ctas a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* Aviso de scroll: aparece con el aro y se va apenas empieza el recorrido */
#hero-aviso {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-text);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  #hero-sello { width: 104vw; }
  #hero-texto { bottom: 3vh; gap: 0.8rem; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100%; text-align: center; }
}

/* ─── Sello breve sobre el titular de los heros internos ─────────────────────── */

.c-hero-sello {
  width: 270px;
  margin: -0.5rem 0 1.1rem;
}

/* ─── El sello formado: el punto late y las alas respiran ────────────────────── */

@keyframes sello-latido {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.32); }
  24%      { transform: scale(1); }
}

@keyframes sello-respiro {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(var(--zafiro-luz-rgb), 0.75)) drop-shadow(0 0 26px rgba(var(--zafiro-luz-rgb), 0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(var(--zafiro-luz-rgb), 0.95)) drop-shadow(0 0 36px rgba(var(--zafiro-luz-rgb), 0.6)); }
}

@media (prefers-reduced-motion: no-preference) {
  .sello-svg.is-formado .sello-punto { animation: sello-latido 4.6s ease-in-out infinite; }
}

/* El respiro anima un filtro, que es costoso: solo en pantallas grandes */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .sello-svg.is-formado .sello-alas { animation: sello-respiro 6.5s ease-in-out infinite; }
}

/* En celular, un solo resplandor: el doble pesa al dibujar las alas con el scroll */
@media (max-width: 767px) {
  .sello-alas { filter: drop-shadow(0 0 9px rgba(var(--zafiro-luz-rgb), 0.8)); }
}

/* ─── Movimiento reducido: el sello completo y quieto, sin recorrido ─────────── */

@media (prefers-reduced-motion: reduce) {
  #hero { height: auto; }
  #hero-sticky {
    position: static;
    min-height: calc(100vh - var(--header-h, 76px));
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: var(--space-md);
  }
  #hero-sello { position: static; transform: none; width: min(640px, 96vw); }
  #hero-texto,
  .js-sello #hero-texto { position: static; transform: none; opacity: 1; }
  #hero-aviso { display: none; }
}