/* CJTA Lubricantes — Reset, contenedor de iconos y tipografía base */

/* ========== RESET ========== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--navy);
  color:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* El <picture> no genera caja propia: el <img> hereda el layout del
   contenedor, así las reglas existentes (.prod-img img, .hv-bottle…) siguen
   aplicando sin cambios tras envolver las imágenes para servir WebP. */
picture{display:contents}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}

.i-xs{width:14px;height:14px}
.i-sm{width:18px;height:18px}
.i-md{width:24px;height:24px}

/* ========== SKIP LINK (accesibilidad) ========== */
.skip-link{
  position:absolute;left:8px;top:-56px;z-index:300;
  background:var(--gold);color:var(--navy);
  font-family:var(--ff-body);font-weight:600;font-size:13px;
  letter-spacing:.04em;
  padding:10px 18px;border-radius:2px;
  transition:top .2s ease;
}
.skip-link:focus{top:8px}

/* ========== FOCO VISIBLE (accesibilidad — WCAG 2.4.7) ========== */
/* Anillo de foco dorado para navegación por teclado en todo elemento
   interactivo. Los inputs del formulario conservan su indicador propio
   (borde dorado) por tener una regla más específica. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ========== TYPOGRAPHY ========== */
.display-title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(40px, 6vw, 92px);
  line-height:1.02;
  letter-spacing:-.025em;
  color:var(--offwhite);
  margin:0;
  text-wrap:balance;
}
.display-title em{
  font-style:italic;
  font-weight:500;
}
.display-title-dark{color:var(--offwhite)}

.t-gold-italic{
  font-style:italic;
  background:linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.t-red-italic{
  font-style:italic;
  color:var(--red);
}

.eyebrow{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(245,240,232,.55);
  margin-bottom:28px;
}
.eyebrow-dark{color:rgba(245,240,232,.55)}
.eb-num{
  font-family:var(--ff-mono);
  font-weight:500;
  letter-spacing:0;
  color:var(--gold);
}
.eyebrow-dark .eb-num{color:var(--gold)}

/* ========== REVEAL ANIMATIONS (disabled — content visible by default) ========== */
[data-reveal]{
  opacity:1;
  transform:none;
}