/* ==========================================================
   FABULOUS 90'S — estilos propios (prefijo f9-)
   Ficha: negro #0B0B0B + crema #F1EEEA, naranja #FF5A0F de acento,
   azul cielo #5BC8F5 juvenil, Anton + Permanent Marker + Archivo + Space Mono
   ========================================================== */
:root {
  --f9-negro: #0B0B0B;
  --f9-crema: #F1EEEA;
  --f9-naranja: #FF5A0F;
  --f9-azul: #5BC8F5;
  --f9-amarillo: #FFD23F;
  --f9-gris: #6F6A66;
  --f9-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f9-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f9-cuerpo: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --f9-mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --f9-gutter: clamp(16px, 3.5vw, 48px);
  --f9-borde: 3px solid var(--f9-negro);
  --f9-sombra: 6px 6px 0 var(--f9-negro);
  --f9-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --f9-ratio-producto: 4 / 5;

  /* Ropa global de Dawn: tipografías de la ficha en todo el tema */
  --font-heading-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-heading-weight: 400;
  --font-body-family: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
}

body.gradient { background-attachment: scroll !important; }
.section-header { margin-bottom: 0 !important; }
h1, h2, h3, .h0, .h1, .h2 { text-transform: uppercase; letter-spacing: .01em; }
.header__heading-logo, .f9-header-logo { width: clamp(110px, 11vw, 160px); height: auto; display: block; }
.header__menu-item, .header__active-menu-item { font-family: var(--f9-mono); text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.announcement-bar__message { font-family: var(--f9-mono); font-weight: 700; letter-spacing: .1em; font-size: 12px; }
.button, .shopify-payment-button__button--unbranded { font-family: var(--f9-display); text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.price { font-family: var(--f9-mono); }

/* ---------- Base de secciones ---------- */
.f9-section { font-family: var(--f9-cuerpo); padding-top: 0 !important; padding-bottom: 0 !important; background: transparent; overflow-x: clip; }
.f9-section h1, .f9-section h2, .f9-section h3, .f9-section p { margin: 0; }
.f9-section a { color: inherit; }
.f9-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--f9-gutter); }
.f9-display { font-family: var(--f9-display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; }
.f9-marker { font-family: var(--f9-marker); text-transform: none; font-weight: 400; letter-spacing: 0; }
.f9-etiqueta { font-family: var(--f9-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.f9-etiqueta--acento { color: var(--f9-naranja); }
[hidden] { display: none !important; }
.f9-aviso-editor { font-family: var(--f9-mono); font-size: 13px; background: var(--f9-amarillo); color: var(--f9-negro); padding: 10px 14px; border: var(--f9-borde); margin-bottom: 20px; }

/* Botón con caja de flecha (como las referencias) */
.f9-section .f9-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f9-display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: 12px 12px 12px 20px;
  background: var(--f9-btn-bg, var(--f9-negro)); color: var(--f9-btn-color, var(--f9-crema));
  border: var(--f9-borde); box-shadow: 4px 4px 0 var(--f9-negro);
  transition: transform .2s var(--f9-ease), box-shadow .2s var(--f9-ease);
}
.f9-btn__flecha { display: grid; place-items: center; width: 30px; height: 30px; background: var(--f9-naranja); color: var(--f9-negro); font-family: var(--f9-cuerpo); font-weight: 700; font-size: 18px; }
.f9-section .f9-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--f9-negro); }
.f9-section .f9-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--f9-negro); }
.f9-section .f9-btn--naranja { --f9-btn-bg: var(--f9-naranja); --f9-btn-color: var(--f9-negro); }
.f9-section .f9-btn--naranja .f9-btn__flecha { background: var(--f9-negro); color: var(--f9-naranja); }
.f9-section .f9-btn:focus-visible { outline: 3px solid var(--f9-azul); outline-offset: 3px; }

/* Pegatina estrella (starburst) */
.f9-sticker {
  position: absolute; z-index: 3; display: grid; place-items: center; text-align: center;
  width: var(--f9-sticker-size, 130px); aspect-ratio: 1; padding: 18%;
  background: var(--f9-sticker-bg, var(--f9-amarillo)); color: var(--f9-negro);
  font-family: var(--f9-display); font-size: calc(var(--f9-sticker-size, 130px) * .15); line-height: .95; text-transform: uppercase;
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 79% 21%, 94% 22%, 89% 37%, 100% 50%, 89% 63%, 94% 78%, 79% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 21% 79%, 6% 78%, 11% 63%, 0% 50%, 11% 37%, 6% 22%, 21% 21%, 25% 6%, 39% 12%);
  animation: f9-giro 18s linear infinite;
}
.f9-sticker span { display: block; transform: rotate(-12deg); }
@keyframes f9-giro { to { transform: rotate(360deg); } }

/* Subrayado garabato bajo el texto a mano */
.f9-garabato { position: relative; display: inline-block; }
.f9-garabato svg { position: absolute; left: -4%; bottom: -.28em; width: 108%; height: .42em; overflow: visible; }
.f9-garabato path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s .6s var(--f9-ease); }
.f9-visible .f9-garabato path, .f9-garabato.f9-visible path { stroke-dashoffset: 0; }

/* Reveals */
.f9-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--f9-ease), transform .8s var(--f9-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.f9-reveal.f9-visible { opacity: 1; transform: none; }
.f9-words .f9-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em .06em .14em 0; margin: -.1em -.06em -.14em 0; }
.f9-words .f9-word > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--f9-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.f9-words.f9-visible .f9-word > span { transform: none; }
.no-js .f9-reveal, .f9-sin-js .f9-reveal { opacity: 1; transform: none; }

/* Grano sutil (fotocopia 90's) */
.f9-grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--f9-grano, .12); mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(11,11,11,.9) 1px, transparent 1.4px); background-size: 7px 7px;
}

/* ==========================================================
   1. HÉROE NOCTURNO (foto a sangre, logo gigante a la izquierda)
   ========================================================== */
.f9-hero { position: relative; min-height: min(var(--f9-hero-h, 85vh), 880px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--f9-hero-bg); }
.f9-hero__media { position: absolute; inset: 0; z-index: 0; }
.f9-hero__foto { position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--f9-foto-ancho, 68%), var(--f9-foto-max, 1150px)); }
.f9-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--f9-foco, 50% 50%); }
.f9-hero__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, var(--f9-hero-bg) 0%, rgba(11,11,11,.65) 10%, rgba(11,11,11,0) 38%),
  linear-gradient(0deg, var(--f9-hero-bg) 0%, rgba(11,11,11,0) 20%),
  linear-gradient(180deg, var(--f9-hero-bg) 0%, rgba(11,11,11,0) 10%),
  rgba(11,11,11,var(--f9-velo, 0)); }
.f9-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 88px; }
.f9-hero__main { max-width: min(640px, 48vw); }
.f9-hero .f9-etiqueta { font-weight: 400; letter-spacing: .28em; font-size: 14px; }
.f9-hero__logo { display: block; width: var(--f9-logo-hero, 100%); max-width: 100%; height: auto; margin: 22px 0 18px -1.5%; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.f9-hero__lema { font-family: var(--f9-mono); letter-spacing: .24em; text-transform: uppercase; font-size: 15px; }
.f9-hero__marker { display: inline-block; font-size: clamp(24px, 2.6vw, 40px); color: var(--f9-naranja); transform: rotate(-4deg); margin-top: 10px; line-height: 1.1; }
.f9-hero__ctas { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; }
.f9-section .f9-btn-noche { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 30px; font-family: var(--f9-mono); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--f9-crema); transition: background-color .25s, color .25s, transform .25s var(--f9-ease); }
.f9-section .f9-btn-noche--lleno { background: #fff; color: var(--f9-negro); border-color: #fff; }
.f9-section .f9-btn-noche--linea { background: transparent; color: var(--f9-crema); }
.f9-section .f9-btn-noche:hover { transform: translateY(-2px); }
.f9-section .f9-btn-noche--lleno:hover { background: var(--f9-naranja); border-color: var(--f9-naranja); }
.f9-section .f9-btn-noche--linea:hover { background: var(--f9-crema); color: var(--f9-negro); }
.f9-btn-noche svg { width: 18px; height: 12px; transition: transform .25s var(--f9-ease); }
.f9-btn-noche:hover svg { transform: translateX(4px); }
.f9-hero__pie { position: absolute; right: var(--f9-gutter); bottom: 44px; z-index: 3; text-align: right; font-family: var(--f9-mono); text-transform: uppercase; }
.f9-hero__pie strong { display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-weight: 400; font-size: 14px; letter-spacing: .24em; }
.f9-hero__pie strong::before { content: ""; width: 96px; height: 1px; background: currentColor; opacity: .7; }
.f9-hero__pie span { display: block; font-size: 11px; letter-spacing: .18em; opacity: .75; margin-top: 8px; }
.f9-hero__pie::after { content: ""; display: block; width: 36px; height: 1px; background: currentColor; opacity: .7; margin: 14px 0 0 auto; }
.f9-hero .f9-sticker { top: 14%; right: 8%; }
@media (max-width: 989px) {
  .f9-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .f9-hero__media { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; }
  .f9-hero__foto { width: 100%; }
  .f9-hero__foto img { object-position: var(--f9-foco-movil, 60% 50%); }
  .f9-hero__foto::after { background: linear-gradient(0deg, var(--f9-hero-bg) 0%, rgba(11,11,11,0) 40%); }
  .f9-hero__inner { margin-top: -120px; padding-top: 0; padding-bottom: 48px; }
  .f9-hero__main { max-width: none; }
  .f9-hero__logo { width: min(92%, 460px); }
  .f9-hero__pie { position: static; text-align: left; padding: 0 var(--f9-gutter) 40px; }
  .f9-hero__pie strong { justify-content: flex-start; }
  .f9-hero__pie strong::before { display: none; }
  .f9-hero__pie::after { margin-left: 0; }
  .f9-hero .f9-sticker { --f9-sticker-size: 90px !important; top: 16px; right: 16px; }
}
@media (max-width: 549px) {
  .f9-hero__ctas { gap: 12px; }
  .f9-section .f9-btn-noche { padding: 0 20px; flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================
   2. MARQUESINA
   ========================================================== */
.f9-marquee { overflow: hidden; white-space: nowrap; border-top: var(--f9-marquee-borde, 0); border-bottom: var(--f9-marquee-borde, 0); }
.f9-marquee__track { display: inline-flex; animation: f9-marquee var(--f9-vel, 30s) linear infinite; }
.f9-marquee--reversa .f9-marquee__track { animation-direction: reverse; }
.f9-marquee:hover .f9-marquee__track { animation-play-state: paused; }
.f9-marquee__item { font-family: var(--f9-display); text-transform: uppercase; font-size: var(--f9-marquee-size, 34px); padding: 14px 0; display: inline-flex; align-items: center; }
.f9-marquee__sep { margin: 0 .6em; color: var(--f9-sep-color, var(--f9-naranja)); }
.f9-marquee__item:nth-child(3n+2) { font-family: var(--f9-marker); text-transform: none; }
@keyframes f9-marquee { to { transform: translateX(-50%); } }

/* ==========================================================
   3. MANIFIESTO (palabras que pasan de gris a blanco al hacer scroll)
   ========================================================== */
.f9-mani__grid { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; }
.f9-section .f9-mani__texto { font-family: var(--f9-display); text-transform: uppercase; font-weight: 400; font-size: var(--f9-mani-size, clamp(30px, 3.8vw, 58px)); line-height: 1.08; }
.f9-mani__texto .f9-w { color: var(--f9-mani-apagado, #4A4643); transition: color .35s linear; }
.f9-mani__texto .f9-w.f9-on { color: inherit; }
.f9-mani__texto .f9-w--acento.f9-on { color: var(--f9-naranja); }
.f9-mani__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 2vw, 28px); margin-top: clamp(40px, 6vw, 80px); }
.f9-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--f9-crema); }
.f9-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.1); transition: filter .5s var(--f9-ease), transform .6s var(--f9-ease); }
.f9-tile:hover img { filter: none; transform: scale(1.05); }
.f9-tile--texto { display: grid; place-items: center; background: var(--f9-tile-bg, var(--f9-naranja)); color: var(--f9-negro); font-family: var(--f9-marker); font-size: clamp(16px, 1.8vw, 26px); text-align: center; padding: 8px; transform: rotate(var(--r, 0deg)); border-color: var(--f9-negro); transition: transform .3s var(--f9-ease); }
.f9-tile--texto:hover { transform: rotate(0) scale(1.04); }
@media (max-width: 749px) {
  .f9-mani__grid { grid-template-columns: 1fr; gap: 16px; }
  .f9-mani__tiles { grid-template-columns: repeat(3, 1fr); }
  .f9-mani__tiles > :nth-child(n+4) { display: none; }
}

/* ==========================================================
   4. COLECCIÓN ("LO MÁS [foto] NUEVO" + grid numerado)
   ========================================================== */
.f9-col__head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 20px; margin-bottom: clamp(32px, 5vw, 64px); }
.f9-col__contador { font-family: var(--f9-display); font-size: 34px; line-height: 1; }
.f9-col__contador small { font-size: 16px; opacity: .6; }
.f9-col__titulo { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.5vw, 36px); flex-wrap: wrap; }
.f9-section .f9-col__titulo h2 { font-size: var(--f9-col-size, clamp(52px, 8vw, 128px)); }
.f9-col__foto { width: clamp(90px, 13vw, 200px); aspect-ratio: 3 / 4; border: var(--f9-borde); box-shadow: var(--f9-sombra); transform: rotate(-4deg); overflow: hidden; background: var(--f9-naranja); display: grid; place-items: center; }
.f9-col__foto img { width: 100%; height: 100%; object-fit: cover; }
.f9-col__foto--logo img { object-fit: contain; padding: 10%; }
.f9-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
@media (max-width: 749px) {
  .f9-col__head { grid-template-columns: 1fr; justify-items: start; }
  .f9-col__titulo { justify-content: flex-start; }
  .f9-grid { grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); }
}

/* Tarjeta de producto (snippet f9-tarjeta-producto) */
.f9-card { position: relative; background: #fff; border: var(--f9-borde); box-shadow: var(--f9-sombra); transition: transform .3s var(--f9-ease), box-shadow .3s var(--f9-ease); color: var(--f9-negro); }
.f9-card:nth-child(3n+1) { --tilt: -1.2deg; } .f9-card:nth-child(3n+2) { --tilt: .8deg; } .f9-card:nth-child(3n) { --tilt: -.4deg; }
.f9-card.f9-visible { transform: rotate(var(--tilt, 0)); }
@media (hover: hover) { .f9-card:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 10px 10px 0 var(--f9-naranja), 10px 10px 0 3px var(--f9-negro); } }
.f9-card__media { position: relative; display: block; aspect-ratio: var(--f9-ratio-producto); overflow: hidden; background: var(--f9-fondo-tarjeta, #E9E4DE); border-bottom: var(--f9-borde); }
.f9-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--f9-ease), transform .8s var(--f9-ease); }
.f9-card__media .placeholder-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(11,11,11,.35); background: transparent; }
.f9-card__img--hover { opacity: 0; }
@media (hover: hover) {
  .f9-card:hover .f9-card__img--hover { opacity: 1; }
  .f9-card:hover .f9-card__img:not(.f9-card__img--hover) { transform: scale(1.04); }
}
.f9-card__num { position: absolute; top: 10px; left: 12px; z-index: 2; font-family: var(--f9-marker); font-size: 30px; line-height: 1; color: var(--f9-negro); }
.f9-card__badge { position: absolute; top: 12px; right: -8px; z-index: 2; background: var(--f9-naranja); color: var(--f9-negro); font-family: var(--f9-display); font-size: 15px; letter-spacing: .06em; padding: 4px 12px; border: 2px solid var(--f9-negro); transform: rotate(6deg); }
.f9-card__badge--agotado { background: var(--f9-negro); color: var(--f9-crema); }
.f9-card__tallas { list-style: none; margin: 0; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.f9-card__tallas li { background: var(--f9-crema); border: 2px solid var(--f9-negro); font-family: var(--f9-mono); font-size: 12px; font-weight: 700; padding: 3px 8px; }
@media (hover: hover) { .f9-card__tallas { opacity: 0; transform: translateY(8px); transition: .3s var(--f9-ease); } .f9-card:hover .f9-card__tallas { opacity: 1; transform: none; } }
@media (hover: none) { .f9-card__tallas { display: none; } }
.f9-card__info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 14px 16px; }
.f9-section .f9-card__title, .f9-card__title { font-family: var(--f9-display); font-weight: 400; font-size: 20px; line-height: 1.05; text-transform: uppercase; margin: 0; }
.f9-card__title a { text-decoration: none; color: inherit; }
.f9-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.f9-card__price { font-family: var(--f9-mono); font-weight: 700; font-size: 14px; white-space: nowrap; margin: 0; }
.f9-card__price s { opacity: .5; margin-left: 6px; font-weight: 400; }

/* ==========================================================
   5. CÓMO FUNCIONA (4 tarjetas numeradas, una en naranja)
   ========================================================== */
.f9-proc__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.f9-section .f9-proc__head h2 { font-size: var(--f9-proc-size, clamp(48px, 6.4vw, 100px)); }
.f9-proc__intro { max-width: 36ch; font-size: 15px; opacity: .8; }
.f9-proc__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(241,238,234,.18); }
.f9-proc__card { position: relative; min-height: clamp(260px, 26vw, 360px); padding: 24px 22px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(241,238,234,.18); transition: background-color .35s var(--f9-ease), color .35s var(--f9-ease); }
.f9-proc__card:last-child { border-right: 0; }
.f9-proc__num { font-family: var(--f9-display); font-size: 40px; line-height: 1; }
.f9-proc__garabato { font-family: var(--f9-marker); font-size: 20px; color: var(--f9-azul); transform: rotate(-4deg); display: inline-block; margin-top: 10px; }
.f9-section .f9-proc__card h3 { font-family: var(--f9-display); font-weight: 400; font-size: 28px; margin-bottom: 10px; }
.f9-proc__card p { font-size: 14px; line-height: 1.5; opacity: .85; }
.f9-proc__grid:not(:hover) .f9-proc__card.is-activa, .f9-proc__card:hover { background: var(--f9-naranja); color: var(--f9-negro); }
.f9-proc__grid:not(:hover) .f9-proc__card.is-activa .f9-proc__garabato, .f9-proc__card:hover .f9-proc__garabato { color: var(--f9-negro); }
@media (max-width: 989px) { .f9-proc__grid { grid-template-columns: repeat(2, 1fr); } .f9-proc__card:nth-child(2) { border-right: 0; } .f9-proc__card:nth-child(-n+2) { border-bottom: 1px solid rgba(241,238,234,.18); } }
@media (max-width: 549px) { .f9-proc__grid { grid-template-columns: 1fr; } .f9-proc__card { border-right: 0; border-bottom: 1px solid rgba(241,238,234,.18); min-height: 200px; } }

/* ==========================================================
   6. COLLAGE DE POLAROIDS (la pandilla)
   ========================================================== */
.f9-coll__head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); position: relative; }
.f9-section .f9-coll__head h2 { font-size: var(--f9-coll-size, clamp(52px, 8vw, 120px)); }
.f9-coll__head .f9-marker { display: block; font-size: clamp(28px, 3.6vw, 52px); transform: rotate(-3deg); margin-bottom: 4px; }
.f9-coll__grid { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 34px); }
.f9-polaroid { width: clamp(180px, 20vw, 270px); background: #fff; padding: 12px 12px 0; border: 2px solid var(--f9-negro); box-shadow: var(--f9-sombra); transform: rotate(var(--r, 0deg)); transition: transform .35s var(--f9-ease), box-shadow .35s var(--f9-ease); position: relative; color: var(--f9-negro); text-decoration: none; }
.f9-polaroid:nth-child(odd) { margin-top: 28px; }
.f9-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 76px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,210,63,.85); border: 1px solid rgba(11,11,11,.2); z-index: 2; }
.f9-polaroid:hover { transform: rotate(0) scale(1.05); z-index: 3; box-shadow: 10px 10px 0 var(--f9-negro); }
.f9-polaroid__media { aspect-ratio: 1; overflow: hidden; background: #E3DED7; border: 1px solid rgba(11,11,11,.25); }
.f9-polaroid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f9-polaroid__media .placeholder-svg { width: 100%; height: 100%; fill: rgba(11,11,11,.3); }
.f9-polaroid__pie { font-family: var(--f9-marker); font-size: 19px; text-align: center; padding: 12px 4px 16px; line-height: 1.15; }
@media (max-width: 749px) {
  .f9-coll__grid { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 24px 8px 28px; scroll-snap-type: x mandatory; margin: 0 calc(var(--f9-gutter) * -1); padding-left: var(--f9-gutter); }
  .f9-polaroid { flex: 0 0 62%; scroll-snap-align: center; }
  .f9-polaroid:nth-child(odd) { margin-top: 0; }
}

/* ==========================================================
   7. GUÍA DE TALLAS INTERACTIVA
   ========================================================== */
.f9-tallas__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.f9-section .f9-tallas__titulo { font-size: var(--f9-tallas-size, clamp(48px, 6.4vw, 96px)); }
.f9-tallas__titulo .f9-marker { display: block; color: var(--f9-naranja); font-size: .42em; transform: rotate(-4deg); margin: 6px 0 0 .2em; }
.f9-tallas__nota { font-size: 15px; line-height: 1.55; max-width: 44ch; margin-top: 20px !important; }
.f9-tallas__card { background: #fff; border: var(--f9-borde); box-shadow: 10px 10px 0 var(--f9-negro); padding: clamp(18px, 3vw, 32px); color: var(--f9-negro); }
.f9-tallas__calc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 2px dashed rgba(11,11,11,.3); }
.f9-tallas__calc label { font-family: var(--f9-mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.f9-tallas__calc input { width: 110px; font-family: var(--f9-mono); font-size: 18px; padding: 8px 10px; border: 2px solid var(--f9-negro); background: var(--f9-crema); }
.f9-tallas__resultado { font-family: var(--f9-display); font-size: 22px; text-transform: uppercase; }
.f9-tallas__resultado b { font-weight: 400; background: var(--f9-naranja); padding: 0 10px; border: 2px solid var(--f9-negro); display: inline-block; transform: rotate(-3deg); }
.f9-tabla-wrap { overflow-x: auto; }
.f9-tabla { width: 100%; border-collapse: collapse; font-family: var(--f9-mono); font-size: 14px; min-width: 320px; }
.f9-tabla th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--f9-negro); }
.f9-tabla td { padding: 10px; border-bottom: 1px solid rgba(11,11,11,.15); }
.f9-tabla tr.is-sugerida td { background: var(--f9-azul); font-weight: 700; }
.f9-tabla td:first-child { font-family: var(--f9-display); font-size: 18px; }
@media (max-width: 849px) { .f9-tallas__grid { grid-template-columns: 1fr; } }

/* ==========================================================
   8. CTA FINAL (tarjeta crema inclinada sobre naranja)
   ========================================================== */
.f9-cta { position: relative; display: grid; place-items: center; }
.f9-cta__card { position: relative; width: min(760px, 100%); background: var(--f9-crema); color: var(--f9-negro); border: var(--f9-borde); box-shadow: 14px 14px 0 var(--f9-negro); padding: clamp(28px, 5vw, 60px); text-align: center; transform: rotate(-2.5deg); }
.f9-cta__card::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; }
.f9-section .f9-cta__card h2 { font-size: var(--f9-cta-size, clamp(46px, 7vw, 104px)); margin: 12px 0 16px; }
.f9-cta__card .f9-marker { color: var(--f9-naranja); font-size: .5em; display: block; transform: rotate(-3deg); }
.f9-cta__card p { font-size: 16px; margin-bottom: 26px !important; }
.f9-cta .f9-sticker { top: -34px; right: max(4%, calc(50% - 440px)); --f9-sticker-bg: var(--f9-azul); }

/* ==========================================================
   9. LOGO GIGANTE (encima del pie de página)
   ========================================================== */
.f9-logo-gig { text-align: center; }
.f9-logo-gig img { width: min(100%, var(--f9-logo-ancho, 1200px)); height: auto; aspect-ratio: 1478 / 833; display: block; margin: 0 auto; }
.f9-logo-gig__frase { font-family: var(--f9-marker); font-size: clamp(20px, 2.4vw, 32px); margin-top: 18px !important; transform: rotate(-2deg); color: var(--f9-naranja); }

@media (prefers-reduced-motion: reduce) {
  .f9-sticker, .f9-marquee__track { animation: none; }
  .f9-reveal, .f9-words .f9-word > span { transition: none; opacity: 1; transform: none; }
  .f9-garabato path { stroke-dashoffset: 0; transition: none; }
  .f9-mani__texto .f9-w { color: inherit; }
}
.f9-polaroid__link { position: absolute; inset: 0; z-index: 4; }

/* ==========================================================
   CUERPO OSCURO (v2): tokens + variantes de tarjetas y tallas
   ========================================================== */
:root { --f9-oscuro-2: #151413; --f9-oscuro-3: #1E1C1B; --f9-linea-osc: rgba(241,238,234,.14); }
.f9-titulo-mix { font-family: var(--f9-display); font-weight: 400; text-transform: uppercase; line-height: .92; font-size: var(--f9-tit-size, clamp(48px, 6.4vw, 104px)); }
.f9-titulo-mix .f9-marker { color: var(--f9-naranja); text-transform: none; font-size: .78em; margin-left: .12em; display: inline-block; transform: rotate(-3deg) translateY(-.04em); }
.f9-num { font-family: var(--f9-mono); font-size: 12px; color: var(--f9-naranja); letter-spacing: .1em; }

.f9-sec-oscura .f9-card { background: var(--f9-oscuro-2); border: 1px solid var(--f9-linea-osc); box-shadow: none; color: var(--f9-crema); }
.f9-sec-oscura .f9-card.f9-visible { transform: none; }
.f9-sec-oscura .f9-card__media { background: var(--f9-oscuro-3); border-bottom: 1px solid var(--f9-linea-osc); }
.f9-sec-oscura .f9-card__media .placeholder-svg { fill: rgba(241,238,234,.28); }
.f9-sec-oscura .f9-card__num { color: var(--f9-naranja); }
.f9-sec-oscura .f9-card__tallas li { background: var(--f9-negro); color: var(--f9-crema); border-color: var(--f9-linea-osc); }
@media (hover: hover) { .f9-sec-oscura .f9-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--f9-naranja), 8px 8px 0 var(--f9-naranja); } }
.f9-sec-oscura .f9-col__foto { border-color: var(--f9-crema); box-shadow: 6px 6px 0 var(--f9-naranja); background: var(--f9-oscuro-3); }
.f9-sec-oscura .f9-btn { --f9-btn-bg: var(--f9-crema); --f9-btn-color: var(--f9-negro); box-shadow: 4px 4px 0 var(--f9-naranja); border-color: var(--f9-crema); }

.f9-sec-oscura .f9-tallas__card { background: var(--f9-oscuro-2); color: var(--f9-crema); border: 1px solid var(--f9-linea-osc); box-shadow: 10px 10px 0 var(--f9-naranja); }
.f9-sec-oscura .f9-tallas__calc { border-bottom-color: var(--f9-linea-osc); }
.f9-sec-oscura .f9-tallas__calc input { background: var(--f9-negro); color: var(--f9-crema); border-color: var(--f9-linea-osc); }
.f9-sec-oscura .f9-tabla th { border-bottom-color: var(--f9-crema); }
.f9-sec-oscura .f9-tabla td { border-bottom-color: var(--f9-linea-osc); }
.f9-sec-oscura .f9-tabla tr.is-sugerida td { background: var(--f9-naranja); color: var(--f9-negro); }
.f9-sec-oscura .f9-tallas__resultado b { color: var(--f9-negro); border-color: var(--f9-naranja); }

/* ==========================================================
   PRENDA DESTACADA (foto izquierda, compra a la derecha)
   ========================================================== */
.f9-prod { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.f9-prod__media { position: relative; aspect-ratio: 1 / 1; background: var(--f9-oscuro-2); border: 1px solid var(--f9-linea-osc); overflow: hidden; }
.f9-prod__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--f9-ease), transform 1s var(--f9-ease); }
.f9-prod__media .placeholder-svg { position: absolute; inset: 10%; width: 80%; height: 80%; fill: rgba(241,238,234,.3); }
.f9-prod__media .f9-prod__img--2 { opacity: 0; }
@media (hover: hover) { .f9-prod__media:hover .f9-prod__img--2 { opacity: 1; } .f9-prod__media:hover .f9-prod__img--1.f9-tiene-2 { opacity: 0; } }
.f9-prod__girar { position: absolute; right: 16px; bottom: 14px; z-index: 2; font-family: var(--f9-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.f9-prod__contador { position: absolute; left: 16px; top: 14px; z-index: 2; font-family: var(--f9-mono); font-size: 12px; letter-spacing: .1em; }
.f9-prod__info { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.f9-section .f9-prod__titulo { font-family: var(--f9-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 5.4vw, 88px); line-height: .9; }
.f9-prod__precio { font-family: var(--f9-mono); font-size: 20px; font-weight: 700; }
.f9-prod__precio s { opacity: .5; font-weight: 400; margin-left: 8px; }
.f9-prod__specs { font-family: var(--f9-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.f9-prod__desc { font-size: 16px; line-height: 1.6; max-width: 52ch; opacity: .9; }
.f9-prod__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--f9-linea-osc); }
.f9-prod__lista li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--f9-linea-osc); font-size: 15px; line-height: 1.5; }
.f9-prod__lista .f9-num { padding-top: 3px; }
.f9-prod__form { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.f9-prod__tallas-lbl { font-family: var(--f9-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; }
.f9-section .f9-prod__tallas-lbl a { color: var(--f9-naranja); text-decoration: underline; text-underline-offset: 3px; }
.f9-prod__tallas { display: flex; flex-wrap: wrap; gap: 10px; }
.f9-section .f9-talla { min-width: 56px; height: 44px; padding: 0 14px; background: transparent; color: inherit; border: 1px solid var(--f9-linea-osc); font-family: var(--f9-mono); font-size: 14px; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.f9-section .f9-talla:hover { border-color: var(--f9-crema); }
.f9-section .f9-talla[aria-pressed="true"] { background: var(--f9-naranja); border-color: var(--f9-naranja); color: var(--f9-negro); font-weight: 700; }
.f9-section .f9-talla.is-agotada { text-decoration: line-through; opacity: .45; }
.f9-prod__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.f9-section .f9-prod__add { display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 30px; background: var(--f9-crema); color: var(--f9-negro); border: 0; font-family: var(--f9-mono); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 5px 5px 0 var(--f9-naranja); transition: transform .2s var(--f9-ease), box-shadow .2s var(--f9-ease); }
.f9-section .f9-prod__add:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--f9-naranja); }
.f9-section .f9-prod__add[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.f9-section .f9-prod__detalles { font-family: var(--f9-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.f9-prod__nota { font-family: var(--f9-mono); font-size: 12px; opacity: .6; }
@media (max-width: 849px) { .f9-prod { grid-template-columns: 1fr; } }

/* ==========================================================
   HECHO PA DURAR (acordeón con foto + fila de datos)
   ========================================================== */
.f9-acc { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.f9-acc__media { position: sticky; top: 100px; aspect-ratio: 4 / 5; background: var(--f9-oscuro-2); border: 1px solid var(--f9-linea-osc); overflow: hidden; }
.f9-acc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--f9-ease); }
.f9-acc__media img.is-saliendo { opacity: 0; }
.f9-acc__media .placeholder-svg { position: absolute; inset: 12%; width: 76%; height: 76%; fill: rgba(241,238,234,.28); }
.f9-acc__lista { border-top: 1px solid var(--f9-linea-osc); margin-top: clamp(20px, 3vw, 36px); }
.f9-acc__item { border-bottom: 1px solid var(--f9-linea-osc); }
.f9-acc__item summary { list-style: none; display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 8px; padding: 22px 0; cursor: pointer; }
.f9-acc__item summary::-webkit-details-marker { display: none; }
.f9-section .f9-acc__item summary h3 { font-family: var(--f9-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); text-transform: uppercase; margin: 0; transition: color .2s; }
.f9-section .f9-acc__item summary:hover h3 { color: var(--f9-naranja); }
.f9-acc__icono { width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; position: relative; justify-self: end; transition: background-color .2s, border-color .2s; }
.f9-acc__icono::before, .f9-acc__icono::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--f9-ease); }
.f9-acc__icono::after { transform: translate(-50%, -50%) rotate(90deg); }
.f9-acc__item[open] .f9-acc__icono { background: var(--f9-naranja); border-color: var(--f9-naranja); color: var(--f9-negro); }
.f9-acc__item[open] .f9-acc__icono::after { transform: translate(-50%, -50%) rotate(0deg); }
.f9-acc__cuerpo { padding: 0 48px 24px 52px; font-size: 16px; line-height: 1.65; opacity: .85; max-width: 60ch; }
.f9-acc__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 64px); }
.f9-acc__datos p:first-child { font-family: var(--f9-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
.f9-acc__datos p:last-child { font-family: var(--f9-display); font-size: clamp(22px, 2.2vw, 32px); text-transform: uppercase; }
.f9-acc__datos > div:nth-child(2) p:last-child { color: var(--f9-naranja); }
@media (max-width: 849px) { .f9-acc { grid-template-columns: 1fr; } .f9-acc__media { position: relative; top: 0; } .f9-acc__cuerpo { padding: 0 0 22px 52px; } }

/* ==========================================================
   LOOKBOOK EN ARCOS (carrusel con flechas y contador)
   ========================================================== */
.f9-look__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.f9-look__nav { display: flex; align-items: center; gap: 12px; }
.f9-look__contador { font-family: var(--f9-mono); font-size: 13px; letter-spacing: .1em; margin-right: 10px; font-variant-numeric: tabular-nums; }
.f9-look__contador b { color: var(--f9-naranja); font-weight: 700; }
.f9-section .f9-look__flecha { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: inherit; border: 1px solid var(--f9-linea-osc); cursor: pointer; font-size: 20px; transition: background-color .2s, color .2s, border-color .2s; }
.f9-section .f9-look__flecha:hover { background: var(--f9-naranja); border-color: var(--f9-naranja); color: var(--f9-negro); }
.f9-section .f9-look__flecha:focus { outline: 0; box-shadow: none; }
.f9-section .f9-look__flecha:focus-visible { outline: 2px solid var(--f9-naranja); outline-offset: 2px; }
.f9-look__pista { display: flex; gap: clamp(16px, 2.4vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--f9-gutter); padding: 0 var(--f9-gutter) 8px; scrollbar-width: none; }
.f9-look__pista.is-animando { scroll-snap-type: none; }
.f9-look__pista::-webkit-scrollbar { display: none; }
.f9-look__item { flex: 0 0 clamp(240px, 28vw, 400px); scroll-snap-align: start; position: relative; color: inherit; text-decoration: none; }
.f9-look__ventana { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--f9-oscuro-2); border: 1px solid var(--f9-linea-osc); }
.f9-look--arco .f9-look__ventana { border-radius: 999px 999px 0 0; }
.f9-look__par { position: absolute; inset: -14% 0; will-change: transform; }
.f9-look__par img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .8s var(--f9-ease); }
.f9-look__item:hover .f9-look__par img { transform: scale(1.04); }
.f9-look__par .placeholder-svg { position: absolute; inset: 20%; width: 60%; height: 60%; fill: rgba(241,238,234,.25); }
.f9-look__pie { font-family: var(--f9-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; opacity: .8; }
.f9-look__pie b { color: var(--f9-naranja); font-weight: 400; }
@media (max-width: 749px) { .f9-look__item { flex-basis: 72%; } }

.f9-marquee--mono .f9-marquee__item, .f9-marquee--mono .f9-marquee__item:nth-child(3n+2) { font-family: var(--f9-mono); text-transform: uppercase; letter-spacing: .22em; font-size: 13px; padding: 18px 0; }
.f9-marquee--mono .f9-marquee__sep { margin: 0 2.2em; }

.f9-section h1, .f9-section h2, .f9-section h3, .f9-section h4 { color: inherit; }

/* catálogo: título como h1 */
.f9-section .f9-col__titulo h1 { font-size: var(--f9-col-size, clamp(52px, 8vw, 128px)); margin: 0; }