/*
Theme Name: Kadence STC Child
Theme URI: https://stc.example.org/
Description: Tema hijo de Kadence personalizado para Science and Technology Community (STC) — comunidad cientifica de ingenieria informatica.
Author: STC
Author URI: https://stc.example.org/
Template: kadence
Version: 1.0.0
Text Domain: kadence-stc-child
Tags: community, science, research, computer-science
*/

/* =========================================================
   STC BRAND TOKENS
   Cambia estos valores para adaptar la marca. Todo el tema
   usa estas variables, no hay colores "quemados" en otros
   archivos. Si luego Kenji manda los colores/logo oficiales,
   solo hay que sustituirlos aqui.
   ========================================================= */
:root {
    /* Paleta extraida del logo STC (nodos en gradiente azul-cian) */
    --stc-color-primary: #1565E8;      /* Azul brillante principal (del logo) */
    --stc-color-primary-dark: #0A3FA8; /* Azul profundo (hover, acentos) */
    --stc-color-primary-deep: #061E52; /* Casi navy (footer, contraste) */
    --stc-color-accent: #3BA9FF;       /* Cian brillante (enlaces, CTAs) */
    --stc-color-accent-soft: #9BD4FF;  /* Cian claro (fondos sutiles) */
    --stc-color-secondary: #0F172A;    /* Negro azulado (reservado del logo) */
    --stc-color-text: #0F172A;         /* Texto principal */
    --stc-color-text-soft: #334155;    /* Texto secundario */
    --stc-color-muted: #64748B;        /* Metadatos, fechas */
    --stc-color-bg: #FFFFFF;           /* Fondo principal: BLANCO */
    --stc-color-bg-alt: #F4F7FB;       /* Fondo alterno (azul muy sutil) */
    --stc-color-border: #E2E8F0;       /* Bordes */
    --stc-color-success: #10B981;
    --stc-color-danger: #EF4444;

    /* Gradientes reutilizables (inspirados en el logo) */
    --stc-gradient-brand: linear-gradient(135deg, #0A3FA8 0%, #1565E8 50%, #3BA9FF 100%);
    --stc-gradient-soft:  linear-gradient(180deg, #F4F7FB 0%, #FFFFFF 100%);

    --stc-font-heading: "Inter", "Helvetica Neue", Arial, sans-serif;
    --stc-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

    --stc-radius-sm: 6px;
    --stc-radius-md: 12px;
    --stc-radius-lg: 20px;

    --stc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --stc-shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);
    --stc-shadow-lg: 0 20px 40px rgba(16, 24, 40, 0.12);
}

/* =========================================================
   Tipografia base
   ========================================================= */
body {
    font-family: var(--stc-font-body);
    color: var(--stc-color-text);
    background: var(--stc-color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--stc-font-heading);
    color: var(--stc-color-text);
    letter-spacing: -0.01em;
}

a { color: var(--stc-color-primary); transition: color .2s ease; }
a:hover { color: var(--stc-color-accent); }

/* =========================================================
   Cabecera / navegacion (se integra con Kadence)
   ========================================================= */
.site-header .site-branding .site-title { font-weight: 700; }
.site-header .header-navigation .menu > li > a {
    font-weight: 500;
    letter-spacing: .02em;
}
.site-header .header-navigation .menu > li.current-menu-item > a {
    color: var(--stc-color-primary);
}

/* =========================================================
   Botones
   ========================================================= */
.stc-btn,
.wp-block-button__link.stc-btn {
    display: inline-block;
    padding: 12px 22px;
    font-weight: 600;
    border-radius: var(--stc-radius-sm);
    background: var(--stc-color-primary);
    color: #fff !important;
    text-decoration: none;
    transition: background .2s ease, transform .15s ease;
}
.stc-btn:hover { background: var(--stc-color-primary-dark); transform: translateY(-1px); }
.stc-btn--ghost {
    background: transparent;
    color: var(--stc-color-primary) !important;
    border: 2px solid var(--stc-color-primary);
}
.stc-btn--ghost:hover { background: var(--stc-color-primary); color: #fff !important; }

/* =========================================================
   Hero de la Home
   ========================================================= */
.stc-hero {
    position: relative;
    padding: 96px 24px;
    text-align: center;
    background: var(--stc-gradient-brand);
    color: #fff;
    overflow: hidden;
}
.stc-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,180,216,.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(245,158,11,.18) 0%, transparent 45%);
    pointer-events: none;
}
.stc-hero__inner { position: relative; max-width: 900px; margin: 0 auto; }
.stc-hero__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.stc-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    margin: 0 0 20px;
}
.stc-hero p {
    color: rgba(255,255,255,.88);
    font-size: 1.15rem;
    max-width: 680px;
    margin: 0 auto 32px;
}
.stc-hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   Secciones de la Home
   ========================================================= */
.stc-section { padding: 72px 24px; }
.stc-section--alt { background: var(--stc-color-bg-alt); }
.stc-section__header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.stc-section__eyebrow {
    color: var(--stc-color-accent);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
.stc-section__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 14px; }
.stc-section__subtitle { color: var(--stc-color-text-soft); font-size: 1.05rem; }

/* Grid de "pilares" de la comunidad */
.stc-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1160px;
    margin: 0 auto;
}
.stc-pillar {
    background: #fff;
    border: 1px solid var(--stc-color-border);
    border-radius: var(--stc-radius-md);
    padding: 28px;
    box-shadow: var(--stc-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.stc-pillar:hover { transform: translateY(-4px); box-shadow: var(--stc-shadow-md); }
.stc-pillar__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--stc-color-primary) 10%, white);
    color: var(--stc-color-primary);
    margin-bottom: 18px;
    font-size: 22px;
}
.stc-pillar h3 { margin: 0 0 8px; font-size: 1.2rem; }
.stc-pillar p { color: var(--stc-color-text-soft); margin: 0; }

/* =========================================================
   Listado de miembros (CPT stc_miembro)
   ========================================================= */
.stc-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
    max-width: 1160px;
    margin: 0 auto;
}
.stc-member {
    background: #fff;
    border: 1px solid var(--stc-color-border);
    border-radius: var(--stc-radius-md);
    padding: 22px;
    text-align: center;
    box-shadow: var(--stc-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.stc-member:hover { transform: translateY(-3px); box-shadow: var(--stc-shadow-md); }
.stc-member__photo {
    width: 110px; height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    border: 3px solid var(--stc-color-bg-alt);
}
.stc-member__name { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.stc-member__role { color: var(--stc-color-muted); font-size: 14px; margin: 0 0 10px; }
.stc-member__lines {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    margin: 10px 0 12px;
}
.stc-member__line-tag {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--stc-color-bg-alt);
    color: var(--stc-color-text-soft);
}
.stc-member__orcid {
    font-size: 12px;
    color: var(--stc-color-accent);
    text-decoration: none;
    word-break: break-all;
}

/* =========================================================
   Listado de publicaciones (CPT stc_publicacion)
   ========================================================= */
.stc-publications { max-width: 960px; margin: 0 auto; display: grid; gap: 16px; }
.stc-publication {
    background: #fff;
    border: 1px solid var(--stc-color-border);
    border-left: 4px solid var(--stc-color-primary);
    border-radius: var(--stc-radius-sm);
    padding: 20px 22px;
    box-shadow: var(--stc-shadow-sm);
}
.stc-publication__title { margin: 0 0 6px; font-size: 1.1rem; }
.stc-publication__title a { color: var(--stc-color-text); text-decoration: none; }
.stc-publication__title a:hover { color: var(--stc-color-primary); }
.stc-publication__meta {
    color: var(--stc-color-muted);
    font-size: 14px;
    margin: 0 0 10px;
}
.stc-publication__abstract {
    color: var(--stc-color-text-soft);
    font-size: 15px;
    margin: 0 0 12px;
}
.stc-publication__links { display: flex; gap: 14px; flex-wrap: wrap; }
.stc-publication__link {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--stc-color-primary);
}
.stc-publication__link:hover { color: var(--stc-color-accent); }

/* =========================================================
   Blog (cards)
   ========================================================= */
.stc-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1160px;
    margin: 0 auto;
}
.stc-post-card {
    background: #fff;
    border: 1px solid var(--stc-color-border);
    border-radius: var(--stc-radius-md);
    overflow: hidden;
    box-shadow: var(--stc-shadow-sm);
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.stc-post-card:hover { transform: translateY(-3px); box-shadow: var(--stc-shadow-md); }
.stc-post-card__thumb { aspect-ratio: 16 / 9; background: var(--stc-color-bg-alt); overflow: hidden; }
.stc-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.stc-post-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.stc-post-card__date { color: var(--stc-color-muted); font-size: 13px; margin-bottom: 6px; }
.stc-post-card h3 { margin: 0 0 10px; font-size: 1.15rem; }
.stc-post-card h3 a { color: var(--stc-color-text); text-decoration: none; }
.stc-post-card h3 a:hover { color: var(--stc-color-primary); }
.stc-post-card__excerpt { color: var(--stc-color-text-soft); font-size: 14px; flex: 1; }
.stc-post-card__more { margin-top: 14px; font-weight: 600; }

/* =========================================================
   Formulario de contacto
   ========================================================= */
.stc-contact {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    padding: 36px;
    border-radius: var(--stc-radius-md);
    box-shadow: var(--stc-shadow-md);
    border: 1px solid var(--stc-color-border);
}
.stc-contact input[type="text"],
.stc-contact input[type="email"],
.stc-contact textarea,
.stc-contact select {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    border: 1px solid var(--stc-color-border);
    border-radius: var(--stc-radius-sm);
    background: #fff;
    margin-bottom: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.stc-contact input:focus,
.stc-contact textarea:focus,
.stc-contact select:focus {
    outline: none;
    border-color: var(--stc-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stc-color-primary) 15%, transparent);
}
.stc-contact label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background: var(--stc-color-primary-deep);
    color: rgba(255,255,255,.85);
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--stc-color-accent); }

/* =========================================================
   Utilidades
   ========================================================= */
.stc-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.stc-text-center { text-align: center; }
.stc-mt-lg { margin-top: 48px; }

/* Responsive tweaks */
@media (max-width: 640px) {
    .stc-hero { padding: 72px 20px; }
    .stc-section { padding: 56px 18px; }
    .stc-contact { padding: 22px; }
}