/* Hamacas Paraguayas: page CSS on top of the Taste kit (system.css, layout.css). Only what the kit lacks. */

/* ---------- browser surfaces and phone basics (mobile-native) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--p-ink); color: var(--p-bg); }
html { scrollbar-color: color-mix(in oklab, var(--p-ink) 45%, transparent) var(--p-bg); accent-color: var(--p-ink); caret-color: var(--p-ink); }
a, button, summary, [role="radio"] { touch-action: manipulation; }
.btn, button, .wa-float, .dot, .swatch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ground-brand ::selection { background: var(--p-bg); color: var(--p-ink); }

/* on a phone the round WhatsApp button carries the main action; the bar keeps the name and the menu */
@media (max-width: 639px) { .nav:not(.is-open) .nav__actions { display: none; } .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; } }

/* ---------- hero ---------- */
/* the headline over a full-width photograph that opens out of a framed inset to the screen's edges, once:
   the photo is never hidden (it starts at 90% of the screen), it widens and settles while the h1 rises */
.hero--hamaca .hero__lead { max-width: 44ch; }
@media (prefers-reduced-motion: no-preference) {
  .hero--hamaca .hero__stage { animation: stage-open 1400ms cubic-bezier(.22,1,.36,1) 120ms both; }
  .hero--hamaca .hero__stage > img { animation: stage-settle 2200ms cubic-bezier(.22,1,.36,1) both; }
}
@keyframes stage-open { from { clip-path: inset(6% 5% 0 5% round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes stage-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
/* phone: the photograph takes what the words leave of the first screen */
@media (max-width: 639px) {
  .hero--hamaca h1 { font-size: 34px; }
  .hero--hamaca .hero__stage { aspect-ratio: auto; flex: 1 1 auto; min-height: 220px; }
  .hero--hamaca .hero__stage > img { object-position: 64% 50%; }
}
@media (max-width: 639px) {
  @keyframes stage-open { from { clip-path: inset(4% 4% 0 4% round 20px); } to { clip-path: inset(0 0 0 0 round 0); } }
}

/* ---------- tablet screens (640 to 1023): the sections that stack past one screen take two ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
  #modelos, #comparar { --h: 2; }
  #modelos-1 .models--two .model { --tile-ratio: 4 / 5; }
  .colores .rows > li > p { display: none; }
  .colores .develop { aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) { #comprar { min-height: calc(var(--hm, 1) * 100lvh); } }

/* ---------- models (line-up) ---------- */
.model { gap: var(--s-3); grid-template-rows: auto auto 1fr auto auto; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.model > .tile__media { display: block; width: 100%; min-width: 0; padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit; }
.model > .tile__media > img { display: block; max-width: 100%; }
.models--two .model { --tile-ratio: 2 / 1; }
@media (max-width: 639px) { .model, .models--two .model { --tile-ratio: 16 / 10; } }
.models--three .model { --tile-ratio: 4 / 3; }
.model .tile__head { margin-top: var(--s-2); align-items: baseline; }
.model .tile__head > h3 { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.model .tile__price { font: var(--display-weight) var(--t-card)/1.2 var(--font-display); letter-spacing: -0.01em; }
.model__facts { display: grid; gap: 2px; font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.model__kg { color: var(--ink); font-weight: 500; }
.model__foot { display: flex; align-items: center; gap: var(--s-4); min-height: 44px; flex-wrap: wrap; }
.dots { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--p-ink) 22%, transparent); flex: none; }
.dot-more { font-size: var(--t-label); font-weight: 500; color: var(--muted); padding-left: 2px; font-variant-numeric: tabular-nums; }
.model__open { min-height: 44px; padding: 0; border: 0; background: none; font: 500 var(--t-small)/1.2 var(--font-text); color: var(--ink); cursor: pointer; }
.model__wa { justify-self: start; }
.wa-ic { width: 18px; height: 18px; flex: none; margin-right: 8px; }
@media (max-width: 639px) { .model__wa { justify-self: stretch; } }

/* the cards arrive once, in a short stagger, when the section first comes into view (asked for in the brief) */
/* nothing is hidden: the cards stand from the first paint and only their photographs settle, one after another */
@media (prefers-reduced-motion: no-preference) {
  .model.is-in > .tile__media > img { animation: model-settle 900ms cubic-bezier(.22,1,.36,1) backwards; animation-delay: var(--d, 0ms); }
}
@keyframes model-settle { from { transform: scale(1.08); filter: saturate(.6) brightness(1.06); } }

/* ---------- compare table ---------- */
.compare-wrap { margin-top: var(--s-7); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.compare th, .compare td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.compare thead th { font: 500 var(--t-label)/1.4 var(--font-text); color: var(--muted); padding-top: 0; }
.compare tbody th { font-weight: 500; }
.compare tbody th .link { font-weight: 500; }
.compare .num { text-align: right; padding-right: 0; white-space: nowrap; }
.compare td.num { font: var(--display-weight) var(--t-card)/1.2 var(--font-display); }
.compare b { font-weight: 500; }
@media (max-width: 1023px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .compare th, .compare td { border: 0; padding: 0; }
  .compare tbody th { grid-column: 1 / 3; font-size: var(--t-card); }
  .compare td.num { grid-column: 3; grid-row: 1; text-align: right; }
  .compare td:not(.num) { margin-top: var(--s-2); font-size: var(--t-small); }
  .compare td:not(.num)::before { content: attr(data-label); display: block; font-size: var(--t-label); color: var(--muted); }
  .compare td[data-label="Medidas"] { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .compare-wrap { margin-top: var(--s-5); }
  .compare tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--s-3); }
  .compare tbody th { grid-column: 1; }
  .compare td.num { grid-column: 2; }
  .compare td[data-label="Material"] { grid-column: 1 / -1; }
  .compare td[data-label="Colores"], .compare td[data-label="Tipo"] { display: none; }
}

/* ---------- colours (brand band) with picture-develops ---------- */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(660px, var(--ly-fit, 660px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.colores .rows { margin-top: var(--s-6); }
.colores .rows > li > p { font-size: var(--t-small); }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-6); } }
@media (max-width: 639px) { .develop { aspect-ratio: 1 / 1; } }

/* ---------- how to buy ---------- */
.comprar__note { margin-top: var(--s-6); }

/* ---------- close: the name across the wrap, hand-set per width ---------- */
.close--word .close__word { font-size: clamp(40px, 8.4vw, 122px); white-space: nowrap; letter-spacing: -0.04em; }
@media (max-width: 639px) { .close--word .close__word { font-size: clamp(32px, 10.6vw, 64px); white-space: normal; } }
.footer__col li { overflow-wrap: anywhere; }

/* ---------- floating WhatsApp button (always on screen) ---------- */
.wa-float {
  position: fixed; z-index: 20; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #16884a; color: #fff; box-shadow: 0 6px 18px rgb(20 20 20 / .28), 0 1px 3px rgb(20 20 20 / .2);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.wa-float .wa-ic { width: 30px; height: 30px; margin: 0; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(20 20 20 / .32), 0 2px 4px rgb(20 20 20 / .2); } }
.wa-float:active { transform: translateY(1px) scale(.96); transition-duration: 90ms; }
.wa-float:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
html.ficha-open .wa-float { opacity: 0; pointer-events: none; }

/* ---------- product sheet (dialog) ---------- */
.ficha { padding: 0; border: 0; background: var(--p-bg); color: var(--p-ink); border-radius: var(--r-lg);
  width: min(1120px, calc(100vw - 48px)); max-width: none; max-height: min(760px, calc(100dvh - 48px)); overflow: hidden;
  box-shadow: 0 24px 60px rgb(20 20 20 / .3); overscroll-behavior: contain; }
.ficha::backdrop { background: rgb(20 20 20 / .55); }
.ficha__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); max-height: inherit; }
.ficha__media { position: relative; background: var(--p-surface); min-height: 0; }
.ficha__img { display: block; width: 100%; height: 100%; max-height: min(760px, calc(100dvh - 48px)); object-fit: cover; transition: opacity 220ms var(--ease); }
.ficha__img.is-swapping { opacity: .35; }
.ficha__nophoto { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--p-bg); font-size: var(--t-small); }
.ficha__body { padding: var(--s-7) var(--s-7) var(--s-6); overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--s-4); }
.ficha__title { font: var(--display-weight) clamp(26px, 2.2vw, 34px)/1.12 var(--font-display); letter-spacing: -0.02em; padding-right: 48px; text-wrap: balance; overflow-wrap: anywhere; }
.ficha__price { font: var(--display-weight) var(--t-h3, 28px)/1 var(--font-display); }
.ficha__specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s-5); margin: 0; font-size: var(--t-small); }
.ficha__specs dt { color: var(--muted); }
.ficha__specs dd { margin: 0; overflow-wrap: anywhere; }
.ficha__label { font-size: var(--t-small); margin: var(--s-2) 0 var(--s-3); }
.ficha__label b { font-weight: 500; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 400 13px/1.25 var(--font-text); text-align: left; cursor: pointer; transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.swatch__chip { width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--p-ink) 22%, transparent); }
.swatch__name { min-width: 0; overflow-wrap: anywhere; }
.swatch__cam { width: 14px; height: 14px; flex: none; opacity: .55; }
@media (hover: hover) and (pointer: fine) { .swatch:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--p-ink) 5%, transparent); } }
.swatch:active { transform: scale(.97); }
.swatch[aria-checked="true"] { border-color: var(--p-ink); background: color-mix(in oklab, var(--p-ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--p-ink); }
.swatch:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; }
.ficha__wa { justify-self: start; margin-top: var(--s-2); }
.ficha__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--p-bg); color: var(--p-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgb(20 20 20 / .15); }
.ficha__close svg { width: 16px; height: 16px; }
.ficha__close:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; }
.ficha .ficha__inner { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ficha[open] { animation: ficha-in 260ms cubic-bezier(.22,1,.36,1); }
  .ficha[open]::backdrop { animation: ficha-fade 260ms ease-out; }
  .ficha.is-closing { animation: ficha-out 160ms ease-in forwards; }
  .ficha.is-closing::backdrop { animation: ficha-fade 160ms ease-in reverse forwards; }
}
@keyframes ficha-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes ficha-out { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes ficha-fade { from { opacity: 0; } }
@media (max-width: 767px) {
  .ficha { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; inset: 0; }
  .ficha__inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
  .ficha__media { height: min(42svh, 75vw); }
  .ficha__img { max-height: none; }
  .ficha__body { padding: var(--s-5) max(24px, env(safe-area-inset-right)) calc(var(--s-6) + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .ficha__close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .ficha__wa { justify-self: stretch; }
  .ficha__title { padding-right: 0; }
  @media (prefers-reduced-motion: no-preference) { .ficha[open] { animation-name: sheet-in; animation-duration: 320ms; } }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
html.ficha-open, html.ficha-open body { overflow: hidden; }

/* ---------- fixes after the first look ---------- */
@media (max-width: 639px) { .grid.models > .model { grid-column: 1 / -1; } }
.compare tbody th a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .compare tbody th a:hover { text-decoration-color: currentColor; } }
@media (max-width: 1023px) { .compare tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
@media (max-width: 639px) { .compare tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .compare tbody th { grid-column: 1 / 2; } .compare td.num { grid-column: 2; } }
.close--word .close__word { font-size: calc(min(100vw - 2 * var(--gut), 1280px) / 8.7); }
@media (max-width: 639px) { .close--word .close__word { font-size: clamp(32px, 10.6vw, 64px); } }
.credits > summary::after { content: "Ver"; }
.credits[open] > summary::after { content: "Ocultar"; }
.ficha__body { padding-bottom: 0; }
.ficha__cta { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-2) calc(-1 * var(--s-7)) 0; padding: var(--s-4) var(--s-7) var(--s-5); background: var(--p-bg); border-top: 1px solid var(--line); }
.ficha__cta .ficha__wa { margin: 0; }
@media (max-width: 767px) {
  .ficha__cta { margin-inline: calc(-1 * max(24px, env(safe-area-inset-left))); padding: var(--s-3) max(24px, env(safe-area-inset-right)) calc(var(--s-4) + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .ficha__cta .ficha__wa { flex: 1 1 100%; }
  .ficha__body { padding-bottom: 0; }
}

/* ---------- break-ui fixes ---------- */
/* 1. many colours: the sheet's text column scrolls inside the sheet; the WhatsApp button stays at its foot */
@media (min-width: 768px) { .ficha__body { max-height: min(760px, calc(100dvh - 48px)); } .ficha__media { max-height: min(760px, calc(100dvh - 48px)); } }
/* 2. the blog's full product title in a card: break words with hyphens, never mid-word, three lines at most */
.model .tile__head > h3 { overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* 3. the facts lines stay together when the card's free row stretches */
.model__facts { align-content: start; }
.model .tile__price { white-space: nowrap; }

/* ---------- gate fixes ---------- */
/* compare at tablet: one screen; type and colour count are already in each model's section */
@media (min-width: 640px) and (max-width: 1023px) {
  #comparar { --h: 1; }
  .compare tr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .compare tbody th { grid-column: 1 / 3; }
  .compare td.num { grid-column: 3; }
  .compare td[data-label="Medidas"] { grid-column: auto; }
  .compare td[data-label="Tipo"], .compare td[data-label="Colores"] { display: none; }
}
.close--word .close__word { font-size: calc(min(100vw - 2 * var(--gut), 1280px) / 9.3); }
@media (max-width: 639px) { .close--word .close__word { font-size: clamp(32px, 10.6vw, 64px); } }
.compare tbody th a { display: inline-flex; align-items: center; gap: var(--s-4); }
.compare__thumb { width: 64px; height: 48px; flex: none; object-fit: cover; border-radius: var(--r-sm); }
@media (max-width: 1023px) { .compare__thumb { width: 56px; height: 42px; } }

/* phone: each section fills its two screens with its own pictures, so the screens stay on the grid */
@media (max-width: 639px) {
  #modelos .model { --tile-ratio: 16 / 9; }
  #modelos-1 .models--two .model { --tile-ratio: 4 / 5; }
  #comprar[data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual > img { aspect-ratio: 6 / 5; max-height: none; }
  .compare tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "th th price" "med med med" "kg mat mat"; row-gap: var(--s-2); padding-block: var(--s-4); }
  .compare tbody th { grid-area: th; }
  .compare tbody th a { gap: var(--s-4); }
  .compare td.num { grid-area: price; align-self: start; }
  .compare td[data-label="Medidas"] { grid-area: med; }
  .compare td[data-label="Soporta"] { grid-area: kg; }
  .compare td[data-label="Material"] { grid-area: mat; }
  .compare__thumb { width: 120px; height: 90px; }
}
/* final fixes: compare names never run under the price; the 1-person models crop square on a phone */
.compare tbody th, .compare tbody th a, .compare tbody th a > span { min-width: 0; }
.compare tbody th a > span { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 639px) { #modelos-1 .models--two .model { --tile-ratio: 4 / 5; } }
@media (max-width: 359px) { .compare__thumb { width: 88px; height: 66px; } }
/* short screens (a laptop with the browser chrome open): the close and its links grow instead of overlapping */
footer.closing { height: auto; min-height: calc(var(--h, 1) * 100svh); }

/* ---------- motion, second pass ---------- */
/* sheet: the photographs stack in one frame; a new colour crossfades over the old one and settles */
.ficha__media { overflow: hidden; }
.ficha__img { position: absolute; inset: 0; transition: opacity 380ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.ficha__img.is-incoming { opacity: 0; transform: scale(1.04); }
@media (max-width: 767px) { .ficha__img { height: 100%; } }
/* the sheet's photo comes in with its panel (carried, one entrance) and settles a beat longer */
@media (prefers-reduced-motion: no-preference) {
  .ficha[open] .ficha__media > .ficha__img:first-child { animation: sheet-photo 700ms cubic-bezier(.22,1,.36,1); }
}
@keyframes sheet-photo { from { transform: scale(1.06); } }
/* a chosen swatch: its chip answers the press, the ring draws in */
.swatch__chip { transition: transform 200ms cubic-bezier(.22,1,.36,1); }
.swatch[aria-checked="true"] .swatch__chip { transform: scale(1.08); }
/* card: the "see colours" line answers the card's hover, the arrow nudges */
@media (hover: hover) and (pointer: fine) {
  .model:hover .model__open { text-decoration: underline; text-underline-offset: 4px; }
  .model .dots .dot { transition: transform 240ms cubic-bezier(.22,1,.36,1); }
  .model:hover .dots .dot { transform: translateY(-2px); }
  .model:hover .dots .dot:nth-child(2) { transition-delay: 25ms; } .model:hover .dots .dot:nth-child(3) { transition-delay: 50ms; }
  .model:hover .dots .dot:nth-child(4) { transition-delay: 70ms; } .model:hover .dots .dot:nth-child(5) { transition-delay: 85ms; }
  .model:hover .dots .dot:nth-child(n+6) { transition-delay: 100ms; }
}
/* the WhatsApp button arrives after the hero has spoken, once */
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: wa-in 520ms cubic-bezier(.22,1,.36,1) 1300ms backwards; }
}
@keyframes wa-in { from { opacity: 0; transform: translateY(12px) scale(.9); } }
/* hero head at desktop: the lead and both buttons on columns 8-12, the buttons on one line */
@media (min-width: 1280px) {
  .hero--hamaca .hero__head .hero__lead, .hero--hamaca .hero__head > .btn-row { grid-column: 8 / -1 !important; }
  .hero--hamaca .hero__head > .btn-row { flex-wrap: nowrap; }
}
/* compare as a split: the table on 8 columns, one photograph on 4 */
.compare-split { margin-top: var(--s-7); }
.compare-split .compare-wrap { margin-top: 0; }
.compare__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: 100%; min-height: 420px; }
.compare__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .compare__photo { display: none; } }
/* colours: the photograph fills the screen it stands in */
@media (min-width: 1024px) { .colores .develop { height: min(708px, calc(100svh - 192px)); } }
@media (max-width: 1279px) { .compare__photo { display: none; } .compare-split > .compare-wrap { grid-column: 1 / -1; } }
@media (min-width: 1280px) and (max-width: 1439px) { .compare th, .compare td { padding-block: 12px; } }

/* the sheet shows the whole photograph, never a crop: contained on the neutral surface, a fixed frame
   on desktop so short sheets (the Simple has few specs) never squeeze it */
.ficha__img { object-fit: contain; object-position: 50% 50%; }
@media (min-width: 768px) { .ficha__media { height: min(760px, calc(100dvh - 48px)); } }
@media (max-width: 767px) { .ficha__media { height: min(46svh, 82vw); } }