/* Ajustes para la versión en PHP (sin React) */
[hidden] { display: none !important; }
.chips label:not(.on) .chip-fondo { display: none; }
.hero-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-precio s, .precio s { font-size: .8em; margin-right: 6px; }
.desc { margin-top: 20px; color: #b9b9c0; line-height: 1.6; }
.desc p + p { margin-top: 10px; }
.desc ul, .desc ol { padding-left: 1.2em; }
.info > .tenue { margin-top: 6px; }
.etq.roja { border-color: var(--rojo); color: var(--rojo); }
.item small { color: var(--tenue); display: block; margin: 2px 0 8px; }
.carrito .items:empty::before { content: "Tu carrito está vacío."; display: block; padding: 28px 20px; color: var(--tenue); }
/* Entrada suave de la portada */
@media (prefers-reduced-motion: no-preference) {
  .hero-titulo, .hero-sub, .hero .acciones, .hero-marco { animation: dsk-sube .9s var(--curva) both; }
  .hero-sub { animation-delay: .12s; } .hero .acciones { animation-delay: .22s; } .hero-marco { animation-duration: 1.2s; }
  .carrito:not([hidden]) { animation: dsk-entra .35s var(--curva) both; }
  .toast { animation: dsk-sube .3s var(--curva) both; }
}
@keyframes dsk-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dsk-entra { from { transform: translateX(100%); } to { transform: none; } }
.p-grid > * { min-width: 0; }
.thumbs { overflow-x: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: 0 0 auto; }

/* ---------- Animaciones ---------- */
.cursor-etq { scale: 0; opacity: 0; transition: scale .25s var(--curva), opacity .2s; }
.cursor-etq.on { scale: 1; opacity: 1; }
body.con-cursor [data-cursor], body.con-cursor [data-cursor] * { cursor: none; }
.mf-sello svg { width: 86%; height: 86%; overflow: visible; }
.mf-sello text { fill: currentColor; font-size: 8.4px; letter-spacing: .12em; font-family: var(--mono); }
html:not(.anim) .mf-sello { opacity: 1; transform: none; }
html:not(.anim) .mf-p { opacity: 1; }
.manifiesto .mf-p { display: inline-block; }
.hero-titulo .letra { display: inline-block; will-change: transform; }
.hero-titulo .palabra { display: inline-block; white-space: nowrap; }
.flotante-3d { transition: transform .5s var(--curva); }
.flotante.moviendo .flotante-3d { transition: transform .12s linear; }
.cart-btn b.salta { animation: dsk-salta .5s var(--curva); }
@keyframes dsk-salta { 40% { transform: scale(1.5); } }
.intro[hidden] { display: none; }
/* con GSAP activo, la entrada CSS de la portada la reemplaza la animación */
html.anim .hero-titulo, html.anim .hero-sub, html.anim .hero .acciones, html.anim .hero-marco { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .mf-p { opacity: 1 !important; }
  .mf-sello { opacity: 1 !important; transform: none !important; }
  .cursor-etq { display: none !important; }
}

/* ---------- Pedido contra entrega dentro de la página ---------- */
.pedido[hidden] { display: none !important; }
.pedido .campos { grid-template-columns: 1fr 1fr; }
.pedido .campo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.pedido .campo em { font-style: normal; text-transform: none; letter-spacing: 0; }
.pedido .campo.full { grid-column: 1 / -1; }
.pedido .campo input { text-transform: none; letter-spacing: 0; }
.pedido .campo select { width: 100%; background: var(--fondo); border: 1px solid var(--linea-fuerte); color: var(--texto); font: inherit; font-size: 16px; padding: 12px; border-radius: 0; text-transform: none; letter-spacing: 0; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.pedido .campo select:focus { outline: none; border-color: var(--texto); }
.pedido .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pedido-resumen:empty { display: none; }
.pedido-resumen .fila { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pedido-resumen .fila small { display: block; color: var(--tenue); }
.pedido-resumen .fila.total { border-top: 1px solid var(--linea); padding-top: 10px; font-size: 16px; }
.listo-titulo { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 6vw, 44px); text-transform: uppercase; line-height: 1; }
.velo[data-velo-pedido] { z-index: 65; }
@media (max-width: 560px) { .pedido .campos { grid-template-columns: 1fr; } }
.pedido-listo > .pedido-resumen, .pedido form > .pedido-resumen { margin: 0; width: 100%; }


/* ---------- Portada: texto a la izquierda, prenda a la derecha ---------- */
.hero-titulo { letter-spacing: 0; }

@media (min-width: 821px) {
  .hero.hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto;
    align-items: center;
    justify-items: stretch;
    gap: clamp(28px, 4vw, 64px);
    padding-block: clamp(40px, 5vh, 72px);
  }
  .hero-split .hero-col { min-width: 0; }

  /* columna de texto: escala de espacios, no un gap parejo */
  .hero-texto { display: block; text-align: left; }
  .hero-texto .hero-titulo {
    text-align: left; white-space: normal;
    font-size: clamp(52px, 6.4vw, 108px); line-height: .9;
    max-width: 13ch; margin: 18px 0 0;
  }
  .hero-texto .hero-sub {
    text-align: left; max-width: 34ch; margin: 22px 0 0;
    font-size: 15px; line-height: 1.5; letter-spacing: .04em;
  }
  .hero-texto .acciones { justify-content: flex-start; margin-top: 34px; gap: 12px; }

  /* datos de compra: una fila discreta bajo los botones */
  .hero-split .hero-lado { position: static; top: auto; left: auto; right: auto; }
  .hero-split .hero-lado.izq { margin: 0; font-size: 12px; letter-spacing: .14em; }
  .hero-split .hero-lado.izq::after { display: none; }
  .hero-split .hero-lado.der {
    flex-direction: row; flex-wrap: nowrap; gap: 0 26px; align-items: baseline; width: fit-content;
    margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--linea);
    font-size: 12px; letter-spacing: .1em; text-align: left;
  }
  .hero-split .hero-lado.der::before, .hero-split .hero-lado.der::after { display: none; }

  /* la prenda: alto generoso, nunca desbordada */
  .hero-media { display: grid; justify-items: end; align-content: center; width: min(calc(72svh * 0.8), 46vw, 620px); }
  .hero-media .hero-centro { width: 100%; }
  /* la señal de scroll acompaña al texto, no queda flotando en el medio */
  .hero-split .hero-scroll { left: var(--pad); translate: 0 0; align-items: flex-start; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .hero-texto .hero-titulo { font-size: clamp(40px, 5.2vw, 64px); margin-top: 14px; }
  .hero-texto .hero-sub { margin-top: 16px; }
  .hero-texto .acciones { margin-top: 26px; }
  .hero-split .hero-lado.der { margin-top: 26px; padding-top: 14px; gap: 0 18px; }
  .hero.hero-split { gap: 36px; padding-block: 32px; }
  .hero-media { width: min(calc(62svh * 0.8), 42vw, 440px); }
  /* que los dos botones quepan en una sola fila */
  .hero-texto .acciones .btn { padding-left: 18px; padding-right: 18px; font-size: 12px; }
}

@media (max-width: 820px) {
  /* en el celular la prenda va primero */
  .hero.hero-split { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .hero-split .hero-media { order: -1; margin-bottom: 26px; }
  .hero-split .hero-texto { text-align: center; }
  .hero-split .hero-titulo { margin: 0; }
  .hero-split .hero-sub { margin: 12px auto 0; max-width: 32ch; }
  .hero-split .acciones { justify-content: center; margin-top: 24px; }
  .hero-split .hero-lado.der {
    display: flex; position: static; flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 4px 18px; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--linea);
    font-size: 11px; letter-spacing: .1em;
  }
  .hero-split .hero-lado.der::before, .hero-split .hero-lado.der::after { display: none; }
}

/* la franja inclinada no debe ensanchar la página */
.marq-envoltura { overflow: hidden; }