/* MACEV Logística — dirección "Type and nothing else", tono quiet.
   Paleta y tipografía de la marca (CLAUDE.md). Esquinas rectas, sin sombras en reposo, sin degradados. */
:root{
  --grafito:#1c2430;--azul:#1f5fbf;--azul-osc:#174a96;--tinte:#8fb3ee;
  --gris:#eef1f5;--linea:#c3ccd8;--suave:#3b4654;--suave-osc:#c3ccd8;--blanco:#fff;--ok:#14532d;--err:#7a1712;
  --m:clamp(16px,3vw,40px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --fuente:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  /* cinco tamaños de texto */
  --t-chico:15px;--t-texto:17px;--t-lead:22px;--t-medio:clamp(20px,2.1vw,30px);--t-titulo:clamp(30px,3.8vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fuente);font-size:var(--t-texto);color:var(--grafito);background:var(--blanco);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1;text-wrap:balance}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:100}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* Botones: una sola forma (esquina recta) */
.btn{display:inline-block;background:var(--azul);color:#fff;padding:14px 26px;min-height:48px;font:inherit;font-weight:600;text-decoration:none;border:0;border-radius:0;cursor:pointer;
  transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn.inv{background:#fff;color:var(--grafito)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--azul-osc)}
  .btn.inv:hover{background:var(--tinte)}
  .enlace:hover{color:var(--tinte)}
}
.btn[disabled]{opacity:.6;cursor:default}
.enlace{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;transition:color 160ms var(--ease-out)}

/* Marca provisional */
.marca{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:inherit}
.marca b{font-size:var(--t-texto);letter-spacing:.12em;font-weight:800}
.marca i{display:inline-block;width:.5em;height:.5em;background:var(--azul);margin-right:3px}
.marca span{font-size:.9rem;color:var(--suave)}

/* Barra simple (páginas legales) */
.top{background:var(--gris)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.menu{display:flex;gap:22px;align-items:center}
.menu a{text-decoration:none;font-weight:500}

/* ===== Portada: solo tipografía ===== */
.hero{background:var(--grafito);color:#fff;min-height:100svh;display:flex;flex-direction:column;padding:0 var(--m) 40px}
.hero-top{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:var(--t-chico)}
.hero-top nav{display:flex;gap:26px}
.hero-top a{text-decoration:none}
.hero-top .marca b{font-size:15px}
.hero h1{margin-top:14vh;font-weight:800;font-size:clamp(110px,15vw,230px);letter-spacing:-.04em;line-height:.9}
.hero h1 .ln{display:block;overflow:hidden;padding:.12em 0 .26em;margin:-.12em 0 -.26em}
.hero h1 .ln>span{display:block}
.hero h1 .l2{color:var(--tinte)}
.hero-pie{margin-top:auto;display:flex;flex-direction:column;align-items:flex-end;gap:22px;text-align:right}
.hero-pie p{font-size:var(--t-lead);max-width:30ch;color:var(--suave-osc)}

/* ===== Campos de color ===== */
.campo{padding:clamp(88px,12vw,180px) var(--m)}
.campo h2{font-size:var(--t-titulo);letter-spacing:-.02em}
.c-gris{background:var(--gris)}
.c-azul{background:var(--azul);color:#fff}
.c-grafito{background:var(--grafito);color:#fff}
.suave{color:var(--suave)}
.c-azul .suave{color:#eaf1fc}.c-grafito .suave{color:var(--suave-osc)}

/* Servicios: hoja tipo carta */
.hoja{width:min(580px,100%);margin:48px auto 0;background:#fff;padding:56px 40px;
  clip-path:polygon(0% 0,5.556% 10px,11.111% 0,16.667% 10px,22.222% 0,27.778% 10px,33.333% 0,38.889% 10px,44.444% 0,50% 10px,55.556% 0,61.111% 10px,66.667% 0,72.222% 10px,77.778% 0,83.333% 10px,88.889% 0,94.444% 10px,100% 0,100% 100%,94.444% calc(100% - 10px),88.889% 100%,83.333% calc(100% - 10px),77.778% 100%,72.222% calc(100% - 10px),66.667% 100%,61.111% calc(100% - 10px),55.556% 100%,50% calc(100% - 10px),44.444% 100%,38.889% calc(100% - 10px),33.333% 100%,27.778% calc(100% - 10px),22.222% 100%,16.667% calc(100% - 10px),11.111% 100%,5.556% calc(100% - 10px),0% 100%)}
.hoja h3{font-size:var(--t-lead);margin:44px 0 18px}
.hoja h3:first-of-type{margin-top:0}
.m-fila{display:flex;align-items:baseline;gap:10px;margin-bottom:18px;font-size:var(--t-texto)}
.m-fila i{flex:1;border-bottom:4px dotted #b6c0cc;transform:translateY(-4px)}
.m-fila b{font-weight:600;font-size:var(--t-chico);white-space:nowrap}
.m-desc{font-size:var(--t-chico);color:var(--suave);max-width:34ch;margin:-12px 0 18px}
.cab-c{max-width:none;text-align:center}
.nota{font-size:var(--t-chico);color:var(--suave);margin-top:30px;text-align:center}

/* Cómo trabajamos: escalera */
.escalera{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-top:72px}
.etapa{margin-bottom:56px}
.etapa:nth-of-type(1){grid-column:1/-1}
.etapa:nth-of-type(2){grid-column:3/-1}
.etapa:nth-of-type(3){grid-column:5/-1}
.etapa:nth-of-type(4){grid-column:7/-1;margin-bottom:0}
.etapa p:first-child{font-size:var(--t-titulo);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.etapa p+p{margin-top:12px;font-size:var(--t-texto);max-width:34ch;color:var(--suave)}
.etapa:nth-of-type(4) p:first-child{color:var(--azul)}

/* Cobertura: tabla de una sola medida */
.tabla{margin-top:56px;width:100%;border-collapse:collapse;font-size:var(--t-medio);line-height:1.5;letter-spacing:-.01em;text-align:left}
.tabla th,.tabla td{font-weight:400;padding:6px 24px 6px 0;vertical-align:top;width:33.3%}
.tabla td:last-child{text-align:right;padding-right:0}

/* Seguimiento */
.dos{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:48px;align-items:start}
.dos .izq{grid-column:1/span 6}
.dos .der{grid-column:8/span 5}
.dos .der.form{grid-column:7/-1;max-width:none}
.dos .lead{font-size:var(--t-medio);line-height:1.35;max-width:28ch}
.track form{display:flex;gap:12px;margin-top:40px}
.track input{flex:1;min-width:0;font-size:clamp(20px,2.2vw,30px);padding:14px 18px;background:transparent;color:#fff;border:2px solid #fff;border-radius:0}
.track input::placeholder{color:var(--suave-osc)}
.res{margin-top:20px;font-size:var(--t-lead);display:none}
.res.ok,.res.no{display:block}
.res.ok{color:var(--tinte)}
.res small{font-size:var(--t-chico);color:var(--suave-osc)}

/* Formularios */
.form{max-width:760px}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-weight:600;font-size:var(--t-chico);margin:16px 0 6px}
input,select,textarea{width:100%;padding:13px 14px;border:1.5px solid var(--linea);border-radius:0;font:inherit;background:#fff;color:var(--grafito)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:0;border-color:var(--azul)}
textarea{min-height:110px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px}
.checks label{display:flex;align-items:center;gap:8px;font-weight:400;margin:0;font-size:var(--t-texto)}
.checks input,.consent input{width:auto}
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:var(--t-chico);color:var(--suave);margin-top:20px}
.hp{position:absolute;left:-9999px;opacity:0}
.msg{margin-top:16px;padding:14px;display:none}
.msg.ok{display:block;background:#e6f4ec;color:var(--ok)}
.msg.err{display:block;background:#fdecea;color:var(--err)}

/* Contacto: filas a gran tamaño */
.filas{margin-top:48px}
.filas p{font-size:var(--t-titulo);font-weight:600;letter-spacing:-.02em;line-height:1.05;padding:28px 20px 22px}
.filas p:nth-child(odd){background:#e2e7ee}

/* Pie: el correo es el titular */
.pie{background:var(--azul);color:#fff;min-height:90svh;display:flex;flex-direction:column;padding:40px var(--m) 28px}
.pie-notas{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;font-size:var(--t-chico);align-items:start}
.pie-notas .marca{grid-column:1/span 3}
.pie-notas p{grid-column:4/span 5;max-width:44ch}
.pie-notas a.subir{grid-column:12;justify-self:end}
.pie .marca i{background:#fff}
.pie-correo{margin-top:auto;font-weight:800;letter-spacing:-.04em;line-height:.95;font-size:clamp(34px,8vw,130px);text-decoration:none;display:block;word-break:normal}
.pie-correo span{display:block}
.pie-meta{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;margin-top:44px;font-size:var(--t-chico);color:#eaf1fc;align-items:end}
.pie-meta nav{display:flex;gap:22px;flex-wrap:wrap}
.pie-meta span:last-child{text-align:right}

/* WhatsApp flotante (flota: lleva sombra) */
.wa{position:fixed;right:16px;bottom:16px;z-index:60;background:#fff;color:var(--grafito);padding:13px 20px;font-weight:700;text-decoration:none;box-shadow:0 4px 18px rgba(28,36,48,.3); /* taste-skill-ignore: boton flotante */display:none;transition:transform 160ms var(--ease-out)}
.wa.on{display:inline-block}
.wa:active{transform:scale(.97)}

/* Páginas legales */
.doc{max-width:820px;margin:0 auto;padding:56px 20px}
.doc h1{margin-top:0}
.doc h2{margin-top:32px;font-size:var(--t-lead)}
.aviso{background:#fff7e0;padding:12px 14px;font-size:var(--t-chico)}

/* ===== Movimiento ===== */
@keyframes sube{from{transform:translateY(105%)}to{transform:none}}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fundido{from{opacity:0}to{opacity:1}}
.hero h1 .ln>span{animation:sube 900ms var(--ease-out) both}
.hero h1 .l2>span{animation-delay:110ms}
.hero-pie>*{animation:aparece 600ms var(--ease-out) 700ms both}
.hero-pie>*:last-child{animation-delay:780ms}
.hero-top{animation:fundido 600ms var(--ease-out) 900ms both}
/* Revelado al entrar: solo si el script corrió */
.js [data-r]{opacity:0;transform:translateY(24px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-r].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 .ln>span{animation:none}
  .hero-pie>*{animation:fundido 300ms ease 100ms both}
  .hero-top{animation:none}
  .js [data-r]{transform:none;transition:opacity 300ms ease}
}

/* ===== Teléfono ===== */
@media(max-width:900px){
  .hero h1{margin-top:18svh;font-size:18vw}
  .hero-pie{align-items:flex-start;text-align:left}
  .hero-pie p{max-width:none}
  .hero-top nav a:not(:last-child){display:none}
  .escalera{display:block;margin-top:48px}
  .etapa:nth-of-type(2){margin-left:6vw}.etapa:nth-of-type(3){margin-left:12vw}.etapa:nth-of-type(4){margin-left:18vw}
  .etapa{margin-bottom:40px}
  .etapa p:first-child{font-size:8.4vw}
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block;width:100%}
  .tabla tr{margin-bottom:22px}
  .tabla th,.tabla td{padding:0}
  .tabla td{font-size:var(--t-chico);color:#eaf1fc}
  .tabla td:last-child{text-align:left}
  .dos .izq,.dos .der,.dos .der.form{grid-column:1/-1}
  .track form{flex-direction:column}
  .form .fila{grid-template-columns:1fr}
  .hoja{padding:44px 20px}
  .filas p{font-size:8vw;padding:20px 16px 16px}
  .pie-notas{display:block}
  .pie-notas p{margin:14px 0}
  .pie-correo{font-size:8.6vw;padding-top:60px}
  .pie-meta{grid-template-columns:1fr;gap:8px}
  .pie-meta span:last-child{text-align:left}
}

/* ===== Fotografías referenciales (Pexels): grandes y pocas, esquinas rectas, sin degradados ni sombras ===== */
.foto-ancha{margin:0;height:clamp(300px,52vw,720px);overflow:hidden;background:#1c2430}
.foto-ancha img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.serv-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;margin-top:48px}
.serv-grid .hoja{grid-column:1/span 6;margin:0;width:auto}
.foto-serv{grid-column:7/-1;display:block;width:100%;height:auto;aspect-ratio:1/1.05;object-fit:cover;object-position:50% 55%}
.foto-esc{position:absolute;left:0;bottom:0;width:30%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.foto-trk{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-top:40px}
.foto-cot{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:4/5;object-fit:cover;margin-top:40px}
@media(max-width:900px){
  .serv-grid{display:block}
  .foto-serv{aspect-ratio:4/5;margin-top:24px}
  .foto-esc{position:static;width:100%;max-width:520px;margin:0 0 40px}
}