/* ============================================================
   JUMPERS X BLAAAASCO — diseño real (1920 full-width desktop)
   Fondo #FF00A7 · Amarillo #FFED00 · Blanco #FEFEFE · Azul #1FA1FF
   Fuente: Futura Condensed Extra Bold (assets/)
   ============================================================ */

@font-face{
  font-family:"Futura PT Cond";
  src:url("../assets/Futura-CondensedExtraBold.ttf") format("truetype");
  font-weight:400 900;      /* cara única extra bold */
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Futura Cond Medium";
  src:url("../assets/futura-condensed-pt-medium-589e44ed1e3a5.otf") format("opentype");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --pink:#FF00A7;
  --yellow:#FFED00;
  --white:#FEFEFE;
  --blue:#1FA1FF;
  --ink:#111;
  --font:"Futura PT Cond","Oswald",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--pink);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.page{width:100%;margin:0 auto;background:var(--pink);position:relative;container-type:inline-size}

/* páginas interiores: fondo azul */
body.interior{background:var(--blue)}
body.interior .page{background:var(--blue)}
/* en interiores, bolsas/estrellas/serrado sobre azul (no rosa) */
body.interior .bags{background:var(--blue)}
body.interior .stars-strip{background:var(--blue)}
body.interior .footer-zig{background-color:var(--blue)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(18px,2cqw,44px) clamp(12px,2cqw,39px) clamp(10px,1cqw,22px);
  text-align:center;
  overflow:hidden;
}
.hero .star{
  position:absolute;
  width:clamp(90px,16.15cqw,310px); /* 310px @1920 */
  pointer-events:none;
  z-index:0;
}
.hero .s1{top:14%; left:9%;  transform:rotate(-4deg)}
.hero .s2{top:1%;  right:15%;transform:rotate(24deg)}
.hero .s3{top:30%; right:2%; transform:rotate(48deg)}

/* logo centrado */
.hero .brand{
  position:relative;
  display:inline-block;
  z-index:2; /* logo por encima del "X BLAAAASCO" */
  transform:translateX(clamp(-50px,-2.5cqw,-22px)); /* logo ligeramente a la izquierda (como Figma) */
}
.hero .logo{
  width:clamp(300px,34cqw,660px);
  position:relative;z-index:1;
}

/* personaje: a la derecha, cerca de la S de BLAAAASCO, sin tocar el logo */
.hero .char{
  position:absolute;
  top:27%;
  right:17%;
  width:clamp(148px,18.23cqw,350px);
  z-index:3;
}

.hero .xline{
  font-family:var(--font);
  color:var(--yellow);
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(44px,13cqw,250px);
  line-height:.8;                       /* 80% */
  letter-spacing:.03em;
  white-space:nowrap;                   /* siempre en una línea */
  margin-top:clamp(-40px,-3cqw,-16px); /* solape con el logo */
  position:relative;z-index:1;
}
.hero .claim{
  color:var(--yellow);
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(18px,2.9cqw,56px); /* reducido un poco */
  letter-spacing:.01em;
  margin-top:clamp(6px,.9cqw,18px);  /* un pelín más de aire hasta el subtítulo */
}
/* enlace al vídeo de @blaaaasco */
.ig-link{color:inherit;text-decoration:none}
.ig-link:hover{text-decoration:underline}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--white);
  color:#E30613;
  text-transform:uppercase;
  font-size:clamp(16px,1.77cqw,34px);
  letter-spacing:.02em;
  padding:clamp(1px,.18cqw,3.5px) 0;
  overflow:hidden;
  white-space:nowrap;
}
.ticker-track{
  display:inline-flex;
  align-items:center;
  will-change:transform;
  /* Entrada: arranca con la mitad izquierda vacía y la derecha ya con el ticker,
     deslizándose a la MISMA velocidad que el bucle (sin tirones), luego carrusel normal. */
  /* intro y bucle a la MISMA velocidad exacta (ambos en % de la cinta):
     42s para 50% -> 8.4s para el 10% del intro. Sin acelerones. */
  animation:ticker-start 8.4s linear forwards, marquee 42s linear 8.4s infinite;
}
.ticker-track span{flex:0 0 auto;padding:0 clamp(24px,3cqw,60px)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}   /* -50% = una mitad = bucle continuo */
}
/* entrada del ticker: contenido desplazado (izquierda ~vacía) -> a su sitio, a la misma velocidad que el bucle */
@keyframes ticker-start{
  from{transform:translateX(33cqw)}  /* ~1/3 de pantalla vacío al entrar (consistente en móvil y escritorio) */
  to{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
}

/* ============================================================
   BLOQUE DE PRODUCTO (imagen azul full-width + texto superpuesto)
   ============================================================ */
.block{
  display:block;
  position:relative;
  background:var(--blue);
  border:clamp(7px,.47cqw,9px) solid var(--yellow);
  border-radius:0;
  margin:clamp(12px,1.4cqw,26px) clamp(12px,1.4cqw,26px);
  overflow:hidden;
}
.block-img img{width:100%;height:auto;display:block}

/* fondo rosa para el bloque de mantequilla */
.block--pink{background:var(--pink)}
.block--pink .block-text h2{white-space:nowrap} /* "DE JUMPERS" en una sola línea */
/* imagen "ampliada" y anclada arriba: más rosa arriba, recorta tostada y bote derecho */
.block--pink .block-img{
  display:block;
  aspect-ratio:3760/1504;          /* misma altura que el bloque del Bol */
  box-sizing:border-box;
  padding-top:clamp(16px,3.65cqw,70px);
  overflow:hidden;
  background:var(--pink);
}
.block--pink .block-img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.03);
  transform-origin:top center;
}

/* salto de línea solo en móvil */
.br-mobile{display:none}

/* bloque pijama: fondo azul propio y "DE JUMPERS" en una línea */
.block--pijama{background:#0097FF}
.block--pijama .block-text h2{white-space:nowrap}

/* estallido "con sabor a JUMPERS" (arriba-derecha) */
.sabor{
  position:absolute;
  top:clamp(14px,2.7cqw,52px);
  right:clamp(20px,4.7cqw,90px);  /* más a la izquierda */
  width:clamp(190px,18.23cqw,350px);
  z-index:3;
}

/* overlay hover: oscurece y muestra botón "Más información" */
.block-hover{
  position:absolute;
  inset:0;
  z-index:5;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .22s ease;
}
.block-consiguelo{
  width:clamp(190px,26cqw,500px);
  transform:translateY(10px) scale(.92);
  transition:transform .25s ease;
}
/* El overlay "consíguelo" es solo para hover real (ratón/trackpad).
   En táctil no hay hover: el tap navega directo al interior del producto. */
@media (hover:hover) and (pointer:fine){
  .block:hover .block-hover{opacity:1}
  .block:hover .block-consiguelo{transform:translateY(0) scale(1)}
}
/* Accesibilidad por teclado (no se dispara con tap táctil) */
.block:focus-visible .block-hover{opacity:1}
.block:focus-visible .block-consiguelo{transform:translateY(0) scale(1)}

.block-text{
  position:absolute;
  left:clamp(20px,2.4cqw,46px);  /* X46 Figma */
  top:clamp(12px,1.46cqw,28px);  /* Y28 Figma */
  max-width:44%;
  z-index:2;
}
.block-text h2{
  font-family:var(--font);
  color:var(--yellow);          /* FFED00 */
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(36px,7.81cqw,150px); /* título un poco más grande */
  line-height:.88;
  letter-spacing:.01em;
  margin-bottom:clamp(8px,1cqw,22px);
  text-shadow:0 3px 10px rgba(0,0,0,.38); /* sombra sutil */
}
.block-text p{
  color:var(--white);           /* FEFEFE */
  text-transform:uppercase;
  font-weight:700;
  font-size:clamp(14px,2.19cqw,42px); /* descripción un pelín más grande */
  line-height:.95;
  max-width:46cqw;   /* saltos controlados con <br> en el HTML */
  text-shadow:0 2px 7px rgba(0,0,0,.38); /* sombra sutil */
}

/* estallido X3 (SVG completo: estallido + bolsita + texto) */
.badge{
  position:absolute;
  right:clamp(0px,0.4cqw,8px);
  bottom:clamp(0px,0.4cqw,8px);
  width:clamp(220px,26cqw,500px);
  z-index:2;
}
.badge img{width:100%}

/* ============================================================
   BANDA DE COLABORACIÓN
   ============================================================ */
.collab{
  position:relative;
  width:100%;
  aspect-ratio:1920/843;
  background:url("../assets/bg_section.svg") center/100% 100% no-repeat;
}
.collab-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,0.8cqw,16px); /* texto más cerca de las caras */
  padding:0 clamp(16px,3cqw,60px);
  transform:translateY(clamp(12px,2.6cqw,50px)); /* menos espacio arriba */
}
.collab-row{
  display:grid;
  grid-template-columns:1fr auto 1fr; /* caras centradas, logo y handle simétricos */
  align-items:center;
  gap:clamp(8px,1.4cqw,26px);
  width:100%;
}
.c-logo{width:clamp(200px,22.9cqw,440px);justify-self:end}
.c-faces{
  position:relative;
  justify-self:center;
  display:flex;
  align-items:flex-end;
  gap:clamp(0px,0.3cqw,6px);
}
.c-face{width:clamp(160px,18.75cqw,360px)}
.c-face + .c-face{
  margin-left:clamp(-64px,-4cqw,-28px); /* caras casi tocándose */
  transform:translateY(clamp(-28px,-1.8cqw,-12px)); /* derecha un pelín más arriba */
}
.c-heart{
  position:absolute;
  top:clamp(-6px,0.3cqw,10px); /* más bajo, cerca de las caras */
  left:50%;
  transform:translateX(-50%);
  width:clamp(22px,2.55cqw,49px);
  z-index:2;
}
.c-handle{
  font-family:var(--font);
  color:var(--yellow);
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(34px,4.7cqw,90px);
  letter-spacing:.01em;
  justify-self:start;
}
/* "X" entre logo y @blaaaasco (solo móvil) */
.c-x{
  display:none;
  font-family:var(--font);
  color:var(--yellow);
  text-transform:uppercase;
  font-weight:800;
  line-height:1;
}
.collab-text{
  font-family:var(--font);
  color:var(--yellow);
  font-weight:800;
  text-align:center;
  font-size:clamp(19px,2.4cqw,46px);
  line-height:1.02;
}

/* ============================================================
   MARQUESINA DE BOLSAS
   ============================================================ */
.bags{
  overflow:hidden;
  background:var(--pink);
  padding-top:clamp(16px,2.6cqw,50px);    /* espacio arriba */
  padding-bottom:clamp(30px,4.5cqw,86px);
  margin-top:-4px; /* solapa la sección anterior: sin costura ni al hacer zoom */
}
.bags-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:0;
  animation:marquee 48s linear infinite;
}
.bag{height:clamp(324px,42.3cqw,810px);width:auto;flex:0 0 auto} /* -10% */
.bag + .bag{margin-left:clamp(-46px,-3.4cqw,-20px)} /* bolsas solapadas */
@media(prefers-reduced-motion:reduce){.bags-track{animation:none}}

/* ============================================================
   PÁGINA INTERIOR (producto)
   ============================================================ */
.prod{padding:clamp(12px,1.4cqw,26px);position:relative} /* mismo margen que los bloques de la home */
.prod-grid{
  display:grid;
  grid-template-columns:1167fr 693fr; /* proporción real de Figma */
  column-gap:clamp(12px,1.04cqw,20px);
  align-items:start;
}

/* --- izquierda --- */
.prod-frame{
  position:relative;
  border:clamp(5px,.5cqw,9px) solid var(--yellow);
  line-height:0;
}
.prod-frame img:not(.prod-x3){width:100%}
.prod-x3{
  position:absolute;
  right:clamp(-10px,-0.6cqw,-2px);
  bottom:0;
  width:clamp(210px,29.7cqw,570px); /* 570px @1920 */
  line-height:normal;
}
.prod-tenemos{
  margin-top:clamp(-40px,-2.5cqw,-16px); /* un poco más arriba */
  padding-top:clamp(13px,1.3cqw,25px);
}
.t-burst{width:clamp(360px,49.48cqw,950px)} /* 950px @1920 */
/* sello anclado al fondo de la sección (constante al achicar) */
.t-sello{
  position:absolute;
  left:39.1cqw;                    /* zona derecha de la columna imagen */
  bottom:clamp(-170px,-7.8cqw,-90px); /* rozando/solapando las bolsas de abajo */
  width:clamp(120px,16cqw,300px);
  z-index:20;                      /* por encima de las bolsas */
}

/* --- derecha --- */
.prod-h{
  font-family:var(--font);
  text-transform:uppercase;
  font-weight:800;
  line-height:.9;
  font-size:clamp(36px,5.7cqw,110px);
}
.prod-h .y{color:var(--yellow);display:block}
.prod-h .w{color:var(--white);display:block;margin-top:.06em}
.prod-arrow{
  display:block;
  width:clamp(80px,9.5cqw,182px);
  margin:clamp(24px,3.5cqw,66px) auto clamp(34px,5cqw,96px); /* más aire arriba y (un poco más) abajo */
  animation:arrow-bob 1.4s ease-in-out infinite;
}
@keyframes arrow-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(clamp(8px,1.2cqw,22px))}
}
@media(prefers-reduced-motion:reduce){
  .prod-arrow{animation:none}
}
.sorteo{
  background:#fff;
  padding:clamp(18px,2cqw,40px);
}
.sorteo h3{
  font-family:var(--font);
  text-transform:uppercase;
  font-weight:800;
  color:var(--pink);
  line-height:.9;
  font-size:clamp(24px,3.2cqw,62px);
  margin-bottom:clamp(10px,1.2cqw,24px);
}
.sorteo-plazo{
  font-family:var(--font);
  text-transform:uppercase;
  font-weight:800;
  color:var(--pink);
  font-size:clamp(13px,1.35cqw,26px);
  line-height:1;
  margin-bottom:clamp(8px,1cqw,20px);
}
.sorteo-sub{
  display:block;
  font-family:"Inter",Arial,sans-serif;
  font-weight:400;
  color:#AA9F9F;
  text-transform:none;
  font-size:clamp(13px,1.04cqw,20px); /* 20px @1920 */
  line-height:1.15;
  margin-top:clamp(5px,0.6cqw,12px);
}
.sorteo-list{
  list-style:none;
  counter-reset:item;
}
.sorteo-list li{
  counter-increment:item;
  font-family:var(--font);
  text-transform:uppercase;
  font-weight:800;
  color:var(--ink);
  font-size:clamp(17px,1.67cqw,32px);
  line-height:1.05;
  padding:clamp(8px,1cqw,18px) 0;
  border-top:2px solid var(--pink);
}
.sorteo-list li::before{content:"(" counter(item) ") "}
/* Email de participación: enlace mailto sin subrayado */
.mail-link{
  color:inherit;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.sorteo-note{
  font-family:var(--font);
  text-transform:uppercase;
  font-weight:800;
  color:#BFBFBF;
  font-size:clamp(17px,1.67cqw,32px);
  padding-top:clamp(8px,1cqw,18px);
  border-top:2px solid var(--pink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.stars-strip{
  overflow:hidden;
  background:var(--pink);
  padding-top:0;
  margin-top:clamp(-95px,-6.5cqw,-38px);   /* aún más cerca de las bolsas */
  padding-bottom:clamp(24px,3.8cqw,72px);
  position:relative;
}
.stars-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:clamp(8px,1.5cqw,30px);
  animation:marquee-right 40s linear infinite;
}
.stars-track img{
  width:clamp(140px,15cqw,290px);          /* mucho más grandes */
  flex:0 0 auto;
  transform:rotate(17deg);                 /* rotadas */
}
@keyframes marquee-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.stars-track{animation:none}}

/* borde negro dentado */
.footer-zig{
  aspect-ratio:1920/128;                    /* borde dentado a todo el ancho (una sola pieza, sin junturas) */
  background-color:var(--pink);
  background-image:url("../assets/footer_triangle.svg");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% 100%;
}
.footer-black{
  background:#1D1D1B;
  text-align:center;
  padding:0 20px clamp(36px,6cqw,110px);
  margin-top:-5px; /* solapa el borde dentado para que no quede línea rosa de 1px */
  position:relative;
}

/* ===== puentes de color: tapan las costuras de 1px entre secciones (a prueba de zoom) ===== */
.collab::after,
.prod::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-3px;
  height:7px;
  z-index:6;
  pointer-events:none;
}
.collab::after{background:var(--pink)} /* home: bajo la banda va la marquesina rosa */
.prod::after{background:var(--blue)}   /* interior: todo azul */
.footer-black::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-3px;
  height:7px;
  background:#1D1D1B;
  z-index:1;
  pointer-events:none;
}
.footer-black a{
  color:#BFBFBF;
  font-family:"Oswald",sans-serif;
  font-weight:300;
  font-size:clamp(14px,1.15cqw,22px);
  letter-spacing:.02em;
}
.footer-black a:hover{text-decoration:underline}

/* ============================================================
   REVEAL AL HACER SCROLL (solo si <html class="js">)
   ============================================================ */
.js .block,
.js .collab-row,
.js .collab-text,
.js .bags,
.js .stars-strip,
.js .prod-frame,
.js .prod-tenemos,
.js .prod-right{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s ease, transform .7s ease;
}
.js .block.in,
.js .collab-row.in,
.js .collab-text.in,
.js .bags.in,
.js .stars-strip.in,
.js .prod-frame.in,
.js .prod-tenemos.in,
.js .prod-right.in{
  opacity:1;
  transform:none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ===== ≤1280px (MacBook Air / laptop) ===== */
@media(max-width:1280px){
  .hero .char{display:none} /* en la cabecera ya no se muestra la cara */
  .hero .brand{transform:none} /* logo centrado */
}

/* ===== ≤1024px: banda de colaboración apilada (evita que se corte en tablet/portátil) ===== */
@media(max-width:1024px){
  .collab{
    aspect-ratio:auto;
    background-color:#1FA1FF;
    background-image:url("../assets/bg_top.svg"),url("../assets/bg_bottom.svg");
    background-position:left top,left bottom;
    background-size:100% auto,100% auto;
    background-repeat:no-repeat,no-repeat;
  }
  .collab-inner{
    position:static;
    transform:none;
    /* padding suficiente para despejar los bordes rasgados (bg_top ~10.4%, bg_bottom ~18.6% del ancho) */
    padding:clamp(52px,12cqw,150px) clamp(16px,4cqw,50px) clamp(90px,20cqw,240px);
    gap:clamp(12px,2.4cqw,30px);
  }
  .collab-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:clamp(8px,2cqw,26px);
  }
  .c-faces{order:-1;flex-basis:100%;justify-content:center;margin-top:clamp(16px,3cqw,36px)}
  .c-face{width:clamp(110px,22cqw,230px)}
  .c-heart{width:clamp(16px,2.8cqw,42px);top:clamp(-16px,-2cqw,-8px)}
  .c-logo{order:1;width:clamp(110px,20cqw,250px)}
  .c-x{display:inline;order:2;font-size:clamp(24px,4.8cqw,60px)}
  .c-handle{order:3;font-size:clamp(26px,5.2cqw,74px)}
  .collab-text{font-size:clamp(15px,2.8cqw,38px)}
}

/* ===== ≤767px (tablet y móvil) ===== */
@media(max-width:767px){
  /* el texto del bloque se superpone sobre la parte azul de la imagen (sin franja extra) */
  .block-text{max-width:80%}
  .block-text h2{font-size:clamp(36px,11.3cqw,56px)}   /* ~44px en móvil */
  .block-text p{font-size:clamp(17px,5cqw,26px);max-width:100%}

  /* bloque mantequilla: en móvil se comporta como los demás (imagen cuadrada normal) */
  .block--pink .block-text h2{white-space:normal}
  .block--pink .block-img{aspect-ratio:auto;padding-top:0}
  .block--pink .block-img img{width:100%;height:auto;object-fit:initial;transform:none}
  /* fuera el estallido "con sabor a JUMPERS" en móvil */
  .sabor{display:none}
  /* el salto fijo del texto de colaboración solo en escritorio */
  .br-desktop{display:none}

  /* bolsas y estrellas más pequeñas en móvil */
  .bag{height:clamp(190px,48cqw,290px)}
  .stars-track img{width:clamp(70px,20cqw,130px)}

  /* ticker: en móvil la cinta es de ancho fijo, así que el intro debe durar menos para ir a la misma velocidad que el bucle */
  .ticker-track{animation:ticker-start 4s linear forwards, marquee 42s linear 4s infinite}

  /* ===== interior (producto): imagen+titular arriba, flecha, sorteo full, TENEMOS+sello ===== */
  .prod-left,.prod-right{display:contents}
  .prod-grid{
    grid-template-columns:1167fr 693fr; /* misma proporción que desktop: imagen más ancha */
    grid-template-areas:
      "frame heading"
      "frame arrow"
      "sorteo sorteo"
      "tenemos tenemos";
    column-gap:clamp(12px,3cqw,26px);
    row-gap:clamp(18px,4.5cqw,40px);
    align-items:start;
  }
  .prod-frame{grid-area:frame}
  .prod-h{grid-area:heading;font-size:clamp(20px,5.2cqw,40px)}
  .prod-arrow{grid-area:arrow;margin:clamp(4px,2cqw,20px) auto}
  .sorteo{grid-area:sorteo;text-align:center}
  .sorteo h3{font-size:clamp(27px,7cqw,48px)} /* título 1 línea, un poco más grande */
  .sorteo-sub{font-size:clamp(10px,2.6cqw,14px)} /* notas grises más pequeñas */
  .prod-tenemos{grid-area:tenemos;margin-top:0;padding-top:0}
  .t-burst{width:clamp(180px,55cqw,320px)}
  .t-sello{left:auto;right:clamp(40px,15cqw,150px);bottom:clamp(16px,4cqw,44px);width:clamp(90px,22cqw,150px)}
}

/* ===== ≤500px (teléfono): encoger hero para no comerse las estrellas ===== */
@media(max-width:500px){
  .hero .logo{width:clamp(165px,50cqw,300px)}
  .hero .xline{font-size:clamp(32px,11cqw,50px);letter-spacing:.01em}
  .hero .claim{font-size:clamp(14px,4cqw,26px)}
  /* estrellas más pequeñas y pegadas a los bordes (así se ven) */
  .hero .star{width:clamp(56px,17cqw,84px)}
  .hero .s1{top:16%;left:5%}
  .hero .s2{top:3%; right:5%}
  .hero .s3{top:36%;right:3%}
  /* título y descripción del bloque un poco más pequeños */
  .block-text h2{font-size:clamp(30px,9.5cqw,46px)}
  .block-text p{font-size:clamp(14px,4.2cqw,22px)}
  /* X3 (interior) más pequeño en teléfono */
  .prod-x3{width:clamp(110px,26cqw,190px)}
  /* saltos de línea solo en móvil */
  .br-mobile{display:inline}
  /* banda de colaboración en teléfono: caras más pequeñas y texto más estrecho */
  .c-face{width:clamp(100px,27cqw,160px)}
  .collab-text{max-width:clamp(210px,79cqw,360px);margin-inline:auto}
}