/**
 * Academia Carlos — Compatibilidad con Astra
 *
 * Se carga con prioridad 999 (después de Astra Pro).
 * Scope: body.has-ac-layout — páginas con bloques ac/* detectadas en PHP.
 * El plugin añade esta clase automáticamente; no requiere template específico.
 */

/* ═══════════════════════════════════════════════════════════
   1. CONTENEDOR — eliminar restricciones de Astra
      .ast-container tiene padding: 0 20px y sus hijos tienen width: 100%
      lo que impide que nuestras sections sean full-width.
   ═══════════════════════════════════════════════════════════ */

.has-ac-layout #content .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Astra Pro fuerza width:100% en hijos directos de ast-container */
.has-ac-layout #content .ast-container > * {
    width: 100% !important;
    max-width: none !important;
}

/* site-content sin padding extra */
.has-ac-layout #content.site-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   2. TIPOGRAFÍA y COLORES — gestionados por Astra Customizer
      Las fuentes (DM Serif Display / Inter) y colores (#2b2b2b /
      #c4704b / #f5f0eb) se configuran en Astra → Customizar.
      Los bloques ac/* los heredan via --ast-global-color-*.
      No sobreescribimos aquí: Astra ya lo hace correctamente.
   ═══════════════════════════════════════════════════════════ */

/* Hero statement: tamaño fluido que Astra no controla */
.has-ac-layout .ac-hero__statement {
    font-size: clamp(1.75rem, 1.5rem + 2.5vw, 3rem) !important;
    font-style: italic;
    line-height: 1.2;
    font-weight: 400;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   4. PÁRRAFOS — resetear margin de Astra sobre <p>
   ═══════════════════════════════════════════════════════════ */

.has-ac-layout .ac-section p,
.has-ac-layout .ac-hero p {
    margin-bottom: var(--ac-space-md, 1rem);
    line-height: 1.65;
}

.has-ac-layout .ac-section p:last-child,
.has-ac-layout .ac-hero p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. LISTAS — resetear estilos de lista de Astra/WP
   ═══════════════════════════════════════════════════════════ */

.has-ac-layout .ac-section ul:not(.ac-pricing-card__features):not(.ac-course-nav),
.has-ac-layout .ac-hero ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.has-ac-layout .ac-pricing-card__features {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   6. BOTONES — proteger estilos del framework contra Astra
      Astra aplica `a { color: var(--ast-global-color-1) }` (terracota)
      que sobreescribe el color de texto de los botones.
      Necesitamos !important para ganar en cascada.
   ═══════════════════════════════════════════════════════════ */

.has-ac-layout .ac-btn {
    font-family: var(--ac-font-body, Inter, sans-serif) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: var(--ac-radius-md, 8px) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Primario: blanco sobre terracota */
.has-ac-layout .ac-btn--primary,
.has-ac-layout .ac-btn--primary:hover,
.has-ac-layout .ac-btn--primary:visited {
    color: #fff !important;
}

/* Oscuro: blanco sobre carbón */
.has-ac-layout .ac-btn--dark,
.has-ac-layout .ac-btn--dark:hover,
.has-ac-layout .ac-btn--dark:visited {
    color: #fff !important;
}

/* Outline: carbón sobre fondo transparente */
.has-ac-layout .ac-btn--outline,
.has-ac-layout .ac-btn--outline:visited {
    color: var(--ac-carbon) !important;
}
.has-ac-layout .ac-btn--outline:hover {
    color: var(--ac-carbon) !important;
}

/* Secundario: terracota por defecto, blanco al hover */
.has-ac-layout .ac-btn--secondary,
.has-ac-layout .ac-btn--secondary:visited {
    color: var(--ac-terracota) !important;
}
.has-ac-layout .ac-btn--secondary:hover {
    color: #fff !important;
}

/* White: carbón sobre blanco */
.has-ac-layout .ac-btn--white,
.has-ac-layout .ac-btn--white:hover,
.has-ac-layout .ac-btn--white:visited {
    color: var(--ac-carbon) !important;
}

/* Outline-light: blanco sobre fondos oscuros (hero carbon/dark) */
.has-ac-layout .ac-btn--outline-light,
.has-ac-layout .ac-btn--outline-light:visited {
    color: #fff !important;
    text-decoration: none !important;
}
.has-ac-layout .ac-btn--outline-light:hover {
    color: #fff !important;
}

/* Botones en CTA band (fondo oscuro) */
.has-ac-layout .ac-cta-band .ac-btn--primary,
.has-ac-layout .ac-cta-band .ac-btn--primary:hover {
    color: #fff !important;
}
.has-ac-layout .ac-cta-band .ac-btn--white,
.has-ac-layout .ac-cta-band .ac-btn--white:hover {
    color: var(--ac-carbon) !important;
}

/* ═══════════════════════════════════════════════════════════
   7. IMAGES dentro de sections
   ═══════════════════════════════════════════════════════════ */

.has-ac-layout .ac-section img {
    height: auto;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   8. ASTRA HEADER SPACING
   ═══════════════════════════════════════════════════════════ */

.has-ac-layout #content {
    margin-top: 0;
}