/* =========================================================
   TOKENS.CSS — Grupo 3M (3M Virutas / Transportes 3M)
   Fuente única de verdad para colores, tipografía y
   componentes compartidos entre las dos páginas del sitio.
   Ver docs/design-system.md para las reglas de uso.
   Copia exacta de docs/tokens.css; únicas rutas ajustadas a
   root-absolutas (/img/...) para que funcionen igual en local
   y en producción.
   ========================================================= */

:root{
  /* Color */
  --bg:        #F7F5EF;   /* fondo claro a ancho completo (nunca blanco puro a ancho completo) */
  --white:     #FFFFFF;   /* solo para cajas contenidas: formulario, tarjetas */
  --ink:       #1C1B18;   /* texto principal, logos */
  --sub:       #5B5952;   /* texto secundario / párrafos */
  --border:    #E1DBCB;   /* separadores sobre fondo claro */
  --footer-bg: #0B0B0B;   /* footer negro */

  --accent:       #652428; /* bordó — color de marca único, compartido por las dos unidades */
  --accent-hover: #8A3236; /* variante clara del bordó, para hover / active de botones */
  --accent-2:     #BA9678; /* tostado/tierra — acento secundario (badges, detalles, textos sobre bordó) */
  --accent-ink:   #F7F1E6; /* texto sobre fondos bordó */

  /* Tipografía */
  --font-base: 'Montserrat', sans-serif;
  --fw-body:    400; /* párrafos, texto de formulario */
  --fw-ui:      600; /* botones, nav, labels, eyebrows */
  --fw-heading: 800; /* h1 / h2 — siempre Montserrat 800 */

  /* Forma */
  --radius-pill:  999px; /* botones: siempre totalmente redondeados */
  --radius-card:  16px;  /* tarjetas (formulario, cajas blancas) */
  --radius-input: 10px;  /* inputs, selects, textarea */

  /* Layout */
  --content-max: 1200px; /* ancho máximo de contenido: header, texto de heroes, secciones, footer */
  --header-h: 93px;       /* alto del header sticky (16px pad + 60px logo + 1px borde); usado por scroll-padding-top y por el alto del hero */

  /* Sección oscura (ronda 2): fondo alternativo para cortar el ritmo entre
     franjas claras sin repetir el negro puro del footer (--footer-bg). */
  --section-dark: #1A1512;

  /* Texturas de fondo a ancho completo. Rutas relativas al archivo CSS
     (que vive en /css/), por eso ../img/ — así el sitio funciona igual en la
     raíz del dominio o dentro de una subcarpeta. */
  --texture-light: url('../img/textura-fondo-claro.png');
  --texture-dark:  url('../img/textura-fondo-bordo.png');
}

/* ---------- Reset base ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font-base);
  font-weight:var(--fw-body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-base);font-weight:var(--fw-heading);line-height:1.15;}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- Header / nav (compartido en las dos páginas) ---------- */
/* La barra ocupa el 100% del ancho; su contenido (.header-inner, en site.css)
   queda centrado en --content-max. Posición sticky también en site.css. */
header{
  background:var(--bg);border-bottom:1px solid var(--border);
}
.logo-mark{height:60px;flex-shrink:0;}
nav{display:flex;align-items:center;gap:26px;margin-right:auto;}
nav a{
  font-family:var(--font-base);font-weight:var(--fw-ui);font-size:14px;
  color:var(--sub);text-decoration:none;padding-bottom:4px;
  border-bottom:2px solid transparent;
}
nav a.active{color:var(--ink);border-color:var(--accent);}
nav a:hover{color:var(--ink);}

/* ---------- Botones: siempre pastilla completa ---------- */
.btn-primary, .btn-secondary, .nav-cta, .btn-submit, .btn-light{
  font-family:var(--font-base);font-weight:var(--fw-ui);font-size:14.5px;
  padding:13px 26px;border-radius:var(--radius-pill);
  cursor:pointer;white-space:nowrap;border:none;
  transition:filter .15s, background-color .15s;
}
.btn-primary, .nav-cta, .btn-submit, .btn-light{
  background:var(--accent);color:var(--accent-ink);
}
.btn-primary:hover, .nav-cta:hover, .btn-submit:hover, .btn-light:hover{
  background:var(--accent-hover);
}
.btn-secondary{
  background:transparent;color:var(--accent-2);border:1.5px solid var(--accent-2);
}
.btn-secondary:hover{color:var(--ink);border-color:var(--ink);}
/* variante para botones sobre foto oscura (hero): invierte a claro */
.on-photo .btn-secondary{color:var(--accent-ink);border-color:rgba(247,241,230,.55);}
.on-photo .btn-secondary:hover{border-color:var(--accent-ink);}

/* ---------- Eyebrow / etiqueta con fondo sólido (siempre legible) ---------- */
.eyebrow{
  display:inline-block;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-base);font-weight:var(--fw-ui);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 16px;border-radius:var(--radius-pill);margin-bottom:18px;
}
.eyebrow-plain{
  font-family:var(--font-base);font-weight:var(--fw-ui);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}

/* ---------- Tarjetas y formulario (única zona con fondo blanco) ---------- */
.card, .form-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-family:var(--font-base);font-weight:var(--fw-ui);font-size:13px;color:var(--ink);}
.field input, .field select, .field textarea{
  font-family:var(--font-base);font-weight:var(--fw-body);font-size:14.5px;color:var(--ink);
  padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-input);
  background:var(--white);outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical;font-family:inherit;}

/* ---------- Utilidades de textura a ancho completo ---------- */
.bg-texture-light{background-image:var(--texture-light);background-repeat:repeat;background-size:700px 700px;}
.bg-texture-dark{background-image:var(--texture-dark);background-repeat:repeat;background-size:700px 700px;}

/* ---------- Franja de contacto con decoración orgánica al borde izquierdo ---------- */
/* Horizontal la da .form-wrap (mismo criterio que .wrap): así la decoración
   izquierda queda pegada al borde real del viewport, sin margen. */
.form-section{position:relative;overflow:hidden;padding:72px 0;}
.form-decor-left{
  position:absolute;left:0;bottom:0;width:300px;height:auto;
  z-index:1;pointer-events:none;user-select:none;
}
.form-wrap{position:relative;z-index:2;max-width:var(--content-max);margin:0 auto;padding:0 40px;}

/* ---------- Footer negro + decoraciones que salen de él ---------- */
.site-footer{
  position:relative;background:var(--footer-bg);color:rgba(255,255,255,.72);
  padding:56px 40px 36px;
}
.footer-inner{
  /* max-width/centrado los da .wrap (misma clase en el HTML) para
     compartir el contenedor de --content-max con el resto del sitio */
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;
}
.footer-inner .foot-logo{height:52px;filter:brightness(0) invert(1);} /* logo negro -> blanco sobre footer */
.foot-col h4{
  font-family:var(--font-base);font-weight:var(--fw-ui);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.07em;color:#fff;margin-bottom:12px;
}
.foot-col a, .foot-col p{
  display:block;font-size:14px;line-height:1.95;color:rgba(255,255,255,.7);text-decoration:none;
}
.foot-col a:hover{color:#fff;}
.foot-slogan{font-family:var(--font-base);font-weight:var(--fw-body);font-size:18px;color:#fff;max-width:16ch;}
.foot-bottom{
  /* max-width/centrado + padding lateral los da .wrap (misma clase en el
     HTML). El padding-top va !important porque el shorthand `padding:0 40px`
     de .wrap lo pisaba a 0 (misma especificidad, .wrap gana por orden). */
  margin-top:26px;position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.12);padding-top:28px !important;
  font-size:12.5px;color:rgba(255,255,255,.45);
}

/* Árbol de eucalipto: brota del footer hacia arriba, en el margen derecho
   reservado (fuera de la columna de contenido, ver .footer-inner en
   site.css). Tamaño/posición final (clamp responsivo, oculto <900px) en
   site.css junto con el resto de las reglas de --content-max. */
.footer-decor-tree{
  position:absolute;right:16px;bottom:0;height:280px;width:auto;
  z-index:3;pointer-events:none;user-select:none;
}
/* Camión (2x): apoyado sobre el borde superior del footer, anclado a la
   derecha y cortado por el borde de la pantalla a propósito
   (overflow-x:hidden del body lo recorta) — la cabina (lado izquierdo del
   PNG) queda entera visible; se recorta la punta de la caja/acoplado.
   Oculto por completo <900px (ver site.css), así que estos valores solo
   importan en pantallas donde ya se ve completo. (Transportes 3M) */
.footer-decor-truck{
  position:absolute;right:-110px;bottom:100%;width:468px;height:auto;
  /* translateY compensa el margen transparente interno de la foto bajo las
     ruedas, para que se superpongan al negro del footer y no floten. Escala
     con el tamaño (se redujo 50% junto con el ancho y el offset derecho). */
  transform:translateY(40px);
  z-index:3;pointer-events:none;user-select:none;
}

/* ---------- Responsive ---------- */
/* El layout responsive del header/nav vive en site.css (menú hamburguesa).
   Se quitó la vieja regla nav{order:3}: en el panel mobile (flex) mandaba el
   <nav> después del CTA y dejaba "Pedir cotización" arriba de todo. */