/* =====================================================================
   Second Chic — estilos de la tienda
   Paleta tomada del logo: índigo de fondo + sombra lavanda.
   Display: Barlow Condensed itálica (eco del logo). Texto: Barlow.
   ===================================================================== */

:root {
  --indigo: #3A319C;
  --indigo-profundo: #241E6B;
  --lavanda: #837EC1;
  --lavanda-clara: #EEEDF8;
  --lavanda-borde: #DCDAF0;
  --tinta: #1D1A33;
  --tinta-suave: #5E5A7D;
  --blanco: #FFFFFF;
  --rojo-etiqueta: #D8432F;

  /* Tintas de serigrafía vintage, sacadas de las remeras de la tienda */
  --mostaza: #F2B630;
  --mostaza-clara: #FDF1CF;
  --naranja: #EE6A2C;
  --naranja-clara: #FDE3D5;
  --turquesa: #1E9E99;
  --turquesa-clara: #D6F1EF;
  --magenta: #C23D8F;
  --magenta-clara: #F7DDEC;
  /* Franja setentosa: las rayas de las remeras de los 70 */
  --franja-70: linear-gradient(to bottom,
      var(--mostaza) 0 25%, var(--naranja) 25% 50%, var(--rojo-etiqueta) 50% 75%, var(--magenta) 75% 100%);

  --fuente-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 6px;
  --sombra-dura: 4px 4px 0 var(--lavanda);

  --bs-body-font-family: var(--fuente-texto);
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--blanco);
  --bs-link-color: var(--indigo);
  --bs-link-color-rgb: 58, 49, 156;
  --bs-link-hover-color: var(--indigo-profundo);
  --bs-link-hover-color-rgb: 36, 30, 107;
  --bs-primary: var(--indigo);
  --bs-primary-rgb: 58, 49, 156;
  --bs-border-radius: var(--radio);
  --bs-focus-ring-color: rgba(131, 126, 193, .45);
}

html, body {
  height: 100%;
}

body {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content-wrap {
  flex: 1 0 auto;
}

a {
  color: var(--indigo);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--indigo-profundo);
}

:focus-visible {
  outline: 3px solid var(--lavanda);
  outline-offset: 2px;
}

img {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .marquee {
    font-size: .8rem;
  }
}

/* ---------- Tipografía display ---------- */
.titulo-display {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--indigo);
  text-shadow: 3px 3px 0 var(--mostaza);
  margin: 0 0 1.25rem;
}

.texto-intro {
  font-size: 1.125rem;
  color: var(--tinta-suave);
  max-width: 34rem;
}

/* ---------- Botones ---------- */
.btn {
  font-family: var(--fuente-texto);
  font-weight: 600;
  border-radius: var(--radio);
}

.btn-primary {
  --bs-btn-bg: var(--indigo);
  --bs-btn-border-color: var(--indigo);
  --bs-btn-hover-bg: var(--indigo-profundo);
  --bs-btn-hover-border-color: var(--indigo-profundo);
  --bs-btn-active-bg: var(--indigo-profundo);
  --bs-btn-active-border-color: var(--indigo-profundo);
  --bs-btn-disabled-bg: var(--lavanda);
  --bs-btn-disabled-border-color: var(--lavanda);
  --bs-btn-focus-shadow-rgb: 131, 126, 193;
}

.btn-outline-primary {
  --bs-btn-color: var(--indigo);
  --bs-btn-border-color: var(--indigo);
  --bs-btn-hover-bg: var(--indigo);
  --bs-btn-hover-border-color: var(--indigo);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-active-bg: var(--indigo-profundo);
  --bs-btn-active-border-color: var(--indigo-profundo);
  --bs-btn-focus-shadow-rgb: 131, 126, 193;
}

.btn-light {
  --bs-btn-color: var(--indigo);
  --bs-btn-hover-color: var(--indigo-profundo);
}

.btn-link {
  --bs-btn-color: var(--tinta-suave);
  --bs-btn-hover-color: var(--indigo);
  text-decoration: underline;
  font-weight: 500;
}

.btn-lg {
  padding: .75rem 1.25rem;
  font-size: 1rem;
}

/* ---------- Franja superior ---------- */
.marquee {
  background: var(--mostaza);
  color: var(--indigo-profundo);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  padding: .4rem 0;
}

.marquee p {
  margin: 0;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--indigo);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-header::after,
.site-footer::before {
  content: "";
  display: block;
  height: 12px;
  background: var(--franja-70);
}

.site-header::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

.site-logo {
  height: 52px;
  width: auto;
  display: block;
}

.site-header .nav-link,
.site-header .nav-productos-toggle {
  color: var(--blanco);
  font-weight: 500;
  background: none;
  border: 0;
  padding: .5rem .75rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-productos-toggle:hover,
.site-header .show > .nav-productos-toggle {
  color: var(--lavanda-clara);
  text-decoration: underline;
  text-decoration-color: var(--lavanda);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-header .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
}

.nav-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blanco);
  font-size: 1.15rem;
}

.nav-cart-btn:hover {
  background: rgba(255, 255, 255, .12);
}

.nav-cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--blanco);
  color: var(--indigo);
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    padding: .5rem 0 1rem;
  }
}

/* Menú de categorías */
.dropdown-menu-categorias {
  min-width: 240px;
  padding: .25rem 0;
  border: 1px solid var(--lavanda-borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.dropdown-menu-categorias .dropdown-item {
  color: var(--tinta);
  padding: .55rem 1rem;
}

.dropdown-menu-categorias .dropdown-item:hover,
.dropdown-menu-categorias .dropdown-item:focus {
  background: var(--lavanda-clara);
  color: var(--indigo);
}

.nav-productos-accordion .accordion-button {
  font-weight: 500;
  padding: .6rem 1rem;
  color: var(--tinta);
}

.nav-productos-accordion .accordion-button:not(.collapsed) {
  background: var(--lavanda-clara);
  color: var(--indigo);
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .dropdown-menu-categorias {
    max-height: min(70vh, 420px);
    overflow-y: auto;
  }
}

/* Botón flotante de contacto */
.contacto-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1020;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--indigo);
  color: var(--blanco);
  font-size: 1.6rem;
  box-shadow: var(--sombra-dura);
  text-decoration: none;
}

.contacto-flotante:hover {
  color: var(--blanco);
  background: var(--indigo-profundo);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--indigo);
  color: var(--blanco);
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 4.5rem;
    align-items: end;
  }
}

.hero-contenido {
  max-width: 44rem;
}

.hero-titulo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3.25rem, 1.6rem + 6.4vw, 7.25rem);
  line-height: .86;
  letter-spacing: -.005em;
  margin: 0 0 1.75rem;
  text-shadow: .055em .055em 0 var(--lavanda);
  text-wrap: balance;
}

.hero-bajada {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  max-width: 32rem;
  color: var(--lavanda-clara);
  margin-bottom: 2rem;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero .btn-light {
  --bs-btn-bg: var(--mostaza);
  --bs-btn-border-color: var(--mostaza);
  --bs-btn-color: var(--indigo-profundo);
  --bs-btn-hover-bg: #FFC64A;
  --bs-btn-hover-border-color: #FFC64A;
  --bs-btn-hover-color: var(--indigo-profundo);
  --bs-btn-active-bg: #E3A41F;
  --bs-btn-active-border-color: #E3A41F;
  box-shadow: 4px 4px 0 var(--indigo-profundo);
}

/* ---------- Lista de categorías ("fechas de gira") ---------- */
.gira {
  color: var(--blanco);
}

.gira-titulo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  line-height: 1;
  text-shadow: 2px 2px 0 var(--lavanda);
  margin: 0 0 1rem;
}

.gira-lista {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  border-top: 2px solid rgba(255, 255, 255, .85);
}

.gira-lista li {
  border-bottom: 1px solid rgba(220, 218, 240, .28);
  break-inside: avoid;
}

.gira-lista a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .6rem .25rem;
  color: var(--blanco);
  text-decoration: none;
}

.gira-nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.gira-puntos {
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted rgba(220, 218, 240, .55);
  transform: translateY(-.3em);
}

.gira-cantidad {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--mostaza);
}

.gira-cantidad small {
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: .8rem;
  color: var(--lavanda-clara);
}

.gira-lista a:hover .gira-nombre,
.gira-lista a:focus-visible .gira-nombre {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--mostaza);
}

.gira-todas {
  color: var(--blanco);
  font-weight: 600;
  text-decoration-color: var(--lavanda);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.gira-todas:hover {
  color: var(--lavanda-clara);
}

/* Cuando hay banners, la lista va en una franja propia debajo del carrusel */
.franja-gira {
  background: var(--indigo);
  padding: 2.5rem 0 2.75rem;
}

@media (min-width: 768px) {
  .franja-gira .gira-lista {
    columns: 2;
    column-gap: 3rem;
  }
}

/* ---------- Franja de datos ---------- */
.franja-datos {
  background: var(--lavanda-clara);
  padding: 3rem 0;
  margin-top: 3.5rem;
}

/* La franja cierra el home pegada al footer */
#content-wrap:has(> .franja-datos:last-child) + .site-footer {
  margin-top: 0;
}

.datos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .datos-lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.datos-lista li {
  --tinta-dato: var(--mostaza);
  border-top: 6px solid var(--tinta-dato);
  padding-top: 1rem;
}

.datos-lista li:nth-child(2) { --tinta-dato: var(--turquesa); }
.datos-lista li:nth-child(3) { --tinta-dato: var(--naranja); }

.datos-lista strong {
  display: block;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--indigo);
  text-shadow: 2px 2px 0 var(--tinta-dato, var(--lavanda-borde));
  margin-bottom: .5rem;
}

.datos-lista span {
  display: block;
  color: var(--tinta-suave);
  max-width: 22rem;
}

/* ---------- Secciones de listado ---------- */
.seccion-destacados,
.seccion-recientes {
  padding: 3rem 0 1rem;
}

.seccion-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
}

.seccion-encabezado .titulo-display {
  margin: 0;
}

.link-ver-todo {
  font-weight: 600;
}

/* ---------- Tarjeta de prenda ---------- */
.prenda-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.prenda-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--lavanda-clara);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  container-type: inline-size;
}

.prenda-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin foto: cartel tipográfico con el modelo, en el estilo del logo */
.prenda-cartel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .6rem;
  padding: 2.75rem 7cqi 7cqi;
  overflow: hidden;
}

.prenda-cartel-modelo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.55rem, 1rem + 1.9vw, 2.35rem);
  font-size: clamp(1.4rem, 15cqi, 3.4rem);
  line-height: .9;
  color: var(--indigo);
  text-shadow: .06em .06em 0 var(--lavanda-borde);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prenda-cartel-nota {
  font-size: .8rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

/* Cada cartel toma una tinta: fondo claro y sombra del color, texto índigo */
.prenda-img-vacia,
.prenda-cartel-grande {
  --tono-fondo: var(--lavanda-clara);
  --tono-tinta: var(--lavanda);
  background: var(--tono-fondo);
}

/* En las grillas la tinta va rotando por posición, para que no se repita al lado */
.row > :nth-child(5n+2) .prenda-img-vacia, [data-tono="1"] { --tono-fondo: var(--mostaza-clara); --tono-tinta: var(--mostaza); }
.row > :nth-child(5n+3) .prenda-img-vacia, [data-tono="2"] { --tono-fondo: var(--turquesa-clara); --tono-tinta: var(--turquesa); }
.row > :nth-child(5n+4) .prenda-img-vacia, [data-tono="3"] { --tono-fondo: var(--naranja-clara); --tono-tinta: var(--naranja); }
.row > :nth-child(5n+5) .prenda-img-vacia, [data-tono="4"] { --tono-fondo: var(--magenta-clara); --tono-tinta: var(--magenta); }

.prenda-img-vacia .prenda-cartel-modelo,
.prenda-cartel-grande .prenda-cartel-modelo {
  text-shadow: .06em .06em 0 var(--tono-tinta);
}

/* Talle como la etiqueta del cuello de la remera */
.prenda-etiqueta-talle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 2.4rem;
  padding: .3rem .65rem .35rem;
  background: var(--indigo);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .03em;
  text-align: center;
  white-space: nowrap;
  border-radius: 0 0 4px 4px;
  outline: 1px dashed rgba(255, 255, 255, .5);
  outline-offset: -4px;
}

/* Sticker de precio: descuento o prenda nueva */
.prenda-sticker {
  position: absolute;
  top: .7rem;
  right: .6rem;
  padding: .2rem .55rem;
  background: var(--rojo-etiqueta);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.1;
  transform: rotate(-5deg);
  box-shadow: 2px 2px 0 var(--indigo-profundo);
}

.prenda-sticker-nueva {
  background: var(--mostaza);
  color: var(--indigo-profundo);
  box-shadow: 2px 2px 0 var(--indigo-profundo);
}

/* Etiqueta de descuento en línea (ficha de la prenda) */
.prenda-badge {
  background: var(--rojo-etiqueta);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: .95rem;
  padding: .15rem .5rem;
  border-radius: 3px;
}

.prenda-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .85rem 0 0;
}

.prenda-nombre {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 .2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prenda-nombre a {
  color: var(--tinta);
  text-decoration: none;
}

.prenda-nombre a:hover {
  color: var(--indigo);
  text-decoration: underline;
}

.prenda-meta {
  font-size: .875rem;
  color: var(--tinta-suave);
  margin: 0 0 .35rem;
}

.prenda-precio {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--indigo);
  margin: auto 0 .7rem;
  padding-top: .15rem;
}

.prenda-precio del {
  font-size: 1rem;
  color: var(--tinta-suave);
  font-weight: 600;
  margin-right: .25rem;
}

.btn-agregar {
  --bs-btn-bg: var(--lavanda-clara);
  --bs-btn-color: var(--indigo);
  --bs-btn-border-color: var(--lavanda-clara);
  --bs-btn-hover-bg: var(--indigo);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-hover-border-color: var(--indigo);
  --bs-btn-active-bg: var(--indigo-profundo);
  --bs-btn-active-color: var(--blanco);
  --bs-btn-active-border-color: var(--indigo-profundo);
  --bs-btn-disabled-bg: var(--lavanda-clara);
  --bs-btn-disabled-color: var(--tinta-suave);
  --bs-btn-focus-shadow-rgb: 131, 126, 193;
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* ---------- Páginas internas ---------- */
.pagina {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.pagina-angosta {
  max-width: 820px;
}

.breadcrumb {
  font-size: .875rem;
  margin-bottom: 1.25rem;
  --bs-breadcrumb-item-active-color: var(--tinta-suave);
}

.breadcrumb a {
  text-decoration: none;
}

.chip {
  display: inline-block;
  padding: .35rem .85rem;
  border: 1px solid var(--lavanda-borde);
  border-radius: 999px;
  color: var(--tinta);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--blanco);
}

.chip:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

.chip.activo {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--blanco);
}

/* ---------- Catálogo ---------- */
.catalogo-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.catalogo-encabezado .titulo-display {
  margin-bottom: .25rem;
}

.catalogo-cuenta {
  color: var(--tinta-suave);
  margin: 0;
}

.catalogo-chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .25rem 0 1rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

.catalogo-chips .chip {
  flex-shrink: 0;
}

.catalogo-vacio {
  padding: 3rem 0;
  text-align: center;
}

.catalogo-vacio p {
  font-size: 1.125rem;
  color: var(--tinta-suave);
}

/* ---------- Detalle ---------- */
.detalle-medidas {
  border: 1px solid var(--lavanda-borde);
  border-radius: var(--radio);
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
  max-width: 26rem;
}

.detalle-medidas-titulo {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}

.detalle-medidas-titulo i {
  color: var(--indigo);
  margin-right: .25rem;
}

.detalle-medidas dl {
  display: flex;
  gap: 2rem;
  margin: 0 0 .35rem;
}

.detalle-medidas dt {
  font-size: .8rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

.detalle-medidas dd {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--indigo);
  margin: 0;
}

.detalle-medidas p {
  font-size: .8rem;
  color: var(--tinta-suave);
  margin: 0;
}

.swiper-imagen-detalle {
  position: relative;
  border-radius: var(--radio);
  background: var(--lavanda-clara);
  --swiper-theme-color: var(--indigo);
  --swiper-navigation-size: 28px;
}

.swiper-imagen-detalle .swiper-slide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.sello-vendida {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  padding: .2rem .8rem;
  transform: rotate(-4deg);
  box-shadow: var(--sombra-dura);
}

.detalle-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}

.detalle-nombre {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
  line-height: 1.05;
  color: var(--tinta);
  margin-bottom: .75rem;
}

.detalle-precio {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--indigo);
  line-height: 1;
}

.detalle-precio del {
  font-size: 1.25rem;
  color: var(--tinta-suave);
}

.detalle-sin-impuestos {
  font-size: .8rem;
  color: var(--tinta-suave);
  margin: .5rem 0 1.25rem;
}

.detalle-descripcion {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 36rem;
}

.detalle-opciones {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

.detalle-opciones legend {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

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

.input__radio--label {
  min-width: 3rem;
  padding: .45rem .9rem;
  border: 1.5px solid var(--lavanda-borde);
  border-radius: var(--radio);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  background: var(--blanco);
}

.input__radio--label.agotado {
  color: var(--tinta-suave);
  background: var(--lavanda-clara);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: .7;
}

.input__radio:checked + .input__radio--label {
  border-color: var(--indigo);
  background: var(--indigo);
  color: var(--blanco);
}

.input__radio:focus-visible + .input__radio--label {
  outline: 3px solid var(--lavanda);
  outline-offset: 2px;
}

.detalle-unica {
  font-weight: 500;
  color: var(--indigo-profundo);
  margin-bottom: 1.25rem;
}

.detalle-unica i {
  color: var(--lavanda);
  margin-right: .25rem;
}

.cantidad-selector {
  max-width: 150px;
}

.detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.detalle-acciones .btn-primary {
  flex: 1 1 14rem;
}

.detalle-vendida {
  font-weight: 500;
  margin-bottom: 1rem;
}

.detalle-condiciones {
  list-style: none;
  padding: 1rem 0 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--lavanda-borde);
  font-size: .95rem;
  color: var(--tinta-suave);
}

.detalle-condiciones li {
  margin-bottom: .4rem;
}

.detalle-condiciones i {
  color: var(--indigo);
  width: 1.4rem;
}

.detalle-sku {
  font-size: .8rem;
  color: var(--tinta-suave);
  margin: .75rem 0 0;
}

/* ---------- Offcanvas carrito ---------- */
.offcanvas-carrito {
  --bs-offcanvas-width: min(420px, 95vw);
  display: flex;
  flex-direction: column;
}

.offcanvas-carrito .offcanvas-header,
#filtrosOffcanvas .offcanvas-header {
  border-bottom: 1px solid var(--lavanda-borde);
}

.offcanvas-title {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--indigo);
  margin: 0;
}

#carritoOffcanvasBody {
  overflow-y: auto;
  flex: 1 1 auto;
}

.carrito-vacio {
  text-align: center;
  padding: 3rem 0;
  color: var(--tinta-suave);
}

.oc-item {
  display: flex;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lavanda-borde);
}

.oc-item-img {
  flex-shrink: 0;
}

.oc-item-img img {
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--lavanda-clara);
}

.oc-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oc-item-nombre {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  line-height: 1.3;
}

.oc-item-meta {
  font-size: .85rem;
  color: var(--tinta-suave);
}

.oc-item-precio {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--indigo);
  margin-top: .2rem;
}

.offcanvas-carrito-footer {
  flex-shrink: 0;
  padding: 1rem;
  border-top: 1px solid var(--lavanda-borde);
  background: var(--blanco);
}

.offcanvas-carrito-footer:empty {
  display: none;
}

.oc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 1.1rem;
}

.oc-total span:last-child {
  font-family: var(--fuente-display);
  font-size: 1.6rem;
  color: var(--indigo);
}

.oc-nota {
  font-size: .85rem;
  color: var(--tinta-suave);
  margin: .25rem 0 .9rem;
}

/* ---------- Carrito ---------- */
.carrito-lista {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--lavanda-borde);
}

.carrito-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lavanda-borde);
}

.carrito-item-img img {
  width: 88px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--lavanda-clara);
}

.carrito-item-info {
  display: flex;
  flex-direction: column;
}

.carrito-item-nombre {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}

.carrito-item-meta {
  font-size: .9rem;
  color: var(--tinta-suave);
}

.carrito-item-precio {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--indigo);
  margin-top: .25rem;
}

.carrito-item-precio del {
  font-size: 1rem;
  color: var(--tinta-suave);
}

.carrito-item-quitar {
  padding: 0;
  font-size: .9rem;
}

.carrito-resumen {
  background: var(--lavanda-clara);
  border-radius: var(--radio);
  padding: 1.5rem;
}

.carrito-total,
.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.carrito-total strong,
.checkout-total strong {
  font-family: var(--fuente-display);
  font-size: 2rem;
  color: var(--indigo);
}

.carrito-pagos p {
  font-size: .95rem;
  margin-bottom: .5rem;
}

.carrito-pagos i {
  color: var(--indigo);
  width: 1.4rem;
}

.carrito-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 1.25rem;
}

/* ---------- Checkout ---------- */
.checkout-bloque {
  border: 0;
  padding: 0;
  margin: 0 0 2rem;
}

.checkout-bloque legend {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tinta);
  margin-bottom: 1rem;
}

.opciones-envio {
  display: grid;
  gap: .75rem;
}

@media (min-width: 576px) {
  .opciones-envio {
    grid-template-columns: 1fr 1fr;
  }
}

.opcion-envio {
  position: relative;
  cursor: pointer;
}

.opcion-envio input {
  position: absolute;
  opacity: 0;
}

.opcion-envio-caja {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 2px solid var(--lavanda-borde);
  border-radius: var(--radio);
  background: var(--blanco);
}

.opcion-envio input:checked + .opcion-envio-caja {
  border-color: var(--indigo);
  box-shadow: var(--sombra-dura);
}

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

.opcion-envio-titulo {
  font-weight: 700;
  font-size: 1.05rem;
}

.opcion-envio-detalle {
  font-size: .9rem;
  color: var(--tinta-suave);
}

.opcion-envio-pago {
  margin-top: auto;
  padding-top: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--indigo);
}

.checkout-resumen {
  background: var(--lavanda-clara);
  border-radius: var(--radio);
  padding: 1.5rem;
  position: sticky;
  top: 100px;
}

.checkout-resumen-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.checkout-items {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.checkout-items li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid var(--lavanda-borde);
}

.checkout-items img {
  width: 52px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--blanco);
}

.checkout-item-nombre {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
}

.checkout-item-meta {
  font-size: .85rem;
  color: var(--tinta-suave);
}

.checkout-item-precio {
  font-weight: 600;
}

.checkout-nota {
  font-size: .92rem;
  margin-bottom: 1rem;
}

.checkout-alternativa {
  font-size: .92rem;
  text-align: center;
  margin: 1rem 0 0;
}

/* ---------- Gracias ---------- */
.gracias-pedido {
  font-size: 1.15rem;
}

.gracias-bloque {
  background: var(--lavanda-clara);
  border-radius: var(--radio);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.gracias-bloque h2 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--indigo);
}

.datos-bancarios {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
  background: var(--blanco);
  border: 1px solid var(--lavanda-borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
}

.datos-bancarios dt {
  font-weight: 600;
}

.datos-bancarios dd {
  margin: 0;
  font-family: var(--fuente-texto);
  word-break: break-all;
}

.gracias-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* ---------- Contacto ---------- */
.contacto-canales {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.contacto-canales li {
  margin-bottom: .75rem;
  font-size: 1.1rem;
}

.contacto-canales a {
  font-weight: 600;
  text-decoration: none;
}

.contacto-canales i {
  width: 1.75rem;
  color: var(--indigo);
}

.contacto-form-caja {
  border: 1px solid var(--lavanda-borde);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.contacto-form-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

/* ---------- Formularios ---------- */
.form-label {
  font-weight: 500;
}

.form-control,
.form-select {
  border-color: var(--lavanda-borde);
  padding: .6rem .8rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 .2rem rgba(131, 126, 193, .35);
}

/* ---------- FAQ ---------- */
.faq-seccion {
  margin-bottom: 2rem;
}

.faq-seccion-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

.faq-accordion {
  --bs-accordion-border-color: var(--lavanda-borde);
  --bs-accordion-active-bg: var(--lavanda-clara);
  --bs-accordion-active-color: var(--indigo-profundo);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(131, 126, 193, .35);
}

.faq-accordion .accordion-button {
  font-weight: 600;
}

.faq-cierre {
  border-top: 1px solid var(--lavanda-borde);
  padding-top: 1.5rem;
}

.faq-legal {
  font-size: .9rem;
  color: var(--tinta-suave);
  margin-top: 1rem;
}

/* ---------- 404 ---------- */
.error-404 {
  text-align: center;
  padding-top: 4rem;
}

.error-codigo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  line-height: 1;
  color: var(--indigo);
  text-shadow: .06em .06em 0 var(--lavanda);
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  flex-shrink: 0;
  background: var(--indigo-profundo);
  color: var(--lavanda-clara);
  padding: 0 0 1.5rem;
  margin-top: 3rem;
}

.site-footer::before {
  margin-bottom: 3rem;
}

.footer-logo {
  height: 64px;
  width: auto;
  margin-bottom: .75rem;
}

.footer-lema {
  font-size: .95rem;
  max-width: 18rem;
  color: var(--lavanda-clara);
}

.footer-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mostaza);
  margin-bottom: .75rem;
}

.footer-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.footer-lista li {
  margin-bottom: .45rem;
}

.footer-lista a {
  color: var(--blanco);
  text-decoration: none;
}

.footer-lista a:hover {
  text-decoration: underline;
  color: var(--blanco);
}

.footer-lista i {
  width: 1.3rem;
  color: var(--lavanda);
}

.footer-lista-chica {
  font-size: .9rem;
}

.footer-lista-chica a {
  color: var(--lavanda-clara);
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin: 2rem 0 0;
  padding-top: 1rem;
  font-size: .85rem;
  color: var(--lavanda);
}

/* ---------- Utilidades heredadas ---------- */
.fs-12 { font-size: .8rem; }
.fs-14 { font-size: .95rem; }
.fs-12-16 { font-size: clamp(.8rem, .75rem + .25vw, 1rem); }
.text-accent { color: var(--indigo) !important; }

/* Carrusel de banners del home */
#carouselHomeBanners img {
  width: 100%;
  height: auto;
}

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

/* ---------- Catálogo: orden y talles ---------- */
.catalogo-orden {
  flex-shrink: 0;
  min-width: 10.5rem;
}

.catalogo-talles {
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  padding: 0 0 1rem;
  margin: -.5rem 0 1rem;
  scrollbar-width: thin;
}

.catalogo-talles-label {
  flex-shrink: 0;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  margin-right: .25rem;
}

.talle-chip {
  flex-shrink: 0;
  min-width: 2.6rem;
  padding: .3rem .6rem;
  border: 1.5px solid var(--lavanda-borde);
  border-radius: var(--radio);
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  background: var(--blanco);
}

.talle-chip:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

.talle-chip.activo {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--blanco);
}

@media (max-width: 575.98px) {
  .catalogo-encabezado {
    flex-direction: column;
    align-items: stretch;
  }
  .catalogo-orden {
    min-width: 0;
  }
}

.prenda-badge-nueva {
  background: var(--indigo);
}

/* ---------- Detalle: ficha y efectivo ---------- */
.detalle-ficha {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-size: .95rem;
}

.detalle-ficha span {
  font-weight: 600;
  color: var(--tinta-suave);
  margin-right: .2rem;
}

.detalle-efectivo {
  font-size: .95rem;
  color: var(--indigo-profundo);
  margin: -.5rem 0 1rem;
}

/* ---------- Checkout: líneas del resumen ---------- */
.checkout-linea {
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
  color: var(--tinta-suave);
  margin-bottom: .5rem;
}

.checkout-linea[hidden] {
  display: none;
}

/* ---------- Gracias: detalle del pedido ---------- */
.gracias-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gracias-items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--lavanda-borde);
}

.gracias-items li small {
  color: var(--tinta-suave);
}

.gracias-items .gracias-total {
  border-bottom: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--indigo-profundo);
}

/* ---------- Checkout: datos para la etiqueta ---------- */
.checkout-ayuda {
  font-size: .92rem;
  color: var(--tinta-suave);
  margin: -.25rem 0 1rem;
}

.form-label .opcional {
  font-weight: 400;
  color: var(--tinta-suave);
}

/* ---------- Ficha sin foto ---------- */
.prenda-cartel-grande {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.swiper-imagen-detalle .swiper-slide {
  container-type: inline-size;
}

.prenda-cartel-grande .prenda-cartel-modelo {
  font-size: clamp(2.6rem, 1.4rem + 4.5vw, 5rem);
  font-size: clamp(2.6rem, 14cqi, 6.5rem);
  -webkit-line-clamp: 5;
}

.prenda-cartel-grande .prenda-cartel-nota {
  font-size: .95rem;
}

/* Carrusel del inicio: en mobile los indicadores van arriba para no tapar el botón del banner */
@media (max-width: 599.98px) {
  #carouselHomeBanners .carousel-indicators {
    top: .75rem;
    bottom: auto;
    margin-bottom: 0;
  }
}

/* Checkout: envío a domicilio o a sucursal de Correo (con la API de MiCorreo) */
.opciones-correo {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.opcion-correo {
  position: relative;
  cursor: pointer;
}

.opcion-correo input {
  position: absolute;
  opacity: 0;
}

.opcion-correo span {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1.5px solid var(--lavanda-borde);
  border-radius: 999px;
  font-weight: 500;
  background: var(--blanco);
}

.opcion-correo input:checked + span {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--blanco);
}

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