:root {
    --fucsia: #e3197e;
    --fucsia-2: #b8105f;
    --rosa-bebe: #fde4ee;
    --rosa-palo: #f8c9dc;
    --crema: #fff8f6;
    --blanco: #ffffff;
    --negro: #1c1518;
    --haya-claro: #f8ecdf;
    --haya-medio: #efd9bf;
    --tostado: #5a3417;
    --veta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22600%22%3E%3Cfilter%20id%3D%22v%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0035%200.09%22%20numOctaves%3D%224%22%20seed%3D%228%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.47%20%200%200%200%200%200.26%20%200%200%200%200%200.09%20%200%200%200%201.25%20-0.42%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22900%22%20height%3D%22600%22%20fill%3D%22%23e2b07a%22%2F%3E%3Crect%20width%3D%22900%22%20height%3D%22600%22%20filter%3D%22url%28%23v%29%22%2F%3E%3C%2Fsvg%3E");
    --madera: repeating-linear-gradient(93deg, rgba(110, 60, 20, .12) 0 2px, transparent 2px 11px), repeating-linear-gradient(87deg, rgba(255, 238, 214, .22) 0 1px, transparent 1px 17px), linear-gradient(180deg, #e0aa70, #c98a4c);
    --marco-rosa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M7%203.4C30%202.1%2068%203.1%2093.5%203.6C97%204%2097.8%207.5%2097.4%2013C96.9%2038%2098.2%2066%2097%2089.5C96.7%2095.6%2093.4%2097.3%2087.6%2097C60%2098.2%2034%2096.6%2011%2097.5C5.2%2097.7%202.7%2094.6%202.9%2088.4C3.5%2061%202.1%2036%203.3%2011.2C3.5%206.3%204.4%203.6%207%203.4Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e3197e%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M8.5%204.6C34%203.7%2066%204.9%2092%204.4C95.5%204.6%2096.3%209%2096.2%2015C95.6%2040%2096.9%2064%2095.8%2088C95.4%2094%2092.6%2095.8%2086%2095.6C62%2096.6%2036%2095.4%2012.5%2096C7%2096.2%204.3%2093.8%204.4%2087.6C4.9%2062%203.7%2038%204.6%2012.6C4.8%207.6%205.6%204.8%208.5%204.6Z%22%20fill%3D%22none%22%20stroke%3D%22%23e3197e%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E");
    --marco-haya: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M7%203.4C30%202.1%2068%203.1%2093.5%203.6C97%204%2097.8%207.5%2097.4%2013C96.9%2038%2098.2%2066%2097%2089.5C96.7%2095.6%2093.4%2097.3%2087.6%2097C60%2098.2%2034%2096.6%2011%2097.5C5.2%2097.7%202.7%2094.6%202.9%2088.4C3.5%2061%202.1%2036%203.3%2011.2C3.5%206.3%204.4%203.6%207%203.4Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23a86a32%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M8.5%204.6C34%203.7%2066%204.9%2092%204.4C95.5%204.6%2096.3%209%2096.2%2015C95.6%2040%2096.9%2064%2095.8%2088C95.4%2094%2092.6%2095.8%2086%2095.6C62%2096.6%2036%2095.4%2012.5%2096C7%2096.2%204.3%2093.8%204.4%2087.6C4.9%2062%203.7%2038%204.6%2012.6C4.8%207.6%205.6%204.8%208.5%204.6Z%22%20fill%3D%22none%22%20stroke%3D%22%23a86a32%22%20stroke-opacity%3D%22.3%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E");
    --ola-rosa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2022C90%208%20170%2030%20270%2020S440%206%20560%2018%20760%2034%20880%2021%201080%206%201200%2018V40H0Z%22%20fill%3D%22%23fde4ee%22%2F%3E%3C%2Fsvg%3E");
    --ola-haya: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2022C90%208%20170%2030%20270%2020S440%206%20560%2018%20760%2034%20880%2021%201080%206%201200%2018V40H0Z%22%20fill%3D%22%23f8ecdf%22%2F%3E%3C%2Fsvg%3E");
    --ola-pie: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2022C90%208%20170%2030%20270%2020S440%206%20560%2018%20760%2034%20880%2021%201080%206%201200%2018V40H0Z%22%20fill%3D%22%23efd9bf%22%2F%3E%3C%2Fsvg%3E");
    --garabato: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2010%22%3E%3Cpath%20d%3D%22M2%206.5C6%202.5%209%202.5%2012%206S18%209%2021.5%205.2%2028.5%202%2031.5%205.6%2036%208.4%2038%204.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3197e%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    --pincel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2011C40%206.5%2090%205%20196%207.5%22%20fill%3D%22none%22%20stroke%3D%22%23e3197e%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2012.5C60%209%20120%208.6%20190%2010%22%20fill%3D%22none%22%20stroke%3D%22%23e3197e%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    --haya: #cf9152;
    --haya-2: #a86a32;
    --gris: #6f6268;
    --linea: rgba(28, 21, 24, .12);

    --f-titulo: "Baloo 2", system-ui, sans-serif;
    --f-texto: "Nunito", system-ui, sans-serif;
    --f-mano: "Caveat", cursive;

    --r-sm: 12px;
    --r-md: 20px;
    --sombra: 0 18px 40px -22px rgba(120, 20, 70, .35);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --barra: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(84px + var(--barra)); -webkit-text-size-adjust: 100%; }
.con-temporada { --barra: 42px; }
body {
    margin: 0; background: var(--crema); color: var(--negro);
    font: 400 1.0625rem/1.65 var(--f-texto);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.08; margin: 0 0 .6rem; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.015em; line-height: 1.05; }
h4 { letter-spacing: 0; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--negro); color: var(--blanco); padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2.5px solid var(--fucsia); outline-offset: 3px; }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fucsia-2); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 28px; height: 8px; background: var(--garabato) center / contain no-repeat; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
    font-weight: 800; font-size: .98rem; text-decoration: none; line-height: 1.2;
    transition: transform .12s ease-out, background-color .2s var(--ease), box-shadow .2s var(--ease);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--fucsia); color: var(--blanco); box-shadow: 0 10px 24px -12px var(--fucsia); }
.btn--primary:hover { background: var(--fucsia-2); }
.btn--ghost { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--negro); }
.btn--small { padding: .55rem 1rem; font-size: .88rem; }
.btn--large { padding: 1rem 1.7rem; font-size: 1.02rem; }
.btn--bloque { width: 100%; }

/* ---------- Barra de temporada ---------- */
.temporada { position: fixed; inset: 0 0 auto; z-index: 101; height: 42px; background: var(--haya-medio); color: var(--tostado); font-size: .9rem; font-weight: 600; box-shadow: inset 0 -3px 0 rgba(168, 106, 50, .25); }
.temporada__inner { height: 100%; display: flex; align-items: center; justify-content: center; gap: .8rem; }
.temporada p { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.temporada__corto { display: none; }
.temporada a { display: inline-flex; align-items: center; gap: .3rem; flex: none; color: var(--fucsia-2); font-weight: 800; text-decoration: none; }
.temporada a:hover { color: var(--fucsia); }
.temporada__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fucsia); box-shadow: 0 0 0 4px rgba(227, 25, 126, .3); animation: latir 1.6s ease-in-out infinite; }
@keyframes latir { 50% { box-shadow: 0 0 0 7px rgba(227, 25, 126, 0); } }

/* ---------- Navegación ---------- */
.nav { position: fixed; top: var(--barra); left: 0; right: 0; z-index: 100; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav.is-scrolled { background: rgba(255, 248, 246, .82); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 0 var(--linea); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--fucsia); }
.brand__mark img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 6px 14px -8px rgba(227, 25, 126, .6); }
.brand__text { font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.brand__text small { font-size: .55em; font-weight: 700; vertical-align: .35em; }
.brand__text i { font-style: normal; font-size: .9em; }
.nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.nav__menu a:not(.btn) { text-decoration: none; font-size: .95rem; font-weight: 700; color: var(--gris); position: relative; transition: color .2s; }
.nav__menu a:not(.btn):hover, .nav__menu a.is-active { color: var(--negro); }
.nav__menu a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 3px; background: var(--fucsia); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--negro); transition: transform .3s var(--ease); }
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Inicio ---------- */
.hero {
    position: relative; overflow: hidden; padding: calc(124px + var(--barra)) 0 84px;
    background:
        linear-gradient(180deg, rgba(255, 248, 246, 0) 50%, var(--crema) 100%),
        linear-gradient(100deg, rgba(255, 248, 246, .8) 0%, rgba(255, 248, 246, .5) 45%, rgba(255, 248, 246, .12) 100%),
        var(--veta) center / 900px 600px repeat;
}
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 45%, rgba(255, 244, 230, .55), transparent 70%); pointer-events: none; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero__titulo { font-size: clamp(2.8rem, 6.6vw, 5.2rem); line-height: .98; letter-spacing: -.02em; font-weight: 800; margin-bottom: 1.6rem; }
.hero__titulo em { display: inline-block; line-height: 1; font-style: normal; color: var(--fucsia); padding-bottom: .2em; background: var(--pincel) 0 100% / 100% .3em no-repeat; }
.hero__bajada { font-size: 1.15rem; color: var(--gris); max-width: 32rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 2rem; }
.hero__datos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .95rem; font-weight: 600; color: var(--gris); }
.hero__datos li { display: flex; align-items: center; gap: .5rem; }
.hero__datos .icon { color: var(--fucsia); }
.hero__visual { position: relative; }
.hero__etiqueta {
    position: absolute; top: 2%; left: 4%; margin: 0; padding: .55rem 1rem .5rem 1.5rem;
    font-family: var(--f-mano); font-size: 1.4rem; line-height: 1.05; color: var(--tostado);
    background: var(--madera); border-radius: 5px 12px 9px 4px; transform: rotate(-6deg);
    text-shadow: 0 1px 0 rgba(255, 236, 212, .55); box-shadow: 0 14px 24px -14px rgba(90, 52, 23, .6);
}
.hero__etiqueta::before { content: ""; position: absolute; left: .55rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--crema); box-shadow: inset 0 1px 2px rgba(90, 52, 23, .5); }

/* ---------- Repisas (melamina blanca con canto haya) ---------- */
.tabla { position: relative; height: 24px; border-radius: 3px; background: linear-gradient(180deg, #fdfcfb, #efe9e6 70%) top / 100% 13px no-repeat, linear-gradient(180deg, var(--haya), var(--haya-2)) bottom / 100% 11px no-repeat; box-shadow: 0 22px 24px -18px rgba(70, 35, 15, .45); }
.estante { position: relative; padding: 3.4rem 0 0; }
.estante__fotos { display: flex; align-items: flex-end; justify-content: center; gap: 3%; padding-inline: 2%; margin-bottom: -4px; }
.estante__marco { margin: 0; padding: 7px; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); background: var(--blanco); border-radius: 10px; box-shadow: 0 16px 26px -16px rgba(80, 20, 50, .45); }
.estante__marco img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 5px; }
.estante__marco--1 { width: 30%; transform: rotate(-2deg); transform-origin: bottom; }
.estante__marco--2 { width: 39%; }
@media (hover: hover) {
    .estante:hover .estante__marco--1 { transform: rotate(-4deg); }
    .estante:hover .estante__marco--3 { transform: rotate(4deg); }
}
.estante__marco--3 { width: 28%; transform: rotate(2deg); transform-origin: bottom; }

.atajos { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 2.4rem; scrollbar-width: none; }
.atajos::-webkit-scrollbar { display: none; }
.atajo { flex: none; padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: .92rem; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--rosa-palo); transition: background-color .2s, color .2s; }
.atajo:hover { background: var(--fucsia); color: var(--blanco); box-shadow: none; }
.atajo:active, .redes__btn:active, .detalle__elegir:active { transform: scale(.96); transition: transform .1s ease-out; }

.repisas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }
.repisa { --hueco: 1.6rem; }
.repisa__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: 1.4rem; }
.repisa__etiqueta { margin: 0; padding: .25rem .9rem .15rem; border-radius: 8px; background: var(--fucsia); color: var(--blanco); font-size: 1.25rem; transform: rotate(-1.5deg); }
.repisa__cabeza p { margin: 0; color: var(--gris); }
.repisa__fila { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--hueco)) / 4); gap: 0 var(--hueco); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--rosa-palo) transparent; padding-bottom: .8rem; }
.repisa__fila.hay-der { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.repisa__fila.hay-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.repisa__fila.hay-izq.hay-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.repisa__fila:has(> .detalle:nth-child(5)) { grid-auto-columns: calc((100% - 3 * var(--hueco)) / 4.35); }
.detalle { scroll-snap-align: start; }
.repisa > .tabla { display: none; }

.detalle { display: flex; flex-direction: column; min-width: 0; }
.detalle__foto { position: relative; }
.detalle__foto img { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
@media (hover: hover) {
    .detalle:hover .detalle__foto img { transform: translateY(-4px); }
}
.detalle:active .detalle__foto img { transform: scale(.98); transition-duration: .1s; }
.detalle__foto img { width: 88%; margin-inline: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--rosa-bebe); box-shadow: 0 18px 22px -18px rgba(80, 20, 50, .55), 0 0 0 5px var(--blanco); position: relative; z-index: 1; }
.detalle__foto::after {
    content: ""; display: block; height: 20px; margin: -4px calc(var(--hueco) / -2 - 1px) 0; border-radius: 0;
    background: linear-gradient(180deg, #fdfcfb, #efe9e6 70%) top / 100% 11px no-repeat, linear-gradient(180deg, var(--haya), var(--haya-2)) bottom / 100% 9px no-repeat;
    box-shadow: 0 22px 22px -18px rgba(70, 35, 15, .42);
}
.detalle:first-child .detalle__foto::after { border-radius: 3px 0 0 3px; }
.detalle:last-child .detalle__foto::after { border-radius: 0 3px 3px 0; }
.detalle__cuerpo { flex: 1; display: flex; flex-direction: column; padding: 1.1rem .2rem 0; }
.detalle__cuerpo h4 { font-size: 1.15rem; margin-bottom: .3rem; }
.detalle__cuerpo p { font-size: .92rem; color: var(--gris); margin-bottom: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detalle__precio { font-family: var(--f-titulo); font-size: 1.3rem !important; font-weight: 800; color: var(--negro) !important; }
.detalle__acciones { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.detalle__elegir { border: 0; background: none; padding: .3rem 0; cursor: pointer; font-weight: 800; font-size: .88rem; color: var(--fucsia-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rosa-palo); }
.detalle__elegir:hover { text-decoration-color: var(--fucsia); }

/* ---------- Secciones ---------- */
.seccion { padding: 96px 0; }
.seccion--rosa { background: var(--rosa-bebe); }
.seccion--haya { background: var(--haya-claro); }
.seccion--rosa, .seccion--haya { position: relative; }
.seccion--rosa::before, .seccion--haya::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 28px; background: var(--ola-rosa) center / 100% 100% no-repeat; pointer-events: none; }
.seccion--haya::before { background-image: var(--ola-haya); }
.seccion__cabeza { max-width: 640px; margin-bottom: 2rem; }
.seccion__bajada { color: var(--gris); }

/* ---------- Personaliza ---------- */
.pedido { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; }
.pedido__intro p { color: var(--gris); }
.formulario__vista:empty { display: none; }
.formulario__vista { padding: .4rem .4rem 1.6rem; }
.formulario__vista .tarjetita { margin: 0 auto; transform: rotate(-1.5deg); }
.tarjetita {
    position: relative; margin-top: 2.2rem; max-width: 380px; background: var(--blanco); color: var(--negro);
    padding: 1.8rem 1.7rem 1.4rem; border-radius: 6px; transform: rotate(-2deg);
    box-shadow: 0 24px 50px -24px rgba(120, 20, 70, .45);
    background-image: repeating-linear-gradient(transparent 0 33px, rgba(227, 25, 126, .14) 33px 34px);
}
.tarjetita::before { content: ""; position: absolute; top: -10px; left: 50%; width: 90px; height: 22px; margin-left: -45px; background: rgba(248, 201, 220, .85); transform: rotate(2deg); }
.tarjetita p { margin: 0; font-family: var(--f-mano); color: var(--negro); }
.tarjetita__para { font-size: 1.5rem; color: var(--fucsia-2) !important; }
.tarjetita__texto { font-size: 1.55rem; line-height: 34px; min-height: 102px; margin: .3rem 0 !important; overflow-wrap: anywhere; }
.tarjetita__texto.vacio { color: #b9aab0 !important; }
.tarjetita__de { text-align: right; font-size: 1.4rem; }

.formulario { background: var(--marco-rosa) center / 100% 100% no-repeat; color: var(--negro); padding: 2.6rem 2.4rem; filter: drop-shadow(0 18px 22px rgba(120, 20, 70, .14)); }
.formulario label { display: block; font-size: .88rem; font-weight: 800; margin-bottom: 1rem; }
.formulario input, .formulario select, .formulario textarea {
    display: block; width: 100%; margin-top: .4rem; padding: .75rem .9rem; border-radius: var(--r-sm);
    border: 1.5px solid var(--linea); background: var(--blanco); font-weight: 500; font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.formulario textarea { resize: vertical; min-height: 92px; }
.formulario :user-invalid { border-color: #d92d20; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--fucsia); box-shadow: 0 0 0 4px rgba(227, 25, 126, .14); }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.formulario__contador { margin: -.7rem 0 1rem; text-align: right; font-size: .78rem; color: var(--gris); }
.formulario__error { color: #b42318; font-size: .9rem; min-height: 1.2em; margin-bottom: .6rem; }
.formulario__nota { margin: .9rem 0 0; font-size: .85rem; color: var(--gris); text-align: center; }

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: paso; }
.pasos li { position: relative; padding: 2.2rem 1.9rem 1.9rem; background: var(--marco-rosa) center / 100% 100% no-repeat; filter: drop-shadow(0 12px 16px rgba(120, 20, 70, .08)); counter-increment: paso; }
.pasos li:nth-child(2) { transform: rotate(.6deg); }
.pasos li:nth-child(3) { transform: rotate(-.5deg); }
.pasos li::after { content: counter(paso); position: absolute; top: .8rem; right: 1.4rem; font-family: var(--f-titulo); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--rosa-bebe); }
.pasos li p { color: var(--gris); margin: 0; }
.pasos__icono { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa-bebe); color: var(--fucsia); margin-bottom: 1.2rem; }
.pasos__icono .icon { width: 22px; height: 22px; }

/* ---------- Delivery ---------- */
.envios { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.envios p { color: var(--gris); }
.zonas h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; margin-bottom: 1.4rem; }
.zonas h3 .icon { color: var(--fucsia); }
.zonas__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem .9rem; }
.zonas__lista li {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.4rem .65rem;
    border-radius: 4px 7px 5px 6px; background: var(--madera); color: var(--tostado); font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 236, 212, .55);
    box-shadow: inset 0 -3px 0 rgba(90, 52, 23, .22), inset 0 1px 0 rgba(255, 240, 220, .5), 0 14px 22px -14px rgba(90, 52, 23, .7);
    animation: flotar 4.2s ease-in-out calc(var(--i) * -.8s) infinite alternate;
}
.zonas__lista li::before, .zonas__lista li::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #8a5a2e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35); }
.zonas__lista li::before { left: .5rem; }
.zonas__lista li::after { right: .5rem; }
.zonas__lista li:nth-child(odd) { --giro: -1.5deg; }
.zonas__lista li:nth-child(even) { --giro: 1.2deg; }
.zonas__lista .icon { color: var(--tostado); width: 1em; height: 1em; }
@keyframes flotar { from { transform: translateY(-5px) rotate(var(--giro, 0deg)); } to { transform: translateY(5px) rotate(calc(var(--giro, 0deg) * -1)); } }

/* ---------- La tienda ---------- */
.ubicacion { display: grid; grid-template-columns: .95fr 1.05fr; gap: 3.5rem; align-items: center; }
.ubicacion__dir { display: flex; gap: .7rem; font-size: 1.1rem; }
.ubicacion__dir .icon { margin-top: .3rem; color: var(--fucsia); }
.ubicacion small { color: var(--gris); font-size: .9rem; }
.ubicacion__horario { color: var(--gris); margin: 0 0 1.8rem; }
.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.redes { display: flex; flex-wrap: wrap; gap: .6rem; }
.redes__btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; text-decoration: none;
    font-size: .92rem; font-weight: 700; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--haya-medio); transition: background-color .2s var(--ease), color .2s;
}
.redes__btn:hover { background: var(--fucsia); color: var(--blanco); box-shadow: none; }
.mapa { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--haya-medio); box-shadow: 0 30px 60px -30px rgba(90, 52, 23, .5); }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--haya-medio); color: #6b4a33; padding: 72px 0 28px; font-size: .95rem; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 28px; background: var(--ola-pie) center / 100% 100% no-repeat; pointer-events: none; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.footer__logo { width: 104px; height: 104px; margin-bottom: 1rem; border-radius: 50%; box-shadow: 0 10px 20px -12px rgba(90, 52, 23, .5); }
.footer__brand { font-family: var(--f-titulo); font-weight: 800; font-size: 1.5rem; color: var(--fucsia); margin-bottom: .4rem; }
.footer__muted { max-width: 18rem; }
.footer__title { font-family: var(--f-texto); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tostado); margin-bottom: 1rem; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer__list li { display: flex; gap: .55rem; align-items: flex-start; }
.footer__list .icon { margin-top: .25rem; color: var(--fucsia); }
.footer__list b { color: var(--tostado); font-weight: 800; }
.footer__dia { padding-left: 1.7rem; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: var(--fucsia-2); }
.footer__libro { display: inline-block; padding: .35rem .8rem; border-radius: 8px; background: var(--blanco); box-shadow: inset 0 0 0 1px rgba(168, 106, 50, .35); }
.footer__bottom { margin-top: 3rem; padding-top: 1.4rem; border-top: 1.5px dashed rgba(168, 106, 50, .35); font-size: .85rem; }
.footer__bottom p { margin: 0; }
.footer__firma { color: var(--fucsia-2); }

/* ---------- WhatsApp flotante y cinta demo ---------- */
.wa-flotante {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90;
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-flotante .icon { width: 28px; height: 28px; }
.wa-flotante.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flotante:active { transform: scale(.94); }
.demo-cinta {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 95;
    background: rgba(90, 52, 23, .88); color: var(--blanco); font-size: .8rem; font-weight: 700;
    padding: .45rem 1rem; border-radius: 999px; white-space: nowrap;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- Ícono de WhatsApp ---------- */
.icon--wa { width: 1.2em; height: 1.2em; color: #000; }
.btn--primary .icon--wa, .wa-flotante .icon--wa { color: #fff; }
.btn--ghost .icon--wa { color: #25d366; }

/* ---------- Páginas legales ---------- */
.legal { padding: calc(120px + var(--barra)) 0 80px; }
.legal__caja { max-width: 760px; margin-inline: auto; background: var(--blanco); border-radius: var(--r-md); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: inset 0 0 0 1px var(--linea); }
.legal__caja h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.legal__caja h2 { font-size: 1.3rem; margin-top: 2rem; }
.legal__caja p, .legal__caja li { color: #4e4247; }
.legal__fecha { color: var(--gris); font-size: .92rem; }
.legal__volver { margin-top: 2.4rem; }
.pendiente { background: #fff3c4; color: #7a5a00; padding: 0 .3rem; border-radius: 4px; }
.lr-proveedor { padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--rosa-bebe); margin-bottom: 1.6rem; }
.lr-proveedor p { margin: .2rem 0; }
.lr-form label { display: block; font-size: .88rem; font-weight: 800; margin-bottom: 1rem; }
.lr-form input:not([type=radio]):not([type=checkbox]), .lr-form select, .lr-form textarea { display: block; width: 100%; margin-top: .4rem; padding: .7rem .85rem; border-radius: var(--r-sm); border: 1.5px solid var(--linea); background: var(--blanco); font-weight: 500; }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.lr-tipo { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.lr-radio { display: flex !important; gap: .7rem; align-items: flex-start; padding: 1rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--linea); cursor: pointer; }
.lr-radio span { display: grid; gap: .2rem; }
.lr-radio small { font-weight: 500; color: var(--gris); }
.lr-check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 500 !important; }
.lr-error { color: #b42318; min-height: 1.2em; }
.lr-nota { font-size: .88rem; color: var(--gris); margin-top: 1rem; }
.lr-copia dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; background: var(--rosa-bebe); padding: 1.2rem; border-radius: var(--r-sm); margin: 1rem 0; }
.lr-copia dt { font-weight: 800; }
.lr-copia dd { margin: 0; overflow-wrap: anywhere; }
.lr-acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.error404 { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 6rem 0 3rem; }
.error404 h1 { font-size: clamp(4rem, 14vw, 8rem); color: var(--fucsia); margin: 0; }
.error404 .container { width: min(440px, 100% - 32px); }
.error404__logo { width: 120px; margin: 0 auto 1rem; border-radius: 50%; box-shadow: var(--sombra); }
.error404 .tabla { width: 220px; margin: 0 auto 1.6rem; }

/* ---------- Revelado suave ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .repisa__fila { grid-auto-columns: calc((100% - 2 * var(--hueco)) / 3.3) !important; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .nav__toggle { display: block; }
    .nav__menu {
        position: absolute; top: 72px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0;
        padding: .6rem; border-radius: var(--r-md); background: var(--crema); box-shadow: 0 24px 48px -20px rgba(28, 21, 24, .45), 0 0 0 1px var(--linea);
        opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none;
        transition: opacity .22s var(--ease), transform .22s var(--ease);
    }
    .nav.is-open .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
    .nav.is-open { background: var(--crema); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav__menu a:not(.btn) { padding: .85rem 1rem; border-radius: var(--r-sm); }
    .nav__menu a.is-active::after { display: none; }
    .nav__cta { margin-top: .4rem; }
    .demo-cinta { left: 16px; transform: none; font-size: .72rem; padding: .4rem .8rem; }
    .hero { padding-top: calc(104px + var(--barra)); }
    .hero__grid, .pedido, .envios, .ubicacion { grid-template-columns: 1fr; gap: 2.5rem; }
    .mapa { aspect-ratio: 1 / 1; }
    .repisa { --hueco: 1rem; }
    .repisa__fila { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0 var(--hueco); margin-inline: -16px; padding: 0 16px 1rem; scroll-padding-inline: 16px; scrollbar-width: none; }
    .repisa__fila::-webkit-scrollbar { display: none; }
    .detalle { flex: 0 0 64%; scroll-snap-align: start; }
    .pasos { grid-template-columns: 1fr; }
    .tarjetita { margin-inline: auto; }
    .seccion { padding: 72px 0; }
}
@media (max-width: 520px) {
    .temporada { font-size: .8rem; }
    .temporada__largo { display: none; }
    .temporada__corto { display: inline; }
    .brand__text { font-size: 1.05rem; }
    .brand__mark img { width: 46px; height: 46px; }
    .hero__etiqueta { font-size: 1.1rem; }
    .ubicacion__acciones .btn { flex: 1 1 100%; }
    .formulario { padding: 2rem 1.5rem; }
    .formulario__fila { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .hero__acciones .btn { width: 100%; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .nav.is-scrolled, .demo-cinta { background: var(--crema); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .demo-cinta { background: var(--tostado); }
}
@media print {
    .nav, .temporada, .footer, .wa-flotante, .demo-cinta, .legal__volver, .lr-acciones { display: none !important; }
    .legal { padding: 0; }
    .legal__caja { box-shadow: none; }
}