/* Capa de experiencia: mejora progresiva, siempre con navegación nativa. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: scene-out .38s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: scene-in .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes scene-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes scene-in { from { opacity: 0; transform: translateY(32px); } }
html { scroll-padding-top: 130px; }
.header { position: sticky; top: 0; z-index: 60; transition: box-shadow .3s, background .3s; }
.header.is-scrolled { box-shadow: 0 8px 35px #35203912; background: #faf6edf7; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 80; background: var(--gold); transform: scaleX(var(--reading-progress,0)); transform-origin: left; pointer-events: none; }
.hero { min-height: min(850px,calc(100svh - 112px)); min-height: clamp(650px,calc(100svh - 112px),850px); }
.hero-visual > img { transform: translate3d(0,var(--parallax-y,0px),0) scaleX(-1) scale(var(--hero-zoom,1)); }
.year-seal { transform: rotate(var(--seal-angle,10deg)); }
.ribbon { display: block; overflow: hidden; padding: 25px 0; }
.ribbon-track { display: flex; align-items: center; gap: 44px; width: max-content; transform: translate3d(var(--ribbon-x,-40px),0,0); font: 500 clamp(20px,2.1vw,32px) var(--serif); }
.ribbon .ribbon-track span, .ribbon .ribbon-track b { display: block; flex-shrink: 0; white-space: nowrap; }
.ribbon-track b { color: var(--gold); font-size: 32px; }
.taste-story { padding: 85px 10% 80px; background: #eee3ef; color: var(--purple); overflow: clip; }
.taste-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.taste-star { font-size: 64px; line-height: 1; color: var(--purple); transform: rotate(var(--story-turn,0deg)); }
.taste-story h2 { max-width: 1140px; margin: 35px 0 48px; font: 500 clamp(46px,6.4vw,96px)/1.16 var(--serif); letter-spacing: -3px; }
.story-word { display: inline-block; opacity: var(--word-opacity,1); transform: translateY(var(--word-y,0px)); }
.taste-bottom { padding-top: 28px; border-top: 1px solid #bfa7c6; display: flex; align-items: center; gap: 32px; }
.taste-bottom > span { font: italic 25px var(--serif); }
.taste-bottom p { margin-left: auto; font-size: 11px; line-height: 1.8; }
.taste-next { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border: 1px solid var(--purple); border-radius: 50%; font-size: 27px; transition: background .25s,color .25s; }
.taste-next:hover { background: var(--purple); color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.history { position: relative; }
.history-year strong { display: block; transform: translateY(var(--year-y,0px)); text-shadow: 0 14px 50px #35113925; }
.history-year { border-color: #eed8ac77; }
.product > a, .catalog-photo { transform: perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .3s ease-out,box-shadow .35s; transform-origin: center; }
.product > a { display: block; border-radius: 6px; }
.button,.nav-contact,.product-whatsapp { position: relative; overflow: hidden; isolation: isolate; }
.button::after,.nav-contact::after,.product-whatsapp::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #ffffff18; transform: translateX(-105%) skewX(-15deg); transition: transform .5s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.button:hover::after,.nav-contact:hover::after,.product-whatsapp:hover::after { transform: translateX(0) skewX(0); }
.button > span,.product-whatsapp > span { transition: transform .3s; }
.button:hover > span,.product-whatsapp:hover > span { transform: translate(3px,-3px); }
.category-tabs { position: sticky; top: 112px; z-index: 30; }
.catalog-card { scroll-margin-top: 220px; }
.catalog-section { scroll-margin-top: 80px; }
.catalog-cross { position: relative; overflow: clip; }
.catalog-cross::before { content: '✳'; position: absolute; right: 3%; top: 0; color: #82258012; font-size: clamp(130px,24vw,340px); line-height: 1; transform: rotate(var(--cross-turn,0deg)); pointer-events: none; }
.catalog-card details[open] .product-description { animation: detail-in .4s ease-out; }
@keyframes detail-in { from { opacity: 0; transform: translateY(-8px); } }
.photo-dialog[open] { animation: photo-in .35s cubic-bezier(.16,1,.3,1); }
@keyframes photo-in { from { opacity: 0; transform: translateY(25px) scale(.96); } }
.photo-dialog::backdrop { background: #24152ad6; }
.motion-control { min-height: 44px; border: 1px solid #b49bbd; padding: 8px 13px; border-radius: 24px; background: transparent; color: var(--deep); font: 500 10px var(--sans); cursor: pointer; }
.motion-control:hover { background: var(--cream); }
.motion-control:disabled { cursor: default; opacity: .8; }
.footer-bottom { align-items: center; flex-wrap: wrap; }
footer { padding-bottom: 95px; }
.variant-list button { min-height: 44px; }
.dialog-close { min-width: 44px; min-height: 44px; }
.whatsapp-float { bottom: max(18px,env(safe-area-inset-bottom)); }
@media (hover:hover) and (pointer:fine) {
  .product > a:hover,.catalog-photo:hover { box-shadow: 0 24px 45px #35203926; }
  .product > a:focus-visible,.catalog-photo:focus-visible { transform: none; }
}
@media(min-width:1100px) { .history { align-items: start; } .history-year { position: sticky; top: 150px; } .history-copy { padding: 25px 0; } }
@media(max-width:1050px) { .header nav { gap: 18px; } .nav-contact { padding: 11px 17px; } .taste-story { padding-inline: 7%; } }
@media(max-width:760px) {
  html { scroll-padding-top: 110px; }
  .header { height: 96px; }
  .header nav { max-height: calc(100dvh - 96px); overflow-y: auto; }
  .hero { min-height: 650px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-copy { padding-top: 100px; }
  .ribbon { padding-block: 19px; }
  .ribbon-track { gap: 28px; font-size: 22px; }
  .taste-story { padding: 48px 6% 45px; }
  .taste-heading .eyebrow { max-width: 220px; font-size: 8px; }
  .taste-star { font-size: 43px; }
  .taste-story h2 { margin: 28px 0 32px; font-size: clamp(40px,8vw,62px); letter-spacing: -1.6px; }
  .taste-bottom { gap: 18px; flex-wrap: wrap; }
  .taste-bottom > span { font-size: 21px; }
  .taste-bottom p { font-size: 9px; }
  .taste-next { width: 42px; height: 42px; }
  .category-tabs { top: 96px; }
  .category-tabs a { padding: 15px 25px; }
  .catalog-card { scroll-margin-top: 180px; }
  .catalog-grid { grid-template-columns: minmax(0,1fr); }
  .catalog-card { max-width: 520px; width: 100%; justify-self: center; }
  .catalog-photo { max-height: none; }
  .catalog-intro-layout > div,.hero-copy,.section-heading > div { min-width: 0; }
  .motion-control { font-size: 9px; }
  footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media(max-width:360px) { .taste-bottom p { margin-left: 0; } .taste-next { margin-left: auto; } .hero-actions { gap: 16px; } }
@media(max-height:500px) and (orientation:landscape) { .header,.category-tabs { position: relative; top: auto; } html { scroll-padding-top: 20px; } .brand-intro .intro-art { width: 105px; margin-bottom: 16px; } .brand-intro .intro-year { font-size: 19px; } .intro-skip { bottom: 12px; } .photo-dialog > img { height: 52vh; } }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .hero-visual > img { transform: scaleX(-1); }
html[data-motion="off"] .story-word { opacity: 1; transform: none; }
html[data-motion="off"] .ribbon-track,html[data-motion="off"] .history-year strong,html[data-motion="off"] .taste-star,html[data-motion="off"] .catalog-cross::before { transform: none; }
html[data-motion="off"] .year-seal { transform: rotate(10deg); }
html[data-motion="off"] .product > a,html[data-motion="off"] .catalog-photo { transform: none; }
html[data-motion="off"]::view-transition-old(root),html[data-motion="off"]::view-transition-new(root) { animation: none; }
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) { animation: none !important; }
  .story-word { opacity: 1; transform: none; }
  .ribbon-track,.history-year strong,.taste-star,.catalog-cross::before,.product > a,.catalog-photo { transform: none; }
  .hero-visual > img { transform: scaleX(-1); }
  .year-seal { transform: rotate(10deg); }
}

/* Fotografías de la dueña: encuadres sin invertir las imágenes ni sus etiquetas. */
.hero.hero-real { display: grid; grid-template-columns: 1.08fr 1fr; min-height: clamp(620px,calc(100svh - 112px),800px); background: #36203e; }
.hero-real::after { display: none; }
.hero-real .hero-copy { width: auto; min-width: 0; padding: 65px 9% 85px 15%; }
.hero-real .hero-visual { position: relative; inset: auto; z-index: auto; min-height: 100%; overflow: hidden; }
.hero.hero-real .hero-visual > img { inset: 0; height: 100%; object-position: 50% 62%; transform: none; }
.hero-real .year-seal { right: 30px; top: 30px; }
.hero-real .hero-actions { flex-wrap: wrap; gap: 20px; }
.hero-real .scroll-cue { left: 7.8%; }
.product .category-photo { aspect-ratio: 4 / 5; }
.product .category-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.brand-photo.brand-photo-real { aspect-ratio: 3 / 2; }
.brand-photo.brand-photo-real img { inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.sweet-moments { background: #eee3ef; }
.moments-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 42px; }
.moments-heading h2 { margin-top: 18px; }
.moments-heading > p { font-size: 13px; color: var(--muted); line-height: 1.85; padding-bottom: 6px; }
.moments-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 24px; }
.moments-grid figure { overflow: hidden; border-radius: 4px; aspect-ratio: 1066 / 1600; }
.moments-grid figure:nth-child(2) { margin-top: 45px; }
.moments-grid img { height: 100%; object-fit: cover; }
.moments-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 34px; padding-top: 22px; border-top: 1px solid #bfa7c6; }
.moments-bottom > span { font: italic 23px var(--serif); color: var(--purple); }
@media(max-width:1050px) and (min-width:761px) {
  .hero-real .hero-copy { padding: 55px 8% 85px 12%; }
  .hero-real h1 { font-size: clamp(42px,5vw,58px); }
  .hero-real .hero-description br { display: none; }
  .hero-real .hero-actions { flex-direction: column; align-items: flex-start; }
}
@media(max-width:760px) {
  .hero.hero-real { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .hero-real .hero-copy { padding: 46px 6% 48px; }
  .hero-real .hero-visual { min-height: 0; height: clamp(330px,110vw,500px); }
  .hero.hero-real .hero-visual > img { object-position: 50% 64%; }
  .hero-real .year-seal { top: 22px; right: 22px; }
  .hero-real .hero-foot { margin-top: 28px; }
  .hero-real .scroll-cue { display: none; }
  .product .category-photo { aspect-ratio: 4 / 5; }
  .moments-heading { display: block; margin-bottom: 30px; }
  .moments-heading > p { margin-top: 20px; }
  .moments-heading > p br { display: none; }
  .moments-grid { gap: 12px; }
  .moments-grid figure:nth-child(2) { margin-top: 24px; }
  .moments-bottom { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 26px; }
  .moments-bottom > span { font-size: 21px; }
}
@media(max-width:480px) {
  .moments-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .moments-grid figure:first-child { grid-column: 1 / -1; width: 78%; justify-self: center; }
  .moments-grid figure:nth-child(2) { margin-top: 0; }
}