/* ==========================================================================
   Vectorial — Secciones
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO

   Traducción del componente Liquid Metal Hero: badge, titular, bajada, dos
   llamadas a la acción y una tarjeta de vidrio con tres rasgos. El escalonado
   de entrada replica el `staggerChildren: 0.15` con `delayChildren: 0.2` del
   original, resuelto con animation-delay en vez de framer-motion.
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--alto-cabecera) + 3rem) var(--e-8);
    overflow: hidden;
}

.hero__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-6);
    text-align: center;
}

/* Cada hijo entra con 30 px de subida, escalonado. */
.hero__stack > * {
    opacity: 0;
    transform: translateY(30px);
    animation: sube 800ms var(--ease-fluido) forwards;
    animation-delay: var(--retraso, 0ms);
}

@keyframes sube { to { opacity: 1; transform: none; } }

.hero__titulos {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
    align-items: center;
}

.hero__titulo {
    max-width: 15ch;
    font-size: var(--t-4xl);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hero__titulo em {
    font-style: normal;
    /* Reflejo metálico sobre el propio texto. */
    background: linear-gradient(96deg, #a1a1aa 0%, #ffffff 28%, #d4d4d8 48%, #ffffff 72%, #a1a1aa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Aquí no sirve text-shadow: con background-clip:text la sombra se pintaría
       por encima del degradado. drop-shadow actúa sobre lo ya rasterizado. */
    text-shadow: none;
    filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.6));
}

.hero__bajada {
    max-width: 58ch;
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
    line-height: 1.6;
    color: var(--tinta-90);
    /* El texto cruza por delante del cromo, que es claro: la sombra lo separa
       sin necesidad de oscurecer la escena. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.55);
}

.hero__titulo {
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-4);
}

/* --- Tarjeta de rasgos ---------------------------------------------------- */

.rasgos {
    width: 100%;
    max-width: 62rem;
    margin-top: var(--e-6);
    padding: var(--e-6);
    border-radius: var(--r-xl);
}

.rasgos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-5);
}

.rasgos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-weight: 500;
    font-size: var(--t-md);
    color: var(--tinta-90);
    opacity: 0;
    animation: entra-lado 600ms var(--ease-fluido) forwards;
    animation-delay: calc(1100ms + var(--i) * 100ms);
}

@keyframes entra-lado {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: none; }
}

.rasgos__item .icono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--tinta-55);
}

/* --- Indicador de scroll -------------------------------------------------- */

.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tinta-55);
    pointer-events: none;
    opacity: 0;
    animation: sube 800ms var(--ease-fluido) 1600ms forwards;
}

.hero__cue::after {
    content: '';
    width: 1px;
    height: 40px;
    background: linear-gradient(var(--tinta-20), transparent);
}

@media (prefers-reduced-motion: reduce) {
    .hero__stack > *,
    .rasgos__item,
    .hero__cue {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Hero de páginas internas
   -------------------------------------------------------------------------- */

.hero-interno {
    position: relative;
    padding-block: calc(var(--alto-cabecera) + 4rem) var(--e-8);
    text-align: center;
}

.hero-interno__titulo {
    max-width: 18ch;
    margin-inline: auto;
    font-size: var(--t-3xl);
    letter-spacing: -0.04em;
}

.hero-interno__bajada {
    margin: var(--e-4) auto 0;
    max-width: 58ch;
    font-size: var(--t-md);
    color: var(--tinta-70);
}

.migas {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: var(--e-4);
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-55);
}

.migas a:hover { color: var(--tinta); }

/* --------------------------------------------------------------------------
   Tecnologías
   -------------------------------------------------------------------------- */

.tira-tec { padding-block: var(--e-6); }

.tira-tec__titulo {
    margin-bottom: var(--e-4);
    text-align: center;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tinta-55);
}

/* --------------------------------------------------------------------------
   Servicios
   -------------------------------------------------------------------------- */

.servicios__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--e-5);
}

.servicio {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    min-height: 100%;
}

.servicio__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: var(--vidrio);
    border: 1px solid var(--vidrio-borde);
    color: var(--tinta);
    transition: transform var(--d-media) var(--ease-rebote);
}

.servicio__icono .icono { width: 23px; height: 23px; }

.servicio:hover .servicio__icono { transform: translateY(-3px) scale(1.06); }

.servicio__titulo { font-size: var(--t-lg); }

.servicio__texto {
    flex-grow: 1;
    font-size: var(--t-sm);
    color: var(--tinta-70);
}

.servicio__lista {
    display: grid;
    gap: 0.5rem;
    font-size: var(--t-sm);
    color: var(--tinta-70);
}

.servicio__lista li { display: flex; align-items: center; gap: 0.55rem; }

.servicio__lista .icono {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--exito);
}

.servicio__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: var(--e-4);
    border-top: 1px solid var(--borde-tenue);
}

/* --------------------------------------------------------------------------
   Proceso
   -------------------------------------------------------------------------- */

.proceso { display: grid; }

.paso {
    display: grid;
    grid-template-columns: 110px 1fr 250px;
    gap: var(--e-6);
    align-items: start;
    padding: var(--e-6) 0;
    border-top: 1px solid var(--borde);
}

.paso:last-child { border-bottom: 1px solid var(--borde); }

.paso__numero {
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--tinta-20);
    transition: color var(--d-media) var(--ease-fluido);
}

.paso:hover .paso__numero { color: var(--tinta); }

.paso__titulo { font-size: var(--t-lg); margin-bottom: 0.35rem; }

.paso__duracion {
    display: inline-block;
    margin-bottom: var(--e-3);
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento);
}

.paso__texto {
    font-size: var(--t-sm);
    color: var(--tinta-70);
    max-width: 58ch;
}

.paso__entregables {
    display: grid;
    gap: 0.45rem;
    font-size: var(--t-sm);
    color: var(--tinta-70);
}

.paso__entregables li { display: flex; align-items: center; gap: 0.5rem; }

.paso__entregables .icono {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--tinta-55);
}

/* --------------------------------------------------------------------------
   Portafolio
   -------------------------------------------------------------------------- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--e-6);
}

.filtro {
    padding: 0.5rem 1.05rem;
    font-size: var(--t-sm);
    color: var(--tinta-70);
    background: var(--vidrio-tenue);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    transition: all var(--d-rapida) var(--ease-fluido);
}

.filtro:hover { color: var(--tinta); border-color: var(--borde-fuerte); }

.filtro.is-activo {
    color: var(--papel-claro);
    background: var(--tinta);
    border-color: var(--tinta);
}

.proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: var(--e-5);
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.proyecto {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.proyecto__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
}

.proyecto__etiqueta {
    font-family: var(--f-mono);
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acento);
}

.proyecto__anio {
    font-family: var(--f-mono);
    font-size: 0.66rem;
    color: var(--tinta-55);
}

.proyecto__titulo {
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
    letter-spacing: -0.04em;
}

.proyecto__cliente {
    margin-top: 0.15rem;
    font-size: var(--t-sm);
    color: var(--tinta-55);
}

.proyecto__texto {
    margin-top: var(--e-4);
    flex-grow: 1;
    font-size: var(--t-sm);
    color: var(--tinta-70);
}

.proyecto__pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
    margin-top: var(--e-5);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borde-tenue);
}

.proyecto__metrica strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.proyecto__metrica span { font-size: 0.72rem; color: var(--tinta-55); }

.proyecto__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Cifras
   -------------------------------------------------------------------------- */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--e-5);
    padding: var(--e-7) clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--r-xl);
}

.cifra {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}

.cifra__valor {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.05rem;
}

.cifra__sufijo {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tinta-55);
}

.cifra__texto { font-size: var(--t-sm); color: var(--tinta-70); }

/* --------------------------------------------------------------------------
   Stack
   -------------------------------------------------------------------------- */

.stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--e-4);
}

.stack__grupo { padding: var(--e-5); }

.stack__cabecera {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: var(--e-4);
}

.stack__cabecera .icono { width: 19px; height: 19px; color: var(--tinta-55); }

.stack__titulo {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-70);
}

.stack__items { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* --------------------------------------------------------------------------
   Testimonios
   -------------------------------------------------------------------------- */

.testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--e-5);
}

.testimonio {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
}

.testimonio__comillas { width: 28px; height: 28px; color: var(--tinta-20); }

.testimonio__texto {
    flex-grow: 1;
    font-size: var(--t-sm);
    line-height: 1.75;
    color: var(--tinta-90);
}

.testimonio__autor {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: var(--e-4);
    border-top: 1px solid var(--borde-tenue);
}

.testimonio__avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--papel-claro);
    background: var(--tinta);
}

.testimonio__nombre {
    display: block;
    font-weight: 600;
    font-size: var(--t-sm);
}

.testimonio__cargo {
    display: block;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--tinta-55);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--e-8);
    align-items: start;
}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.cta {
    padding: clamp(2.5rem, 1.5rem + 5vw, 5rem);
    border-radius: var(--r-xl);
    text-align: center;
}

.cta__titulo {
    max-width: 20ch;
    margin-inline: auto;
    font-size: var(--t-2xl);
    letter-spacing: -0.035em;
}

.cta__texto {
    margin: var(--e-4) auto 0;
    max-width: 54ch;
    color: var(--tinta-70);
}

.cta__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-4);
    margin-top: var(--e-6);
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contacto {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--e-8);
    align-items: start;
}

.contacto__form {
    display: grid;
    gap: var(--e-4);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--r-lg);
}

.contacto__fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4);
}

.contacto__datos { display: grid; gap: var(--e-5); }

.contacto__dato { display: flex; gap: 0.85rem; align-items: flex-start; }

.contacto__dato .icono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--tinta-55);
}

.contacto__dato strong {
    display: block;
    font-size: var(--t-sm);
    margin-bottom: 0.1rem;
}

.contacto__dato span,
.contacto__dato a { font-size: var(--t-sm); color: var(--tinta-70); }

.contacto__dato a:hover { color: var(--acento); }

/* --------------------------------------------------------------------------
   Nosotros
   -------------------------------------------------------------------------- */

.valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--e-5);
}

.valor .icono {
    width: 24px;
    height: 24px;
    color: var(--tinta-55);
    margin-bottom: var(--e-4);
}

.valor h3 { font-size: var(--t-md); margin-bottom: 0.55rem; }

.valor p { font-size: var(--t-sm); color: var(--tinta-70); }

.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-8);
    align-items: center;
}

.dos-columnas p { color: var(--tinta-70); margin-bottom: var(--e-4); }
.dos-columnas p:last-child { margin-bottom: 0; }

.panel-marca {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-xl);
}

.panel-marca img {
    width: 44%;
    filter: drop-shadow(0 20px 40px rgba(10, 10, 11, 0.25));
}