/* importarcoche.es · web pública
   Idea: la web enseña lo que nos diferencia, el seguimiento del expediente. El resto, sobrio y claro.
   Tipografía: Archivo (variable, con anchura): ancha para titulares, normal para leer. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo.woff2") format("woff2-variations"), url("../fonts/archivo.woff2") format("woff2");
}
:root {
  --asfalto: #18191B;
  --asfalto-2: #26282C;
  --naranja: #FF7E00;
  --naranja-tinta: #B35400;
  --naranja-suave: #FFF1E2;
  --papel: #FFFFFF;
  --niebla: #EEF0F2;
  --linea: #DADDE2;
  --acero: #5C6470;
  --tinta: #18191B;
  --placa: #1F3C88;
  --ok: #1E7A49;
  --mal: #B3261E;
  --r: 14px;
  --r-s: 8px;
  --ancho: 1180px;
  --f: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--naranja-tinta); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-stretch: 96%; font-weight: 800; line-height: 1.04; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
h3 { letter-spacing: -.01em; }
h1 { font-size: clamp(38px, 5.4vw, 68px); }
h2 { font-size: clamp(30px, 4vw, 50px); }
h3 { font-size: 21px; line-height: 1.2; }
p { margin: 0; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--asfalto); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

/* Botones */
.boton { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--asfalto); background: var(--asfalto); color: #fff; font: inherit; font-weight: 750; font-size: 16px; letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, color .2s, border-color .2s; }
.boton:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(24,25,27,.6); }
.boton:active { transform: translateY(0) scale(.98); box-shadow: none; }
.boton svg { flex: none; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.boton:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.boton.naranja { background: linear-gradient(135deg, #FF9A2E, #FF7E00 55%, #F06A00); border-color: #FF7E00; color: var(--asfalto); box-shadow: 0 10px 24px -14px rgba(255,126,0,.9); }
.boton.naranja:hover { color: var(--asfalto); box-shadow: 0 18px 34px -14px rgba(255,126,0,.95); }
.boton.borde { background: transparent; color: var(--asfalto); }
.boton.borde:hover { background: var(--asfalto); color: #fff; }
.oscura .boton.borde, .cierre .boton.borde { border-color: currentColor; }
.boton.wa { background: linear-gradient(135deg, #25D366, #1FA855); border-color: #1FA855; color: #fff; box-shadow: 0 10px 24px -14px rgba(31,168,85,.9); }
.boton.wa:hover { color: #fff; }
/* Destello que recorre el botón */
.boton.brillo::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: destello 4.5s ease-in-out infinite 1.5s; }
.boton.brillo:hover::after { animation: destello .8s ease-out; }
@keyframes destello { 0% { left: -60%; } 18%, 100% { left: 130%; } }
.boton.peq { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo img { height: 24px; width: auto; }
.menu { display: flex; gap: 4px; margin-right: auto; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.menu a:hover { background: var(--niebla); }
.menu a[aria-current="page"] { background: var(--naranja-suave); color: var(--naranja-tinta); }
.cab-acciones { display: flex; gap: 10px; align-items: center; }
.enlace-area { font-weight: 700; font-size: 15px; color: var(--tinta); text-decoration: none; padding: 8px 4px; }
.enlace-area:hover { color: var(--naranja-tinta); }
.abrir-menu { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--tinta); }
@media (max-width: 1020px) {
  .cabecera .envoltura { height: 64px; gap: 12px; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 64px; background: #fff; border-bottom: 1px solid var(--linea); flex-direction: column; padding: 8px 12px 16px; margin: 0; }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 12px; font-size: 17px; }
  .logo { margin-right: auto; }
  .abrir-menu { display: block; }
  .cab-acciones .boton { display: none; }
}

/* Portada: titular + expediente de ejemplo */
.portada { background: var(--niebla); position: relative; overflow: hidden; }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 80px; position: relative; }
.portada h1 { font-stretch: 92%; font-weight: 850; font-size: clamp(38px, 4.3vw, 60px); line-height: 1; letter-spacing: -.02em; word-spacing: .05em; }
.portada .entradilla { font-size: 20px; color: #3B3F46; margin-top: 22px; max-width: 34em; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ruta-fondo { position: absolute; inset: auto -10% -70px -10%; height: 200px; pointer-events: none; opacity: .7; }
@media (max-width: 960px) { .portada .envoltura { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 44px; padding-bottom: 56px; } }

/* Matrículas de cada país */
.placas { display: flex; flex-wrap: wrap; gap: 10px 10px; margin-top: 36px; align-items: center; }
.placa-enlace { text-decoration: none; border-radius: 8px; display: inline-flex; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.placa-enlace:hover { transform: translateY(-3px) rotate(-1.5deg); }
.placa { display: inline-flex; align-items: stretch; height: 36px; border-radius: 6px; background: #fff; overflow: hidden; font-stretch: 82%; font-weight: 800; color: #121212; box-shadow: 0 0 0 2px #121212 inset, 0 6px 14px -8px rgba(0,0,0,.45); white-space: nowrap; }
.placa .t { display: grid; place-items: center; padding: 0 10px; font-size: 19px; letter-spacing: .02em; }
.placa-ue .ue { width: 26px; background: #1F4FB5; color: #fff; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 3px 0 2px; border-radius: 5px 0 0 5px; margin: 2px 0 2px 2px; }
.placa-ue .ue svg { width: 20px; height: 17px; }
.placa-ue .ue b { font-size: 12px; line-height: 1; font-stretch: 100%; }
.placa-usa { flex-direction: column; justify-content: center; align-items: center; height: 40px; padding: 0 12px; border-radius: 9px; background: linear-gradient(#fff, #EEF3FA); box-shadow: 0 0 0 2px #1B3A7A inset, 0 6px 14px -8px rgba(0,0,0,.45); gap: 0; }
.placa-usa .estado { color: #C8102E; font-size: 10px; letter-spacing: .3em; line-height: 1; margin-top: 2px; font-stretch: 100%; }
.placa-usa .t { color: #1B3A7A; font-size: 18px; padding: 0; line-height: 1; letter-spacing: .06em; }
.placa-usa .lema { color: #1B3A7A; font-size: 7px; font-weight: 600; line-height: 1; letter-spacing: .08em; }
.placa-uae .emi { display: grid; place-items: center; padding: 0 8px; border-right: 2px solid #121212; background: #fff; }
.placa-uae .emi b { color: #C8102E; font-size: 18px; line-height: 1; }
.placa-uae .emi small { font-size: 7.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; font-stretch: 100%; }
.placa-flecha { color: var(--acero); display: inline-flex; }
.placa-flecha svg { animation: empuje 1.6s ease-in-out infinite; }
@keyframes empuje { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Expediente de ejemplo (lo que ve el cliente) */
.expediente { background: var(--asfalto); color: #fff; border-radius: 20px; padding: 26px; box-shadow: 0 30px 60px -30px rgba(24,25,27,.55); position: relative; }
.expediente .cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.expediente .codigo { font-size: 13px; color: #A9ADB5; }
.expediente .coche { font-stretch: 96%; font-weight: 800; font-size: 22px; line-height: 1.15; margin-top: 4px; }
.expediente .fase { background: var(--naranja); color: var(--asfalto); font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.expediente .barra { height: 8px; background: #33363C; border-radius: 99px; margin: 20px 0 6px; overflow: hidden; }
.expediente .barra i { display: block; height: 100%; width: 0; background: var(--naranja); border-radius: 99px; animation: llenar 1.4s .3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes llenar { to { width: 62%; } }
.expediente .pct { display: flex; justify-content: space-between; font-size: 13px; color: #A9ADB5; }
.hitos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.hitos li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #2E3136; font-size: 15px; }
.hitos .b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #2E3136; color: #A9ADB5; font-size: 11px; font-weight: 800; }
.hitos .ok .b { background: #2D7A4E; color: #fff; }
.hitos .ahora .b { background: var(--naranja); color: var(--asfalto); box-shadow: 0 0 0 4px rgba(255,126,0,.25); }
.hitos .ahora { color: #fff; font-weight: 700; }
.hitos .pend { color: #8C9099; }
.hitos .cuando { font-size: 13px; color: #A9ADB5; }
.expediente .pie { display: flex; gap: 10px; margin-top: 16px; }
.expediente .foto { flex: 1; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(160deg, #3A3E45, #24262A); display: grid; place-items: end start; padding: 8px; font-size: 12px; color: #C3C6CC; }
.expediente .nota { position: absolute; left: -14px; bottom: -16px; background: #fff; color: var(--tinta); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(0,0,0,.35); display: flex; gap: 8px; align-items: center; }
.expediente .nota svg { color: var(--ok); }
.leyenda-ejemplo { font-size: 13px; color: var(--acero); margin-top: 30px; text-align: right; position: relative; }

/* Datos que importan */
.franja { border-bottom: 1px solid var(--linea); }
.franja .envoltura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dato { padding: 28px 24px 28px 0; }
.dato + .dato { border-left: 1px solid var(--linea); padding-left: 28px; }
.dato b { display: block; font-stretch: 96%; font-size: 30px; font-weight: 800; line-height: 1.1; }
.dato > span { color: var(--acero); font-size: 15px; }
@media (max-width: 760px) { .franja .envoltura { grid-template-columns: minmax(0, 1fr); } .dato + .dato { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; } }

/* Secciones */
.seccion { padding: 96px 0; }
.seccion.gris { background: var(--niebla); }
.seccion.oscura { background: var(--asfalto); color: #fff; }
.seccion.oscura a:not(.boton) { color: #FFB066; }
.cab-seccion { max-width: 760px; margin-bottom: 44px; }
.cab-seccion p { margin-top: 14px; color: var(--acero); font-size: 19px; }
.oscura .cab-seccion p { color: #B8BCC4; }
@media (max-width: 760px) { .seccion { padding: 64px 0; } }

/* Etapas del proceso (secuencia real: numeradas) */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: etapa; }
.etapas li { padding: 0 26px 0 0; position: relative; }
.etapas li + li { padding-left: 26px; border-left: 1px solid var(--linea); }
.etapas .num { font-stretch: 96%; font-weight: 900; font-size: 56px; line-height: 1; color: var(--naranja); }
.etapas h3 { margin: 14px 0 10px; }
.etapas p { color: var(--acero); font-size: 16px; }
.etapas .fases { margin-top: 12px; font-size: 13px; color: var(--acero); }
@media (max-width: 900px) { .etapas { grid-template-columns: minmax(0, 1fr); gap: 28px; } .etapas li + li { border-left: 0; padding-left: 0; padding-top: 28px; border-top: 1px solid var(--linea); } }

/* Servicios: filas, no tarjetas iguales */
.servicios-lista { border-top: 2px solid var(--asfalto); }
.servicio-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--linea); }
.servicio-fila h3 { font-size: 24px; }
.servicio-fila p { color: var(--acero); font-size: 16px; }
.precio { text-align: right; white-space: nowrap; }
.precio b { display: block; font-stretch: 96%; font-size: 30px; font-weight: 800; line-height: 1; }
.precio small { color: var(--acero); font-size: 13px; }
.servicio-fila .boton { margin-left: 8px; }
.servicio-fila .der { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
@media (max-width: 860px) { .servicio-fila { grid-template-columns: minmax(0, 1fr); gap: 12px; } .servicio-fila .der { justify-content: space-between; } .precio { text-align: left; } }

/* Países */
.paises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pais { background: var(--asfalto-2); border-radius: var(--r); padding: 28px; display: grid; gap: 14px; align-content: start; color: #fff; text-decoration: none; border: 1px solid #34373D; transition: border-color .15s; }
.pais:hover { border-color: var(--naranja); color: #fff; }
.oscura a.pais, .oscura a.pais:hover { color: #fff; }
.pais .placa { justify-self: start; }
.pais .placa { border-color: #fff; }
.pais h3 { font-size: 24px; }
.pais p { color: #B8BCC4; font-size: 16px; }
.pais dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 0; font-size: 14px; }
.pais dt { color: #8C9099; }
.pais dd { margin: 0; }
.pais .ir { color: #FFB066; font-weight: 700; }
@media (max-width: 900px) { .paises { grid-template-columns: minmax(0, 1fr); } }

/* Transparencia */
.transparencia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lista-check { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.lista-check li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.lista-check svg { color: var(--naranja-tinta); margin-top: 3px; }
.movil { width: min(320px, 100%); margin: 0 auto; border: 10px solid var(--asfalto); border-radius: 38px; background: var(--niebla); padding: 18px 14px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.4); }
.movil .cab-m { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.movil .tarjeta-m { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; font-size: 13px; }
.movil .tarjeta-m b { display: block; font-size: 15px; }
.movil .ok-m { color: var(--ok); font-weight: 700; }
.movil .boton-m { margin-top: 10px; background: var(--naranja); color: var(--asfalto); border-radius: 10px; text-align: center; font-weight: 800; padding: 9px; }
@media (max-width: 900px) { .transparencia { grid-template-columns: minmax(0, 1fr); } }

/* Formularios */
.campo { display: grid; gap: 6px; }
.campo label, .etq { font-weight: 700; font-size: 15px; }
.campo .ayuda { font-size: 13.5px; color: var(--acero); }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { width: 100%; font: inherit; font-size: 17px; color: var(--tinta); background: #fff; border: 1.5px solid #C8CCD3; border-radius: var(--r-s); padding: 13px 14px; min-height: 52px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 4px rgba(255,126,0,.2); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 620px) { .dos { grid-template-columns: minmax(0, 1fr); } }
.marca { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; align-items: start; cursor: pointer; }
.marca input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--naranja); }
.formulario { display: grid; gap: 16px; }
.trampa { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.error-form { background: #FBEAE8; color: #7F1D17; border: 1px solid #F0C3BF; border-radius: var(--r-s); padding: 12px 14px; font-weight: 600; }
.ok-form { background: #E5F2EA; color: #14532F; border: 1px solid #C6E2D1; border-radius: var(--r-s); padding: 12px 14px; font-weight: 600; }
.segmentos { display: flex; flex-wrap: wrap; gap: 8px; }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; inset: 0; }
.segmentos span { display: inline-block; padding: 10px 16px; border: 1.5px solid #C8CCD3; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; }
.segmentos input:checked + span { border-color: var(--asfalto); background: var(--asfalto); color: #fff; }
.segmentos input:focus-visible + span { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* Contacto */
.contacto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.canales { display: grid; gap: 12px; margin-top: 28px; }
.canal { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--linea); border-radius: var(--r); text-decoration: none; color: var(--tinta); }
.canal:hover { border-color: var(--naranja); color: var(--tinta); }
.canal .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--niebla); }
.canal b { display: block; }
.canal span { color: var(--acero); font-size: 15px; }
.caja-form { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 32px; }
.oscura .caja-form { color: var(--tinta); }
@media (max-width: 900px) { .contacto { grid-template-columns: minmax(0, 1fr); } .caja-form { padding: 22px; } }

/* FAQ */
.faq { border-top: 2px solid var(--asfalto); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 22px 0; font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--naranja-tinta); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px; color: #3B3F46; max-width: 70ch; }

/* Páginas interiores */
.cabeza-pag { background: var(--niebla); padding: 64px 0 56px; }
.cabeza-pag p { font-size: 20px; color: #3B3F46; margin-top: 18px; max-width: 40em; }
.miga { font-size: 14px; color: var(--acero); margin-bottom: 18px; }
.miga a { color: var(--acero); }
.ficha-pais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--asfalto); margin-top: 36px; }
.ficha-pais div { padding: 16px 20px 0 0; }
.ficha-pais div + div { padding-left: 20px; border-left: 1px solid var(--linea); }
.ficha-pais dt { font-size: 14px; color: var(--acero); }
.ficha-pais dd { margin: 4px 0 0; font-weight: 700; }
@media (max-width: 760px) { .ficha-pais { grid-template-columns: minmax(0, 1fr); } .ficha-pais div + div { border-left: 0; padding-left: 0; } }
.puntos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.puntos h3 { margin-bottom: 8px; }
.puntos p { color: var(--acero); }
@media (max-width: 760px) { .puntos { grid-template-columns: minmax(0, 1fr); } }
.servicio-detalle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.servicio-detalle .precio-grande b { font-stretch: 96%; font-size: 52px; font-weight: 800; line-height: 1; display: block; }
.servicio-detalle .precio-grande span { color: var(--acero); }
@media (max-width: 900px) { .servicio-detalle { grid-template-columns: minmax(0, 1fr); } }
.legal { max-width: 760px; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal p, .legal li { color: #3B3F46; margin-bottom: 12px; }
.centrado { text-align: center; max-width: 640px; margin: 0 auto; }
.centrado .acciones { justify-content: center; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Llamada final */
.cierre { background: var(--naranja); color: var(--asfalto); padding: 72px 0; }
.cierre .envoltura { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cierre h2 { max-width: 16em; }
.cierre .acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Pie */
.pie-web { background: var(--asfalto); color: #B8BCC4; padding: 64px 0 32px; font-size: 15px; }
.pie-web a { color: #E6E8EB; text-decoration: none; }
.pie-web a:hover { color: var(--naranja); }
.pie-web .rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pie-web h4 { color: #fff; font-size: 15px; margin: 0 0 14px; font-stretch: 96%; }
.pie-web ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie-web .legalidad { border-top: 1px solid #34373D; margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13.5px; }
@media (max-width: 860px) { .pie-web .rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Chat de WhatsApp */
.wa-chat { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; justify-items: end; gap: 12px; }
.wa-boton { width: 60px; height: 60px; border-radius: 50%; border: 0; background: #1FA855; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 28px -8px rgba(0,0,0,.45); }
.wa-boton:hover { background: #178a45; }
.wa-boton .cerrar { display: none; }
.wa-chat.abierto .wa-boton .abrir { display: none; }
.wa-chat.abierto .wa-boton .cerrar { display: block; }
.wa-panel { width: min(360px, calc(100vw - 40px)); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(0,0,0,.45); display: none; transform-origin: bottom right; }
.wa-chat.abierto .wa-panel { display: block; animation: aparecer .18s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.wa-cab { background: #0B5C3B; color: #fff; padding: 16px 18px; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.wa-cab .av { width: 42px; height: 42px; border-radius: 50%; background: var(--naranja); color: var(--asfalto); display: grid; place-items: center; font-weight: 900; font-stretch: 96%; }
.wa-cab b { display: block; font-size: 16px; }
.wa-cab span { font-size: 13px; opacity: .85; }
.wa-cuerpo { background: #EFE7DD; padding: 16px; display: grid; gap: 10px; }
.wa-burbuja { background: #fff; border-radius: 0 12px 12px 12px; padding: 10px 12px; font-size: 15px; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-rapidas { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-rapidas button { font: inherit; font-size: 14px; border: 1px solid #1FA855; color: #0B5C3B; background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.wa-rapidas button:hover { background: #E7F6EC; }
.wa-escribir { display: grid; grid-template-columns: 1fr 46px; gap: 8px; padding: 12px; background: #fff; }
.wa-escribir textarea { min-height: 46px; height: 46px; font-size: 15px; padding: 11px 12px; border-radius: 23px; resize: none; }
.wa-escribir button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #1FA855; color: #fff; display: grid; place-items: center; cursor: pointer; }
.wa-aviso { font-size: 12px; color: var(--acero); padding: 0 14px 12px; background: #fff; }
@media print { .wa-chat, .cabecera { display: none; } }
@media (max-width: 520px) { .placas { gap: 8px; } .placas .placa { height: 34px; } .placas .placa .t { font-size: 16px; padding: 0 8px; } .placas .placa-usa { height: 38px; } }
/* Cómo trabajamos */
.etapa-larga { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; padding: 48px 0; border-top: 2px solid var(--asfalto); }
.etapa-larga:first-child { padding-top: 0; border-top: 0; }
.etapa-cab { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-content: start; position: sticky; top: 100px; }
.etapa-cab .num { font-stretch: 96%; font-weight: 900; font-size: 64px; line-height: .9; color: var(--naranja); }
.etapa-cab h2 { font-size: clamp(24px, 2.6vw, 32px); }
.etapa-cab p { color: var(--acero); margin-top: 10px; }
.fases-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.fases-lista li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.fases-lista li:first-child { padding-top: 0; }
.fases-lista .fn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--asfalto); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.fases-lista h3 { font-size: 19px; margin-bottom: 4px; }
.fases-lista p { color: #3B3F46; }
@media (max-width: 860px) { .etapa-larga { grid-template-columns: minmax(0, 1fr); gap: 24px; } .etapa-cab { position: static; } }

/* ===== 1.3.1: impacto visual ===== */
/* Barra de lectura arriba (scroll-driven, con alternativa en JS) */
.progreso-lectura { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #FF9A2E, #FF7E00); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); z-index: 60; }
@supports (animation-timeline: scroll()) { .progreso-lectura { animation: leer linear both; animation-timeline: scroll(root); } @keyframes leer { from { transform: scaleX(0); } to { transform: scaleX(1); } } }

/* Portada */
.portada-texto { position: relative; z-index: 2; }
.titular-animado > span { display: block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.titular-animado > span > span { display: inline-block; transform: translateY(105%); animation: subir .9s cubic-bezier(.2,.8,.2,1) forwards; }
.titular-animado > span:nth-child(2) > span { animation-delay: .08s; } .titular-animado > span:nth-child(3) > span { animation-delay: .16s; } .titular-animado > span:nth-child(4) > span { animation-delay: .24s; color: var(--naranja-tinta); }
@keyframes subir { to { transform: none; } }
.aparece { opacity: 0; transform: translateY(14px); animation: aparecer2 .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes aparecer2 { to { opacity: 1; transform: none; } }
.ruta-trazo { stroke-dashoffset: 0; animation: correr 18s linear infinite; }
@keyframes correr { to { stroke-dashoffset: -280; } }
.portada.con-foto { background: #0E0F11; color: #fff; }
.portada.con-foto .portada-foto { position: absolute; inset: 0; }
.portada.con-foto .portada-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: zoom 14s ease-out forwards; }
@keyframes zoom { to { transform: scale(1); } }
.portada.con-foto .portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,15,17,.92) 0%, rgba(14,15,17,.72) 45%, rgba(14,15,17,.25) 100%), linear-gradient(0deg, rgba(14,15,17,.6), transparent 40%); }
.portada.con-foto .entradilla { color: #D7DADF; }
.portada.con-foto .titular-animado > span:nth-child(4) > span { color: var(--naranja); }
.portada.con-foto .leyenda-ejemplo { color: #A9ADB5; }
.portada.con-foto .placa-flecha { color: #fff; }
.portada.con-foto .boton.borde { color: #fff; }
/* Expediente con inclinación 3D al pasar el ratón */
.portada-tarjeta { perspective: 1200px; position: relative; z-index: 2; }
.expediente { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.expediente .nota { transform: translateZ(40px); animation: flotar 4s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.en-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); margin-left: 6px; vertical-align: middle; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,126,0,.6); } 50% { box-shadow: 0 0 0 6px rgba(255,126,0,0); } }

/* Marquesina de marcas */
.marquesina { background: var(--asfalto); color: #fff; overflow: hidden; padding: 18px 0; border-block: 1px solid #2E3136; }
.marquesina .pista { display: flex; width: max-content; animation: deslizar 38s linear infinite; }
.marquesina:hover .pista { animation-play-state: paused; }
.marquesina span { display: flex; align-items: center; }
.marquesina b { font-stretch: 90%; font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.01em; padding: 0 22px; white-space: nowrap; }
.marquesina i { color: var(--naranja); font-style: normal; font-size: 14px; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* Aparición al hacer scroll (una vez, discreta) */
.js .revela, .js .revela-grupo > * { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .revela.visto, .js .revela-grupo.visto > * { opacity: 1; transform: none; }
.js .revela-grupo.visto > *:nth-child(2) { transition-delay: .1s; } .js .revela-grupo.visto > *:nth-child(3) { transition-delay: .2s; } .js .revela-grupo.visto > *:nth-child(4) { transition-delay: .3s; }
.etapas li { transition: transform .3s; }
.etapas .num { display: inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.etapas li:hover .num { transform: translateY(-4px) scale(1.08); }

/* Mapa de rutas */
.rutas-grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); grid-template-areas: "tabs mapa" "tabs panel"; gap: 24px 36px; align-items: start; }
.rutas-tabs { grid-area: tabs; display: grid; gap: 10px; }
.ruta-tab { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid #34373D; background: var(--asfalto-2); color: #fff; font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.ruta-tab:hover { border-color: #5A5F68; transform: translateX(3px); }
.ruta-tab[aria-selected="true"] { border-color: var(--naranja); background: linear-gradient(135deg, #2B2215, var(--asfalto-2)); box-shadow: 0 0 0 1px var(--naranja) inset; }
.ruta-tab b { display: block; font-size: 17px; }
.ruta-tab small { color: #A9ADB5; font-size: 13.5px; }
.ruta-tab .placa { justify-self: start; }
.mapa { grid-area: mapa; position: relative; border-radius: 20px; background: radial-gradient(ellipse at 58% 45%, #22252A, #16171A 70%); border: 1px solid #2E3136; overflow: hidden; aspect-ratio: 1000 / 560; }
.mapa svg { width: 100%; height: 100%; display: block; }
.ruta-base { fill: none; stroke: #3A3E45; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.ruta-viva { fill: none; stroke: var(--naranja); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 14 10; opacity: 0; transition: opacity .4s; animation: correr 12s linear infinite; }
.ruta-g .vehiculo { fill: #fff; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 6px rgba(255,126,0,.9)); }
.ruta-g .punto { fill: #6A707A; }
.ruta-g .ciudad { fill: #8C9099; font: 700 15px var(--f); text-anchor: middle; opacity: .7; }
.ruta-g.activa .ruta-viva, .ruta-g.activa .vehiculo { opacity: 1; }
.ruta-g.activa .punto { fill: var(--naranja); }
.ruta-g.activa .ciudad { fill: #fff; opacity: 1; }
.ruta-g:not(.activa) .pulso { display: none; }
.destino { fill: var(--naranja); }
.destino-txt { fill: #fff; font: 800 17px var(--f); text-anchor: middle; }
.pulso { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onda 2s ease-out infinite; }
.pulso.naranja { stroke: var(--naranja); }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.rutas-paneles { grid-area: panel; }
.ruta-panel p { color: #C3C6CC; font-size: 16px; }
.ruta-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 32px; align-items: start; }
.ruta-panel .boton { grid-column: 1; justify-self: start; }
.ruta-panel dl { display: grid; gap: 10px; margin: 0; grid-row: span 2; }
.ruta-panel dl div { border-top: 1px solid #34373D; padding-top: 10px; }
.ruta-panel dt { color: #8C9099; font-size: 13px; }
.ruta-panel dd { margin: 2px 0 0; font-weight: 700; font-size: 15px; }
.ruta-panel:not([hidden]) { animation: aparecer2 .45s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 960px) { .ruta-panel { grid-template-columns: minmax(0, 1fr); } .ruta-panel dl { margin: 12px 0; } .rutas-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "mapa" "panel"; } .rutas-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ruta-tab { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 10px; } .ruta-tab small { display: none; } .ruta-tab b { font-size: 14px; } .ruta-tab .placa { height: 28px; } .ruta-tab .placa .t { font-size: 13px; padding: 0 6px; } .ruta-tab .placa-ue .ue { width: 18px; } .ruta-tab .placa-ue .ue svg { width: 14px; } .ruta-tab .placa-usa { height: 30px; padding: 0 6px; } .ruta-tab .placa-usa .lema { display: none; } .ruta-tab .placa-uae .emi small { display: none; } }

/* Galería de coches importados */
.galeria-sec { padding-bottom: 72px; overflow: hidden; }
.galeria { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(20px, calc((100vw - var(--ancho)) / 2 + 20px)) 18px; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.g-item { flex: 0 0 min(560px, 85vw); margin: 0; scroll-snap-align: center; border-radius: 18px; overflow: hidden; position: relative; background: var(--niebla); aspect-ratio: 16 / 10; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.g-item:hover img { transform: scale(1.05); }
.g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; display: grid; }
.g-item figcaption b { font-size: 19px; }
.g-item figcaption span { font-size: 14px; color: #FFB066; }
.galeria-nav { display: flex; gap: 10px; }
.galeria-nav button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--asfalto); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.galeria-nav button:hover { background: var(--asfalto); color: #fff; transform: translateY(-2px); }
.galeria-nav button:first-child svg { transform: rotate(180deg); }

/* Móvil de la transparencia */
.barra-m { height: 6px; border-radius: 99px; background: var(--niebla); margin-top: 10px; overflow: hidden; }
.barra-m i { display: block; height: 100%; width: 0; background: var(--naranja); transition: width 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
.movil.visto .barra-m i { width: 84%; }
.movil .notif { position: relative; }
.movil.visto .notif { animation: notif 3.5s ease-in-out infinite 1.2s; }
@keyframes notif { 0%, 70%, 100% { transform: none; } 75% { transform: translateX(-4px) rotate(-1deg); } 80% { transform: translateX(4px) rotate(1deg); } 85% { transform: none; } }
.movil { transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.movil:hover { transform: rotate(0) translateY(-6px); }

/* Tarjetas de servicio con un poco más de vida */
.servicio-fila { transition: background .25s, padding .25s; border-radius: 12px; }
.servicio-fila:hover { background: rgba(255,255,255,.75); padding-left: 16px; padding-right: 16px; }
.pais, .canal { transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s; }
.canal:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); }
.wa-boton { animation: llamar 6s ease-in-out infinite 3s; }
@keyframes llamar { 0%, 88%, 100% { transform: none; } 91% { transform: scale(1.12) rotate(-8deg); } 94% { transform: scale(1.12) rotate(8deg); } 97% { transform: scale(1.05); } }
.wa-chat.abierto .wa-boton { animation: none; }
@media (prefers-reduced-motion: reduce) { .titular-animado > span > span, .aparece { transform: none; opacity: 1; animation: none; } .js .revela, .js .revela-grupo > * { opacity: 1; transform: none; } .marquesina .pista { animation: none; } }
.ruta-panel[hidden] { display: none; }


/* ===== Servicios con ilustraciones ===== */
.ilus { width: 100%; height: auto; display: block; overflow: visible; }
.ilus .lupa { animation: lupa 6s ease-in-out infinite; transform-origin: 300px 150px; }
@keyframes lupa { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-26px, -6px) rotate(-4deg); } }
.ilus .escudo, .ilus .check-g { animation: flotar 4s ease-in-out infinite; }
.ilus .marca-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazar .5s ease-out forwards; animation-delay: calc(.4s + var(--i) * .35s); }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.ilus .camion { animation: traqueteo .5s ease-in-out infinite alternate; }
@keyframes traqueteo { to { transform: translateY(1.5px); } }
.ilus .carretera { animation: carretera .8s linear infinite; }
@keyframes carretera { to { stroke-dashoffset: 38; } }
.ilus .barco { animation: mecer 5s ease-in-out infinite; transform-origin: 300px 130px; }
@keyframes mecer { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-14px) rotate(-1.5deg); } }
.ilus .sello { transform-origin: 270px 182px; animation: sellar 4.5s ease-in-out infinite; }
@keyframes sellar { 0%, 60%, 100% { transform: scale(1) rotate(0); } 66% { transform: scale(1.25) rotate(-6deg); opacity: .6; } 72% { transform: scale(.94) rotate(0); opacity: 1; } }
.ilus .moneda { animation: flotar 3.5s ease-in-out infinite; }
.ilus .llaves { transform-origin: 300px 206px; animation: llaves 3s ease-in-out infinite; }
@keyframes llaves { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
.ilus .placa-g { animation: flotar 5s ease-in-out infinite; }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.pilar { grid-column: span 2; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .2s; }
.pilar-1, .pilar-2 { grid-column: span 3; }
.pilar:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(24,25,27,.45); border-color: transparent; color: var(--tinta); }
.pilar-arte { background: radial-gradient(ellipse at 30% 20%, #FFF4E8, #F3F4F6 70%); padding: 22px 26px 10px; display: grid; place-items: center; min-height: 210px; }
.pilar-1 .pilar-arte { background: radial-gradient(ellipse at 70% 30%, #2C2F35, #18191B 75%); }
.pilar-arte .ilus { max-width: 360px; }
.pilar-texto { padding: 22px 26px 26px; display: grid; gap: 8px; align-content: start; }
.pilar-num { font-stretch: 90%; font-weight: 900; font-size: 15px; color: var(--naranja-tinta); letter-spacing: .02em; }
.pilar h3 { font-size: 23px; }
.pilar p { color: var(--acero); font-size: 16px; }
.pilar-ir { display: inline-flex; gap: 6px; align-items: center; font-weight: 750; color: var(--tinta); margin-top: 8px; }
.pilar-ir svg { transition: transform .25s; }
.pilar:hover .pilar-ir svg { transform: translateX(5px); }
.pilar:hover .pilar-ir { color: var(--naranja-tinta); }
@media (max-width: 960px) { .bento { grid-template-columns: minmax(0, 1fr); } .pilar, .pilar-1, .pilar-2 { grid-column: auto; } .pilar-arte { min-height: 0; } }

.cabeza-servicios .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: end; }
.indice-servicios { display: grid; gap: 6px; }
.indice-servicios a { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 700; transition: transform .25s, border-color .2s; }
.indice-servicios a:hover { transform: translateX(6px); border-color: var(--naranja); }
.indice-servicios span { font-stretch: 90%; font-weight: 900; color: var(--naranja-tinta); }
@media (max-width: 900px) { .cabeza-servicios .envoltura { grid-template-columns: minmax(0, 1fr); } }
.pilar-largo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 90px; }
.pilar-largo:first-child { padding-top: 0; }
.pilar-largo:last-child { border-bottom: 0; }
.pilar-largo.invertido .pilar-largo-arte { order: 2; }
.pilar-largo-arte { border-radius: 26px; background: radial-gradient(ellipse at 30% 20%, #FFF4E8, #EEF0F2 70%); padding: 36px; }
.pilar-largo.invertido .pilar-largo-arte { background: radial-gradient(ellipse at 70% 30%, #2C2F35, #18191B 75%); }
.pilar-largo h2 { margin-top: 6px; }
.pilar-intro { font-size: 19px; color: #3B3F46; margin-top: 14px; }
@media (max-width: 900px) { .pilar-largo { grid-template-columns: minmax(0, 1fr); gap: 28px; } .pilar-largo.invertido .pilar-largo-arte { order: 0; } .pilar-largo-arte { padding: 20px; } }

.sueltos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.suelto { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.suelto:hover { transform: translateY(-5px); box-shadow: 0 26px 44px -28px rgba(24,25,27,.45); color: var(--tinta); }
.suelto-arte { background: radial-gradient(ellipse at 30% 20%, #FFF4E8, #F3F4F6 70%); padding: 18px 24px 4px; }
.suelto-cuerpo { padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
.suelto h3 { font-size: 21px; }
.suelto p { color: var(--acero); font-size: 15.5px; }
.suelto-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.precio-chip { font-weight: 800; font-size: 22px; font-stretch: 92%; }
.precio-chip small { font-size: 12px; color: var(--acero); }
@media (max-width: 900px) { .sueltos { grid-template-columns: minmax(0, 1fr); } }

/* 1.3.3 · Consultas */
.cierre-sub { margin-top: 12px; font-size: 18px; max-width: 34em; color: #3A2A17; }
.acciones-pag { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.aviso-pais { padding-top: 72px; padding-bottom: 72px; }
.aviso-caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; background: var(--asfalto); color: #fff; border-radius: 24px; padding: 44px; position: relative; overflow: hidden; }
.aviso-caja::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: repeating-linear-gradient(-45deg, var(--naranja) 0 12px, var(--asfalto) 12px 24px); }
.aviso-caja h2 { font-size: clamp(28px, 3.4vw, 42px); }
.aviso-caja p { color: #C3C6CC; margin-top: 14px; font-size: 18px; }
.aviso-etq { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--naranja); margin-bottom: 14px; }
.aviso-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }
.aviso-lista li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.45; }
.aviso-x { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,126,0,.16); color: var(--naranja); display: grid; place-items: center; }
@media (max-width: 860px) { .aviso-caja { grid-template-columns: minmax(0, 1fr); padding: 30px 22px 26px 28px; gap: 26px; } }
.cab-sub { max-width: 46em; }
.adaptas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.adapta { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 26px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.adapta:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(24,25,27,.45); border-color: var(--naranja); }
.adapta-ico { width: 64px; height: 64px; border-radius: 16px; background: var(--naranja-suave); color: var(--naranja-tinta); display: grid; place-items: center; margin-bottom: 18px; }
.adapta h3 { margin-bottom: 8px; }
.adapta p { color: var(--acero); font-size: 16px; }
.adapta-nota { margin-top: 28px; font-size: 18px; max-width: 46em; }
.adapta-nota a { color: var(--naranja-tinta); font-weight: 700; }
@media (max-width: 960px) { .adaptas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .adaptas { grid-template-columns: minmax(0, 1fr); } }
/* Barra fija de consulta en móvil */
.barra-consulta { display: none; }
@media (max-width: 760px) {
  .barra-consulta { display: flex; position: fixed; left: 12px; right: 88px; bottom: 20px; z-index: 49; transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .barra-consulta.visible { transform: none; }
  .barra-consulta .boton { flex: 1; min-height: 56px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); }
  body.con-barra { padding-bottom: 92px; }
}
.ruta-aviso { font-size: 15px !important; background: var(--naranja-suave); color: #5A3000 !important; border-left: 4px solid var(--naranja); border-radius: 8px; padding: 10px 14px; }

/* 1.3.5 · Menú «Países» desplegable */
.menu-grupo { position: relative; }
.menu-boton { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; color: var(--tinta); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.menu-boton svg { transition: transform .25s; }
.menu-boton:hover, .menu-grupo.abierto .menu-boton { background: var(--niebla); }
.menu-boton[data-actual] { background: var(--naranja-suave); color: var(--naranja-tinta); }
.menu-grupo.abierto .menu-boton svg { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 10px); left: -16px; width: 460px; background: #fff; border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(24,25,27,.35); padding: 10px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 40; }
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@media (hover: hover) and (min-width: 1021px) { .menu-grupo:hover .menu-panel { opacity: 1; visibility: visible; transform: none; } }
.menu-grupo.abierto .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu .menu-pais { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; font-weight: 400; }
.menu .menu-pais:hover { background: var(--niebla); }
.menu-pais b { display: block; font-size: 16px; font-weight: 750; color: var(--tinta); }
.menu-pais small { display: block; font-size: 13.5px; line-height: 1.35; color: var(--acero); margin-top: 2px; }
.mp-placa { display: flex; justify-content: center; }
.mp-placa .placa { zoom: .8; }
.menu .menu-todos { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px; border-top: 1px solid var(--linea); border-radius: 0 0 10px 10px; font-weight: 700; color: var(--naranja-tinta); }
.menu .menu-todos:hover { background: var(--naranja-suave); }
@media (max-width: 1020px) {
  .menu-boton { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 17px; }
  .menu-panel { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 6px 8px; display: none; opacity: 1; visibility: visible; transform: none; }
  .menu-grupo.abierto .menu-panel { display: grid; }
  .menu .menu-pais { grid-template-columns: 108px 1fr; padding: 10px 8px; }
  .menu .menu-todos { font-size: 16px; padding: 12px 8px; }
}

/* Página /paises */
.origenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.origen { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 28px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.origen:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -28px rgba(24,25,27,.45); border-color: var(--naranja); }
.origen .placa { align-self: flex-start; }
.origen h2 { font-size: 28px; margin-top: 22px; }
.origen > p { color: var(--acero); margin-top: 10px; font-size: 16.5px; }
.origen dl { margin: 18px 0 0; display: grid; gap: 10px; }
.origen dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 15px; padding-top: 10px; border-top: 1px solid var(--linea); }
.origen dt { color: var(--acero); font-weight: 600; }
.origen dd { margin: 0; font-weight: 650; }
.origen .acciones-pag { margin-top: auto; padding-top: 24px; }
.origen .boton { flex: 1; justify-content: center; }
@media (max-width: 980px) { .origenes { grid-template-columns: minmax(0, 1fr); } }
.comparar-env { overflow-x: auto; border: 1px solid var(--linea); border-radius: 18px; background: #fff; }
.comparar { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15.5px; }
.comparar th, .comparar td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.comparar thead th { background: var(--asfalto); color: #fff; font-size: 16px; }
.comparar thead th:first-child { background: var(--asfalto); }
.comparar tbody th { width: 170px; color: var(--acero); font-weight: 650; background: var(--niebla); }
.comparar tbody tr:last-child th, .comparar tbody tr:last-child td { border-bottom: 0; }