/* ==========================================================
   De mobile hacia arriba. La base ya es la vista de celular.
   ========================================================== */

/* --- Celular: la cartela de sala se guarda (el titular manda) y los
       botones ocupan el ancho: son el camino a las prendas. --- */
@media (max-width: 699px) {
  .hero__sala { display: none; }
  .hero__contenido { gap: var(--e-2); }
  .hero__logo { width: min(170px, 42vw); }
  .hero__acciones { width: 100%; }
  .hero__acciones .boton { flex: 1 1 100%; }
  /* La calcomanía se pega al costado del logo, sin tapar el kicker. */
  .sello-off { top: 38px; right: -2px; width: 84px; height: 84px; }
  .sello-off__num { font-size: 1.2rem; }
  .sello-off__txt { font-size: 0.64rem; }
}

/* --- Celular grande --- */
@media (min-width: 420px) {
  .barra__contador-txt { display: inline; }
  .slot { width: 50px; height: 62px; }
}

/* --- Tablet --- */
@media (min-width: 700px) {
  :root { --resumen-alto: 80px; }

  .barra { padding-inline: var(--e-4); }
  .barra__nav { display: flex; }
  .barra__contador { margin-left: 0; }
  .barra__logo img { width: 122px; }

  .hero__sala { left: var(--e-4); }
  .hero { padding-inline: var(--e-4); }
  /* Con más ancho, la portada se encuadra con su foco de escritorio. */
  .hero__fondo { background-position: var(--hero-foco), center 30%; }
  .franja { padding-block: var(--e-5); }

  .pasos, .coleccion { padding-inline: var(--e-4); }
  .pasos__lista { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }

  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }

  .tarjeta__nombre { font-size: var(--paso-0); }
  .tarjeta__accion { font-size: 0.78rem; }
  .tarjeta__datos { padding: var(--e-3); }
  .tarjeta__cartela { padding-inline: var(--e-3); }

  /* El resumen pasa a una sola fila: slots · precio · acción. */
  .resumen__cuerpo {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'slots precio cta';
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--e-4);
    gap: var(--e-4);
  }
  .resumen .boton--wa { width: auto; min-width: 260px; }
  .resumen__manija {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--e-4);
    background: none;
  }
  .resumen__estado { font-size: 0.78rem; }
  .resumen__detalle { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--e-4); }

  .modal__caja { padding: var(--e-5); }
}

/* --- Escritorio --- */
@media (min-width: 1024px) {
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* El afiche se abre: REVENTÓN cruza el ancho completo —es la pieza
     gráfica— y debajo el bloque de lectura queda a la izquierda con el
     sello y la ficha a la derecha. Composición editorial, asimétrica,
     con los botones siempre sobre el pliegue. */
  .hero { text-align: left; }
  .hero__contenido {
    grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.55fr);
    grid-template-areas:
      'kicker  logo'
      'titulo  titulo'
      'claim   sello'
      'sub     sello'
      'acciones ficha';
    align-items: center;
    justify-items: start;
    column-gap: var(--e-5);
    row-gap: var(--e-3);
    max-width: 1100px;
  }
  .hero__kicker   { grid-area: kicker; align-self: end; }
  .hero__logo     { grid-area: logo; justify-self: end; width: 240px; }
  .hero__titulo   { grid-area: titulo; justify-items: start; width: 100%; }
  .hero__claim    { grid-area: claim; justify-self: start; }
  .hero__sub      { grid-area: sub; max-width: none; }
  .hero__acciones { grid-area: acciones; justify-content: flex-start; margin-top: var(--e-2); }

  /* Alineado a la izquierda el titular ya no tiene todo el viewport:
     se ajusta al ancho de la columna del afiche. */
  .hero__linea--grito { font-size: clamp(3.4rem, 12vw, 10.4rem); }
  .hero__linea--hueca { -webkit-text-stroke-width: 3px; }

  .sello-off {
    position: static;
    grid-area: sello;
    justify-self: center;
    align-self: center;
    width: 158px;
    height: 158px;
    margin: 0;
  }
  .sello-off__num { font-size: 2.3rem; }
  .sello-off__txt { font-size: 1.2rem; }

  .hero__ficha {
    grid-area: ficha;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e-1);
    margin: 0;
    padding: 0 0 0 var(--e-3);
    border-top: none;
    border-left: 1px solid rgba(243, 233, 215, 0.25);
    max-width: none;
    width: auto;
    justify-self: center;
    align-self: center;
  }

  .resumen__total { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--e-2); }

  .coleccion__cabecera {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--e-3);
  }
  .coleccion__kicker { grid-column: 1 / -1; }
  .coleccion__bajada { text-align: right; margin: 0; }

  .paso { padding: var(--e-4); }
}

/* --- Pantallas bajas: el póster se compacta para que "Ver la colección"
       entre sin scrollear. Es el botón que arranca toda la compra. --- */
@media (max-height: 900px) {
  .hero { padding-block: var(--e-3); }
  .hero__contenido { row-gap: var(--e-2); }
  .hero__logo { width: min(190px, 46vw); }
  .hero__linea--grito { font-size: clamp(2.6rem, 13.5vw, 9rem); }
  .hero__linea--hueca { font-size: clamp(1.3rem, 5vw, 2.6rem); }
  .sello-off { width: 92px; height: 92px; }
  .sello-off__num { font-size: 1.3rem; }
  .sello-off__txt { font-size: 0.74rem; }
  .hero__ficha { margin-top: var(--e-2); padding-top: var(--e-2); }
  .hero__acciones { margin-top: var(--e-1); }
}

/* Teléfonos muy bajos: queda el póster esencial —
   logotipo, titular, sello, claim y el botón. */
@media (max-height: 700px) {
  .hero__ficha,
  .hero__sub { display: none; }
  .hero__logo { width: min(150px, 38vw); }
  .hero__linea--grito { font-size: clamp(2.2rem, 12vw, 5.4rem); }
  .hero__linea--hueca { font-size: clamp(1.1rem, 4.2vw, 2rem); }
  .hero__claim { font-size: clamp(0.9rem, 3vw, 1.2rem); }
  .sello-off { width: 74px; height: 74px; }
  .sello-off__num { font-size: 1.05rem; }
  .sello-off__txt { font-size: 0.6rem; }
}

/* --- Pantallas anchas: el hero respira más --- */
@media (min-width: 1440px) {
  .hero__contenido { max-width: 1160px; }
}

/* --- Sin hover (touch): nada de efectos que dependan del puntero --- */
@media (hover: none) {
  .boton:hover { transform: none; box-shadow: var(--sombra-dura); }
  .tarjeta:hover .tarjeta__marco:not(.tarjeta__marco--multiple) .tarjeta__img { transform: none; }

  /* Sin puntero no hay nada que revele las flechas: la pastilla se ve siempre.
     La columna sensible acompaña el ancho de la tarjeta, pero se mantiene
     angosta: del centro para adentro el marco queda libre para deslizar. */
  .tarjeta__flecha { --op: 0.92; width: clamp(46px, 15%, 62px); }
}

/* --- Alto contraste --- */
@media (prefers-contrast: more) {
  :root {
    --texto-suave: #ded3c5;
    --humo: #c4b9ac;
    --sobre-papel-suave: #4a4038;
    --hero-velo: 0.74;
  }
  .hero__linea--hueca { -webkit-text-stroke-width: 3.5px; }
  /* Sin el desfasaje de impresión el titular pesa menos, pero se lee más. */
  .hero__linea--grito { text-shadow: 0.03em 0.03em 0 var(--tinta); }
}

/* --- Menos movimiento: el afiche se queda quieto --- */
@media (prefers-reduced-motion: reduce) {
  .hero__fondo { animation: none; transform: none; }
  .ticker__pista { animation: none; }
  .sello-off { animation: none; }
  .hero__linea--grito,
  .hero__linea--hueca,
  .hero__claim,
  .hero__logo { animation: none; }
}

/* --- Impresión: la lista de prendas, sin adornos --- */
@media print {
  .barra, .ticker, .resumen, .avisos,
  .hero__fondo, .hero__velo, .hero__trama, .filtros { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .tarjeta { break-inside: avoid; opacity: 1; transform: none; box-shadow: none; }
  .tarjeta__flecha, .tarjeta__puntos { display: none !important; }
  .tarjeta__pista { overflow: hidden; }
}