/* =========================================================================
   ALMOHADAS PREMIUM — Sistema de diseño (estilo editorial Loro Piana)
   ========================================================================= */

:root{
  --bg:        #EFF1F3;   /* light cool gray       */
  --sand:      #E2E5E9;   /* secondary band (gray) */
  --taupe-l:   #D3D8DE;   /* light gray fill       */
  --taupe:     #A7AEB8;   /* mid gray              */
  --brown-w:   #586170;   /* slate gray (muted text, readable) */
  --cocoa:     #373E4A;   /* deep slate (headings/dark bands)  */
  --ink:       #1F232B;   /* cool near-black       */
  --paper:     #FBFCFD;   /* cool paper white      */
  --clay:      #46658F;   /* steel-blue accent     */
  --line:      rgba(40,46,58,.20);
  --line-soft: rgba(40,46,58,.10);

  --serif: "Fraunces", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --gutter: clamp(20px, 6vw, 92px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--taupe); color:var(--paper); }

/* ----------------------------------------------------------- typography */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; color:var(--cocoa); line-height:1.1; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--sans); font-weight:400; text-transform:uppercase;
  font-size:11px; letter-spacing:.26em; color:var(--brown-w);
}
.serif-lg{ font-size:clamp(2.1rem,4.6vw,4rem); }
.serif-md{ font-size:clamp(1.7rem,3.2vw,2.7rem); }

/* understated buttons ---------------------------------------------------- */
.btn-line{
  display:inline-block; font-family:var(--sans); text-transform:uppercase;
  font-size:11px; letter-spacing:.22em; color:var(--cocoa);
  padding-bottom:5px; border-bottom:1px solid var(--cocoa);
  transition:color .35s var(--ease), border-color .35s var(--ease), opacity .35s;
}
.btn-line:hover{ color:var(--clay); border-color:var(--clay); }
.btn-line.light{ color:var(--paper); border-color:rgba(251,250,246,.7); }
.btn-line.light:hover{ color:var(--paper); border-color:var(--paper); opacity:.75; }

.btn-rect{
  display:inline-block; font-family:var(--sans); text-transform:uppercase;
  font-size:11px; letter-spacing:.22em; color:var(--cocoa);
  border:1px solid var(--cocoa); padding:15px 38px; background:transparent; cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.btn-rect:hover{ background:var(--cocoa); color:var(--bg); }
.btn-rect.solid{ background:var(--cocoa); color:var(--bg); }
.btn-rect.solid:hover{ background:var(--ink); }
.btn-rect.solid-light{ background:var(--paper); color:var(--cocoa); border-color:var(--paper); }
.btn-rect.solid-light:hover{ background:transparent; color:var(--paper); border-color:var(--paper); }

/* ----------------------------------------------------------- utility bar */
.utility{
  background:var(--clay); color:#fff;
  font-size:12.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:30px;
  min-height:44px; padding:9px var(--gutter); text-align:center;
}
.utility .u-pay{ opacity:.9; }
@media(max-width:760px){ .utility .u-pay{ display:none; } }

/* --------------------------------------------------------------- header */
.header{
  position:fixed; top:44px; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .5s var(--ease), padding .5s var(--ease), top .4s;
}
.header.scrolled{
  background:rgba(244,239,230,.92); backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line-soft); padding:15px var(--gutter); top:0;
}
.header.scrolled .brand-word,
.header.scrolled .nav a,
.header.scrolled .nav-toggle,
.header.scrolled .cart-btn,
.header.scrolled .lang button{ color:var(--cocoa); }
.brand{ display:inline-flex; align-items:center; gap:13px; color:var(--paper); transition:color .5s; }
.header.scrolled .brand{ color:var(--cocoa); }
.brand-mark{ width:42px; height:35px; flex:none; color:inherit; }
.brand-word{
  font-family:var(--serif); font-size:1.22rem; letter-spacing:.15em;
  text-transform:uppercase; color:inherit; font-weight:300; transition:color .5s; line-height:1.05;
}
.brand-word small{ display:block; font-family:var(--sans); font-size:8.5px; letter-spacing:.3em; opacity:.7; margin-top:3px; text-transform:uppercase; }
@media(max-width:560px){
  .brand{ gap:9px; }
  .brand-mark{ width:32px; height:27px; }
  .brand-word{ font-size:1rem; letter-spacing:.1em; }
  .brand-word small{ display:none; }
}
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--paper);
  transition:color .5s, opacity .3s; position:relative; padding:4px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:currentColor;
  transition:width .4s var(--ease);
}
.nav a:hover::after{ width:100%; }
.header-right{ display:flex; align-items:center; gap:22px; }
.lang{ display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.12em; }
.lang button{
  background:none; border:none; cursor:pointer; color:var(--paper); font-family:var(--sans);
  font-size:11px; letter-spacing:.12em; padding:2px 3px; opacity:.55; transition:opacity .3s, color .5s;
}
.lang button.active{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.lang span{ opacity:.45; }
.nav-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }

/* ------------------------------------------------------------- hero/slider */
.hero{ position:relative; height:100vh; min-height:600px; width:100%; overflow:hidden; }
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.5s var(--ease), visibility 1.5s;
}
.slide.active{ opacity:1; visibility:visible; }
.slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 7s ease; }
.slide.active .slide-img{ transform:scale(1.12); }
.slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,17,23,.70) 0%, rgba(15,17,23,.24) 40%, rgba(15,17,23,.06) 58%, rgba(15,17,23,.30) 100%);
}
.slide-caption{
  position:absolute; left:var(--gutter); bottom:13vh; z-index:3; max-width:560px; color:var(--paper);
}
.slide-caption .eyebrow{ color:var(--paper); opacity:.85; }
/* keep hero text readable over any image / sky / effect */
.slide-caption .eyebrow, .slide-caption h1, .slide-caption p{ text-shadow:0 1px 20px rgba(0,0,0,.5); }
.header:not(.scrolled) .brand, .header:not(.scrolled) .nav a,
.header:not(.scrolled) .lang button, .header:not(.scrolled) .nav-toggle{ text-shadow:0 1px 12px rgba(0,0,0,.4); }
.scroll-cue{ text-shadow:0 1px 10px rgba(0,0,0,.45); }
.slide-caption h1{
  color:var(--paper); font-size:clamp(2.05rem,5vw,4.4rem); margin:18px 0 16px; line-height:1.06;
  overflow-wrap:break-word;
}
.slide-caption p{ font-weight:300; font-size:clamp(.95rem,1.4vw,1.12rem); max-width:440px; opacity:.92; margin-bottom:26px; }
.slide-anim{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease) .25s, transform 1s var(--ease) .25s; }
.slide.active .slide-anim{ opacity:1; transform:none; }
.slider-dots{ position:absolute; bottom:5vh; left:var(--gutter); display:flex; align-items:center; gap:16px; z-index:5; }
.slider-dots button{
  width:15px; height:15px; padding:0; border:none; cursor:pointer; background:rgba(251,250,246,.5);
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  transition:transform .35s var(--ease), background .35s;
}
.slider-dots button:hover{ background:rgba(251,250,246,.85); transform:scale(1.15); }
.slider-dots button.active{ background:#fff; transform:scale(1.4); }
.scroll-cue{ position:absolute; right:var(--gutter); bottom:5vh; z-index:5; color:var(--paper);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; writing-mode:vertical-rl; opacity:.7;
  display:flex; align-items:center; gap:10px; }
.scroll-cue::after{ content:""; width:1px; height:46px; background:var(--paper); opacity:.6; }
@media(max-width:760px){ .scroll-cue{ display:none; } }

/* --------------------------------------------------------------- layout */
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section-pad{ padding-top:clamp(72px,11vw,150px); padding-bottom:clamp(72px,11vw,150px); }
.band{ background:var(--sand); }
.center{ text-align:center; }
.section-head{ max-width:680px; margin:0 auto; }
.section-head .eyebrow{ display:block; margin-bottom:18px; }
.section-head h2{ margin-bottom:20px; }
.section-head p{ color:var(--brown-w); font-size:1.02rem; }

/* ----------------------------------------------------------- materials */
.mat-head{ max-width:720px; margin:0 auto 56px; text-align:center; }
.mat-head .eyebrow{ display:block; margin-bottom:18px; color:var(--clay); }
.mat-head h2{ margin-bottom:20px; }
.mat-lead{ color:var(--brown-w); font-size:1.06rem; line-height:1.7; }
.mat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 44px; max-width:1060px; margin:0 auto; }
.mat-card{ text-align:left; }
.mat-icon{ display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; background:var(--sand); color:var(--clay); margin-bottom:20px; }
.mat-icon svg{ width:34px; height:34px; }
.mat-card h3{ font-family:var(--serif); font-weight:400; font-size:1.32rem; color:var(--cocoa); margin-bottom:10px; letter-spacing:.2px; }
.mat-card p{ color:var(--brown-w); font-size:.97rem; line-height:1.64; }
@media(max-width:880px){ .mat-grid{ grid-template-columns:repeat(2,1fr); gap:40px 34px; } }
@media(max-width:520px){ .mat-grid{ grid-template-columns:1fr; gap:34px; max-width:380px; } .mat-head{ margin-bottom:42px; } }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ----------------------------------------------------------- trust strip */
.trust{ background:var(--cocoa); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); max-width:var(--maxw); margin:0 auto; }
.trust-item{ text-align:center; padding:50px 24px; border-left:1px solid rgba(251,250,246,.16); min-width:0; }
.trust-item:first-child{ border-left:none; }
.trust-item .t-num{ font-family:var(--serif); font-weight:400; font-size:2.7rem; color:var(--paper); line-height:1.05; }
.trust-item .t-lbl{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,250,246,.74); margin-top:14px; }
.trust-item .t-lbl::before{ content:""; display:block; width:26px; height:2px; background:var(--clay); margin:0 auto 13px; }
@media(max-width:760px){ .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-item{ padding:34px 14px; }
  .trust-item .t-num{ font-size:2rem; }
  .trust-item:nth-child(3){ border-left:none; }
  .trust-item:nth-child(n+3){ border-top:1px solid rgba(251,250,246,.16); } }

/* ------------------------------------------------------- editorial split */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,6vw,90px); }
.split.reverse .split-text{ order:2; }
.split-img{ overflow:hidden; }
.split-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.4s var(--ease); }
.split-img:hover img{ transform:scale(1.05); }
.split-text .eyebrow{ display:block; margin-bottom:18px; }
.split-text h2{ margin-bottom:22px; }
.split-text p{ color:var(--ink); margin-bottom:30px; max-width:46ch; opacity:.9; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; gap:30px; }
  .split.reverse .split-text{ order:0; } .split-img img{ aspect-ratio:16/11; } }

/* --------------------------------------------------------------- brands */
.brand-wall{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:54px; }
.brand-cell{ flex:0 0 16.666%; box-sizing:border-box; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:34px 24px; min-height:156px;
  transition:background .45s var(--ease); }
.brand-cell img{ max-height:68px; max-width:172px; object-fit:contain; mix-blend-mode:darken;
  filter:grayscale(1) contrast(.9) opacity(.62); transition:filter .5s var(--ease), transform .5s var(--ease); }
.brand-cell:hover{ background:var(--sand); }
.brand-cell:hover img{ filter:grayscale(0) contrast(1) opacity(1); transform:translateY(-10px) scale(1.07); }
@media(max-width:980px){ .brand-cell{ flex-basis:33.333%; } }
@media(max-width:560px){ .brand-cell{ flex-basis:33.333%; min-height:120px; padding:22px 12px; } .brand-cell img{ max-height:46px; max-width:112px; } }

/* hotelier / Airbnb quote CTA under the brand wall */
.brand-quote{ max-width:560px; margin:56px auto 0; text-align:center; padding:38px 32px;
  border:1px solid var(--line-soft); border-radius:16px; background:var(--paper); }
.brand-quote h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); color:var(--cocoa); margin-bottom:12px; }
.brand-quote p{ color:var(--brown-w); font-size:1.02rem; line-height:1.6; margin-bottom:24px; }
.brand-quote-note{ margin:18px 0 0; font-size:.82rem; letter-spacing:.04em; color:var(--taupe); }

/* WhatsApp button */
.btn-wa{ display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  background:#25D366; color:#0b3d24; border:none; border-radius:999px; font:inherit; font-weight:600;
  font-size:.96rem; letter-spacing:.01em; padding:15px 30px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.btn-wa svg{ width:21px; height:21px; flex:0 0 auto; }
.btn-wa:hover{ background:#1ebe5a; transform:translateY(-2px); box-shadow:0 12px 26px rgba(37,211,102,.32); }
.btn-wa.wa-light{ margin-top:28px; }
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:42px 0 56px; }
.chip{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 22px; border:1px solid var(--line); background:transparent; color:var(--brown-w);
  cursor:pointer; transition:all .35s var(--ease); border-radius:0;
}
.chip:hover{ color:var(--cocoa); border-color:var(--cocoa); }
.chip.active{ background:var(--cocoa); color:var(--bg); border-color:var(--cocoa); }
@media(max-width:560px){
  .filters{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:32px 0 44px; }
  .filters::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; }
}

/* --------------------------------------------------------------- product grid */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px) clamp(18px,2.4vw,32px); }
@media(max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .grid{ grid-template-columns:1fr; } }
.card{ background:transparent; opacity:1; transition:opacity .5s; }
.card.hide{ display:none; }
.card-media{ position:relative; overflow:hidden; aspect-ratio:1/1;
  background:#fff;
  display:flex; align-items:center; justify-content:center; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media .prod-art{ width:88%; height:auto; transition:transform 1s var(--ease); }
.card:hover .card-media .prod-art{ transform:scale(1.045); }
.card-badge{
  position:absolute; top:14px; left:14px; background:var(--paper); color:var(--cocoa);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:6px 11px; z-index:2;
}
.card-brand{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brown-w); margin:18px 0 8px; }
.card-name{ font-family:var(--serif); font-size:1.28rem; color:var(--cocoa); line-height:1.2; min-height:2.4em; }
.card-fill{ font-size:.86rem; color:var(--brown-w); margin-top:9px; line-height:1.55; min-height:3em; opacity:.92; }
.card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; }
.firm-chip{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cocoa);
  border:1px solid var(--line); padding:4px 10px; }
.card-sizes{ font-size:.8rem; color:var(--brown-w); }
.card-foot{ display:flex; flex-direction:column; gap:13px; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--line-soft); }
.card-prices{ display:flex; flex-direction:column; gap:6px; }
.price-row{ display:flex; align-items:baseline; gap:8px; }
.price-row > span{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brown-w); min-width:78px; }
.price-row b{ font-family:var(--serif); font-weight:400; font-size:1.2rem; color:var(--ink); }
.price-row.pair b{ color:var(--cocoa); }
.price-row em{ font-style:normal; font-size:.72rem; color:var(--brown-w); }
.card-actions{ display:flex; gap:8px; }
.add-btn{ flex:1; font-family:inherit; border:none; cursor:pointer; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:12px 10px; background:var(--cocoa); color:var(--bg); transition:background .3s, color .3s; }
.add-btn:hover{ background:var(--ink); }
.add-btn.ghost{ background:transparent; color:var(--cocoa); box-shadow:inset 0 0 0 1px var(--line); }
.add-btn.ghost:hover{ background:var(--cocoa); color:var(--bg); box-shadow:none; }
/* product gallery (when real photos exist; otherwise the SVG illustration shows) */
.card-gallery{ position:absolute; inset:0; padding:7%; }
.card-gallery .gal-main{ width:100%; height:100%; object-fit:contain; }
.gal-thumbs{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; }
.gal-thumb{ width:34px; height:34px; padding:0; border:1px solid rgba(251,250,246,.75); background:var(--paper);
  cursor:pointer; overflow:hidden; opacity:.7; transition:opacity .3s; }
.gal-thumb.active, .gal-thumb:hover{ opacity:1; }
.gal-thumb img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------- configurator */
.cfg{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center; }
.cfg-visual{ position:relative; overflow:hidden; }
.cfg-visual img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.cfg-visual .cfg-tag{ position:absolute; left:24px; bottom:24px; color:var(--paper);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.cfg-panel .eyebrow{ display:block; margin-bottom:16px; }
.cfg-panel h2{ margin-bottom:14px; }
.cfg-panel > p{ color:var(--brown-w); margin-bottom:30px; max-width:44ch; }
.cfg-field{ margin-bottom:22px; }
.cfg-field label{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brown-w); margin-bottom:9px; }
.cfg-select{ position:relative; }
.cfg-select select{
  width:100%; appearance:none; -webkit-appearance:none; background:var(--paper);
  border:1px solid var(--line); border-radius:0; padding:14px 42px 14px 16px;
  font-family:var(--sans); font-size:.95rem; color:var(--ink); cursor:pointer;
  transition:border-color .3s;
}
.cfg-select select:focus{ outline:none; border-color:var(--cocoa); }
.cfg-select::after{ content:""; position:absolute; right:18px; top:50%; width:7px; height:7px;
  border-right:1px solid var(--cocoa); border-bottom:1px solid var(--cocoa);
  transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.cfg-qty{ display:flex; align-items:center; border:1px solid var(--line); width:fit-content; background:var(--paper); }
.cfg-qty button{ width:46px; height:48px; background:none; border:none; cursor:pointer; font-size:1.2rem;
  color:var(--cocoa); transition:background .3s; }
.cfg-qty button:hover{ background:var(--sand); }
.cfg-qty input{ width:54px; height:48px; text-align:center; border:none; border-left:1px solid var(--line);
  border-right:1px solid var(--line); font-family:var(--sans); font-size:1rem; color:var(--ink); background:transparent; }
.cfg-qty input::-webkit-outer-spin-button,.cfg-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.cfg-summary{ border-top:1px solid var(--line); margin-top:28px; padding-top:22px; }
.cfg-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.cfg-row .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brown-w); }
.cfg-row .val{ font-family:var(--sans); color:var(--ink); }
.cfg-row.total .lbl{ color:var(--cocoa); }
.cfg-row.total .val{ font-family:var(--serif); font-size:2rem; color:var(--ink); font-weight:400; }
.cfg-note{ font-size:.78rem; color:var(--brown-w); margin:14px 0 24px; opacity:.85; line-height:1.5; }
.cfg-ship{ font-size:11px; letter-spacing:.06em; color:var(--cocoa); margin-top:16px; display:flex; align-items:center; gap:8px; }
.cfg-ship::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--clay); }
@media(max-width:860px){ .cfg{ grid-template-columns:1fr; } .cfg-visual{ display:none; } }

/* --------------------------------------------------------------- shipping */
.ship-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-top:50px; }
.ship-cell{ background:var(--bg); padding:46px 26px; text-align:center; }
.ship-cell .s-t{ font-family:var(--serif); font-size:1.7rem; color:var(--cocoa); }
.ship-cell .s-d{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brown-w); margin-top:12px; }
@media(max-width:760px){ .ship-grid{ grid-template-columns:repeat(2,1fr); } }

/* --------------------------------------------------------------- testimonials */
.tests{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); margin-top:56px; }
.test{ text-align:center; }
.test p{ font-family:var(--serif); font-size:1.3rem; color:var(--cocoa); line-height:1.4; font-style:italic; }
.test .who{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brown-w); margin-top:20px; }
@media(max-width:760px){ .tests{ grid-template-columns:1fr; gap:40px; } }

/* --------------------------------------------------------------- CTA band */
.cta-band{ background:linear-gradient(165deg, #1c2547 0%, #0c1230 100%); color:var(--paper); text-align:center; position:relative; overflow:hidden; }
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band h2{ color:var(--paper); margin-bottom:24px; }
.cta-band p{ color:rgba(251,250,246,.9); max-width:560px; margin:0 auto 34px; }
/* night sky behind the "Nosotros" text (clouds drift over a deep-blue night) */
.about-sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background-repeat:no-repeat;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(2.1px 2.1px at 26% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 38% 14%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.9px 1.9px at 52% 26%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 63% 12%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 76% 28%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 88% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 18% 62%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.8px 1.8px at 46% 72%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 72% 66%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.7px 1.7px at 90% 76%, rgba(255,255,255,.66), transparent); }
.about-sky .cloud{ filter:blur(15px); }
.ac1{ top:5%;  width:54vw; --peak:.16; animation-duration:58s; animation-delay:-8s; }
.ac2{ top:42%; width:66vw; --peak:.12; animation-duration:78s; animation-delay:-34s; }
.ac3{ top:70%; width:48vw; --peak:.15; animation-duration:64s; animation-delay:-20s; }

/* ----------------------------------------------- configurator benefits */
.cfg-benefits{ display:flex; flex-wrap:wrap; gap:16px 30px; margin:20px 0 30px; }
.cfg-benefit{ flex:1 1 130px; min-width:130px; }
.cfg-benefit .cb-t{ font-size:12.5px; letter-spacing:.04em; color:var(--cocoa); font-weight:500; }
.cfg-benefit .cb-t::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--clay); margin-right:8px; vertical-align:middle; }
.cfg-benefit .cb-d{ font-size:.82rem; color:var(--brown-w); margin-top:4px; padding-left:15px; }
/* configurator as a standout dark band (matches the wholesale section) */
#configurator{ background:var(--cocoa); color:var(--paper); }
#configurator .eyebrow{ color:var(--clay); }
#configurator h2{ color:var(--paper); }
#configurator .cfg-panel > p{ color:rgba(251,250,246,.85); }
#configurator .cfg-benefit .cb-t{ color:var(--paper); }
#configurator .cfg-benefit .cb-d{ color:rgba(251,250,246,.72); }
#configurator .cfg-field label{ color:rgba(251,250,246,.78); }
#configurator .cfg-summary{ border-top-color:rgba(251,250,246,.22); }
#configurator .cfg-row .lbl{ color:rgba(251,250,246,.78); }
#configurator .cfg-row .val, #configurator .cfg-row.total .val{ color:var(--paper); }
#configurator .cfg-note{ color:rgba(251,250,246,.62); }
#configurator .cfg-ship{ color:rgba(251,250,246,.88); }

/* -------------------------------------------------- wholesale (hotels) */
.wholesale-band{ background:var(--cocoa); color:var(--paper); }
.wholesale{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,80px); align-items:center; }
.wholesale-pitch .eyebrow{ display:block; margin-bottom:18px; color:var(--clay); opacity:1; }
.wholesale-pitch h2{ color:var(--paper); margin-bottom:20px; }
.wholesale-pitch p{ color:rgba(251,250,246,.82); margin-bottom:26px; max-width:46ch; }
.wholesale-list{ list-style:none; display:grid; gap:13px; }
.wholesale-list li{ position:relative; padding-left:28px; color:rgba(251,250,246,.92); font-size:.96rem; }
.wholesale-list li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--clay); font-weight:700; }
.wh-form-label{ color:rgba(251,250,246,.74); font-size:.86rem; letter-spacing:.01em; }
.wholesale-form{ display:grid; gap:14px; background:rgba(251,250,246,.07);
  padding:clamp(26px,3vw,38px); border:1px solid rgba(251,250,246,.18); }
.wholesale-form input, .wholesale-form textarea{ width:100%; background:var(--paper); border:none;
  padding:15px 16px; font-family:var(--sans); font-size:.96rem; color:var(--ink); }
.wholesale-form textarea{ resize:vertical; }
.wholesale-form input::placeholder, .wholesale-form textarea::placeholder{ color:var(--brown-w); }
.wholesale-form input:focus, .wholesale-form textarea:focus{ outline:2px solid var(--clay); outline-offset:1px; }
.wholesale-form button{ width:100%; cursor:pointer; margin-top:4px; }
@media(max-width:860px){ .wholesale{ grid-template-columns:1fr; gap:34px; } }

/* --------------------------------------------------------------- footer */
.footer{ background:var(--ink); color:var(--paper); padding:80px var(--gutter) 0; }
.footer-top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px;
  padding-bottom:54px; border-bottom:1px solid rgba(251,250,246,.14); }
.footer-brand .brand{ color:var(--paper); }
.footer-brand p{ color:rgba(251,250,246,.65); font-size:.9rem; margin-top:18px; max-width:30ch; }
.footer-social{ display:flex; gap:18px; margin-top:18px; }
.footer-social a{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,250,246,.7);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s, border-color .3s; }
.footer-social a:hover{ color:var(--paper); border-color:rgba(251,250,246,.5); }
.footer-col h4{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(251,250,246,.55); margin-bottom:18px; font-weight:400; }
.footer-col a, .footer-col p{ display:block; color:rgba(251,250,246,.82); font-size:.92rem; margin-bottom:11px; transition:color .3s; }
.footer-col a:hover{ color:var(--paper); }
.news form{ display:flex; border:1px solid rgba(251,250,246,.3); margin-top:6px; }
.news input{ flex:1; background:none; border:none; padding:13px 14px; color:var(--paper); font-family:var(--sans); font-size:.85rem; }
.news input::placeholder{ color:rgba(251,250,246,.4); }
.news input:focus{ outline:none; }
.news button{ background:none; border:none; border-left:1px solid rgba(251,250,246,.3); color:var(--paper);
  padding:0 18px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .3s; }
.news button:hover{ background:rgba(251,250,246,.1); }
.footer-bottom{ max-width:var(--maxw); margin:0 auto; padding:26px 0 34px; display:flex; justify-content:space-between;
  align-items:center; gap:18px; flex-wrap:wrap; }
.footer-bottom small{ color:rgba(251,250,246,.5); font-size:11px; letter-spacing:.04em; }
.pay-badges{ display:flex; gap:8px; }
.pay-badges span{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,250,246,.55);
  border:1px solid rgba(251,250,246,.22); padding:5px 9px; }
@media(max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- whatsapp float */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:80; width:54px; height:54px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(0,0,0,.18);
  transition:transform .3s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }

/* ----------------------------------------------------------------- cart */
.cart-btn{ position:relative; background:none; border:none; cursor:pointer; color:inherit; padding:4px; display:inline-flex; align-items:center; }
.cart-btn svg{ width:23px; height:23px; }
.header:not(.scrolled) .cart-btn svg{ filter:drop-shadow(0 1px 6px rgba(0,0,0,.4)); }
.cart-count{ position:absolute; top:-5px; right:-7px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--clay); color:#fff; font-size:10px; font-weight:600; line-height:17px; text-align:center; display:none; }
.cart-count.has{ display:block; }
.cart-overlay{ position:fixed; inset:0; background:rgba(15,17,23,.5); opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s; z-index:95; }
.cart-overlay.show{ opacity:1; visibility:visible; }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:390px; max-width:92vw; background:var(--paper); z-index:96;
  transform:translateX(101%); transition:transform .45s var(--ease); display:flex; flex-direction:column; box-shadow:-10px 0 50px rgba(15,17,23,.18); }
.cart-drawer.open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--line-soft); }
.cart-head h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--cocoa); }
.cart-close{ background:none; border:none; font-size:1.05rem; line-height:1; cursor:pointer; color:var(--brown-w); padding:4px; }
.cart-items{ flex:1; overflow-y:auto; padding:6px 28px; }
.cart-empty{ color:var(--brown-w); text-align:center; padding:48px 0; }
.cart-line{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.cl-thumb{ width:66px; height:66px; flex:none; object-fit:contain; background:#fff; }
.cl-main{ flex:1; min-width:0; }
.cl-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cl-name{ font-size:.96rem; color:var(--ink); line-height:1.35; }
.cl-remove{ background:none; border:none; cursor:pointer; color:var(--brown-w); font-size:.82rem; padding:2px 0 2px 6px; flex:none; }
.cl-remove:hover{ color:var(--ink); }
.cl-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.cl-var{ font-size:.82rem; color:var(--brown-w); }
.cl-qty{ display:flex; align-items:center; border:1px solid var(--line); }
.cl-qty button{ width:30px; height:30px; background:none; border:none; cursor:pointer; font-size:1rem; color:var(--cocoa); }
.cl-qty button:hover{ background:var(--sand); }
.cl-qty span{ width:26px; text-align:center; font-size:.88rem; color:var(--ink); }
.cl-total{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); min-width:58px; text-align:right; }
.cart-foot{ border-top:1px solid var(--line); padding:22px 28px; }
.cart-subtotal{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-subtotal span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brown-w); }
.cart-subtotal b{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--ink); }
.cart-note{ font-size:.78rem; color:var(--brown-w); margin-bottom:16px; line-height:1.5; }
#cartCheckout{ width:100%; cursor:pointer; }
#cartCheckout:disabled{ opacity:.4; cursor:not-allowed; }
.cart-foot-links{ display:flex; justify-content:space-between; margin-top:14px; }
.cart-link{ background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown-w); transition:color .3s; }
.cart-link:hover{ color:var(--cocoa); }

/* ------------------------------------------------------------- checkout */
.checkout{ position:fixed; inset:0; z-index:100; background:var(--bg); overflow-y:auto; }
.checkout[hidden]{ display:none; }
.co-bar{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); background:var(--paper); border-bottom:1px solid var(--line-soft); }
.co-back{ background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brown-w); }
.co-back:hover{ color:var(--cocoa); }
.co-logo{ font-family:var(--serif); font-size:1.1rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cocoa); }
.co-close{ background:none; border:none; cursor:pointer; font-size:1.05rem; color:var(--brown-w); }
.co-body{ max-width:1040px; margin:0 auto; padding:clamp(28px,5vw,56px) var(--gutter);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:start; }
.co-form h3{ font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--cocoa); margin:0 0 16px; }
.co-form h3:not(:first-child){ margin-top:30px; }
.co-form input, .co-form textarea{ width:100%; background:var(--paper); border:1px solid var(--line); border-radius:0;
  padding:14px 16px; margin-bottom:12px; font-family:var(--sans); font-size:.95rem; color:var(--ink); }
.co-form textarea{ resize:vertical; }
.co-form input:focus, .co-form textarea:focus{ outline:none; border-color:var(--clay); }
.co-row{ display:flex; gap:12px; }
.co-row input{ flex:1; }
.co-paynote{ font-size:.82rem; color:var(--brown-w); background:rgba(70,101,143,.08); border-left:2px solid var(--clay);
  padding:12px 14px; margin:16px 0; line-height:1.5; }
#coPlace{ width:100%; cursor:pointer; }
.co-summary{ position:sticky; top:92px; background:var(--paper); border:1px solid var(--line-soft); padding:26px; }
.co-summary h3{ font-family:var(--serif); font-weight:400; font-size:1.2rem; color:var(--cocoa); margin:0 0 14px; }
.co-item{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.co-item span{ color:var(--brown-w); }
.co-item b{ font-weight:400; color:var(--ink); white-space:nowrap; }
.co-line{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0 0; font-size:.9rem; color:var(--brown-w); }
.co-line b{ color:var(--ink); }
.co-ship{ color:var(--cocoa); }
.co-line.co-total{ margin-top:8px; padding-top:14px; border-top:1px solid var(--line); }
.co-line.co-total span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cocoa); }
.co-line.co-total b{ font-family:var(--serif); font-weight:400; font-size:1.6rem; }
.co-done{ max-width:520px; margin:0 auto; text-align:center; padding:clamp(64px,13vh,130px) var(--gutter); }
.co-done[hidden]{ display:none; }
.co-done svg{ width:58px; height:58px; color:var(--clay); margin-bottom:22px; }
.co-done h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--cocoa); margin-bottom:16px; }
.co-done p{ color:var(--brown-w); margin-bottom:28px; }
@media(max-width:820px){ .co-body{ grid-template-columns:1fr; } .co-summary{ position:static; order:-1; } }

/* --------------------------------------------------------------- mobile nav */
@media(max-width:1080px){
  .nav{ position:fixed; inset:0; background:var(--bg); flex-direction:column; justify-content:center;
    gap:30px; transform:translateX(100%); transition:transform .5s var(--ease); z-index:70; }
  .nav.open{ transform:none; }
  .nav a{ color:var(--cocoa); font-size:14px; text-shadow:none; }
  .nav-toggle{ display:block; z-index:75; }
  .header.scrolled .nav a{ color:var(--cocoa); }
  /* keep the toggle readable over the ivory menu overlay */
  .nav.open ~ .header-right .nav-toggle{ color:var(--cocoa); text-shadow:none; }
}

/* toast */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); z-index:90;
  background:var(--ink); color:var(--paper); padding:14px 24px; font-size:12px; letter-spacing:.08em;
  opacity:0; pointer-events:none; transition:opacity .4s, transform .4s; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --------------------------------------------------------- ambient sky
   Soft drifting clouds + a slow day→night cycle (sleep / sky mood).
   All layers are fixed, decorative and click-through; they sit below the
   header (z60) and the WhatsApp button (z80).                            */
.sky-layer{ position:absolute; inset:0; pointer-events:none; }
/* day→night tint (background-color interpolates smoothly) */
#skyTint{ z-index:1; background-color:rgba(255,255,255,0); animation:daynight 60s ease-in-out infinite; }
#skyTint::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(130% 80% at 50% -12%, rgba(200,216,245,.5), transparent 62%);
  animation:skyglow 60s ease-in-out infinite; }
/* stars + cool moonlight, fade in only at night */
#skyStars{ z-index:1; opacity:0; animation:starfade 60s ease-in-out infinite;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(130% 65% at 50% 4%, rgba(190,205,255,.18), transparent 60%),
    radial-gradient(2.2px 2.2px at 7% 10%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 13% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.4px 2.4px at 21% 8%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 28% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 34% 30%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 40% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.3px 2.3px at 46% 24%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 52% 9%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 58% 20%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 64% 32%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.4px 2.4px at 70% 11%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 76% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(2.1px 2.1px at 82% 7%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 88% 26%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.2px 2.2px at 94% 15%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 10% 40%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 24% 48%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 44% 44%, rgba(255,255,255,.8), transparent),
    radial-gradient(2.1px 2.1px at 62% 50%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 78% 46%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 90% 52%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 17% 58%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.9px 1.9px at 53% 60%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.8px 1.8px at 85% 62%, rgba(255,255,255,.78), transparent); }
/* clouds */
#skyClouds{ z-index:1; overflow:hidden; }
.cloud{ position:absolute; left:0; width:46vw; height:24vh; opacity:0;
  will-change:transform, opacity; filter:blur(9px);
  background:
    radial-gradient(40% 60% at 30% 56%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(50% 78% at 52% 42%, #fff, transparent 72%),
    radial-gradient(38% 56% at 73% 58%, rgba(255,255,255,.92), transparent 70%);
  animation-name:drift; animation-timing-function:linear; animation-iteration-count:infinite; }
.c1{ top:7vh;  width:40vw; --peak:.30; animation-duration:42s; animation-delay:-8s; }
.c2{ top:24vh; width:52vw; --peak:.24; animation-duration:62s; animation-delay:-30s; }
.c3{ top:48vh; width:36vw; --peak:.28; animation-duration:50s; animation-delay:-16s; }
.c4{ top:66vh; width:58vw; --peak:.22; animation-duration:70s; animation-delay:-44s; }
.c5{ top:84vh; width:44vw; --peak:.23; animation-duration:56s; animation-delay:-24s; }
/* "front" clouds — larger, closer, more present */
.cf1{ top:30vh; width:72vw; height:34vh; --peak:.42; filter:blur(16px); z-index:4; animation-duration:58s; animation-delay:-10s; }
.cf2{ top:58vh; width:82vw; height:38vh; --peak:.36; filter:blur(20px); z-index:4; animation-duration:80s; animation-delay:-52s; }

@keyframes drift{
  0%{ transform:translate3d(-62vw,0,0); opacity:0; }
  12%{ opacity:var(--peak,.15); }
  88%{ opacity:var(--peak,.15); }
  100%{ transform:translate3d(132vw,0,0); opacity:0; }
}
@keyframes daynight{
  0%,100%{ background-color:rgba(255,255,255,0); }
  20%{ background-color:rgba(130,150,205,.06); }        /* leve frescura */
  40%{ background-color:rgba(150,165,205,.06); }        /* azul suave */
  58%{ background-color:rgba(72,92,140,.14); }          /* crepúsculo azul */
  78%{ background-color:rgba(12,16,44,.24); }           /* noche */
  90%{ background-color:rgba(120,110,175,.10); }        /* amanecer */
}
@keyframes skyglow{
  0%,100%{ opacity:.3; } 30%{ opacity:.22; } 50%{ opacity:.12; }
  64%{ opacity:.05; } 80%{ opacity:.03; } 90%{ opacity:.16; }
}
@keyframes starfade{
  0%,40%{ opacity:0; } 58%{ opacity:.4; } 80%{ opacity:.5; } 92%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #skyClouds, .about-sky .cloud{ display:none; }
  #skyTint, #skyStars, #skyTint::before{ animation:none; }
  #skyTint{ background-color:rgba(255,255,255,0); }
  #skyStars{ opacity:0; }
}