/* =========================================================================
   Landing «Adiós Estrés Laboral» (página /adios-estres-laboral/)
   Solo se carga en esa página (y en el editor). Todo el diseño —tamaños, colores,
   rellenos, bordes, sombras, columnas— está en los ajustes de cada bloque de Kadence,
   por dispositivo. Aquí solo van la base de la página (fondo y tipografía propios,
   distintos del resto del sitio) y los efectos que Kadence no trae, cada uno ligado
   a una clase visible en el bloque (Avanzado › Clases CSS adicionales).
   Paleta exclusiva: #16A085 #2C3E50 #34495E #FFFFFF #F8F9FA #ECF0F1 #D4E6F1
   ========================================================================= */

/* Base de la página: fondo y tipografía de la landing (sin header ni footer del sitio,
   desactivados en los ajustes de Kadence de la página) */
body.ael { background: #F8F9FA; color: #2C3E50; font-family: "Montserrat", system-ui, sans-serif; }
body.ael .site, body.ael .content-bg, body.ael .site-container { background: #F8F9FA; }
body.ael a:hover { color: inherit; }

@keyframes aelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes aelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Imagen a todo el ancho de su columna (logo, ilustración, mockups) */
.ael-ancho, .ael-ancho .kb-image-has-overlay, .ael-ancho figure { width: 100%; }
.ael-ancho img { width: 100% !important; height: auto; }

/* Presentación del ebook: dos columnas (imagen a la izquierda y texto) que se reparten el ancho; la imagen
   no se estira: se adapta a su columna con un tope de altura (como en Design) */
.ael-ebook-fila > .kt-inside-inner-col > .wp-block-kadence-column.ael-ebook-txt { flex: 1.9 1 26rem; min-width: 0; max-width: none; }
.ael-ebook-fila > .kt-inside-inner-col > .wp-block-kadence-column.ael-ebook-mock { flex: 1 1 14rem; min-width: 0; max-width: none; }
.ael-ebook-mock > .kt-inside-inner-col { display: flex; align-items: center; justify-content: center; }
.ael-mockup-portada { width: 100%; }
.ael-mockup-portada figure { width: auto; max-width: 100%; margin: 0 auto; }
.ael-mockup-portada img { display: block; width: auto !important; max-width: 100% !important; height: auto; max-height: clamp(16rem, 28vw, 23rem); margin: 0 auto; }

/* Mockups de los bonos: caja de altura fija y la portada ajustada dentro (como en Design) */
.ael-bono-img, .ael-bono-img figure { width: 100%; margin: 0; }
.ael-bono-img img { display: block; width: 100% !important; max-width: none !important; height: clamp(6.5rem, 10vw, 8rem) !important; object-fit: contain; }

/* Mockups: entrada suave + flotación lenta */
.ael-flota img { animation: aelIn 1.1s cubic-bezier(.2,.7,.2,1) both, aelFloat 7s ease-in-out 1.1s infinite; }
/* Recuadro que entra suave al cargar */
.ael-entra > .kt-inside-inner-col { animation: aelIn 1.1s cubic-bezier(.2,.7,.2,1) backwards; }

/* Tarjetas que se elevan al pasar el cursor (−4, −3 y −1 px) */
.ael-sube4 > .kt-inside-inner-col { transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease !important; }
.ael-sube4:hover > .kt-inside-inner-col { transform: translateY(-4px); }
.ael-sube3 > .kt-inside-inner-col, .ael-sube3b > .kt-inside-inner-col { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important; }
.ael-sube3:hover > .kt-inside-inner-col, .ael-sube3b:hover > .kt-inside-inner-col { transform: translateY(-3px); }
.ael-sube1 > .kt-inside-inner-col { transition: transform 1.4s cubic-bezier(.25,.1,.25,1), box-shadow 1.4s cubic-bezier(.25,.1,.25,1) !important; }
.ael-sube1:hover > .kt-inside-inner-col { transform: translateY(-1px); }

/* Barra de beneficios: las esquinas internas siguen el radio de la barra */
.ael-radios-ben > .kt-inside-inner-col { overflow: hidden; }

/* Botones de compra: altura mínima, segunda línea pequeña y elevación */
.ael-cta .kb-button { transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease !important; }
.ael-cta .kb-button:hover { transform: translateY(-2px); }
.ael-cta-hero .kb-button { min-height: 4.6rem; }
.ael-cta2 { min-height: 4.4rem; }
.ael-cta2 .kt-btn-inner-text { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ael-sub { display: block; font-weight: 500; font-size: clamp(.848rem, 1.06vw, .933rem); line-height: 1.2; opacity: .92; }

/* Beneficios del Hero: sin línea celeste ni resaltado al tocarlos en pantallas táctiles */
.ael-beneficio, .ael-beneficio * { -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .ael-beneficio:hover > .kt-inside-inner-col { transform: none !important; } }

/* «Lo que descubrirás»: las 8 tarjetas siempre del mismo tamaño (la altura de la más alta).
   PC: 3 columnas fluidas y las 2 últimas centradas · tablet: 2 columnas de 288 px · móvil: 1 columna */
.ael-descubre > .kt-inside-inner-col { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column { flex: none !important; width: auto !important; max-width: none !important; grid-column: span 2; display: flex; flex-direction: column; }
/* La caja visible de cada tarjeta (fondo, borde, relleno) ocupa toda la celda: las 8 iguales */
.ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column > .kt-inside-inner-col { flex: 1 1 auto; height: 100%; box-sizing: border-box; }
.ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column:nth-child(7) { grid-column: 2 / span 2; }
.ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column:nth-child(8) { grid-column: 4 / span 2; }
@media (max-width: 1024px) {
  .ael-descubre > .kt-inside-inner-col { grid-template-columns: repeat(2, min(100%, 18rem)); justify-content: center; }
  .ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column,
  .ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column:nth-child(7),
  .ael-descubre > .kt-inside-inner-col > .wp-block-kadence-column:nth-child(8) { grid-column: auto; }
}
@media (max-width: 767px) { .ael-descubre > .kt-inside-inner-col { grid-template-columns: min(100%, 18rem); } }

/* Centrado del bloque solo en tablet y móvil («Solución milagrosa», «Recuerda esto») */
@media (max-width: 1024px) { .ael-centrar-movil { margin-left: auto !important; margin-right: auto !important; } }

/* Ilustraciones circulares montadas sobre el borde de la tarjeta («Sin…») */
.ael-icono-circulo img, .wp-block-kadence-image.ael-icono-circulo img, .ael-icono-circulo .wp-block-kadence-image img { aspect-ratio: 1; border-radius: 50%; background-color: #FFFFFF; box-shadow: 0 0 0 8px #FFFFFF, 0 14px 28px -14px rgba(44,62,80,.45); }
/* Foto de Martín: círculo con aro blanco */
.ael-foto-circulo img, .wp-block-kadence-image.ael-foto-circulo img, .ael-foto-circulo .wp-block-kadence-image img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 8px #FFFFFF, 0 18px 32px -16px rgba(44,62,80,.5); }
/* (Kadence Blocks 3.8.0 puso borde/radio/sombra/fondo por defecto a sus imágenes y títulos: estas reglas llevan más especificidad para que una actualización no las pise) */

/* Halo verde tenue detrás del mockup del ebook */
.ael-halo > .kt-inside-inner-col { position: relative; isolation: isolate; }
.ael-halo > .kt-inside-inner-col::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 115%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(22,160,133,.26) 0%, rgba(22,160,133,0) 65%); }

/* Filetes a los lados de «Y LO MEJOR ES QUE...» (se encogen si falta espacio) */
.ael-filetes > .kt-inside-inner-col > .wp-block-kadence-column { flex: 0 1 4rem !important; }

/* Etiqueta azul clara de la pregunta de los Domingos */
.ael-etiqueta { display: table; margin-left: auto !important; margin-right: auto !important; border-radius: 10px; background: #D4E6F1; }
/* Kadence Blocks 3.8.0 puso fondo/radio por defecto a todos los títulos y pisaba la regla de arriba: se reafirma con más especificidad */
.wp-block-kadence-advancedheading.ael-etiqueta { background-color: #D4E6F1; border-radius: 10px; }

/* Listas: filas con divisor (señales) */
.ael-filas .kt-svg-icon-list { border-top: 1px solid #ECF0F1; }
.ael-filas .kt-svg-icon-list .kt-svg-icon-list-item-wrap { padding: 1rem 0 !important; margin: 0 !important; border-bottom: 1px solid #ECF0F1; }
.ael-lista .kt-svg-icon-list-single { margin-top: .05rem; }

/* Textos: *IMPORTANTE subrayado · negritas del color del título · nota en cursiva */
.ael-subrayar mark { text-decoration: underline; text-underline-offset: 3px; }
.ael-fuerte strong { color: #2C3E50; }
.ael-cursiva { font-style: italic; }
.ael-precio s { color: #34495E; font-weight: 600; }
/* Etiqueta «HOY GRATIS»: ocupa su alto en la línea y queda centrada con el precio */
.ael-precio mark { display: inline-block; vertical-align: middle; }
/* «BONO #N:» en su propia línea, encima del título (como en el diseño) */
.ael-stack-titulo mark { display: block; margin-bottom: .2rem; }
.ael-bono-titulo mark { display: block; margin-bottom: .4rem; }
.ael-dot-top { margin-top: .05rem; }
.ael-sin-subrayado a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .ael-flota img, .ael-entra > .kt-inside-inner-col { animation: none !important; }
}
