/*--------------------------------------------------
    Colores generales
-------------------------------------------------- */

:root {
    /* Colores del sistema */
    --color-fondo-1: #8acbad;
    --color-fondo-2: #c0c0c0;
    --color-negro: #2c343b;
    --color-blanco: #fcfcfc;
    --color-principal: #58af8a;
    --color-principal-oscuro: #37926f;
    --color-complementario-claro: #f7eece;
    --color-complementario-oscuro: #cc7722;
    --color-acento: #efdb98;
    --color-fondo-3: #b8e2cc;

    /* --------------------------------------------------
        Tokens semánticos (jerarquía cromática)
        Verde = dominante (estructura)
        Naranja = acento (impacto / resultado)
        Beige = complemento (contexto)
    -------------------------------------------------- */
    --c-primary: #37926f;
    --c-primary-strong: #2f7a5e;
    --c-primary-soft: #58af8a;
    --c-accent: #cc7722;
    --c-accent-soft: #e6953a;
    --c-soft: #f7eece;
    --c-soft-strong: #efdb98;
    --c-bg: #ffffff;
    --c-surface: #fcfcfc;
    --c-border: rgba(44, 52, 59, 0.12);
    --c-border-strong: rgba(44, 52, 59, 0.18);
    --c-text: #2c343b;
    --c-text-muted: rgba(44, 52, 59, 0.72);
    /* Tokens de texto */
    --color-texto-base: var(--c-text);
    --color-texto-inverso: var(--c-surface);
}

/*--------------------------------------------------
    Base layout
-------------------------------------------------- */

html {
    box-sizing: border-box;
}

body {
    font-family: 'Exo 2', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/*--------------------------------------------------
    Estilos para los encabezados
-------------------------------------------------- */

h1 {
    font-family: 'Exo', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    text-transform: normal;
    font-style: normal;
    text-decoration: none;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    color: var(--color-texto-base);
}

h2 {
    font-family: 'Exo', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-transform: normal;
    font-style: normal;
    text-decoration: none;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    color: var(--color-texto-base);
}

h3,
h4,
h5,
h6 {
    font-family: 'Exo', sans-serif;
}

button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
    font-family: 'Exo', sans-serif;
}

p {
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: normal;
    font-style: normal;
    text-decoration: none;
    margin-top: 1em;
    margin-bottom: 1em;
    color: var(--color-texto-base);
}

.acento {
    font-family: 'Exo 2', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: normal;
    font-style: normal;
    text-decoration: none;
    color: var(--c-accent);
}

/* Utilidades de color de texto */
.texto-negro {
    --color-texto-base: var(--color-negro);
    color: var(--color-negro);
}

.texto-blanco {
    --color-texto-base: var(--color-texto-inverso);
    color: var(--color-texto-inverso);
}

.texto-negro :is(h1, h2, h3, h4, h5, h6, p, a, li, span) {
    color: var(--color-negro);
}

.texto-blanco :is(h1, h2, h3, h4, h5, h6, p, a, li, span) {
    color: var(--color-texto-inverso);
}

/* Estilo para el contenido principal para empujar el footer hacia abajo */
.site-content {
    flex-grow: 1;
}

/*--------------------------------------------------
    Shared hero shapes (Servicios/Experiencia)
    Pentágono + Hexágono comparten reglas; solo cambia el clip-path.
-------------------------------------------------- */

.services-hero__pentagon,
.experience-hero__hexagon {
    width: var(--improvia-hero-shape-width, 420px);
    height: var(--improvia-hero-shape-height, 420px);
    background-color: #d1d5db;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    position: relative;
    transform: translateX(64px);
}

.services-hero__pentagon::after,
.experience-hero__hexagon::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    clip-path: inherit;
    pointer-events: none;
}

@media (max-width: 900px) {
    .services-hero__pentagon,
    .experience-hero__hexagon {
        width: var(--improvia-hero-shape-width-mobile, 310px);
        height: var(--improvia-hero-shape-height-mobile, 310px);
        transform: none;
    }
}