/**
 * Estilos de la página. Consume los tokens de tokens.css.
 *
 * Orden: reset → tipografía compartida → header → hero → cada sección
 * en el mismo orden en que aparece en la página → footer → utilidades.
 * Los breakpoints van junto al componente que modifican, no todos juntos
 * al final, para que se lea cada pieza completa de un jalón.
 */

/* ── Reset ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* <picture> no debe maquetar: la que se coloca es la imagen. Con display:contents
   el <source> queda expuesto como hijo directo y, dentro de una grilla, se cuela
   como celda vacía y descuadra el acomodo. Hay que ocultarlo a mano. */
picture { display: contents; }
picture > source { display: none; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Enlace para saltar la navegación con el teclado. Solo aparece al enfocarlo. */
.skip {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--orange); color: var(--ink);
  padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── Tipografía compartida ──────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange);
}

.h2 {
  font-family: var(--display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  line-height: .92; letter-spacing: -.01em;
}

.lede { max-width: 46ch; color: var(--muted); font-size: 1.0625rem; }

/* ── Cinta reflectante ──────────────────────────────────────────────
   El mismo motivo diagonal que traen los remolques en la caja.
   Separa secciones sin necesidad de una línea más. */
.tape {
  height: 10px;
  background: repeating-linear-gradient(115deg,
    var(--orange) 0 22px, var(--ink) 22px 26px,
    var(--paper-2) 26px 48px, var(--ink) 48px 52px);
}

/* ── Header ─────────────────────────────────────────────────────── */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgb(10 11 13 / .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr-in {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--max-w); margin-inline: auto;
  padding: .7rem var(--pad);
}

.brand { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; text-decoration: none; }
.brand img { width: 64px; height: auto; flex: none; }
.brand b {
  display: block;
  font-family: var(--display); font-weight: 900; font-size: 1.0625rem;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.brand span span {
  display: block; margin-top: .28rem;
  font-family: var(--mono); font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hdr-nav { display: none; gap: 1.6rem; }
.hdr-nav a {
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.hdr-nav a:hover { color: var(--paper-2); }

/* Los idiomas son enlaces a páginas reales, no un toggle de JavaScript:
   así cada idioma tiene su propia URL y los buscadores lo pueden indexar. */
.lang {
  display: flex; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.lang a {
  padding: .4rem .55rem; text-decoration: none;
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; color: var(--muted);
}
.lang a:hover { color: var(--paper-2); }
.lang a[aria-current] { background: var(--orange); color: var(--ink); }

.hdr-tel {
  display: none; align-items: center; gap: .5rem;
  background: var(--orange); color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 1.125rem;
  letter-spacing: .01em; padding: .5rem .9rem; border-radius: var(--radius);
}
.hdr-tel:hover { background: var(--paper-2); }

@media (min-width: 1000px) {
  .hdr-nav { display: flex; }
  .hdr-tel { display: inline-flex; }
}

/* ── Hero ───────────────────────────────────────────────────────────
   Ilustración a sangre con el texto encima. Es de noche a propósito: el
   titular dice la hora real de Dallas, y una foto de mediodía lo
   contradecía cada madrugada. */

/* En móvil la ilustración es un panel propio, no un fondo. Recortar una
   imagen apaisada al alto de un hero de 375px de ancho deja ver una tira
   vertical donde no se entiende nada. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.hero-bg img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 52% 62%;
}

.hero-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  /* El alto del hero lo marca este relleno, y el alto decide cuánto se
     recorta la ilustración a los lados. Con más aire, el remolque cargado
     —que es el sujeto— se sale del encuadre. */
  padding: clamp(2.75rem, 6vw, 5rem) var(--pad);
}
.hero-copy { display: flex; flex-direction: column; max-width: 43rem; }

.status {
  display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start;
  background: rgb(21 23 27 / .85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: var(--radius); padding: .5rem .85rem;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.status .sep { color: var(--line); }
.status .zone { color: var(--muted); }

.dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--signal);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgb(53 224 127 / .55); }
  70%  { box-shadow: 0 0 0 9px rgb(53 224 127 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(53 224 127 / 0); }
}

@media (max-width: 460px) {
  .status { font-size: .625rem; letter-spacing: .11em; }
  .status .sep, .status .zone { display: none; }
}

/* El reloj en vivo dentro del titular. Es el elemento que carga toda la
   propuesta del negocio: a las 3am el propio título lo demuestra. */
h1 {
  margin-top: 1.5rem;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.9rem, 8vw, 6rem);
  line-height: .84; letter-spacing: -.015em;
  text-shadow: 0 2px 40px rgb(10 11 13 / .6);
}
h1 .time {
  display: block; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
h1 .time em { font-style: normal; font-size: .5em; letter-spacing: .02em; }

.hero-sub {
  margin-top: 1.5rem; max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: #C8CDD4;
  text-shadow: 0 1px 20px rgb(10 11 13 / .8);
}
.hero-sub b { color: var(--paper-2); font-weight: 600; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2rem;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .11em; text-transform: uppercase; color: #9BA2AB;
}
.hero-meta i { color: var(--orange); font-style: normal; margin-right: .4rem; }

/* En pantalla ancha sí cabe a sangre: la ilustración pasa a ser el fondo y
   el texto se le monta encima sobre un velo lateral, con el camión limpio
   a la derecha. */
@media (min-width: 1000px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: clamp(620px, calc(100svh - 78px), 820px);
  }
  .hero-bg img {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 60%;
  }
  .hero-inner {
    padding-block: clamp(2rem, 5vh, 3.5rem);
  }
  .hero-copy {
    max-width: min(43rem, 54vw);
  }
  .hero-copy h1 { margin-top: 1.1rem; }
  .hero-sub { margin-top: 1.25rem; max-width: 39ch; }
  .hero-copy .cta-row { margin-top: 1.5rem; }
  .hero-meta { margin-top: 1.4rem; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: min(58rem, 58vw);
    background: linear-gradient(90deg, rgb(10 11 13 / .34), transparent);
    pointer-events: none;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(94deg, rgb(10 11 13 / .82) 0%, rgb(10 11 13 / .7) 28%, rgb(10 11 13 / .38) 43%, rgb(10 11 13 / .09) 64%, rgb(10 11 13 / .03) 86%, rgb(10 11 13 / .14) 100%),
      linear-gradient(to bottom, rgb(10 11 13 / .3) 0%, transparent 22%, transparent 72%, rgb(10 11 13 / .58) 100%);
  }
}

/* ── Marco de sección ───────────────────────────────────────────── */

section { padding: var(--band) var(--pad); }
.wrap { max-width: var(--max-w); margin-inline: auto; }

.on-light { background: var(--paper); color: var(--ink); }
.on-light .eyebrow { color: var(--orange-deep); }
.on-light .lede { color: var(--muted-dark); }

.sec-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 3rem; }
}

/* ── Servicios ──────────────────────────────────────────────────── */

.svc { display: grid; gap: 1px; background: var(--line); }
.svc-col { background: var(--ink); padding: 1.75rem 1.5rem 2rem; }

/* Los iconos son máscaras de transparencia, no imágenes de color: el naranja
   lo pone el CSS, así que siguen el token de marca y sirven igual sobre fondo
   claro u oscuro. */
.svc-icon {
  display: block; width: 56px; height: 56px; margin-bottom: 1.25rem;
  background: var(--orange);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.svc-icon[data-icon="icon-residential"] { -webkit-mask-image: url("/img/icon-residential.png"); mask-image: url("/img/icon-residential.png"); }
.svc-icon[data-icon="icon-commercial"]  { -webkit-mask-image: url("/img/icon-commercial.png");  mask-image: url("/img/icon-commercial.png"); }
.svc-icon[data-icon="icon-heavy"]       { -webkit-mask-image: url("/img/icon-heavy.png");       mask-image: url("/img/icon-heavy.png"); }
.svc-icon[data-icon="icon-debris"]      { -webkit-mask-image: url("/img/icon-debris.png");      mask-image: url("/img/icon-debris.png"); }

.svc-col h3 {
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 2px solid var(--orange);
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1; letter-spacing: .01em;
}
.svc-col ul { display: grid; gap: .85rem; }
.svc-col li {
  display: flex; gap: .75rem; align-items: baseline;
  font-size: .9375rem; color: var(--list-dim);
}
.svc-col li::before {
  content: ""; width: 7px; height: 7px; flex: none;
  transform: translateY(-1px);
  background: var(--orange);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (min-width: 720px)  { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .svc { grid-template-columns: repeat(4, 1fr); } }

/* ── Cómo funciona ──────────────────────────────────────────────── */

/* Los pasos llegan hasta el borde de la banda clara, sin aire abajo. */
.how { padding-inline: 0; padding-bottom: 0; }
.how-head { padding-inline: var(--pad); }

.steps {
  display: grid; gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}
.step { background: var(--paper); padding: 2rem 1.5rem 2.25rem; }
.step-n {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange-deep);
}
.step h3 {
  margin: .85rem 0 .7rem;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: .95;
}
.step p { max-width: 34ch; font-size: .9375rem; color: var(--muted-dark); }

@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ── El equipo ──────────────────────────────────────────────────── */

.rig { display: grid; gap: 2.5rem; }
.rig-h2 { margin: 1rem 0 1.25rem; }

.rig-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rig-shots img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--steel); border: 1px solid var(--line);
}
/* La primera foto es la del conjunto completo: cruza las dos columnas. */
.rig-shots picture:first-of-type img { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

.specs { margin-top: 2rem; border-top: 1px solid var(--line); }
.specs li {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.specs .k {
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.specs .v {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; text-align: right; letter-spacing: .01em;
}
.specs .v.hi { color: var(--orange); }

@media (min-width: 1000px) {
  .rig { grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: center; }
}

/* ── Precios ────────────────────────────────────────────────────── */

/* El vecindario nocturno convierte la sección completa en una escena. Las
   tarjetas flotan encima como un catálogo de los tamaños de carga. */
#pricing {
  position: relative; isolation: isolate;
  color: var(--paper);
  background-color: var(--ink);
  background-image: image-set(
    url("/img/pricing-backdrop.webp") type("image/webp"),
    url("/img/pricing-backdrop.jpg") type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#pricing::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgb(10 11 13 / .76), rgb(10 11 13 / .5) 45%, rgb(10 11 13 / .86)),
    linear-gradient(90deg, rgb(10 11 13 / .34), transparent 45%, rgb(10 11 13 / .25));
}
#pricing .lede { color: var(--body-dim); }

/* Cada nivel conserva el precio como texto editable y usa una foto para que
   la cantidad de carga se entienda de un vistazo en ambos idiomas. */
.price-carousel {
  position: relative;
  width: min(100%, 46rem);
  margin-inline: auto;
}
.load {
  display: flex; gap: 1rem; overflow-x: auto;
  padding: .25rem 0 1.25rem;
  scroll-snap-type: x mandatory; scroll-padding-inline: .25rem;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.load::-webkit-scrollbar { display: none; }
.tier {
  display: grid; align-content: start; overflow: hidden;
  flex: 0 0 100%;
  scroll-snap-align: center;
  color: var(--paper); background: rgb(21 23 27 / .94);
  border: 1px solid rgb(255 255 255 / .13);
  box-shadow: 0 18px 55px rgb(0 0 0 / .42);
  backdrop-filter: blur(12px);
}
.tier-photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 58%;
  background: var(--ink); border-bottom: 4px solid var(--orange);
}
.tier-copy { display: grid; gap: .35rem; align-content: start; padding: 1.5rem 1.35rem 1.75rem; }

.carousel-btn {
  display: none;
  position: absolute; top: 50%; z-index: 2;
  width: 48px; height: 48px; place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgb(255 255 255 / .18); border-radius: 50%;
  background: var(--orange); color: var(--ink); cursor: pointer;
  box-shadow: 0 10px 28px rgb(0 0 0 / .5);
}
.price-carousel[data-ready] .carousel-btn { display: grid; }
.carousel-btn svg { width: 23px; height: 23px; }
.carousel-btn:hover { background: var(--paper-2); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-prev { left: -24px; }
.carousel-next { right: -24px; }

/* Los <defs> compartidos del diagrama: existen para que los <use> los
   encuentren, pero no deben ocupar espacio ni leerse. */
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.rig-diagram { width: 100%; height: auto; color: var(--ink); }
.rig-diagram-load { color: var(--orange-deep); }

.tier h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.375rem; line-height: 1; }
.tier .amt {
  margin-top: .35rem;
  font-family: var(--display); font-weight: 900; font-size: 2.5rem;
  line-height: 1; letter-spacing: -.01em;
}
.tier .amt small {
  display: block; margin-bottom: .25rem;
  font-family: var(--mono); font-size: .9rem; font-weight: 700;
  letter-spacing: .1em; color: var(--muted);
}
.tier p { margin-top: .5rem; font-size: .875rem; color: var(--body-dim); }

.price-note {
  margin-top: 1.5rem;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 640px) {
  .carousel-prev { left: -.75rem; }
  .carousel-next { right: -.75rem; }
  .carousel-btn { width: 42px; height: 42px; }
}

/* ── Por qué LGX ────────────────────────────────────────────────── */

#why {
  background:
    linear-gradient(rgb(10 11 13 / .95), rgb(10 11 13 / .95)),
    url("/img/asphalt.jpg") 0 0 / 420px repeat,
    var(--ink);
}
.why { display: grid; gap: 1px; background: var(--line); }
.why-card { background: var(--steel); padding: 1.75rem 1.5rem 2rem; }
.why-card .k {
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange);
}
.why-card h3 {
  margin: .85rem 0 .6rem;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1;
}
.why-card p { font-size: .9375rem; color: #AEB5BD; }

@media (min-width: 640px)  { .why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .why { grid-template-columns: repeat(4, 1fr); } }

/* ── Contacto ───────────────────────────────────────────────────── */

.contact { display: grid; gap: 3rem; }
.contact-aside .h2 { margin-bottom: 1.25rem; }

#quote .direct {
  background: var(--line-light); border-color: var(--line-light);
}
#quote .direct a { background: var(--paper-2); color: var(--ink); }
#quote .direct a:hover { background: var(--paper); }
#quote .direct .ico { color: var(--orange-deep); }
#quote .direct .k, #quote label, #quote .form-note { color: var(--muted-dark); }
#quote input, #quote select, #quote textarea {
  background-color: var(--paper-2); border-color: var(--line-light); color: var(--ink);
}

.direct {
  display: grid; gap: 1px; margin-top: 2rem;
  background: var(--line); border: 1px solid var(--line);
}
.direct a {
  display: flex; align-items: center; gap: 1rem;
  background: var(--steel); padding: 1.15rem 1.25rem; text-decoration: none;
}
.direct a:hover { background: var(--steel-2); }
.direct .ico { display: block; width: 22px; height: 22px; flex: none; color: var(--orange); }
.direct .ico svg { width: 100%; height: 100%; }
.direct .k {
  display: block;
  font-family: var(--mono); font-size: .5625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.direct .v {
  display: block; margin-top: .2rem;
  font-family: var(--display); font-weight: 900; font-size: 1.375rem;
  text-transform: uppercase; line-height: 1.1;
}

form { display: grid; gap: 1.1rem; }
.f-row { display: grid; gap: 1.1rem; }

label {
  display: block; margin-bottom: .5rem;
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

input, select, textarea {
  width: 100%; padding: .85rem .9rem;
  background: var(--steel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--paper-2); font: inherit; font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: var(--muted-dark); }
input:focus, select:focus, textarea:focus { border-color: var(--orange); outline: none; }
textarea { resize: vertical; min-height: 110px; }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  padding: 1.1rem 1.5rem; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--orange); color: var(--ink);
  font-family: var(--display); font-weight: 900; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.btn-wa:hover { background: var(--orange-hover); }
.btn-wa svg { width: 24px; height: 24px; }

.form-note {
  text-align: center;
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

@media (min-width: 560px)  { .f-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .contact { grid-template-columns: .85fr 1.15fr; gap: 4.5rem; } }

/* ── Botones ────────────────────────────────────────────────────── */

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: .02em;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--orange-hover); }

.btn-ghost { border-color: var(--line); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }

/* Menú fijo de contacto. En escritorio abre con hover o teclado; en móvil,
   con un toque. Las acciones crecen hacia arriba para no tapar contenido. */
.contact-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
}
.fab-menu {
  position: absolute; right: 0; bottom: 100%;
  display: grid; justify-items: end; gap: .65rem;
  padding-bottom: .65rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(.5rem) scale(.96); transform-origin: bottom right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.contact-fab:hover .fab-menu,
.contact-fab:focus-within .fab-menu,
.contact-fab[data-open] .fab-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.fab-trigger,
.fab-action {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.15rem; border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 10px 30px rgb(0 0 0 / .45);
  white-space: nowrap;
}
.fab-trigger {
  border: 0; cursor: pointer;
  background: var(--orange); color: var(--ink);
}
.fab-trigger:hover { background: var(--orange-hover); }
.fab-action { min-width: 9.25rem; }
.fab-whatsapp { background: var(--whatsapp); color: var(--whatsapp-ink); }
.fab-call { background: var(--paper); color: var(--ink); }
.fab-action:hover { transform: translateX(-3px); }
.fab-trigger svg,
.fab-action svg { width: 22px; height: 22px; flex: none; }
.fab-trigger span { display: none; }
@media (min-width: 560px) {
  .fab-trigger span { display: inline; }
}

/* ── Footer ─────────────────────────────────────────────────────── */

footer {
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad) 2.5rem;
  border-top: 1px solid var(--line);
}
.f-grid { display: grid; gap: 2.5rem; max-width: var(--max-w); margin-inline: auto; }
.f-brand img { width: 120px; margin-bottom: 1.25rem; }
.f-col h2 {
  margin-bottom: 1rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange);
}
.f-col p, .f-col li { color: var(--muted); font-size: .9375rem; }
.f-col ul { display: grid; gap: .5rem; }
.f-col a { text-decoration: none; }
.f-col a:hover { color: var(--paper-2); }

.legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  max-width: var(--max-w); margin: 3rem auto 0;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted-dark);
}

@media (min-width: 820px) { .f-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ── Accesibilidad ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}