/* =====================================================================
   Espacio Chapín — Tema personalizado
   ---------------------------------------------------------------------
   Overrides visuales y animaciones temáticas (sol, hojas, patrones mayas,
   textura tropical). Se carga tras spark-animations.css cuando el setting
   site_theme_id === 'chapin'.
   ===================================================================== */

/* ---- Color palette específica Guatemala natural ---- */
html:root,
.chapin-themed {
  --spark-c1: #15803d;         /* verde huerto (bosque nuboso) */
  --spark-c2: #d97706;          /* ámbar maíz (sol guatemalteco) */
  --spark-c3: #7c3aed;          /* morado jacaranda */
  --chapin-earth: #92400e;      /* tierra café */
  --chapin-sky: #0369a1;        /* cielo del altiplano */
  --chapin-maize: #fbbf24;      /* amarillo maíz */
  --chapin-leaf: #65a30d;       /* verde hoja joven */
  --chapin-maya-red: #be123c;   /* rojo maya */
  --spark-speed: 1.1;           /* animaciones un pelín más pausadas (ritmo chapín) */
}

/* ===================================================================
   1. SOL PULSANTE — reemplaza el orb del hero-visual
   =================================================================== */
.chapin-sun {
  position: absolute;
  top: 50%; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--chapin-maize) 55%, transparent) 0%,
    color-mix(in srgb, var(--spark-c2) 35%, transparent) 35%,
    color-mix(in srgb, var(--spark-c1) 20%, transparent) 60%,
    transparent 75%);
  filter: blur(40px);
  animation: chapin-sun-pulse calc(7s * var(--spark-speed)) ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes chapin-sun-pulse {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.18) rotate(30deg); }
}

/* Rayos del sol detrás (SVG line-based) */
.chapin-sunrays {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  color: color-mix(in srgb, var(--chapin-maize) 30%, transparent);
  animation: chapin-sunrays-spin calc(60s * var(--spark-speed)) linear infinite;
}
.chapin-sunrays svg { width: 100%; height: 100%; }
@keyframes chapin-sunrays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===================================================================
   2. HOJAS FLOTANTES — reemplazan los dots decorativos
   =================================================================== */
.chapin-leaf {
  position: absolute;
  width: 32px; height: 32px;
  color: var(--chapin-leaf);
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
.chapin-leaf svg { width: 100%; height: 100%; }

.chapin-leaf--1 { top: 12%; right: 18%; animation: chapin-leaf-fall-a calc(14s * var(--spark-speed)) ease-in-out infinite; }
.chapin-leaf--2 { top: 60%; right: 5%;  animation: chapin-leaf-fall-b calc(17s * var(--spark-speed)) ease-in-out infinite; opacity: 0.55; }
.chapin-leaf--3 { bottom: 10%; right: 35%; animation: chapin-leaf-fall-c calc(12s * var(--spark-speed)) ease-in-out infinite; opacity: 0.4; transform: scale(0.8); }

@keyframes chapin-leaf-fall-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-20px, 30px) rotate(-15deg); }
  50%  { transform: translate(10px, 60px) rotate(20deg); }
  75%  { transform: translate(-5px, 40px) rotate(-8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes chapin-leaf-fall-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-25px, -40px) rotate(-25deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes chapin-leaf-fall-c {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.8); }
  33%  { transform: translate(15px, -20px) rotate(12deg) scale(0.85); }
  66%  { transform: translate(-10px, 15px) rotate(-18deg) scale(0.9); }
  100% { transform: translate(0, 0) rotate(0deg) scale(0.8); }
}

/* ===================================================================
   3. PATRÓN MAYA — divisor decorativo entre secciones
   Líneas con dentado geométrico estilo grecas mayas
   =================================================================== */
.chapin-divider {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -12px 0;
  background: transparent;
  pointer-events: none;
}
.chapin-divider::before,
.chapin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chapin-maize) 40%, transparent), transparent);
}
.chapin-divider__glyph {
  margin: 0 20px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--chapin-maize) 80%, var(--chapin-earth));
  opacity: 0.6;
}

/* ===================================================================
   4. TITULOS DECORATIVOS — subrayado orgánico tipo pincel
   =================================================================== */
main h1, main h2.chapin-decor,
.niche-landing h2 {
  position: relative;
}
.niche-landing h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--chapin-maize), var(--spark-c1), transparent);
  border-radius: 2px;
  opacity: 0.7;
}
section.text-center h2::after,
.text-center > h2::after,
.niche-landing section[class*="text-center"] h2::after {
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================================
   5. CARD HOVER — movimiento viento (sutil rotación + lift)
   =================================================================== */
.chapin-themed a.group:hover,
.niche-landing a.group:hover {
  animation: chapin-wind-sway .8s ease-in-out;
}
@keyframes chapin-wind-sway {
  0%, 100% { transform: translateY(-4px) rotate(0deg); }
  25%      { transform: translateY(-5px) rotate(0.4deg); }
  75%      { transform: translateY(-5px) rotate(-0.3deg); }
}

/* ===================================================================
   6. ROADMAP — número con hoja creciendo detrás
   =================================================================== */
.niche-landing ol li .rounded-full {
  position: relative;
}
.niche-landing ol li .rounded-full::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--chapin-leaf) 25%, transparent) 0%, transparent 65%);
  z-index: -1;
  animation: chapin-grow calc(4s * var(--spark-speed)) ease-in-out infinite;
}
@keyframes chapin-grow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}

/* ===================================================================
   7. HERO GRADIENT ESPECÍFICO — tonos del amanecer guatemalteco
   =================================================================== */
.niche-landing .spark-aurora-bg {
  background:
    radial-gradient(ellipse 900px 500px at 20% 10%, color-mix(in srgb, var(--chapin-maize) 20%, transparent), transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 30%, color-mix(in srgb, var(--spark-c1) 16%, transparent), transparent 55%),
    radial-gradient(ellipse 500px 300px at 60% 90%, color-mix(in srgb, var(--chapin-sky) 10%, transparent), transparent 50%);
  animation: chapin-aurora-breath 18s ease-in-out infinite;
}
@keyframes chapin-aurora-breath {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-15px, 8px) scale(1.04); }
}

/* ===================================================================
   8. FLOATING CARDS — tono más cálido y border-radius asimétrico
   (sensación de "tarjeta de recuerdo chapín")
   =================================================================== */
.niche-landing .spark-fcard {
  border-radius: 22px 8px 22px 8px;  /* asimetría tipo sello/postal */
  border: 1px solid color-mix(in srgb, var(--chapin-earth) 15%, transparent);
  box-shadow:
    0 18px 38px -16px color-mix(in srgb, var(--chapin-earth) 35%, transparent),
    0 6px 12px -6px rgba(15, 23, 42, 0.08);
}
html.dark .niche-landing .spark-fcard {
  border-color: color-mix(in srgb, var(--chapin-maize) 18%, transparent);
}
.niche-landing .spark-fcard__tag {
  background: color-mix(in srgb, var(--chapin-maize) 22%, transparent);
  color: var(--chapin-earth);
  border: 1px solid color-mix(in srgb, var(--chapin-maize) 40%, transparent);
}

/* ===================================================================
   9. BUTTONS — sombra caliente + hover más orgánico
   =================================================================== */
.niche-landing .brand-btn,
.niche-landing .spark-shimmer {
  background: linear-gradient(135deg, var(--spark-c1) 0%, var(--chapin-leaf) 50%, var(--chapin-maize) 100%);
  background-size: 220% 100%;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--spark-c1) 55%, transparent);
}

/* ===================================================================
   10. FUENTES — Fraunces display + Lora body (si Google Fonts las cargó)
   Fallbacks sensatos para evitar FOUT feo.
   =================================================================== */
.niche-landing h1, .niche-landing h2, .niche-landing h3,
.niche-landing .font-display,
body.chapin-themed h1,
body.chapin-themed h2,
body.chapin-themed h3,
body.chapin-themed .font-display {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72;
}
body.chapin-themed,
.niche-landing p, .niche-landing li {
  font-family: 'Lora', 'Inter', Georgia, serif;
}

/* ===================================================================
   11. HOJA SVG (reutilizable via ::before en elementos decorativos) =================================================================== */
.chapin-leaf-icon {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--chapin-leaf);
}

/* ===================================================================
   12. REORDEN DE SECCIONES — identidad única chapín
   Orden default: hero, concepts, featured, pilares, mostread, tools,
                  roadmap, newsletter, shop, faq, cta-final
   Orden chapín:  hero, pilares(2), roadmap(3), featured(4), concepts(5),
                  mostread(6), tools(7), shop(8), newsletter(9), faq(10), cta-final(11)
   ===================================================================*/
.niche-landing [data-section="hero"]        { order: 1; }
.niche-landing [data-section="pilares"]     { order: 2; }
.niche-landing [data-section="roadmap"]     { order: 3; }
.niche-landing [data-section="featured"]    { order: 4; }
.niche-landing [data-section="concepts"]    { order: 5; }
.niche-landing [data-section="mostread"]    { order: 6; }
.niche-landing [data-section="tools"]       { order: 7; }
.niche-landing [data-section="shop"]        { order: 8; }
.niche-landing [data-section="newsletter"]  { order: 9; }
.niche-landing [data-section="faq"]         { order: 10; }
.niche-landing [data-section="cta-final"]   { order: 11; }

/* ===================================================================
   13. SECCIÓN PILARES — grid más "natural" con cards tipo postal
   =================================================================== */
.chapin-themed [data-section="pilares"] a.group {
  border-radius: 24px 6px 24px 6px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--chapin-leaf) 6%, white) 0%,
    white 60%);
}
html.dark .chapin-themed [data-section="pilares"] a.group {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--chapin-leaf) 12%, rgb(15, 23, 42)) 0%,
    rgb(15, 23, 42) 60%);
}

/* Pequeño pattern de hojas en esquina superior derecha de cards */
.chapin-themed [data-section="pilares"] a.group::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365a30d' stroke-width='1.5' opacity='0.3'%3E%3Cpath d='M12 2C8 2 5 6 5 11c0 5 7 11 7 11s7-6 7-11c0-5-3-9-7-9z'/%3E%3Cpath d='M12 22V9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}

/* ===================================================================
   14. FOOTER easter egg — línea de hormigas (zompopos) marchando
   =================================================================== */
.chapin-themed footer {
  position: relative;
}
.chapin-themed footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Ccircle cx='6' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='14' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='22' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='30' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='38' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='46' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='54' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='62' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='70' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='78' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='86' cy='5' r='1.2' fill='%2392400e'/%3E%3Ccircle cx='94' cy='5' r='1.2' fill='%2392400e'/%3E%3C/svg%3E");
  background-size: 100px 10px;
  background-repeat: repeat-x;
  opacity: 0.28;
  animation: chapin-ants-march 30s linear infinite;
}
@keyframes chapin-ants-march {
  from { background-position: 0 0; }
  to   { background-position: 100px 0; }
}

/* ===================================================================
   15. SECCIÓN CONCEPTS — cada card con hoja pequeña al hover
   =================================================================== */
.chapin-themed [data-section="concepts"] a.group:hover span[style*="color-mix"] {
  transform: rotate(-8deg) scale(1.08);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}

/* ===================================================================
   17. PLANTAS EN MACETAS — escena temática del hero (reemplaza cards)
   Las 3 plantas aparecen en la parte inferior del visual, con un
   "unfurl" (despliegue) de las hojas al cargar + sway sutil en loop.
   =================================================================== */
.chapin-plants {
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  padding: 0 20px;
  z-index: 4;
  pointer-events: none;
}
.chapin-plant {
  width: auto;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22));
  transform-origin: bottom center;
  animation: chapin-plant-grow 1.4s cubic-bezier(.22, 1, .36, 1) both;
}
.chapin-plant--1 { height: 150px; animation-delay: 0.1s; }
.chapin-plant--2 { height: 200px; animation-delay: 0.3s; }   /* central más alta */
.chapin-plant--3 { height: 160px; animation-delay: 0.5s; }

@keyframes chapin-plant-grow {
  0%   { transform: scaleY(0.25) scaleX(0.85); opacity: 0; }
  60%  { transform: scaleY(1.04) scaleX(1); opacity: 1; }
  100% { transform: scaleY(1) scaleX(1); opacity: 1; }
}

/* Vaivén continuo de las hojas (viento) */
.chapin-plant .chapin-plant-leaves {
  transform-origin: 50% 100%;
  animation: chapin-plant-sway 5s ease-in-out infinite;
}
.chapin-plant--1 .chapin-plant-leaves { animation-duration: 4.5s; }
.chapin-plant--2 .chapin-plant-leaves { animation-duration: 6s; }
.chapin-plant--3 .chapin-plant-leaves { animation-duration: 5.2s; animation-delay: 0.3s; }

@keyframes chapin-plant-sway {
  0%, 100% { transform: rotate(0deg); }
  33%      { transform: rotate(2deg); }
  66%      { transform: rotate(-2deg); }
}

/* ===================================================================
   18. COLIBRÍ — vuela en arco por el visual con alas aleteando rápido
   =================================================================== */
.chapin-hummingbird {
  position: absolute;
  width: 48px; height: 32px;
  top: 25%; left: -60px;
  z-index: 5;
  pointer-events: none;
  animation: chapin-hb-flight 18s cubic-bezier(.45, .05, .55, .95) infinite;
}
.chapin-hummingbird svg { width: 100%; height: 100%; }

@keyframes chapin-hb-flight {
  0%   { left: -60px;   top: 35%;  transform: scaleX(1) rotate(-5deg); }
  25%  { left: 45%;     top: 18%;  transform: scaleX(1) rotate(-8deg); }
  48%  { left: 78%;     top: 40%;  transform: scaleX(1) rotate(3deg); }
  50%  { left: 78%;     top: 40%;  transform: scaleX(-1) rotate(0deg); }
  75%  { left: 30%;     top: 58%;  transform: scaleX(-1) rotate(6deg); }
  100% { left: -60px;   top: 35%;  transform: scaleX(-1) rotate(0deg); }
}

/* Alas aleteando 0.15s (muy rápido como colibrí real) */
.chapin-hb-wing {
  animation: chapin-hb-wing-flap 0.12s ease-in-out infinite;
}
@keyframes chapin-hb-wing-flap {
  0%, 100% { transform: scaleY(1) rotate(-10deg); }
  50%      { transform: scaleY(0.3) rotate(30deg); }
}

/* Mobile/tablet: escala reducida de la escena */
@media (max-width: 1023px) {
  .chapin-plants { padding: 0 12px; }
  .chapin-plant--1 { height: 110px; }
  .chapin-plant--2 { height: 150px; }
  .chapin-plant--3 { height: 120px; }
  .chapin-hummingbird { width: 38px; height: 26px; }
}

/* ===================================================================
   19. ACCESIBILIDAD — reduced motion (actualizada)
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .chapin-sun, .chapin-sunrays, .chapin-leaf,
  .niche-landing a.group:hover,
  .niche-landing ol li .rounded-full::before,
  .niche-landing .spark-aurora-bg,
  .chapin-plant, .chapin-plant-leaves,
  .chapin-hummingbird, .chapin-hb-wing,
  .chapin-themed footer::before {
    animation: none !important;
  }
}