/* Florenti · superficies nítidas y controles compartidos.
   Esta capa final reúne los ajustes responsive de todo el escaparate. */
:root { --night: #25121d; --edge: #ba9a74; --light-ink: #fff9f1; --light-muted: #dfcdd5; }
body:not([data-page="admin"]) { background: var(--paper); }
::selection { background: var(--wine-deep); color: var(--paper); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }
.eyebrow { font-size: 12px; letter-spacing: .16em; }

/* Barra a sangre con un solo filo: la cápsula flotante con sombra y cristal
   era la cabecera de cualquier plantilla. El contenido sigue alineado con la
   rejilla de la página; en escritorio ancho la marca va al centro. */
.f-header__bar { box-sizing: border-box; width: 100%; max-width: none; padding-inline: max(var(--page-pad), (100% - var(--page-max)) / 2); }
.f-header__bar::before { inset: 0; border-bottom: 1px solid var(--hairline); background: var(--paper); }
.f-header__brand, .f-header__nav, .f-header__actions { position: relative; z-index: 1; }
.f-header__nav { min-width: 0; gap: clamp(10px, 1.1vw, 18px); margin-left: clamp(16px, 2.6vw, 34px); }
.f-header__actions { flex: none; }
.f-header__nav a { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 1320px) {
  .f-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .f-header__nav { grid-area: 1 / 1; margin-left: 0; }
  .f-header__brand { grid-area: 1 / 2; }
  .f-header__actions { grid-area: 1 / 3; justify-self: end; }
}
.f-header__action { border: 1px solid transparent; }
.f-header__action:is(:hover, :focus-visible) { border-color: var(--hairline); background: var(--porcelain); }
.f-count { background: var(--wine-deep); color: var(--paper); }
/* El foco del buscador rodea toda la zona, sin un segundo marco en el input. */
.f-header__search, .f-menu__search { border-radius: 4px; }
.f-header__search input:focus-visible, .f-menu__search input:focus-visible { outline: 0; }

/* Píldora plana para todo lo que se pulsa; las superficies van a 2px. Con
   10px el subrayado de los botones de texto se curvaba en las puntas. */
.f-button, .p-producto__add, .p-compra__pay, .p-compra__empty-cta, .p-catalogo__apply { min-height: 48px; border-radius: 999px; }
.f-button--text { border-radius: 0; }
.f-button--primary, .p-producto__add, .p-producto__buybar-add, .p-compra__pay, .p-compra__empty-cta, .p-catalogo__apply { background: var(--wine); box-shadow: none; color: #fff; }
.f-button--secondary, .f-card__add { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--wine-deep); }
.f-button--secondary:focus-visible, .f-card__add:focus-visible { color: var(--paper); }
@media (hover: hover) { .f-button--secondary:hover, .f-card__add:hover { color: var(--paper); } }
.f-button:disabled, .p-producto__add:disabled, .p-compra__pay:disabled { background: var(--stone); color: var(--muted); box-shadow: none; }
.f-drawer, .p-catalogo__drawer { border-left: 1px solid var(--edge); border-radius: 0; background: var(--paper); box-shadow: -24px 0 70px -32px rgb(37 18 29 / 55%); }
.f-drawer__head { background: var(--night); color: var(--light-ink); border-color: rgb(255 255 255 / 18%); }
.f-drawer__title { color: var(--light-ink); }
.f-drawer__head button { color: inherit; }
.f-drawer__head :focus-visible { outline-color: var(--edge); }
.f-drawer__foot { background: var(--porcelain); border-top: 1px solid var(--hairline); }
.f-cookies, .f-toast { border-color: var(--edge); border-radius: 2px; background: var(--paper); }
/* Sin capa, el papel de arriba tapaba el fondo tinta del aviso: el texto
   marfil quedaba sobre marfil y «añadido a la bolsa» no se leía. */
.f-toast { border: 1px solid rgb(186 154 116 / 45%); background: var(--night); color: var(--light-ink); }
.f-toast--error { background: var(--danger); }
.f-menu { background: var(--night); color: var(--light-ink); }
.f-menu__brand-logo { filter: none; mix-blend-mode: normal; }
.f-menu__links a { color: var(--light-ink); border-color: rgb(255 255 255 / 18%); }
.f-menu__links a::before, .f-menu__links a span, .f-menu__links a small { color: var(--light-muted); }
.f-menu__links a:is(:hover, :focus-visible) span { color: var(--edge); }
.f-menu__search { border-color: rgb(255 255 255 / 40%); }
.f-menu__search input, .f-menu__search .ih-magnifier { color: var(--light-ink); stroke: currentColor; }
.f-menu__search input::placeholder { color: var(--light-muted); }
.f-menu :focus-visible { outline-color: var(--edge); }

.f-card { min-width: 0; }
/* Escaparate, no tarjeta: la pieza sobre su fondo de porcelana y la ficha
   debajo, sin caja, filo ni sombra que compitan con el producto. */
.f-card__media { border: 0; border-radius: 2px; background: var(--porcelain); box-shadow: none; will-change: auto; }
.f-card__media img { transition-duration: 1.4s; }
.f-card:is(:hover, :focus-within) .f-card__media img { transform: scale(1.035); filter: none; }
.f-card__fav { width: 44px; height: 44px; top: 12px; right: 12px; border: 0; }
.f-card__overlay { position: relative; inset: auto; display: grid; gap: 10px; margin: 0; padding: 16px 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; translate: 0; }
.f-card:is(:hover, :focus-within) .f-card__overlay { translate: 0; }
.f-card__name { font-size: 18px; letter-spacing: -.01em; }
.f-card__variant, .f-card__price { font-size: 13px; color: var(--muted); }
.f-card__price { font-weight: 500; color: var(--ink); letter-spacing: .02em; }
.f-card__add { min-height: 44px; padding-inline: 18px; border-radius: 999px; }
/* La novedad se anuncia con texto sobre una base marfil translúcida, no con
   una pastilla negra: sin base, el burdeos desaparecía sobre bolsos oscuros. */
.f-card__badge { padding: 5px 10px; border-radius: 999px; background: rgb(255 251 247 / 86%); color: var(--wine-deep); letter-spacing: .18em; box-shadow: 0 1px 2px rgb(48 11 32 / 8%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* En PC la compra rápida aparece al acercarse a la pieza, como en las casas
   de lujo; con teclado, al enfocar. En táctil sigue siempre visible. */
@media (hover: hover) and (pointer: fine) {
  .f-card .f-card__add { opacity: 0; transition: opacity 360ms var(--ease-out), color var(--dur-ui) var(--ease-out); }
  .f-card:is(:hover, :focus-within) .f-card__add { opacity: 1; }
}
/* Raíles: en PC se arrastran; la línea dice cuánto queda por ver. */
.f-rail-progress { position: relative; width: min(var(--page-max), 100% - var(--page-pad) * 2); height: 1px; margin: 6px auto 0; background: var(--hairline); }
.f-rail-progress[hidden] { display: none; }
.f-rail-progress span { position: absolute; top: -1px; bottom: -1px; width: var(--rail-thumb, 30%); left: calc(var(--rail-pos, 0) * (100% - var(--rail-thumb, 30%))); background: var(--wine-deep); }
@media (hover: hover) and (pointer: fine) {
  .p-home__rail, .p-producto__rail { cursor: grab; scroll-snap-type: x proximity; }
  .p-home__rail > * { scroll-snap-stop: normal; }
  :is(.p-home__rail, .p-producto__rail).is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  :is(.p-home__rail, .p-producto__rail).is-dragging * { cursor: grabbing; }
}

.p-home__hero { min-height: min(92svh, 950px); padding: calc(var(--header-h) + 58px) var(--page-pad) 64px; }
.p-home__hero-veil { background: linear-gradient(90deg, rgb(37 18 29 / 96%) 0%, rgb(37 18 29 / 83%) 27%, rgb(37 18 29 / 34%) 48%, transparent 66%); }
.p-home__hero-inner { row-gap: 28px; }
.p-home__kicker { color: #e4c5a1; }
.p-home__title { width: min(9ch, 54vw); color: var(--light-ink); font-size: clamp(70px, 7.6vw, 120px); letter-spacing: -.035em; line-height: .92; text-shadow: none; }
.p-home__title em, .p-home__manifesto em { color: #e4c5a1; }
.p-home__title-line--b { translate: .22em 0; }
.p-home__hero-actions { justify-content: start; gap: 20px; }
/* Sobre la tinta del héroe y del cierre el relleno es vino: el profundo se
   fundía con el fondo y el botón desaparecía al apuntarlo. */
.p-home__hero-actions .f-button, .p-sobre__close .f-button--primary { --wipe: var(--wine); background: var(--light-ink); color: var(--wine-deep); box-shadow: none; }
.p-home__hero-actions .f-button:focus-visible, .p-sobre__close .f-button--primary:focus-visible { color: var(--light-ink); }
@media (hover: hover) { .p-home__hero-actions .f-button:hover, .p-sobre__close .f-button--primary:hover { color: var(--light-ink); } }
.p-home__hero-inner :focus-visible { outline-color: var(--edge); }
.p-home__hero-media figcaption { font-size: 12px; line-height: 1.35; text-wrap: balance; }
.p-home__scroll-cue { color: var(--light-ink); }
.p-home__manifesto { min-height: 0; padding-block: 24px; background: var(--night); color: var(--light-ink); border-block: 1px solid var(--edge); }
.p-home__manifesto .f-marquee__item { color: var(--light-ink); font-size: clamp(22px, 2.5vw, 38px); }
.p-home__manifesto .f-marquee__sep { color: var(--edge); }
.p-home__featured { min-height: 0; padding-block: clamp(64px, 8vw, 110px); background: var(--paper); }
.p-home__rail { padding-bottom: 14px; }
.p-home__rail:has(.f-collection-status) { grid-auto-columns: 100%; }
/* Sin piezas no hay nada que desplazar ni que mover: fuera las flechas, y el
   aviso de la colección que llega es una línea editorial, no una caja gris. */
.p-home__featured:has(.f-collection-status) .p-home__rail-nav { display: none; }
.p-home__autumn .f-collection-status { min-height: 0; place-content: start; padding: 4px 0 8px; border: 0; background: none; }
.p-home__autumn .f-collection-status strong { font-size: clamp(22px, 2.2vw, 30px); }
.p-home__rail-btn { width: 48px; height: 48px; border: 1px solid var(--hairline); border-radius: 50%; }
/* La foto ocupa la mitad derecha: el texto es su columna, sin caja encima
   del fondo oscuro. */
.p-home__lookbook-copy { width: min(38vw, 560px); padding: 0; margin-left: clamp(16px, 3vw, 48px); border: 0; background: none; }
.p-home__lookbook-copy h2 { color: var(--light-ink); font-size: clamp(48px, 5vw, 78px); line-height: .96; }
.p-home__lookbook-copy h2 em, .p-home__lookbook-copy .eyebrow { color: #e4c5a1; }
.p-home__lookbook-copy > p:not(.eyebrow), .p-home__lookbook-copy .p-home__link { color: var(--light-muted); }
.p-home__cat { border-radius: 2px; border: 0; }
.p-home__cat-content { padding: 24px; }
.p-home__cat-cue { font-size: 12px; }
.p-home__editorial { border-radius: 0; border-block: 1px solid var(--edge); background: var(--night); }
.p-home__editorial-note { color: var(--light-muted); }
.f-collection-status { flex: 0 0 100%; width: 100%; min-height: 240px; display: grid; place-content: center; justify-items: start; gap: 14px; padding: clamp(24px, 5vw, 56px); border: 1px solid var(--hairline); border-radius: 2px; background: var(--porcelain); }
.f-collection-status strong { font: 400 clamp(24px, 3vw, 36px)/1.2 var(--font-display); color: var(--wine-deep); }
.f-collection-status p { max-width: 50ch; color: var(--muted); line-height: 1.6; }
.f-collection-status[aria-busy="true"]::before { content: ""; width: 42px; height: 3px; background: var(--wine); transform-origin: left; animation: f-status-scan 1.1s var(--ease-in-out) infinite alternate; }

.p-catalogo { padding-block: calc(var(--header-h) + 50px) 84px; background: transparent; }
.p-catalogo__opener { grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: clamp(24px, 5vw, 88px); padding-bottom: 44px; }
.p-catalogo__title-row h1 { font-size: clamp(48px, 6vw, 86px); }
.p-catalogo__opener-visual { aspect-ratio: 2.05; border-radius: 2px; }
.p-catalogo__tools { position: relative; top: auto; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "categories actions" "applied applied"; align-items: center; gap: 8px 20px; width: min(1320px, calc(100% - 32px)); margin-inline: auto; padding: 10px 0; border: 0; border-block: 1px solid var(--hairline); border-radius: 0; background: var(--paper); backdrop-filter: none; box-shadow: none; }
.p-catalogo__cats { grid-area: categories; position: relative; justify-self: start; min-width: 0; padding-block: 1px; }
.p-catalogo__cat { position: relative; z-index: 1; min-height: 44px; padding-inline: 16px; border: 0; border-radius: 999px; background: transparent !important; color: var(--cocoa); }
.p-catalogo__cat[aria-pressed="true"] { color: var(--paper) !important; }
.p-catalogo__cat-indicator { position: absolute; inset: 0 auto 0 0; z-index: 0; width: var(--cat-w, 0); background: var(--wine-deep); border-radius: 999px; transform: translateX(var(--cat-x, 0)); }
.p-catalogo__cat-indicator[data-ready] { transition: transform 440ms var(--ease-emph), width 440ms var(--ease-emph); }
.p-catalogo__actions { grid-area: actions; display: flex; align-items: center; justify-content: end; flex-wrap: nowrap; width: auto; min-width: 0; margin: 0; gap: 10px; }
.p-catalogo__sort { display: flex; align-items: center; gap: 10px; flex: 0 1 340px; width: min(340px, 32vw); min-width: 0; min-height: 46px; padding: 4px 18px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--porcelain); color: var(--cocoa); }
.p-catalogo__sort-kicker { flex: none; color: var(--brass-text); font: 600 11px/1 var(--font-sans); letter-spacing: .06em; }
.p-catalogo__sort-control { display: flex; align-items: center; flex: 1; min-width: 0; }
.p-catalogo__filters { flex: none; min-height: 46px; padding-inline: 18px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--porcelain); }
.p-catalogo__sort:focus-within, .p-catalogo__filters:is(:hover, :focus-visible) { border-color: var(--wine); }
.p-catalogo__applied { grid-area: applied; display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--hairline); overflow-x: auto; }
.p-catalogo__applied[hidden] { display: none; }
.p-catalogo__applied .p-catalogo__pill { flex: none; min-height: 36px; background: var(--porcelain); font-size: 12px; }
.p-catalogo__listing { padding-top: 30px; }
.p-catalogo__grid { gap: 32px 20px; }
[data-sort-ready="true"] { position: relative; }
[data-sort-ready="true"] select, [data-sort-ready="true"] [hidden] { display: none; }
.p-catalogo__sort-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; color: var(--ink); font: 600 13px/1.3 var(--font-sans); text-align: left; }
.p-catalogo__sort-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-catalogo__sort-trigger svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform var(--dur-ui); }
.p-catalogo__sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.p-catalogo__sort-popover { position: absolute; z-index: 90; top: calc(100% + 12px); right: -10px; display: grid; gap: 4px; width: min(300px, calc(100vw - 38px)); padding: 8px; border: 1px solid var(--edge); border-radius: 2px; background: var(--paper); box-shadow: 0 24px 48px -24px rgb(37 18 29 / 45%); animation: f-control-in 200ms var(--ease-emph) both; }
.p-catalogo__sort-option { display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: 2px; background: none; color: var(--ink); font: inherit; text-align: left; }
.p-catalogo__sort-option:is(:hover, :focus-visible) { background: var(--porcelain); }
.p-catalogo__sort-option.is-selected { background: var(--wine-deep); color: var(--paper); }
.p-catalogo__sort-option.is-selected::after { content: "✓"; }

.p-producto { padding-top: calc(var(--header-h) + 16px); background: var(--paper); }
.p-producto__frame { border-color: var(--hairline); border-radius: 2px; background: var(--porcelain); box-shadow: none; }
.p-producto__frame:has([data-media-tools]:not([hidden])) { grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; }
.p-producto__media-tools { display: flex; justify-content: center; gap: 8px; z-index: 2; }
.p-producto__media-tools .f-button { min-height: 44px; padding: 10px 18px; }
.p-producto__media-tools [aria-pressed="true"] { color: var(--paper); background: var(--wine); }
.p-producto__stage[data-spin-active] { touch-action: pan-y; cursor: grab; user-select: none; }
.p-producto__stage[data-spin-active] img { max-height: 100%; pointer-events: none; transition: none; filter: none; mask-image: none; mix-blend-mode: normal; }
.p-producto__spin-controls { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 8px; z-index: 2; }
.p-producto__spin-controls .f-button { min-height: 44px; padding: 8px; }
.p-producto__spin-controls input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--wine); }
.p-producto__spin-hint, .p-producto__spin-position { grid-column: 1/-1; margin: 0; text-align: center; font-size: 12px; }
.p-producto__panel { border-color: var(--hairline); border-radius: 2px; background: var(--paper); box-shadow: none; }
.p-producto__name { letter-spacing: -.05em; }
.p-producto__price { color: var(--wine-deep); }
.p-producto__description { color: var(--muted); line-height: 1.7; }
.p-producto__qty { border-radius: 999px; }
.p-producto__thumb { border-radius: 2px; }
/* Apuntaba a `.p-producto__variant`, que no existe: el color elegido no se
   marcaba con este anillo. */
.p-producto__swatch[aria-pressed="true"] { border-color: var(--wine); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--wine); }
.p-producto__note { border-color: var(--hairline); }
.p-producto__note[open] { background: var(--porcelain); }
.p-producto__buybar { border-top: 1px solid var(--edge); background: var(--paper); }
.p-producto__buybar-add { border-radius: 999px; }
.p-producto__missing, .p-catalogo__empty { border: 1px solid var(--hairline); border-radius: 2px; background: var(--porcelain); }
.p-compra__card { border: 1px solid var(--edge); border-radius: 2px; background: var(--paper); box-shadow: none; }
.p-compra__steps { color: var(--muted); }
.p-compra__totals { background: var(--porcelain); border-radius: 2px; }
.p-compra__shipping { color: var(--cocoa); }
.p-compra__status { border-radius: 2px; }
.p-compra__help a { color: var(--wine); }

.p-sobre__hero, .p-contacto__hero { background: var(--paper); }
.p-sobre__title, .p-contacto__title { letter-spacing: -.05em; }
.p-sobre__hero-figure, .p-contacto__hero-visual { border-radius: 2px; }
.p-sobre__hero-mark { display: none; }
.p-sobre__hero-figure figcaption { border: 0; border-radius: 0; background: var(--night); color: var(--light-ink); box-shadow: none; backdrop-filter: none; }
.p-sobre__chapter-card { border-radius: 2px; border-color: var(--hairline); background: var(--paper); backdrop-filter: none; }
.p-sobre__chapter-index, .p-sobre__chapter-note { font-size: 12px; }
/* La tarjeta ya se numera en el texto («01 · El comienzo»): el «01 / 04» de la
   foto era la misma cifra dos veces. */
.p-sobre__chapter-media-count { display: none; }
/* Zigzag denso: cada capítulo empieza a media altura del anterior en vez de
   ocupar casi una pantalla con la mitad vacía. */
@media (min-width: 640px) {
  .p-sobre__chapter { min-height: 0; padding-block: clamp(28px, 4vh, 48px); }
  .p-sobre__chapter + .p-sobre__chapter { margin-top: clamp(-340px, -20vw, -150px); }
}
.p-sobre__chapter-copy p, .p-sobre__story-head > p { color: var(--muted); }
.p-sobre__promise-facts > div { border-radius: 2px; border-color: var(--hairline); background: var(--paper); }
.p-sobre__close { background: var(--night); }
.p-sobre__close-quote { color: var(--light-ink); }
.p-sobre__close-quote em, .p-sobre__close .eyebrow { color: var(--edge); }
.p-sobre__close .p-sobre__link { color: var(--light-ink); }
.p-contacto__form { border: 1px solid var(--edge); border-radius: 2px; background: var(--paper); box-shadow: none; }
/* Con borde de caja el texto necesita aire: tocaba el filo izquierdo. */
.p-contacto__field :is(input, select, textarea) { padding-inline: 14px; border: 1px solid var(--muted); border-radius: 2px; background: #fffdf9; color: var(--ink); }
.p-contacto__field :is(input, select, textarea):focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgb(118 19 54 / 10%); }
.p-contacto__field [aria-invalid="true"] { border-color: var(--danger); }
.p-contacto__submit { min-height: 48px; }
/* Sin `border-color`: sin capa anulaba los bordes de estado listo/error. */
.p-contacto__captcha { border-radius: 2px; background: var(--night); color: var(--light-ink); }
.p-contacto__captcha-copy small { font-size: 10px; }
.p-contacto__captcha-copy p > span { color: var(--light-muted); font-size: 12px; }
.p-contacto__route { border-color: var(--hairline); border-radius: 2px; }
.p-contacto__route:is(:hover, :focus-visible), .p-contacto__legal-item[open] { background: var(--porcelain); }

.f-footer { position: relative; overflow: clip; margin-top: 0; border-top: 1px solid var(--edge); border-radius: 0; background: var(--night); color: var(--light-ink); }
.f-footer > * { position: relative; }
.f-footer__wordmark img { filter: none; mix-blend-mode: normal; }
.f-footer__brand p, .f-footer__col a, .f-footer__bottom { color: var(--light-muted); }
.f-footer__col h2 { color: var(--edge); }
.f-footer__brand .eyebrow { color: var(--edge); }
.f-footer__col a:is(:hover, :focus-visible), .f-footer .f-button--text { color: var(--light-ink); }
.f-footer__bottom { border-color: rgb(255 255 255 / 18%); }
.f-footer :focus-visible { outline-color: var(--edge); }

@keyframes f-control-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes f-status-scan { to { transform: scaleX(2.5); opacity: .35; } }
@media (min-width: 1200px) { .p-catalogo__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1020px) {
  .p-catalogo__tools { grid-template-columns: 1fr; grid-template-areas: "categories" "actions" "applied"; }
  .p-catalogo__actions { width: 100%; }
  .p-catalogo__sort { flex: 1; width: auto; }
}
@media (max-width: 1319px) {
  /* Columnas laterales iguales: con 44 y 96 px la marca quedaba 26 px a la
     izquierda del centro. */
  .f-header__bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; gap: 8px; }
  .f-header__nav, .f-header__search { display: none; }
  .f-header__menu { display: grid; }
  .f-header__brand { position: static; left: auto; translate: none; width: min(124px, 100%); justify-self: center; }
  .f-header__actions { margin: 0; }
}
@media (max-width: 719.98px) {
  :root { --header-h: calc(62px + env(safe-area-inset-top, 0px)); }
  .f-header { padding-top: env(safe-area-inset-top, 0px); }
  .f-header__bar { height: 62px; padding-inline: 8px; }
  .f-header__brand { width: min(110px, 100%); }
  .p-home__hero { display: block; min-height: 0; padding: var(--header-h) 0 24px; background: var(--night); }
  .p-home__hero-media { position: relative; inset: auto; height: auto; min-height: 0; aspect-ratio: 1.12; border-radius: 0; }
  .p-home__hero-veil { inset: var(--header-h) 0 auto; height: auto; min-height: 0; aspect-ratio: 1.12; background: linear-gradient(180deg, transparent 65%, rgb(37 18 29 / 42%)); }
  .p-home__hero-media figcaption { right: 16px; bottom: 22px; padding: 8px 12px; font-size: 12px; }
  /* Aceptar y rechazar comparten fila: el aviso tapa menos en la primera visita. */
  .f-cookies__actions .f-button--small { min-height: 44px; padding-inline: 12px; letter-spacing: .05em; }
  /* En móvil, barra inferior a todo el ancho: tapaba más de un tercio de la
     pantalla en la primera visita. Los dos botones siguen con el mismo peso. */
  .f-cookies { left: 0; right: 0; bottom: 0; width: 100%; gap: 8px; padding: 14px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; }
  .f-cookies__title { font-size: 16px; }
  .f-cookies__text { font-size: 12.5px; line-height: 1.5; }
  .f-cookies__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
  .f-cookies__actions .f-button--text { grid-column: 1 / -1; justify-self: center; min-height: 32px; }
  .p-home__hero-inner { width: 100%; margin: 0; padding: 26px 24px 12px; row-gap: 22px; border: 0; border-radius: 0; background: var(--night); box-shadow: none; }
  .p-home__title { width: 100%; font-size: clamp(45px, 12.8vw, 68px); line-height: .94; }
  .p-home__title-line--b { translate: .16em 0; }
  .p-home__hero-actions { gap: 14px; }
  .p-home__hero-actions .f-button { min-height: 48px; padding-inline: 24px; }
  .p-home__manifesto { padding-block: 18px; }
  .p-home__manifesto .f-marquee__item { font-size: 24px; }
  .p-home__featured { padding-block: 52px; }
  .p-home__lookbook-copy { width: auto; margin: 0; padding: 28px 10px 18px; }
  .p-home__cat-content { padding: 20px; }
  .p-catalogo { padding-block: calc(var(--header-h) + 36px) 60px; }
  .p-catalogo__opener { grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
  .p-catalogo__title-row h1 { font-size: clamp(40px, 11vw, 58px) !important; }
  .p-catalogo__opener-visual { aspect-ratio: 1.85; }
  .p-catalogo__tools { width: calc(100% - 24px); padding: 8px 0; gap: 8px; }
  .p-catalogo__cats { max-width: 100%; }
  .p-catalogo__cat { padding-inline: 13px; font-size: 12px; }
  .p-catalogo__sort-kicker { display: none; }
  .p-catalogo__sort-popover { right: auto; left: 0; }
  .p-catalogo__filters { padding-inline: 12px; }
  .p-catalogo__grid { gap: 28px 12px; }
  .f-card__overlay { padding: 12px 0 0; gap: 8px; }
  .f-card__name { font-size: 17px; }
  .f-card__row { align-items: end; }
  .f-card .f-card__add { opacity: 1; }
  .p-contacto__form { padding-inline: 20px; }
  .f-footer__grid { gap: 32px 18px; }
  .f-footer__col a { min-height: 36px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .p-catalogo__cat-indicator[data-ready], .f-button { transition: none; }
  .f-button:is(:hover, :focus-visible) { translate: none; }
  .f-collection-status::before, .p-catalogo__sort-popover { animation: none; }
}

/* Movimiento del escaparate: conserva la composición y anima sus estados.
   El color real de una variante se asienta sin filtros de brillo. */
.f-card .f-card__media img.f-card__variant-next { filter: blur(2px); transform: scale(1.035); }
.f-card .f-card__media img.f-card__variant-next.is-ready { filter: none; transform: scale(1.001); }
.f-card__media.is-variant-switching > img:not(.f-card__variant-next) { opacity: .18; filter: blur(1.5px); transform: scale(.995); }
.p-producto__stage.is-switching img { scale: 1.015; filter: blur(2px); }

@media (prefers-reduced-motion: no-preference) {
  /* Respuesta breve al toque, sin mover los controles de sitio. */
  :is(.f-button:not(.f-button--text), .p-producto__add, .p-producto__buybar-add, .p-compra__pay, .p-catalogo__apply) {
    transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), scale 180ms var(--ease-out), translate 240ms var(--ease-out);
  }
  :is(.f-button:not(.f-button--text), .p-producto__add, .p-producto__buybar-add, .p-compra__pay, .p-catalogo__apply):active:not(:disabled, [aria-disabled="true"]) { scale: .975; translate: 0 1px; }
  .f-header__action { transition: background-color 280ms var(--ease-out), border-color 280ms var(--ease-out), scale 180ms var(--ease-out); }
  .f-header__action:active { scale: .94; }
  .f-card__media { transition: scale 280ms var(--ease-out); }
  .f-card__media:active { scale: .985; }

  /* Cada enlace del menú abre su propia máscara. El foco revela el destino
     inmediatamente; el teclado no espera a que termine la entrada. */
  .f-menu__links a { clip-path: inset(0 0 100% 0); translate: 0 20px; transition: opacity 440ms var(--ease-out), translate 640ms var(--ease-emph), clip-path 640ms var(--ease-emph); }
  .f-menu.is-open .f-menu__links a { clip-path: inset(0); translate: 0; }
  .f-menu.is-open .f-menu__links a:nth-child(1) { transition-delay: 90ms; }
  .f-menu.is-open .f-menu__links a:nth-child(2) { transition-delay: 145ms; }
  .f-menu.is-open .f-menu__links a:nth-child(3) { transition-delay: 200ms; }
  .f-menu.is-open .f-menu__links a:nth-child(4) { transition-delay: 255ms; }
  .f-menu.is-open .f-menu__links a:nth-child(5) { transition-delay: 310ms; }
  .f-menu.is-open .f-menu__links a:nth-child(6) { transition-delay: 365ms; }
  .f-menu.is-open .f-menu__links a:focus-visible { opacity: 1; translate: 0; clip-path: inset(0); transition-delay: 0ms; }
  .f-menu.is-open .f-menu__search:focus-within { opacity: 1; translate: 0; transition-delay: 0ms; }
  .f-drawer { transition: translate 560ms var(--ease-emph), display 560ms allow-discrete, overlay 560ms allow-discrete; }

  .p-catalogo__drawer[open] .p-catalogo__drawer-body { animation: f-panel-content-in 460ms var(--ease-emph) 80ms backwards; }
  .p-catalogo__drawer[open] .p-catalogo__drawer-foot { animation: f-panel-content-in 460ms var(--ease-emph) 140ms backwards; }
  .p-producto__lightbox[open] .p-producto__lightbox-stage { animation: f-photo-expand 600ms var(--ease-emph) backwards; }
  .p-producto__lightbox[open] .p-producto__lightbox-close { animation: f-panel-content-in 420ms var(--ease-emph) 120ms backwards; }
  .p-producto__thumb img { transition: transform 480ms var(--ease-emph); }
  .p-producto__thumb:is(:hover, :focus-visible) img { transform: scale(1.045); }

  .f-footer__col a { background: linear-gradient(currentColor, currentColor) left calc(100% - 3px) / 0 1px no-repeat; transition: background-size 420ms var(--ease-emph), color 220ms var(--ease-out); }
  .f-footer__col a:is(:hover, :focus-visible) { background-size: 100% 1px; }
  .p-contacto__field label { transition: color 300ms var(--ease-out); }
  .p-contacto__field:focus-within label { color: var(--wine); }

  /* Un único reflejo al acercarse a la fotografía; nunca queda en bucle ni
     modifica la imagen o tapa los controles. También responde al teclado. */
  @media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .f-card__media::after { content: ""; position: absolute; inset: 0 auto 0 -5%; z-index: 2; width: 60%; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 18%) 48%, transparent 68%); pointer-events: none; opacity: 0; transform: translateX(-125%) skewX(-16deg); }
    .f-card:is(:hover, :focus-within) .f-card__media::after { animation: f-photo-light 1200ms var(--ease-in-out); }
  }

  @keyframes f-panel-content-in { from { opacity: .35; translate: 0 14px; } }
  @keyframes f-photo-expand { from { opacity: .45; scale: .96; translate: 0 14px; } }
  @keyframes f-photo-light {
    0% { opacity: 0; transform: translateX(-125%) skewX(-16deg); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(240%) skewX(-16deg); }
  }
}