/* ============================================================
   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 {

  /* — Documento: snap suave entre capítulos (esta hoja solo carga en inicio) — */
  html { scroll-snap-type: y proximity; }

  /* 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;
  }

  .p-home__scroll-cue {
    position: absolute;
    right: 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);
    animation: p-home-scroll-cue 1.9s var(--ease-in-out) infinite;
  }

  @keyframes p-home-scroll-cue {
    0% { transform: translateY(-120%); }
    55%, 100% { transform: translateY(210%); }
  }

  .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;
    justify-content: center;
    gap: var(--space-4) var(--space-5);
    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 {
    border-block: 1px solid var(--hairline);
    padding-block: clamp(16px, 3svh, 28px);
    background: var(--paper);
    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-size: clamp(20px, 2.5vw, 36px);
    font-weight: 350;
    letter-spacing: -0.01em;
    color: var(--cocoa);
  }

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

  .p-home__manifesto .f-marquee__sep {
    color: var(--brass);
    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);
    padding-block: clamp(52px, 8svh, 88px);
  }

  .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;
    inline-size: 46px;
    block-size: 46px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    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 { text-align: center; }

  /* ------------------------------------------------------------
     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:
      radial-gradient(46rem 34rem at 4% 8%, rgb(234 216 221 / 34%), transparent 68%),
      linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--cream-deep) 52%, 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;
    border: 1px solid rgb(113 76 51 / 16%);
    border-radius: clamp(24px, 2.2vw, 34px);
    color: var(--cocoa);
    text-decoration: none;
    box-shadow: 0 42px 90px -60px rgb(67 16 31 / 46%);
    transform: translateZ(0);
    transition:
      border-color var(--dur-ui) var(--ease-out),
      box-shadow var(--dur-enter) var(--ease-out),
      translate var(--dur-ui) var(--ease-out);
  }

  .p-home__cat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%);
    pointer-events: none;
  }

  .p-home__cat--bags { grid-column: 1 / span 7; grid-row: 1 / span 2; color: var(--porcelain); }
  .p-home__cat--wallets { grid-column: 8 / -1; grid-row: 1; background: #e8ddd8; }
  .p-home__cat--accessories { grid-column: 8 / -1; grid-row: 2; background: #e9e7e2; }

  .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.25s var(--ease-emph), filter 1.25s var(--ease-out);
    will-change: transform;
  }

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

  .p-home__cat--bags::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgb(34 12 17 / 2%) 24%, rgb(34 12 17 / 77%) 100%),
      linear-gradient(90deg, rgb(34 12 17 / 34%), transparent 64%);
    pointer-events: none;
  }

  .p-home__cat-halo {
    position: absolute;
    top: clamp(24px, 3vw, 42px);
    right: clamp(24px, 3vw, 42px);
    z-index: 2;
    width: clamp(62px, 6vw, 88px);
    aspect-ratio: 1;
    border: 1px solid rgb(255 250 244 / 30%);
    border-radius: 50%;
    box-shadow: inset 0 0 34px rgb(255 250 244 / 7%);
    backdrop-filter: blur(2px);
    animation: p-home-halo-float 8s var(--ease-in-out) infinite alternate;
    pointer-events: none;
  }

  .p-home__cat-halo::before,
  .p-home__cat-halo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
  }

  .p-home__cat-halo::before {
    inset: 15%;
    border: 1px solid rgb(255 250 244 / 14%);
  }

  .p-home__cat-halo::after {
    left: 50%;
    top: -4px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    background: color-mix(in srgb, var(--wine-soft) 82%, var(--porcelain));
    box-shadow: 0 0 0 6px rgb(255 250 244 / 7%), 0 0 24px rgb(255 236 226 / 38%);
  }

  .p-home__cat-halo i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    translate: -50% -50%;
    border-radius: 50%;
    background: rgb(255 250 244 / 66%);
  }

  @keyframes p-home-halo-float {
    0% { translate: -3px 4px; rotate: -18deg; scale: .94; opacity: .66; }
    48% { translate: 5px -4px; rotate: 148deg; scale: 1.04; opacity: .92; }
    100% { translate: -2px 6px; rotate: 326deg; scale: .98; opacity: .72; }
  }

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

  .p-home__cat--wallets .p-home__cat-media img,
  .p-home__cat--accessories .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--accessories::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%;
    padding: clamp(24px, 3vw, 46px);
  }

  .p-home__cat-kicker {
    margin-bottom: clamp(12px, 2vh, 22px);
    font: 650 11px/1.2 var(--font-sans);
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .p-home__cat--bags .p-home__cat-kicker { color: rgb(255 250 244 / 74%); }
  .p-home__cat--wallets .p-home__cat-kicker,
  .p-home__cat--accessories .p-home__cat-kicker { color: var(--brass-text); }

  .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--accessories .p-home__cat-name { font-size: clamp(40px, 3.7vw, 62px); }

  .p-home__cat-description {
    max-width: 29ch;
    margin-top: 14px;
    color: rgb(255 250 244 / 78%);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.55;
  }

  .p-home__cat--wallets .p-home__cat-description,
  .p-home__cat--accessories .p-home__cat-description { max-width: 22ch; color: rgb(45 37 34 / 66%); }

  .p-home__cat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 18px;
  }

  .p-home__cat-count,
  .p-home__cat-price {
    font: 600 11.5px/1.3 var(--font-sans);
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .p-home__cat--bags .p-home__cat-count,
  .p-home__cat--bags .p-home__cat-price { color: rgb(255 250 244 / 72%); }

  .p-home__cat--wallets .p-home__cat-count,
  .p-home__cat--accessories .p-home__cat-count { color: var(--wine); }

  .p-home__cat--wallets .p-home__cat-price,
  .p-home__cat--accessories .p-home__cat-price { color: var(--muted); }

  .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:focus-visible {
      border-color: rgb(143 24 58 / 28%);
      box-shadow: 0 48px 100px -52px rgb(67 16 31 / 58%);
      translate: 0 -5px;
    }

    .p-home__cat:hover .p-home__cat-media img,
    .p-home__cat:focus-visible .p-home__cat-media img { transform: scale(1.075); 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 { 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--accessories:hover .p-home__cat-cue i,
    .p-home__cat--accessories: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::before {
    content: "";
    position: absolute;
    inset: -22% -12% auto;
    height: 72%;
    background: radial-gradient(52% 58% at 50% 0%, color-mix(in srgb, var(--wine) 52%, transparent), transparent 72%);
    pointer-events: none;
  }

  .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;
    color: color-mix(in srgb, var(--porcelain) 88%, var(--wine-deep));
  }

  .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: transform var(--dur-fast) var(--ease-out);
  }

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

  .p-home__editorial-cta:active { transform: translateY(0); }

  /* ------------------------------------------------------------
     Responsive · 768 / 1024 / 1440 (la base fluida cubre 390)
     ------------------------------------------------------------ */
  @media (min-width: 720px) {
    .p-home__hero { padding-block: calc(var(--header-h) + var(--space-5)) var(--space-6); }

    /* El tope en svh mantiene CTA y chip dentro del primer viewport. */

    .p-home__title { font-size: clamp(96px, 12.2vw, 176px); }

    .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--bags,
    .p-home__cat--wallets,
    .p-home__cat--accessories { grid-column: 1; grid-row: auto; }

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

    .p-home__cat--bags .p-home__cat-media img { object-position: 69% center; }
    .p-home__cat-halo { top: 22px; right: 22px; width: 66px; }
    /* 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--accessories .p-home__cat-media { left: 34%; }

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

    .p-home__cat-content { padding: 21px; }
    .p-home__cat-name,
    .p-home__cat--wallets .p-home__cat-name,
    .p-home__cat--accessories .p-home__cat-name { font-size: clamp(38px, 10.5vw, 50px); }
    .p-home__cat-description { max-width: 26ch; }

  }
}