/*
  Theme Name: Hello Elementor Child
  Theme URI: https://elementor.com/hello-theme/
  Template: hello-elementor
  Author: Agencia OH WOW!
  Author URI: https://agencia.ohwow.es/?utm_source=wp-themes-omega&utm_campaign=author-uri&utm_medium=wp-dash
  Description: Tema hijo optimizado para rendimiento y compatibilidad total con Elementor. Personalización avanzada mediante sistema tipográfico fluido, ajustes globales y diseño modular.
  Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
  Version: 1.8
  Updated: 2025-05-09 14:00:00
*/

/* ======================================= */
/*       SISTEMA TIPOGRÁFICO FLUIDO        */
/* ======================================= */

:root {
    /* Pesos tipográficos estándar */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Estilos tipográficos estándar */
    --font-style-normal: normal;
    --font-style-italic: italic;
    --font-style-oblique: oblique;

    /*
    Tipografía escalable usando clamp():
    - min: valor mínimo para móviles (rem)
    - preferido: suma base + vw para adaptarse al ancho
    - max: límite superior para pantallas grandes
  */

    /* Titulares (h1–h6) */
    --h1: clamp(2.5rem, 2.15vw + 1.25rem, 3.75rem);
    /* ~40px → 60px */
    --h2: clamp(2.25rem, 1.25vw + 1.25rem, 3rem);
    /* ~36px → 48px */
    --h3: clamp(1.875rem, 0.5vw + 1.25rem, 2.25rem);
    /* ~32px → 40px */
    --h4: clamp(1.625rem, 0.21vw + 1.25rem, 1.85rem);
    /* ~29px → 32px */
    --h5: clamp(1.5rem, 0.17vw + 1.25rem, 1.625rem);
    /* ~27px → 26px */
    --h6: clamp(1.11rem, 1.11rem, 1.11rem);
    /* 20px fijo */

    /* Tamaños de texto general y clases utilitarias */
    --text-m: clamp(1rem, 1rem, 1rem);
    /* 18px */
    --text-s: clamp(0.888rem, 0.888rem, 0.888rem);
    /* 16px */
    --text-xs: clamp(0.777rem, 0.777rem, 0.777rem);
    /* 14px */
    --text-xxs: clamp(0.666rem, 0.666rem, 0.666rem);
    /* 12px */
}

/* ======================================= */
/*      TIPOGRAFÍA GLOBAL CON !important   */
/* ======================================= */

/* Titulares: etiqueta, clase directa y descendientes */
h1,
.h1,
.h1 * {
    font-size: var(--h1) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0px !important;
}

h2,
.h2,
.h2 * {
    font-size: var(--h2) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0px !important;
}

h3,
.h3,
.h3 * {
    font-size: var(--h3) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0px !important;
}

h4,
.h4,
.h4 * {
    font-size: var(--h4) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0px !important;
}

h5,
.h5,
.h5 * {
    font-size: var(--h5) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0px !important;
}

h6,
.h6,
.h6 * {
    font-size: var(--h6) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0px !important;
}

/* Texto general y clases utilitarias */
p,
span,
li,
a,
.text-m {
    font-size: var(--text-m) !important;
}

.text-s {
    font-size: var(--text-s) !important;
}

.text-xs {
    font-size: var(--text-xs) !important;
}

.text-xxs {
    font-size: var(--text-xxs) !important;
}


#politicas a {
    color: var(--e-global-color-accent) !important;
}

#politicas a:hover {
    text-decoration: underline;
}

/* ======================================= */
/*        AJUSTES GLOBAL Y UTILIDADES      */
/* ======================================= */

/* Evita scroll horizontal no deseado */
html {
    overflow-x: hidden !important;
}

/* Fuente secundaria más pequeña para header y footer */
header {
    font-size: var(--text-s) !important;
}

footer {
    font-size: var(--text-s) !important;
    color: var(--e-global-color-8af1087) !important;
}

/* Logo */
.logo {
    width: 335px !important;
    height: 69px !important
}

footer .logo img {
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
}

.hero-banner .logo img {
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
}

/* Justificación del texto en sección #sobre-mi */
#sobre-mi p {
    text-align: left;
}

@media (min-width: 1024px) {

    /* Uso: para tablets medianas en adelante (pantallas mayores a 1024px) */
    #sobre-mi p {
        text-align: justify;
    }
}

/* Ajuste de iconos en sección “podemos ayudarte” */
#podemos-ayudarte .elementor-icon-box-icon .elementor-icon svg {
    width: 60px !important;
    height: 60px !important;
}

#podemos-ayudarte .elementor-icon-box-title span {
    font-size: var(--h6) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* ======================================= */
/*    ESTILOS ESPECÍFICOS DE #contacto     */
/* ======================================= */

#contacto a {
    color: var(--e-global-color-8af1087) !important;
}

#contacto a:hover {
    color: var(--e-global-color-accent) !important;
    text-decoration: underline;
}