/* ── Banner de cortes ──────────────────────────────────── */
.banner { position: relative; min-height: clamp(520px, calc(100svh - var(--alto-header)), 860px); display: flex; align-items: center; overflow: hidden; background: var(--papel); color: #fff; isolation: isolate; }
.banner__fotos { position: absolute; inset: 0; z-index: -2; }
.banner__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.banner__foto.activa { opacity: 1; }
/* PC: atrás la foto borrosa, adelante la foto cuadrada entera a la derecha (no corta la cabeza) */
.banner__relleno { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) brightness(0.42) saturate(1.15); transform: scale(1.25); }
.banner__img { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 62%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%); mask-image: linear-gradient(90deg, transparent, #000 24%); transform: scale(1.05); transition: transform 7s linear; }
.banner__foto.activa .banner__img { transform: scale(1); }
.banner__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 12, 0.7) 0%, rgba(10, 10, 12, 0.2) 50%, transparent 70%), linear-gradient(0deg, rgba(10, 10, 12, 0.5), transparent 35%); }
.banner__contenido { position: relative; width: 100%; padding: 70px clamp(24px, 5vw, 96px) 120px; display: grid; justify-items: start; gap: 22px; }
.banner__etiqueta { color: rgba(255, 255, 255, 0.85); }
.banner__titulo { font-size: clamp(56px, 8.6vw, 140px); line-height: 0.92; max-width: 11ch; }
.banner__titulo span { display: block; animation: banner-sube 0.9s var(--ease) both; }
.banner__titulo span:nth-child(2) { animation-delay: 0.12s; }
@keyframes banner-sube { from { opacity: 0; transform: translateY(30px); } }
.banner__titulo em { color: #fff; font-size: 1.12em; }
.banner__bajada { max-width: 40ch; font-size: clamp(16px, 1.5vw, 19px); color: rgba(255, 255, 255, 0.86); }
.banner__botones, .hero__botones { display: flex; flex-wrap: wrap; gap: 14px; }
.banner__botones { margin-top: 10px; }
.banner__controles { position: absolute; left: 0; right: 0; bottom: 34px; padding-inline: clamp(24px, 5vw, 96px); display: flex; align-items: center; gap: 14px; }
.banner__flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); color: #fff; transition: background 0.2s, border-color 0.2s; }
.banner__flecha:hover { background: #fff; color: var(--papel); border-color: #fff; }
.banner__flecha svg { width: 20px; height: 20px; }
.banner__puntos { display: flex; gap: 8px; }
.banner__punto { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.45); transition: width 0.3s var(--ease), background 0.3s; }
.banner__punto.activo { width: 30px; background: #fff; }

/* ── Cinta ─────────────────────────────────────────────── */
.cinta { position: relative; background: var(--papel); color: #fff; overflow: hidden; margin-block: 28px 18px; }
.cinta__pista { display: flex; align-items: center; gap: 30px; width: max-content; padding: 16px 0; animation: marquesina 44s linear infinite; font-family: var(--ff-titulo); text-transform: uppercase; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; }
.cinta__pista em { font-family: var(--ff-script); text-transform: none; font-style: normal; color: #fff; font-size: 1.15em; }
.cinta__pista i { font-style: normal; color: var(--rojo); font-size: 0.6em; }

/* ── Bloques ───────────────────────────────────────────── */
.bloque { padding-block: clamp(56px, 8vw, 110px) 0; }
.bloque--oscuro { margin-top: clamp(56px, 8vw, 110px); padding-block: clamp(56px, 8vw, 100px); background: var(--tinta-2); border-block: 1px solid var(--linea); }
.bloque__cab { margin-bottom: clamp(26px, 4vw, 48px); display: grid; gap: 14px; }
.bloque__cab--fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.bloque__cab--fila > div { display: grid; gap: 14px; }
.bloque__titulo { font-size: clamp(44px, 7vw, 100px); }

/* Categorías: tarjetas limpias; si tienen foto, se ve arriba */

/* Vitrina: fila que se desliza con tarjetas grandes */
.vitrina { padding-block: clamp(56px, 8vw, 110px) 0; overflow: hidden; }
.vitrina__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); }
.vitrina__cab > div:first-child { display: grid; gap: 14px; }
.vitrina__acciones { display: flex; align-items: center; gap: 22px; }
.vitrina__flechas { display: flex; gap: 8px; }
.vitrina__flecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--papel); transition: background 0.2s, color 0.2s; }
.vitrina__flecha:hover { background: var(--papel); color: #fff; }
.vitrina__flecha svg { width: 20px; height: 20px; }
.vitrina__pista { --borde: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))); display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde); padding: 6px var(--borde) 26px; scrollbar-width: none; }
.vitrina__pista::-webkit-scrollbar { display: none; }
.vit { flex: 0 0 clamp(250px, 25vw, 330px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 10px; background: #f2f2f4; border-radius: 22px; transition: background 0.35s var(--ease), color 0.35s, transform 0.35s var(--ease); }
.vit:hover { background: #111113; color: #fff; transform: translateY(-6px); }
.vit__foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #e7e7eb; }
.vit__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.vit:hover .vit__foto img { transform: scale(1.06); }
.vit__num { position: absolute; left: 14px; bottom: 4px; font-family: var(--ff-titulo); font-size: 64px; line-height: 1; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.vit__chip { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; background: var(--volt); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.vit__info { display: grid; gap: 4px; padding: 16px 8px 8px; }
.vit__info small { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
.vit__nombre { font-family: var(--ff-titulo); font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1; }
.vit__fila { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.vit__precio { font-family: var(--ff-titulo); font-size: 32px; line-height: 1; color: var(--volt); transition: color 0.35s; }
.vit:hover .vit__precio { color: #fff; }
.vit__ir { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #111113; color: #fff; transition: background 0.35s, transform 0.35s var(--ease); }
.vit:hover .vit__ir { background: var(--volt); transform: rotate(45deg); }
.vit__ir svg { width: 20px; height: 20px; }
.vit__cuotas { font-size: 12px; opacity: 0.6; }

/* Categorías: foto entera, texto blanco abajo y botón azul */
.categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; overflow: hidden; isolation: isolate; border-radius: 22px; background: #1b1b1f; color: #fff; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.cat:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(17, 17, 19, 0.18); }
.cat img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.cat:hover img { transform: scale(1.07); }
.cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 35%, rgba(10, 10, 12, 0.55) 62%, rgba(10, 10, 12, 0.9) 100%); }
.cat__num { position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #fff; }
.cat__pie { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; padding: 20px; }
.cat__nombre { grid-column: 1; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: #fff; }
.cat__frase { grid-column: 1; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.cat__flecha { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--volt); color: #fff; transition: transform 0.35s var(--ease), background 0.25s, color 0.25s; }
.cat:hover .cat__flecha { transform: rotate(45deg); background: #fff; color: var(--volt); }
.cat__flecha svg { width: 20px; height: 20px; }

/* Lookbook (solo si se cargan fotos) */
.lookbook { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(560px, 62vw, 860px); }
.look { position: relative; margin: 0; overflow: hidden; background: var(--tinta-3); border-radius: 12px; }
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.look:hover img { transform: scale(1.05); }
.look--1 { grid-row: 1 / 3; }
.look--4 { grid-column: 2 / 4; }
.look figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--papel); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

/* Local: foto de fondo y datos en el medio */
.local { position: relative; margin-top: clamp(56px, 8vw, 110px); min-height: clamp(520px, 70vh, 720px); display: grid; place-items: center; overflow: hidden; background: var(--papel); color: #fff; text-align: center; isolation: isolate; }
.local__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.local__velo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10, 10, 12, 0.6), rgba(10, 10, 12, 0.85)); }
.local__centro { display: grid; justify-items: center; gap: 20px; padding-block: 80px; }
.local__etiqueta { color: rgba(255, 255, 255, 0.85); justify-content: center; }
.local__titulo { font-size: clamp(46px, 7vw, 104px); }
.local__titulo em { color: #fff; }
.local__bajada { max-width: 44ch; color: rgba(255, 255, 255, 0.86); font-size: 17px; }
.local__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.local__dato { display: flex; align-items: center; gap: 12px; padding: 14px 20px; text-align: left; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); }
.local__dato svg { width: 24px; height: 24px; flex: none; }
.local__dato span { display: grid; font-weight: 700; font-size: 15px; }
.local__dato small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.local__dato a { text-decoration: underline; }
.local__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

/* Cierre */
.cierre { margin-top: clamp(56px, 8vw, 110px); padding-block: clamp(70px, 10vw, 140px); background: var(--tinta-2); color: var(--papel); border-block: 1px solid var(--linea); text-align: center; position: relative; overflow: hidden; }
.cierre .etiqueta-seccion { justify-content: center; }
.cierre__interior { display: grid; gap: 26px; justify-items: center; }
.cierre__titulo { font-size: clamp(54px, 9.5vw, 150px); line-height: 0.92; }
.cierre__titulo span { display: block; }
.cierre .hero__botones { justify-content: center; }

@media (max-width: 1000px) {
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner__relleno { display: none; }
  .banner__img { inset: 0; width: 100%; max-width: none; aspect-ratio: auto; object-position: center 25%; -webkit-mask-image: none; mask-image: none; }
  .banner__velo { background: linear-gradient(0deg, rgba(10, 10, 12, 0.9) 10%, rgba(10, 10, 12, 0.35) 70%); }
  .banner { align-items: flex-end; }
}
@media (max-width: 640px) {
  /* Celular: solo la foto y los botones, sin textos encima */
  .banner { min-height: 0; aspect-ratio: 4 / 5; }
  .banner__etiqueta, .banner__titulo, .banner__bajada { display: none; }
  .banner__velo { background: linear-gradient(0deg, rgba(10, 10, 12, 0.75), transparent 45%); }
  .banner__contenido { padding: 0 16px 64px; }
  .banner__botones { width: 100%; gap: 10px; }
  .banner__botones .btn { flex: 1 1 0; min-height: 50px; padding: 0 10px; font-size: 12px; gap: 8px; }
  .banner__controles { bottom: 22px; justify-content: center; padding-inline: 16px; }
  .banner__flecha { display: none; }
  .banner__punto { width: 7px; height: 7px; }
  .banner__punto.activo { width: 22px; }
  .local__dato { width: 100%; }
  .lookbook { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .look { aspect-ratio: 4 / 5; }
  .look--1 { grid-row: auto; }
  .look--4 { grid-column: auto; }
  .vitrina__flechas { display: none; }
  .categorias { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .categorias::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 64%; scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: 18px; }
  .cat__pie { padding: 16px; }
  .cat__nombre { font-size: 24px; }
  .cat__frase { font-size: 12px; }
  .cat__flecha { width: 38px; height: 38px; }
  .vit { flex-basis: 74%; }
}