/* UI global: top strip + lang toggle + centered brand + whatsapp + footer (no-home) */

.topStrip{
  position: relative;
  height: 86px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: url("/ui/metal.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Capa oscura + viñeta suave (esto es lo que “oscurece el metal”) */
.topStrip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.22));
}

.topStrip__inner{
  position: relative; /* para quedar sobre el ::after */
  z-index: 1;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Language toggle */
.langToggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.85);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms cubic-bezier(.2,.8,.2,1);
}
.langToggle:hover{ transform: translateY(-1px); border-color: rgba(87,194,255,.28); }
.langToggle__pill{
  width: 34px; height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position: relative;
}
.langToggle__dot{
  width: 14px; height: 14px;
  border-radius: 999px;
  background: rgba(245,185,66,.95);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  transition: left 220ms cubic-bezier(.2,.8,.2,1);
}
.langToggle[data-on="right"] .langToggle__dot{ left: 18px; }
.langToggle[data-on="left"]  .langToggle__dot{ left: 2px; }

/* Centered brand (logo only) — like Home */
.brandTop{
  position: relative;
  margin-top: -44px;
  margin-bottom: -10px; /* ayuda a compactar el stack */
  display:grid;
  place-items:center;
  pointer-events:none;
}
.brandTop__logo{
  width: 150px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.70));
  opacity: .98;
}
@media (max-width: 520px){
  .brandTop__logo{ width: 128px; }
}

/* WhatsApp floating (programmed) */
.waFloat{
  position: fixed;
  z-index: 80;
  right: 16px;
  bottom: 16px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  color: rgba(255,255,255,.96);
  background: linear-gradient(180deg, rgba(34,197,94,.92), rgba(34,197,94,.68));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms cubic-bezier(.2,.8,.2,1);
}
.waFloat:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.waFloat:active{ transform: translateY(0); }
.waFloat__icon{ width: 22px; height: 22px; display:block; }
.waFloat__txt{ font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 520px){
  .waFloat__txt{ display:none; }
  .waFloat{ padding: 12px; }
}

/* Footer full-width (consistent on all pages) */
.footer{
  width: 100%;
  margin: 18px 0 0;
  padding: 18px 0 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.footer__inner{
  width:min(1180px, calc(100% - 40px));
  margin-inline:auto;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr; }
}
.footer__name{
  margin:0;
  font-family:"Space Grotesk", system-ui;
  font-weight:700;
  letter-spacing:.2px;
}
.footer__desc{
  margin: 6px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.45;
}
.footer__h{
  margin:0 0 8px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  letter-spacing:.14em;
  text-transform: uppercase;
}
.footer__list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.74);
}
.footer a{ color: rgba(255,255,255,.86); text-decoration:none; }
.footer a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
/* ===== Interior background (non-home) — force dark, warm, premium ===== */
body:not([data-skin="home"]){
  background:
    radial-gradient(1200px 800px at 18% 10%, rgba(255,214,145,.07), transparent 58%),
    radial-gradient(1100px 820px at 85% 22%, rgba(120,180,120,.045), transparent 62%),
    radial-gradient(1400px 900px at 50% 78%, rgba(255,255,255,.03), transparent 60%),
    #0B1016;
  color: rgba(255,255,255,.92);
}
/* ===== Footer claro para skins corporativas nuevas ===== */
body[data-skin="catalog"] .footer,
body[data-skin="portfolio"] .footer,
body[data-skin="about"] .footer,
body[data-skin="quote"] .footer{
  width: 100%;
  margin: 10px 0 0;
  padding: 28px 0 18px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86));
}

body[data-skin="catalog"] .footer__inner,
body[data-skin="portfolio"] .footer__inner,
body[data-skin="about"] .footer__inner,
body[data-skin="quote"] .footer__inner{
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
}

body[data-skin="catalog"] .footer__grid,
body[data-skin="portfolio"] .footer__grid,
body[data-skin="about"] .footer__grid,
body[data-skin="quote"] .footer__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
}

body[data-skin="catalog"] .footer__name,
body[data-skin="portfolio"] .footer__name,
body[data-skin="about"] .footer__name,
body[data-skin="quote"] .footer__name{
  margin: 0;
  font-family: "Space Grotesk", system-ui;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0f172a;
}

body[data-skin="catalog"] .footer__desc,
body[data-skin="portfolio"] .footer__desc,
body[data-skin="about"] .footer__desc,
body[data-skin="quote"] .footer__desc{
  margin: 6px 0 0;
  color: rgba(15,23,42,.70);
  font-size: 14px;
  line-height: 1.5;
}

body[data-skin="catalog"] .footer__h,
body[data-skin="portfolio"] .footer__h,
body[data-skin="about"] .footer__h,
body[data-skin="quote"] .footer__h{
  margin: 0 0 8px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  letter-spacing: .14em;
  text-transform: uppercase;
}

body[data-skin="catalog"] .footer__list,
body[data-skin="portfolio"] .footer__list,
body[data-skin="about"] .footer__list,
body[data-skin="quote"] .footer__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: rgba(15,23,42,.76);
}

body[data-skin="catalog"] .footer a,
body[data-skin="portfolio"] .footer a,
body[data-skin="about"] .footer a,
body[data-skin="quote"] .footer a{
  color: #0f172a;
  text-decoration: none;
}

body[data-skin="catalog"] .footer a:hover,
body[data-skin="portfolio"] .footer a:hover,
body[data-skin="about"] .footer a:hover,
body[data-skin="quote"] .footer a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-skin="catalog"] .footer__bottom,
body[data-skin="portfolio"] .footer__bottom,
body[data-skin="about"] .footer__bottom,
body[data-skin="quote"] .footer__bottom{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: rgba(15,23,42,.54);
  font-size: 12px;
}

@media (max-width: 900px){
  body[data-skin="catalog"] .footer__grid,
  body[data-skin="portfolio"] .footer__grid,
  body[data-skin="about"] .footer__grid,
  body[data-skin="quote"] .footer__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  body[data-skin="catalog"] .footer__inner,
  body[data-skin="portfolio"] .footer__inner,
  body[data-skin="about"] .footer__inner,
  body[data-skin="quote"] .footer__inner{
    width: min(100% - 24px, 100%);
  }
}