/* ================================================== */
/* ================== RESET Y BASE ================== */
/* ================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000000;
  color: #f5f5f5;
  line-height: 1.6;
  scroll-behavior: smooth;
}

/***************************************
 ********** SECCIÓN HERO DESTACADO ******
***************************************/
.hero {
  background-color: #000000;
  padding: 6rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: 'Exo 2', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  width: 100%;
  margin-top: -110px;    /* espacio arriba */
  margin-bottom: -50px;  /* espacio abajo, si quisieras */
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 6vw;
  justify-items: center;        /* centra cada celda */
}

/* ================================================== */
/* === MANIPULACIÓN EXCLUSIVA DE LA IMAGEN HERO ===== */
/* ================================================== */
.hero-image {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: right;
  grid-column: 1;
}

.hero-image img {
  width: clamp(800px, 50%, 500px);
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  margin: 0;
}

/* ================================================== */
/* ========== COLUMN RIGHT (HERO-TEXT) ============== */
/* ================================================== */
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5rem;               /* espacio entre cada bloque */
}

/* 1. TÍTULO PRINCIPAL */
.hero-title {
  font-family: 'Anton', sans-serif;
  font-size: 7.75rem;
  line-height: 1.1;
  font-weight: normal;
  margin: 0;
  margin-bottom: -1.6rem; /* ajusta si quieres subir un poco */
}
.hero-title .accent {
  display: block;         /* importantísimo para forzar salto de línea */
  color: #00CFFD;         /* acento turquesa */
  letter-spacing: -1px;   /* opcional: compactar un pelín */
}

/* 2. SUBTÍTULO */
.hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #cccccc;
  margin: 0;
  letter-spacing: 0.5px;  /* opcional: tracking sutil */
}

/* 3. PÁRRAFO DE COPIA */
.hero-copy {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  color: #dddddd;
  max-width: 800px;       /* para que no se extienda demasiado */
  margin: 0;
}

/* ================================================== */
/* ========== 4. BOTONES CTA (HOTMART + AMAZON) ===== */
/* ================================================== */

/* 
   1) .hero-cta    = estilos base (“molde 3D glow”) para todos los botones CTA
   2) .hotmart-cta = fondo verde inicial → turquesa al hover
   3) .amazon-cta  = fondo naranja inicial → naranja oscuro al hover
*/

/* ================================ */
/* 1) BLOQUE BASE PARA TODOS LOS CTA */
/* ================================ */
.hero-cta {
  display: inline-flex;          
  align-items: center;        /* icono + texto alineados verticalmente */
  justify-content: center;    /* centramos el contenido interno */
  padding: 1rem 2rem;         /* tamaño del botón (igual para ambos) */
  border-radius: 8px;         /* bordes suaves iguales */
  position: relative;
  background: #38B400;        /* valor temporario; se sobrescribe en cada clase */
  color: #FFF;                /* texto blanco */
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow:
    0 0 5px rgba(61, 210, 0, 0.6),
    0 0 15px rgba(61, 210, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.4);
  transition:
    transform   0.2s ease,
    box-shadow  0.2s ease,
    background  0.3s ease;
  max-width: max-content;     /* nunca se expande más que su contenido */
}

/* RIZO INTERNO SUAVE (opcional): reborde translúcido para mayor profundidad */
.hero-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
  opacity: 0.2;
  pointer-events: none;
}

/* FLECHA (común a todos los hero-cta) */
.hero-cta .btn-icon::before {
  content: "➜";
  font-size: 1.2em;
  line-height: 1;
  margin-right: 0.6em;
}

/* ================================ */
/* 2) CLASE HOTMART (VERDE → TURQUESA) */
/* ================================ */
.hero-cta.hotmart-cta {
  background: #38B400;  /* verde inicial de Hotmart */
  color: #FFF;
}
.hero-cta.hotmart-cta:hover,
.hero-cta.hotmart-cta:focus {
  background: #00CFFD;  /* turquesa al pasar el mouse */
  box-shadow:
    0 0 8px rgba(61, 210, 0, 0.8),
    0 0 25px rgba(61, 210, 0, 0.7),
    0 6px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.05);
}
.hero-cta.hotmart-cta:active {
  background: #00CFFD;
  box-shadow:
    0 0 4px rgba(61, 210, 0, 0.6),
    0 0 12px rgba(61, 210, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
}

/* ================================ */
/* 3) CLASE AMAZON (NARANJA → NARANJA OSCURO) */
/* ================================ */
.hero-cta.amazon-cta {
  background: #FF9900;  /* naranja inicial de Amazon */
  color: #FFF;
  box-shadow:
    0 0 5px rgba(255, 153, 0, 0.6),
    0 0 15px rgba(255, 153, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.4);
}
.hero-cta.amazon-cta:hover,
.hero-cta.amazon-cta:focus {
  background: #e88a00;  /* naranja más oscuro al hover */
  box-shadow:
    0 0 8px rgba(255, 153, 0, 0.8),
    0 0 25px rgba(255, 153, 0, 0.7),
    0 6px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.05);
}
.hero-cta.amazon-cta:active {
  background: #e88a00;
  box-shadow:
    0 0 4px rgba(255, 153, 0, 0.6),
    0 0 12px rgba(255, 153, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
}

/* ================================================== */
/* ======== 5. IMAGEN + ESTADÍSTICAS DE LECTORES ===== */
/* ================================================== */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 1rem;        /* espacio entre avatar y texto */
  margin-top: 1.5rem;
}
.hero-stats img {
  height: 40px;
  object-fit: cover;
}
.stats-text {
  display: flex;
  flex-direction: column;
  justify-content: center;  
}
.stars {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  color: #FFEA00;      /* amarillo “book-now” */
  line-height: 1;
  margin-bottom: 0.2rem;
}
.stats-copy {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  color: #00CFFD;      /* acento turquesa */
  font-weight: normal;
  line-height: 1.2;
}

/* ================================================== */
/* =================== HEADER PRINCIPAL ============ */
/* ================================================== */
header {
  text-align: center;
  padding: 4rem 2rem 2rem;
  background: linear-gradient(to bottom, #0d0d0d, #1a1a1a);
  border-bottom: 1px solid #222;
}
header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
header p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  color: #cccccc;
}

/* ================================================== */
/* ========== SECCIONES DE TEXTO “BLACK” ============ */
/* ================================================== */
.text-section {
  max-width: 1600px;
  margin: 0 auto -1rem;
  padding: 2rem 1rem;
  text-align: center;
}
.text-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
.text-section h2 .accent {
  color: #00CFFD;          /* acento turquesa */
}
.text-section p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #ccc;
}
.text-section p:hover {
  color: #ffffff;  
}
@media (max-width: 768px) {
  .text-section {
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
  }
  .text-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .text-section p {
    font-size: 0.95rem;
    max-width: 100%;
  }
}

/* ================================================== */
/* ========== SECCIÓN DE TEXTO (DESPEJADA) ========= */
/* ================================================== */
.text-section {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1rem;
  line-height: 1.6;
}
.text-section h2 {
  margin-bottom: 1.5rem;
}
.text-section p {
  margin-bottom: 1.5rem;
}
.text-section p:last-child {
  margin-bottom: 0;
}

/* ================================================== */
/* =============== SECCIÓN BENEFICIOS ============== */
/* ================================================== */
.benefits {
  padding: 6rem 2rem 3rem;
  background-color: #000;
  text-align: center;
}
.benefits-container {
  max-width: 800px;
  margin: 0 auto;
}
.benefits-title {
  font-family: 'Anton', sans-serif;
  font-size: 3.3rem;
  font-weight: normal;
  line-height: 1.1;
  margin-bottom: 2rem;
}
.benefits-title .accent {
  color: #00CFFD;
}
ul.beneficios {
  list-style: none;
  padding: 0;
  display: inline-block;  /* para centrar la lista */
  text-align: left;
}
ul.beneficios li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #f0f0f0;
  transition: color 0.2s;
}
ul.beneficios li::before {
  content: "✅";
  position: absolute;
  left: 0;
  top: 0;
}
ul.beneficios li:hover {
  color: #00CFFD;
}

/* ================================================== */
/* ================== CTA FINAL ===================== */
/* ================================================== */
.cta {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
/* Asegura que el <a> dentro de .cta no ocupe todo el ancho */
.cta .hero-cta {
  margin: 0;
}

/* ================================================== */
/* ========================= FOOTER ================ */
/* ================================================== */
footer {
  text-align: center;
  padding: 2rem;
  color: #888;
  font-size: 0.9rem;
  background-color: #0d0d0d;
  border-top: 1px solid #222;
  margin-top: 4rem;
}

/* ================================================== */
/* ================== RESPONSIVE MÓVIL =============== */
/* ================================================== */
@media (max-width: 768px) {
  .hero {
    padding: 4rem 1rem;
    margin: -60px 0;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo el bloque */
    gap: 2rem;
    padding: 0 2rem;
  }
  .hero-image {
    padding: 0;
    justify-content: center;
  }
  .hero-image img {
    width: 80vw;
    max-width: 350px;
    height: auto;
  }
  .hero-text {
    /* Centramos el grupo; el texto dentro queda alineado a la izquierda */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  /* 1. SHRINK-TO-FIT DEL TÍTULO Y CENTRADO DEL GRUPO */
  .hero-title {
    width: max-content;       /* ancho justo del grupo */
    margin: 0 auto 0.2em;     /* centrado + pequeño espacio al subtítulo */
    display: block;
    text-align: left;         /* ambas líneas alineadas a la izquierda */
    line-height: 1.1;
    font-size: 2.2rem;
    font-family: 'Anton', sans-serif;
  }
  .hero-title .accent {
    display: block;           /* fuerza el salto de línea */
    margin-bottom: 0.1em;     /* espacio entre “SIN” y “LÍMITES” */
  }
  /* 2. SUBTÍTULO AJUSTADO */
  .hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  /* 3. PÁRRAFOS */
  .hero-copy {
    font-size: 1rem;
    margin-bottom: 1.2rem;
  }
  /* 4. BOTONES (idénticos, centrados y compactos) */
  .hero-cta {
    max-width: 90vw;          /* no ocupe más del 90% del ancho */
    padding: 0.6rem 1rem;     /* más compacto */
    font-size: 0.9rem;        /* fuente un pelín más pequeña */
    margin: 1rem auto 0;      /* centrado horizontal y espacio arriba */
    display: inline-flex;
    white-space: normal;      /* permite quiebre de línea si hiciera falta */
    justify-content: center;  /* centrar icono + texto dentro */
  }
  /* 5. ESTADÍSTICAS DE LECTORES */
  .hero-stats {
    justify-content: center;
  }
  .stats-copy {
    font-size: 1rem;
  }
}





/* ===========================================
   FORZAR ESTILO “3D GLOW” EN BOTÓN HOTMART
   =========================================== */

/*
  Hotmart inyecta su propia clase “hotmart__button-checkout” y otros estilos,
  así que aquí especificamos un selector muy concreto para sobreescribirlo todo.
*/

.hero-cta.hotmart-cta.hotmart-fb.hotmart__button-checkout {
  /* 1) Fondo verde inicial (Hotmart) */
  background: #38B400 !important;

  /* 2) Texto blanco */
  color: #FFF !important;

  /* 3) Sombra “3D glow” idéntica al botón Amazon */
  box-shadow:
    0 0 5px rgba(61, 210, 0, 0.6) !important,
    0 0 15px rgba(61, 210, 0, 0.5) !important,
    0 4px 10px rgba(0, 0, 0, 0.4) !important;

  /* 4) Asegurarse de mantener el mismo padding, border-radius, tipografía, etc. */
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: max-content !important;
  transition:
    transform 0.2s ease !important,
    box-shadow 0.2s ease !important,
    background 0.3s ease !important;
}

/* Flecha “➜” delante del texto (ya provista por .btn-icon), pero forzamos color blanco */
.hero-cta.hotmart-cta.hotmart-fb.hotmart__button-checkout .btn-icon::before {
  color: #FFF !important;
}

/* Hover (verde → turquesa) */
.hero-cta.hotmart-cta.hotmart-fb.hotmart__button-checkout:hover,
.hero-cta.hotmart-cta.hotmart-fb.hotmart__button-checkout:focus {
  /* 1) Fondo turquesa al pasar el mouse */
  background: #00CFFD !important;

  /* 2) Intensificar ligeramente la sombra “glow” */
  box-shadow:
    0 0 8px rgba(61, 210, 0, 0.8) !important,
    0 0 25px rgba(61, 210, 0, 0.7) !important,
    0 6px 14px rgba(0, 0, 0, 0.4) !important;

  /* 3) Efecto “levantar” */
  transform: translateY(-2px) scale(1.05) !important;
}

/* Active (presionado): sombra más sutil y botón a su posición normal */
.hero-cta.hotmart-cta.hotmart-fb.hotmart__button-checkout:active {
  background: #00CFFD !important;
  box-shadow:
    0 0 4px rgba(61, 210, 0, 0.6) !important,
    0 0 12px rgba(61, 210, 0, 0.5) !important,
    0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(0) !important;
}