/***************************************************************
  SISTEMA DE VARIABLES Y BASE
  - Define paleta, radios y sombra global
  - Se usan a lo largo de todo el layout
****************************************************************/
:root{
  --text:#1a1a1a;
  --text-dim:#5c5c6a;
  --bg:#fff;
  --gray:#f7f8fb;

  /* Colores de acento (botones, subrayados y glows) */
  --violet:#7c4dff;
  --violetDark:#5b2cff;
  --blue:#3b82f6;
  --green:#22c55e;
  --amber:#f59e0b;

  /* Geometría y elevación */
  --radius:18px;
  --shadow:0 12px 30px rgba(20,20,41,.12);
}

/* Reset y tipografía base para toda la página */
html,body{
  margin:0;
  padding:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  background:var(--bg-body);
  color:var(--text);
  line-height:1.55;
}

/***************************************************************
  CONTENEDOR CENTRAL
  - .ce-wrap: envuelve el contenido para centrar y dar padding lateral
  - Úsalo dentro de cada sección o bloque de color
****************************************************************/
.ce-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/***************************************************************
  UTILIDADES (aplicables a cualquier elemento)
****************************************************************/
/* Centra texto en bloques puntuales (títulos, hero, CTA) */
.u-center{ text-align:center; }

/* Tono de texto atenuado para descripciones, copy secundario */
.u-muted{ color:var(--text-dim); }

/* Pill genérico: chips de categorías, badges y micro-CTA */
.u-pill{
  border-radius:999px;
  padding:.35rem .7rem;
  font-weight:700;
  display:inline-block;
}
/* Variantes de color para .u-pill (colócalas junto a .u-pill) */
.u-pill--blue{
  background:rgba(59,130,246,.12);
  color:#2253a8;
  border:1px solid rgba(59,130,246,.3);
}
.u-pill--violet{
  background:rgba(124,77,255,.12);
  color:#4b2bb4;
  border:1px solid rgba(124,77,255,.3);
}
.u-pill--green{
  background:rgba(34,197,94,.12);
  color:#1f8c43;
  border:1px solid rgba(34,197,94,.3);
}
.u-pill--amber{
  background:rgba(245,158,11,.12);
  color:#b36d00;
  border:1px solid rgba(245,158,11,.35);
}

/***************************************************************
  HERO (cabecera visual principal de la página)
  Estructura recomendada:
  <header class="ce-hero">
    <div class="ce-hero__bg"> ... glows ... </div>
    <div class="ce-wrap">
      <p class="ce-kicker">...</p>
      <h1 class="ce-title">...</h1>
      <p class="ce-sub">...</p>
      <ul class="ce-bullets">...</ul>
      <div class="ce-ctas"> <a class="ce-btn ce-btn--primary">...</a> ... </div>
    </div>
  </header>
****************************************************************/
.ce-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1400px 480px at 80% 0%, rgba(231,221,233,.15), transparent 10%),
    linear-gradient(90deg, #dfe9f3 0%, #ffffff 100%); /* FONDO DE LA CABECERA */
  color: #123;
  padding: 4rem 2rem; 
}

/* Capa de fondo para luces/ornamentos del hero */
.ce-hero__bg{
  width:var(--maxw);
  margin-inline:auto;
  padding: clamp(72px, 10vw, 120px) 16px clamp(48px, 6vw, 72px);
}

/* “Glows” circulares animados: colócalos dentro de .ce-hero__bg */
.ce-glow{
  position:absolute;
  width:55vmin;
  aspect-ratio:1/1;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  animation:float 14s ease-in-out infinite;
}
/* Glow 1: esquina superior izquierda (violeta) */
.ce-g1{ top:-10vmin; left:-10vmin; background:var(--violet); }
/* Glow 2: esquina inferior derecha (azul) */
.ce-g2{ bottom:-15vmin; right:-12vmin; background:var(--blue); animation-delay:.25s; }
/* Glow 3: acento blanco traslúcido (parte superior derecha) */
.ce-g3{ top:10vmin; right:10vmin; background:rgba(255,255,255,.3); animation-delay:.5s; }

@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-12px) }
}

/* Microheading del hero (categoría) */
.ce-kicker{
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c9baff;
  margin:0 0 .5rem;
}
/* Título principal del hero */
.ce-title{
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin:.1rem 0 .4rem;
}
/* Subtítulo / descripción del hero */
.ce-sub{
  font-size:clamp(1rem,2vw,1.15rem);
  color:#e2e2ef;
  max-width:64ch;
  margin:0 0 1.2rem;
}
/* Lista de bullets bajo el subtítulo del hero */
.ce-bullets{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  display:grid;
  gap:.5rem;
  color:#f1f1f7;
}
/* Contenedor de CTAs principales del hero */
.ce-ctas{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

/* Botón base (se usa también fuera del hero) */
.ce-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.15rem;
  border-radius:16px;
  font-weight:800;
  text-decoration:none;
  transition:transform .16s ease, background .2s, color .2s;
}
/* Botón primario con gradiente */
.ce-btn--primary{
  background:linear-gradient(135deg,var(--violetDark),var(--violet));
  color:#fff;
  box-shadow:var(--shadow);
}
.ce-btn--primary:hover{ transform:translateY(-2px); }

/* Botón secundario “ghost” (borde blanco) */
.ce-btn--ghost{
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
}
.ce-btn--ghost:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}

/***************************************************************
  SECCIONES GENERALES
  - Aplica a <section> en todo el sitio
  - h2 y h3 estilizados para consistencia
****************************************************************/
section{ padding: clamp(56px, 8vw, 96px) 0; }

/* Título de sección con subrayado degradado */
h2{
  font-size:clamp(1.65rem,4vw,2.5rem);
  margin:0 0 1rem;
  color:#221a44;
  position:relative;
  display:inline-block;
  padding-bottom:.35rem;
}
h2::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:6px;
  border-radius:6px;
  background:linear-gradient(90deg,var(--violetDark),var(--blue));
  opacity:.35;
}

/* Subtítulos/encabezados de tercer nivel */
h3{ margin:.2rem 0 .5rem; }

/* Variante de sección con fondo gris (bloques alternos) */
.ce-section--alt{ background:var(--gray); }

/* Lead de párrafo ancho (intro de sección) */
.ce-lead{ color:var(--text-dim); max-width:70ch; }

/***************************************************************
  GRID Y TARJETAS (listados de features, servicios, etc.)
  Estructura típica:
  <section>
    <div class="ce-wrap">
      <div class="ce-grid ce-grid--3">
        <article class="ce-card">...</article>
        ...
      </div>
    </div>
  </section>
****************************************************************/
.ce-grid{
  display:grid;
  gap:22px; /* separación entre tarjetas */
}
/* 1 columna en móvil, 3 columnas a partir de 780px */
.ce-grid--3{ grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:780px){
  .ce-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Tarjeta blanca genérica (servicios, feature, etc.) */
.ce-card,
.ce-plan{
  background:#fff;
  border:1px solid #ececf3;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 24px rgba(20,20,41,.08);
}
.ce-card:hover,
.ce-plan:hover{
  transform:translateY(-2px);
}

/* Lista mini con icono a la izquierda (checklist de features) */
.ce-mini{
  list-style:none;
  margin:.6rem 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
  color:var(--text-dim);
  font-size:.98rem;
}
.ce-mini li{
  display:grid;
  grid-template-columns:24px 1fr; /* icono + texto */
  gap:.55rem;
}
.ce-ico{ width:20px; height:20px; } /* tamaño base de icono */

/***************************************************************
  PLANES / PRECIOS (pricing table)
  Estructura:
  <div class="ce-plans">
    <article class="ce-plan ce-plan--popular">...</article>
    ...
  </div>
****************************************************************/
/* Contenedor de planes: crea 1 columna en móvil, 3 en desktop */
.ce-plans{
  display:grid;
  gap:22px;
}
@media (min-width:980px){
  .ce-plans{ grid-template-columns:1.1fr 1.2fr 1.1fr; }
}

/* Plan individual */
.ce-plan{ position:relative; }

/* Badge simple (por ejemplo: “Ahorro 20%”) */
.ce-badge{
  background:rgba(59,130,246,.12);
  color:#2253a8;
  border:1px solid rgba(59,130,246,.25);
  padding:.3rem .55rem;
  border-radius:999px;
  font-weight:800;
  font-size:.8rem;
}

/* Etiqueta flotante en la esquina (plan recomendado) */
.ce-tag{
  position:absolute;
  top:-12px; left:16px;
  background:linear-gradient(135deg,#f59e0b,#7c4dff);
  color:#fff;
  font-weight:900;
  padding:.35rem .6rem;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(20,20,41,.12);
  font-size:.8rem;
}

/* Borde y sombra extra para el plan destacado */
.ce-plan--popular{
  border:2px solid color-mix(in oklab, var(--violetDark) 55%, #fff 45%);
  box-shadow:0 18px 45px rgba(91,44,255,.22);
}

/* Precio del plan */
.ce-price{
  font-size:1.8rem;
  font-weight:900;
  margin:.2rem 0 .6rem;
  color:#221a44;
}

/* Fila de botones de cada plan */
.ce-cta-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.9rem;
}

/***************************************************************
  BLOQUE CTA OSCURO A PANTALLA (llamada a la acción)
  Estructura:
  <section class="ce-cta">
    <div class="ce-wrap">
      <h2>...</h2><p>...</p>
      <div class="ce-ctas">...</div>
    </div>
  </section>
****************************************************************/
.ce-cta{
  background:radial-gradient(900px 480px at 85% 10%, rgba(124,77,255,.18), transparent 60%);
  color:#fff;
}
.ce-cta .ce-wrap{
  background:#0c0c14;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:32px;
}
.ce-cta h2{ color:#fff; }
.ce-cta p{ color:#e9e9f4; }
/* Variante ghost en CTA oscuro */
.ce-cta .ce-btn--ghost{
  border:1.5px solid rgba(255,255,255,.6);
  color:#fff;
}

/***************************************************************
  ACORDEÓN (FAQ o contenido plegable)
  Estructura:
  <details class="ce-acc">
    <summary>Pregunta</summary>
    <div class="ce-acc__content">Respuesta...</div>
  </details>
****************************************************************/
/* ===== FAQ estilo “píldora” con icono +/− a la derecha ===== */
:root{
  --faqp-maxw: var(--maxw, 1100px);
  --faqp-ink: var(--ink, #0b1020);
  --faqp-dim: var(--ink-soft, #667085);
  --faqp-bg: #fff;
  --faqp-br: 16px;
  --faqp-border: #e8edf3;
  --faqp-accent: #dfffb1;              /* relleno del círculo */
  --faqp-glow: rgba(195, 255, 120, .45);/* glow alrededor */
}

.faq-pill{
  padding-block: clamp(24px, 5vw, 56px);
}
.faq-pill__wrap{
  width: min(100%, var(--faqp-maxw));
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
.faq-pill__title{
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  margin-bottom: clamp(12px, 2.6vw, 18px);
  color: var(--faqp-ink);
}

/* Lista como stack de tarjetas redondeadas */
.faq-pill__item{
  background: var(--faqp-bg);
  border: 1px solid var(--faqp-border);
  border-radius: 999px;                /* píldora */
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
  overflow: clip;                      /* recorta radios al abrir */
}
.faq-pill__item + .faq-pill__item{ margin-top: 12px; }
.faq-pill__item:is(:hover){ border-color: #dde6ee; }
.faq-pill__item[open]{ transform: translateY(-1px); }

/* Summary: texto a la izquierda, icono a la derecha */
.faq-pill__summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  color: var(--faqp-ink);
  font-weight: 600;
  font-size: 1rem;
}
.faq-pill__summary::-webkit-details-marker{ display:none; }
.faq-pill__summary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--faqp-glow) 65%, transparent);
  outline-offset: 4px; border-radius: 999px;
}

/* Icono circular con glow y signo +/− dibujado en CSS */
.faq-pill__icon{
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--faqp-accent);
  box-shadow:
    0 0 0 9px var(--faqp-glow),         /* glow exterior */
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 6px rgba(0,0,0,.08);
  position: relative;
  display: grid; place-items: center;
}
.faq-pill__icon::before,
.faq-pill__icon::after{
  content:""; position:absolute; background: #1f2937; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.faq-pill__icon::before{ width: 14px; height: 2px; } /* — */
.faq-pill__icon::after { width: 2px; height: 14px; } /* |  */
.faq-pill__item[open] .faq-pill__icon::after{ transform: scaleY(0); opacity: 0; } /* pasa de + a − */

/* Contenido: apertura suave sin saltos */
.faq-pill__content{
  padding: 0 16px;
  color: var(--faqp-dim);
  font-weight: 500;
  display: grid;
  grid-template-rows: 0fr;             /* colapsado */
  transition: grid-template-rows .26s ease;
}
.faq-pill__content > *{ overflow: hidden; }  /* evita desbordes en animación */
.faq-pill__item[open] .faq-pill__content{ grid-template-rows: 1fr; }
.faq-pill__content p{ margin: 0 0 14px; padding-right: 8px; }

/* Responsivo: en pantallas muy pequeñas, reducimos paddings */
@media (max-width: 420px){
  .faq-pill__summary{ padding: 12px 10px 12px 14px; }
  .faq-pill__icon{ width: 30px; height: 30px; box-shadow: 0 0 0 8px var(--faqp-glow), inset 0 1px 0 rgba(255,255,255,.7); }
}


/***************************************************************
  ANIMACIONES DE ENTRADA (scroll reveal simple)
  - Añade data-anim a cualquier bloque para animarlo al entrar en viewport
  - Luego, con JS, añade la clase .is-in cuando sea visible
****************************************************************/
[data-anim]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-anim].is-in{
  opacity:1;
  transform:none;
}




/***************************************************************
  BULLETS DE LA CABECERA
****************************************************************/


/* ===== ANIMACIÓN SCROLL-REVEAL ===== */
[data-anim]{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
[data-anim].is-in{ opacity:1; transform:none; }


/* ===== ICONO CHECK (animación por trazo) ===== */
/* Estructura esperada:
  <svg class="icon-check ...">
    <circle class="tick-circle" ... pathLength="100"/>
    <path   class="tick-mark"  ... pathLength="100"/>
  </svg>
*/



.icon-check .tick-circle,
.icon-check .tick-mark{
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* “línea por dibujar” */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.icon-check .tick-circle{ opacity:.30; }

/* Activa al entrar en viewport (cuando el contenedor o el propio SVG tiene .is-in) */
.is-in .icon-check .tick-circle,
.icon-check.is-in .tick-circle{
  animation: tick-draw 900ms ease forwards;
}
.is-in .icon-check .tick-mark,
.icon-check.is-in .tick-mark{
  animation: tick-draw 700ms ease 200ms forwards, tick-pop 240ms ease 700ms forwards;
}

@keyframes tick-draw{ to{ stroke-dashoffset:0; } }
@keyframes tick-pop{ 0%{ transform:scale(.9); } 100%{ transform:scale(1); } }

/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .icon-check .tick-circle, .icon-check .tick-mark{
    animation:none !important;
    stroke-dasharray:0;
    stroke-dashoffset:0;
  }
}


.se-mini{ list-style:none;  padding:0; display:flex; gap:.5rem; color:var(--ink-dim); font-size:.98rem; }
.se-mini li{ display:flex; gap:.55rem; align-items:flex-start; }
.se-ico{ width:22px; height:22px; display:inline-block; flex:0 0 auto; }

.se-badge{
  display:inline-block; padding:.3rem .55rem; border-radius:999px; font-weight:800; font-size:.78rem;
  background:rgba(124,77,255,.1); color:var(--accent-700); border:1px solid rgba(124,77,255,.25);
}




/***************************************************************
  FIN BULLETS DE LA CABECERA
****************************************************************/






}

/***************************************************************
  MEJORAS RESPONSIVE EXTRA
  - Ajustes finos de tipografía y layout en distintos breakpoints
****************************************************************/
/* Teléfonos pequeños: reduce padding del CTA y espaciado general */
@media (max-width:480px){
  .ce-cta .ce-wrap{ padding:24px; }
  .ce-ctas{ gap:.6rem; }
  .ce-btn{ padding:.8rem 1rem; }
}

/* Tablets: aumenta separación vertical de secciones y legibilidad de lead */
@media (min-width:600px) and (max-width:979px){
  section{ padding: clamp(64px, 10vw, 100px) 0; }
  .ce-lead{ font-size:1.05rem; }
}

/* Escritorio ancho: un poco más de aire en el contenedor */
@media (min-width:1280px){
  .ce-wrap{ max-width:1280px; }
}