/* Acordeón visual de la colección principal. */
.hero.hero-accordion { min-height:clamp(760px, 56vw, 980px); height:auto; padding:clamp(16px, 1.8vw, 36px) clamp(28px, 8vw, 150px) 72px; display:grid; grid-template-columns:minmax(230px, .72fr) minmax(0, 2.4fr); gap:clamp(22px, 4vw, 72px); align-items:start; background:radial-gradient(circle at 55% 52%, #4b4b4b 0, transparent 38%), var(--ink); }
.accordion-intro { align-self:center; position:relative; z-index:2; transform:translateY(-8%); }
.accordion-intro h1 { display:block; margin:14px 0 20px; font-size:clamp(52px, 4.25vw, 90px); color:var(--paper); }
.accordion-intro h1 strong { font-family:Raleway, Arial, sans-serif; font-size:.81em; font-weight:700; letter-spacing:-.075em; }
.accordion-intro h1 span { white-space:nowrap; }
.accordion-intro p { max-width:24ch; font-size:clamp(16px, .9vw, 22px); line-height:1.45; }
.accordion-intro button { margin-top:24px; border:0; background:var(--cream); color:var(--ink); padding:14px 18px; font-size:clamp(12px, .68vw, 16px); font-weight:700; }
.scent-accordion { height:clamp(590px, 42vw, 760px); display:flex; gap:8px; min-width:0; align-self:start; }
.accordion-panel { flex:.2 1 0; min-width:clamp(74px, 4.5vw, 130px); position:relative; overflow:hidden; padding:0; border:1px solid #fff9; border-radius:8px; background:linear-gradient(145deg, #565625, #2e2f13); color:var(--paper); text-align:left; transition:flex-grow 1.22s cubic-bezier(.22, 1, .36, 1), background .75s ease, color .6s ease, transform .6s ease; }
.accordion-panel:nth-child(1) { background:var(--ink); }.accordion-panel:nth-child(2) { background:var(--cream); color:var(--ink); }.accordion-panel:nth-child(3) { background:var(--olive); }.accordion-panel:nth-child(4) { background:var(--brown); }.accordion-panel:nth-child(5) { background:linear-gradient(145deg, #585149, #2d2d2d); }
.accordion-panel:hover, .accordion-panel:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }.accordion-panel.is-active { flex:3.4 1 0; background:linear-gradient(145deg, #fffdf7, #fff1b0); color:var(--ink); }
.accordion-panel img { position:absolute; z-index:1; height:72%; max-width:68%; object-fit:contain; bottom:18px; right:50%; transform:translateX(50%) scale(.9); opacity:0; transition:height 1.05s cubic-bezier(.22, 1, .36, 1), right 1.05s cubic-bezier(.22, 1, .36, 1), transform 1.05s cubic-bezier(.22, 1, .36, 1), opacity .55s ease .22s; filter:drop-shadow(0 18px 12px #0004); }.accordion-panel.is-active img { height:96%; max-width:60%; right:19%; transform:none; bottom:65px; opacity:1; }
.panel-info { position:absolute; z-index:2; left:17px; right:17px; bottom:17px; display:flex; flex-direction:column; gap:5px; transition:opacity .55s ease; }.panel-info small { font-size:9px; letter-spacing:.13em; }.panel-info strong { font:clamp(22px, 1.8vw, 38px)/.9 Italiana, Georgia, serif; font-weight:400; white-space:nowrap; }.panel-info em { max-width:20ch; font-size:clamp(12px,.66vw,16px); font-style:normal; line-height:1.35; opacity:0; transform:translateY(12px); transition:opacity .55s ease .38s, transform .72s cubic-bezier(.22, 1, .36, 1) .38s; }.panel-link { width:max-content; margin-top:8px; padding-bottom:4px; border-bottom:1px solid currentColor; font:700 clamp(10px,.62vw,13px)/1 Raleway,Arial,sans-serif; letter-spacing:.04em; opacity:0; transform:translateY(10px); transition:opacity .45s ease .48s,transform .65s cubic-bezier(.22,1,.36,1) .48s; }.accordion-panel.is-active .panel-info { left:clamp(18px, 2vw, 35px); bottom:clamp(22px, 3vw, 44px); }.accordion-panel.is-active .panel-info em,.accordion-panel.is-active .panel-link { opacity:1; transform:none; }.accordion-panel:not(.is-active) .panel-info { writing-mode:vertical-rl; transform:rotate(180deg); align-items:start; bottom:20px; left:50%; right:auto; translate:-50% 0; }.accordion-panel:not(.is-active) .panel-info small, .accordion-panel:not(.is-active) .panel-info em,.accordion-panel:not(.is-active) .panel-link { display:none; }.accordion-panel:not(.is-active) .panel-info strong { font-size:clamp(14px, .9vw, 19px); letter-spacing:.04em; }.accordion-panel:not(.is-active) img { top:20px; bottom:auto; height:45%; max-width:88%; }
.hero-accordion .hero-foot { left:clamp(28px, 8vw, 150px); right:clamp(28px, 8vw, 150px); bottom:23px; }

@media (max-width:900px) and (min-width:701px) { .hero.hero-accordion { grid-template-columns:220px minmax(0,1fr); padding-inline:42px; gap:28px; }.accordion-panel.is-active img { max-width:58%; } }
/* Los recortes originales tienen lienzos distintos; se iguala su altura visual. */
@media (min-width:701px) { .accordion-panel.is-active img { left:50%; right:auto; transform:translateX(-50%); } }
@media (min-width:1051px) { .accordion-panel.is-active img { left:50%; right:auto; transform:translateX(-50%); }.accordion-panel:nth-child(1).is-active img { height:74%; max-width:none; bottom:76px; }.accordion-panel:nth-child(2).is-active img { height:83%; max-width:none; bottom:70px; }.accordion-panel:nth-child(3).is-active img { height:83%; max-width:none; bottom:70px; }.accordion-panel:nth-child(4).is-active img { height:74%; max-width:none; bottom:76px; }.accordion-panel:nth-child(5).is-active img { height:78%; max-width:none; bottom:74px; } }
@media (max-width:700px) { .hero.hero-accordion { min-height:0; display:block; padding:42px 20px 72px; }.accordion-intro { transform:none; }.accordion-intro h1 { font-size:54px; }.accordion-intro p { font-size:16px; }.scent-accordion { height:auto; display:grid; grid-template-columns:1fr; gap:9px; margin-top:34px; }.accordion-panel { min-height:74px; width:100%; }.accordion-panel.is-active { min-height:410px; }.accordion-panel:not(.is-active) .panel-info { writing-mode:initial; transform:none; left:18px; bottom:18px; }.accordion-panel:not(.is-active) .panel-info strong { font-size:25px; }.accordion-panel:not(.is-active) img { height:64px; max-width:80px; top:5px; right:18px; transform:none; }.accordion-panel.is-active img { right:8%; height:76%; max-width:49%; bottom:25px; }.accordion-panel.is-active .panel-info { left:22px; bottom:30px; }.hero-accordion .hero-foot { left:20px; right:20px; bottom:20px; }.hero-accordion .hero-foot small:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { .accordion-panel, .accordion-panel img, .panel-info, .panel-info em, .panel-link { transition:none; } }