/* ============================================================
   PRINT SOUL — Estilos específicos de la HOME
   ============================================================ */

/* ---------- HERO STATION (video) ---------- */
.hero {
  position: relative; min-height: clamp(560px, 88vh, 920px);
  /* dvh: en celular la barra del navegador aparece y desaparece; con vh el
     hero cambia de alto y la página salta al hacer scroll. */
  min-height: clamp(560px, 88dvh, 920px);
  display: grid; align-items: end;
  color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #2a1d16, #4a3527);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,15,0.25) 0%, rgba(20,17,15,0.05) 35%, rgba(20,17,15,0.72) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding: var(--gutter); padding-bottom: var(--sp-8); }
.hero .eyebrow { color: rgba(255,255,255,0.85); display: block; margin-bottom: var(--sp-3); }
.hero h1 { color: #fff; max-width: 18ch; font-weight: 500; }
.hero .display { font-size: var(--fs-display); }
.hero__verse { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); color: rgba(255,255,255,0.86); margin-top: var(--sp-4); max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* Título de colección superpuesto (estructura D&G) */
.hero__text .hero__eyebrow { color: rgba(255,255,255,0.85); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.hero__text .hero__title { color: #fff; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2; }
.hero__scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; gap: 6px; color: rgba(255,255,255,0.75); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }
.hero__scroll .bar { width: 1px; height: 38px; background: rgba(255,255,255,0.5); animation: scrollPulse 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes scrollPulse { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- INTRO (bloque sólido de marca) ---------- */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.intro__text h2 { margin-bottom: var(--sp-3); }
.intro__text .lead { margin-bottom: var(--sp-4); }
.intro__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.intro__stats .num { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--accent); line-height: 1; }
.intro__stats .lbl { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.intro__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; }
.intro__media img, .intro__media .ph-fill { width: 100%; height: 100%; object-fit: cover; }
.intro__badge {
  position: absolute; right: -18px; bottom: 28px; z-index: 2;
  background: var(--bg); border: 1px solid var(--line); border-radius: 50%;
  width: 132px; height: 132px; display: grid; place-content: center; text-align: center;
  box-shadow: var(--shadow-md); padding: var(--sp-2);
}
.intro__badge .b-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
.intro__badge .b-txt { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- DESTACADOS ---------- */
.featured__cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }

/* ---------- TENDENCIAS (filtros + video 1:1 + productos al lado) ---------- */
.trends__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.chip {
  padding: 0.6em 1.3em; border: 1px solid var(--line-strong); border-radius: 0;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
/* 50/50 (referencia D&G) con el mismo margen lateral que las demás secciones */
.trends__layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-inline: var(--sp-5);
}
.trends__video { position: relative; min-height: clamp(560px, 88vh, 920px); min-height: clamp(560px, 88dvh, 920px); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-deep); isolation: isolate; }
.trends__video video, .trends__video img, .trends__video .ph-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Recorte inferior del video: oculta el rótulo PRINTSOULSHOP.COM quemado en el archivo */
.trends__video video { bottom: auto; height: 112%; object-position: center top; }
.trends__video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 52%); pointer-events: none; }
/* Banner estilo referencia: título + botón superpuestos abajo-izquierda */
.trends__video .banner-overlay { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); max-width: 80%; }
.trends__video .banner-title { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.04; letter-spacing: -0.01em; }
.trends__video .shop-now { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.95em 2em; border-radius: 0; transition: background var(--t), color var(--t); white-space: nowrap; }
.trends__video .shop-now:hover { background: var(--ink); color: var(--on-dark); }
.trends__side { display: grid; grid-template-rows: auto 1fr; padding: var(--sp-5) var(--gutter); }
.trends__side .product-grid { grid-template-columns: repeat(2, 1fr); }
/* Efecto packshot (referencia D&G): la prenda completa, centrada sobre blanco.
   Es un recurso de ESCRITORIO, para las miniaturas que acompañan al video.
   En móvil no aplica: ahí la prenda va a sangre, llenando su tarjeta como en
   el resto del sitio (ese 8% de aire la dejaba más estrecha que las demás
   secciones y rompía la alineación de la página). */
@media (min-width: 861px) {
  .trends__side .media { background: #fff; }
  .trends__side .media img { object-fit: contain; padding: 8%; }
}

/* ---------- TENDENCIAS — texto sobre imagen con velo oscuro (referencia cliente) ---------- */
.trend-tile .media { display: block; }
.trend-tile .media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(20, 17, 15, 0.32); transition: background var(--t);
}
.trend-tile:hover .media::after { background: rgba(20, 17, 15, 0.16); }
.trend-tile .t-label {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  color: #fff; font-size: clamp(0.82rem, 0.6rem + 0.5vw, 1rem); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; text-align: center; padding: var(--sp-3);
}

/* ---------- MODA SOSTENIBLE (carrusel auto derecha→izquierda) ---------- */
.sustain { position: relative; overflow: hidden; }
.sustain__head { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
/* Carrusel "Hero imágenes inferior": foto vertical COMPLETA (sin recortar) que
   se desliza sola de derecha a izquierda, fondo neutro a los lados (Ajustes #2). */
.sustain-slider { position: relative; width: 100%; height: clamp(540px, 88vh, 920px); overflow: hidden; background: var(--accent-tint); }
.sustain-track { display: flex; height: 100%; transition: transform 0.9s var(--ease); will-change: transform; }
.sustain-slide { position: relative; flex: 0 0 100%; height: 100%; }
.sustain-slide img, .sustain-slide .ph-fill { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.sustain-slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(20,17,15,0) 0%, rgba(20,17,15,0.55) 100%); pointer-events: none; }
.sustain-slide .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: var(--maxw-wide); margin-inline: auto; padding: var(--gutter); color: #fff; }
.sustain-slide .cap .eyebrow { color: rgba(255,255,255,0.85); display: block; margin-bottom: var(--sp-1); }
.sustain-slide .cap .c-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.05; color: #fff; }
.sustain-dots { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.sustain-dots button { width: 30px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.55); transition: background var(--t), width var(--t); }
.sustain-dots button[aria-current="true"] { background: #fff; width: 46px; }
/* En móvil el slider toma la proporción 4:5 de las fotos de producto: deja de
   competir con el hero por la pantalla completa y encaja en el ritmo. */
@media (max-width: 640px) { .sustain-slider { height: auto; aspect-ratio: 4/5; } }

/* ---------- REDES + CTA 10% ---------- */
.social-cta { text-align: center; }
.social-cta .display { color: #fff; max-width: 20ch; margin-inline: auto; line-height: 1.08; margin-bottom: var(--sp-4); }
.social-cta .badge-10 { display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); font-family: var(--font-accent); font-style: italic; margin-bottom: var(--sp-4); }
.social-cta .badge-10 b { font-size: 1.7rem; line-height: 1; color: #fff; }
.social-cta .badge-10 span { font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.social-links { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.social-links a { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.8em 1.5em; border: 1px solid rgba(255,255,255,0.3); border-radius: 0; color: #fff; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; transition: background var(--t-fast), border-color var(--t-fast); }
.social-links a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }
.social-links svg { width: 18px; height: 18px; }

/* ---------- CARRUSEL AUTOMÁTICO DE PRENDAS (solo móvil) ----------
   Las prendas avanzan de a una cada 4s. El margen lateral va en el
   contenedor y el recorte en el track: si ambos van en el mismo
   elemento, overflow recorta en el borde exterior (padding incluido)
   y la tarjeta siguiente asoma dentro del margen. */
/* El margen lateral NO lo pone el carrusel: ya lo dan sus contenedores
   (.container en "Los infaltables", .trends__side junto al video), que son
   los mismos 16px de la sección de tendencias. Ponerlo aquí lo duplicaba y
   esa fila quedaba más adentro que el resto de la página. */
.auto-carousel { padding-inline: 0; }
.auto-carousel__track { overflow: hidden; }
body[data-page="inicio"] .auto-carousel .product-grid {
  width: auto;
  margin-left: 0;
  padding-inline: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - var(--sp-2) / 2);
  gap: var(--sp-2);
  will-change: transform;
}
.auto-carousel .product-card { min-width: 0; }

/* Variante de una sola prenda: foto alta como el hero, con el mismo
   margen lateral que tendencias y que el resto del home. */
body[data-page="inicio"] .auto-carousel--full .product-grid {
  grid-auto-columns: 100%;
  gap: 0;
}
/* Alta como el hero: la prenda manda en la pantalla y llena su tarjeta
   de lado a lado (el packshot con 8% de aire quedó restringido a escritorio). */
.auto-carousel--full .product-card .media {
  aspect-ratio: auto; height: 78vh; height: 78dvh;
}
/* La etiqueta vertical se oculta: a este tamaño estorba (lo aprobó el cliente) */
.auto-carousel--full .product-card .badge { display: none; }
/* El texto va centrado bajo la foto (el margen ya lo da el contenedor) */
.auto-carousel--full .product-card .info { text-align: center; }

/* ---------- RESPONSIVE HOME ---------- */
/* Todo el rango móvil (el mismo hasta el que se monta el carrusel).
   El margen lateral de la sección del video lo pone UNA sola capa: el
   layout, alineado a la retícula --edge. Su base de escritorio trae
   padding-inline de 32px (--sp-5) — el margen de escritorio — y esa capa
   fantasma era la que sumaba 48px en el celular (32 del layout + 16 del
   bloque interior), medidos con DevTools. Las celdas van a hueso. */
@media (max-width: 860px) {
  .trends__layout { padding-inline: var(--edge); }
  .trends__side { padding: var(--sp-5) 0; }
}

@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; gap: var(--sp-5); }
  .intro__media { order: -1; aspect-ratio: 16/10; }
  .trends__layout { grid-template-columns: 1fr; }
  .trends__video { aspect-ratio: 16/10; min-height: 0; }
}
@media (max-width: 640px) {
  .intro__stats { gap: var(--sp-3); }
  .sustain__head { grid-template-columns: 1fr; }
  .trends__side .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* Altura del hero: alta para que la portada tenga presencia, pero no toda
     la pantalla. Que asome el arranque de la sección siguiente es lo que
     hace que la página se lea continua y no como pantallas sueltas. */
  .hero { min-height: 86vh; min-height: 86dvh; }
  .hero__inner { padding-bottom: var(--sp-7); text-align: center; }
  .hero__cta { justify-content: center; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__verse { font-size: 1rem; margin-top: var(--sp-3); }
  .hero h1, .hero .display { letter-spacing: 0.12em; }
  .social-cta .display, .section--deep .display { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
  /* El indicador de scroll estorba sobre el texto centrado en pantallas cortas */
  .hero__scroll { display: none; }
}