/* =============================================================
   BASE.CSS — Cliff and Company
   Variables, reset, tipografía, colores, botones, utilidades
   compartidas por todas las pantallas.
   ============================================================= */

/* ---------- 1. Variables globales ---------- */
:root {
  /* Colores de marca */
  --color-brand-yellow: #ffce00;
  --color-brand-yellow-alt: #ffc000;
  --color-black: #000000;
  --color-near-black: #1b1b1a;
  --color-white: #ffffff;
  --color-off-white: #f7f7f8;
  --color-gray-text: #c2c3c9;
  --color-gray-muted: #727176;
  --color-dark-text: #211915;
  --color-blue-accent: #137daf;

  /* Tipografía */
  --font-heading: 'Petrov Sans', Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-alt: 'Inter', Arial, sans-serif;
  --font-display: 'Impact', Arial, sans-serif;

  /* Espaciado reutilizable */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Breakpoints (referencia, usados en media queries de home.css) */
  --bp-desktop: 1024px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--color-white);
  font-family: var(--font-heading);
  color: var(--color-black);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

/* ---------- 3. Tipografía global ---------- */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Evita que texto largo desborde su contenedor en tablet/mobile */
@media (max-width: 1023px) {
  p,
  h2,
  h3 {
    overflow-wrap: break-word;
    white-space: normal !important;
  }
}

/* ---------- 4. Botones reutilizables ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: fit-content;
  border: none;
  border-radius: 999px;
  background-color: var(--color-brand-yellow);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.btn--glow {
  box-shadow: 0 0 40px rgba(255, 206, 0, 0.6);
}

/* ---------- 5. Utilidades compartidas ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-until-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .visually-hidden-until-desktop {
    display: block;
  }
}

/* ---------- 6. Fragmentos vectoriales posicionados ----------
   Patrón compartido para las piezas decorativas exportadas de Figma
   (logotipos e insignias compuestos por múltiples piezas vectoriales
   superpuestas). Cada instancia fija su geometría mediante variables
   CSS (--t/--r/--b/--l) en el atributo style del elemento; la clase
   sólo aporta la estructura y el comportamiento comunes. */
.fragment {
  position: absolute;
  top: var(--t);
  right: var(--r);
  bottom: var(--b);
  left: var(--l);
}

.fragment__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.fragment--card .fragment__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.fragment--text,
.fragment--text-inherit {
  overflow-wrap: normal;
  word-break: break-word;
  line-height: normal;
  font-style: normal;
  white-space: nowrap;
}

.fragment--text {
  font-family: var(--ff), sans-serif;
  font-size: var(--fs);
  font-weight: var(--fw);
  color: var(--fc);
}

.fragment--text-inherit {
  font-family: var(--ff, inherit), sans-serif;
  font-size: var(--fs, inherit);
  font-weight: var(--fw, inherit);
  color: var(--fc, inherit);
}

.fragment--text-block {
  font-family: var(--ff), sans-serif;
  font-size: var(--fs);
  font-weight: var(--fw);
  color: var(--fc);
  white-space: pre;
  word-break: break-word;
}

.fragment--text-block p {
  margin: 0;
  line-height: 1.1554;
}

.fragment--bleed-x {
  overflow: visible;
}

.fragment--bleed-x .fragment__img {
  right: var(--bleed);
  left: var(--bleed);
  width: calc(100% - (2 * var(--bleed)));
}

.fragment--bleed-y {
  overflow: visible;
}

.fragment--bleed-y .fragment__img {
  top: var(--bleed);
  bottom: var(--bleed);
  height: calc(100% - (2 * var(--bleed)));
}

/* Piezas "volteadas"/rotadas: usan container queries para escalar
   la pieza interior en proporción exacta a su contenedor posicionado. */
.fragment--flip {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragment__flip-inner {
  flex: none;
}

.fragment--flip-1 .fragment__flip-inner {
  width: 100cqw;
  height: 100cqh;
  transform: scaleX(-1);
}

.fragment--flip-2 .fragment__flip-inner {
  width: 100cqw;
  height: 100cqh;
  transform: rotate(-180deg) scaleX(-1);
}

.fragment--flip-3 .fragment__flip-inner {
  width: 100cqh;
  height: 100cqw;
  transform: rotate(90deg) scaleX(-1);
}

.fragment--flip-4 .fragment__flip-inner {
  width: 100cqh;
  height: 100cqw;
  transform: rotate(-90deg) scaleX(-1);
}

.fragment--flip-5 .fragment__flip-inner {
  width: hypot(43.5244cqw, -52.2576cqh);
  height: hypot(-56.4756cqw, -47.7424cqh);
  transform: rotate(130deg) scaleX(-1);
}

.fragment--flip-6 .fragment__flip-inner {
  width: hypot(66.2122cqw, -1.02806cqh);
  height: hypot(-33.7878cqw, -98.9719cqh);
  transform: rotate(175.84deg) scaleX(-1);
}

.fragment--flip-7 .fragment__flip-inner {
  width: hypot(-52.4122cqw, -47.6548cqh);
  height: hypot(-47.5878cqw, 52.3452cqh);
  transform: rotate(42.21deg) skewX(0.13deg) scaleX(-1);
}

/* ---------- 7. Site Header y Site Footer (compartidos entre pantallas) ---------- */
/* ===== Site Header ===== */
.site-header {
  position: relative;
  background-color: var(--color-black);
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 4.05%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__logo {
  position: relative;
  width: 151px;
  height: 38px;
}

.site-header__logo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.site-header__wordmark {
  line-height: 1.2;
}

.site-header__wordmark p {
  font-family: var(--font-heading);
  font-weight: bold;
  color: var(--color-white);
}

.site-header__wordmark p:first-child {
  font-size: 12px;
}

.site-header__wordmark p:last-child {
  font-size: 8px;
}

.site-header__brand-accent {
  color: var(--color-brand-yellow);
}

.site-header__nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2.8vw;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  color: var(--color-white);
  text-transform: uppercase;
}

.site-header__nav-item {
  position: relative;
  padding-bottom: var(--space-1);
}

.site-header__nav-item--active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid var(--color-brand-yellow);
}

.site-header__rule {
  height: 2px;
  background-color: var(--color-brand-yellow);
}

@media (max-width: 1023px) {
  .site-header__nav {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: var(--space-3);
    padding: var(--space-3) 4.05%;
  }
  .site-header__nav-list {
    flex-wrap: wrap;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    font-size: 11px;
  }
  .site-header__nav-item--active::after {
    display: none;
  }
}

/* ===== Site Footer ===== */
.site-footer {
  position: relative;
  width: 100%;
  height: 397px;
  overflow-x: visible;
  background-color: var(--color-black);
}

.site-footer__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-footer__inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  padding-top: 43px;
  padding-left: 434px;
}

.site-footer__col {
  flex-shrink: 0;
}

.site-footer__col--brand {
  width: 373px;
}

.site-footer__col--productos {
  width: 237px;
}

.site-footer__col--contact {
  width: 299px;
}

.site-footer__col--certs {
  flex: 1 1 auto;
}

.site-footer__logo-space {
  width: 271px;
  height: 38px;
}

.site-footer__tagline {
  margin-top: 1px;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 13px;
  color: var(--color-white);
}

.site-footer__desc {
  margin-top: 69px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.16;
  color: var(--color-white);
}

.site-footer__desc + .site-footer__desc {
  margin-top: 15px;
}

.site-footer__heading {
  margin-top: 0;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 12px;
  color: var(--color-brand-yellow);
}

.site-footer__heading--community {
  margin-top: 21px;
}

.site-footer__heading--contacto {
  margin-top: 18px;
}

.site-footer__heading--social {
  margin-top: 29px;
}

.site-footer__list {
  margin-top: 13px;
}

.site-footer__list li {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 17px;
  color: var(--color-white);
}

.site-footer__link {
  margin-top: 10px;
  font-family: var(--font-alt);
  font-size: 12px;
  color: var(--color-white);
}

.site-footer__address {
  margin-top: 13px;
}

.site-footer__address p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 17px;
  color: var(--color-white);
}

.site-footer__contact-line {
  margin-top: 8px;
  padding-left: 24px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 17px;
  color: var(--color-white);
}

.site-footer__contact-line--phone {
  margin-top: 11px;
}

.site-footer__social-space {
  margin-top: 15px;
  height: 54px;
}

.site-footer__social-link {
  position: absolute;
  top: var(--t);
  right: var(--r);
  bottom: var(--b);
  left: var(--l);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  color: var(--color-near-black);
}

.site-footer__social-link svg {
  width: 15px;
  height: 15px;
}

.site-footer__cert-space {
  margin-top: 29px;
  width: 178px;
  height: 221px;
}

.site-footer__legal {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  background-color: var(--color-brand-yellow);
  text-align: center;
}

.site-footer__legal p {
  max-width: 1229px;
  padding: 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-near-black);
}

@media (max-width: 1023px) {
  .site-footer {
    overflow-x: auto;
  }
  .site-footer__decor,
  .site-footer__inner,
  .site-footer__legal {
    min-width: 1996px;
  }
}