/* =========================================================
   DPCM — Design System
   Colores extraídos de la marca original (scheme_default)
   ========================================================= */

:root{
  --c-primary:#50AAB2;
  --c-primary-dark:#3B98A0;
  --c-accent:#BDCC3E;
  --c-accent-dark:#AEBE2D;
  --c-navy:#062A4D;
  --c-navy-2:#051729;
  --c-bg:#F0F7F8;
  --c-surface:#FFFFFF;
  --c-border:#CED9DB;
  --c-text:#45505A;
  --c-text-light:#707A84;
  --c-text-dark:#062A4D;
  --c-white:#FFFFFF;

  --font-main:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --radius-full:999px;

  --shadow-sm:0 2px 10px rgba(6,42,77,.06);
  --shadow-md:0 10px 30px rgba(6,42,77,.10);
  --shadow-lg:0 25px 60px rgba(6,42,77,.18);

  --ease:cubic-bezier(.16,1,.3,1);
  --container:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-main);
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  font-family:var(--font-main);
  color:var(--c-text-dark);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5vw,4rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;
  border-radius:var(--radius-full);
  background:var(--c-navy);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--c-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-accent{background:var(--c-accent);color:var(--c-navy)}
.btn-accent:hover{background:var(--c-accent-dark)}
.btn-outline{background:transparent;color:var(--c-navy);box-shadow:inset 0 0 0 2px var(--c-border)}
.btn-outline:hover{background:var(--c-navy);color:#fff;box-shadow:none}
.nav-transparent:not(.is-scrolled) .header-cta .btn-outline{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.nav-transparent:not(.is-scrolled) .header-cta .btn-outline:hover{background:#fff;color:var(--c-navy)}
/* .btn-outline is authored for light backgrounds (navy text + light border).
   Every place it is actually used is dark: the hero, the .cta-band gradient and
   the cookie banner — so it needs an inverted treatment there or it renders
   navy-on-navy (invisible). */
.hero-actions .btn-outline,
.cta-band .btn-outline,
.cookie-banner .btn-outline{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.hero-actions .btn-outline:hover,
.cta-band .btn-outline:hover,
.cookie-banner .btn-outline:hover{background:#fff;color:var(--c-navy);box-shadow:none}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header.is-scrolled{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:12px 0;
  box-shadow:var(--shadow-sm);
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.5rem;color:var(--c-navy);flex-shrink:0}
.logo img{height:40px;width:auto}
.site-header.is-scrolled .logo,
body.page-not-home .logo{color:var(--c-navy)}
.main-nav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.main-nav > ul{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.main-nav a{
  display:block;padding:10px 9px;border-radius:var(--radius-full);
  font-weight:600;font-size:.87rem;color:var(--c-navy);
  transition:background .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.nav-transparent .main-nav > ul > li > a,
.nav-transparent .logo{color:#fff}
.nav-transparent.is-scrolled .main-nav > ul > li > a,
.nav-transparent.is-scrolled .logo{color:var(--c-navy)}
/* The two rules above are (0,2,3)/(0,3,3) and would otherwise out-rank the
   hover / current pill below (0,2,1)/(0,2,2), leaving the teal pill with navy
   text once the header is scrolled. Restore the intended white. */
.nav-transparent.is-scrolled .main-nav > ul > li > a:hover,
.nav-transparent.is-scrolled .main-nav > ul > li.current > a{color:#fff}
.dropdown a{color:var(--c-text-dark)}
.main-nav a:hover,.main-nav li.current > a{background:var(--c-primary);color:#fff}
.main-nav li{position:relative}
.has-dropdown > a::after{content:'';display:inline-block;margin-left:6px;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:0;
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:10px;min-width:260px;
  display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{color:var(--c-text-dark);border-radius:10px}
.dropdown a:hover{background:var(--c-bg);color:var(--c-primary-dark)}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-cta .btn{padding:11px 18px;font-size:.8rem;white-space:nowrap}
.burger{display:none;width:44px;height:44px;border-radius:var(--radius-full);background:rgba(255,255,255,.15);border:none;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:'';position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger{color:var(--c-navy)}
.nav-transparent:not(.is-scrolled) .burger{color:#fff}
.burger::before{top:16px}
.burger span{top:22px}
.burger::after{top:28px}
.burger.is-active::before{transform:translateY(6px) rotate(45deg)}
.burger.is-active::after{transform:translateY(-6px) rotate(-45deg)}
.burger.is-active span{opacity:0}

/* ---------- Mobile nav ---------- */
.mobile-nav{
  position:fixed;inset:0;z-index:1100;
  background:var(--c-navy);
  display:flex;flex-direction:column;
  padding:100px 32px 40px;
  /* 7 items + the CTA button are ~770px tall; without this the last links and
     the button are unreachable on any viewport shorter than that (e.g. iPhone
     SE portrait, or any phone in landscape), since body scrolling is locked
     while the panel is open. */
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
}
.mobile-nav.is-open{transform:translateX(0)}
.mobile-nav ul{display:flex;flex-direction:column;gap:6px}
.mobile-nav a{display:block;padding:16px 4px;font-size:1.5rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav .btn{margin-top:30px;align-self:flex-start}
.mobile-close{position:absolute;top:28px;right:24px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.5rem;cursor:pointer}
.mobile-nav-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav-row a{border-bottom:none;flex:1}
.mobile-submenu-toggle{
  flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  border:none;cursor:pointer;position:relative;
}
.mobile-submenu-toggle span{position:absolute;inset:0;margin:auto;width:12px;height:12px}
.mobile-submenu-toggle span::before,.mobile-submenu-toggle span::after{
  content:'';position:absolute;background:#fff;transition:transform .3s var(--ease);
}
.mobile-submenu-toggle span::before{left:0;right:0;top:5px;height:2px}
.mobile-submenu-toggle span::after{top:0;bottom:0;left:5px;width:2px}
.mobile-submenu-toggle[aria-expanded="true"] span::after{transform:rotate(90deg)}
.mobile-submenu{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
}
.mobile-submenu.is-open{max-height:600px}
.mobile-submenu a{
  padding:12px 4px 12px 20px;font-size:1.05rem;font-weight:500;
  color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.06);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--c-navy);
  isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transform:scale(1.08);
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,23,41,.55) 0%,rgba(5,23,41,.72) 60%,rgba(5,23,41,.88) 100%);
}
.hero-content{position:relative;z-index:1;color:#fff;padding-top:120px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:700;
  color:var(--c-accent);margin-bottom:22px;
  opacity:0;transform:translateY(16px);animation:heroIn .8s var(--ease) .1s forwards;
}
.hero-eyebrow::before{content:'';width:34px;height:2px;background:var(--c-accent)}
.hero h1{
  color:#fff;max-width:820px;margin-bottom:24px;
  opacity:0;transform:translateY(24px);animation:heroIn .9s var(--ease) .25s forwards;
}
.hero p.lead{
  max-width:560px;font-size:1.15rem;color:rgba(255,255,255,.82);margin-bottom:36px;
  opacity:0;transform:translateY(24px);animation:heroIn .9s var(--ease) .4s forwards;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;opacity:0;transform:translateY(24px);animation:heroIn .9s var(--ease) .55s forwards}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
.hero-scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;opacity:.75;
}
.hero-scroll::after{content:'';width:1px;height:40px;background:currentColor;animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-sm{min-height:56vh}
.hero-sm .hero-content{padding-top:100px}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal="fade"]{transform:none}
[data-reveal-delay="1"]{transition-delay:.12s}
[data-reveal-delay="2"]{transition-delay:.24s}
[data-reveal-delay="3"]{transition-delay:.36s}
[data-reveal-delay="4"]{transition-delay:.48s}

/* ---------- Sections ---------- */
section{padding:110px 0}
.section-alt{background:var(--c-surface)}
.section-dark{background:var(--c-navy);color:rgba(255,255,255,.8)}
.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:680px;margin-bottom:56px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700;
  color:var(--c-primary-dark);margin-bottom:16px;
}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--c-primary)}
.section-dark .eyebrow{color:var(--c-accent)}
.section-dark .eyebrow::before{background:var(--c-accent)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Grid / Cards ---------- */
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--c-surface);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-border)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-media img{transform:scale(1.08)}
.card-body{padding:26px 28px 30px;flex:1;display:flex;flex-direction:column}
.card-body h3{margin-bottom:10px;font-size:1.3rem}
.card-body p{color:var(--c-text-light);font-size:.95rem;flex:1}
.card-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--c-primary-dark);margin-top:14px;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}
.card-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.card:hover .card-link svg{transform:translateX(4px)}

/* ---------- Feature split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.split-media img{width:100%;height:100%;object-fit:cover}
.feature-list{display:grid;gap:18px;margin-top:28px}
.feature-item{display:flex;gap:16px;align-items:flex-start}
.feature-icon{
  flex:none;width:48px;height:48px;border-radius:14px;
  background:var(--c-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.feature-icon svg{width:22px;height:22px}
.feature-item h4{margin:0 0 4px;font-size:1.05rem;color:var(--c-text-dark)}
.feature-item p{margin:0;font-size:.92rem;color:var(--c-text-light)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat-num{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--c-accent)}
.stat-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;opacity:.75}

/* ---------- Testimonials ---------- */
.testi-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.testi-track::-webkit-scrollbar{display:none}
.testi-card{
  scroll-snap-align:start;flex:0 0 min(420px,85vw);
  background:var(--c-surface);border-radius:var(--radius-lg);padding:32px;
  box-shadow:var(--shadow-sm);
}
.testi-stars{color:var(--c-accent-dark);font-size:1rem;margin-bottom:14px;letter-spacing:2px}
.testi-quote{font-size:1.02rem;color:var(--c-text-dark);margin-bottom:18px}
.testi-name{font-weight:700;font-size:.9rem;color:var(--c-primary-dark);text-transform:uppercase;letter-spacing:.04em}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--c-navy),var(--c-navy-2));
  border-radius:var(--radius-lg);
  padding:64px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  flex-wrap:wrap;color:#fff;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(80,170,178,.35),transparent 70%);
  top:-160px;right:-120px;
}
.cta-band h2{color:#fff;margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.75);margin:0}

/* ---------- Form ---------- */
.form-card{background:var(--c-surface);border-radius:var(--radius-lg);padding:44px;box-shadow:var(--shadow-md)}
.form-row{display:grid;gap:20px;margin-bottom:20px}
.form-row.cols-2{grid-template-columns:1fr 1fr}
label{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-dark);margin-bottom:8px}
input,textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--c-border);
  font-family:var(--font-main);font-size:1rem;background:var(--c-bg);
  transition:border-color .3s,box-shadow .3s;
}
input:focus,textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(80,170,178,.15)}
textarea{resize:vertical;min-height:130px}
.form-msg{margin-top:16px;padding:14px 18px;border-radius:12px;font-size:.92rem;display:none}
.form-msg.ok{display:block;background:#e6f6e8;color:#1a7a2e}
.form-msg.err{display:block;background:#fdeceb;color:#b3261e}

/* ---------- Footer ---------- */
.site-footer{background:var(--c-navy-2);color:rgba(255,255,255,.65);padding:80px 0 0}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .logo{color:#fff;margin-bottom:14px}
.footer-brand p{font-size:.92rem;max-width:280px}
.footer-col h4{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.footer-col ul{display:grid;gap:10px}
.footer-col a{font-size:.92rem;transition:color .3s}
.footer-col a:hover{color:var(--c-primary)}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.footer-contact svg{flex:none;width:18px;height:18px;color:var(--c-primary);margin-top:2px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:.82rem;flex-wrap:wrap;gap:12px}
.social-row{display:flex;gap:10px}
.social-row a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background .3s}
.social-row a:hover{background:var(--c-primary)}
.social-row svg{width:16px;height:16px}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:900;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  animation:waPulse 2.6s ease-in-out infinite;
}
.wa-float svg{width:28px;height:28px}
@keyframes waPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:1200;
  max-width:560px;margin:0 auto;
  background:var(--c-navy-2);color:#fff;
  border-radius:var(--radius-md);padding:22px 26px;
  box-shadow:var(--shadow-lg);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  transform:translateY(140%);transition:transform .6s var(--ease);
}
.cookie-banner.is-visible{transform:translateY(0)}
.cookie-banner p{margin:0;font-size:.88rem;color:rgba(255,255,255,.8);flex:1;min-width:200px}
.cookie-banner .btn{padding:11px 20px;font-size:.78rem}
.cookie-banner p a{color:#fff;text-decoration:underline}

/* ---------- Breadcrumb ---------- */
/* flex-wrap is required: the 4-level breadcrumbs on the "frentes" sub-pages are
   ~370px wide and would otherwise shrink each segment to min-content, stacking
   the individual words into ragged columns on phones instead of wrapping. */
.breadcrumb{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:.85rem;color:rgba(255,255,255,.65);opacity:0;animation:heroIn .8s var(--ease) forwards}
.breadcrumb a:hover{color:#fff}

/* ---------- Prose links ----------
   The global reset is a{color:inherit;text-decoration:none}, which is right for
   nav / cards / buttons but leaves inline links inside body copy completely
   indistinguishable from the text around them (the cross-links on
   /encimeras/, /electrodomesticos/, /fregaderos-y-griferia/,
   /modulos-de-cocina/, the phone + WhatsApp links on /contacts/, and every link
   on the legal pages). Restore an affordance for links inside running text
   only. .cookie-banner p a is overridden above — it sits on dark navy. */
p a,
.prose li a{color:var(--c-primary-dark);text-decoration:underline;text-underline-offset:2px}
p a:hover,
.prose li a:hover{color:var(--c-navy)}

/* ---------- Long-form prose (legal pages) ----------
   These pages use bare h2/p/ul rather than the usual card/split components, so
   they need the ul reset and the zero heading top-margin undone locally. */
.prose h2{margin-top:1.6em}
.prose > h2:first-child{margin-top:0}
.prose ul{list-style:disc;padding-left:1.35em;margin:0 0 1.5em}
.prose li{margin-bottom:.5em}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:12px 20px;z-index:2000}
.skip-link:focus{left:12px;top:12px}

/* ---------- Responsive ---------- */
@media (max-width:1220px){
  .main-nav,.header-cta .btn-outline{display:none}
  .burger{display:block}
}
@media (max-width:560px){
  .header-cta{display:none}
}
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .footer-top{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  section{padding:72px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row.cols-2{grid-template-columns:1fr}
  .cta-band{padding:40px 28px;flex-direction:column;text-align:center}
  .footer-top{grid-template-columns:1fr}
  /* Both children can shrink below their content width, so flex-wrap never
     triggers and they squeeze into two narrow ragged columns instead. Stack. */
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .hero{min-height:100vh}
  .wa-float{width:52px;height:52px;bottom:18px;right:18px;transition:bottom .3s var(--ease)}
  /* On narrow screens the cookie banner spans (almost) full width and sits
     directly under the WhatsApp button (both bottom-right) until dismissed. */
  body.cookie-banner-visible .wa-float{bottom:130px}
}

/* ---------- Swatch grid (finish / colour options) ---------- */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
.swatch{
  background:var(--c-surface);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.swatch:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.swatch-media{aspect-ratio:4/3;overflow:hidden;background:var(--c-border)}
.swatch-media img{width:100%;height:100%;object-fit:cover}
.swatch-label{padding:10px 12px;font-size:.82rem;font-weight:700;color:var(--c-text-dark);text-align:center;line-height:1.3}