/* =====================================================
   TEU — Home
   Tipos: Roboto Condensed (titulares) · Montserrat (texto)
   Color: rojo TEU #FF0000
   ===================================================== */

:root{
    --red:#FF0000;
    --red-hover:#d40000;
    --black:#0a0a0a;
    --black-soft:#111;
    --white:#fff;
    --grey-100:#f5f5f5;
    --grey-200:#ececec;
    --grey-500:#8a8a8a;
    --grey-800:#1a1a1a;
    --text:#222;

    --font-h:'Roboto Condensed', system-ui, sans-serif;
    --font-b:'Montserrat', system-ui, sans-serif;

    /* Escala de tipografía: el spec marca H1 100px, pero a esa escala el bloque
       compite visualmente con el resto de la página. Bajamos el tope del H1
       a ~76px (más legible y estándar para hero web). */
    --fs-h1:clamp(2.25rem, 10vw, 5.75rem);    /* 36 → 76px */
    --fs-h2:clamp(2rem, 4.8vw, 4.375rem);    /* 70px  */
    --fs-h3:clamp(1.1rem, 1.3vw, 1.35rem);
    --fs-body:clamp(1rem, 1.45vw, 1.5rem);   /* 28px tope a 1920+ */
    --fs-body-sm:clamp(.9rem, 1.5vw, 1.5rem);

    --container:1240px;
    --radius:6px;
    --transition:.3s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-b);
    font-size:var(--fs-body-sm);
    color:var(--text);
    line-height:1.55;
    background:#fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

h1,h2,h3{
    font-family:var(--font-h);
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.5px;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}

p{font-size:var(--fs-body-sm)}

.container{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:24px;
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.95rem 1.6rem;
    border-radius:var(--radius);
    font-family:var(--font-b);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    transition:transform var(--transition), background-color var(--transition), box-shadow var(--transition);
    cursor:pointer;
    white-space:nowrap;
}
.btn-primary{
    background:var(--red);
    color:#fff;
    box-shadow:0 6px 18px rgba(255,0,0,.18);
}
.btn-primary:hover{background:var(--red-hover);transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,0,0,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-block{display:flex;width:100%}

/* =====================================================
   HEADER
   ===================================================== */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    transition:background var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled{box-shadow:0 6px 18px rgba(0,0,0,.06)}

/* =====================================================
   HEADER — variante overlay (transparente sobre hero oscuro)
   Aplica en Productos, Nosotros y Contacto.
   Al hacer scroll (.is-scrolled) vuelve a fondo blanco.
   ===================================================== */
.page-productos .site-header,
.page-nosotros  .site-header,
.page-contacto  .site-header,
.page-pov       .site-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    background:transparent;
    box-shadow:none;
}
/* Texto del menú en blanco mientras el header está sobre el hero oscuro */
.page-productos .site-header:not(.is-scrolled) .primary-nav a,
.page-nosotros  .site-header:not(.is-scrolled) .primary-nav a,
.page-contacto  .site-header:not(.is-scrolled) .primary-nav a,
.page-pov       .site-header:not(.is-scrolled) .primary-nav a{color:#fff}
.page-productos .site-header:not(.is-scrolled) .primary-nav a.is-active,
.page-nosotros  .site-header:not(.is-scrolled) .primary-nav a.is-active,
.page-contacto  .site-header:not(.is-scrolled) .primary-nav a.is-active,
.page-pov       .site-header:not(.is-scrolled) .primary-nav a.is-active{color:var(--red)}
.page-productos .site-header:not(.is-scrolled) .nav-toggle span,
.page-nosotros  .site-header:not(.is-scrolled) .nav-toggle span,
.page-contacto  .site-header:not(.is-scrolled) .nav-toggle span,
.page-pov       .site-header:not(.is-scrolled) .nav-toggle span{background:#fff}

/* Cuando el usuario hace scroll: se pega al top con fondo blanco */
.page-productos .site-header.is-scrolled,
.page-nosotros  .site-header.is-scrolled,
.page-contacto  .site-header.is-scrolled,
.page-pov       .site-header.is-scrolled{
    position:fixed;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    animation:headerSlideDown .25s ease both;
}
@keyframes headerSlideDown{
    from{transform:translateY(-100%)}
    to  {transform:translateY(0)}
}
/* Para evitar que el contenido salte cuando el header se vuelve fixed,
   reservamos espacio con un pseudo-marcador en el body. */
.page-productos.is-header-fixed,
.page-nosotros.is-header-fixed,
.page-contacto.is-header-fixed{padding-top:0}

.header-inner{
    display:flex;
    align-items:center;
    gap:1.5rem;
    padding-block:18px;
}
.logo img{height:44px;width:auto}

.primary-nav{flex:1}
.primary-nav ul{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    gap:1rem;
    list-style:none;
    width:100%;
}
.primary-nav a{
    font-family:var(--font-b);
    font-weight:700;
    font-size:.95rem;
    letter-spacing:.05em;
    color:var(--black);
    position:relative;
    padding-block:6px;
}
.primary-nav a::after{
    content:'';
    position:absolute;
    inset:auto 0 0 0;
    height:2px;
    background:var(--red);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--transition);
}
.primary-nav a:hover::after{transform:scaleX(1)}
.primary-nav a.is-active{color:var(--red)}
.primary-nav a.is-active::after{transform:scaleX(1)}

.btn-phone{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    background:var(--red);
    color:#fff;
    padding:.75rem 1.6rem;
    border-radius:var(--radius);
    font-weight:700;
    font-size:1rem;
    letter-spacing:.02em;
    transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow:0 4px 14px rgba(255,0,0,.18);
}
.btn-phone:hover{background:var(--red-hover);transform:translateY(-1px)}
.btn-phone__icon{display:inline-flex;align-items:center;justify-content:center;color:#fff;line-height:0}
.btn-phone__icon svg{width:26px;height:26px}

.nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    margin-left:auto;
    padding:.5rem;
}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--black);border-radius:2px;transition:transform var(--transition), opacity var(--transition)}

/* =====================================================
   HERO — variante oscura (Productos y otras páginas)
   ===================================================== */
.hero--dark{
    position:relative;
    padding-block:0;
    overflow:hidden;
    min-height:520px;
    display:flex;
    align-items:center;
}
.hero--dark__bg{
    position:absolute;
    inset:0;
    z-index:0;
}
.hero--dark__bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
    display:block;
}
.hero--dark__bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to right, rgba(0,0,0,.82) 50%, rgba(0,0,0,.35) 100%);
}
.hero-inner--left{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    padding-block:80px;
}
.hero--dark .hero-copy h1{color:#fff;margin-bottom:1.25rem}
.hero--dark .hero-copy p{color:#ddd;margin-bottom:2rem;max-width:44ch}

/* =====================================================
   HERO — home (fondo blanco)
   ===================================================== */
.hero{background:#fff;padding-block:40px 80px;overflow:hidden}
.hero-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:1.5rem;
    min-height:560px;
}
.hero-copy h1{margin-bottom:1.25rem}
.hero-copy p{
    font-size:var(--fs-body-sm);
    color:#3a3a3a;
    margin-bottom:1.8rem;
    max-width:42ch;
}
.hero-image{position:relative}
.hero-image img{width:100%;max-height:560px;object-fit:contain;object-position:right bottom}

/* =====================================================
   MÁS QUE UN MONTACARGAS
   ===================================================== */
.more-than{background:var(--black);color:#fff;padding-block:90px}
.more-than__grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:3rem;
    align-items:center;
}
.more-than__image img{width:100%;height:auto;border-radius:2px}
.more-than__copy h2{margin-bottom:1.5rem}
.more-than__copy h2 .accent{color:var(--red);display:inline-block;margin-top:.35rem;font-size:.55em;letter-spacing:.5px}
.more-than__copy p{color:#dcdcdc;margin-bottom:1rem;font-size:var(--fs-body-sm)}
.more-than__copy p strong{color:#fff}

/* =====================================================
   PRODUCTOS
   ===================================================== */
.products{background:#fff;padding-block:60px}
.products .btn-primary{width: 50%; margin: 0 auto;}
.section-title{text-align:center;margin-bottom:2.5rem}

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
    margin-bottom:2rem;
}
.product-card{
    border:2px solid var(--red);
    border-radius:2px;
    aspect-ratio:3/4;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.75rem 1.5rem;
    background:#fff;
    transition:transform var(--transition), box-shadow var(--transition);
}
.product-card img{width:100%;height:100%;object-fit:contain;transition:transform var(--transition)}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(255,0,0,.12)}
.product-card:hover img{transform:scale(1.05)}

/* =====================================================
   SOLUCIONES
   ===================================================== */
.solutions{
    position:relative;
    background:url('../img/back-texture.png') center/cover no-repeat;
    color:#fff;
    padding-block:70px 80px;
    overflow:hidden;
}
/* Capa negra que cubre arriba y se desvanece hacia abajo */
.solutions::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, var(--black) 40%, rgba(10,10,10,0) 100%);
    pointer-events:none;
    z-index:0;
}
.solutions > .container{position:relative;z-index:1}
.solutions__header{text-align:center;margin-bottom:2.5rem}
.solutions__header h2{margin-bottom:1.5rem}
.solutions__title-strong{display:inline-block;font-weight:700}
.solutions__header p{color:#d0d0d0;max-width:620px;margin-inline:auto;font-size:var(--fs-body-sm)}

.solutions-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    margin-bottom:0;
}
.solution-card{display:flex;flex-direction:column;gap:1rem}
.solution-card__img{
    aspect-ratio:3/5;
    overflow:hidden;
    border-radius:2px;
    background:#222;
}
.solution-card__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}
.solution-card:hover .solution-card__img img{transform:scale(1.06)}
.solution-card h3{
    font-size:.95rem;
    line-height:1.25;
    letter-spacing:.04em;
    text-align:center;
    color:#fff;
    font-weight:700;
}

/* =====================================================
   CLIENTES
   ===================================================== */
.clients-section{
    position:relative;
    background:url('../img/back-texture.png') center/cover no-repeat;
    padding-block:70px;
    overflow:hidden;
}
/* Capa blanca sobre la textura */
.clients-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.82);
    pointer-events:none;
}
.clients-section > .container{position:relative;z-index:1}

.clients{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
    flex-wrap:wrap;
}
.clients__title{
    font-family:var(--font-h);
    font-weight:700;
    font-size:clamp(1.5rem,2.4vw,2.2rem);
    line-height:1.1;
    text-transform:none;
    color:var(--black);
    text-align:right;
}
.clients__title strong{color:var(--black)}
.clients__logos img{max-height:100px;width:auto}

/* =====================================================
   CONTACTO
   ===================================================== */
.contact{
    background:var(--black);
    padding-block:80px;
}

.contact-card{
    background:#fff;
    border-radius:10px;
    padding:2.5rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;
    gap:1.5rem 2rem;
    align-items:start;
    box-shadow:0 40px 80px rgba(0,0,0,.5);
}

/* Fila 1 col 1: título */
.contact-card__title{
    grid-column:1;
    grid-row:1;
    color:var(--black);
    text-transform:none;
    line-height:1.1;
    font-size:clamp(1.8rem, 2.8vw, 2.6rem);
    align-self:center;
}

/* Fila 1 col 2: descripción */
.contact-card__lead{
    grid-column:2;
    grid-row:1;
    color:#555;
    font-size:var(--fs-body-sm);
    align-self:center;
}

/* Fila 2 col 1: form */
.contact-form{
    grid-column:1;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr;
    gap:.7rem;
}

.form-field input, .form-field select{
    width:100%;
    padding:.85rem 1rem;
    border:1px solid #d6d6d6;
    border-radius:var(--radius);
    background:#fff;
    font:inherit;
    color:var(--text);
    transition:border-color var(--transition), box-shadow var(--transition);
}
.form-field input::placeholder{color:#9a9a9a}
.form-field input:focus, .form-field select:focus{
    outline:0;
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(255,0,0,.12);
}
.form-field--select{position:relative}
.form-field--select::after{
    content:'';
    position:absolute;
    right:1rem; top:50%;
    width:8px; height:8px;
    border-right:2px solid #555;
    border-bottom:2px solid #555;
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
}
.form-field select{appearance:none;-webkit-appearance:none;padding-right:2.5rem}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form-feedback{min-height:1.2em;font-size:.9rem;text-align:center;margin-top:.25rem}
.form-feedback.is-success{color:#0a7c2f}
.form-feedback.is-error{color:#c80000}

/* Fila 2 col 2: imagen con botones encima */
.contact-card__aside{
    grid-column:2;
    grid-row:2;
    position:relative;
    border-radius:8px;
    overflow:hidden;
    min-height:240px;
}
.contact-card__aside img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.contact-card__aside-btns{
    position:absolute;
    inset:auto 1rem 1.25rem;
    display:flex;
    flex-direction:column;
    gap:.65rem;
}
.quick-btn{
    display:block;
    text-align:center;
    border-radius:var(--radius);
    padding:.7rem 1rem;
    font-weight:700;
    font-size:.95rem;
    color:#fff;
    transition:background var(--transition), transform var(--transition);
}
.quick-btn--wa{
    background:var(--red);
}
.quick-btn--mail{
    background:transparent;
    border:2px solid var(--red);
}
.quick-btn:hover{transform:translateY(-2px);background:var(--red-hover)}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
    background:var(--black);
    padding-block:50px 30px;
}
.site-footer__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
}
.site-footer__logo img{
    height:72px;
    width:auto;
}
.site-footer__links{
    display:flex;
    justify-content:space-between;
    width:100%;
    list-style:none;
    font-size:.9rem;
    color:#aaa;
}
.site-footer__links a{color:#aaa}
.site-footer__links a:hover{color:var(--red)}

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease, transform .8s ease;
    transition-delay:var(--d,0s);
    will-change:opacity, transform;
}
.reveal--left{transform:translateX(-32px)}
.reveal--right{transform:translateX(32px)}
.reveal.is-visible{opacity:1;transform:translate(0,0)}

@media (prefers-reduced-motion:reduce){
    .reveal,.reveal--left,.reveal--right{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1024px){
    /* Home hero: apilar imagen arriba del texto y darle ancho completo.
       Antes se mantenía en 2 columnas y la imagen quedaba muy chica. */
    .hero{padding-block:30px 50px}
    .hero-inner{
        min-height:auto;
        grid-template-columns:1fr;
        gap:1.5rem;
        text-align:left;
    }
    .hero-image{order:-1}
    .hero-image img{
        width:100%;
        max-height:none;
        max-width:520px;
        margin-inline:auto;
        object-position:center;
    }
    .products-grid{grid-template-columns:repeat(2,1fr)}
    .solutions-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
    /* Tarjeta contacto: apila todo en una columna */
    .contact-card{
        grid-template-columns:1fr;
        grid-template-rows:auto;
        padding:2rem;
        gap:1.25rem;
    }
    .contact-card__title{grid-column:1;grid-row:auto}
    .contact-card__lead{grid-column:1;grid-row:auto}
    .contact-form{grid-column:1;grid-row:auto}
    .contact-card__aside{grid-column:1;grid-row:auto}
}

@media (max-width:780px){
    .header-inner{flex-wrap:wrap;gap:.75rem}
    .logo img{height:38px}
    .nav-toggle{display:flex;order:3}
    .btn-phone{order:2;margin-left:auto;padding:.5rem .8rem;font-size:.85rem}
    .btn-phone__icon{width:18px;height:18px}
    .btn-phone__icon svg{width:14px;height:14px}

    /* Mobile dropdown: absolute para no empujar contenido + fondo blanco
       (necesario porque el header puede ser transparente sobre el hero) */
    .primary-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        box-shadow:0 12px 24px rgba(0,0,0,.12);
        max-height:0;
        overflow:hidden;
        transition:max-height var(--transition);
        z-index:60;
    }
    .primary-nav.is-open{max-height:320px}
    .primary-nav ul{
        flex-direction:column;
        gap:0;
        padding:.5rem 24px;
        border-top:1px solid #eee;
    }
    .primary-nav a{
        display:block;
        padding:.95rem 0;
        border-bottom:1px solid #f0f0f0;
        color:var(--black);
    }
    .primary-nav ul li:last-child a{border-bottom:0}
    /* En páginas con header overlay, el dropdown ya tiene su propio fondo blanco,
       por lo que los links deben verse en negro (no en blanco como cuando flotan
       sobre el hero). */
    .page-productos .site-header:not(.is-scrolled) .primary-nav a,
    .page-nosotros  .site-header:not(.is-scrolled) .primary-nav a,
    .page-contacto  .site-header:not(.is-scrolled) .primary-nav a,
    .page-pov       .site-header:not(.is-scrolled) .primary-nav a{color:var(--black)}
    .page-productos .site-header:not(.is-scrolled) .primary-nav a.is-active,
    .page-nosotros  .site-header:not(.is-scrolled) .primary-nav a.is-active,
    .page-contacto  .site-header:not(.is-scrolled) .primary-nav a.is-active,
    .page-pov       .site-header:not(.is-scrolled) .primary-nav a.is-active{color:var(--red)}

    .nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
    .nav-toggle.is-open span:nth-child(2){opacity:0}
    .nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

    .hero{padding-block:30px 20px}
    .hero-inner{grid-template-columns:1fr;text-align:left}
    .hero-image{order:-1}
    .hero-image img{max-height:340px;object-position:center}

    .more-than{padding-block:50px}
    .more-than__grid{grid-template-columns:1fr;gap:1.5rem}

    .products{padding-block:50px}
    .section-title{font-size:clamp(1.6rem,6vw,2.1rem)}

    .solutions{padding-block:50px}
    .solutions-grid{grid-template-columns:1fr 1fr}
    .clients{flex-direction:column;gap:1rem;text-align:center}
    .clients__title{text-align:center}

    /* En móvil: form y aside se apilan */
    .contact-card__body{grid-template-columns:1fr}
    .contact-card__aside{min-height:200px}
    .contact-card__left h2{font-size:1.8rem}

    .site-footer__links{justify-content:center;gap:2rem}
}

@media (max-width:480px){
    .container{padding-inline:18px}
    /* En mobile mostramos el botón completo: ícono WhatsApp + número.
       Ajustamos padding/tamaño para que entre cómodo. */
    .btn-phone{padding:.45rem .75rem;font-size:.78rem;gap:.4rem;letter-spacing:0}
    .btn-phone__icon svg{width:16px;height:16px}

    .solutions-grid{grid-template-columns:1fr;gap:1rem}
    .solution-card__img{aspect-ratio:16/10}

    .products-grid{gap:.75rem}
    .product-card{padding:1rem}

    .site-footer__links{flex-direction:column;gap:.5rem;text-align:center}

    /* Hero oscuro móvil */
    .hero--dark{min-height:360px}
    .hero-inner--left{padding-block:60px}
    .hero--dark__bg::after{background:rgba(0,0,0,.7)}

    /* Mas-que-prod móvil */
    .mas-que-prod .solutions-grid{grid-template-columns:1fr 1fr}
}

/* =====================================================
   TICKER / MARQUEE
   ===================================================== */
.ticker{
    background:#F5A623;
    overflow:hidden;
    padding-block:13px;
    white-space:nowrap;
    user-select:none;
}
.ticker-track{
    display:inline-flex;
    align-items:center;
    gap:0;
    animation:ticker-scroll 30s linear infinite;
    will-change:transform;
}
.ticker-track:hover{animation-play-state:paused}

@keyframes ticker-scroll{
    0%  {transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

.ticker-item{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    padding-inline:2rem;
    font-family:var(--font-h);
    font-weight:700;
    font-size:1rem;
    letter-spacing:.04em;
    color:#1a1a1a;
    text-transform:uppercase;
}
.ticker-diamond{
    color:var(--black);
    font-size:1.1rem;
    line-height:1;
}
.ticker-brand{
    font-family:var(--font-h);
    font-weight:700;
    font-size:1.1rem;
    color:var(--black);
}
.ticker-sep{
    font-family:var(--font-b);
    font-weight:500;
    font-size:.9rem;
    color:#333;
    font-style:italic;
}

@media (prefers-reduced-motion:reduce){
    .ticker-track{animation:none}
}

/* =====================================================
   FORZA TEU — sección productos
   ===================================================== */
.forza-teu{background:#fff;padding-block:70px}
.forza-teu__header{text-align:center;margin-bottom:3rem}
.forza-teu__title{
    font-size:clamp(2.5rem,5vw,4.375rem);
    margin-bottom:1rem;
    letter-spacing:.5px;
}
.forza-teu__subtitle{
    font-family:var(--font-b);
    font-weight:700;
    font-size:clamp(1rem,1.6vw,1.25rem);
    color:var(--black);
    margin-bottom:1rem;
    line-height:1.4;
}
.forza-teu__body{
    font-size:var(--fs-body-sm);
    color:#555;
    max-width:68ch;
    margin-inline:auto;
    line-height:1.7;
}

/* Product items con label FUERA del borde rojo */
.products-grid--labeled{margin-bottom:2.5rem}

.product-item{
    display:flex;
    flex-direction:column;
    gap:.9rem;
    align-items:center;
}
/* El card solo contiene la imagen, con borde rojo */
.products-grid--labeled .product-card{
    width:100%;
    aspect-ratio:3/4;
    padding:1.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.products-grid--labeled .product-card img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform var(--transition);
}
.product-item:hover .product-card img{transform:scale(1.04)}
/* Label fuera del borde */
.product-item h3{
    font-size:.78rem;
    letter-spacing:.07em;
    text-align:center;
    color:var(--black);
    line-height:1.35;
    text-transform:uppercase;
}

/* Botón centrado (no full-width) */
.btn-center{
    display:inline-flex;
    margin:0 auto;
}
.forza-teu .btn-center{
    min-width:320px;
    justify-content:center;
}
.forza-teu > .container{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.forza-teu .products-grid--labeled{width:100%}

/* =====================================================
   MÁS QUE UN MONTACARGAS — versión clara (Productos)
   ===================================================== */
.mas-que-prod{
    background:#fff;
    padding-block:70px;
}
.mas-que-prod__header{
    text-align:center;
    margin-bottom:2.5rem;
}
.mas-que-prod__header h2{
    font-size:clamp(2rem,4.8vw,4rem);
    margin-bottom:.6rem;
    line-height:1;
}
.mas-que-prod__sub{
    font-family:var(--font-h);
    font-weight:700;
    font-size:clamp(1.4rem,2.5vw,2rem);
    color:var(--black);
    text-transform:none;
}

/* Cards versión clara */
.solution-card--light .solution-card__img{background:#f0f0f0}
.solution-card--light h3{color:var(--black)}

/* Utilitario de color */
.text-red{color:var(--red)}

/* =====================================================
   RESPONSIVE ADICIONAL (Productos)
   ===================================================== */
@media (max-width:780px){
    .forza-teu{padding-block:50px}
    .mas-que-prod{padding-block:50px}
    .forza-teu .btn-center{min-width:0;width:100%}
}

@media (max-width:480px){
    .products-grid--labeled{grid-template-columns:repeat(2,1fr)}
    .mas-que-prod .solutions-grid{grid-template-columns:1fr 1fr}
}

/* =====================================================
   NOSOTROS — Hero centrado
   ===================================================== */
.hero--nosotros{min-height:420px}
.hero--dark__bg--center::after{
    background:rgba(0,0,0,.75);
}
.hero-inner--center{
    position:relative;
    z-index:1;
    display:flex;
    grid-template-columns:none;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-block:80px;
    min-height:0;
}
.hero-copy--center{
    max-width:none;
    width:100%;
    text-align:center;
}
.hero-copy--center h1{
    color:#fff;
    margin:0 auto;
    font-size:clamp(2.5rem, 7.5vw, 5rem);
    line-height:1.05;
    letter-spacing:.5px;
    text-shadow:0 3px 22px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.55);
}

/* =====================================================
   NOSOTROS — CONFIANZA Y SERVICIO
   ===================================================== */
.confianza{
    background:#fff;
    padding-block:90px;
}
.confianza__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
    margin-bottom:2.5rem;
}
.confianza__title{
    font-size:clamp(2rem, 4.6vw, 3.75rem);
    line-height:1;
    margin-bottom:1.5rem;
    letter-spacing:.5px;
}
.confianza__copy p{
    font-size:clamp(.9rem, 1vw, 1.05rem);
    line-height:1.65;
    color:#333;
    margin-bottom:1rem;
    max-width:52ch;
}
.confianza__copy p:last-child{margin-bottom:0}
.confianza__image{
    position:relative;
    border-radius:6px;
    overflow:hidden;
}
.confianza__image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    aspect-ratio:4/3;
}
.confianza__wide{
    max-width:100%;
    margin-top:1rem;
}
.confianza__wide p{
    font-size:clamp(.9rem, 1vw, 1.05rem);
    line-height:1.65;
    color:#333;
    margin-bottom:1rem;
}
.confianza__wide p:last-child{margin-bottom:0}
.confianza__highlight{
    margin-top:2rem;
    text-align:center;
    font-family:var(--font-b);
    font-weight:700;
    color:var(--red);
    font-size:clamp(1rem, 1.8vw, 1.5rem);
    line-height:1.4;
    max-width:78ch;
    margin-inline:auto;
}

/* =====================================================
   NOSOTROS — MÁS QUE UN MONTACARGAS (con mapa)
   ===================================================== */
.mas-que-mapa{
    background:#fff;
    padding-block:30px 90px;
}
.mas-que-mapa__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
}
.mas-que-mapa__copy h2{
    font-size:clamp(2rem, 4.6vw, 3.75rem);
    line-height:1;
    margin-bottom:.75rem;
    letter-spacing:.5px;
}
.mas-que-mapa__sub{
    font-family:var(--font-b);
    font-weight:700;
    color:var(--red);
    font-size:clamp(1rem, 1.6vw, 1.25rem);
    margin-bottom:1.5rem;
}
.mas-que-mapa__copy p{
    font-size:clamp(.9rem, 1vw, 1.05rem);
    line-height:1.65;
    color:#333;
    margin-bottom:1rem;
    max-width:52ch;
}
.mas-que-mapa__copy p:last-child{margin-bottom:0}
.mas-que-mapa__image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}

/* =====================================================
   RESPONSIVE (Nosotros)
   ===================================================== */
@media (max-width:1024px){
    .confianza,.mas-que-mapa{padding-block:60px}
    .confianza__grid,
    .mas-que-mapa__grid{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .confianza__copy p,
    .mas-que-mapa__copy p{max-width:none}
}

@media (max-width:640px){
    .hero--nosotros{min-height:300px}
    .hero-inner--center{padding-block:50px}
    .confianza,.mas-que-mapa{padding-block:45px}
    .confianza__title,
    .mas-que-mapa__copy h2{font-size:clamp(1.75rem, 9vw, 2.5rem)}
    .confianza__highlight{font-size:1.05rem}
}

/* =====================================================
   CONTACTO — Hero pantalla completa con imagen de fondo
   ===================================================== */
.contact-hero{
    position:relative;
    overflow:hidden;
    padding-block:160px 80px;
    isolation:isolate;
}
.contact-hero__bg{
    position:absolute;
    inset:0;
    z-index:-2;
}
.contact-hero__bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
.contact-hero__bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.95) 45%,
        rgba(0,0,0,.95) 100%);
    z-index:-1;
}
.contact-hero__inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2.5rem;
}
.contact-hero__copy{
    text-align:center;
    max-width:960px;
    margin-inline:auto;
}
.contact-hero__title{
    color:#fff;
    font-size:clamp(1.75rem, 4.2vw, 3.25rem);
    line-height:1.15;
    letter-spacing:.5px;
    text-transform:none;
    margin-bottom:1.25rem;
    text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.contact-hero__title .text-red{
    color:var(--red);
    display:inline-block;
}
.contact-hero__lead{
    color:#f1f1f1;
    font-size:clamp(.95rem, 1.15vw, 1.15rem);
    line-height:1.55;
    max-width:64ch;
    margin-inline:auto;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* ----- Contact card flotante sobre el hero ----- */
.contact-card--floating{
    width:100%;
    max-width:960px;
    margin-inline:auto;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
}

/* Variante simple del aside: sin imagen, solo botones centrados */
.contact-card__aside--simple{
    min-height:0;
    background:transparent;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
}
.contact-card__aside-btns--static{
    position:static;
    inset:auto;
    width:100%;
    max-width:280px;
    margin:0;
}
.contact-card__aside--simple .quick-btn{
    background:var(--red);
}
.contact-card__aside--simple .quick-btn--mail{
    background:transparent;
    color:var(--red);
    border:2px solid var(--red);
}
.contact-card__aside--simple .quick-btn--wa:hover{background:var(--red-hover)}
.contact-card__aside--simple .quick-btn--mail:hover{
    background:var(--red);
    color:#fff;
}

/* ----- Doble email debajo de la card ----- */
.contact-emails{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem 4rem;
    justify-content:space-between;
    width:100%;
    max-width:960px;
    margin-inline:auto;
    padding-inline:.5rem;
}
.contact-email{
    color:#fff;
    font-family:var(--font-b);
    font-weight:600;
    font-size:clamp(.9rem, 1.1vw, 1.1rem);
    letter-spacing:.02em;
    text-shadow:0 2px 10px rgba(0,0,0,.55);
    transition:color var(--transition);
}
.contact-email:hover{color:var(--red)}

/* En contacto, la sección 'contact' por defecto (si existiera) está
   dentro del hero, así que sus padding extras no aplican. */
.page-contacto .contact-hero + .ticker{margin-top:0}

/* =====================================================
   RESPONSIVE (Contacto)
   ===================================================== */
@media (max-width:1024px){
    .contact-hero{padding-block:140px 60px}
    .contact-hero__title{font-size:clamp(1.5rem, 5.5vw, 2.5rem)}
    .contact-hero__title br{display:none}
    .contact-hero__lead br{display:none}
}

@media (max-width:640px){
    .contact-hero{padding-block:120px 40px}
    .contact-hero__inner{gap:1.75rem}
    .contact-hero__title{font-size:clamp(1.25rem, 7vw, 1.85rem)}
    .contact-hero__lead{font-size:.95rem}
    .contact-emails{
        flex-direction:column;
        align-items:center;
        gap:.75rem;
        text-align:center;
    }
    .contact-email{font-size:.85rem;word-break:break-all}
}

/* =====================================================
   POV — vista detalle por categoría (Litio, Combustión, etc.)
   ===================================================== */
.pov-hero{
    position:relative;
    overflow:hidden;
    min-height:480px;
    display:flex;
    align-items:center;
    isolation:isolate;
}
.pov-hero__bg{position:absolute;inset:0;z-index:-2}
.pov-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.pov-hero__bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 100%);
    z-index:-1;
}
.pov-hero__inner{
    position:relative;
    z-index:1;
    padding-block:160px 90px;
    display:flex;
    justify-content:center;
}
.pov-hero__copy{text-align:center;max-width:780px;margin-inline:auto}
.pov-hero__copy h1{
    color:#fff;
    font-size:clamp(2rem, 6vw, 4.5rem);
    line-height:1.05;
    margin-bottom:1.25rem;
    text-shadow:0 3px 16px rgba(0,0,0,.55);
}
.pov-hero__copy p{
    color:#f0f0f0;
    font-size:clamp(.95rem, 1.2vw, 1.2rem);
    line-height:1.55;
    max-width:62ch;
    margin-inline:auto;
    text-shadow:0 2px 10px rgba(0,0,0,.55);
}

/* ----- Carrusel de variantes ----- */
.pov-carousel{background:#fff;padding-block:60px 30px}
.pov-carousel__viewport{
    position:relative;
    display:flex;
    align-items:center;
    gap:1rem;
}
.pov-carousel__track{
    list-style:none;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
    gap:1.25rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:.5rem 0;
    flex:1;
}
.pov-carousel__track::-webkit-scrollbar{display:none}
.pov-card{scroll-snap-align:center}
.pov-card__btn{
    width:100%;
    aspect-ratio:3/4;
    border:2px solid var(--red);
    border-radius:2px;
    background:#fff;
    padding:1.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform var(--transition), box-shadow var(--transition);
}
.pov-card__btn img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform var(--transition);
}
.pov-card:hover .pov-card__btn{transform:translateY(-3px);box-shadow:0 12px 24px rgba(255,0,0,.15)}
.pov-card:hover .pov-card__btn img{transform:scale(1.04)}
.pov-card.is-selected .pov-card__btn{
    box-shadow:0 0 0 3px var(--red), 0 14px 28px rgba(255,0,0,.18);
}
.pov-carousel__nav{
    flex-shrink:0;
    width:46px;
    height:46px;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background var(--transition), transform var(--transition);
    box-shadow:0 6px 14px rgba(255,0,0,.25);
}
.pov-carousel__nav:hover{background:var(--red-hover);transform:scale(1.05)}
.pov-carousel__nav:disabled{opacity:.35;cursor:default;transform:none;background:var(--red)}

/* ----- Pitch (Eficiencia sin pausas) ----- */
.pov-pitch{background:#fff;padding-block:50px 70px}
.pov-pitch__header{text-align:center;margin-bottom:1.5rem}
.pov-pitch__header h2{
    font-size:clamp(1.75rem, 4.2vw, 3rem);
    line-height:1.05;
    letter-spacing:.5px;
}
.pov-pitch__body{
    text-align:center;
    max-width:78ch;
    margin-inline:auto;
    font-size:clamp(.95rem, 1.05vw, 1.1rem);
    line-height:1.7;
    color:#333;
}

/* ----- Ficha técnica ----- */
.pov-spec{
    background:url('../img/back-texture.png') center/cover no-repeat fixed, #f7f7f7;
    padding-block:60px 80px;
    position:relative;
}
.pov-spec::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.86);
    pointer-events:none;
}
.pov-spec > .container{position:relative;z-index:1}
.pov-spec__header{text-align:center;margin-bottom:2.5rem}
.pov-spec__header h2{
    font-size:clamp(1.75rem, 4vw, 2.75rem);
    text-transform:none;
    letter-spacing:.2px;
}
.pov-spec__card{
    border:2px solid var(--red);
    border-radius:4px;
    background:#fff;
    padding:2rem;
    display:grid;
    grid-template-columns:minmax(220px, 320px) 1fr;
    gap:2rem;
    align-items:start;
    max-width:1100px;
    margin-inline:auto;
    box-shadow:0 20px 40px rgba(0,0,0,.06);
}
.pov-spec__model{text-align:center}
.pov-spec__model-name{
    font-size:clamp(1.1rem, 1.5vw, 1.45rem);
    line-height:1.2;
    margin-bottom:1.25rem;
    color:var(--black);
    letter-spacing:.5px;
}
.pov-spec__model-img{
    width:100%;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.5rem;
}
.pov-spec__model-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:opacity .25s ease;
}
.pov-spec__model-img.is-swapping img{opacity:0}

.pov-spec__table-wrap{overflow-x:auto}
.pov-spec__table{
    width:100%;
    border-collapse:collapse;
    font-size:clamp(.85rem, 1vw, 1rem);
}
.pov-spec__table th,
.pov-spec__table td{
    border:1px solid var(--red);
    padding:.85rem 1rem;
    text-align:left;
    vertical-align:middle;
}
.pov-spec__table thead th{
    color:var(--red);
    font-family:var(--font-b);
    font-weight:700;
    text-transform:none;
    letter-spacing:.2px;
    font-size:clamp(.95rem, 1.1vw, 1.15rem);
    background:#fff;
}
.pov-spec__table tbody th{
    font-family:var(--font-b);
    font-weight:700;
    color:var(--black);
    background:#fff;
    text-transform:none;
    letter-spacing:0;
    width:38%;
    font-size:inherit;
}
.pov-spec__table tbody td{color:#333}

/* Botón volver centrado */
.pov-spec__back{text-align:center;margin-top:2.5rem}
.btn-back{min-width:240px;justify-content:center}

/* =====================================================
   RESPONSIVE (POV)
   ===================================================== */
@media (max-width:1024px){
    .pov-carousel__track{
        grid-auto-columns:minmax(220px, 30%);
    }
    .pov-spec__card{
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    .pov-spec__model-img{max-width:280px;margin-inline:auto}
}

@media (max-width:780px){
    .pov-hero{min-height:380px}
    .pov-hero__inner{padding-block:140px 60px}
    .pov-carousel{padding-block:40px 20px}
    .pov-carousel__track{
        grid-auto-columns:minmax(60%, 65%);
        scroll-padding-inline:24px;
    }
    .pov-spec{padding-block:45px 55px;background-attachment:scroll}
    .pov-spec__card{padding:1.25rem}
    .pov-spec__table th,
    .pov-spec__table td{padding:.65rem .75rem}
}

@media (max-width:480px){
    .pov-carousel__track{grid-auto-columns:minmax(75%, 80%)}
    .pov-carousel__nav{width:38px;height:38px}
    .pov-carousel__nav svg{width:18px;height:18px}
    .pov-spec__table{font-size:.82rem}
    .btn-back{width:100%}
}

/* ----- Botón "Saber más" en tarjetas de producto ----- */
.btn-sm{
    padding:.55rem 1.2rem;
    font-size:.78rem;
    letter-spacing:.08em;
}
.product-item__cta{
    margin-top:.25rem;
    min-width:160px;
}
.product-item__cta.is-disabled{
    background:#bbb;
    color:#fff;
    box-shadow:none;
    pointer-events:none;
    opacity:.7;
}
.product-item__cta.is-disabled:hover{transform:none;background:#bbb;box-shadow:none}