/* ConstruMax · sitio de reconocimiento de marca (rediseño 2026-10-12).
   Minimalista: lienzo cálido, carbón y naranja del logotipo, una sola familia (Archivo, eje de ancho). */

:root {
  --carbon: #2B2B2B;          /* logotipo */
  --naranja: #F86701;         /* logotipo: acentos y botón principal (con texto carbón: 4.7:1) */
  --lienzo: #F5F3F0;          /* fondo cálido, teñido hacia el naranja */
  --papel: #FBFAF8;           /* secciones claras */
  --tinta: #2B2B2B;
  --tinta-2: #5C5853;         /* texto secundario: 6.4:1 sobre el lienzo */
  --linea: #DEDAD4;
  --oscuro: #232323;          /* contacto y pie */
  --oscuro-linea: #3A3836;
  --oscuro-tinta-2: #B9B4AD;  /* 8.6:1 sobre el oscuro */
  --error: #B42318;
  --error-osc: #FF8A7A;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --caja: 1180px;
  --margen: clamp(20px, 5vw, 48px);
  --sep: clamp(88px, 12vw, 160px);
  --radio: 14px;

  --t-1: clamp(2.2rem, 1.3rem + 4.2vw, 4.5rem);     /* portada */
  --t-2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);      /* títulos de sección */
  --t-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-grande: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --t-cuerpo: 1.0625rem;
  --t-chica: 0.875rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

.caja { width: 100%; max-width: calc(var(--caja) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--carbon); color: #fff; padding: 10px 14px; border-radius: 8px; }
.saltar:focus { left: 8px; }
.trampa, .sello { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- Tipografía ---------- */
h1, h2 {
  font-variation-settings: "wdth" 118;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); line-height: 1.02; }
h3 { font-size: var(--t-3); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.etiqueta, .sobretitulo {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-2);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.etiqueta::before, .sobretitulo::before {
  content: "";
  width: 10px; height: 11px;
  background: var(--naranja);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  flex: none;
}
.grande { font-size: var(--t-grande); line-height: 1.4; letter-spacing: -0.01em; max-width: 30ch; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.boton:active { transform: scale(0.97); }
.boton-acento { background: var(--naranja); color: var(--carbon); }
.boton-oscuro { background: var(--carbon); color: #fff; }
.boton-linea { border-color: var(--carbon); color: var(--carbon); }
.boton-chico { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
  .boton-acento:hover { background: #FF7A1A; }
  .boton-oscuro:hover { background: #000; }
  .boton-linea:hover { background: var(--carbon); color: #fff; }
}
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--lienzo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
}
.barra-fila { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img:first-child { width: 31px; height: auto; }
.logo img:last-child { width: 178px; height: auto; }
@media (max-width: 379px) { .logo img:first-child { width: 27px; } .logo img:last-child { width: 152px; } .barra-fila { gap: 20px; } }
@media (max-width: 359px) { .logo { gap: 8px; } .logo img:first-child { width: 23px; } .logo img:last-child { width: 128px; } .barra-fila { gap: 12px; } }
.barra-nav { display: none; gap: 28px; margin-left: auto; font-size: 0.9375rem; }
.barra-nav a { text-decoration: none; color: var(--tinta-2); padding: 8px 0; transition: color 160ms var(--ease-out); }
.barra .boton { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .barra-nav a:hover { color: var(--tinta); } }
@media (min-width: 860px) {
  .barra-nav { display: flex; }
  .barra .boton { margin-left: 8px; }
}

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; padding-top: clamp(56px, 9vw, 120px); }
.portada-reticula { position: relative; display: grid; gap: clamp(28px, 4vw, 44px); }

.portada h1 { position: relative; z-index: 1; }
/* Título de portada en líneas fijas («Marcas establecidas, / en línea a México, / EE. UU. y Canadá.») con el tamaño
   calculado para que la línea más larga quepa: en teléfono la primera se parte en dos (4 líneas), desde 700 px son 3.
   Medidas con Archivo wdth 118: «Marcas establecidas,» = 11.7 em; «en línea a México,» = 9.7 em; «EE. UU. y Canadá.» = 9.9 em */
.h1-linea { display: block; }
.portada h1 { font-size: calc((100vw - 2 * var(--margen)) / 10.4); }
@media (min-width: 700px) { .portada h1 { font-size: min(4.5rem, calc((100vw - 2 * var(--margen)) / 12.4)); } }
.portada-reticula > * { min-width: 0; }
.portada-pie { display: grid; gap: 28px; max-width: 520px; position: relative; z-index: 1; }
.portada-texto { font-size: 1.125rem; color: var(--tinta-2); max-width: 46ch; }
.portada-hex {
  position: absolute; z-index: 0;
  width: clamp(260px, 38vw, 520px); height: auto;
  right: calc(var(--margen) * -1 - 10vw); top: -40px;
  fill: none; stroke-linejoin: round;
}
.hex-a { stroke: var(--linea); stroke-width: 1.5; }
.hex-b { stroke: var(--linea); stroke-width: 1.5; }
.hex-c { stroke: var(--naranja); stroke-width: 3; }
@media (max-width: 699px) { .portada-hex { opacity: 0.35; top: auto; bottom: -60px; right: -150px; } }

.hechos {
  margin-top: clamp(64px, 9vw, 112px);
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
}
.hechos li { padding: 18px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.9375rem; }
.hechos span { color: var(--tinta); font-weight: 600; margin-right: 4px; }
@media (min-width: 700px) {
  .hechos { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}
@media (min-width: 1024px) {
  .hechos { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linea); }
  .hechos li { border-bottom: 0; padding: 22px 0; }
  .hechos span { display: block; margin: 0 0 2px; }
}

/* Entrada de la portada: superficie de marketing, 700 ms, escalonada 70 ms */
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entra-suave { from { opacity: 0; } to { opacity: 1; } }
.js .entra { animation: entra 700ms var(--ease-out) both; animation-delay: calc(var(--n) * 70ms + 60ms); }
@media (prefers-reduced-motion: reduce) {
  .js .entra { animation-name: entra-suave; animation-duration: 400ms; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--sep); }
.seccion-clara { background: transparent; }
.dos-col { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .dos-col { grid-template-columns: 5fr 7fr; gap: 64px; }
}
.cabeza { margin-bottom: clamp(40px, 6vw, 64px); max-width: 720px; }
.cabeza-fila { max-width: none; display: grid; gap: 20px; }
.cabeza-nota { color: var(--tinta-2); max-width: 44ch; }
@media (min-width: 960px) {
  .cabeza-fila { grid-template-columns: 5fr 7fr; gap: 64px; align-items: end; }
  .cabeza-nota { justify-self: end; text-align: right; }
}

/* Nosotros */
.nosotros-texto { display: grid; gap: 48px; }
.tres { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.tres div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.tres dt { font-weight: 650; font-size: 1.0625rem; }
.tres dd { color: var(--tinta-2); }
@media (min-width: 700px) {
  .tres div { grid-template-columns: 180px 1fr; gap: 24px; }
}

/* Ventajas */
.ventajas { counter-reset: v; border-top: 1px solid var(--carbon); }
.ventajas li {
  display: grid; gap: 8px;
  padding: 28px 0; border-bottom: 1px solid var(--linea);
}
.ventajas p { color: var(--tinta-2); max-width: 52ch; }
@media (min-width: 860px) {
  .ventajas li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding: 34px 0; align-items: baseline; }
}

/* Marcas */
.logos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
}
.logos li {
  min-width: 0;
  display: grid; place-items: center;
  height: clamp(104px, 9vw, 132px);
  padding: 0 14%;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.logos img {
  width: 100%; height: 64px; min-width: 0; max-height: 64px; object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.72;
  transition: opacity 200ms var(--ease-out);
}
.logos .l-milwaukee { max-height: 60px; }
.logos .l-dewalt, .logos .l-urrea { max-height: 38px; }
.logos .l-corev { max-height: 76px; }
.logos .l-nupec { max-height: 44px; opacity: 0.9; }
.logos .l-fanttik { max-height: 30px; opacity: 0.9; }
.logos .l-philips { max-height: 22px; }
.logos .l-lasko { max-height: 30px; }
.logos .l-osram { max-height: 26px; }
.logos .l-bosch { max-height: 28px; }
.logos .l-thermotek { max-height: 58px; }
.logos .l-royalcanin { max-height: 50px; }
.logo-texto {
  font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  letter-spacing: -0.02em; color: #6E6A65; text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) { .logos li:hover img { opacity: 1; } }
@media (min-width: 700px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } .logos li { padding: 0 12%; } }
.legal { margin-top: 20px; font-size: var(--t-chica); color: var(--tinta-2); }

/* Preguntas */
.preguntas { border-top: 1px solid var(--carbon); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-weight: 600; font-size: 1.125rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--carbon), var(--carbon)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--carbon), var(--carbon)) center / 1.5px 14px no-repeat;
  transition: transform 200ms var(--ease-out);
}
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 24px; color: var(--tinta-2); max-width: 60ch; }
.preguntas a { text-decoration-color: var(--naranja); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------- Contacto ---------- */
.contacto { background: var(--oscuro); color: #F4F2EF; padding-block: var(--sep); }
.contacto .etiqueta { color: var(--oscuro-tinta-2); }
.contacto-intro p:last-child { color: var(--oscuro-tinta-2); margin-top: 20px; max-width: 38ch; }
.formulario { display: grid; gap: 28px; }
.motivos { border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.motivos legend { font-weight: 600; margin-bottom: 14px; padding: 0; }
.motivo { position: relative; cursor: pointer; }
.motivo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.motivo span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1.5px solid var(--oscuro-linea);
  color: #E9E6E2; font-size: 0.9375rem;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.motivo:active span { transform: scale(0.97); }
.motivo input:checked + span { background: var(--naranja); border-color: var(--naranja); color: var(--carbon); font-weight: 600; }
.motivo input:focus-visible + span { outline: 3px solid var(--naranja); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .motivo:hover input:not(:checked) + span { border-color: #6A6560; } }

.campos { display: grid; gap: 20px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campo-ancho { grid-column: 1 / -1; } }
.campo { display: grid; gap: 8px; }
.campo label { font-size: 0.9375rem; font-weight: 600; }
.opcional { font-weight: 400; color: var(--oscuro-tinta-2); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%; font: inherit; font-size: 1rem; color: #F4F2EF;
  background: #2C2B2A; border: 1.5px solid var(--oscuro-linea); border-radius: 10px;
  padding: 12px 14px; min-height: 48px;
  transition: border-color 160ms var(--ease-out);
}
.campo textarea { resize: vertical; min-height: 132px; }
.campo textarea::placeholder { color: #8F8A84; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 0; border-color: var(--naranja); }
.campo.con-error input, .campo.con-error textarea { border-color: var(--error-osc); }
.casilla label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: #E9E6E2; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--naranja); flex: none; }
.casilla a, .contacto a { color: #fff; text-decoration-color: var(--naranja); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.error { color: var(--error-osc); font-size: 0.875rem; }
.enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.estado { color: var(--oscuro-tinta-2); font-size: 0.9375rem; }
.estado.ok { color: #fff; }
.formulario.enviado .campos, .formulario.enviado .motivos, .formulario.enviado .casilla, .formulario.enviado .enviar .boton { display: none; }
.formulario.enviado .estado { font-size: 1.125rem; }

/* ---------- Pie ---------- */
.pie { background: var(--oscuro); color: var(--oscuro-tinta-2); border-top: 1px solid var(--oscuro-linea); font-size: 0.9375rem; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-block: 36px 20px; }
.pie-fila nav { margin-left: auto; }
.pie a { color: #E9E6E2; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--naranja); } }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 0 32px; font-size: 0.8125rem; }
.credito a { color: inherit; text-decoration: underline; }
/* Logotipos claros: se oscurecen para que pesen igual que los demás */
.logos .l-fanttik, .logos .l-osram, .logos .l-philips { filter: grayscale(1) brightness(0.62); }
.logos .l-nupec { filter: grayscale(1) brightness(0.7); }

/* ---------- Aviso de privacidad ---------- */
.legal-cabeza { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--linea); }
.legal-cabeza h1 { font-size: var(--t-2); }
.legal-entrada { margin-top: 24px; max-width: 46ch; color: var(--tinta-2); }
.legal-cuerpo { display: grid; gap: 48px; padding-block: clamp(48px, 7vw, 88px) var(--sep); }
@media (min-width: 960px) { .legal-cuerpo { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; } .indice { position: sticky; top: 96px; align-self: start; } }
.indice-titulo { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 12px; }
.indice ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 0.9375rem; color: var(--tinta-2); }
.indice a { color: var(--tinta-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .indice a:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--naranja); } }
.prosa { max-width: 68ch; }
.clausula { padding-block: 32px; border-top: 1px solid var(--linea); scroll-margin-top: 96px; }
.clausula:first-child { border-top: 1px solid var(--carbon); }
.prosa h2 { font-size: var(--t-3); font-variation-settings: "wdth" 110; line-height: 1.25; letter-spacing: -0.015em; display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.clausula-num { font-size: 0.875rem; color: var(--tinta-2); font-variation-settings: "wdth" 100; font-weight: 600; min-width: 1.5em; }
.prosa h3 { font-size: 1.0625rem; margin: 22px 0 8px; }
.prosa p + p { margin-top: 12px; }
.prosa ul, .prosa ol { margin: 8px 0 0; padding-left: 1.25em; display: grid; gap: 6px; list-style: revert; }
.prosa a { text-decoration-color: var(--naranja); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prosa .boton { margin-top: 18px; text-decoration: none; }
.bloque, .arco { margin-top: 14px; padding: 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.arco-titulo { font-weight: 650; margin-bottom: 8px; }
.clave { font-weight: 600; background: color-mix(in srgb, var(--naranja) 16%, transparent); padding: 0 4px; border-radius: 4px; }
.fecha-documento { margin-top: 32px; color: var(--tinta-2); font-size: var(--t-chica); }
.prosa ul + p, .prosa ol + p, .prosa .arco + p { margin-top: 12px; }

/* ---------- Mapa de fondo (animación de toda la página, web/mapa.js) ---------- */
.mapa-fondo { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
.barra { z-index: 20; }
main, .contacto, .pie { position: relative; z-index: 1; }
.portada { overflow: visible; }
/* La franja de datos y los logotipos van sobre el mapa: fondo propio para que se lean */
.hechos { background: color-mix(in srgb, var(--lienzo) 90%, transparent); }
.logos { background: color-mix(in srgb, var(--lienzo) 92%, transparent); }
@media (min-width: 1024px) {
  .portada h1, .portada .sobretitulo, .portada-pie { max-width: 560px; }
  .portada h1 { max-width: none; font-size: clamp(2.75rem, 4.1vw, 4.25rem); }
  /* Ventajas a la izquierda: el mapa ocupa la derecha */
  #ventajas .cabeza, .ventajas { max-width: 600px; }
  .ventajas li { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
}
/* Con el mapa activo, el contacto y el pie son transparentes: el canvas pinta su fondo oscuro y el mapa sigue hasta el final */
.mapa-activo .contacto, .mapa-activo .pie { background: transparent; }
.mapa-activo .campo input[type="text"], .mapa-activo .campo input[type="email"], .mapa-activo .campo input[type="tel"], .mapa-activo .campo textarea {
  background: color-mix(in srgb, #2C2B2A 92%, transparent);
}

/* ---------- Escritorio: todo el contenido a la izquierda, el mapa fijo a la derecha ---------- */
@media (min-width: 1024px) {
  #nosotros .dos-col, #preguntas .dos-col, #contacto .dos-col { grid-template-columns: minmax(0, 640px); gap: 40px; }
  .cabeza-fila { grid-template-columns: 1fr; max-width: 640px; }
  .cabeza-nota { justify-self: start; text-align: left; }
  .logos { max-width: 640px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos li { padding: 0 14%; }
  .legal { max-width: 640px; }
  .hechos { max-width: 640px; grid-template-columns: repeat(2, 1fr); column-gap: 32px; border-bottom: 0; }
  .hechos li { border-bottom: 1px solid var(--linea); padding: 18px 0; }
  .hechos span { display: inline; margin: 0 4px 0 0; }
}