/* =====================================================================
   dev.css — Estilos exclusivos de template-home2026dev.php
   (NO debe cargarse en ninguna otra plantilla/página)
   ===================================================================== */

/* =====================================================================
   PALETA (anexo)
   Amarillo   #F0DE71  -> CLARO  -> texto OSCURO encima / solo sobre fondos oscuros
   Turquesa   #02FFCF  -> CLARO  -> texto OSCURO encima / solo sobre fondos oscuros
   Azul       #073455  -> OSCURO -> texto BLANCO encima
   Navy       #0C002C  -> OSCURO -> texto BLANCO encima
   Regla base: fondo BLANCO, textos NEGROS; blanco solo sobre colores oscuros.
   --summit-teal-ink es una versión oscurecida del turquesa, LEGIBLE sobre blanco.
   ===================================================================== */
:root{
  /* Colores del anexo */
  --summit-yellow:#F0DE71;
  --summit-turquoise:#02FFCF;
  --summit-blue:#073455;
  --summit-navy:#0C002C;
  --summit-teal-ink:#057A62;   /* turquesa oscurecido: verde legible sobre blanco */

  /* Mapeo a los roles usados en el resto del archivo */
  --summit-midnight-navy:#0C002C;
  --summit-deep-tech-blue:#073455;
  --summit-petroleum:#0A6E7E;       /* teal-azulado oscuro (hover / secundario) */
  --summit-emerald-tech:#057A62;    /* PRIMARIO: verde legible sobre blanco */
  --summit-emerald-mid:#0A6E57;     /* verde medio */
  --summit-sand-gold:#F0DE71;       /* amarillo: acento esporádico (sobre oscuro) */
  --summit-warm-bronze:#8A7D2E;     /* amarillo oscurecido (legible sobre blanco) */
  --summit-neutral-stone:#7C8A86;
  --summit-soft-mint:#02FFCF;       /* turquesa vivo: acento / decorativo */

  /* Backgrounds (oscuros) */
  --summit-bg-primary:#0C002C;
  --summit-bg-secondary:#073455;
  --summit-bg-sections:#0E2A3F;

  /* CTAs */
  --summit-cta:#02FFCF;
  --summit-cta-hover:#073455;

  /* Tipografía */
  --summit-heading:#FFFFFF;
  --summit-text:#DFE9EE;
  --summit-text-muted:#9FB0B8;

  /* Acentos */
  --summit-gold:#F0DE71;
  --summit-green:#057A62;

  /* Gradientes */
  --summit-gradient-hero:linear-gradient(90deg,#0C002C 0%,#073455 30%,#057A62 55%,#02FFCF 75%,#F0DE71 100%);
  --summit-gradient-premium:linear-gradient(90deg,#F0DE71 0%,#FFF0A6 100%);
}

/* === RESET BÁSICO === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.5;}

/* ===== VARIABLES CSS ===== */
:root{
  --wapp:#25D366;
  --wapp-dark:#1ebe59;
  --bg-overlay:rgba(12,0,44,.55);              /* Navy translúcido */
  --border-glow:0 0 0 0 rgba(2,255,207,.55);   /* Turquesa */
}

/* === OVERLAY === */
#wapp-modal-overlay{
  position:fixed;inset:0;
  background:var(--bg-overlay);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}

/* === CONTENEDOR DEL MODAL === */
#wapp-modal{
  background:#fff;
  border-radius:18px;
  padding:1.5rem 1.25rem;
  width:90%;max-width:420px;
  position:relative;
  border-top:4px solid var(--summit-turquoise);
  transform:translateY(24px) scale(.9);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  animation:pop .8s ease-out forwards;
  /* —— Halo animado para llamar la atención —— */
  box-shadow:var(--border-glow);
  animation:pop .8s ease-out forwards, pulseGlow 3s 1.2s ease-out infinite;
}

/* === EFECTO HALO LUMINOSO === */
@keyframes pulseGlow{
  0%{box-shadow:0 0 0 0 rgba(2,255,207,.5);}
  70%{box-shadow:0 0 0 16px rgba(2,255,207,0);}
  100%{box-shadow:0 0 0 0 rgba(2,255,207,0);}
}

/* === CONTENIDO === */
#wapp-modal h2{font-size:1.25rem;color:var(--summit-navy);margin-bottom:.65rem;display:flex;align-items:center;gap:.5rem;}
#wapp-modal h2::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--summit-teal-ink);
  animation:blink 1.4s infinite alternate ease-in-out;
}
@keyframes blink{from{opacity:.4;}to{opacity:1;}}

#wapp-modal p{font-size:.95rem;color:var(--summit-blue);margin-bottom:1.15rem;}

/* === MENSAJE PREVIEW === */
.msg-preview{
  background:rgba(2,255,207,.12);   /* Turquesa muy suave */
  border-radius:12px;padding:1rem;
  border:1px solid var(--summit-teal-ink);
  margin-bottom:1.25rem;
  position:relative;
}
.msg-preview::before{
  content:"";position:absolute;left:16px;bottom:-8px;
  border:8px solid transparent;border-top-color:rgba(2,255,207,.12);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.04));
}

/* === BOTÓN UNIRSE === */
a.join-wapp{
  --gradient:linear-gradient(90deg,var(--summit-turquoise) 0%,var(--summit-teal-ink) 100%);
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font-weight:600;color:var(--summit-navy);text-decoration:none;  /* texto oscuro sobre turquesa */
  padding:.8rem 1rem;border-radius:14px;
  background:var(--gradient);
  background-size:200% 100%;
  transition:background-position .4s ease,transform .2s ease;
  display:block;      /* cambia de inline-flex a bloque */
  width:max-content;  /* sólo lo necesario */
  margin:0 auto;      /* margen automático a ambos lados */
}

a.join-wapp:hover,a.join-wapp:focus{
  background-position:100% 0;
  transform:translateY(-2px);
}

/* === BOTÓN CERRAR === */
button.close{
  position:absolute;top:.55rem;right:.55rem;
  width:32px;aspect-ratio:1;
  background:none;border:none;cursor:pointer;
  color:#5b6b73;font-size:1.5rem;line-height:1;
  border-radius:50%;transition:background .25s ease;
}
button.close:hover{background:rgba(12,0,44,.06);}

/* === ANIMACIÓN APERTURA === */
@keyframes pop{
  0%{transform:translateY(30px) scale(.82);opacity:0;}
  60%{transform:translateY(-8px) scale(1.03);opacity:1;}
  100%{transform:translateY(0) scale(1);}
}

/* === MODAL ACTIVO === */
#wapp-modal-overlay.active{opacity:1;pointer-events:auto;}


/* =====================================================================
   ICONOS — Juego de colores
   Fondos oscuros: Navy (#0C002C) / Azul (#073455)
   Verde legible sobre blanco: teal-ink (#057A62)
   Acento vivo (sobre oscuro): Turquesa (#02FFCF) · Amarillo esporádico
   ===================================================================== */

/* ----- Iconos de cifras (fun-fact / count-box): fondo circular oscuro, glifo blanco ----- */
.fun-fact-section .count-box .icon{
  color:#ffffff;
  background-color:var(--summit-deep-tech-blue);
  box-shadow:5px 10px 30px rgba(12,0,44,.18);
}
/* Ciclo de fondos en las 4 columnas (oscuros = glifo blanco) */
.fun-fact-section .counter-column:nth-child(4n + 1) .count-box .icon{ background-color:var(--summit-deep-tech-blue); }
.fun-fact-section .counter-column:nth-child(4n + 2) .count-box .icon{ background-color:var(--summit-petroleum); }
/* 3ª columna: acento turquesa vivo -> glifo OSCURO para contraste */
.fun-fact-section .counter-column:nth-child(4n + 3) .count-box .icon{ background-color:var(--summit-turquoise); color:var(--summit-navy); }
.fun-fact-section .counter-column:nth-child(4n + 4) .count-box .icon{ background-color:var(--summit-midnight-navy); }
/* Títulos de cifras a juego (sobre blanco -> tonos legibles) */
.fun-fact-section .counter-column:nth-child(4n + 1) .counter-title{ color:var(--summit-deep-tech-blue); }
.fun-fact-section .counter-column:nth-child(4n + 2) .counter-title{ color:var(--summit-petroleum); }
.fun-fact-section .counter-column:nth-child(4n + 3) .counter-title{ color:var(--summit-teal-ink); }
.fun-fact-section .counter-column:nth-child(4n + 4) .counter-title{ color:var(--summit-midnight-navy); }

/* ----- Iconos de características (feature-block): glifo grande sobre blanco ----- */
.feature-block .icon-box .icon,
.feature-block .icon-box .icon i,
.feature-block:nth-child(3n + 1) .icon-box .icon{ color:var(--summit-emerald-tech); }   /* teal-ink */
.feature-block:nth-child(3n + 2) .icon-box .icon{ color:var(--summit-petroleum); }
.feature-block:nth-child(3n + 3) .icon-box .icon{ color:var(--summit-deep-tech-blue); }

/* ----- Iconos de "Los temas que abordamos" (feature-block-two) -----
   Cada tarjeta juega con un color de la paleta. Sobre BLANCO solo se usan
   tonos oscuros (legibles); el amarillo/turquesa claros se reservan para
   fondos oscuros. El 1er hijo del row es .title-block, así que las tarjetas
   van del nth-child(2) al nth-child(6). El color se fija en el glifo <i>. */
.feature-block-two .icon-box .icon,
.feature-block-two .icon-box .icon i{ color:var(--summit-emerald-tech); }
.feature-block-two:nth-child(2) .icon-box .icon i{ color:var(--summit-teal-ink); }       /* verde */
.feature-block-two:nth-child(3) .icon-box .icon i{ color:var(--summit-petroleum); }      /* teal-azul */
.feature-block-two:nth-child(4) .icon-box .icon i{ color:var(--summit-blue); }           /* azul */
.feature-block-two:nth-child(5) .icon-box .icon i{ color:var(--summit-navy); }           /* navy */
.feature-block-two:nth-child(6) .icon-box .icon i{ color:var(--summit-teal-ink); }       /* verde */

/* ----- Iconos de precios (pricing-block): círculo blanco con borde ----- */
.pricing-block .icon-box .icon-outer{ background-color:var(--summit-deep-tech-blue); }
.pricing-block .icon-box .icon{
  color:var(--summit-emerald-tech);
  border-color:var(--summit-emerald-tech);
}
.pricing-block .inner-box:hover .icon-box .icon{
  color:var(--summit-petroleum);
  border-color:var(--summit-petroleum);
}
/* Ticket: color más encendido de la paleta (turquesa vivo sobre el círculo azul) */
.pricing-block .icon-box .icon:has(.fa-ticket){
  color:var(--summit-turquoise);
  border-color:var(--summit-turquoise);
}
.pricing-block .icon-box .icon i.fa-ticket{ color:var(--summit-turquoise); }

/* ----- Iconos en línea (listas del banner, agenda, etc.) ----- */
.banner-carousel .content-box .info-list li .icon{ color:var(--summit-teal-ink); }

/* ----- Iconos de glifo genéricos: heredan el color de su contenedor ----- */
.icon-box .icon i,
.count-box .icon i{ color:inherit; }


/* =====================================================================
   PALETA REPARTIDA EN LA LANDING — fondo BLANCO, estética tecnológica
   ===================================================================== */

/* ----- Títulos de sección ----- */
/* Eyebrow: texto recortado sobre blanco -> solo tonos oscuros (legible) */
.sec-title .title{
  background:linear-gradient(to left,
      var(--summit-navy) 0%,
      var(--summit-blue) 45%,
      var(--summit-teal-ink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.sec-title h2{ color:var(--summit-midnight-navy); }
.sec-title .text{ color:#5b6b73; }

/* ----- Cajas de icono genéricas + glifos FontAwesome de contenido (sobre blanco) ----- */
.icon-box .icon{ color:var(--summit-emerald-tech); }
.feature-block i[class*="fa-"],
.about-section i[class*="fa-"],
.services-section i[class*="fa-"],
.register-form .form-group .icon{
  color:var(--summit-emerald-tech);
}

/* ----- Botones / CTAs -----
   CTA primario = turquesa vivo con texto OSCURO (máximo contraste y marca).
   Secundario = azul oscuro con texto blanco. */
.btn-style-one{ background-color:var(--summit-turquoise); color:var(--summit-navy); }
.btn-style-one:hover{ color:var(--summit-blue); }          /* el velo blanco del tema entra al hover */
.btn-style-two{ background-color:var(--summit-deep-tech-blue); color:#ffffff; }
.btn-style-two:hover{ color:var(--summit-deep-tech-blue); }
.banner-carousel .active .content-box .btn-box .btn-style-one{ background-color:var(--summit-turquoise); color:var(--summit-navy); }

/* ----- Tarjetas de precios ----- */
.pricing-block .inner-box{ border-bottom-color:var(--summit-turquoise); }
.pricing-block .icon-box{ background-color:var(--summit-deep-tech-blue); }
.pricing-block .features li:before{ color:var(--summit-teal-ink); }           /* check */
.pricing-block .features li.false:before{ color:var(--summit-text-muted); }   /* no incluido */

/* ----- Acordeón (FAQ) ----- */
.accordion-box .block .acc-btn{
  background-color:var(--summit-deep-tech-blue);
  border-color:var(--summit-deep-tech-blue);
  color:#ffffff;
}
.accordion-box .block .acc-btn.active{
  background-color:var(--summit-teal-ink);   /* verde oscuro -> texto blanco legible */
}
/* La flecha del acordeón se mantiene blanca para contraste */
.accordion-box .block .acc-btn .icon-outer,
.accordion-box .block .acc-btn .icon-outer .icon{ color:#ffffff; }

/* ----- Cuenta regresiva (coming-soon): superficie OSCURA con acentos vivos ----- */
.coming-soon-section .outer-box{
  background:linear-gradient(90deg,
      var(--summit-navy) 0%,
      var(--summit-blue) 38%,
      var(--summit-teal-ink) 66%,
      var(--summit-turquoise) 90%,
      var(--summit-yellow) 100%); /* turquesa + amarillo: acentos esporádicos */
  box-shadow:0 0 30px rgba(12,0,44,.30);
}

/* ----- Cuenta regresiva en MÓVIL: máximo contraste -----
   El degradado claro lava el texto blanco en pantallas chicas, así que
   en móvil usamos fondo oscuro sólido (negro/navy) con acentos vivos. */
@media (max-width: 767px){
  .coming-soon-section .outer-box{
    background:var(--summit-navy);                    /* casi negro -> texto blanco nítido */
    border:2px solid var(--summit-turquoise);         /* acento turquesa destacable */
    box-shadow:0 0 24px rgba(2,255,207,.35);          /* glow turquesa */
  }
  /* Título bien legible (alto contraste sobre el fondo oscuro) */
  .coming-soon-section .outer-box h2{ color:#ffffff; }

  /* Lista de info del banner: en línea y tipografía más compacta (solo móvil) */
  .banner-carousel .content-box .info-list li{
    position:relative;
    display:inline-block;
    font-size:14px;
  }
}

/* ----- Formulario de registro ----- */
.register-form .form-group input[type="text"]:focus,
.register-form .form-group input[type="email"]:focus,
.register-form .form-group textarea:focus{
  border-color:var(--summit-teal-ink);
}

/* Botón del formulario de registro (Vue): turquesa con texto oscuro */
form.registroform button{
  background-color:var(--summit-turquoise);
  border:1px solid var(--summit-turquoise);
  color:var(--summit-navy);
}
form.registroform button:hover{
  background-color:var(--summit-navy);
  border:1px solid var(--summit-navy);
  color:var(--summit-turquoise);   /* turquesa sobre navy: alto contraste */
}

/* =====================================================================
   Mensaje de respuesta del registro (éxito / error)
   Solo estilos: el contenido se inyecta vía v-html desde el componente Vue.
   ===================================================================== */
.registro-respuesta{ margin-top:1.5rem; }

/* ---- Tarjeta de ÉXITO ---- */
.registro-exito{
  position:relative;
  max-width:660px;
  margin:1.5rem auto 0;
  padding:2.25rem 1.75rem 1.75rem;
  background:linear-gradient(160deg,#FFFFFF 0%,#F2FBF8 100%);
  border:1px solid rgba(2,255,207,.45);
  border-radius:18px;
  box-shadow:0 22px 50px -20px rgba(7,52,85,.5), 0 0 0 1px rgba(7,52,85,.04);
  color:var(--summit-blue);
  text-align:center;
  overflow:hidden;
  animation:registroPop .5s cubic-bezier(.2,.8,.25,1) both;
}
/* Barra superior con el degradado de marca */
.registro-exito::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--summit-gradient-hero);
}
/* Ícono de check en círculo */
.registro-exito .rg-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:76px; height:76px; margin:0 auto 1.1rem;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#02FFCF 0%,#057A62 100%);
  color:#FFFFFF; font-size:40px; line-height:1;
  box-shadow:0 12px 26px -8px rgba(5,122,98,.75);
  animation:registroCheck .6s .15s cubic-bezier(.2,.8,.25,1) both;
}
.registro-exito .rg-title{
  font-size:1.65rem; font-weight:800; line-height:1.2;
  color:var(--summit-blue); margin:0 0 .4rem;
}
.registro-exito .rg-sub{
  font-size:1.05rem; color:#3A5B6B; margin:0 0 1.35rem;
}
/* Caja destacada "Importante" */
.registro-exito .rg-nota{
  text-align:left;
  background:rgba(7,52,85,.05);
  border-left:4px solid var(--summit-turquoise);
  border-radius:10px;
  padding:1rem 1.15rem;
  font-size:.96rem; line-height:1.6; color:#244A5C;
}
.registro-exito .rg-nota strong{ color:var(--summit-teal-ink); }
.registro-exito .rg-foot{
  margin:1.15rem 0 0; font-size:.96rem; line-height:1.55; color:#3A5B6B;
}

/* ---- Mensaje de ERROR ---- */
.registro-error{
  max-width:560px; margin:1.35rem auto 0;
  padding:1rem 1.25rem;
  background:#FFF5F5; border:1px solid #F3C2C2; border-left:4px solid #D64545;
  border-radius:12px; color:#9B2C2C; font-size:.98rem; text-align:center;
  animation:registroPop .4s ease both;
}

@keyframes registroPop{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{   opacity:1; transform:translateY(0) scale(1); }
}
@keyframes registroCheck{
  0%{   transform:scale(0) rotate(-25deg); }
  60%{  transform:scale(1.15) rotate(0); }
  100%{ transform:scale(1); }
}

/* Móvil: tarjeta más compacta */
@media (max-width: 767px){
  .registro-exito{ padding:1.75rem 1.1rem 1.35rem; border-radius:14px; }
  .registro-exito .rg-title{ font-size:1.35rem; }
  .registro-exito .rg-icon{ width:64px; height:64px; font-size:33px; }
}


/* =====================================================================
   HERO — Gradiente cíclico infinito (sin "brinco" al reiniciar)
   Degradado CSS animado con la paleta nueva. El degradado es un
   "palíndromo" y la animación va y vuelve (0% -> 100% -> 0%): bucle perfecto.
   (Para volver al video: comenta el bloque .banner-section .picshow)
   ===================================================================== */
.banner-section{
  background:linear-gradient(120deg,
      #0C002C 0%,
      #073455 14%,
      #057A62 30%,
      #02FFCF 44%,
      #F0DE71 52%,
      #02FFCF 60%,
      #057A62 74%,
      #073455 88%,
      #0C002C 100%);
  background-size:300% 300%;
}
/* Oculta el video de fondo para que se vea el gradiente animado */
.banner-section .picshow{ display:none; }

/* Velo para mantener legible el texto sin tapar el gradiente del lado derecho */
.banner-section .banner-carousel .slide-item:before{
  background:linear-gradient(90deg,
      rgba(12,0,44,.62) 0%,
      rgba(7,52,85,.30) 55%,
      rgba(7,52,85,0) 100%);
  opacity:1;
}

@media (prefers-reduced-motion: no-preference){
  .banner-section{ animation:summitHeroFlow 22s ease-in-out infinite; }
}
@keyframes summitHeroFlow{
  0%{   background-position:0% 50%; }
  50%{  background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* En MÓVIL: gradiente en tonos OSCUROS de la paleta (mejor legibilidad,
   sin los acentos claros turquesa/amarillo). Mantiene el bucle continuo. */
@media (max-width: 767px){
  .banner-section{
    background:linear-gradient(120deg,
        #0C002C 0%,
        #073455 28%,
        #057A62 50%,
        #073455 72%,
        #0C002C 100%);
    background-size:280% 280%;
  }
}


/* =====================================================================
   SCROLL REVEAL — Apariciones agresivas (izq/der, fade, zoom)
   Las clases/atributos se inyectan desde js/dev.js (no se toca el PHP).
   <html> recibe la clase .reveal-on solo si el JS corre; así, sin JS
   nada queda oculto.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .reveal-on [data-reveal]{
    opacity:0;
    transition:opacity .85s cubic-bezier(.22,.61,.36,1),
               transform .85s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  .reveal-on [data-reveal="left"]{   transform:translateX(-110px); }
  .reveal-on [data-reveal="right"]{  transform:translateX(110px); }
  .reveal-on [data-reveal="up"]{     transform:translateY(90px); }
  .reveal-on [data-reveal="down"]{   transform:translateY(-70px); }
  .reveal-on [data-reveal="zoom"]{   transform:scale(.82); }
  .reveal-on [data-reveal="flip"]{   transform:perspective(900px) rotateY(35deg); transform-origin:left center; }

  .reveal-on [data-reveal].is-visible{
    opacity:1;
    transform:none;
  }
}