/* estilos.css — maquetación de la web de Malditas Locas (mobile first).
   Sin valores de marca escritos a mano: todo color, familia, tamaño y espacio viene de tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
  /* La cabecera fija tapa esta franja: los saltos de ancla y el foco con teclado se acomodan debajo */
  scroll-padding-top: calc(var(--alto-barra) + var(--esp-3));
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--texto-m);
  line-height: var(--interlineado);
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
picture { display: contents; }
source { display: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
/* Sobre fondo negro el contorno de foco pasa a crema */
.franja, .seccion--oscura, .pie, .placa { --foco: var(--placa-tinta); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono {
  width: var(--icono); height: var(--icono); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--trazo-icono);
  stroke-linecap: square; stroke-linejoin: miter;
}

.saltar {
  position: absolute; left: var(--esp-2); top: var(--esp-2); z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: var(--esp-2) var(--esp-4);
  background: var(--boton); color: var(--boton-tinta);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* ---------- Botón ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--tap);
  padding: var(--esp-3) var(--esp-5);
  background: var(--boton); color: var(--boton-tinta);
  border: var(--filete) solid var(--boton); border-radius: var(--radio);
  font-size: var(--texto-s); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duracion), color var(--duracion);
}
.boton:hover { background: var(--papel); color: var(--tinta); }
.boton--secundario { background: var(--papel); color: var(--tinta); }
.boton--secundario:hover { background: var(--boton); color: var(--boton-tinta); }
.boton--ancho { width: 100%; }
.boton:disabled, .boton:disabled:hover {
  background: var(--superficie); color: var(--tinta-suave); border-color: var(--linea); cursor: not-allowed;
}
.precio-neto {
  margin-top: var(--esp-1); color: var(--tinta-suave);
  font-size: var(--texto-xs); letter-spacing: var(--tracking-titulo); text-transform: uppercase;
}

.rotulo {
  font-size: var(--texto-xs); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
}
.nota { color: var(--tinta-suave); font-size: var(--texto-s); }
.etiqueta {
  position: absolute; left: var(--esp-2); top: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  background: var(--placa); color: var(--placa-tinta);
  font-size: var(--texto-xs); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; line-height: 1.3;
}

/* ---------- Cabecera: franja + barra ---------- */
.franja {
  padding: var(--esp-2) var(--margen);
  background: var(--placa); color: var(--placa-tinta);
  font-size: var(--texto-xs); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  text-align: center;
}
.franja__punto { color: var(--deco-sobre-negro); padding: 0 var(--esp-1); }

.cabecera { position: sticky; top: 0; z-index: 50; }
.barra {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--alto-barra);
  padding: 0 calc(var(--margen) - var(--esp-3));
  background: var(--papel);
  border-bottom: var(--filete) solid var(--linea);
}

.accion {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--esp-3);
  background: none; border: 0; cursor: pointer;
  font-size: var(--texto-s); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
}
.accion__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accion__cuenta {
  display: inline-grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 var(--esp-1);
  background: var(--boton); color: var(--boton-tinta);
  font-size: var(--texto-xs); letter-spacing: 0; line-height: 1;
}
.barra__menu { justify-self: start; }
.barra__menu .icono--cerrar, .barra__menu[aria-expanded="true"] .icono--abrir { display: none; }
.barra__menu[aria-expanded="true"] .icono--cerrar { display: block; }
.barra__acciones { justify-self: end; display: flex; }

.logo { display: block; color: var(--tinta); text-decoration: none; padding: var(--esp-1); }
.logo__marca { width: 2.5rem; height: 2.5rem; font-family: var(--fuente-titulos); }

/* Menú: panel desplegable en móvil (con JS); en línea desde 64em */
.menu__lista a {
  display: flex; align-items: center; min-height: var(--tap);
  text-decoration: none;
}
.menu__sub a { font-size: var(--texto-m); }

.js .menu {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--esp-3) var(--margen) var(--esp-6);
  background: var(--papel);
  border-bottom: var(--filete) solid var(--linea);
  display: none;
}
.js .menu.abierto { display: block; }
.menu__lista { display: grid; gap: var(--esp-1); font-size: var(--texto-l); }
.menu__lista > li + li { border-top: var(--filete) solid var(--linea); }
.menu__sub { padding: 0 0 var(--esp-3) var(--esp-4); }

/* Sin JS: el menú queda visible como fila con scroll propio, debajo de la barra */
html:not(.js) .barra { grid-template-columns: auto 1fr auto; }
html:not(.js) .barra__menu { display: none; }
html:not(.js) .menu { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
html:not(.js) .menu__lista { display: flex; gap: var(--esp-4); font-size: var(--texto-s); white-space: nowrap; }
html:not(.js) .menu__lista > li + li { border: 0; }

.buscador {
  padding: var(--esp-3) var(--margen);
  background: var(--papel);
  border-bottom: var(--filete) solid var(--linea);
}
.buscador__form { display: flex; gap: var(--esp-2); max-width: 40rem; margin: 0 auto; }
.buscador input {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--esp-3);
  background: var(--papel); border: var(--filete) solid var(--tinta); border-radius: var(--radio);
  font-size: var(--texto-m);
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--superficie); }
.hero__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
}
.hero__texto {
  position: absolute; left: var(--margen); right: var(--margen); bottom: var(--margen);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4);
}
.hero__titulo {
  font-family: var(--fuente-titulos); font-weight: var(--peso-normal);
  font-size: var(--texto-hero); line-height: 1.22;
  letter-spacing: var(--tracking-titulo);
}
/* Placa por renglón: si el título corta en dos líneas, cada una lleva su placa sólida */
.placa {
  background: var(--placa); color: var(--placa-tinta);
  padding: 0.04em 0.24em 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Secciones ---------- */
.seccion {
  max-width: var(--ancho-max); margin: 0 auto;
  padding: var(--esp-8) var(--margen);
}
.seccion + .seccion { border-top: var(--filete) solid var(--linea); }
.seccion__titulo {
  font-family: var(--fuente-titulos); font-weight: var(--peso-normal);
  font-size: var(--texto-xl); line-height: var(--interlineado-titulos);
  letter-spacing: var(--tracking-titulo); text-transform: uppercase;
}
.seccion__titulo::before {
  content: ""; display: block; width: var(--esp-7); height: 2px; margin-bottom: var(--esp-4);
  background: var(--deco);
}
.seccion__cabeza { margin-bottom: var(--esp-6); }

/* Caja de espera: marca lo que todavía no está (texto a definir o vuelta siguiente) */
.pendiente {
  padding: var(--esp-5);
  border: var(--filete) dashed var(--tinta-suave);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

/* ---------- Grilla y tarjetas de producto ---------- */
.grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6) var(--esp-4);
}
.tarjeta__enlace { display: block; text-decoration: none; }
.tarjeta__foto { position: relative; background: var(--superficie); margin-bottom: var(--esp-3); }
.tarjeta__foto img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  transition: opacity var(--duracion);
}
.tarjeta__enlace:hover img { opacity: 0.88; }
.tarjeta__nombre { font-size: var(--texto-s); font-weight: var(--peso-normal); line-height: 1.35; }
.tarjeta__enlace:hover .tarjeta__nombre,
.tarjeta__enlace:focus-visible .tarjeta__nombre { text-decoration: underline; }
.tarjeta__precio { margin-top: var(--esp-1); font-size: var(--texto-s); }
.seccion__cabeza .nota { margin-top: var(--esp-3); }
.coleccion + .coleccion { margin-top: var(--esp-8); }
.coleccion__titulo { margin-bottom: var(--esp-5); font-size: var(--texto-l); font-weight: var(--peso-normal); }

/* ---------- Buscador: resultados ---------- */
.buscador__estado { max-width: 40rem; margin: var(--esp-2) auto 0; color: var(--tinta-suave); font-size: var(--texto-s); }
.buscador__estado:empty { display: none; }
.buscador__resultados { max-width: 40rem; margin: 0 auto; }
.resultado {
  display: flex; justify-content: space-between; gap: var(--esp-4); align-items: center;
  min-height: var(--tap); padding: var(--esp-2) 0;
  border-bottom: var(--filete) solid var(--linea); text-decoration: none;
}
.resultado__precio { flex: none; }

/* ---------- Diálogos: ficha y carrito ---------- */
dialog {
  padding: 0; border: 0; background: var(--papel); color: var(--tinta);
  max-width: 100%; max-height: 100%;
}
dialog::backdrop { background: var(--velo); }
body:has(dialog[open]) { overflow: hidden; }
.dialogo__cerrar { position: absolute; right: var(--esp-2); top: var(--esp-2); z-index: 2; background: var(--papel); }

/* Ficha: pantalla completa en móvil; ventana de dos columnas desde 64em */
.ficha { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.ficha[open] { display: flex; flex-direction: column; }
/* El que scrollea es el cuerpo: la cruz de cerrar queda siempre a la vista */
.ficha__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ficha__galeria { position: relative; background: var(--superficie); }
.ficha__galeria img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ficha__info { display: grid; gap: var(--esp-4); align-content: start; padding: var(--esp-6) var(--margen) var(--esp-8); }
.ficha__muestra { color: var(--tinta-suave); font-size: var(--texto-s); }
.ficha__nombre {
  font-family: var(--fuente-titulos); font-weight: var(--peso-normal);
  font-size: var(--texto-xl); line-height: var(--interlineado-titulos);
}
.ficha__precio { font-size: var(--texto-l); }
.ficha__estado:empty, .carrito__estado:empty { display: none; }
.ficha__estado, .carrito__estado { font-size: var(--texto-s); }
.ficha__texto { padding-top: var(--esp-4); border-top: var(--filete) solid var(--linea); color: var(--tinta-suave); }

.talles { margin: 0; padding: 0; border: 0; }
.talles legend { margin-bottom: var(--esp-2); }
.talles__opciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.talle { position: relative; cursor: pointer; }
.talle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.talle > span {
  display: inline-grid; place-items: center;
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--esp-3);
  border: var(--filete) solid var(--tinta); font-size: var(--texto-s);
}
.talle input:checked + span { background: var(--boton); color: var(--boton-tinta); }
.talle input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.talle input:disabled + span {
  border-color: var(--linea); color: var(--tinta-suave); text-decoration: line-through; cursor: not-allowed;
}

.look { padding-top: var(--esp-5); border-top: var(--filete) solid var(--linea); }
.look .rotulo { margin-bottom: var(--esp-4); }
.look__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.look .tarjeta__nombre, .look .tarjeta__precio { font-size: var(--texto-xs); }
.look .etiqueta { display: none; }

/* Carrito: panel lateral */
.carrito[open] {
  display: flex; flex-direction: column;
  width: min(100%, var(--ancho-carrito)); height: 100%; margin: 0 0 0 auto;
}
.carrito__cabeza {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--margen);
  border-bottom: var(--filete) solid var(--linea);
}
.carrito__titulo {
  font-family: var(--fuente-titulos); font-weight: var(--peso-normal); font-size: var(--texto-l);
  letter-spacing: var(--tracking-titulo); text-transform: uppercase;
}
.carrito__cuerpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--esp-5); align-content: start; padding: var(--esp-5) var(--margen) var(--esp-6);
}
.carrito__vacio { color: var(--tinta-suave); }
.carrito__cuerpo > .boton { justify-self: start; }
.carrito__lista { display: grid; gap: var(--esp-4); }
.linea {
  display: grid; grid-template-columns: var(--foto-linea) 1fr auto; gap: var(--esp-3);
  padding-bottom: var(--esp-4); border-bottom: var(--filete) solid var(--linea);
}
.linea__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--superficie); }
.linea__nombre { font-size: var(--texto-s); line-height: 1.35; }
.linea__detalle { color: var(--tinta-suave); font-size: var(--texto-xs); margin-top: var(--esp-1); }
.linea__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-top: var(--esp-2); }
.linea__importe { font-size: var(--texto-s); white-space: nowrap; }
.cantidad { display: inline-flex; align-items: center; border: var(--filete) solid var(--tinta); }
.cantidad__boton {
  min-width: var(--tap); min-height: var(--tap); background: none; border: 0; cursor: pointer; font-size: var(--texto-l);
}
.cantidad__boton:disabled { color: var(--tinta-suave); cursor: not-allowed; }
.cantidad__valor { min-width: 1.5rem; text-align: center; font-size: var(--texto-s); }
.enlace-accion {
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--esp-2); background: none; border: 0; cursor: pointer;
  font-size: var(--texto-s); text-decoration: underline; text-underline-offset: 0.2em;
}

.grupo { margin: 0; padding: 0; border: 0; display: grid; gap: var(--esp-1); }
.grupo legend { margin-bottom: var(--esp-2); }
.opcion { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--tap); cursor: pointer; }
.opcion input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--tinta); flex: none; }
.opcion input:disabled + span { color: var(--tinta-suave); }

.resumen { margin: 0; padding-top: var(--esp-4); border-top: var(--filete) solid var(--linea); display: grid; gap: var(--esp-2); }
.resumen div { display: flex; justify-content: space-between; gap: var(--esp-4); font-size: var(--texto-s); }
.resumen dd { margin: 0; text-align: right; }
.resumen__total { padding-top: var(--esp-2); font-size: var(--texto-m) !important; }

/* ---------- Sección oscura: fashion film «El regreso» ---------- */
.seccion--oscura {
  max-width: none;
  padding-inline: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
  background: var(--placa); color: var(--placa-tinta);
}
.seccion--oscura .seccion__titulo::before { background: var(--deco-sobre-negro); }
.seccion--oscura .rotulo { color: var(--deco-sobre-negro); }
.seccion--oscura .pendiente { border-color: var(--placa-tinta); color: var(--placa-tinta); }
.seccion__cabeza .rotulo { margin-top: var(--esp-3); }
.seccion__bajada { margin-top: var(--esp-3); max-width: 40rem; }

.capitulos { display: grid; gap: var(--esp-7); }
.capitulo__medio { position: relative; background: var(--placa); }
.capitulo__medio img, .capitulo__medio video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.capitulo__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: none; border: 0; color: var(--placa-tinta); cursor: pointer;
}
.capitulo__play .icono {
  width: calc(var(--tap) + var(--esp-4)); height: calc(var(--tap) + var(--esp-4)); padding: var(--esp-3);
  background: var(--placa); border: var(--filete) solid var(--placa-tinta);
}
.capitulo__numero { margin-top: var(--esp-4); }
.capitulo__titulo {
  margin-top: var(--esp-1);
  font-family: var(--fuente-titulos); font-weight: var(--peso-normal); font-size: var(--texto-l);
}
.capitulo__dato { margin-top: var(--esp-2); font-size: var(--texto-s); }

/* ---------- Lookbook: tira con scroll propio ---------- */
.lookbook {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--esp-4);
  margin-inline: calc(-1 * var(--margen)); padding: 0 var(--margen) var(--esp-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
}
.look-foto { margin: 0; scroll-snap-align: start; }
.look-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--superficie); }
.look-foto__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-3); margin-top: var(--esp-2); font-size: var(--texto-s); }
.look-foto__pie a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- El local ---------- */
.local { display: grid; gap: var(--esp-5); align-items: start; }
.local__datos { margin: 0; display: grid; gap: var(--esp-4); }
.local__datos dt { margin-bottom: var(--esp-1); }
.local__datos dd { margin: 0; }
.local > .boton { justify-self: start; }
.mapa {
  display: grid; place-content: center; justify-items: center; gap: var(--esp-4);
  aspect-ratio: 4 / 3; padding: var(--esp-5); background: var(--superficie); text-align: center;
}
.mapa:has(iframe) { display: block; padding: 0; }
.mapa__texto { max-width: 24rem; color: var(--tinta-suave); font-size: var(--texto-s); }
.mapa__marco { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Pie ---------- */
.pie {
  padding: var(--esp-8) var(--margen) var(--esp-6);
  background: var(--placa); color: var(--placa-tinta);
  font-size: var(--texto-s);
}
.pie__adentro { max-width: var(--ancho-max); margin: 0 auto; display: grid; gap: var(--esp-4); }
.pie__marca {
  font-family: var(--fuente-titulos); font-size: var(--texto-l);
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
}
.pie .pendiente { border-color: var(--placa-tinta); color: var(--placa-tinta); }

@media (min-width: 40em) and (max-width: 63.99em) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Escritorio ---------- */
@media (min-width: 64em) {
  .barra { grid-template-columns: auto 1fr auto; gap: var(--esp-6); padding: 0 var(--margen); }
  .barra__menu { display: none; }
  .accion__texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .accion { padding: 0 var(--esp-3); }

  .js .menu, .menu {
    position: static; display: block; padding: 0; border: 0; background: none;
  }
  .menu__lista, html:not(.js) .menu__lista {
    display: flex; gap: var(--esp-6); font-size: var(--texto-s);
    letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  }
  .menu__lista > li + li { border: 0; }
  .menu__lista > li { position: relative; }
  .menu__sub {
    position: absolute; top: 100%; left: calc(-1 * var(--esp-4)); min-width: 14rem;
    padding: var(--esp-2) var(--esp-4);
    background: var(--papel); border: var(--filete) solid var(--linea);
    text-transform: none; letter-spacing: 0;
    display: none;
  }
  .menu__lista > li:hover > .menu__sub:not([hidden]),
  .menu__lista > li:focus-within > .menu__sub:not([hidden]) { display: block; }

  .hero__media img { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--alto-barra)); }

  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-7) var(--esp-5); }
  .capitulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-5); }
  .lookbook { grid-auto-columns: calc((100% - 2 * var(--margen) - 2 * var(--esp-4)) / 3.25); }
  .local { grid-template-columns: 1fr 2fr; }
  .mapa { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 16 / 9; }

  .ficha {
    width: min(var(--ancho-ficha), calc(100% - 2 * var(--margen))); height: auto;
    max-height: calc(100dvh - 2 * var(--esp-6)); margin: auto;
  }
  .ficha__cuerpo { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; }
  .ficha__galeria { position: sticky; top: 0; }
  .ficha__info { padding: var(--esp-7) var(--esp-6); }
  .pie__adentro { grid-template-columns: 1fr 2fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}