/* =========================================================
   Base: reset, tipografía, layout y utilidades comunes
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* Tipografía base FLUIDA: escala sola entre celular y monitor grande.
       ~15px en pantallas chicas → ~18px en pantallas grandes. */
    font-size: clamp(15px, 0.55vw + 13.2px, 18px);
    -webkit-text-size-adjust: 100%;   /* evita que iOS agrande el texto solo */
}

body {
    font-family: var(--font);
    background: var(--negro);
    color: var(--blanco);
    line-height: 1.6;
    overflow-x: hidden;
    /* Corta palabras/URLs muy largas en vez de romper el ancho */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg, video { max-width: 100%; display: block; height: auto; }

/* Nada puede sobresalir horizontalmente y crear scroll lateral */
.container { overflow-wrap: break-word; }

/* Contenedores */
.container {
    width: 100%;
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.container--narrow { max-width: 800px; }

/* Secciones */
.section { padding: var(--espacio) 0; }

.section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.section__tag {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--azul-elec);
    background: rgba(6, 182, 212, .1);
    padding: .35rem .9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.section__title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.section__lead { color: var(--gris-texto); font-size: 1.05rem; }

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    padding: .85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--trans);
    white-space: nowrap;
}
.btn--primary { background: var(--grad-azul); color: #fff; box-shadow: var(--sombra-azul); }
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--blanco); border-color: var(--gris-borde); }
.btn--ghost:hover { border-color: var(--azul-claro); color: var(--azul-claro); }
.btn--outline { background: transparent; color: var(--azul-claro); border-color: var(--azul); }
.btn--outline:hover { background: var(--azul); color: #fff; }
.btn--whatsapp { background: #25d366; color: #042f1a; }
.btn--whatsapp:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn--block { width: 100%; }

/* Etiquetas / chips */
.tag {
    font-size: .75rem;
    background: rgba(37, 99, 235, .12);
    color: var(--azul-claro);
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--gris-borde);
}
.tag--more { background: var(--gris-borde); color: var(--blanco); }
.tag--tech { background: rgba(6, 182, 212, .1); color: var(--azul-elec); }

.chip {
    font-family: inherit;
    font-size: .85rem;
    color: var(--gris-texto);
    background: var(--gris-card);
    border: 1px solid var(--gris-borde);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--trans);
}
.chip:hover { color: var(--blanco); border-color: var(--azul); }
.chip--active { background: var(--grad-azul); color: #fff; border-color: transparent; }

/* Animación al hacer scroll */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-animate].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}