/*
 Theme Name:   Soporte Escolar TI
 Theme URI:    https://soporteescolarti.local
 Description:  Tema hijo de Hestia para personalización
 Author:       Felipe Arroyo Fierro
 Author URI:   https://soporteescolarti.local
 Template:     hestia
 Version:      1.0.0
 Text Domain:  hestia-child
*/

/* ==========================================================================
   1. VARIABLES DE MARCA (Custom Properties)
   ========================================================================== */

:root {
    /* Colores primarios */
    --color-azul-corporativo: #0F4C81;
    --color-turquesa: #00B8A9;
    --color-naranja: #F2994A;

    /* Colores secundarios */
    --color-gris-oscuro: #2D3748;
    --color-gris-claro: #EDF2F7;
    --color-blanco: #FFFFFF;

    /* Tipografía */
    --fuente-titulos: 'Poppins', sans-serif;
    --fuente-texto: 'Inter', sans-serif;
    --fuente-botones: 'Poppins', sans-serif;

    /* Espaciados reutilizables */
    --espacio-xs: 8px;
    --espacio-sm: 16px;
    --espacio-md: 24px;
    --espacio-lg: 48px;
    --espacio-xl: 80px;

    /* Área de seguridad del logo */
    --logo-safe-area: 20px;
    --logo-min-size-web: 40px;
}


/* ==========================================================================
   2. IMPORTACIÓN DE TIPOGRAFÍAS (Google Fonts)
   ========================================================================== */
/* Si prefieres alojarlas localmente por rendimiento/GDPR, avísame y
   armamos la versión con @font-face y los archivos descargados. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Inter:wght@400;500&display=swap');


/* ==========================================================================
   3. TIPOGRAFÍA BASE
   ========================================================================== */

body,
p,
li,
span {
    font-family: var(--fuente-texto);
    font-weight: 400;
    color: var(--color-gris-oscuro);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: var(--fuente-titulos);
    font-weight: 600; /* SemiBold */
    color: var(--color-gris-oscuro);
}

a {
    color: var(--color-azul-corporativo);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-turquesa);
}


/* ==========================================================================
   4. FONDOS PERMITIDOS
   ========================================================================== */

.bg-blanco {
    background-color: var(--color-blanco);
}

.bg-azul-corporativo {
    background-color: var(--color-azul-corporativo);
    color: var(--color-blanco);
}

.bg-azul-corporativo h1,
.bg-azul-corporativo h2,
.bg-azul-corporativo h3 {
    color: var(--color-blanco);
}

.bg-gris-claro {
    background-color: var(--color-gris-claro);
}

/* Uso: agregar esta clase sobre secciones con imagen de fondo fotográfico
   para asegurar contraste de texto legible, según el manual (fotos con
   poco ruido visual) */
.bg-foto {
    background-size: cover;
    background-position: center;
    position: relative;
}

.bg-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 76, 129, 0.55); /* overlay azul corporativo semitransparente */
}

.bg-foto > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   5. BOTONES
   ========================================================================== */

/* --- Botón principal --- */
.btn-primario,
.button.btn-primario,
a.btn-primario {
    font-family: var(--fuente-botones);
    font-weight: 500;
    background-color: var(--color-azul-corporativo);
    color: var(--color-blanco);
    border: 2px solid var(--color-azul-corporativo);
    padding: 12px 28px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primario:hover,
.button.btn-primario:hover,
a.btn-primario:hover {
    background-color: var(--color-turquesa);
    border-color: var(--color-turquesa);
    color: var(--color-blanco);
}

/* --- Botón secundario --- */
.btn-secundario,
.button.btn-secundario,
a.btn-secundario {
    font-family: var(--fuente-botones);
    font-weight: 500;
    background-color: var(--color-blanco);
    color: var(--color-azul-corporativo);
    border: 2px solid var(--color-azul-corporativo);
    padding: 12px 28px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secundario:hover,
.button.btn-secundario:hover,
a.btn-secundario:hover {
    background-color: var(--color-azul-corporativo);
    color: var(--color-blanco);
}

/* --- Botón CTA (llamado a la acción) --- */
.btn-cta,
.button.btn-cta,
a.btn-cta {
    font-family: var(--fuente-botones);
    font-weight: 500;
    background-color: var(--color-naranja);
    color: var(--color-blanco);
    border: 2px solid var(--color-naranja);
    padding: 14px 32px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    transition: filter 0.3s ease;
}

.btn-cta:hover,
.button.btn-cta:hover,
a.btn-cta:hover {
    filter: brightness(0.92);
}


/* ==========================================================================
   6. ÁREA DE SEGURIDAD DEL LOGO
   ========================================================================== */

.site-branding,
.site-logo,
.header-logo {
    padding: var(--logo-safe-area);
    min-height: var(--logo-min-size-web);
}

.site-logo img,
.custom-logo {
    min-width: var(--logo-min-size-web);
    height: auto;
}


/* ==========================================================================
   7. ELEMENTOS GRÁFICOS - CUADRADOS DISTINTIVOS
   ========================================================================== */
/* Elemento decorativo inspirado en los píxeles del logo, para reforzar
   la identidad visual en banners, secciones destacadas, etc. */

.pixel-accent {
    position: relative;
}

.pixel-accent::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--color-turquesa);
    bottom: -6px;
    right: -6px;
}

/* Grupo de cuadrados decorativos, ej. para usar en un banner o hero */
.pixel-group {
    display: inline-flex;
    gap: 4px;
}

.pixel-group span {
    width: 10px;
    height: 10px;
    display: inline-block;
}

.pixel-group span:nth-child(1) { background-color: var(--color-azul-corporativo); }
.pixel-group span:nth-child(2) { background-color: var(--color-turquesa); }
.pixel-group span:nth-child(3) { background-color: var(--color-naranja); }


/* ==========================================================================
   8. UTILIDADES DE COLOR (por si necesitas aplicarlos sueltos)
   ========================================================================== */

.text-azul { color: var(--color-azul-corporativo); }
.text-turquesa { color: var(--color-turquesa); }
.text-naranja { color: var(--color-naranja); }
.text-gris-oscuro { color: var(--color-gris-oscuro); }
.text-blanco { color: var(--color-blanco); }