/* ============================================
   PÁGINA INICIO – CSS COMPLETO (HERO + CARDS + COURSE + TOOLS)
   - Sin duplicados
   - Sin clases pisándose
   - Cards: 3 columnas desktop / 2 tablet / lista móvil
============================================ */


/* ============================================
   HERO – RESET WP/KADENCE
============================================ */
.entry-content > .ap-hero{
  margin: 0 !important;
}

.ap-hero, .ap-hero *{
  box-sizing: border-box;
}

.ap-hero > *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ap-hero .wp-block-group,
.ap-hero .wp-block-group__inner-container,
.ap-hero .wp-block-columns,
.ap-hero .wp-block-column,
.ap-hero .wp-block-cover,
.ap-hero .wp-block-cover__inner-container,
.ap-hero .kadence-rowlayout-inner,
.ap-hero .kt-row-layout-inner,
.ap-hero .kt-row-column-wrap,
.ap-hero .kt-inside-inner-col,
.ap-hero .kb-row-layout-wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================
   HERO – CONTENEDOR
============================================ */
.ap-hero{
  width: 100%;
  min-height: 100vh;
  background-color: #030812;

  margin: 0 !important;
  padding: 0 !important;

  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

.ap-hero h1,
.ap-hero h2,
.ap-hero h3,
.ap-hero p{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   HERO – HALO DORADO
============================================ */
.ap-blob{
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: 420px;
  background: rgba(255, 200, 80, 0.08);
  border-radius: 50%;
  filter: blur(120px);
  transform: translate(40%, -40%);
  pointer-events: none;
}

/* ============================================
   HERO – GRID INTERNO
============================================ */
.ap-hero-inner{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto !important;

  padding-block: clamp(34px, 6vh, 70px);
  padding-inline: clamp(18px, 5vw, 80px);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);

  align-items: center;
}

/* ============================================
   HERO – IZQUIERDA
============================================ */
.ap-left{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  padding: 0 !important;

  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}

@keyframes fadeUp{
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ap-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fbbf24;
  font-weight: 700;
  width: fit-content;
}

.ap-badge .dot{
  width: 10px;
  height: 10px;
  background: #fbbf24;
  border-radius: 50%;
  animation: pulse 1.4s infinite ease-in-out;
}

@keyframes pulse{
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.ap-title{
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1.08;
  color: white;
  font-weight: 800;
}

.ap-title .gradient{
  background: linear-gradient(to right, #f97316, #fbbf24);
  -webkit-background-clip: text;
  color: transparent;
}

.ap-description{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
  color: #9ca3af;
  max-width: 560px;
}

/* ============================================
   BOTONES – SISTEMA ÚNICO (sin pisarse)
   - Base: .ap-btn
   - Variantes:
     .ap-btn-primary / .ap-btn-secondary
     .ap-btn--hero / .ap-btn--course / .ap-btn--tools
============================================ */

/* Contenedor (más estrecho) */
.ap-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;               /* antes 18 */
  max-width: 520px;        /* estrecha el bloque */
}

/* Base */
.ap-btn{
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
  will-change: transform;
}

/* Primario naranja pro */
.ap-btn-primary{
  background: linear-gradient(90deg, #f97316 0%, #fb923c 55%, #f59e0b 100%);
  color: #0b1220; /* normal: oscuro */
  box-shadow: 0 16px 34px rgba(249,115,22,0.22);
}

.ap-btn-primary:hover{
  transform: translateY(-2px) scale(1.02);
  filter: saturate(1.10) brightness(1.02);
  color: #ffffff; /* hover texto blanco */
}

.ap-btn-primary:active{
  transform: translateY(0) scale(0.99);
}

/* Secundario azulito */
.ap-btn-secondary{
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: rgba(255,255,255,0.92);
}

.ap-btn-secondary:hover{
  background: rgba(37, 99, 235, 0.20);
  border-color: rgba(56, 189, 248, 0.65);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Tamaños por zona */
.ap-btn--hero{ padding: 12px 24px; font-size: 15px; border-radius: 12px; }
.ap-btn--course{ padding: 14px 28px; font-size: 15px; border-radius: 12px; }
.ap-btn--tools{ padding: 12px 18px; font-size: 13px; border-radius: 14px; }

/* Icono SOLO dentro del hero */
.ap-buttons .ap-icon{
  font-size: 18px;
  color: rgba(255,255,255,0.85);
}
.ap-btn-primary .ap-icon{ color: rgba(11,18,32,0.95); }
.ap-btn-primary:hover .ap-icon{ color: #ffffff; }
.ap-btn-secondary:hover .ap-icon{ color: #ffffff; }

/* HERO – stats */
.ap-footer{
  display: flex;
  align-items: center;
  gap: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
}

.ap-footer .item h3{
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: white;
}

.ap-footer .item span{
  font-size: 12px;
  color: #9ca3af;
}

.ap-footer .divider{
  width: 2px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}

/* ============================================
   HERO – DERECHA (imagen)
============================================ */
.ap-hero-right-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}

.ap-hero-right{
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 11;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.ap-hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ap-hero-right:hover .ap-hero-img{
  transform: scale(1.10);
}

/* ============================================
   HERO – RESPONSIVE
============================================ */
@media (max-height: 820px){
  .ap-hero-inner{ padding-block: clamp(26px, 4vh, 54px); }
  .ap-left{ gap: 18px; }
}

@media (max-height: 740px){
  .ap-hero-inner{ padding-block: clamp(22px, 3.2vh, 46px); }
  .ap-left{ gap: 14px; }
  .ap-footer{ padding-top: 14px; }
}

@media (max-width: 900px){
  .ap-hero{ align-items: flex-start; }

  .ap-hero-inner{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
    padding-block: 44px;
  }

  .ap-left{ align-items: center; }
  .ap-description{ margin: 0 auto !important; }
  .ap-buttons{ justify-content: center; max-width: 560px; }
  .ap-hero-right{ max-width: 520px; }
  .ap-footer{ justify-content: center; }
}

@media (max-width: 767px){
  .ap-buttons{ max-width: 100%; }
  .ap-btn{ width: 100%; }
}

/* ============================================
   PROPUESTA DE VALOR (estilo “Gemini”)
   (✅ ÚNICA versión, sin duplicado)
============================================ */
.ap-value{
  background:#fff;
  padding: clamp(70px, 7vw, 100px) 0;
}

.ap-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.ap-value-head{
  text-align: center;
  margin-bottom: 56px;
}

.ap-eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #2563eb;
}

.ap-h2{
  margin: 10px 0 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1;
  font-weight: 900;
  color: #0b1220;
}

/* Cards grid */
.ap-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.ap-card{
  background: #f6f6f6;
  border: 1px solid #eaeaea;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ap-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
}

/* Icono SOLO dentro de cards */
.ap-card .ap-icon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform .2s ease, border-color .2s ease;
}

.ap-card .ap-icon svg{
  width: 28px;
  height: 28px;
}

.ap-card:hover .ap-icon{
  transform: scale(1.06);
  border-color: rgba(251,191,36,.35);
}

.ap-cards h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: #0b1220;
}

.ap-cards p{
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px){
  .ap-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .ap-cards{ grid-template-columns: 1fr; gap: 36px; }
  .ap-card{ background: transparent; border: none; padding: 0; box-shadow: none; }
  .ap-card .ap-icon{ width: 24px; height: 24px; background: none; border: none; margin-bottom: 6px; }
  .ap-card .ap-icon svg{ width: 18px; height: 18px; }
}

/* ============================================
   AP COURSE – estilo tipo “Tailwind pro”
============================================ */
:root{
  --ap-bg: #030812;
  --ap-white: #ffffff;
  --ap-gray-400: #9ca3af;
  --ap-gray-300: #d1d5db;
  --ap-gray-500: #6b7280;

  --ap-orange: #f97316;
  --ap-gold:   #fbbf24;
}

.ap-course{
  width: 100%;
  background: var(--ap-bg);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.ap-course-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.ap-course-content{
  max-width: 720px;
}

.ap-course-content h2{
  margin: 0;
  color: var(--ap-white);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size: 2rem;
}
@media (min-width: 768px){
  .ap-course-content h2{ font-size: 2.25rem; }
}

.ap-course-desc{
  margin: 18px 0 0;
  color: var(--ap-gray-400);
  font-size: 1.125rem;
  line-height: 1.75;
}

.ap-course-list{
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}

.ap-course-list li{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ap-gray-300);
  font-size: 1rem;
}

.ap-check{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  color: #0b1220;
  background: linear-gradient(90deg, var(--ap-orange), var(--ap-gold));
  flex: 0 0 20px;
}

.ap-course-cta{
  padding-top: 24px;
}

.ap-guarantee{
  margin: 14px 0 0;
  color: var(--ap-gray-500);
  font-size: 0.78rem;
  text-align: left;
}
@media (max-width: 767px){
  .ap-guarantee{ text-align: center; }
}

/* Halo sutil */
.ap-course::before{
  content:"";
  position:absolute;
  inset:auto -20% -60% -20%;
  height: 520px;
  background: radial-gradient(closest-side, rgba(251,191,36,.18), rgba(3,8,18,0));
  filter: blur(12px);
  pointer-events:none;
}

/* ============================================
   AP TOOLS (Herramientas)
============================================ */
.ap-tools{
  padding: 96px 0;
  background: #050913;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ap-tools__wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.ap-tools__head{
  text-align: center;
  margin-bottom: 56px;
}

.ap-tools__title{
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3vw, 40px);
}

.ap-tools__sub{
  margin: 12px 0 0;
  color: rgba(255,255,255,.55);
  font-size: 14px;
}

.ap-tools__card{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,12,24,.72);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  overflow: hidden;
}

.ap-tools__card::before{
  content:"";
  position:absolute;
  left:50%;
  top:-120px;
  transform:translateX(-50%);
  width: 760px;
  height: 380px;
  background: linear-gradient(90deg, rgba(245,158,11,.25), rgba(250,204,21,.12), rgba(34,211,238,.10));
  filter: blur(60px);
  opacity: .8;
  pointer-events:none;
}

.ap-tools__grid{
  position: relative;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

@media (min-width: 1024px){
  .ap-tools__grid{
    padding: 40px;
    grid-template-columns: 360px 1fr;
    gap: 40px;
  }
}

.ap-tools__h3{
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
}

.ap-tools__desc{
  margin: 10px 0 22px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}

.ap-field{ margin-bottom: 14px; }

.ap-label{
  display:block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

.ap-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: #050913;
  color: #fff;
  padding: 12px 14px;
  outline: none;
}

.ap-input:focus{
  border-color: rgba(251,191,36,.35);
  box-shadow: 0 0 0 3px rgba(251,191,36,.18);
}

.ap-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ap-badge{
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
}

.ap-badge--gold{ color: rgba(251,191,36,.95); border-color: rgba(251,191,36,.18); }
.ap-badge--cyan{ color: rgba(34,211,238,.95); border-color: rgba(34,211,238,.18); }

.ap-range{
  width: 100%;
  accent-color: #fbbf24;
}

.ap-range--gold{ accent-color: #fbbf24; }
.ap-range--cyan{ accent-color: #22d3ee; }

.ap-tools__stats{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

@media (min-width: 640px){
  .ap-tools__stats{ grid-template-columns: repeat(3, 1fr); }
}

.ap-stat{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 14px 16px;
}

.ap-stat--highlight{
  border-color: rgba(251,191,36,.22);
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(250,204,21,.10), rgba(245,158,11,.16));
}

.ap-stat__k{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.ap-stat__v{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.ap-stat__v--gold{ color: rgba(251,191,36,.95); }

.ap-tools__chart{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: #050913;
  padding: 16px;
}

@media (min-width: 768px){
  .ap-tools__chart{ padding: 22px; }
}

.ap-tools__charthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ap-tools__charttitle{
  color: rgba(255,255,255,.75);
  font-weight: 800;
  font-size: 14px;
}

.ap-tools__legend{
  display:flex;
  align-items:center;
  gap: 12px;
  color: rgba(255,255,255,.50);
  font-size: 12px;
  flex-wrap: wrap;
}

.ap-dot{
  display:inline-block;
  width: 12px;
  height: 3px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}

.ap-dot--cyan{ background: #22d3ee; }
.ap-dot--gold{ background: #fbbf24; }

.ap-tools__svg svg{ width:100%; height:auto; display:block; }

.ap-grid line{ stroke: rgba(255,255,255,.22); }
.ap-axes line{ stroke: rgba(255,255,255,.40); }

.ap-line{
  fill:none;
  stroke-width:4;
}

.ap-line--cyan{ stroke: #22d3ee; opacity:.9; }
.ap-line--gold{ stroke: #fbbf24; opacity:.95; }

.ap-area{ fill: url(#apGoldFill); }

.ap-xlabels text{
  fill: rgba(255,255,255,.45);
  font-size: 12px;
}

/* CTA tools */
.ap-tools__cta{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

/* (El botón tools usa el sistema base + clase de tamaño) */
/* Ejemplo HTML recomendado:
   <a class="ap-btn ap-btn-primary ap-btn--tools" ...>Probar</a>
*/













/* FIX MÓVIL: fuerza 1 columna y evita solapes */
@media (max-width: 900px){
  .ap-hero .wp-block-columns,
  .ap-hero .wp-block-group,
  .ap-hero .kt-row-layout-inner,
  .ap-hero .wp-block-cover__inner-container{
    display: block !important;
  }

  .ap-hero .wp-block-column{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* si hay grids internos */
  .ap-hero [style*="grid"],
  .ap-hero .ap-grid{
    grid-template-columns: 1fr !important;
  }

  /* quita offsets típicos que empujan la card encima */
  .ap-hero [style*="transform"],
  .ap-hero [style*="translate"]{
    transform: none !important;
  }
}

/* ============================================
   FIX REAL: Columnas WP/Kadence en móvil
   (evita solapes entre secciones)
============================================ */
@media (max-width: 900px){

  /* Gutenberg Columns */
  .entry-content .wp-block-columns{
    flex-wrap: wrap !important;
  }
  .entry-content .wp-block-columns > .wp-block-column{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Kadence Row Layout (si aplica) */
  .entry-content .kadence-rowlayout-inner,
  .entry-content .kt-row-layout-inner{
    flex-wrap: wrap !important;
  }
  .entry-content .kt-row-column-wrap,
  .entry-content .kt-inside-inner-col{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}