@charset "utf-8";

/*==============================================================
  responsive-extra.css — Ajustes para monitores grandes
  Se carga DESPUÉS de Bootstrap y del resto de CSS propio.

  Bootstrap cubre hasta xxl (≥1400px). Este archivo añade:
    · ≥1680px  → monitor grande
    · ≥1920px  → monitor Full HD+
    · ≥2560px  → monitor 2K/4K/ultrawide

  Estrategia: no re-maquetar, solo escalar anchos máximos,
  tipografía y espaciados para que la página no se vea "perdida"
  en pantallas muy grandes. Mobile-first respeta lo que venga de
  Bootstrap y clamp() hacia abajo.
==============================================================*/


/*--------------------------------------------------------------
# ≥1680px — Monitor grande (WQHD entrada / portátiles 16"+ / iMac 24")
--------------------------------------------------------------*/
@media (min-width: 1680px) {

    /* Contenedor Bootstrap: Bootstrap 5 fija .container-xxl a 1320px.
       Lo ampliamos para aprovechar el ancho disponible. */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1520px;
    }

    /* Refuerzo del clamp de tipografía para que empiece a escalar
       por encima del techo natural de vw. */
    :root {
        --fs-h1: clamp(2rem, 3.2vw + 0.5rem, 4rem);
        --fs-h2: clamp(1.625rem, 2.2vw + 0.5rem, 2.75rem);
        --fs-h3: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
        --section-py: clamp(4rem, 4.5vw, 6.5rem);
    }

    /* Hero content: más aire vertical */
    .hero,
    .sc-hero {
        min-height: min(90vh, 900px);
    }
}


/*--------------------------------------------------------------
# ≥1920px — Monitor Full HD+ (1080p / iMac 27" / portátiles 17")
--------------------------------------------------------------*/
@media (min-width: 1920px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1680px;
    }

    :root {
        --fs-h1: clamp(2.5rem, 2.8vw + 0.5rem, 4.5rem);
        --fs-h2: clamp(1.875rem, 2vw + 0.5rem, 3rem);
        --fs-h3: clamp(1.375rem, 1.2vw + 0.5rem, 2.125rem);
        --fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
        --section-py: clamp(5rem, 4vw, 7.5rem);
    }

    /* Imágenes hero crecen, pero con tope razonable */
    .hero-image img,
    .sc-hero__media img {
        max-height: 720px;
        object-fit: cover;
    }

    /* Cards en grids: un pelín más de padding interno */
    .card,
    .service-card,
    .se-pillar,
    .ss-type,
    .sco-intro {
        padding: clamp(1.5rem, 1.2vw + 1rem, 2.5rem);
    }
}


/*--------------------------------------------------------------
# ≥2560px — Monitor 2K / 4K / Ultrawide
--------------------------------------------------------------*/
@media (min-width: 2560px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 2160px;
    }

    :root {
        --fs-h1: clamp(3rem, 2.2vw + 1rem, 5.5rem);
        --fs-h2: clamp(2.25rem, 1.8vw + 1rem, 3.75rem);
        --fs-h3: clamp(1.625rem, 1vw + 1rem, 2.5rem);
        --fs-body: clamp(1rem, 0.25vw + 0.9375rem, 1.1875rem);
        --fs-lead: clamp(1.25rem, 0.4vw + 1.125rem, 1.625rem);
        --section-py: clamp(6rem, 3.5vw, 9rem);
    }

    /* En ultrawide es frecuente que las imágenes hero
       se vean "pequeñas" si no se les deja crecer. */
    .hero-image img,
    .sc-hero__media img {
        max-height: 900px;
    }

    body {
        line-height: 1.75;
    }
}


/*--------------------------------------------------------------
# Nota: si se necesitan ajustes finos por breakpoint, añadirlos
# aquí manteniendo el orden ascendente (1680 → 1920 → 2560).
# No mezclar con @media de mobile (eso va en los tokens clamp()).
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Tier 3 — Big-screen polish
#   Sits BELOW the size-token overrides above so any element-level
#   rule here wins against the generic token escalation.
--------------------------------------------------------------*/

/* A12 — Testimonial cards get more breathing room ≥1680 */
@media (min-width: 1680px) {
    .testimonials .swiper-slide {
        padding: 0 0.5rem;
    }
    .testimonials .testimonial-item {
        padding: clamp(2.5rem, 1.5vw + 1.5rem, 3.25rem);
    }

    /* C6 — Privacy / Terms text columns widen so the reading length
       doesn't look stranded in the middle of a large monitor.
       Selectors include the parent class to outweigh inner-pages.css
       (specificity 0,2,0). */
    .privacy-2 .privacy-content,
    .terms-of-service .tos-content {
        max-width: 920px;
    }
}

/* A11 — Achievement badge: cap its width so it doesn't look stranded
   in a half-row on Full-HD+ monitors */
@media (min-width: 1920px) {
    .stats .achievement-badge {
        max-width: 560px;
        margin-inline: auto;
    }

    /* C6 — Privacy / Terms text columns widen further on FHD+ */
    .privacy-2 .privacy-content,
    .terms-of-service .tos-content {
        max-width: 1040px;
        padding-inline: 2rem;
    }

    /* C4 — Portfolio gallery keeps the 16:9 base on ultrawide; max-height is
       only a safety cap so the stage never exceeds the viewport on very large
       screens. The photo stays contain-fit (never cropped). */
    .portfolio-details .portfolio-details-slider {
        max-height: 82vh;
    }

    /* C9 — Portfolio card titles scale up on ultrawide */
    .portfolio .portfolio-card h3,
    .portfolio-card h3 {
        font-size: clamp(1.25rem, 0.6vw + 1rem, 1.625rem);
    }

    /* D8 — Header nav links breathe more on Full-HD+ */
    .navmenu a,
    .navmenu a:focus {
        padding: 20px 22px;
        font-size: 1.0625rem;
    }
}