/* LÚMEA — Estudio Floral · sistema visual Elite V2
   Instrument Serif (titulares) + Manrope (UI). Movimiento: solo opacity/transform; curva --ease de animaciones/lumea.css. */

/* ---------- Tokens ---------- */
:root {
  --ivory: #F2EDE4; --paper: #E9E2D5; --sage: #A9AF94; --wine: #7C2938; --coral: #D98F72; --ink: #24251F;
  --ink-2: #5B5C52; --line: rgba(36, 37, 31, .16); --line-2: rgba(36, 37, 31, .32);
  --peach: #EBD3BF; --lilac: #DCD3DB; --wall: #541616; --sand: #C7B8A8;
  --wine-ink: #2A1217; --wine-deep: #4A1A23;   /* burdeo profundo: fondos editoriales oscuros */
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(.22, 1, .36, 1);          /* lumea.css */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t1: .25s; --t2: .6s; --t3: 1.1s;
  --gut: clamp(16px, 4vw, 56px);
  --gap: clamp(12px, 2vw, 28px);
  --sec: clamp(88px, 13vw, 200px);
  --header: 64px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
/* Titulares editoriales en serif aunque no sean h1–h3 */
:is(.site-footer__claim, .banner-cta__k, .pdp__price, .freq__name, .subscribe__plan, .subscribe__price, .ws__name, .cal__month, .slots__date, .slots__total, .story__lead p, .quote p, .gitem__title, .drawer__empty p, .builder__total, .menu a, .step legend, .offer__n) { font-family: var(--serif); font-weight: 400; }
::selection { background: var(--wine); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--ivory); padding: 10px 14px; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gut); }
[hidden] { display: none !important; }

/* ---------- Tipografía ---------- */
.h-xxl { font-size: clamp(3.4rem, 10vw, 9.5rem); line-height: .9; letter-spacing: -.025em; }
.h-xl { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.02em; }
.h-l { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; }
.label { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 14px; align-items: baseline; }
.label__n { color: var(--wine); letter-spacing: .08em; }
.label__n::after { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 14px; }
.opt { color: var(--ink-2); font-weight: 400; letter-spacing: .05em; text-transform: none; }

/* ---------- Logo (máscara del logotipo aprobado; color por CSS) ---------- */
.logo { display: inline-block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.logo--wordmark { --src: url(../img/logo-wordmark.png); width: clamp(104px, 9vw, 150px); aspect-ratio: 692 / 144; }
.logo--lockup { --src: url(../img/logo-lockup.png); width: 200px; aspect-ratio: 692 / 367; }

/* ---------- Botones y enlaces ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 30px; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; border: 1px solid transparent; border-radius: 0; transition: background var(--t1) var(--ease), color var(--t1) var(--ease), transform var(--t1) var(--ease); }
.btn:hover { transform: translateY(-2px); }            /* lumea-button */
.btn:active { transform: translateY(0); }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover { background: var(--wine); }
.btn--wine { background: var(--wine); color: var(--ivory); }
.btn--wine:hover { background: var(--ink); }
.btn--ivory { background: var(--ivory); color: var(--ink); }
.btn--ivory:hover { background: var(--coral); }
.btn--line-light { border-color: rgba(242, 237, 228, .85); color: var(--ivory); }
.btn--line-light:hover { background: var(--ivory); color: var(--wine); }
.btn--ghost-light { border-color: rgba(242, 237, 228, .5); color: var(--ivory); }
.btn--ghost-light:hover { background: var(--ivory); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; padding-block: 4px; }
.link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left; }   /* lumea-underline */
.arr { display: inline-block; transition: transform var(--t2) var(--ease); }
.link:hover .arr, a:hover > .arr { transform: translateX(5px); }
.icon-btn { min-width: 44px; min-height: 44px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }

/* ---------- Franja demo + cabecera ---------- */
.demo-strip { background: var(--ink); color: rgba(242, 237, 228, .8); font-size: .66rem; letter-spacing: .1em; text-align: center; padding: 6px var(--gut); }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--ivory); color: var(--ink); transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }
/* Inicio: cabecera transparente sobre el hero oscuro hasta salir de él */
[data-page=home] .site-header { margin-bottom: calc(-1 * var(--header)); }
[data-page=home] .site-header:not(.is-solid):not(.is-menu) { background: transparent; color: var(--ivory); }
[data-page=home] .site-header:not(.is-solid):not(.is-menu) .site-nav a[aria-current] { color: inherit; }
[data-page=home] .site-header:not(.is-solid):not(.is-menu) .site-nav a::after { background: var(--coral); }
.site-header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: var(--header); }
@media (min-width: 1100px) { :root { --header: 80px; } }
.site-header__brand { justify-self: start; display: inline-flex; color: inherit; padding-block: 10px; animation: logo-in 1.2s var(--ease) both; }
.site-nav ul { display: flex; gap: clamp(22px, 2.9vw, 48px); }
.site-nav a { font-size: .8125rem; font-weight: 500; letter-spacing: .01em; position: relative; padding-block: 8px; white-space: nowrap; transition: color var(--t1); }
.site-nav li { animation: rise .9s var(--ease) both; animation-delay: calc(.25s + var(--i) * 60ms); }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--wine); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current] { color: var(--wine); }
.site-header__tools { justify-self: end; display: flex; align-items: center; gap: 18px; animation: rise .9s var(--ease) .55s both; }
.cart-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.cart-btn__i { display: block; transition: transform var(--t2) var(--ease); }
.cart-btn:hover .cart-btn__i { transform: translateY(-2px); }
.cart-btn__n::before { content: '('; } .cart-btn__n::after { content: ')'; }
.cart-btn__n { display: inline-block; transition: color var(--t1); }
.cart-btn__n.is-bump { animation: bump .5s var(--ease); color: var(--coral); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.menu-btn__i { width: 22px; height: 8px; position: relative; }
.menu-btn__i::before, .menu-btn__i::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--t2) var(--ease); }
.menu-btn__i::before { top: 0; } .menu-btn__i::after { bottom: 0; }
.menu-btn[aria-expanded=true] .menu-btn__i::before { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded=true] .menu-btn__i::after { transform: translateY(-3.25px) rotate(-45deg); }

.menu { position: fixed; inset: 0; top: calc(var(--header)); z-index: 39; background: var(--ivory); padding: 24px var(--gut) 32px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu ol { display: grid; gap: 4px; }
.menu a { display: flex; align-items: baseline; gap: 16px; font-size: clamp(2.2rem, 10vw, 3.4rem); letter-spacing: -.01em; line-height: 1.1; padding-block: 2px; }
.menu a span { font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; color: var(--wine); font-weight: 600; }
.menu li { opacity: 0; transform: translateY(24px); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); transition-delay: calc(var(--i) * 45ms); }
.menu.is-open li { opacity: 1; transform: none; }
.menu__foot { font-size: 1.4rem; color: var(--wine); }
html.menu-open { overflow: hidden; }

@media (max-width: 999px) {
  .menu-btn { display: inline-flex; }
  .site-header__in { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .site-header__tools { gap: 14px; }
}

/* ---------- Secciones genéricas ---------- */
.section { padding-block: var(--sec) 0; }
.section__head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 88px); }
.section__head .label { margin-bottom: 4px; }
.section__lede, .page-head__lede { max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-2); }
.section__more { margin-top: 36px; }
@media (min-width: 900px) {
  .section__head { grid-template-columns: repeat(12, 1fr); align-items: end; column-gap: var(--gap); }
  .section__head .label { grid-column: 1 / -1; }
  .section__head > :is(h2, .split) { grid-column: 1 / 9; }
  .section__head .section__more, .section__head .section__lede { grid-column: 9 / -1; justify-self: end; margin: 0; text-align: right; }
}
.page-head { padding-top: clamp(48px, 9vw, 140px); padding-bottom: clamp(40px, 6vw, 96px); display: grid; gap: 22px; }
.page-head--split { align-items: end; }
@media (min-width: 900px) {
  .page-head--split { grid-template-columns: 1fr minmax(320px, 40vw); column-gap: 6vw; }
  .page-head--split > div { display: grid; gap: 22px; }
}
.page-head__img { width: min(100%, 560px); aspect-ratio: 3 / 2; }
.tone-sage-bg { background: var(--sage); }
.tone-wine-bg { background: var(--wine); color: var(--ivory); }
.tone-peach { background: var(--peach); } .tone-wine { background: #E6D2CF; } .tone-sage { background: #DADCCD; }
.tone-coral { background: #EFCDBC; } .tone-lilac { background: var(--lilac); } .tone-ink { background: #D9D3C6; }
.tone-panel { background: var(--paper); }

/* ---------- Media (revelado por máscara) ---------- */
.media { position: relative; overflow: hidden; background: var(--paper); }
.media picture { display: block; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.r-portrait { aspect-ratio: 4 / 5; }
.media figcaption { font-size: .78rem; color: var(--ink-2); margin-top: 10px; }

/* ---------- Tarjetas de producto ---------- */
.pcard { display: grid; gap: 16px; align-content: start; }
.pcard__media { position: relative; display: block; overflow: hidden; }
.pcard__media .media { background: transparent; }
.pcard__media img { transition: transform 1.1s var(--ease), filter var(--t2) var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.045); }         /* lumea-image */
.pcard__view { position: absolute; left: 0; bottom: 0; background: var(--ivory); padding: 10px 16px 0 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; transform: translateY(101%); transition: transform var(--t2) var(--ease); }
.pcard:hover .pcard__view, .pcard__media:focus-visible .pcard__view { transform: none; }
.pcard__info { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; }
.pcard__name { font-size: .9rem; font-weight: 600; letter-spacing: .24em; }
.pcard__price { font-size: .95rem; font-variant-numeric: tabular-nums; }
.pcard__palette { color: var(--ink-2); font-size: 1rem; }
.pcard__add { justify-self: end; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); min-height: 44px; }
.featured__grid { display: grid; gap: 56px var(--gap); }
@media (max-width: 767px) {
  .featured__grid .pcard:nth-child(even) { width: 82%; margin-left: auto; }
  .featured__grid .pcard:nth-child(odd) { width: 88%; }
}
@media (min-width: 768px) {
  .featured__grid { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .featured__grid .pcard:nth-child(1) { grid-column: 1 / 5; }
  .featured__grid .pcard:nth-child(2) { grid-column: 6 / 9; margin-top: 18vh; }
  .featured__grid .pcard:nth-child(3) { grid-column: 10 / 13; margin-top: 6vh; }
}

/* ---------- Bouquet SVG ---------- */
.bouquet { width: 100%; height: 100%; max-height: 72vh; overflow: visible; }
.bouquet .stem { stroke: #5E6B4A; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-dasharray: var(--len, 400); stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.bouquet .leaf { fill: #7D8766; }
.bouquet .bloom { transform-box: fill-box; transform-origin: center; transition: transform .8s var(--ease), opacity .5s var(--ease); }
.bouquet .bloom circle, .bouquet .bloom ellipse, .bouquet .bloom path { transition: fill var(--t2) var(--ease); }
.bouquet .is-enter { transform: scale(0); opacity: 0; }
.bouquet .wrap-paper { fill: #FBF8F2; stroke: rgba(36, 37, 31, .18); stroke-width: 1; }
.bouquet .ribbon { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke var(--t2); }
.bouquet .shadow { fill: rgba(36, 37, 31, .08); }

.freq__price small, .subscribe__price small, .ws__price small { font-size: .8rem; color: var(--ink-2); margin-left: 4px; }

.lead-img .media { aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; }
.contact__img { aspect-ratio: 4 / 5; max-width: 420px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--ivory); margin-top: var(--sec); padding-block: clamp(64px, 9vw, 120px) 28px; }
.site-footer .label { color: rgba(242, 237, 228, .6); margin-bottom: 14px; }
.site-footer__top { display: grid; gap: 40px; padding-bottom: clamp(56px, 8vw, 110px); border-bottom: 1px solid rgba(242, 237, 228, .18); }
.site-footer__claim { font-size: clamp(2.6rem, 5.2vw, 5rem); letter-spacing: -.02em; line-height: .95; }
.site-footer__claim em { color: var(--coral); }
.news__row { display: flex; gap: 0; border-bottom: 1px solid rgba(242, 237, 228, .5); }
.news input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ivory); padding: 14px 0; font-size: 1rem; }
.news input::placeholder { color: rgba(242, 237, 228, .45); }
.news input:focus { outline: none; }
.news__row:focus-within { border-color: var(--coral); }
.news .btn { border: 0; padding: 0 0 0 16px; min-height: 48px; }
.news .btn:hover { background: transparent; color: var(--coral); }
.news__msg { font-size: .85rem; margin-top: 10px; min-height: 1.4em; color: var(--coral); }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--gap); padding-block: 56px; }
.site-footer__grid > div:first-child { grid-column: 1 / -1; }
.site-footer__logo { width: 190px; color: var(--ivory); }
.site-footer__grid ul { display: grid; gap: 8px; }
.site-footer__grid a:hover { color: var(--coral); }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer__legal { display: grid; gap: 6px; font-size: .74rem; color: rgba(242, 237, 228, .55); }
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: 7fr 4fr; align-items: end; column-gap: 8vw; }
  .site-footer__grid { grid-template-columns: 5fr 2fr 2fr 3fr; }
  .site-footer__grid > div:first-child { grid-column: auto; }
  .site-footer__legal { grid-template-columns: 1fr auto; }
}

/* ---------- Colección ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding-block: 18px; border-block: 1px solid var(--line-2); }
.filters__group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; font-size: .84rem; border: 1px solid var(--line-2); transition: background var(--t1), color var(--t1), border-color var(--t1); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed=true] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.filters__sort { margin-left: auto; }
.filters select, .field select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2324251F'/%3E%3C/svg%3E") right 12px center no-repeat; border: 1px solid var(--line-2); min-height: 44px; padding: 0 36px 0 14px; font-size: .86rem; border-radius: 0; }
.shop__count { font-size: .8rem; color: var(--ink-2); margin: 22px 0 32px; letter-spacing: .06em; }
.shop__grid { display: grid; gap: 56px var(--gap); }
.shop__empty { padding: 60px 0; font-size: 1.2rem; }
@media (min-width: 600px) { .shop__grid { grid-template-columns: repeat(2, 1fr); } .shop__grid .pcard:nth-child(even) { margin-top: 64px; } }
@media (min-width: 1024px) {
  .shop__grid { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 72px); }
  .shop__grid .pcard:nth-child(even) { margin-top: 0; }
  .shop__grid .pcard:nth-child(3n+2) { margin-top: 110px; }
  .shop__grid .pcard:nth-child(3n) { margin-top: 40px; }
}
.pcard.is-out { display: none; }
.banner-cta { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-2); padding-top: 40px; margin-top: var(--sec); }
.banner-cta__k { font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -.035em; max-width: 20ch; line-height: 1.05; }

/* ---------- Detalle de producto ---------- */
.crumbs { font-size: .8rem; color: var(--ink-2); padding-block: 22px; }
.crumbs a:hover { color: var(--wine); }
.pdp { display: grid; gap: 40px; }
.pdp__stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.pdp__slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .7s var(--ease), clip-path 1s var(--ease); }
.pdp__slide.is-active { opacity: 1; clip-path: inset(0); z-index: 1; }
.pdp__slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pdp__thumb { width: 76px; aspect-ratio: 1; overflow: hidden; opacity: .55; outline-offset: 2px; transition: opacity var(--t1); border: 1px solid transparent; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed=true] { opacity: 1; border-color: var(--ink); }
.pdp__thumb:hover { opacity: 1; }
.pdp__info { display: grid; gap: 18px; align-content: start; }
.pdp__name { font-size: clamp(3.4rem, 7vw, 6.4rem); letter-spacing: .02em; line-height: .95; }
.pdp__palette { font-size: 1.3rem; color: var(--wine); margin-top: -6px; }
.pdp__price { font-size: 2rem; }
.pdp__desc { color: var(--ink-2); max-width: 52ch; }
.pdp__form { display: grid; gap: 22px; padding-block: 26px; border-block: 1px solid var(--line-2); margin-top: 8px; }
.pdp__demo { font-size: .76rem; color: var(--ink-2); text-align: center; }
.pdp__flowers { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pdp__flowers li::before { content: '— '; color: var(--wine); }
@media (min-width: 900px) {
  .pdp { grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
  .pdp__gallery { position: sticky; top: calc(var(--header) + 20px); }
}

/* ---------- Formularios ---------- */
.field { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { padding: 0; margin-bottom: 10px; }
.field input:not([type=checkbox]):not([type=radio]), .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 12px 0; font-size: 1rem; border-radius: 0; transition: border-color var(--t1); }
.field textarea { resize: vertical; min-height: 96px; border: 1px solid var(--line-2); padding: 12px; }
.field :is(input, textarea, select):focus { outline: none; border-color: var(--ink); }
.field :is(input, textarea, select):focus-visible { box-shadow: 0 2px 0 var(--wine); }
.field [aria-invalid=true] { border-color: var(--wine) !important; }
.field__hint { font-size: .76rem; color: var(--ink-2); text-align: right; }
.field__err { font-size: .78rem; color: var(--wine); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); width: max-content; }
.qty button { width: 46px; height: 46px; font-size: 1.2rem; transition: background var(--t1); }
.qty button:hover { background: var(--paper); }
.qty input { width: 52px !important; text-align: center; border: 0 !important; padding: 0 !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty--sm button { width: 34px; height: 34px; font-size: 1rem; }
.qty--sm input { width: 34px !important; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--wine); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 16px 0; font-size: .95rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; transition: transform var(--t2) var(--ease); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc > :not(summary) { padding-bottom: 18px; color: var(--ink-2); }

/* ---------- Opciones (radio) ---------- */
.opts { display: grid; gap: 8px; }
.opts--4 { grid-template-columns: repeat(2, 1fr); }
.opts--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 599px) { .opts--3:has(.opt--color) { grid-template-columns: repeat(2, 1fr); } }
.opts--wrap { display: flex; flex-wrap: wrap; }
@media (min-width: 600px) { .opts--4 { grid-template-columns: repeat(4, 1fr); } }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt__box { display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-2); transition: border-color var(--t1), background var(--t1); height: 100%; }
.opt--color .opt__box { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.opts--wrap .opt__box { min-height: 44px; }
.opt__t { font-size: .9rem; }
.opt__s { font-size: .76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.opt__sw { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(36, 37, 31, .15); transition: transform var(--t2) var(--ease); }
.opt:hover .opt__box { border-color: var(--ink); }
.opt input:checked + .opt__box { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.opt input:checked + .opt__box .opt__s { color: rgba(242, 237, 228, .7); }
.opt input:checked + .opt__box .opt__sw { transform: scale(1.15); box-shadow: 0 0 0 2px var(--ivory); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--wine); outline-offset: 2px; }

/* ---------- Configurador ---------- */
.builder { display: grid; gap: 32px; }
.builder__preview { position: relative; aspect-ratio: 5 / 6; display: grid; place-items: center; padding: 6%; }
.builder__caption { position: absolute; left: 18px; bottom: 14px; right: 18px; font-size: .8rem; color: var(--ink-2); }
.builder__form { display: grid; gap: 30px; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step legend { display: flex; gap: 12px; align-items: baseline; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 14px; padding: 0; }
.step__n { font-size: .72rem; color: var(--wine); letter-spacing: .1em; }
.builder__sum { display: grid; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.builder__sum dl { display: flex; justify-content: space-between; gap: 20px; }
.builder__sum dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-2); }
.builder__sum dd { font-size: 1.05rem; }
.builder__total { font-size: 2rem !important; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 899px) { .builder__preview { position: sticky; top: var(--header); z-index: 5; aspect-ratio: auto; height: 34svh; padding: 3%; overflow: hidden; } .builder__caption { display: none; } .builder__form :is(.opt, button) { scroll-margin-top: calc(var(--header) + 34svh + 16px); } }
.bouquet { pointer-events: none; }
.bouquet--auto { transition: opacity .45s var(--ease); }
.bouquet--auto .stem { transition: none; }
@media (min-width: 900px) {
  .builder { grid-template-columns: 6fr 5fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
  .builder__preview { position: sticky; top: calc(var(--header) + 20px); }
}

/* ---------- Suscripción ---------- */
.subscribe { display: grid; gap: 40px; }
.subscribe__pick { display: grid; gap: 40px; align-content: start; }
.freq { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.freq legend { margin-bottom: 14px; padding: 0; }
.freq__opt { position: relative; cursor: pointer; }
.freq__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.freq__box { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 22px; border: 1px solid var(--line-2); transition: border-color var(--t1), background var(--t2) var(--ease), color var(--t2); }
.freq__name { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.freq__price { font-size: 1.15rem; font-variant-numeric: tabular-nums; align-self: center; }
.freq__note { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-2); }
.freq__opt:hover .freq__box { border-color: var(--ink); }
.freq__opt input:checked + .freq__box { background: var(--wine); border-color: var(--wine); color: var(--ivory); }
.freq__opt input:checked + .freq__box :is(.freq__note, small) { color: rgba(242, 237, 228, .75); }
.freq__opt input:focus-visible + .freq__box { outline: 2px solid var(--ink); outline-offset: 3px; }
.subscribe__sum { background: var(--paper); padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.subscribe__plan { font-size: 2rem; font-weight: 300; letter-spacing: -.035em; }
.subscribe__price { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.subscribe__price span { display: inline-block; }
.subscribe__price span.is-tick { animation: tick .5s var(--ease); }
.subscribe__dl { border-block: 1px solid var(--line-2); padding-block: 10px; margin-block: 8px; }
.subscribe__dl div { display: flex; justify-content: space-between; padding: 6px 0; font-size: .92rem; }
.subscribe__dl dt { color: var(--ink-2); }
.subscribe__dates { display: grid; gap: 2px; font-size: .92rem; margin-bottom: 10px; }
.subscribe__dates li { display: flex; gap: 12px; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.subscribe__dates li span { color: var(--wine); min-width: 22px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .subscribe { grid-template-columns: 7fr 4fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
  .subscribe__sum { position: sticky; top: calc(var(--header) + 20px); }
}
.how { display: grid; gap: 40px; }
.how__steps { display: grid; gap: 32px; }
.how__steps li { display: grid; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 20px; }
.how__steps span { color: var(--wine); font-size: .74rem; }
.how__steps h3 { font-size: 1.6rem; }
.how__steps p { color: var(--ink-2); }
@media (min-width: 900px) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .faq { max-width: 760px; } }

/* ---------- Experiencias ---------- */
.ws-list { border-top: 1px solid var(--line-2); }
.ws { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px 16px; padding: 26px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.ws__n { color: var(--wine); font-size: .74rem; }
.ws__name { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }
.ws__text, .ws__meta { grid-column: 2 / -1; color: var(--ink-2); }
.ws__meta { font-size: .82rem; letter-spacing: .06em; }
.ws__price { grid-column: 2; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .ws { grid-template-columns: 70px 4fr 4fr 2fr 2fr; } .ws__text, .ws__meta, .ws__price { grid-column: auto; } .ws__price { text-align: right; } }
.booking__head { display: grid; gap: 18px; margin-bottom: 40px; }
.booking__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .booking__grid { grid-template-columns: 6fr 5fr; gap: clamp(40px, 6vw, 100px); align-items: start; } }
.cal__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal__month { font-size: 1.5rem; letter-spacing: -.02em; }
.cal__month::first-letter, .slots__date::first-letter { text-transform: uppercase; }
.cal__dow, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span { text-align: center; font-size: .72rem; letter-spacing: .14em; color: var(--ink-2); padding-bottom: 8px; }
.cal__day { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: .95rem; font-variant-numeric: tabular-nums; border: 1px solid transparent; transition: background var(--t1), color var(--t1), border-color var(--t1); min-height: 40px; }
.cal__day[disabled] { color: rgba(36, 37, 31, .3); cursor: default; }
.cal__day.has-ws::after, .cal__legend .dot { content: ''; position: absolute; bottom: 18%; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.cal__day.has-ws:hover { border-color: var(--ink); }
.cal__day[aria-pressed=true] { background: var(--wine); color: var(--ivory); }
.cal__day[aria-pressed=true]::after { background: var(--ivory); }
.cal__day.is-today { text-decoration: underline; text-underline-offset: 4px; }
.cal__days.is-swap { animation: rise .5s var(--ease); }
.cal__legend { font-size: .78rem; color: var(--ink-2); margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.cal__legend .dot { position: static; display: inline-block; }
.slots { background: var(--paper); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; min-height: 280px; align-content: start; }
.slots__empty { color: var(--ink-2); }
.slots__date { font-size: 1.6rem; font-weight: 300; letter-spacing: -.03em; }
.slot { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; text-align: left; padding: 14px; border: 1px solid var(--line-2); align-items: center; transition: background var(--t1), border-color var(--t1), color var(--t1); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.slot:hover { border-color: var(--ink); }
.slot[aria-pressed=true] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.slot__time { font-variant-numeric: tabular-nums; }
.slot__seats { font-size: .78rem; opacity: .75; }
.slot[disabled] { opacity: .45; cursor: not-allowed; }
.slots__book { display: grid; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.slots__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.slots__total { font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- Proyectos ---------- */
.gallery-wrap .filters { margin-bottom: 48px; }
.gallery { display: grid; gap: 56px var(--gap); }
.gitem__btn { display: grid; gap: 14px; text-align: left; width: 100%; }
.gitem .media { aspect-ratio: 4 / 3; }
.gitem .media img { transition: transform 1.1s var(--ease); }
.gitem__btn:hover .media img { transform: scale(1.04); }
.gitem__meta { display: grid; gap: 2px; }
.gitem__cat { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.gitem__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.03em; font-weight: 300; }
.gitem__client { color: var(--ink-2); font-size: .9rem; }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .gitem { grid-column: span 6; }
  .gitem--0 { grid-column: 1 / 7; }
  .gitem--1 { grid-column: 8 / 12; margin-top: 14vh; }
  .gitem--2 { grid-column: 3 / 8; }
  .gallery.is-filtered .gitem { grid-column: span 6; margin-top: 0; }
}
.offer { display: grid; gap: 0; border-top: 1px solid var(--line-2); padding-top: 0; margin-top: var(--sec); }
.offer__row { display: grid; gap: 14px; padding: 36px 0; border-bottom: 1px solid var(--line-2); justify-items: start; }
.offer__n { font-family: var(--serif); font-style: italic; color: var(--wine); font-size: 1.6rem; }
.offer__row p { color: var(--ink-2); max-width: 52ch; }
.offer__price { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .offer__row { grid-template-columns: 60px 4fr 5fr 2fr auto; align-items: baseline; gap: var(--gap); } }

.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(36, 37, 31, .5); opacity: 0; transition: opacity var(--t2) var(--ease); }
.lightbox__panel { position: relative; margin: auto; width: min(1200px, 100% - 2 * var(--gut)); max-height: calc(100svh - 48px); overflow: auto; background: var(--ivory); display: grid; gap: 24px; padding: clamp(18px, 3vw, 40px); opacity: 0; transform: translateY(30px); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); }
.lightbox.is-open .lightbox__scrim { opacity: 1; }
.lightbox.is-open .lightbox__panel { opacity: 1; transform: none; }
.lightbox__close { position: absolute; top: 8px; right: 12px; z-index: 2; }
.lightbox__media { overflow: hidden; background: var(--paper); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease) .1s; display: grid; place-items: center; aspect-ratio: 4 / 3; }
.lightbox.is-open .lightbox__media { clip-path: inset(0); }
.lightbox__media img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__copy { display: grid; gap: 14px; align-content: end; }
.lightbox__copy h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.lightbox__client { color: var(--wine); }
.lightbox__nav { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); margin-top: 12px; }
@media (min-width: 900px) { .lightbox__panel { grid-template-columns: 3fr 2fr; gap: 48px; } }

/* ---------- Nosotros ---------- */
.story { display: grid; gap: 40px var(--gap); }
.story__lead p { font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.22; letter-spacing: -.025em; font-weight: 300; }
.dropcap::first-letter { float: left; font-family: var(--serif); font-style: italic; color: var(--wine); font-size: 3.4em; line-height: .8; padding: .06em .1em 0 0; }
.story__cols { display: grid; gap: 20px; color: var(--ink-2); }
.story__img1 { aspect-ratio: 4 / 5; }
.story__img2 { width: min(70%, 420px); justify-self: end; aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .story { grid-template-columns: repeat(12, 1fr); }
  .story__lead { grid-column: 1 / 10; }
  .story__img1 { grid-column: 1 / 6; width: 100%; }
  .story__cols { grid-column: 7 / 12; grid-template-columns: 1fr 1fr; gap: var(--gap); align-self: center; }
  .story__img2 { grid-column: 9 / 12; width: 100%; margin-top: -80px; }
}
.principles__list { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.principles__list li { display: grid; grid-template-columns: 40px 1fr; gap: 6px 16px; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.principles__n { color: var(--wine); font-size: .74rem; padding-top: 10px; }
.principles__list h3 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
.principles__list p { grid-column: 2; color: var(--ink-2); max-width: 50ch; }
@media (min-width: 900px) { .principles__list li { grid-template-columns: 70px 5fr 5fr; align-items: baseline; } .principles__list p { grid-column: auto; } }
.quote-sec { padding-block: var(--sec); margin-top: var(--sec); }
.quote p { font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.08; letter-spacing: -.03em; max-width: 22ch; }
.quote .label { color: rgba(242, 237, 228, .7); margin-top: 32px; }
.quote-sec + .site-footer { margin-top: 0; }

/* ---------- Contacto ---------- */
.contact { display: grid; gap: 56px; }
.contact__info { display: grid; gap: 40px; align-content: start; }
.contact__info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.contact__info dt { margin-bottom: 8px; }
.contact__info dd { font-size: 1.05rem; }
.contact__services ul { border-top: 1px solid var(--line-2); margin-top: 14px; }
.contact__services li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.contact__services li span:last-child { color: var(--ink-2); text-align: right; }
.contact__note { font-size: .78rem; color: var(--ink-2); }
.contact__form { display: grid; gap: 26px var(--gap); align-content: start; }
.form-msg { font-size: .95rem; min-height: 1.5em; }
.form-msg.is-ok { background: var(--sage); padding: 18px 20px; color: var(--ink); }
@media (min-width: 900px) {
  .contact { grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); }
  .contact__form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

/* ---------- Carrito (drawer) ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(36, 37, 31, .42); opacity: 0; transition: opacity .5s var(--ease); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--ivory); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(100%); transition: transform .7s var(--ease); outline: none; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gut) 14px 24px; border-bottom: 1px solid var(--line-2); }
.drawer__head h2 { font-size: 1.6rem; letter-spacing: -.03em; }
.drawer__body { overflow-y: auto; padding: 8px 24px; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; }
.drawer__sum { display: flex; justify-content: space-between; font-size: 1.15rem; }
.drawer__sum dd { font-variant-numeric: tabular-nums; }
.drawer__note, .drawer__demo { font-size: .76rem; color: var(--ink-2); }
.drawer__demo { text-align: center; }
.citem { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.citem__img { width: 76px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper); }
.citem__img--svg { display: grid; place-items: center; }
.citem__name { font-weight: 500; letter-spacing: .16em; font-size: .9rem; }
.citem__meta { font-size: .8rem; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.citem__right { display: grid; justify-items: end; align-content: space-between; gap: 8px; }
.citem__price { font-variant-numeric: tabular-nums; font-size: .95rem; }
.citem__rm { font-size: .74rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.citem__rm:hover { color: var(--wine); }
.drawer__empty { padding: 48px 0; display: grid; gap: 18px; justify-items: start; }
.drawer__empty p { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.drawer__done { padding: 40px 0; display: grid; gap: 16px; animation: rise .6s var(--ease) both; }
.drawer__done h3 { font-size: 2rem; }
.drawer__done p { color: var(--ink-2); }
.drawer__done code { font-family: var(--sans); background: var(--paper); padding: 2px 8px; color: var(--wine); }
html.drawer-open { overflow: hidden; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; translate: -50% 0; background: var(--ink); color: var(--ivory); padding: 14px 20px; font-size: .88rem; max-width: calc(100% - 32px); opacity: 0; transform: translateY(20px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }

/* ---------- Modal simple de confirmación ---------- */
.confirm { margin-top: 6px; padding: 18px 20px; background: var(--sage); display: grid; gap: 6px; animation: rise .6s var(--ease) both; }
.confirm strong { font-weight: 500; }
.confirm p { font-size: .9rem; }

/* ---------- Sistema de movimiento ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes logo-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes tick { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }

/* Revelados: solo opacity + transform (compositor). Sin clip-path ni escalado de fotos grandes. */
.js [data-reveal=fade] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal=fade].is-visible { opacity: 1; transform: none; }
.js [data-reveal=media] > picture { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal=media].is-visible > picture { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms + var(--d, 0ms)); }
.js .split.is-visible .w > span { transform: none; }
.split em { color: var(--wine); }
.pcard__media img, .gitem .media img { transition: transform .9s var(--ease); }

/* Revelado por máscara: la foto se expande desde un recorte interior y se asienta (una sola vez, al entrar). */
figure[data-reveal=mask] { overflow: hidden; }
figure[data-reveal=mask] > picture { display: block; width: 100%; height: 100%; }
figure[data-reveal=mask] img { width: 100%; height: 100%; object-fit: cover; }
.js figure[data-reveal=mask] { clip-path: inset(9% 7% 9% 7%); transition: clip-path 1.3s var(--ease-io); transition-delay: var(--d, 0ms); }
.js figure[data-reveal=mask] img { transform: scale(1.14); transition: transform 1.9s var(--ease); transition-delay: var(--d, 0ms); }
.js figure[data-reveal=mask].is-visible { clip-path: inset(0); }
.js figure[data-reveal=mask].is-visible img { transform: none; }
/* Iconos de línea */
.i { display: inline-block; flex: none; vertical-align: middle; }
.arr .i { display: block; }

/* Transiciones entre páginas (View Transitions, mejora progresiva) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .55s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal=fade], .js .split .w > span, .js [data-reveal=media] > picture { opacity: 1; transform: none; }
  .js figure[data-reveal=mask] { clip-path: none; } .js figure[data-reveal=mask] img { transform: none; }
  @view-transition { navigation: none; }
}
