/* ============================================================
   FLORENTI V16 · pages/home.css — capítulos de «inicio» (zona A2)
   Dirección «Galería»: capítulos casi a viewport, scroll-snap
   proximity, packshots fundidos y tipografía Fraunces gigante.
   Este archivo SOLO compone; keyframes y reveals viven en
   motion.css (A6). Los estados aquí son los FINALES sin JS.
   ============================================================ */

@layer pages {

  /* Scroll continuo: el snap vertical saltaba sobre las piezas al terminar
     un gesto largo. Solo el raíl horizontal conserva su selección por snap. */
  html { scroll-snap-type: none; }

  /* En táctil el dedo debe conservar el control continuo: el snap vertical
     hacía que la página saltase al soltar el gesto. */

  .p-home__chapter {
    position: relative;
    min-height: min(92svh, 1120px);
    scroll-snap-align: start;
  }

  /* ------------------------------------------------------------
     Capítulo 1 · Portada
     ------------------------------------------------------------ */
  /* La portada la compone `fairytale.css` (fotografía a sangre, velo y
     columna de texto a la izquierda). Aquí queda su esqueleto. */
  .p-home__hero {
    position: relative;
    display: grid;
    overflow: clip;
  }

  .p-home__hero-inner {
    position: relative;
    display: grid;
    margin-inline: auto;
  }

  /* A la izquierda, sobre el velo oscuro y en la columna del texto: a la
     derecha compartía esquina con el pie de foto y se perdía en el mármol. */
  .p-home__scroll-cue {
    position: absolute;
    left: max(var(--page-pad), calc((100vw - var(--page-max)) / 2));
    bottom: var(--space-5);
    z-index: 2;
    display: none;
    align-items: center;
    gap: 12px;
    font: 600 11px / 1 var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }

  .p-home__scroll-cue i {
    width: 1px;
    height: 48px;
    overflow: hidden;
    background: var(--hairline);
  }

  .p-home__scroll-cue i::after {
    content: "";
    display: block;
    width: 100%;
    height: 55%;
    background: var(--wine);
  }

  .p-home__kicker { max-width: 100%; }

  .p-home__title {
    z-index: 2;
    align-self: center;
    row-gap: 0.02em;
    font-weight: 345;
  }

  .p-home__title-line {
    display: block;
    width: fit-content;
  }

  .p-home__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
  }

  /* — Enlace editorial propio de la página — */
  /* inline-block + padding: el enlace suelto es un CTA, no texto corrido,
     y necesita 24px de alto real (WCAG 2.2 · 2.5.8). */
  .p-home__link {
    display: inline-block;
    padding-block: 5px;
    color: var(--cocoa);
    font: 600 var(--text-micro) / 1.2 var(--font-sans);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: underline 1px;
    text-decoration-color: var(--brass);
    text-underline-offset: 6px;
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out),
                text-underline-offset var(--dur-ui) var(--ease-back);
  }

  /* La línea se separa al apuntar: el enlace «respira» sin moverse. */
  .p-home__link:hover {
    color: var(--wine);
    text-decoration-color: var(--wine);
    text-underline-offset: 9px;
  }

  .p-home__link--light { color: var(--porcelain); }

  .p-home__link--light:hover { color: var(--white); }

  /* ------------------------------------------------------------
     Capítulo 2 · Cinta manifiesto (estado final estático;
     la traslación continua la define motion.css sobre .f-marquee)
     ------------------------------------------------------------ */
  .p-home__manifesto { overflow: clip; }

  /* La maquetación y animación de .f-marquee viven en motion.css (A6);
     aquí solo tipografía y ritmo. El espaciado va EN cada item
     (uniforme) para que el bucle clonado sea continuo. */
  .p-home__manifesto .f-marquee__track > * {
    padding-inline: clamp(13px, 1.8vw, 26px);
  }

  .p-home__manifesto .f-marquee__item {
    white-space: nowrap;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 350;
    letter-spacing: -0.01em;
  }

  .p-home__manifesto .f-marquee__item em {
    font-style: italic;
    font-weight: 330;
    color: var(--wine);
  }

  .p-home__manifesto .f-marquee__sep {
    font-size: clamp(16px, 2vw, 26px);
    align-self: center;
  }

  /* ------------------------------------------------------------
     Capítulo 3 · La selección — raíl horizontal con snap nativo
     ------------------------------------------------------------ */
  .p-home__featured {
    display: grid;
    align-content: center;
    row-gap: clamp(26px, 4.4svh, 46px);
  }

  .p-home__featured-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .p-home__featured-heading {
    display: grid;
    row-gap: var(--space-3);
  }

  .p-home__featured-head h2 { font-size: var(--text-title); }

  .p-home__rail-nav {
    display: flex;
    gap: var(--space-2);
    padding-bottom: 6px;
  }

  .p-home__rail-btn {
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--cocoa);
    cursor: pointer;
    transition: transform var(--dur-enter) var(--ease-spring),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }

  .p-home__rail-btn svg { width: 20px; height: 20px; }

  .p-home__rail-btn:hover:not(:disabled) {
    background: var(--wine);
    border-color: var(--wine);
    color: var(--white);
  }

  .p-home__rail-btn:active:not(:disabled) {
    transform: scale(0.88);
    transition-duration: var(--dur-instant);
  }

  .p-home__rail-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .p-home__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(74vw, clamp(280px, 30vw, 430px));
    column-gap: clamp(14px, 2vw, 30px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: max(var(--page-pad), calc((100% - var(--page-max)) / 2));
    scroll-padding-inline: max(var(--page-pad), calc((100% - var(--page-max)) / 2));
    padding-block: 6px var(--space-4);
    scrollbar-width: none;
  }

  .p-home__rail::-webkit-scrollbar { display: none; }

  .p-home__rail > * { scroll-snap-align: start; scroll-snap-stop: always; }

  /* Estado vacío (antes de la integración JS): conserva el ritmo del capítulo. */
  .p-home__rail:empty {
    min-height: clamp(320px, 44svh, 500px);
    border-block: 1px dashed var(--hairline);
  }

  .p-home__featured-foot { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; }

  /* Otoño comparte composición y movimiento con la selección. */
  .p-home__autumn { border-bottom: 1px solid var(--hairline); }
  .p-home__autumn .f-card__badge { top: auto; bottom: 12px; max-width: calc(100% - 24px); white-space: normal; }

  /* ------------------------------------------------------------
     Capítulo 4 · Lookbook — collage inmersivo y pegajoso
     ------------------------------------------------------------ */
  /* La escena vive en `fairytale.css`: allí se resuelven fondo, alto,
     rejilla y tipografía. Aquí solo queda lo que aquella capa no toca. */
  .p-home__lookbook { position: relative; }

  .p-home__lookbook-sticky { gap: clamp(34px, 5vw, 88px); }

  .p-home__lookbook-copy {
    display: grid;
    justify-items: start;
  }

  /* ------------------------------------------------------------
     Categorías · escaparate editorial siempre visible
     ------------------------------------------------------------ */
  .p-home__cats {
    display: grid;
    row-gap: clamp(30px, 5vw, 64px);
    padding-block: clamp(72px, 10svh, 132px);
    overflow: clip;
    background: var(--paper);
  }

  .p-home__cats-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    align-items: end;
    gap: clamp(28px, 6vw, 96px);
  }

  .p-home__cats-head > div { display: grid; gap: var(--space-3); }

  .p-home__cats-head h2 {
    max-width: 11ch;
    font-size: clamp(54px, 6.2vw, 94px);
    line-height: .94;
  }

  .p-home__cats-head h2 em { color: var(--wine); }

  .p-home__cats-intro {
    max-width: 38ch;
    padding-bottom: .5em;
    color: var(--muted);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.7;
  }

  .p-home__cats-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(310px, 36svh));
    gap: clamp(14px, 1.5vw, 24px);
  }

  .p-home__cat {
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--cocoa);
    text-decoration: none;
    transform: translateZ(0);
  }

  .p-home__cat--bags { grid-column: 1 / span 6; grid-row: 1; background: var(--grain), var(--wine-deep); color: var(--porcelain); }
  .p-home__cat--belts { grid-column: 7 / -1; grid-row: 1; background: #e9e7e2; }
  .p-home__cat--wallets { grid-column: 1 / span 6; grid-row: 2; background: #e8ddd8; }
  .p-home__cat--scarves { grid-column: 7 / -1; grid-row: 2; background: var(--grain), var(--wine-deep); color: var(--porcelain); }

  .p-home__cat-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .p-home__cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease-out), filter 1.6s var(--ease-out);
  }

  /* Las dos tarjetas oscuras funden la foto con el fondo vino: con fondo
     claro y velo encima, «Bolsos» mostraba un corte gris junto a la foto. */
  .p-home__cat--bags .p-home__cat-media,
  .p-home__cat--scarves .p-home__cat-media {
    left: 34%;
    mask-image: linear-gradient(90deg, transparent, #000 18%);
  }

  .p-home__cat--scarves .p-home__cat-media img { object-position: 50% 55%; }

  .p-home__cat--bags .p-home__cat-media img {
    object-position: 50% 73%;
    filter: saturate(.87) contrast(1.02) brightness(.89);
  }

  .p-home__cat--bags::after,
  .p-home__cat--scarves::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Arriba también vela: el nombre caía sobre la pared clara de la foto. */
    background:
      linear-gradient(180deg, rgb(34 12 17 / 42%), rgb(34 12 17 / 2%) 34%, rgb(34 12 17 / 77%) 100%),
      linear-gradient(90deg, rgb(34 12 17 / 34%), transparent 64%);
    pointer-events: none;
  }

  .p-home__cat--wallets .p-home__cat-media,
  .p-home__cat--belts .p-home__cat-media {
    left: 36%;
    overflow: hidden;
  }

  .p-home__cat--wallets .p-home__cat-media img,
  .p-home__cat--belts .p-home__cat-media img {
    object-position: 70% 62%;
    mix-blend-mode: multiply;
    filter: saturate(.86) contrast(1.04);
    transform: scale(1.04);
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 100%);
  }

  .p-home__cat--wallets::after,
  .p-home__cat--belts::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgb(249 244 238 / 98%) 0%, rgb(249 244 238 / 82%) 38%, transparent 74%);
    pointer-events: none;
  }

  .p-home__cat-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
  }

  .p-home__cat-name {
    max-width: 100%;
    font: 360 clamp(48px, 5.2vw, 82px)/.92 var(--font-display);
    letter-spacing: -.025em;
  }

  .p-home__cat--wallets .p-home__cat-name,
  .p-home__cat--belts .p-home__cat-name { font-size: clamp(40px, 3.7vw, 62px); }

  .p-home__cat-cue {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
    font: 650 11px/1 var(--font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .p-home__cat-cue i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 400 17px/1 var(--font-sans);
    transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), rotate var(--dur-ui) var(--ease-emph);
  }

  @media (hover: hover) and (pointer: fine) {
    .p-home__cat:hover .p-home__cat-media img,
    .p-home__cat:focus-visible .p-home__cat-media img { transform: scale(1.04); filter: saturate(.98) contrast(1.04); }

    .p-home__cat:hover .p-home__cat-cue i,
    .p-home__cat:focus-visible .p-home__cat-cue i { rotate: 45deg; }

    .p-home__cat--bags:hover .p-home__cat-cue i,
    .p-home__cat--bags:focus-visible .p-home__cat-cue i,
    .p-home__cat--scarves:hover .p-home__cat-cue i,
    .p-home__cat--scarves:focus-visible .p-home__cat-cue i { background: var(--porcelain); color: var(--wine-deep); }

    .p-home__cat--wallets:hover .p-home__cat-cue i,
    .p-home__cat--wallets:focus-visible .p-home__cat-cue i,
    .p-home__cat--belts:hover .p-home__cat-cue i,
    .p-home__cat--belts:focus-visible .p-home__cat-cue i { background: var(--wine); color: var(--porcelain); }
  }

  /* ------------------------------------------------------------
     Capítulo 5 · Editorial vino profundo
     ------------------------------------------------------------ */
  .p-home__editorial {
    display: grid;
    place-items: center;
    overflow: clip;
    padding: clamp(64px, 10svh, 130px) var(--page-pad);
    color: var(--porcelain);
    text-align: center;
  }

  .p-home__editorial-inner {
    position: relative;
    display: grid;
    justify-items: center;
    row-gap: clamp(18px, 3svh, 30px);
    max-width: 62rem;
  }

  .p-home__editorial-eyebrow {
    color: color-mix(in srgb, var(--brass) 72%, var(--porcelain));
  }

  .p-home__editorial-quote p {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: clamp(34px, 5.6vw, 78px);
    font-weight: 355;
    letter-spacing: -0.016em;
    line-height: 1.04;
    color: var(--porcelain);
    text-wrap: balance;
  }

  .p-home__editorial-quote em {
    font-style: italic;
    font-weight: 330;
    color: color-mix(in srgb, var(--wine) 30%, var(--porcelain));
  }

  .p-home__editorial-note { max-width: 46ch; }

  .p-home__editorial-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-3);
  }

  .p-home__editorial-cta {
    display: inline-block;
    padding: 15px 34px;
    border: 1px solid color-mix(in srgb, var(--porcelain) 42%, transparent);
    border-radius: var(--radius-pill);
    color: var(--porcelain);
    font: 600 12.5px / 1.2 var(--font-sans);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
  }

  .p-home__editorial-cta:hover {
    background: var(--porcelain);
    border-color: var(--porcelain);
    color: var(--wine-deep);
  }

  /* ------------------------------------------------------------
     Responsive · 768 / 1024 / 1440 (la base fluida cubre 390)
     ------------------------------------------------------------ */
  @media (min-width: 720px) {
    .p-home__featured-head h2 { font-size: clamp(38px, 4vw, 56px); }

    .p-home__scroll-cue { display: flex; }
  }

  @media (min-width: 1080px) {
    .p-home__title-line--a { margin-inline-start: 4%; }

    .p-home__title-line--b { margin-inline-end: 2%; }

    .p-home__rail { grid-auto-columns: clamp(300px, 27vw, 420px); }
  }

  /* Táctil: el CTA de capítulo medía 25px de alto. Mismo tratamiento que los
     controles compartidos en components.css — crece el área, no el texto. */
  @media (max-width: 899px) {
    .p-home__link {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
  }

  @media (max-width: 719.98px) {
    html { scroll-snap-type: none; }

    .p-home__cats {
      row-gap: 28px;
      padding-block: 54px 66px;
    }

    .p-home__cats-head {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 22px;
    }

    .p-home__cats-head h2 { max-width: 9ch; font-size: clamp(42px, 11.5vw, 54px); }
    .p-home__cats-intro { max-width: 34ch; padding: 0; }

    .p-home__cats-grid {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      gap: 14px;
    }

    .p-home__cat { grid-column: 1; grid-row: auto; }

    .p-home__cat--bags { min-height: min(440px, 54svh); }
    .p-home__cat:not(.p-home__cat--bags) { min-height: 286px; }

    .p-home__cat--bags .p-home__cat-media,
    .p-home__cat--scarves .p-home__cat-media { left: 0; mask-image: none; }
    /* Al 20% la fotografía entraba bajo la descripción: el velo de la
       tarjeta está calibrado para el reparto de escritorio y en una
       columna estrecha no llegaba a taparla. */
    .p-home__cat--wallets .p-home__cat-media,
    .p-home__cat--belts .p-home__cat-media { left: 34%; }

    .p-home__cat--wallets .p-home__cat-media img,
    .p-home__cat--belts .p-home__cat-media img { object-position: 72% 72%; }

    .p-home__cat-name,
    .p-home__cat--wallets .p-home__cat-name,
    .p-home__cat--belts .p-home__cat-name { font-size: clamp(38px, 10.5vw, 50px); }
  }
}

/* El recorrido continuo necesita scroll libre, también con ratón. Esta
   regla sin capa prevalece sobre el snap del acabado compartido. */
@media (prefers-reduced-motion: no-preference) {
  .p-home__rail.is-animated-rail { scroll-snap-type: none; scroll-behavior: auto; }
}
.p-home__rail-toggle[hidden],
.p-home__rail-toggle .p-home__rail-play,
.p-home__rail-toggle[data-paused="true"] .p-home__rail-pause { display: none; }
.p-home__rail-toggle[data-paused="true"] .p-home__rail-play { display: block; }