/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://jmgfortes.com
 Description:  Child theme de Hello Elementor para Finanzas Excelentes
 Author:       JmGFortes
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ═══════════════════════════════════════════════════════════
   VARIABLES DE MARCA
   ═══════════════════════════════════════════════════════════ */
:root {
    --fe-navy:        #2e425b;
    --fe-navy-mid:    #2e425b;
    --fe-navy-light:  #2e425b;
    --fe-sky:         #7dd3fc;
    --fe-accent:      #f59e0b;   /* dorado para detalles */
    --fe-text:        #1e293b;
    --fe-muted:       #64748b;
    --fe-bg:          #f8fafc;
    --fe-white:       #ffffff;
    --fe-radius:      8px;
    --fe-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
}


/* ═══════════════════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
   ═══════════════════════════════════════════════════════════ */
body {
    font-family: var(--fe-font);
    color: var(--fe-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--fe-font);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--fe-navy);
}

/* Escala tipográfica coherente */
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl { font-size: clamp(2rem, 5vw, 3.25rem); }
.elementor-widget-heading .elementor-heading-title.elementor-size-xl  { font-size: clamp(1.6rem, 4vw, 2.5rem); }
.elementor-widget-heading .elementor-heading-title.elementor-size-large { font-size: clamp(1.3rem, 3vw, 2rem); }
.elementor-widget-heading .elementor-heading-title.elementor-size-medium { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

p { line-height: 1.75; }

a { color: var(--fe-navy-mid); transition: color .2s; }
a:hover { color: var(--fe-navy); }


/* ═══════════════════════════════════════════════════════════
   HEADER — moderno, sticky, navy
   ═══════════════════════════════════════════════════════════ */

/* Contenedor sticky */
.elementor-location-header,
header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--fe-navy) !important;
    border-bottom: 2px solid rgba(125,211,252,.18);
    box-shadow: 0 2px 16px rgba(0,0,0,.28);
    /* transición suave al hacer scroll */
    transition: box-shadow .3s;
}

/* Padding interno reducido para header compacto y limpio */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
}

/* ── Logo: imagen libre de restricciones ────────────────── */
/* Eliminamos el max-height fijo que distorsionaba el logo  */
.elementor-location-header .elementor-widget-image img,
header.site-header .site-logo img {
    max-height: 56px;   /* suficiente sin recortar */
    width: auto;
    height: auto;
    display: block;
}

/* ── Menú de navegación ─────────────────────────────────── */
.elementor-location-header .elementor-nav-menu a,
header.site-header nav a,
.elementor-location-header .elementor-widget-nav-menu a {
    color: rgba(255,255,255,.88) !important;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none !important;
    padding: .45rem .8rem;
    border-radius: 6px;
    transition: color .18s, background .18s;
}
.elementor-location-header .elementor-nav-menu a:hover,
header.site-header nav a:hover,
.elementor-location-header .elementor-widget-nav-menu a:hover {
    color: var(--fe-sky) !important;
    background: rgba(255,255,255,.09);
}

/* Ítem activo del menú */
.elementor-location-header .elementor-nav-menu .current-menu-item > a,
.elementor-location-header .elementor-widget-nav-menu .current-menu-item > a {
    color: var(--fe-sky) !important;
}

/* ── Botón CTA dentro del header (si existe) ────────────── */
.elementor-location-header .elementor-button {
    background: var(--fe-sky) !important;
    color: var(--fe-navy) !important;
    font-size: .82rem !important;
    padding: .5rem 1.1rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    border: none !important;
    transition: background .18s, transform .15s !important;
}
.elementor-location-header .elementor-button:hover {
    background: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ── Hamburguesa (móvil) ────────────────────────────────── */
.elementor-location-header .elementor-menu-toggle,
.elementor-location-header .elementor-menu-toggle i {
    color: var(--fe-white) !important;
}

/* ── Iconos sociales en header ──────────────────────────── */
.elementor-location-header .elementor-widget-social-icons a {
    color: rgba(255,255,255,.7) !important;
    transition: color .18s, transform .18s;
    display: inline-block;
}
.elementor-location-header .elementor-widget-social-icons a:hover {
    color: var(--fe-sky) !important;
    transform: translateY(-2px);
}

/* ── Separador visual debajo del header (evita salto) ───── */
.elementor-location-header + * {
    padding-top: 0;
}


/* ═══════════════════════════════════════════════════════════
   BOTONES ELEMENTOR — ESTILO UNIFICADO
   ═══════════════════════════════════════════════════════════ */
.elementor-widget-button .elementor-button,
.elementor-button {
    border-radius: var(--fe-radius) !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    transition: transform .15s, box-shadow .15s, filter .15s !important;
    text-transform: none !important;
}
.elementor-widget-button .elementor-button:hover,
.elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(10,61,98,.25) !important;
    filter: brightness(1.08) !important;
}

/* Botón principal (fondo sólido) */
.elementor-button.elementor-button-default,
.elementor-widget-button .elementor-button-default {
    background-color: var(--fe-navy-mid) !important;
    color: #fff !important;
    border-color: var(--fe-navy-mid) !important;
}


/* ═══════════════════════════════════════════════════════════
   SECCIONES / LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* Secciones hero con fondo oscuro */
.elementor-section.elementor-section-full_width > .elementor-container,
.elementor-section > .elementor-container {
    max-width: 1200px;
}

/* Separación visual entre secciones */
.elementor-section + .elementor-section {
    border-top: 1px solid #f1f5f9;
}

/* Sección con fondo de color de marca */
.elementor-section[data-settings*="navy"],
.e-con[data-settings*="navy"] {
    background: var(--fe-navy) !important;
}

/* Tarjetas / Contenedores destacados */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    padding: 1.5rem;
    border-radius: var(--fe-radius);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: box-shadow .2s, transform .2s;
}
.elementor-widget-image-box .elementor-image-box-wrapper:hover,
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
    box-shadow: 0 6px 24px rgba(10,61,98,.12);
    transform: translateY(-2px);
}

/* Texto de leyenda / caption más limpio */
.elementor-image-box-description,
.elementor-icon-box-description {
    color: var(--fe-muted);
    font-size: .9rem;
}


/* ═══════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════ */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
    border-radius: var(--fe-radius) !important;
    border: 2px solid #e2e8f0 !important;
    padding: .65rem .9rem !important;
    font-size: .95rem !important;
    transition: border-color .2s !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
    border-color: var(--fe-navy-mid) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(10,61,98,.1) !important;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.elementor-location-footer,
footer.site-footer {
    background: var(--fe-navy) !important;
    color: rgba(255,255,255,.75) !important;
    border-top: 3px solid var(--fe-navy-mid);
}

.elementor-location-footer p,
.elementor-location-footer span,
footer.site-footer p,
footer.site-footer span {
    color: rgba(255,255,255,.75) !important;
    font-size: .875rem;
}

.elementor-location-footer a,
footer.site-footer a {
    color: var(--fe-sky) !important;
    text-decoration: none;
    transition: color .2s;
}
.elementor-location-footer a:hover,
footer.site-footer a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* Iconos RRSS en footer */
.elementor-location-footer .elementor-widget-social-icons a {
    color: rgba(255,255,255,.65) !important;
    transition: color .2s, transform .2s;
    display: inline-block;
}
.elementor-location-footer .elementor-widget-social-icons a:hover {
    color: var(--fe-sky) !important;
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MEJORAS MÓVIL
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .elementor-widget-heading .elementor-heading-title { word-break: break-word; }
    .elementor-widget-button .elementor-button { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════
   PÁGINA DE INICIO — AJUSTES ESPECÍFICOS
   ═══════════════════════════════════════════════════════════ */

/* Separador de sección más elegante */
.elementor-widget-divider .elementor-divider-separator {
    border-color: rgba(10,61,98,.15) !important;
}

/* Precio / destacado */
.fe-precio {
    font-size: 2rem;
    font-weight: 800;
    color: var(--fe-navy-mid);
}