/* =========================================================================
   GPET Landing — sections.css
   Estilos modulares por sección (GRPD-69 a GRPD-78).
   ========================================================================= */

/* =========================================================================
   Header / Navbar — GRPD-69 (https://mixart.atlassian.net/browse/GRPD-69)
   Layout: Contenedor 1400px centrado, padding-x 100px, altura ~100px,
   flexbox con justify-content: space-between y align-items: center.
   Logo GPET 118x100 a la izquierda · menú a la derecha con gap 101px.
   Josefin Sans Bold 16px #220C35 uppercase letter-spacing 0.8px line-height normal.
   ========================================================================= */
.gpet-site-header {
    position: relative;
    top: 0;
    z-index: 50;
    background: var(--gpet-white);
    width: 100%;
    padding: 0 24px;          /* respiración lateral (mismo que sections para alinear logo con paneles) */
}

.gpet-site-header__inner {
    /* GRPD-69: contenedor 1400px centrado, padding solo vertical.
       El lateral lo maneja el outer .gpet-site-header → así el logo queda alineado
       con el panel de Values y el resto de bloques que comparten max-width 1400. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
    min-height: 100px;
}

.gpet-site-header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.gpet-site-header__brand a,
.gpet-site-header__brand .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.gpet-site-header__brand img,
.gpet-site-header__brand .custom-logo {
    display: block;
    width: 118.226px;
    height: 100px;
    object-fit: contain;
}
.gpet-site-header__title {
    font-family: var(--gpet-font-display);
    font-weight: 700;
    color: var(--gpet-purple);
    font-size: 1.5rem;
    text-decoration: none;
    letter-spacing: 0.8px;
}

.gpet-nav__toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    cursor: pointer;
}
.gpet-nav__icon,
.gpet-nav__icon::before,
.gpet-nav__icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gpet-purple);
    position: relative;
    transition: transform var(--gpet-transition), opacity var(--gpet-transition);
}
.gpet-nav__icon::before,
.gpet-nav__icon::after { content: ''; position: absolute; left: 0; }
.gpet-nav__icon::before { top: -8px; }
.gpet-nav__icon::after  { top:  8px; }

.gpet-nav.is-open .gpet-nav__icon { background: transparent; }
.gpet-nav.is-open .gpet-nav__icon::before { top: 0; transform: rotate(45deg); }
.gpet-nav.is-open .gpet-nav__icon::after  { top: 0; transform: rotate(-45deg); }

.gpet-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 101px;
}
.gpet-nav__item { position: relative; display: flex; align-items: center; }
.gpet-nav__link {
    display: inline-block;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #220C35;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    white-space: nowrap;
}
/* Figma no define hover/active para el menú: el link mantiene su color base
   en todos los estados. Sobrescribimos el a:hover/focus global que pinta de rojo. */
.gpet-nav__link:hover,
.gpet-nav__link:focus,
.gpet-nav__link:focus-visible {
    color: #220C35;
    text-decoration: none;
}
.gpet-nav__link:focus { outline: none; }
.gpet-nav__link:focus-visible {
    /* Outline neutro sólo visible para usuarios de teclado (a11y). */
    outline: 2px solid #220C35;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Overlay del drawer mobile (oculto por defecto, solo activo en ≤900px). */
.gpet-nav__overlay { display: none; }

/* Logo dentro del drawer mobile (inyectado como primer <li> del menú).
   Oculto en desktop; el drawer mobile lo muestra al lado del botón X. */
.gpet-nav__drawer-brand-item { display: none; }

.gpet-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--gpet-white);
    box-shadow: var(--gpet-shadow-md);
    border-radius: 8px;
    min-width: 200px;
    display: none;
    z-index: 60;
}
.gpet-nav__item:hover > .gpet-nav__submenu,
.gpet-nav__item:focus-within > .gpet-nav__submenu { display: block; }
.gpet-nav__link--child {
    display: block;
    padding: 0.5rem 0;
    font-size: 14px;
    letter-spacing: 0.6px;
}

@media (max-width: 1400px) {
    .gpet-site-header__inner { padding: 24px 0 21px; }
    .gpet-nav__list          { gap: 72px; }
}
@media (max-width: 1200px) {
    .gpet-site-header__inner { padding: 24px 0 21px; }
    .gpet-nav__list          { gap: 48px; }
}
@media (max-width: 1024px) {
    .gpet-nav__list          { gap: 32px; }
}

@media (max-width: 900px) {
    .gpet-site-header__inner { padding: 16px 0; min-height: 80px; }
    .gpet-site-header__brand img,
    .gpet-site-header__brand .custom-logo {
        width: 92px;
        height: 78px;
        object-fit: contain;
    }

    /* Hamburguesa por encima del drawer/overlay (también actúa como botón cerrar). */
    .gpet-nav__toggle {
        display: inline-flex;
        position: relative;
        z-index: 101;
    }

    /* Drawer lateral derecho: 80% del viewport, máx 480px.
       padding-top 16px alinea verticalmente el logo del drawer con la X. */
    .gpet-nav__list {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        max-width: 480px;
        background: var(--gpet-white);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 2rem 2rem;
        gap: 2.25rem;
        box-shadow: -10px 0 30px rgba(34, 12, 53, 0.18);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 280ms var(--gpet-ease), visibility 0s 280ms;
        z-index: 100;
        overflow-y: auto;
    }

    /* Logo dentro del drawer.
       Altura 44px = mismo alto del botón hamburguesa/X → centros verticalmente alineados. */
    .gpet-nav__drawer-brand-item {
        display: flex;
        align-items: center;
        min-height: 79px;       /* mismo alto que .gpet-nav__toggle */
        list-style: none;
        margin: 0 0 0rem;
    }
    .gpet-nav__drawer-brand {
        display: inline-flex;
        align-items: center;
        line-height: 0;
        text-decoration: none;
    }
    .gpet-nav__drawer-brand-img {
        width: auto;
        height: 44px;
        object-fit: contain;
        display: block;
        max-width: none;
    }
    .gpet-nav.is-open .gpet-nav__list {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms var(--gpet-ease), visibility 0s;
    }

    /* Overlay púrpura semitransparente detrás del drawer. */
    .gpet-nav__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(34, 12, 53, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 280ms var(--gpet-ease), visibility 0s 280ms;
        z-index: 99;
        cursor: pointer;
    }
    .gpet-nav.is-open .gpet-nav__overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity 280ms var(--gpet-ease), visibility 0s;
    }

    /* Si el admin bar de WordPress está activo, empujamos el drawer + overlay
       para que no queden tapados por la barra (32px ó 46px en pantallas pequeñas). */
    body.admin-bar .gpet-nav__list,
    body.admin-bar .gpet-nav__overlay {
        top: 32px;
    }

    .gpet-nav__submenu {
        position: static;
        box-shadow: none;
        padding: 0.25rem 0 0 1rem;
        display: block;
    }
}

/* Admin bar más alto (46px) en pantallas pequeñas — corrige el offset del drawer. */
@media screen and (max-width: 782px) {
    body.admin-bar .gpet-nav__list,
    body.admin-bar .gpet-nav__overlay {
        top: 46px;
    }
}

body.has-nav-open { overflow: hidden; }

/* =========================================================================
   Hero / Banner principal — GRPD-70 (https://mixart.atlassian.net/browse/GRPD-70)
   Frame Figma: 1600×851 con imagen industrial de fondo (object-fit cover),
   tagline blanco abajo a la izquierda (Josefin Bold 48/52, text-shadow),
   y 2 formas decorativas (paralelogramo azul izq, rectángulo rojo der).
   ========================================================================= */
.gpet-section--hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 851;
    max-height: 851px;
    min-height: 480px;
    overflow: hidden;
    background: var(--gpet-purple);   /* fallback mientras la imagen carga */
    color: var(--gpet-white);
    padding: 0;
    isolation: isolate;               /* propio stacking context */
}

/* Imagen de fondo.
   object-position: center bottom alinea la imagen al borde inferior del hero
   (los camiones quedan visibles igual que en Figma; el cielo/montañas se
   recortan por arriba si la imagen es más alta que el contenedor). */
.gpet-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 1;
    pointer-events: none;
}

/* Formas decorativas — SVGs absolutos sobre la imagen.
   mix-blend-mode: multiply hace que las formas se mezclen con la imagen
   de fondo del hero (intent del Figma: capa traslúcida, no bloque sólido). */
.gpet-hero__shape {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    display: block;
    mix-blend-mode: multiply;
}
.gpet-hero__shape--left {
    bottom: 95px;
    left: 0;
    width: clamp(360px, 55vw, 881px);
    height: auto;
    max-height: 65%;
}
.gpet-hero__shape--right {
    top: 0;
    bottom: 95px;
    right: 0;
    width: clamp(40px, 6vw, 100px);
    max-width: none;
    object-fit: cover;
}

/* Contenedor del texto — alineado con la forma izquierda (mismo bottom/left/width)
   y centrado dentro de ella vertical y horizontalmente. */
.gpet-hero__content {
    position: absolute;
    bottom: 95px;
    left: 0;
    z-index: 3;
    width: clamp(360px, 55vw, 881px);
    aspect-ratio: 881 / 549;
    max-height: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.gpet-hero__tagline {
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 48px);
    line-height: clamp(32px, 4.5vw, 52px);
    color: var(--gpet-white);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    width: 643px;
    max-width: 100%;
    word-break: normal;
}

@media (max-width: 900px) {
    .gpet-section--hero {
        aspect-ratio: auto;
        min-height: 520px;
        max-height: none;
    }
    .gpet-hero__shape--left { width: 90vw; max-height: 50%; }
    .gpet-hero__shape--right { width: 36px; }
    .gpet-hero__content {
        width: 90vw;
        aspect-ratio: 881 / 549;
        max-height: 50%;
    }
}

.gpet-section-label--on-dark { color: var(--gpet-white); opacity: 0.85; }

/* =========================================================================
   About GPET — GRPD-71 (https://mixart.atlassian.net/browse/GRPD-71)
   Figma node 65:290. Container 1240, 2 columnas (imagen + contenido),
   imagen 507.5×600 con shadow + border-radius + gradient blur detrás,
   card "Our Mission" flotante en esquina inf-derecha, stats grid 2×2.
   ========================================================================= */
.gpet-section--about {
    background: var(--gpet-white);
    /* Spec: 85px top, 108px bottom. */
    padding: 85px 0 91px;
}

.gpet-about__container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: flex-start;
    gap: 64px;
    box-sizing: border-box;
}

/* ----- Columna izquierda: imagen + blur + card ----- */
.gpet-about__visual {
    position: relative;
    flex: 0 0 507.5px;
    width: 507.5px;
    max-width: 507.5px;
    margin-top: 100px;       /* offset top respecto al inicio del contenedor (Figma) */
}

.gpet-about__blur {
    position: absolute;
    top: -16px;
    left: -16px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--gpet-blue), var(--gpet-red));
    opacity: 0.20;
    filter: blur(24px);
    z-index: 1;
    pointer-events: none;
}

.gpet-about__image-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: var(--gpet-bg-light);
}
.gpet-about__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gpet-about__mission {
    position: absolute;
    z-index: 3;
    right: -32px;
    bottom: -48px;
    width: 320px;
    background: var(--gpet-white);
    border-radius: 14px;
    padding: 24px 32px;
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
}
.gpet-about__mission-title {
    margin: 0 0 6px;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.4395px;
    color: var(--gpet-blue);
}
.gpet-about__mission-subtitle {
    margin: 0;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1504px;
    color: var(--gpet-gray-text);
}

/* ----- Columna derecha: contenido + stats ----- */
.gpet-about__content {
    flex: 1 1 auto;
    min-width: 0;
}

.gpet-about__eyebrow {
    margin: 0 0 24px;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5496px;
    text-transform: uppercase;
    color: var(--gpet-red);
}

.gpet-about__title {
    margin: 0 0 32px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 59px;
    color: var(--gpet-blue);
    max-width: 631px;
}

.gpet-about__text {
    margin: 0 0 40px;
    max-width: 668px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    color: var(--gpet-black);
}
.gpet-about__text p { margin: 0 0 26px; }
.gpet-about__text p:last-child { margin-bottom: 0; }

/* ----- Stats grid 2×2 (forzado en todos los breakpoints) ----- */
.gpet-about__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
    max-width: 507.5px;
}
.gpet-about__stat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.gpet-about__stat-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 86, 151, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gpet-about__stat-icon img {
    width: 24px;
    height: 24px;
    display: block;
}
.gpet-about__stat-text {
    display: flex;
    flex-direction: column;
}
.gpet-about__stat-number {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.3955px;
    color: var(--gpet-black);
}
.gpet-about__stat-label {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1504px;
    color: var(--gpet-gray-text);
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .gpet-about__container { gap: 40px; }
    .gpet-about__visual { flex: 0 0 420px; width: 420px; max-width: 420px; }
    .gpet-about__image-wrap { height: 520px; }
    .gpet-about__title { font-size: 40px; line-height: 50px; }
}
@media (max-width: 900px) {
    .gpet-about__container {
        flex-direction: column;
        gap: 80px;
    }
    .gpet-about__visual {
        width: 100%;
        max-width: 507.5px;
        margin: 0 auto;
        flex: none;
    }
    .gpet-about__image-wrap { height: clamp(360px, 70vw, 520px); }
    .gpet-about__mission {
        right: 0;
        bottom: -56px;
        width: min(320px, 80%);
    }
    .gpet-about__content { width: 100%; }
    .gpet-about__title { font-size: clamp(28px, 6vw, 40px); line-height: 1.2; }
    .gpet-about__text { font-size: 17px; line-height: 24px; }
    /* El grid de stats se mantiene 2×2 también en mobile (preferencia del cliente). */
    .gpet-about__stats { max-width: none; gap: 20px; }
}

/* En pantallas muy estrechas (<480px) reducimos icon + tipografías de los stats
   para que 2 columnas siempre quepan sin que el contenido se desborde. */
@media (max-width: 480px) {
    .gpet-about__stats { gap: 14px; }
    .gpet-about__stat { gap: 10px; }
    .gpet-about__stat-icon { flex: 0 0 40px; width: 40px; height: 40px; }
    .gpet-about__stat-icon img { width: 20px; height: 20px; }
    .gpet-about__stat-number { font-size: 22px; line-height: 28px; }
    .gpet-about__stat-label { font-size: 12px; line-height: 16px; }
}

/* =========================================================================
   Our Values — GRPD-72 (https://mixart.atlassian.net/browse/GRPD-72)
   Composición estilo logo GPET: paralelogramo azul (#005697) detrás +
   panel púrpura (#220C35) encima con icono + título + texto.
   Figma nodes 20:3 (fondo), 57:57 (contenedor), 20:27 (icono),
   12:40 (título), 12:41 (texto).
   ========================================================================= */
.gpet-section--values {
    padding: 0 24px;             /* sin padding vertical — la separación con las secciones vecinas la dan sus propios paddings */
    background: var(--gpet-white);
    overflow: hidden;            /* el contenedor azul es más grande que el panel; evita scroll horizontal */
}

/* Stage = wrapper relativo. Es más ANCHO que el panel para alojar el
   contenedor azul, que a su vez es más grande que el panel púrpura. */
.gpet-values__stage {
    position: relative;
    max-width: 1500px;        /* 100px más ancho que el panel (50 cada lado) */
    margin: 0 auto;
    padding: 20px 0 !important;          /* 60px arriba+abajo de respiración para el back */
    box-sizing: border-box;
}

/* Contenedor del paralelogramo azul — explícitamente más grande
   (en largo y ancho) que el panel púrpura. Por su propia inclinación
   interna el SVG sólo asoma en las esquinas top-right y bottom-left. */
.gpet-values__back-container {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    inset: 0;                 /* ocupa todo el stage (1500 ancho × stage-height) */
}
.gpet-values__back {
    display: block;
    width: 100%;
    height: 100%;
}

/* Panel púrpura — centrado dentro del stage, max-width 1400 (más estrecho).
   Sin border-radius. */
.gpet-values__panel {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 373px;
    background: #220C35;
    border-radius: 0;
    padding: clamp(40px, 6vw, 86px) clamp(32px, 6vw, 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 55px;
    box-sizing: border-box;
    color: var(--gpet-white);
}

.gpet-values__icon {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gpet-values__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gpet-values__text {
    flex: 0 1 560px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 19px;
}
.gpet-values__title {
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: var(--gpet-white);
    text-transform: capitalize;
}
.gpet-values__paragraph {
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    color: var(--gpet-white);
    white-space: pre-wrap;
}
@media (max-width: 1100px) {
    .gpet-values__back-container { display: none !important; }
    .gpet-values__stage { padding: 0 !important; max-width: 1400px; }
    .gpet-values__panel {
        gap: 32px;
        min-height: 0 !important;
        height: auto !important;
        padding: 36px 32px !important;
        align-items: center;
        justify-content: flex-start !important;
    }
    .gpet-values__icon { flex: 0 0 120px; width: 120px; height: 120px; }
    .gpet-values__title { font-size: 32px; }
}
@media (max-width: 900px) {
    .gpet-values__back-container { display: none !important; }
    .gpet-values__stage { padding: 0 !important; }
    .gpet-values__panel {
        flex-direction: column;
        text-align: center;
        gap: 18px;
        min-height: 0 !important;
        height: 317px !important;
        padding: 28px 20px !important;
        align-items: center;
        justify-content: flex-start !important;
    }
    .gpet-values__icon { flex: none; width: 80px; height: 80px; }
    .gpet-values__text { align-items: center; max-width: 100%; gap: 12px; }
    .gpet-values__title { font-size: clamp(22px, 5vw, 28px); margin: 0; }
    .gpet-values__paragraph { font-size: 15px; line-height: 22px; margin: 0; }
}

/* =========================================================================
   Sustainable Development — GRPD-73
   2 columnas: texto izq (max 600) + imagen der (680×423 border-radius 16).
   Padding 85/114, justify-content flex-end, gap 71.
   ========================================================================= */
.gpet-section--sustainable {
    background: var(--gpet-white);
    padding: 85px 24px 0px;
}
.gpet-sustainable__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 71px;
    box-sizing: border-box;
}
.gpet-sustainable__content {
    flex: 0 1 600px;
    max-width: 600px;
}
.gpet-sustainable__title {
    margin: 0 0 24px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 59px;
    color: var(--gpet-blue);
    text-transform: capitalize;
    white-space: nowrap;
}
.gpet-sustainable__text {
    margin: 0;
    max-width: 576px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    color: var(--gpet-black);
}
.gpet-sustainable__visual {
    flex: 0 0 680px;
    width: 680px;
    height: 423px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--gpet-bg-light);
    box-shadow: 0 12px 32px rgba(34, 12, 53, 0.08);
}
.gpet-sustainable__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 1200px) {
    .gpet-sustainable__container {
        gap: 48px;
        justify-content: center;
    }
    .gpet-sustainable__content { text-align: center; }
    .gpet-sustainable__visual { flex: 0 0 520px; width: 520px; height: 320px; }
    .gpet-sustainable__title { font-size: 40px; line-height: 50px; }
}
@media (max-width: 900px) {
    .gpet-sustainable__container {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }
    .gpet-sustainable__content { flex: none; max-width: 100%; text-align: center; }
    .gpet-sustainable__visual { flex: none; width: 100%; height: clamp(220px, 50vw, 360px); }
    .gpet-sustainable__title {
        font-size: clamp(28px, 6vw, 40px);
        line-height: 1.05;
        white-space: normal;
    }
    .gpet-sustainable__text { font-size: 17px; line-height: 24px; max-width: 100%; }
}

/* =========================================================================
   Responsibility — GRPD-74
   Imagen de fondo (sin overlay) + head con bg azul + wrap con rojo wine
   asomando a la derecha + grid 3 cols con masonry manual (card 4 sube).
   ========================================================================= */
.gpet-section--responsibility {
    position: relative;
    overflow: hidden;
    /* Spec Figma (nodo 34:44): sección 1600×1144. Garantizamos esa altura
       mínima con clamp para que la imagen de fondo se vea en su proporción
       de diseño (escala con viewport hasta el máximo 1144px del Figma). */
    margin-top: 0;
    min-height: clamp(720px, 70vw, 1144px);
    padding: 114px 24px clamp(80px, 9vw, 130px);
    color: var(--gpet-white);
    isolation: isolate;
}
.gpet-responsibility__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    pointer-events: none;
    padding-top: 201px;
    filter: blur(0.5px) contrast(0.97);
    image-rendering: -webkit-optimize-contrast;
}
.gpet-responsibility__container {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    gap: 89px;
    display: flex;
    flex-direction: column;
}

/* Head con bg azul inline desde PHP (--gpet-red-shape va al wrap externo) */
.gpet-responsibility__head {
    position: relative;
    margin-bottom: 64px;
    max-width: 793px;
    padding: 91px 49px 86px 97px;
}

/* Wrap del head con el rojo wine asomando a la derecha vía ::after */
.gpet-responsibility__head-wrap {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 64px;
    margin-right: -20px;
    isolation: isolate;
}
.gpet-responsibility__head-wrap .gpet-responsibility__head {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}
.gpet-responsibility__head-wrap::after {
    content: '';
    position: absolute;
    /* El head tiene width 793px. El rojo solo asoma 15px a la derecha
       (sutil, matching Figma) y 30px abajo. Offset diagonal pequeño:
       top 20 / left 18 → el rojo queda casi tapado por el azul, asomando
       una franja fina en el borde derecho + inferior. */
    top: 20px;
    left: -77px !important;
    width: 1049px !important;
    height: 340px !important;
    background-image: var(--gpet-red-shape);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
    z-index: 1;
    mix-blend-mode: multiply;
    background-blend-mode: multiply;
    opacity: 0.8;
}

.gpet-responsibility__title {
    margin: 0 0 24px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: var(--gpet-white);
    text-transform: capitalize;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.gpet-responsibility__subtitle {
    margin: 0;
    max-width: 647px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    color: var(--gpet-white);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Grid de tarjetas — asimétrico desktop, uniforme responsive */
.gpet-responsibility__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 40px;
    align-items: start;
}
.gpet-responsibility__cards > article:nth-child(3) {
    grid-row: span 2;
    padding: 40px 40px 81px 40px;
}
.gpet-responsibility__cards > article:nth-child(4) {
    margin-top: -78px;
}

.gpet-responsibility-card {
    background: rgba(255, 255, 255, 0.90);
    border-radius: 10px;
    padding: 40px;
    color: var(--gpet-black);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gpet-responsibility-card__title {
    margin: 0 0 20px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 26px;
    color: var(--gpet-black);
}
.gpet-responsibility-card__text {
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    color: var(--gpet-black);
}
.gpet-responsibility-card__text p { margin: 0 0 20px; }
.gpet-responsibility-card__text p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
    .gpet-responsibility__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
    .gpet-responsibility__cards > article:nth-child(3) { grid-row: auto; align-self: start; }
    .gpet-responsibility__cards > article:nth-child(4) { margin-top: 0; }
    .gpet-responsibility-card { padding: 32px; }
    .gpet-responsibility__title { font-size: 40px; }
    .gpet-responsibility__head {
        width: 100%;
        max-width: 793px;
        background-size: contain;
        padding: 40px;
    }
}
@media (max-width: 700px) {
    /* Sección con padding compacto en mobile. */
    .gpet-section--responsibility {
        min-height: 0;
        padding: 86px 16px 60px;
    }
    .gpet-responsibility__container {
        gap: 10px;
    }
    /* Ocultamos el fondo rojo (::after) en mobile — el azul del head ya está justo. */
    .gpet-responsibility__head-wrap::after { display: none; }
    .gpet-responsibility__head-wrap {
        margin-bottom: 32px;
        margin-right: 0;
    }
    .gpet-responsibility__head-wrap .gpet-responsibility__head {
        position: relative;
        z-index: 2;
        margin-bottom: 0;
        padding: 32px;
    }
    .gpet-responsibility__cards {
        grid-template-columns: 1fr;
        gap: 12px;        /* gap reducido entre las tarjetas en mobile */
    }
    .gpet-responsibility-card { padding: 24px; }
    .gpet-responsibility-card__title { font-size: 20px; }
    .gpet-responsibility-card__text { font-size: 17px; line-height: 24px; }
    .gpet-responsibility__title { font-size: clamp(28px, 6vw, 36px); }
    .gpet-responsibility__subtitle { font-size: 17px; line-height: 24px; }
    .gpet-responsibility__head {
        background-image: none;
        padding: 32px;
    }
}

/* =========================================================================
   Our Principles — GRPD-75 (https://mixart.atlassian.net/browse/GRPD-75)
   Lista interactiva de 7 principios + panel de detalle lateral.
   Figma node 65:66. bg sección #EEF3F7, container 1401, grid 2 cols.
   ========================================================================= */
.gpet-section--principles {
    background: var(--gpet-bg-light);
    padding: 80px 24px;
}
.gpet-principles__container {
    max-width: 1401px;
    margin: 0 auto;
    padding-left: clamp(24px, 7vw, 100px);
    /* padding-right: clamp(24px, 4vw, 60px); */
    box-sizing: border-box;
}
.gpet-principles__head {
    text-align: center;
    margin-bottom: 70px;
}
.gpet-principles__eyebrow {
    margin: 0 0 16px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.55px;
    color: var(--gpet-red);
    text-transform: uppercase;
}
.gpet-principles__title {
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: var(--gpet-blue);
}

.gpet-principles__grid {
    display: grid;
    grid-template-columns: 578px 1fr;
    gap: 109px;
    align-items: stretch;       /* lista y panel comparten altura */
}

/* ----- Lista de principios -----
   Truco para que la columna izquierda mida EXACTAMENTE lo mismo que la
   derecha (en alto) sin que el scrollbar le recorte el ancho:
   - El wrap es la celda real del grid (toma 578px ancho × alto del panel via stretch).
   - La lista va position:absolute inset:0 dentro del wrap, asi llena
     justo esas dimensiones; el alto del row lo manda el panel (no la
     lista). Si los 7 principios no caben, scroll interno solo en la lista.
   La derecha NUNCA tiene scroll. */
.gpet-principles__list-wrap {
    position: relative;
    min-width: 0;
    min-height: 100%;
}
.gpet-principles__list {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 86, 151, 0.25) transparent;
    box-sizing: border-box;
}
.gpet-principles__list::-webkit-scrollbar {
    width: 6px;
}
.gpet-principles__list::-webkit-scrollbar-track {
    background: transparent;
}
.gpet-principles__list::-webkit-scrollbar-thumb {
    background: rgba(0, 86, 151, 0.25);
    border-radius: 3px;
}
.gpet-principles__list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 86, 151, 0.45);
}

.gpet-principle {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #F9FAFB;
    border-radius: 14px;
    padding: 24px 28px;
    min-height: 128px;
    cursor: pointer;
    transition: background 200ms var(--gpet-ease), transform 200ms var(--gpet-ease), box-shadow 200ms var(--gpet-ease);
    box-sizing: border-box;
}
.gpet-principle:hover { transform: translateX(2px); }
.gpet-principle:focus-visible { outline: 2px solid var(--gpet-blue); outline-offset: 2px; }

.gpet-principle__icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(0, 86, 151, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* color heredado por el SVG inline vía currentColor — controla el color
       del stroke/fill del icono (azul corporativo inactivo, blanco activo). */
    color: var(--gpet-blue);
    transition: background 200ms var(--gpet-ease), color 200ms var(--gpet-ease);
}
.gpet-principle__icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.gpet-principle__body {
    display: flex;
    flex-direction: column;
    gap: 9px !important;
    min-width: 0;
}
.gpet-principle__number {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--gpet-gray-text);
}
.gpet-principle__name {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    color: var(--gpet-purple);
}
.gpet-principle__sub {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: var(--gpet-gray-text);
}

/* Principio activo (azul, destacado, ligeramente MÁS GRANDE que los inactivos). */
.gpet-principle.is-active {
    background: var(--gpet-blue);
    min-height: 150px;            /* +22 respecto a 128 inactivo (vs spec 134) */
    padding: 28px 32px;           /* +4 padding general */
    box-shadow: 0 20px 12.5px rgba(0, 0, 0, 0.10);
    transform: scale(1.02);        /* sutil "pop" para destacarlo aún más */
    transform-origin: left center;
    gap: 24px;                     /* gap interno un poco más ancho */
}
.gpet-principle.is-active .gpet-principle__icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    background: rgba(255, 255, 255, 0.20);
    color: var(--gpet-white);   /* el SVG inline hereda este color via currentColor */
}
.gpet-principle.is-active .gpet-principle__icon svg {
    width: 36px;
    height: 36px;
}
.gpet-principle.is-active .gpet-principle__number { color: rgba(255, 255, 255, 0.70); }
.gpet-principle.is-active .gpet-principle__name   { color: var(--gpet-white); font-size: 26px; }
.gpet-principle.is-active .gpet-principle__sub    { color: rgba(255, 255, 255, 0.80); }

/* ----- Panel de detalle ----- */
.gpet-principles__panels {
    position: relative;
    width: 100%;
    /* Sin altura fija — el panel se adapta al contenido (no hay scroll en la derecha). */
}
.gpet-principle-panel {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #220C35;
}
.gpet-principle-panel[hidden] { display: none; }

.gpet-principle-panel__image {
    display: block;
    width: 100%;
    height: 278px;
    object-fit: cover;
    object-position: center;
}
.gpet-principle-panel__image--empty {
    background: linear-gradient(135deg, var(--gpet-blue), var(--gpet-purple));
}
.gpet-principle-panel__content {
    background: #220C35;
    padding: 40px 48px 48px;
    color: var(--gpet-white);
}
.gpet-principle-panel__title {
    margin: 0 0 16px;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    color: var(--gpet-white);
}
.gpet-principle-panel__text {
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 1px;
    color: var(--gpet-white);
}
.gpet-principle-panel__text p { margin: 0 0 16px; }
.gpet-principle-panel__text p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
    .gpet-principles__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* En móvil/tablet:
       - Lista apilada (cards uno encima de otro) con SCROLL VERTICAL interno.
       - Altura limitada para mostrar ~3 cards en tablet y ~2 en mobile.
       - Snap scroll para que los items "encajen" al deslizar.
       - El card activo lleva un poco más de min-height por el "pop" visual. */
    .gpet-principles__list-wrap {
        position: static;
        min-height: 0;
        /* Altura del contenedor = ventana de scroll (≈ 3 cards en tablet).
           card ~140 + gap 15 → 3*140 + 2*15 = 450 + padding 24. */
        max-height: 490px;
    }
    .gpet-principles__list {
        position: static;
        inset: auto;
        max-height: 490px;
        overflow-x: hidden;
        overflow-y: auto;
        flex-direction: column;
        gap: 15px;
        padding: 12px 8px 12px 0;
        scroll-snap-type: y mandatory;
        scroll-padding: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .gpet-principle,
    .gpet-principle.is-active {
        scroll-snap-align: start;
        /* Sin scale en mobile: el ancho de los cards no debe variar. */
        transform: none;
    }
    .gpet-principles__title { font-size: 40px; }
}
@media (max-width: 700px) {
    /* En mobile quitamos los paddings laterales del container para que los
       cards aprovechen todo el ancho disponible. */
    .gpet-principles__container { padding-left: 0; padding-right: 0; }
    .gpet-principles__title { font-size: clamp(28px, 6vw, 36px); }
    /* Mobile: ventana de scroll ≈ 2 cards (card ~128 + gap 15 → 2*128 + 15 = 271 + padding). */
    .gpet-principles__list-wrap { max-height: 340px; }
    .gpet-principles__list { max-height: 340px; }
    .gpet-principle { padding: 20px; gap: 16px; min-height: 120px; }
    .gpet-principle.is-active { min-height: 136px; padding: 22px 22px; }
    .gpet-principle__icon, .gpet-principle.is-active .gpet-principle__icon { width: 56px; height: 56px; flex: 0 0 56px; }
    .gpet-principle__icon svg, .gpet-principle.is-active .gpet-principle__icon svg { width: 28px; height: 28px; }
    .gpet-principle__name, .gpet-principle.is-active .gpet-principle__name { font-size: 20px; }
    /* En mobile la imagen del panel baja a 170px para no quedar tan alta. */
    .gpet-principle-panel__image { height: 170px; }
    .gpet-principle-panel__content { padding: 28px 24px; }
    .gpet-principle-panel__title { font-size: 24px; }
    .gpet-principle-panel__text { font-size: 17px; line-height: 24px; }
}

/* ==========================================================================
   Living According — GRPD-76
   Sección oscura con encabezado centrado + 3 sub-bloques (Core Values,
   Our Reputation, Our Responsibility). Fondo #220C35 con luces blur
   azules y logos GPET rotados como watermarks decorativos.
   ========================================================================== */
.gpet-section--living {
    position: relative;
    background: #220C35;
    color: var(--gpet-white);
    overflow: hidden;
    padding: 154px 24px 154px;
    isolation: isolate;
}

/* ----- Capas decorativas de fondo ----- */
.gpet-living__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.gpet-living__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
}
.gpet-living__glow--top {
    /* Reducido respecto al Figma para que no domine la esquina superior derecha. */
    width: 480px;
    height: 860px;
    background: rgba(25, 79, 144, 0.20);
    top: -260px;
    left: 62%;
    transform: rotate(84.66deg);
    transform-origin: center;
}
.gpet-living__glow--bottom {
    width: 649px;
    height: 1172px;
    background: rgba(25, 79, 144, 0.10);
    top: 1408px;
    left: -626px;
    transform: rotate(-40.27deg);
    transform-origin: center;
}
.gpet-living__watermark {
    position: absolute;
    pointer-events: none;
    /* Las shapes ya traen su stroke color baked-in (rojo / azul / blanco)
       y dos de ellas un blur Gaussiano interno. Reducimos opacidad solo
       lo suficiente para que sean decorativas y no compitan con el texto. */
    opacity: 0.55;
}
.gpet-living__watermark img {
    display: block;
    width: 100%;
    height: auto;
}
/* Cada watermark queda PEGADO al borde correspondiente del viewport.
   Las rotaciones del Figma ya vienen baked-in en los paths del SVG,
   por eso no se aplica `transform: rotate(...)` aquí.
   El ancho usa el tamaño natural del SVG (igual al frame del Figma). */

/* Top-right: shape ROJA (#E4002B) — Figma node 178:1326, w=410, h=448. */
.gpet-living__watermark--top-right {
    width: 410px;
    top: 193px;
    right: 0;
    left: auto;
}
/* Mid-left: shape AZUL (#005697) — Figma node 178:1317, w=419, h=580. */
.gpet-living__watermark--mid-left {
    width: 419px;
    top: 813px;
    left: 0;
    right: auto;
}
/* Bottom-right: shape BLANCA — Figma node 178:1315, w=414, h=557. */
.gpet-living__watermark--bottom-right {
    width: 414px;
    top: 1274px;
    right: 0;
    left: auto;
}

/* ----- Container y header ----- */
.gpet-living__container {
    position: relative;
    z-index: 1;
    max-width: 1079px;
    margin: 0 auto;
}
.gpet-living__head {
    text-align: center;
    margin-bottom: 144px;   /* el Figma da 444 top + 96 entre eyebrow/blocks; aquí lo medimos visual */
}
.gpet-living__eyebrow {
    margin: 0 0 12px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--gpet-blue);
}
.gpet-living__title {
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: var(--gpet-white);
    text-transform: capitalize;
}

/* ----- Bloques (sub-secciones) ----- */
.gpet-living__blocks {
    display: flex;
    flex-direction: column;
    gap: 96px;
}
.gpet-living-block {
    position: relative;
    width: 797px;
    max-width: 100%;
}
.gpet-living-block--left  { margin-right: auto; }
.gpet-living-block--right { margin-left: auto; }

.gpet-living-block__quote {
    /* Icono decorativo en la esquina superior izquierda del bloque —
       versión original: blanco con opacidad 5% (efecto marca de agua sutil). */
    position: absolute;
    top: -16px;
    left: -16px;
    width: 64px;
    height: 64px;
    color: var(--gpet-white);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
.gpet-living-block__quote svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gpet-living-block__head {
    position: relative;
    margin-bottom: 32px;
    z-index: 1;
}
.gpet-living-block__title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    color: var(--gpet-white);
}
.gpet-living-block__line {
    display: block;
    width: 80px;
    height: 4px;
    margin-top: 16px;
    border-radius: 9999px;
    /* Gradiente vertical (180deg) del azul al transparente — spec del cliente. */
    background: linear-gradient(180deg, #005697 0%, rgba(0, 0, 0, 0.00) 100%);
}

.gpet-living-block__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 26px;
}
/* Aplica los estilos del párrafo a TODOS los <p> dentro del body
   (tanto los generados por wpautop como cualquiera con la clase legacy). */
.gpet-living-block__body p,
.gpet-living-block__p {
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 300;
    font-size: 20px;
    line-height: 32.5px;
    letter-spacing: 0.5px;
    color: #D1D5DC;
}

/* ----- Separador entre bloques ----- */
.gpet-living__divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 86, 151, 0.30) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .gpet-section--living { padding: 110px 24px; }
    .gpet-living__head { margin-bottom: 96px; }
    .gpet-living__blocks { gap: 72px; }
    .gpet-living-block { width: 100%; }
    /* En tablet alineamos todos los bloques a la izquierda — alinear a la
       derecha con margins ya no aporta nada visual en una columna estrecha. */
    .gpet-living-block--right { margin-left: 0; margin-right: auto; }
    /* Tablet: shapes proporcionalmente más chicas, pegadas al borde. */
    .gpet-living__watermark--top-right    { width: 320px; top: 120px;  left: auto; right: 0; }
    .gpet-living__watermark--mid-left     { width: 320px; top: 700px;  left: 0;    right: auto; }
    .gpet-living__watermark--bottom-right { width: 320px; top: 1100px; left: auto; right: 0; }
}
@media (max-width: 700px) {
    .gpet-section--living { padding: 80px 20px; }
    .gpet-living__head { margin-bottom: 64px; }
    .gpet-living__eyebrow { font-size: 13px; }
    .gpet-living__title { font-size: clamp(28px, 7vw, 36px); }
    .gpet-living__blocks { gap: 56px; }
    .gpet-living-block__title { font-size: 26px; line-height: 36px; }
    .gpet-living-block__head { margin-bottom: 24px; }
    .gpet-living-block__body { padding-left: 18px; gap: 18px; }
    .gpet-living-block__body p,
    .gpet-living-block__p { font-size: 17px; line-height: 28px; }
    .gpet-living-block__quote { width: 48px; height: 48px; top: -12px; left: -12px; }
    /* Suavizar las luces blur y achicar watermarks en mobile para que no
       pesen tanto visualmente sobre el texto. */
    .gpet-living__glow--top    { width: 460px; height: 700px; }
    .gpet-living__glow--bottom { width: 420px; height: 700px; top: 60%; }
    .gpet-living__watermark { opacity: 0.35; }
    .gpet-living__watermark--top-right    { width: 200px; top: 60px;          left: auto; right: 0; }
    .gpet-living__watermark--mid-left     { width: 220px; top: 45%;           left: 0;    right: auto; }
    .gpet-living__watermark--bottom-right { width: 220px; top: auto; bottom: 80px; left: auto; right: 0; }
}

/* ==========================================================================
   Contact Us — GRPD-77
   2 columnas: info card oscura con gradiente + formulario sobre fondo claro.
   Datos de contacto (phone/email/address) son clickeables.
   ========================================================================== */
.gpet-section--contact {
    background: #EEF3F7;
    padding: 96px 24px;
}
.gpet-contact__container {
    /* `width: 100%` + `max-width` evita que un hijo nowrap (subtitulo) expanda
       el container; así el form layout debajo se queda centrado a 1079px aunque
       el subtítulo se asome visualmente fuera por los lados. */
    width: 100%;
    max-width: 1079px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.gpet-contact__head {
    /* `min-width: 0` evita que un hijo nowrap (el subtítulo) fuerce el ancho
       intrínseco del head a expandirse más allá de su parent. */
    min-width: 0;
}
.gpet-contact__subtitle {
    /* Confina el subtítulo al ancho del parent para no romper el layout,
       pero como `overflow: visible` está por defecto, el texto en nowrap
       se asoma visualmente sin afectar las dimensiones del container. */
    max-width: 100% !important;
}
@media (max-width: 1280px) {
    .gpet-contact__subtitle {
        /* En tablet/mobile no necesitamos el truco — el texto vuelve a wrap. */
        max-width: 900px !important;
    }
}

/* ----- Header centrado ----- */
.gpet-contact__head {
    text-align: center;
    margin-bottom: 56px;
}
.gpet-contact__eyebrow {
    margin: 0 0 12px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--gpet-red);
}
.gpet-contact__title {
    margin: 0 0 16px;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: var(--gpet-purple);
}
.gpet-contact__subtitle {
    margin: 0 auto;
    /* Sin max-width en desktop + nowrap → todo en una sola línea (aunque
       el texto se extienda más allá del container de 1047px). El media
       query de abajo restaura el wrap en pantallas más chicas para que
       no genere scroll horizontal en tablet/mobile. */
    max-width: none;
    white-space: nowrap;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: var(--gpet-gray-text);
}
@media (max-width: 1280px) {
    .gpet-contact__subtitle {
        white-space: normal;
        max-width: 900px;
    }
}

/* ----- Layout 2 columnas ----- */
.gpet-contact__layout {
    display: grid;
    grid-template-columns: 317px 1fr;
    gap: 48px;
    align-items: stretch;
}

/* ----- Info card (aside oscuro) ----- */
.gpet-contact__info {
    background: linear-gradient(180deg, #220C35 0%, #005697 100%);
    border-radius: 16px;
    padding: 32px;
    color: var(--gpet-white);
    min-height: 535px;
    box-sizing: border-box;
}
.gpet-contact__info-title {
    margin: 0 0 55px;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.07px;
    color: var(--gpet-white);
}
.gpet-contact__info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.gpet-contact__info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.gpet-contact__info-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gpet-white);
}
.gpet-contact__info-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}
.gpet-contact__info-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.gpet-contact__info-label {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 4px;
}
.gpet-contact__info-value {
    display: block;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    color: var(--gpet-white);
    text-decoration: none;
    transition: color 180ms var(--gpet-ease);
}
a.gpet-contact__info-value:hover,
a.gpet-contact__info-value:focus-visible {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}
.gpet-contact__info-link {
    /* Wrapper de la dirección cuando hay URL (Google Maps). */
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}
.gpet-contact__info-link:hover .gpet-contact__info-value,
.gpet-contact__info-link:focus-visible .gpet-contact__info-value {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

/* ----- Formulario (columna derecha) ----- */
.gpet-contact__form-wrapper {
    background: #F9FAFB;
    border-radius: 16px;
    padding: 48px;
    min-height: 535px;
    box-sizing: border-box;
}
.gpet-contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.gpet-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.gpet-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.gpet-contact-form__field label {
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: var(--gpet-purple);
}
.gpet-contact-form__required {
    color: var(--gpet-red);
    margin-left: 2px;
}
.gpet-contact-form__field input,
.gpet-contact-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.31px;
    color: var(--gpet-purple);
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 180ms var(--gpet-ease), box-shadow 180ms var(--gpet-ease);
}
.gpet-contact-form__field input {
    height: 54px;
}
.gpet-contact-form__field textarea {
    min-height: 119px;
    line-height: 24px;
    resize: vertical;
}
.gpet-contact-form__field input::placeholder,
.gpet-contact-form__field textarea::placeholder {
    color: rgba(10, 10, 10, 0.50);
}
.gpet-contact-form__field input:focus,
.gpet-contact-form__field textarea:focus {
    outline: none;
    border-color: var(--gpet-blue);
    box-shadow: 0 0 0 3px rgba(0, 86, 151, 0.15);
}

/* Botón "Send Message" — gradiente rojo full-width con sombra y flecha. */
.gpet-contact-form__actions { margin: 0; }
.gpet-contact-form__submit {
    width: 100%;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, #E4002B 0%, #C40025 100%);
    color: var(--gpet-white);
    border: 0;
    border-radius: 14px;
    font-family: 'Inter', var(--gpet-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    cursor: pointer;
    box-shadow: 0 10px 7.5px rgba(228, 0, 43, 0.30),
                0 4px 3px   rgba(228, 0, 43, 0.30);
    transition: transform 180ms var(--gpet-ease), box-shadow 180ms var(--gpet-ease);
}
.gpet-contact-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 14px rgba(228, 0, 43, 0.35),
                0 4px 4px   rgba(228, 0, 43, 0.35);
}
.gpet-contact-form__submit:active { transform: translateY(0); }
.gpet-contact-form__submit:disabled { opacity: 0.7; cursor: wait; transform: none; }
.gpet-contact-form__submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--gpet-white);
}
.gpet-contact-form__submit-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Mensajes de estado (success / error) inyectados por contact-form.js. */
.gpet-contact-form__status:empty { display: none; }
.gpet-contact-form__status {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    font-family: 'Inter', var(--gpet-font-body);
    font-size: 14px;
    line-height: 1.45;
}
.gpet-contact-form__status.is-success {
    background: rgba(34, 197, 94, 0.10);
    color: #14532D;
    border: 1px solid rgba(34, 197, 94, 0.30);
}
.gpet-contact-form__status.is-error {
    background: rgba(228, 0, 43, 0.08);
    color: #7F1D1D;
    border: 1px solid rgba(228, 0, 43, 0.30);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
    .gpet-contact__layout {
        grid-template-columns: 1fr;
        gap: 32px;
        /* Centramos los items para que la info card no quede pegada a la izquierda. */
        justify-items: center;
    }
    .gpet-contact__info,
    .gpet-contact__form-wrapper { min-height: 0; }
    /* La info card pasa a tener ancho auto centrado en mobile, en vez de ocupar
       todo el ancho del grid cell. El form sí mantiene full-width porque
       necesita espacio para los inputs. */
    .gpet-contact__info {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }
    .gpet-contact__form-wrapper {
        width: 100%;
    }
    .gpet-contact__info-list { gap: 48px; }
    .gpet-contact__info-title { margin-bottom: 32px; }
    .gpet-contact__title { font-size: 40px; }
}
@media (max-width: 700px) {
    .gpet-section--contact { padding: 64px 20px; }
    .gpet-contact__head { margin-bottom: 40px; }
    .gpet-contact__title { font-size: clamp(28px, 7vw, 36px); }
    .gpet-contact__subtitle { font-size: 17px; }
    .gpet-contact__info { padding: 28px 24px; }
    .gpet-contact__form-wrapper { padding: 28px 24px; }
    .gpet-contact-form__row { grid-template-columns: 1fr; gap: 16px; }
    .gpet-contact-form { gap: 16px; }
    .gpet-contact-form__field input { height: 52px; }
}

/* ==========================================================================
   Footer global — GRPD-78
   3 zonas: top (logo izq | nav center | social der), línea, bottom (copy | wordmark).
   Fondo color sólido oscuro #220C35.
   ========================================================================== */
.gpet-site-footer {
    background: #220C35;
    color: var(--gpet-white);
    padding: 58px 100px 50px;
}
.gpet-site-footer__container {
    max-width: 1401px;
    margin: 0 auto;
}

/* ----- Zona superior: 3 columnas (logo | nav | social) ----- */
.gpet-site-footer__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
    min-height: 60px;
}

/* Logo izq */
.gpet-site-footer__brand-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    color: inherit;
}
.gpet-site-footer__logo {
    display: block;
    width: auto;
    max-height: 60px;
    height: auto;
}
.gpet-site-footer__brand-text {
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--gpet-white);
}

/* Nav center */
.gpet-site-footer__nav {
    display: flex;
    justify-content: center;
}
.gpet-site-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 97px;
}
.gpet-site-footer__nav-list li { margin: 0; }
.gpet-site-footer__nav-list a {
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.512;
    letter-spacing: 0.52px;
    text-transform: capitalize;
    color: var(--gpet-white);
    text-decoration: none;
    transition: opacity 180ms var(--gpet-ease);
}
.gpet-site-footer__nav-list a:hover,
.gpet-site-footer__nav-list a:focus-visible { opacity: 0.7; }

/* Social der */
.gpet-site-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 22px;
}
.gpet-site-footer__social li { margin: 0; }
.gpet-site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--gpet-white);
    text-decoration: none;
    transition: opacity 180ms var(--gpet-ease), transform 180ms var(--gpet-ease);
}
.gpet-site-footer__social-link:hover,
.gpet-site-footer__social-link:focus-visible {
    opacity: 0.75;
    transform: translateY(-2px);
}
.gpet-site-footer__social-link svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ----- Línea separadora ----- */
.gpet-site-footer__divider {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.9);
    margin: 45px 0 25px;
}

/* ----- Zona inferior: copyright izq + wordmark der ----- */
.gpet-site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 36px;
}
.gpet-site-footer__copyright {
    margin: 0;
    font-family: 'Josefin Sans', var(--gpet-font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.52px;
    color: var(--gpet-white);
}
.gpet-site-footer__wordmark { line-height: 0; }
.gpet-site-footer__wordmark-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    transition: opacity 180ms var(--gpet-ease);
}
.gpet-site-footer__wordmark-link:hover,
.gpet-site-footer__wordmark-link:focus-visible { opacity: 0.75; }
.gpet-site-footer__wordmark-img {
    display: block;
    width: auto;
    max-height: 30px;
    height: auto;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .gpet-site-footer { padding: 48px 40px 36px; }
    /* En tablet la nav baja a una línea propia para que no se aplaste con el logo y las redes. */
    .gpet-site-footer__top {
        grid-template-columns: auto auto;
        grid-template-areas:
            "brand social"
            "nav   nav";
        row-gap: 28px;
        column-gap: 24px;
    }
    .gpet-site-footer__brand { grid-area: brand; }
    .gpet-site-footer__social { grid-area: social; justify-self: end; }
    .gpet-site-footer__nav { grid-area: nav; }
    .gpet-site-footer__nav-list { gap: 32px; }
    .gpet-site-footer__divider { margin: 32px 0 20px; }
}
@media (max-width: 700px) {
    .gpet-site-footer { padding: 40px 24px 32px; }
    .gpet-site-footer__top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "nav"
            "social";
        row-gap: 24px;
        justify-items: center;
    }
    .gpet-site-footer__social { justify-self: center; }
    .gpet-site-footer__nav-list { gap: 20px 32px; }
    .gpet-site-footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .gpet-site-footer__copyright { font-size: 13px; }
}