/* ---------- Base ---------- */
:root {
  /* paleta de la marca: vino, naranja, fucsia y rosas (sacada de su placa de medios de pago) */
  --vino: #5C0023;           /* fondos oscuros: inicio en el celu, menú, "Tu ritmo, tu look", pie */
  --tinta: #6B0129;          /* texto */
  --tinta-suave: #8A3655;    /* texto secundario */
  --frambuesa: #B0336A;      /* links y acentos que tienen que leerse sobre fondo claro */
  --fucsia: #E65089;         /* detalles decorativos */
  --naranja: #FF914B;        /* acento: la franja y etiquetas sobre fondo oscuro */
  --papel: #FEE8F2;          /* fondo general, rosa pastel */
  --rosa: #FFACCC;           /* rosa chicle: catálogo, cabecera y el DELAUEM gigante */
  --rosa-claro: #FFE0EC;
  --linea: rgba(107, 1, 41, 0.14);
  --hover-lleno: #85143F;

  /* curva de resorte para toda la interfaz */
  --resorte: cubic-bezier(0.32, 0.72, 0, 1);

  --ancho: 1200px;
  --margen: 16px;

  color-scheme: light;
}

@media (min-width: 700px) {
  :root {
    --margen: 32px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -96px;
  z-index: 60;
  padding: 8px 16px;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 9999px;
}

.saltar:focus {
  top: 16px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.7s var(--resorte), transform 0.7s var(--resorte);
}

.boton:active {
  transform: scale(0.98);
}

.boton--lleno {
  background: var(--tinta);
  color: var(--papel);
}

.boton--lleno:hover {
  background: var(--hover-lleno);
  transform: translateY(-2px);
}

/* ---------- Cabecera mínima ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--margen);
  background: var(--rosa);
  color: var(--tinta);
  transition: background-color 0.7s var(--resorte), color 0.7s var(--resorte);
}

/* sobre la foto de inicio, que es clara, va transparente con el texto oscuro */
.cabecera.sobre-clara {
  background: transparent;
}

/* sobre las secciones oscuras (o con el menú abierto) va transparente y en claro */
.cabecera.sobre-foto,
.cabecera.con-menu {
  background: transparent;
  color: var(--papel);
}

/* sombra suave para que se lea también sobre la parte clara de la foto */
/* sombra para que se lea también sobre la parte más clara de la pared, sin poner una franja de fondo */
.cabecera.sobre-foto .cabecera__btn,
.cabecera.sobre-foto .marca__nombre {
  text-shadow: 0 1px 2px rgba(92, 0, 35, 0.55), 0 0 18px rgba(92, 0, 35, 0.7);
}

.cabecera.con-menu {
  z-index: 45;
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.marca img {
  width: 40px;
  height: 40px;
  padding: 2px;
  border-radius: 9999px;
  background: #FFFFFF;
  object-fit: contain;
}

.marca__nombre {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* "Menú" y "Pedido" son texto, sin cápsulas: una línea aparece debajo al pasar */
.cabecera__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  cursor: pointer;
}

.cabecera__btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s var(--resorte);
}

.cabecera__btn:hover::after,
.cabecera__btn[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.cabecera__cuenta {
  font-variant-numeric: tabular-nums;
}

.cabecera__cuenta::before {
  content: "(";
}

.cabecera__cuenta::after {
  content: ")";
}

.cabecera__cuenta[hidden] {
  display: none;
}

@media (min-width: 700px) {
  .cabecera {
    padding: 16px max(var(--margen), 5vw);
  }

  .cabecera__acciones {
    gap: 16px;
  }
}

/* ---------- Menú a pantalla completa ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 96px var(--margen) calc(32px + env(safe-area-inset-bottom));
  background: var(--vino);
  color: var(--papel);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--resorte);
}

.menu.abierto {
  clip-path: inset(0 0 0 0);
}

.menu__lista {
  display: grid;
  gap: 4px;
}

.menu__lista a {
  display: inline-block;
  color: var(--papel);
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s var(--resorte), transform 0.7s var(--resorte), color 0.7s var(--resorte);
}

.menu.abierto .menu__lista a {
  opacity: 1;
  transform: translateY(0);
}

.menu__lista a:hover {
  color: var(--rosa);
  transform: translateX(16px);
}

.menu__lista li:nth-child(1) a { transition-delay: 0.15s, 0.15s, 0s; }
.menu__lista li:nth-child(2) a { transition-delay: 0.2s, 0.2s, 0s; }
.menu__lista li:nth-child(3) a { transition-delay: 0.25s, 0.25s, 0s; }
.menu__lista li:nth-child(4) a { transition-delay: 0.3s, 0.3s, 0s; }
.menu__lista li:nth-child(5) a { transition-delay: 0.35s, 0.35s, 0s; }

.menu__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(254, 232, 242, 0.7);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.menu__redes {
  display: flex;
  gap: 24px;
}

.menu__redes a {
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
}

.menu__redes a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 700px) {
  .menu {
    padding: 128px max(var(--margen), 5vw) 48px;
  }

  .menu__lista a {
    font-size: 6rem;
  }
}

/* cada renglón sube desde atrás de una máscara */
.linea {
  display: block;
  overflow: hidden;
  /* lugar para las letras que bajan (g, p, y) sin que la máscara las corte */
  padding-bottom: 0.26em;
  margin-bottom: -0.18em;
}

.linea > span {
  display: inline-block;
  /* el degradé pinta solo dentro de la caja: se agranda abajo para incluir la g, p, y */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--tinta), var(--frambuesa));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.inicio .linea > span {
  background-image: linear-gradient(90deg, #FFFFFF, var(--rosa));
}

/* estado inicial antes de que entre la animación (solo si hay JS y movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js .revela,
  .js .linea > span,
  .js .cabecera {
    visibility: hidden;
  }
}

/* ---------- Catálogo ---------- */

/* fondo rosa polvo de la paleta: las prendas siguen sobre blanco */
.catalogo {
  padding-block: 80px 96px;
  background: var(--rosa);
}

.catalogo h2 {
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.catalogo .linea > span {
  background-image: linear-gradient(90deg, var(--vino), var(--frambuesa));
}

.catalogo__bajada {
  max-width: 32ch;
  color: var(--tinta);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 32px;
}

.catalogo__cuenta {
  color: var(--tinta);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* categorías: solo texto; la elegida en ciruela con una rayita debajo */
.afiches {
  display: flex;
  flex: 1 1 100%;
  gap: 24px;
  margin-inline: calc(-1 * var(--margen));
  padding: 0 var(--margen);
  overflow-x: auto;
  scrollbar-width: none;
}

.afiches::-webkit-scrollbar {
  display: none;
}

.afiche {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.7s var(--resorte);
}

.afiche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--resorte);
}

.afiche:hover {
  color: var(--tinta);
}

.afiche[aria-pressed="true"] {
  color: var(--tinta);
  font-weight: 600;
}

.afiche[aria-pressed="true"]::after {
  transform: scaleX(1);
}

.afiche:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
}

.grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
  margin-top: 32px;
}

.tarjeta[hidden] {
  display: none;
}

.tarjeta__link {
  display: block;
  text-decoration: none;
  border-radius: 24px;
}

.tarjeta__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 24px;
  background: #FFFFFF;
  transition: background-color 0.7s var(--resorte);
}

.tarjeta__foto img {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  transition: opacity 0.7s var(--resorte), transform 0.7s var(--resorte);
}

.tarjeta__foto .espalda {
  opacity: 0;
}

/* la primera prenda con "Todo" va en una tarjeta ancha */
.tarjeta--ancha {
  grid-column: span 2;
}

.tarjeta--ancha .tarjeta__foto {
  aspect-ratio: 3 / 2;
}

.tarjeta--ancha .tarjeta__foto img {
  inset: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
}

.tarjeta--ancha .tarjeta__nombre {
  font-size: 1.5rem;
  line-height: 2rem;
}

.tarjeta__ver {
  position: absolute;
  left: 50%;
  bottom: 16px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.7s var(--resorte), transform 0.7s var(--resorte);
}

@media (hover: hover) and (pointer: fine) {
  .tarjeta__link:hover .tarjeta__foto {
    background: var(--rosa-claro);
  }

  .tarjeta__link:hover .tarjeta__foto img {
    transform: scale(1.05) translateY(-8px);
  }

  .tarjeta__link:hover .tarjeta__foto img.frente.tiene-espalda {
    opacity: 0;
  }

  .tarjeta__link:hover .tarjeta__foto .espalda {
    opacity: 1;
  }

  .tarjeta__link:hover .tarjeta__ver {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.tarjeta__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
  margin-top: 16px;
  padding-inline: 4px;
}

.tarjeta__nombre {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.tarjeta__precio {
  font-weight: 500;
}

.vacio {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 32px;
  padding: 32px;
  border-radius: 24px;
  background: #FFFFFF;
  color: var(--tinta-suave);
}

.vacio[hidden] {
  display: none;
}

.vacio__titulo {
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.vacio .boton {
  margin-top: 16px;
}

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

@media (min-width: 768px) {
  .catalogo h2 {
    font-size: 6rem;
  }

  .afiches {
    gap: 32px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .afiche {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .grilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 24px;
  }

  .tarjeta__foto img {
    inset: 32px;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
  }

  .tarjeta--ancha .tarjeta__foto img {
    inset: 48px;
    width: calc(100% - 96px);
    height: calc(100% - 96px);
  }

  .tarjeta__nombre,
  .tarjeta__precio {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1100px) {
  .catalogo {
    padding-block: 128px;
  }

  .catalogo h2 {
    font-size: 8rem;
  }

  .grilla {
    gap: 64px 32px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .catalogo__bajada,
  .js .filtros {
    visibility: hidden;
  }
}

/* ---------- Ficha de producto ---------- */
/* reserva el lugar de la barra de scroll: al abrir la ficha o el pedido la página no se corre */
html {
  scrollbar-gutter: stable;
}

html.sin-scroll {
  overflow: hidden;
}

/* los diálogos no se pueden desplazar: el panel, mientras espera afuera para entrar,
   agrandaba el diálogo y el navegador lo corría para mostrarlo (el temblor).
   "clip" corta lo que sobra sin permitir ningún desplazamiento; "hidden" sí lo permitía */
.ficha,
.pedido {
  overflow: clip;
}

.ficha {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
}

.ficha::backdrop {
  background: rgba(92, 0, 35, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* en el celu: hoja que sube desde abajo */
.ficha__panel {
  position: absolute;
  inset: 48px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
  background: var(--papel);
}

.ficha__cerrar {
  position: sticky;
  top: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 12px 12px -56px auto;
  border: 1px solid var(--linea);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--tinta);
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.7s var(--resorte), background-color 0.7s var(--resorte);
}

.ficha__cerrar:hover {
  background: var(--rosa-claro);
  transform: rotate(90deg);
}

.ficha__fotos {
  padding: 12px 12px 0;
}

.ficha__foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--rosa-claro);
}

.ficha__foto img {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
}

.ficha__miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ficha__miniaturas[hidden] {
  display: none;
}

.ficha__miniaturas button {
  width: 64px;
  height: 64px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--rosa-claro);
  cursor: pointer;
  transition: border-color 0.7s var(--resorte);
}

.ficha__miniaturas button[aria-current="true"] {
  border-color: var(--tinta);
}

.ficha__miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha__info {
  display: grid;
  gap: 24px;
  padding: 24px var(--margen) calc(32px + env(safe-area-inset-bottom));
}

.ficha__info h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ficha__precio {
  margin-top: -16px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}

.ficha__desc {
  max-width: 48ch;
  color: var(--tinta-suave);
}

.opciones {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.opciones legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.opciones legend span {
  margin-left: 4px;
  color: var(--tinta-suave);
  font-weight: 400;
}

.opciones__colores,
.opciones__talles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* radios nativos escondidos detrás de botones visibles */
.opcion {
  position: relative;
}

.opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcion span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.7s var(--resorte), color 0.7s var(--resorte), border-color 0.7s var(--resorte), transform 0.7s var(--resorte);
}

.opcion span:hover {
  border-color: rgba(92, 0, 35, 0.4);
}

.opcion input:checked + span {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--papel);
}

.opcion input:focus-visible + span {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.opcion--color span {
  width: 48px;
  min-width: 0;
  padding: 0;
  border-radius: 9999px;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.opcion--color input:checked + span {
  background: var(--muestra);
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta);
}

.opcion--color span {
  background: var(--muestra);
}

.opciones__error {
  min-height: 1.25rem;
  margin-top: 8px;
  color: #A3263F;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.ficha__comprar {
  display: flex;
  gap: 12px;
}

.cantidad {
  display: flex;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: 9999px;
}

.cantidad button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--tinta);
  font-size: 1rem;
  cursor: pointer;
}

.cantidad button:hover {
  background: var(--rosa-claro);
}

.cantidad output {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.ficha__agregar {
  flex: 1;
}

/* en el celu el botón queda fijo abajo mientras se mira la ficha */
@media (max-width: 899px) {
  .ficha__comprar {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-inline: calc(-1 * var(--margen));
    padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.ficha__confianza {
  display: grid;
  gap: 8px;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ficha__confianza li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ficha__confianza .ph {
  font-size: 1.25rem;
  color: var(--tinta);
}

/* en compu: ventana centrada de dos columnas */
@media (min-width: 900px) {
  /* centrada con márgenes automáticos: el transform queda libre para GSAP */
.ficha__panel {
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    width: min(1040px, calc(100% - 64px));
    height: fit-content;
    max-height: calc(100% - 64px);
    margin: auto;
    border-radius: 24px;
  }

  .ficha__cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
  }

  .ficha__fotos {
    padding: 16px;
  }

  .ficha__foto {
    border-radius: 16px;
  }

  .ficha__info {
    align-content: start;
    padding: 48px 40px 40px 24px;
  }

  .ficha__info h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* ---------- Aviso ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 2 * var(--margen));
  padding: 4px 4px 4px 24px;
  border-radius: 9999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 32px);
  transition: opacity 0.7s var(--resorte), transform 0.7s var(--resorte);
}

.aviso.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.aviso button {
  flex: none;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.aviso button:hover {
  background: var(--rosa);
}

/* la prenda que vuela hasta el botón Pedido */
.vuela {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 96px;
  height: 96px;
  padding: 8px;
  border-radius: 16px;
  background: var(--rosa-claro);
  pointer-events: none;
}

.vuela img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Inicio con foto ---------- */
.boton--claro {
  background: var(--papel);
  color: var(--tinta);
}

.boton--claro:hover {
  background: var(--rosa);
  transform: translateY(-2px);
}

/* en el celu: la foto arriba y el texto abajo sobre ciruela */
.inicio {
  position: relative;
  overflow: hidden;
  background: var(--vino);
  color: var(--papel);
}

.inicio__foto {
  position: relative;
  height: 64svh;
  min-height: 420px;
  overflow: hidden;
}

/* la escena: todas las capas de la foto apiladas en el mismo lugar.
   Hace de "object-fit: cover" a mano, así las capas recortadas calzan justo sobre la foto */
.escena {
  --alto: max(64svh, 420px);
  --ancho: max(100vw, calc(var(--alto) * 1.7921));
  --px: 0.77;
  position: absolute;
  left: calc((100% - var(--ancho)) * var(--px));
  top: calc((100% - var(--ancho) / 1.7921) / 2);
  width: var(--ancho);
  aspect-ratio: 2000 / 1116;
}

.escena > img,
.escena__polvo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* luz que respira: un brillo cálido solo donde pega el sol */
.escena__luz {
  mix-blend-mode: screen;
  opacity: 0.12;
}

/* el nombre gigante pasa por detrás de la cabeza y los hombros, como en una tapa de revista */
.escena__gigante {
  position: absolute;
  left: 47%;
  top: 23%;
  color: var(--fucsia);
  font-size: calc(var(--ancho) * 0.075);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 0.9;
  pointer-events: none;
}

.escena__polvo {
  pointer-events: none;
}

.inicio__contenido {
  position: relative;
  padding: 32px var(--margen) 48px;
}

.inicio__marca {
  margin-bottom: 16px;
  color: var(--rosa);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.inicio h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (min-width: 420px) {
  .inicio h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.inicio__bajada {
  max-width: 40ch;
  margin-top: 16px;
  color: rgba(254, 232, 242, 0.72);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.inicio__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}

.inicio__bajar {
  display: none;
}

/* en compu: la foto ocupa toda la pantalla y el texto va sobre la pared en sombra */
@media (min-width: 900px) {
  .inicio {
    display: flex;
    align-items: center;
    min-height: 640px;
    height: 100svh;
  }

  .inicio__foto {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
  }

  .escena {
    --alto: max(100svh, 640px);
    --px: 0.5;
  }

  .escena__gigante {
    left: 40%;
    top: 17.5%;
    font-size: calc(var(--ancho) * 0.118);
  }

  .inicio__contenido {
    width: min(100%, 760px);
    padding: 96px 0 96px max(var(--margen), 5vw);
  }

  .inicio h1 {
    font-size: 3.75rem;
    line-height: 1;
  }

  /* la foto es clara: el texto va en vino sobre la pared y el botón lleno */
  .inicio {
    color: var(--tinta);
  }

  .inicio .linea > span {
    background-image: linear-gradient(90deg, var(--tinta), var(--frambuesa));
  }

  .inicio__marca {
    color: var(--frambuesa);
  }

  .inicio__bajada {
    color: var(--tinta);
  }

  .inicio .boton--claro {
    background: var(--tinta);
    color: var(--papel);
  }

  .inicio .boton--claro:hover {
    background: var(--hover-lleno);
  }

  .inicio__bajar {
    position: absolute;
    left: max(var(--margen), 5vw);
    right: max(var(--margen), 5vw);
    bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--tinta);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
  }

  .inicio__bajar .ph {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(107, 1, 41, 0.35);
    border-radius: 9999px;
    font-size: 1.125rem;
    transition: background-color 0.7s var(--resorte), color 0.7s var(--resorte);
  }

  .inicio__bajar:hover .ph {
    background: var(--tinta);
    color: var(--papel);
  }
}

@media (min-width: 1600px) {
  .inicio h1 {
    font-size: 4.5rem;
  }
}

/* tablets: dos columnas, así las prendas no quedan chicas */
@media (min-width: 768px) and (max-width: 899px) {
  .grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* notebooks grandes: el contenido usa más ancho */
@media (min-width: 1440px) {
  :root {
    --ancho: 1320px;
  }
}

/* monitores grandes (24" en adelante): el texto del inicio, la cabecera y el catálogo crecen con la pantalla */
@media (min-width: 1800px) {
  :root {
    --ancho: 1640px;
  }

  .catalogo__bajada {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .catalogo__cuenta {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .afiche {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .afiches {
    gap: 40px;
  }

  .grilla {
    gap: 80px 40px;
  }

  .tarjeta__nombre,
  .tarjeta__precio {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .tarjeta--ancha .tarjeta__nombre {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .tarjeta__ver {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 12px 24px;
  }

  .inicio__contenido {
    width: min(100%, 1000px);
  }

  .inicio h1 {
    font-size: 6rem;
  }

  .inicio__marca {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .inicio__bajada {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .inicio .boton,
  .cabecera__btn,
  .inicio__bajar {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .marca img {
    width: 48px;
    height: 48px;
  }

  .marca__nombre {
    font-size: 1.25rem;
  }
}

@media (min-width: 2400px) {
  :root {
    --ancho: 2160px;
  }

  .catalogo h2 {
    font-size: 9rem;
  }

  .tarjeta__nombre,
  .tarjeta__precio {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .inicio h1 {
    font-size: 8rem;
  }

  .inicio__contenido {
    width: min(100%, 1280px);
  }

  .inicio__bajada {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* ---------- Panel del pedido ---------- */
.pedido {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
}

/* oscurecido simple, sin desenfoque: desenfocar toda la página en cada cuadro hacía saltar la animación */
.pedido::backdrop {
  background: rgba(92, 0, 35, 0.45);
}

/* en el celu sube desde abajo; la entrada es una transición del navegador, más suave que animarla por código */
.pedido__panel {
  position: absolute;
  inset: 48px 0 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px 24px 0 0;
  background: var(--papel);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.6s var(--resorte);
}

.pedido__panel.visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pedido__panel {
    transition: none;
  }
}

.pedido__cabeza {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 24px var(--margen) 16px;
}

.pedido__cabeza h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pedido__cuantas {
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pedido__cerrar {
  position: static;
  align-self: center;
  margin: 0 0 0 auto;
}

.pedido__lista {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--margen);
}

.pedido__lista[hidden],
.pedido__pie[hidden],
.pedido__vacio[hidden] {
  display: none;
}

.linea-pedido {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  padding-block: 16px;
  overflow: hidden;
}

.linea-pedido + .linea-pedido {
  box-shadow: 0 -1px 0 var(--linea);
}

.linea-pedido__foto {
  display: block;
  width: 80px;
  height: 96px;
  padding: 8px;
  border-radius: 12px;
  background: var(--rosa-claro);
}

.linea-pedido__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.linea-pedido__datos {
  display: grid;
  align-content: start;
  gap: 2px;
}

.linea-pedido__nombre {
  font-weight: 600;
}

.linea-pedido__detalle {
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.linea-pedido__abajo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.linea-pedido__precio {
  font-weight: 600;
}

.linea-pedido__sacar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color 0.7s var(--resorte), color 0.7s var(--resorte);
}

.linea-pedido__sacar:hover {
  background: var(--rosa-claro);
  color: var(--tinta);
}

.cantidad--chica button {
  width: 36px;
  height: 36px;
}

.pedido__vacio {
  display: grid;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 32px var(--margen);
  color: var(--tinta-suave);
  text-align: center;
}

.pedido__vacio .ph {
  margin-bottom: 8px;
  color: var(--fucsia);
  font-size: 3rem;
}

.pedido__vacio-titulo {
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.pedido__vacio .boton {
  margin-top: 16px;
}

.pedido__pie {
  display: grid;
  gap: 16px;
  padding: 16px var(--margen) calc(24px + env(safe-area-inset-bottom));
  background: var(--papel);
  box-shadow: 0 -1px 0 var(--linea);
}

.pedido__resumen {
  display: grid;
  gap: 8px;
  margin: 0;
}

.pedido__resumen div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.pedido__resumen dt {
  color: var(--tinta-suave);
}

.pedido__resumen dd {
  margin: 0;
  color: var(--tinta-suave);
  text-align: right;
}

.pedido__total dt,
.pedido__total dd {
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.boton--whatsapp {
  gap: 8px;
  background: var(--tinta);
  color: var(--papel);
}

.boton--whatsapp .ph {
  font-size: 1.25rem;
}

.boton--whatsapp:hover {
  background: var(--hover-lleno);
  transform: translateY(-2px);
}

.pedido__nota {
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

/* en compu: panel lateral desde la derecha */
@media (min-width: 700px) {
  .pedido__panel {
    inset: 0 0 0 auto;
    width: min(440px, 100%);
    border-radius: 24px 0 0 24px;
    transform: translateX(100%);
  }

  .pedido__cabeza,
  .pedido__lista,
  .pedido__pie {
    padding-inline: 32px;
  }

  .pedido__cabeza {
    padding-top: 32px;
  }
}

/* ---------- Pie de página ---------- */

.pie {
  display: grid;
  gap: 48px;
  padding: 64px var(--margen) calc(32px + env(safe-area-inset-bottom));
  background: var(--vino);
  color: rgba(254, 232, 242, 0.72);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pie__marca img {
  width: 56px;
  height: 56px;
  padding: 2px;
  border-radius: 9999px;
  background: #FFFFFF;
  object-fit: contain;
}

.pie__nombre {
  color: var(--papel);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.pie__redes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--papel);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

.pie__redes .ph {
  font-size: 1.25rem;
}

.pie__redes a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pie__redes li[hidden] {
  display: none;
}

.pie__abajo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  box-shadow: 0 -1px 0 rgba(254, 232, 242, 0.15);
}

@media (min-width: 700px) {
  .pie {
    padding: 80px max(var(--margen), 5vw) 40px;
  }
}

/* "Consultar talle": abre WhatsApp en lugar de elegir talle */
.consultar-talle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--tinta);
  border-radius: 12px;
  color: var(--tinta);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.7s var(--resorte), color 0.7s var(--resorte);
}

.consultar-talle .ph {
  font-size: 1.25rem;
}

.consultar-talle:hover {
  background: var(--tinta);
  color: var(--papel);
}

.consultar-talle[hidden],
.opciones__talles[hidden] {
  display: none;
}

/* ---------- Pie: lo legal ---------- */
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}

.pie__arrepentimiento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--papel);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--rosa);
}

.pie__arrepentimiento .ph {
  font-size: 1.25rem;
  color: var(--rosa);
}

.pie__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
  list-style: none;
}

.pie__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.pie__links a:hover,
.pie__consumidor:hover strong {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* leyenda exigida por la Resolución 274/2021 */
.pie__consumidor {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid rgba(254, 232, 242, 0.25);
  border-radius: 12px;
  text-decoration: none;
}

.pie__consumidor span:first-child {
  color: var(--papel);
  font-weight: 600;
}

.pie__consumidor strong {
  color: var(--rosa);
  font-weight: 600;
}

.pie__fiscal img {
  display: block;
  width: 56px;
  height: auto;
  border-radius: 4px;
}

.pie__fiscal[hidden] {
  display: none;
}

/* ---------- Páginas legales ---------- */
.legal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px var(--margen);
}

.legal-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-volver:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--margen) 96px;
}

.legal h1 {
  max-width: 680px;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.legal__bajada {
  max-width: 680px;
  margin-top: 16px;
  color: var(--tinta-suave);
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-wrap: pretty;
}

.legal__indice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linea);
}

.legal__indice a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--frambuesa);
}

.legal__bloque {
  margin-top: 48px;
  scroll-margin-top: 24px;
}

.legal__bloque h2 {
  margin-bottom: 16px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

.legal__bloque h3 {
  margin: 24px 0 8px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.legal__bloque p,
.legal__bloque li {
  max-width: 680px;
  text-wrap: pretty;
}

.legal__bloque p + p {
  margin-top: 12px;
}

.legal__bloque ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 24px;
}

.legal__bloque a {
  color: var(--frambuesa);
  font-weight: 500;
  text-underline-offset: 3px;
}

.legal__nota {
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.legal__actualizado {
  margin-top: 64px;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* formulario de arrepentimiento */
.arrepentimiento {
  display: grid;
  gap: 24px;
  max-width: 520px;
  margin-top: 40px;
  padding: 32px;
  border-radius: 24px;
  background: #FFFFFF;
}

.campo {
  display: grid;
  gap: 8px;
}

.campo label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(107, 1, 41, 0.25);
  border-radius: 12px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  transition: border-color 0.3s var(--resorte), box-shadow 0.3s var(--resorte);
}

.campo textarea {
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--frambuesa);
  box-shadow: 0 0 0 3px rgba(176, 51, 106, 0.25);
}

.campo__ayuda {
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.arrepentimiento__error {
  color: #A3263F;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.arrepentimiento__error:empty {
  display: none;
}

.arrepentimiento .boton {
  width: 100%;
}

@media (max-width: 520px) {
  .arrepentimiento {
    padding: 24px 16px;
  }

  .legal h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

/* ---------- Franja que corre ---------- */
.franja {
  overflow: hidden;
}

.franja__cinta {
  padding-block: 20px;
  background: var(--naranja);
  color: var(--tinta);
}

.franja__pista {
  display: flex;
  width: max-content;
}

/* dos tramos iguales: al correr la mitad, el segundo queda donde estaba el primero y no se nota el salto */
.franja__tramo {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* una frase solo con el contorno, para que no sea todo igual */
.franja .hueca {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tinta);
}

/* un circulito blanco de separador */
.franja__tramo i {
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-radius: 9999px;
  background: #FFFFFF;
}

@media (prefers-reduced-motion: no-preference) {
  .franja__pista {
    animation: franja 40s linear infinite;
  }
}

@keyframes franja {
  to {
    transform: translateX(-50%);
  }
}


/* ---------- Tu ritmo, tu look ---------- */
.looks {
  padding-block: 80px 96px;
  background: var(--vino);
  color: var(--papel);
}

.looks__cabeza {
  display: grid;
  gap: 16px;
  align-items: end;
}

.looks h2,
.esencia h2 {
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* estos títulos son más largos: en el celu pueden pasar a otro renglón */
.looks .linea > span,
.esencia .linea > span {
  white-space: normal;
}

.looks .linea > span {
  background-image: linear-gradient(90deg, #FFFFFF, var(--rosa));
}

.looks__bajada {
  max-width: 32ch;
  color: rgba(254, 232, 242, 0.72);
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-wrap: pretty;
}

.looks__grilla {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}

.look--foto {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--frambuesa);
}

.look--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* oscurece solo abajo, para que el texto se lea sobre la foto */
.look--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(92, 0, 35, 0.85));
}

.look__texto {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 24px;
  left: 24px;
}

.look__etiqueta {
  color: var(--naranja);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.look h3 {
  margin: 8px 0 24px;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.look--lado {
  display: grid;
  gap: 24px;
  align-content: space-between;
}

.look--lado h3 {
  margin-bottom: 12px;
}

.look__arte {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--rosa);
}

.look__arte img {
  position: relative;
  z-index: 1;
  width: 55%;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 16px 12px rgba(107, 1, 41, 0.25));
}

/* "A tu ritmo" grande que pasa por detrás de la prenda */
.look__cinetico {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 0;
  color: var(--fucsia);
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  white-space: nowrap;
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  .look__cinetico {
    animation: cinetico 14s ease-in-out infinite alternate;
  }

  .look__arte img {
    animation: flota 6s ease-in-out infinite;
  }
}

@keyframes cinetico {
  to {
    transform: translateX(-35%);
  }
}

@keyframes flota {
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

.look__desc {
  max-width: 38ch;
  color: rgba(254, 232, 242, 0.72);
  text-wrap: pretty;
}

.look__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  color: var(--papel);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-underline-offset: 6px;
}

.look__link .ph {
  color: var(--rosa);
  transition: transform 0.5s var(--resorte);
}

.look__link:hover .ph {
  transform: translate(2px, -2px);
}

/* ---------- Mini respuestas ---------- */
.esencia {
  padding-block: 80px 96px;
  background: var(--papel);
}

.esencia__grilla {
  display: grid;
  gap: 40px;
}

.esencia .linea > span {
  background-image: linear-gradient(90deg, var(--vino), var(--frambuesa));
}

.esencia__bajada {
  margin-top: 24px;
  color: var(--tinta-suave);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.esencia__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.esencia__lista li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding-block: 24px;
  border-bottom: 1px solid var(--linea);
}

.esencia__lista li:first-child {
  padding-top: 0;
}

.esencia__num {
  padding-top: 2px;
  color: var(--frambuesa);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.esencia__lista h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.esencia__lista p {
  color: var(--tinta-suave);
  text-wrap: pretty;
}

@media (min-width: 700px) {
  .looks h2,
  .esencia h2 {
    font-size: 3rem;
  }
}

@media (min-width: 900px) {
  .franja__cinta {
    padding-block: 24px;
  }

  .franja__tramo {
    gap: 36px;
    padding-right: 36px;
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .franja .hueca {
    -webkit-text-stroke-width: 2px;
  }

  .looks__cabeza {
    grid-template-columns: 1fr auto;
  }

  .looks h2 {
    font-size: 3.75rem;
  }

  .looks__grilla {
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
  }

  .look--foto {
    min-height: 640px;
  }

  .look__texto {
    right: 32px;
    bottom: 32px;
    left: 32px;
  }

  .look h3 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .look__arte {
    min-height: 380px;
  }

  .look__arte img {
    height: 300px;
  }

  .look__cinetico {
    font-size: 6rem;
  }

  .esencia__grilla {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

@media (min-width: 1800px) {
  .franja__tramo {
    font-size: 3rem;
    line-height: 1;
  }

  .looks h2,
  .esencia h2 {
    font-size: 4.5rem;
  }

  .looks__bajada,
  .esencia__bajada {
    font-size: 1.25rem;
  }

  .look--foto {
    min-height: 820px;
  }

  .look__arte {
    min-height: 480px;
  }

  .look__arte img {
    height: 380px;
  }

  .esencia__lista h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .esencia__lista p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 2400px) {
  .looks h2,
  .esencia h2 {
    font-size: 6rem;
  }
}

/* ---------- Catálogo: fondo de bloques de color ---------- */
/* rosa y naranja de lado a lado; el naranja empieza justo donde empieza la última columna de prendas.
   --corte calcula ese lugar en cada pantalla */
.catalogo {
  --hueco: 12px;
  --cols: 2;
  --contenido: min(100% - 2 * var(--margen), var(--ancho));
  --corte: calc(50% + var(--contenido) / 2 - (var(--contenido) - (var(--cols) - 1) * var(--hueco)) / var(--cols) - var(--hueco) / 2);
  padding-bottom: 0;
  background: var(--papel);
}

/* los bloques arrancan a la altura de las fotos de la primera fila, no pegados a la franja */
.catalogo__fondo {
  margin-top: 32px;
  padding-bottom: 80px;
  background: linear-gradient(90deg, var(--rosa) var(--corte), var(--naranja) var(--corte)) no-repeat bottom / 100% calc(100% - 120px);
}

.catalogo .filtros {
  margin-top: 32px;
}

.catalogo .grilla {
  column-gap: var(--hueco);
}

.catalogo__cabeza {
  display: grid;
  gap: 16px;
  align-items: end;
}

@media (min-width: 768px) {
  .catalogo {
    --hueco: 24px;
  }
}

/* compu: el título ocupa las dos primeras columnas y la bajada cae sobre el naranja */
@media (min-width: 900px) {
  .catalogo {
    --cols: 3;
  }

  .catalogo__cabeza {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--hueco);
    align-items: end;
  }

  .catalogo h2 {
    grid-column: 1 / 3;
  }

  .catalogo__bajada {
    padding-left: calc(var(--hueco) / 2);
  }
}

@media (min-width: 1100px) {
  .catalogo {
    --hueco: 32px;
  }
}

@media (min-width: 1800px) {
  .catalogo {
    --hueco: 40px;
  }
}

.catalogo__fondo .grilla {
  margin-top: 0;
}