/*
Theme Name:   Cambio de Vida - Divi Child
Theme URI:    https://cambiodevida.nu
Description:  Tema hijo de Divi para Cambio de Vida. Toda la personalización CSS/PHP del sitio vive aquí para sobrevivir a las actualizaciones de Divi. Para la guía de estilos completa ver scripts/GUIA-ESTILOS-DIVI.md.
Author:       Cambio de Vida
Author URI:   https://cambiodevida.nu
Template:     Divi
Version:      1.2.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  cambiodevida-divi-child
*/

/* ==========================================================================
   Sistema de diseño v2 — Cambio de Vida
   --------------------------------------------------------------------------
   Fase 1 (sept 2026). Paleta y tipografía definidas como variables CSS.
   Documentación completa y valores para el personalizador de Divi en:
   scripts/GUIA-ESTILOS-DIVI.md

   Convenciones:
   - Todo el CSS usa las variables --cdv-*; nunca valores a pelo.
   - Convive con Divi: los botones nativos (.et_pb_button) adoptan el sistema
     cuando no se les ha dado estilo propio en el builder.
   - Prohibido !important salvo comentado y justificado caso por caso.
   ========================================================================== */

:root {
    /* --- Primarios (equity de marca: turquesa) -------------------------- */
    --cdv-primary:     #00cfc1;  /* Marca: cabeceras decorativas, iconos grandes, bordes */
    --cdv-primary-d:   #00857c;  /* Botones (texto blanco, AA 4.52:1) / hover #00786f */
    --cdv-primary-ink: #00786f;  /* Enlaces y texto turquesa sobre fondo claro (AA 5.36:1) */
    --cdv-primary-soft:#e0f9f6;  /* Fondos suaves turquesa (con texto #00786f AA 4.86:1) */

    /* --- Acento cálido: coral terracota (calidez + confianza) ----------- */
    --cdv-accent:      #bf4e30;  /* Acento: badges, destacados, botones secundarios (AA 4.83:1) */
    --cdv-accent-d:    #a33e24;  /* Hover del acento (AA 6.42:1) */
    --cdv-accent-soft: #fdf0ec;  /* Fondos suaves del acento */

    /* --- Neutros cálidos / grafito (nada de grises fríos de Divi) ------- */
    --cdv-text:        #2a2a2c;  /* Texto principal grafito cálido (AA 14.32:1 s/ blanco) */
    --cdv-text-muted:  #5b5750;  /* Texto secundario (AA 7.18:1 s/ blanco) */
    --cdv-line:        #e8e2d8;  /* Bordes y separadores cálidos */
    --cdv-bg-soft:     #f7f4ef;  /* Crema cálido: secciones alternas */
    --cdv-white:       #ffffff;

    /* --- Semánticos ------------------------------------------------------ */
    --cdv-success:     #1f7a55;  /* Éxito (AA 5.29:1 con blanco) */
    --cdv-success-soft:#e7f5ee;
    --cdv-error:       #c0392b;  /* Error, solo fondos con texto blanco (AA 5.44:1) */
    --cdv-error-ink:   #a92a1e;  /* Texto de error (AA 6.91:1 s/ blanco) */
    --cdv-error-soft:  #fbeae7;
    --cdv-link:        var(--cdv-primary-ink);
    --cdv-link-hover:  var(--cdv-accent-d);

    /* --- Tipografía ------------------------------------------------------ */
    --cdv-font-head: "Montserrat", "Poppins", sans-serif;
    --cdv-font-body: "Inter", "Open Sans", sans-serif;
    --cdv-fs-base: 1.0625rem;   /* 17px */
    --cdv-fs-small: 0.875rem;   /* 14px */
    --cdv-fs-h4: 1.25rem;       /* 21px */
    --cdv-fs-h3: 1.5625rem;     /* 26.5px */
    --cdv-fs-h2: 1.9531rem;     /* 33px */
    --cdv-fs-h1: 2.4414rem;     /* 41.5px */
    --cdv-fs-display: 3.0518rem;/* 52px */
    --cdv-lh-body: 1.65;
    --cdv-lh-head: 1.2;

    /* --- Radios, sombras, espaciado -------------------------------------- */
    --cdv-radius-sm: 8px;
    --cdv-radius: 12px;
    --cdv-radius-lg: 16px;
    --cdv-shadow: 0 2px 8px rgba(42, 42, 44, 0.06), 0 8px 24px rgba(42, 42, 44, 0.06);
    --cdv-shadow-hover: 0 4px 12px rgba(42, 42, 44, 0.08), 0 12px 32px rgba(42, 42, 44, 0.10);
    --cdv-maxw: 1140px;
    --cdv-space-xs: 0.5rem;
    --cdv-space-sm: 1rem;
    --cdv-space-md: 2rem;
    --cdv-space-lg: 4rem;
    --cdv-space-xl: 6rem;
}

/* ==========================================================================
   Base tipográfica
   ========================================================================== */

body {
    font-family: var(--cdv-font-body);
    font-size: var(--cdv-fs-base);
    line-height: var(--cdv-lh-body);
    color: var(--cdv-text);
    background-color: var(--cdv-white);
}

h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4 {
    font-family: var(--cdv-font-head);
    font-weight: 700;
    line-height: var(--cdv-lh-head);
    color: var(--cdv-text);
}

h1, .et_pb_text h1 { font-size: var(--cdv-fs-h1); letter-spacing: -0.02em; }
h2, .et_pb_text h2 { font-size: var(--cdv-fs-h2); letter-spacing: -0.015em; }
h3, .et_pb_text h3 { font-size: var(--cdv-fs-h3); letter-spacing: -0.01em; }
h4, .et_pb_text h4 { font-size: var(--cdv-fs-h4); }

/* Titular de portada (solo páginas hero, aplicar clase en el módulo) */
.cdv-display { font-size: var(--cdv-fs-display); letter-spacing: -0.02em; }

/* Enlaces del contenido */
a,
.et_pb_text a,
.entry-content a {
    color: var(--cdv-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a:hover,
.et_pb_text a:hover,
.entry-content a:hover {
    color: var(--cdv-link-hover);
}

/* Enlaces con foco por teclado: visible siempre (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
.cdv-btn:focus-visible,
.et_pb_button:focus-visible {
    outline: 3px solid var(--cdv-accent);
    outline-offset: 2px;
    border-radius: var(--cdv-radius-sm);
}

/* ==========================================================================
   Botones — .cdv-btn y adopción por botones nativos de Divi
   --------------------------------------------------------------------------
   Los módulos Botón de Divi usan la clase .et_pb_button. El bloque final
   hace que los botones sin estilo propio del builder hereden el sistema.
   En el personalizador (Divi → Botones) usar estos mismos valores.
   ========================================================================== */

.cdv-btn,
.et_pb_button {
    display: inline-block;
    font-family: var(--cdv-font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.9rem 1.75rem;
    border: 2px solid transparent;
    border-radius: 999px; /* botón tipo "píldora": cercano y amable */
    cursor: pointer;
    text-decoration: none !important; /* justificado: Divi subraya botones heredando estilos de enlace */
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Primario: turquesa profundo (AA 4.52:1 texto blanco) */
.cdv-btn--primary,
.cdv-btn,
.et_pb_button {
    background-color: var(--cdv-primary-d);
    color: var(--cdv-white);
}

.cdv-btn--primary:hover,
.cdv-btn:hover,
.et_pb_button:hover {
    background-color: var(--cdv-primary-ink);
    color: var(--cdv-white);
    transform: translateY(-1px);
}

/* Secundario: acento cálido (AA 4.83:1 texto blanco) */
.cdv-btn--secondary {
    background-color: var(--cdv-accent);
    color: var(--cdv-white);
}

.cdv-btn--secondary:hover {
    background-color: var(--cdv-accent-d);
    color: var(--cdv-white);
}

/* Terciario: contorno turquesa, fondo transparente */
.cdv-btn--tertiary {
    background-color: transparent;
    color: var(--cdv-primary-ink);
    border-color: var(--cdv-primary-d);
}

.cdv-btn--tertiary:hover {
    background-color: var(--cdv-primary-soft);
    color: var(--cdv-primary-ink);
}

/* Variante clara para cabeceras/footers sobre fondo oscuro */
.cdv-btn--light {
    background-color: var(--cdv-white);
    color: var(--cdv-primary-ink);
}

.cdv-btn--light:hover {
    background-color: var(--cdv-primary-soft);
    color: var(--cdv-primary-ink);
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.cdv-card {
    background-color: var(--cdv-white);
    border: 1px solid var(--cdv-line);
    border-radius: var(--cdv-radius-lg);
    box-shadow: var(--cdv-shadow);
    padding: var(--cdv-space-md);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cdv-card:hover {
    box-shadow: var(--cdv-shadow-hover);
    transform: translateY(-2px);
}

.cdv-card--flat {
    box-shadow: none;
}

/* Tarjeta sobre fondo turquesa suave (p. ej. pasos de un método) */
.cdv-card--soft {
    background-color: var(--cdv-primary-soft);
    border-color: transparent;
}

/* ==========================================================================
   Secciones y layout
   ========================================================================== */

/* Contenedor con ancho máximo coherente (igualar "Ancho del contenido" en
   Divi → Opciones del tema → General para que coincidan) */
.cdv-container {
    width: 100%;
    max-width: var(--cdv-maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cdv-space-sm);
    padding-right: var(--cdv-space-sm);
}

/* Fondos alternos para ritmo visual entre secciones de Divi.
   Aplicar la clase a la sección en ajustes → Avanzado → Clase CSS. */
.cdv-section--soft  { background-color: var(--cdv-bg-soft); }
.cdv-section--teal  { background-color: var(--cdv-primary-soft); }
.cdv-section--accent{ background-color: var(--cdv-accent-soft); }
.cdv-section--dark  { background-color: var(--cdv-text); color: var(--cdv-white); }
.cdv-section--dark h1,
.cdv-section--dark h2,
.cdv-section--dark h3,
.cdv-section--dark h4 { color: var(--cdv-white); }

/* Aire vertical: padding generoso entre secciones (ritmo "mucho aire") */
.cdv-section--padded,
.et_pb_section.cdv-section--padded {
    padding-top: var(--cdv-space-xl);
    padding-bottom: var(--cdv-space-xl);
}

/* ==========================================================================
   Utilidades de espaciado
   ========================================================================== */

.cdv-mt-xs { margin-top: var(--cdv-space-xs); }
.cdv-mt-sm { margin-top: var(--cdv-space-sm); }
.cdv-mt-md { margin-top: var(--cdv-space-md); }
.cdv-mt-lg { margin-top: var(--cdv-space-lg); }
.cdv-mb-xs { margin-bottom: var(--cdv-space-xs); }
.cdv-mb-sm { margin-bottom: var(--cdv-space-sm); }
.cdv-mb-md { margin-bottom: var(--cdv-space-md); }
.cdv-mb-lg { margin-bottom: var(--cdv-space-lg); }
.cdv-text-center { text-align: center; }
.cdv-text-muted    { color: var(--cdv-text-muted); }
.cdv-rounded       { border-radius: var(--cdv-radius-lg); }

/* ==========================================================================
   Header/Footer responsive (Theme Builder: header 25252, footer 25247)
   ========================================================================== */

/* Divi da z-index:2 a las columnas legacy, con lo que el contenido de la
   página tapa los menús del header (columna del header y de la página quedan
   empatadas y gana la de la página por orden DOM). Elevamos el contexto. */
.et-l--header {
    position: relative;
    z-index: 99990;
}

.cdv-topbar {
    background-color: #26A7F4;
    padding: 8px 20px;
    color: #ffffff;
    font-size: 14px;
}

.cdv-header {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1000;
    font-family: 'Segoe UI', sans-serif;
}

.cdv-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cdv-logo img {
    height: 70px;
    display: block;
}

.cdv-nav {
    display: flex;
    gap: 34px;
    font-size: 18px;
    align-items: center;
}

.cdv-nav > a,
.cdv-dropdown-toggle {
    color: #333333;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
}

.cdv-dropdown {
    position: relative;
}

.cdv-caret {
    font-size: 14px;
}

.cdv-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    padding: 8px 0;
    min-width: 220px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: none;
}

.cdv-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
}

.cdv-dropdown-menu a:hover {
    background-color: #f5f5f5;
}

@media (min-width: 981px) {
    .cdv-dropdown:hover .cdv-dropdown-menu {
        display: block;
    }
}

.cdv-nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.cdv-nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #333333;
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cdv-nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cdv-nav-toggle.open span:nth-child(2) { opacity: 0; }
.cdv-nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 980px) {
    .cdv-header-inner {
        padding: 10px 16px;
    }

    .cdv-logo img {
        height: 48px;
    }

    .cdv-logo {
        margin-right: auto;
    }

    .cdv-nav-toggle {
        display: block;
    }

    .cdv-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #ffffff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        border-top: 1px solid #eeeeee;
    }

    .cdv-nav.open {
        display: flex;
    }

    .cdv-nav > a,
    .cdv-dropdown-toggle {
        padding: 13px 20px;
    }

    .cdv-dropdown-menu {
        position: static;
        display: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        min-width: 0;
    }

    .cdv-dropdown.open .cdv-dropdown-menu {
        display: block;
    }

    .cdv-dropdown-menu a {
        padding: 10px 20px 10px 34px;
        white-space: normal;
    }
}

/* ==========================================================================
   Footer (Theme Builder 25247)
   ========================================================================== */

.cdv-footer {
    background-color: #f1f5f9;
    padding: 40px 20px;
    font-family: 'Segoe UI', sans-serif;
}

.cdv-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.cdv-footer-col {
    flex: 1 1 300px;
}

.cdv-footer-legal-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #111111;
    font-weight: 600;
}

.cdv-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cdv-footer-col ul a {
    color: #00cfc1;
    text-decoration: none;
}

.cdv-footer-identidad {
    text-align: right;
}

.cdv-footer-tagline {
    font-size: 16px;
    color: #444444;
    margin-bottom: 10px;
}

.cdv-footer-copy {
    font-size: 14px;
    color: #666666;
}

@media (max-width: 767px) {
    .cdv-footer {
        padding: 30px 20px;
    }

    .cdv-footer-inner {
        flex-direction: column;
    }

    .cdv-footer-col,
    .cdv-footer-identidad {
        text-align: center;
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Ajustes móviles generales de contenido
   ========================================================================== */

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        overflow-x: clip;
    }

    #page-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip;
    }

    /* Evita desbordes horizontales por imágenes/elementos anchos */
    .et_pb_row,
    .et_pb_column,
    .et_pb_module {
        max-width: 100%;
    }

    .et_pb_row_inner,
    .et_pb_row {
        width: 100%;
        max-width: 100%;
    }

    /* Las filas Divi usan width:80% por defecto: en móvil aprovechamos todo el ancho */
    .et_pb_section .et_pb_row {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tipografía de los bloques HTML artesanales (et_pb_code con estilos inline) */
    .et_pb_code h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }

    .et_pb_code h2 {
        font-size: 26px !important;
        line-height: 1.25;
    }

    .et_pb_code h3 {
        font-size: 22px !important;
    }

    .et_pb_code p,
    .et_pb_code li,
    .et_pb_code a {
        font-size: 16px;
    }
}