/*
 * Superthings landing — hoja de estilos exclusiva.
 * Se carga únicamente en el template "Superthings".
 * Archivo estático: no pasa por el build de Laravel Mix.
 *
 * Sistema de layout:
 * - Desktop (900–1440px): fondo.png (1920x2884) escala a 100% del ancho del
 *   viewport, y todos los tamaños/posiciones usan unidades vw, por lo que
 *   la composición mantiene sus proporciones en cualquier ancho de pantalla.
 *   Los flotantes se anclan a su bloque de contenido (texto / premios /
 *   producto) para que no se desfasen.
 * - >1440px: la composición se congela en su estado de 1440 (valores en px),
 *   centrada, con relleno rojo a los costados.
 * - Mobile (<900px): secciones de color con zigzag (clip-path); decorativos
 *   laterales ocultos; álbum y stickers pasan al flujo.
 */

.superthings {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * Header 2 columnas (.bg-nosotros viene del app.css global con float+50%).
 * En contexto flex el float se ignora: .titulo ocupa su mitad a altura
 * completa con el h2 centrado. row-reverse = título izquierda, imagen derecha.
 * ------------------------------------------------------------------------- */
#superthings .bg-nosotros {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: stretch;
}

#superthings .titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 30px 15px;
}

/* Misma tipografía que el bloque de texto de la landing (Bebas Neue) */
#superthings .titulo h2 {
  margin: 0;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(34px, 4.6vw, 74px);
}

@media all and (min-width: 768px) {
  #superthings .titulo {
    width: 50%;
    padding: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Landing — estilos base (mobile first)
 * ------------------------------------------------------------------------- */
.st-stage {
  background-color: #d02128;
}

.st-stage img {
  max-width: 100%;
  height: auto;
}

/* Hero: franja amarilla — la trama trae su propio zigzag inferior (zona
 * transparente del PNG), por eso no lleva background-color ni clip-path:
 * el rojo del stage se ve a través del borde. */
.st-hero {
  text-align: center;
  background: url('/content/uploads/2026/08/trama-amarilla.png') no-repeat bottom center / cover;
  padding: 28px 16px 46px;
}

.st-hero__logo {
  display: block;
  width: 72vw;
  max-width: 360px;
  margin: 0 auto;
}

.st-hero__personajes {
  display: block;
  width: 94vw;
  max-width: 500px;
  margin: 8px auto 0;
}

/* Columna central */
.st-content {
  position: relative;
  text-align: center;
  padding: 30px 18px 0;
}

.st-title {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 18px;
}

/* Misma tipografía de texto que la landing lolla vigente (Bebas Neue) */
.st-text {
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.02em;
  font-size: 19px;
  line-height: 1.4;
}

.st-text p {
  margin: 0 0 1.15em;
}

.st-text strong {
  font-weight: 800;
}

/* Checks verdes de "Tu misión es clara" */
.st-check::before {
  content: "\2713";
  display: inline-block;
  background: #43b64c;
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1.4em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 0.28em;
  margin: 0 0.4em 0 0.55em;
}

/* Flotantes: en mobile se ocultan los decorativos */
.st-float--sombrero,
.st-float--candado,
.st-float--personaje {
  display: none;
}

/* Álbum y stickers son contenido: en mobile van al flujo, lado a lado
 * (álbum a la izquierda, stickers a la derecha levemente más abajo;
 * el margen negativo de los stickers los sube a la altura del álbum). */
.st-float--album {
  display: block;
  width: 50vw;
  margin: 10px 0 0 4vw;
}

.st-float--stickers {
  display: block;
  width: 42vw;
  margin: -38vw 3vw 20px auto;
}

.st-premios-row {
  position: relative;
  margin-top: 14px;
}

.st-premios {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* Zona azul: producto + bases, con zigzag superior */
.st-product {
  text-align: center;
  background: #3579bd url('/content/uploads/2026/08/trama-azul.png') no-repeat center / cover;
  margin-top: 28px;
  padding: 40px 16px 50px;
  clip-path: polygon(0 14px, 14% 2px, 28% 16px, 42% 4px, 56% 18px, 70% 6px, 84% 16px, 100% 4px, 100% 100%, 0 100%);
}

.st-product__helado {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.st-bases {
  display: inline-block;
  width: 66vw;
  max-width: 320px;
  margin-top: 24px;
  transition: transform 0.15s ease;
}

.st-bases:hover {
  transform: scale(1.04);
}

.st-bases img {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Mobile (<900px): reordena la columna central sin tocar el DOM (que en
 * desktop posiciona los flotantes en absoluto): álbum y stickers arriba,
 * antes del bloque de texto, y el bodegón de premios como cierre.
 * .st-premios-row pasa a display:contents para poder ordenar premios y
 * stickers por separado dentro del flex.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 899px) {

  /* Trama roja en dos capas: la franja inferior a 100% de ancho conserva el
   * borde rasgado completo del PNG (con cover solo se vería una franja
   * central y el corte parecería recto); encima del corte, textura cover.
   * El corte queda montado sobre la franja azul, que en mobile pierde el
   * clip-path porque el corte lo dibuja la propia trama. */
  .st-content {
    display: flex;
    flex-direction: column;
    background:
      url('/content/uploads/2026/08/trama-roja.png') no-repeat center bottom / 100% auto,
      url('/content/uploads/2026/08/trama-roja.png') no-repeat center top / cover;
    z-index: 1;
    padding-bottom: 46px;
  }

  .st-product {
    margin-top: -46px;
    padding-top: 76px;
    clip-path: none;
  }

  .st-premios-row {
    display: contents;
  }

  .st-float--album {
    order: 1;
  }

  .st-float--stickers {
    order: 2;
  }

  .st-title {
    order: 3;
  }

  .st-text {
    order: 4;
  }

  .st-premios {
    order: 5;
    margin-top: 6px;
  }
}

/* ---------------------------------------------------------------------------
 * Desktop (900–1440px): todo en vw (1vw = 1% del ancho del viewport).
 * Para ajustar la posición de un flotante, tocar solo sus
 * top/left/right/width aquí.
 * ------------------------------------------------------------------------- */
@media all and (min-width: 900px) {

  .st-stage {
    background: #3579bd url('/content/uploads/2026/08/fondo2.png') top center no-repeat;
    background-size: 100% auto;
  }

  .st-hero {
    background: none;
    clip-path: none;
    padding: 3.5vw 0 0;
  }

  .st-hero__logo {
    width: 45vw;
    max-width: 888px;
  }

  .st-hero__personajes {
    width: 58vw;
    max-width: none;
    margin-top: -1vw;
  }

  .st-content {
    width: 66vw;
    margin: -30px auto 0;
    padding: 0;
  }

  .st-title {
    width: 76%;
    max-width: 600px;
    margin: 0 auto 1.6vw;
  }

  /* Texto acotado a 780px para dar aire a los flotantes laterales */
  .st-text {
    font-size: 20px;
    line-height: 1.35;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .st-text p {
    margin-bottom: 1.05em;
  }

  /* Flotantes (anclados a .st-content / .st-premios-row / .st-product) */
  .st-float {
    position: absolute;
    margin: 0;
  }

  .st-float--sombrero {
    display: block;
    top: -3.5vw;
    right: -17vw;
    width: 16vw;
  }

  /* Álbum y stickers: mismo tamaño que el sombrero (16vw), a los costados
   * del bloque de texto; stickers bajo el sombrero, en la zona marcada. */
  .st-float--album {
    display: block;
    top: 15vw;
    left: -17vw;
    width: 19.2vw;
    max-width: none;
  }

  /* Candado: anclado a .st-product, pegado a la derecha, frente al botón bases */
  .st-float--candado {
    display: block;
    right: 0;
    bottom: 3.5vw;
    width: 14vw;
  }

  .st-float--personaje {
    display: block;
    top: 8vw;
    left: -17.5vw;
    width: 16vw;
  }

  .st-float--stickers {
    display: block;
    top: 23vw;
    right: -17vw;
    width: 20.2vw;
    max-width: none;
    margin: 0;
  }

  .st-premios-row {
    margin-top: 1.6vw;
  }

  /* width (y no max-width) porque .st-stage img { max-width:100% } gana en
   * especificidad y anularía un max-width puesto aquí */
  .st-premios {
    width: 46vw;
    margin: 0 auto;
  }

  .st-product {
    position: relative;
    background: none;
    clip-path: none;
    margin-top: 0;
    padding: 1.5vw 0 2.5vw;
  }

  .st-product__helado {
    width: 58vw;
    max-width: none;
    margin: 2.8vw auto 0;
  }

  .st-bases {
    width: 28vw;
    max-width: 568px;
    margin-top: 1.6vw;
  }
}

/* ---------------------------------------------------------------------------
 * Pantallas anchas (>1440px): la composición se congela en su estado de
 * 1440px (1vw @1440 = 14.4px) y queda centrada; el fondo deja de escalar
 * y los costados se rellenan con el rojo.
 * ------------------------------------------------------------------------- */
@media all and (min-width: 1441px) {

  .st-stage {
    background-color: #d02128;
    background-size: 1440px auto;
    background-position: top center;
  }

  .st-hero {
    padding-top: 50px;
  }

  .st-hero__logo {
    width: 590px;
  }

  .st-hero__personajes {
    width: 780px;
    margin-top: -14px;
  }

  .st-content {
    width: 950px;
  }

  .st-title {
    margin-bottom: 23px;
  }

  .st-float--sombrero {
    top: -50px;
    right: -245px;
    width: 230px;
  }

  .st-float--album {
    top: 216px;
    left: -245px;
    width: 230px;
  }

  .st-float--personaje {
    top: 115px;
    left: -252px;
    width: 230px;
  }

  .st-float--stickers {
    top: 250px;
    right: -240px;
    width: 260px;
  }

  .st-premios-row {
    margin-top: 23px;
  }

  .st-premios {
    width: 800px;
  }

  .st-text{
    font-size: 18px;
  }

  .st-text p {
    padding: 0 20px;
  }

  .st-product {
    padding: 22px 0 36px;
  }

  .st-product__helado {
    width: 740px;
    margin: 40px auto 0;
  }

  .st-bases {
    width: 403px;
    margin-top: 23px;
  }

  /* Pegado al borde derecho de la franja de 1440, no del viewport */
  .st-float--candado {
    bottom: 50px;
    right: calc(50% - 720px);
    width: 202px;
  }
}