/* =========================================================================
   empresasdetransportevalencia.com — LA CAPA PROPIA DE ESTA WEB
   -------------------------------------------------------------------------
   El paquete `cabitrans/ui` pone la maqueta y los componentes de la red; esto
   es lo que hace que esta web sea ESTA web y no Bilbao ni Madrid, según su kit
   de identidad: agua del puerto (#0E4C5A), turquesa marítimo, terracota de
   azulejo sólo en lo pulsable, fondo hueso cálido, Barlow Condensed en
   titulares sobre Inter, radio 4 y trama de rejilla industrial.

   Reglas que NO se tocan: contraste AA, nada de desbordes, ningún botón con el
   texto partido, 16 px mínimo de cuerpo en móvil y áreas táctiles de 44 px.
   ========================================================================= */

:root{
  --vlc-regla: 3px;                       /* el filo de terracota */
  --vlc-trama: rgb(14 76 90 / .09);       /* la rejilla, en agua de puerto */
  --ancho-max: 1240px;
}

/* ---------- 1 · TIPOGRAFÍA: Barlow Condensed manda ---------------------- */
h1,h2,h3,h4,.rd-logo__palabra,.rd-cifra b,.rd-heroe__dato b{
  font-family:var(--f-titulos);
  letter-spacing:-.005em;
  line-height:1.03;
}
h1{
  font-size:calc(clamp(2.5rem,1.7rem + 3.4vw,4.4rem) * var(--escala));
  text-wrap:balance;
}
h2{font-size:calc(clamp(1.9rem,1.3rem + 2.2vw,3.1rem) * var(--escala))}
h3{font-size:calc(clamp(1.25rem,1.05rem + .75vw,1.6rem) * var(--escala))}

/* Condensada: el antetítulo pide más aire entre letras para leerse */
.rd-antetitulo{
  font-family:var(--f-titulos);
  font-weight:600;
  letter-spacing:.17em;
  font-size:.8rem;
  display:inline-flex;align-items:center;gap:.6em;
}
.rd-antetitulo::before{
  content:"";width:18px;height:var(--vlc-regla);
  background:var(--c-acento);flex:none;border-radius:2px;
}
.rd-cabeza--centrada .rd-antetitulo{justify-content:center}

/* El cuerpo, en Inter: medidas, kilos y franjas se leen sin esfuerzo */
body{font-feature-settings:"tnum" 0,"cv05" 1}
.rd-cifra b,.rd-heroe__dato b,.rd-transitos td{font-variant-numeric:tabular-nums}

/* ---------- 2 · EL FILO DE TERRACOTA Y LA TRAMA ------------------------- */
.rd-patron--rejilla{
  background-image:linear-gradient(to right,var(--vlc-trama) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--vlc-trama) 1px,transparent 1px);
  background-size:52px 52px;
  opacity:1;
}
.rd-seccion--superficie{
  background:var(--c-superficie);
  border-block:1px solid color-mix(in srgb,var(--c-primario) 10%,transparent);
}

/* ---------- 3 · CABECERA: hoja de ruta, no barra de catálogo ------------ */
.rd-cabecera{
  background:color-mix(in srgb,var(--c-fondo) 94%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--c-primario) 14%,transparent);
  box-shadow:none;
}
.rd-cabecera::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:var(--vlc-regla);
  background:linear-gradient(90deg,var(--c-acento) 0 18%,var(--c-secundario) 18% 46%,transparent 46%);
}
.rd-logo__palabra{letter-spacing:-.015em;font-weight:700;text-transform:uppercase}
.rd-logo__detalle{color:var(--c-acento)}

/* ---------- 4 · LA APERTURA: el puerto, y el cotizador encima ----------- */
.vlc-apertura{position:relative;background:var(--c-oscuro)}

.vlc-apertura .rd-heroe--foto{background:var(--c-oscuro)}
.vlc-apertura .rd-heroe__velo{
  background:
    linear-gradient(100deg,
      color-mix(in srgb,var(--c-oscuro) 94%,transparent) 0%,
      color-mix(in srgb,var(--c-oscuro) 80%,transparent) 42%,
      color-mix(in srgb,var(--c-oscuro) 34%,transparent) 72%,
      color-mix(in srgb,var(--c-oscuro) 20%,transparent) 100%),
    linear-gradient(to bottom,transparent 55%,color-mix(in srgb,var(--c-oscuro) 72%,transparent) 100%);
}
/* La trama de contenedores, por encima de la foto y muy tenue */
.vlc-apertura .rd-heroe--foto::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(to right,rgb(255 255 255/.07) 1px,transparent 1px),
                   linear-gradient(to bottom,rgb(255 255 255/.07) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(100deg,#000 0 38%,transparent 72%);
}
.vlc-apertura .rd-heroe__interior{
  padding-block:clamp(48px,7.5vw,104px) clamp(36px,6vw,80px);
}
.vlc-apertura .rd-heroe__texto{max-width:620px}
.vlc-apertura .rd-heroe__entrada{max-width:48ch;color:#EAF1F2}
.vlc-apertura .rd-heroe__pruebas{color:#D9E5E7;border-color:rgb(255 255 255/.18)}

@media (min-width:1000px){
  /* Barlow Condensed es estrecha: el ancho se mide en px, no en `ch`, o el
     titular se queda en una columna de 230 px y la portada parece un folleto. */
  .vlc-apertura .rd-heroe__texto{max-width:680px}
  .vlc-apertura .rd-heroe__entrada{max-width:520px}
}

/* EL COTIZADOR, subido sobre la foto: es el único CTA que importa */
.vlc-cotizador{
  position:relative;z-index:5;
  background:linear-gradient(to bottom,var(--c-oscuro) 0 var(--vlc-corte,86px),var(--c-fondo) var(--vlc-corte,86px) 100%);
  padding-bottom:clamp(28px,4vw,48px);
}
.vlc-cotizador__caja{position:relative}

/* El cotizador trae su propia tarjeta (`.cot-widget`): aquí se le da el filo de
   terracota y la sombra de pieza flotante, NUNCA una caja alrededor — eso
   sería tarjeta dentro de tarjeta. */
.vlc-cotizador .cot-widget{
  border-top:var(--vlc-regla) solid var(--c-acento);
  border-color:color-mix(in srgb,var(--c-primario) 16%,transparent);
  border-top-color:var(--c-acento);
  border-radius:var(--radio);
  box-shadow:0 2px 6px rgb(var(--c-sombra) / .10), 0 28px 60px -18px rgb(var(--c-sombra) / .42);
  padding:clamp(18px,3.2vw,30px);
}
.vlc-cotizador .cot-widget h2{
  font-family:var(--f-titulos);font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem) !important;
  letter-spacing:-.005em;margin:0;
}
/* A partir de tablet el cotizador se reparte a lo ancho: modalidad arriba y
   origen, destino y el botón en una sola línea. Es la pieza que manda en la
   portada, no un formulario estrecho metido en una esquina. */
@media (min-width:860px){
  .vlc-cotizador .cot-widget{
    grid-template-columns:minmax(0,1fr) minmax(200px,230px);
    align-items:end;
    column-gap:calc(var(--u) * 5);
  }
  .vlc-cotizador .cot-widget > h2,
  .vlc-cotizador .cot-widget > .cot-modos,
  .vlc-cotizador .cot-widget > .cot-pista{grid-column:1 / -1}
  .vlc-cotizador .cot-widget > .cot-rejilla{grid-column:1}
  .vlc-cotizador .cot-widget > button.rd-boton{grid-column:2;min-height:52px}
}

/* ---------- 5 · LA BARRA DE CIFRAS ------------------------------------- */
.vlc-cifras{padding-block:clamp(8px,2vw,20px) clamp(32px,5vw,56px)}
.vlc-cifras .rd-cifras{
  border-top:1px solid color-mix(in srgb,var(--c-primario) 16%,transparent);
  padding-top:clamp(20px,3vw,30px);
}
.vlc-cifras .rd-cifra b{
  font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);
  letter-spacing:-.03em;color:var(--c-primario);
}

/* ---------- 6 · NACIONAL / INTERNACIONAL ------------------------------- */
.vlc-ambitos__par{
  display:grid;gap:clamp(20px,3vw,28px);
  /* Los dos tableros se apilan a todo lo ancho, no en paralelo: la tabla
     lleva cuatro columnas y en media pantalla el exprés se iba detrás de un
     scroll que nadie ve. Apilados siguen siendo dos módulos distintos —cada
     uno con su banda— y se leen enteros. */
  grid-template-columns:1fr;
}
.vlc-ambito{
  background:var(--c-fondo);
  border:1px solid color-mix(in srgb,var(--c-primario) 15%,transparent);
  border-radius:var(--radio);
  overflow:hidden;
}
.vlc-ambito__cabeza{
  display:flex;gap:14px;align-items:center;
  padding:clamp(16px,2.6vw,22px);
  background:var(--c-primario);color:#fff;
}
.vlc-ambito__cabeza .rd-antetitulo{color:#fff;margin:0 0 2px;opacity:.9}
.vlc-ambito__cabeza .rd-antetitulo::before{background:var(--c-acento)}
.vlc-ambito__cabeza h3{margin:0;color:#fff;font-size:1.12rem;line-height:1.25;font-weight:600}
.vlc-ambito__icono{
  flex:none;width:44px;height:44px;border-radius:var(--radio);
  display:grid;place-items:center;
  background:rgb(255 255 255/.14);color:#fff;
}
.vlc-ambito > :not(.vlc-ambito__cabeza){border:0;border-radius:0;margin:0}
.vlc-ambito table{width:100%}
/* Cuatro columnas en media pantalla: se aprieta el relleno y se baja el
   cuerpo, pero no se quita ninguna columna. */
.vlc-ambito .rd-tabla{font-size:.92rem}
.vlc-ambito .rd-tabla th,.vlc-ambito .rd-tabla td{
  padding-inline:clamp(10px,1.1vw,14px);
}
.vlc-ambito .rd-tabla th[scope=row]{min-width:8.5em;font-weight:600}
.vlc-ambito .rd-tabla thead th{white-space:nowrap;font-size:.74rem;letter-spacing:.08em}
.vlc-ambitos__nota{
  margin-top:clamp(18px,2.6vw,26px);max-width:80ch;
  font-size:.92rem;color:var(--c-texto-suave);
}

/* ---------- 7 · COMERCIO EXTERIOR: la foto a sangre -------------------- */
.vlc-exterior{
  display:grid;
  background:var(--c-fondo);
  position:relative;
}
.vlc-exterior__media{position:relative;overflow:hidden;background:var(--c-oscuro)}
.vlc-exterior__media .rd-imagen{margin:0;border-radius:0}
.vlc-exterior__media img{display:block;width:100%;height:100%;object-fit:cover}
.vlc-exterior__texto{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:clamp(34px,6vw,76px) max(20px,calc((100vw - var(--ancho-max)) / 2 + 20px)) clamp(34px,6vw,76px) clamp(20px,4vw,56px);
}
.vlc-exterior__texto h2{margin:.3em 0 .45em}
.vlc-exterior__texto .rd-apertura{max-width:46ch;margin-bottom:clamp(20px,3vw,28px)}

@media (min-width:900px){
  /* A sangre por la izquierda: la foto llena su mitad de la pantalla sin
     recuadro, y el texto se centra al lado tras el filo de terracota. */
  .vlc-exterior{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:480px}
  .vlc-exterior__media .rd-imagen{position:absolute;inset:0;height:100%}
  .vlc-exterior__media picture{display:block;height:100%}
  .vlc-exterior__texto{border-left:var(--vlc-regla) solid var(--c-acento)}
}
@media (max-width:899px){
  .vlc-exterior__media img{aspect-ratio:3/2}
  .vlc-exterior__texto{
    padding-inline:20px;
    border-top:var(--vlc-regla) solid var(--c-acento);
  }
}

/* ---------- 8 · BOTONES Y TARJETAS: ingeniería, no decoración ---------- */
.rd-boton{font-family:var(--f-titulos);font-weight:600;letter-spacing:.04em;font-size:1.02rem}
.rd-boton--primario{--_fondo:var(--c-acento);--_texto:#fff}

.rd-boton--primario:hover{--_fondo:#B84313}
.rd-sobre-oscuro .rd-boton--secundario{--_fondo:transparent;--_texto:#fff;--_borde:rgb(255 255 255/.5)}
.rd-sobre-oscuro .rd-boton--secundario:hover{--_borde:#fff;--_texto:#fff;--_fondo:rgb(255 255 255/.10)}
.rd-tarjeta{box-shadow:none;border-color:color-mix(in srgb,var(--c-primario) 14%,transparent)}
.rd-tarjeta--enlazada:hover{
  border-color:var(--c-acento);
  box-shadow:0 1px 2px rgb(var(--c-sombra) / .06), 0 18px 34px -14px rgb(var(--c-sombra) / .24);
}

/* ---------- 9 · LAS PÁGINAS DEL ÁRBOL: la misma casa ------------------- */
/* Las interiores abren con una banda de agua de puerto y la trama de
   contenedores: la portada lleva la foto y todas las demás, el color. Así la
   web se reconoce en cualquier página y el héroe editorial deja de ser un
   degradado claro con media pantalla vacía. */
main[data-plantilla="pilar"] .rd-heroe,
main[data-plantilla="nodo"] .rd-heroe,
main[data-plantilla="hoja"] .rd-heroe,
main[data-plantilla="contacto"] .rd-heroe,
main[data-plantilla="cotizar"] .rd-heroe,
main[data-plantilla="legal"] .rd-heroe{position:relative;background:var(--c-primario);color:#fff;isolation:isolate}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe h1{color:#fff}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-heroe__entrada{color:#DDEAEC}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-antetitulo{color:#fff}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-antetitulo::before{background:var(--c-acento)}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-patron{opacity:1}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-patron--rejilla,
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-patron--rutas{
  background-image:linear-gradient(to right,rgb(255 255 255/.10) 1px,transparent 1px),
                   linear-gradient(to bottom,rgb(255 255 255/.10) 1px,transparent 1px);
  background-size:52px 52px;
}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-patron--brillo{
  background:radial-gradient(62% 70% at 86% 4%,rgb(27 127 142/.55) 0%,transparent 72%);
}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-heroe__interior{padding-block:clamp(44px,6.5vw,86px)}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-heroe__texto{max-width:760px}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-heroe__entrada{max-width:62ch}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:var(--vlc-regla);z-index:3;
  background:linear-gradient(90deg,var(--c-acento) 0 22%,var(--c-secundario) 22% 100%);
}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-boton--primario{--_fondo:var(--c-acento);--_texto:#fff}
:is(main[data-plantilla="pilar"],main[data-plantilla="nodo"],main[data-plantilla="hoja"],main[data-plantilla="contacto"],main[data-plantilla="cotizar"],main[data-plantilla="legal"]) .rd-heroe .rd-boton--secundario{--_fondo:transparent;--_texto:#fff;--_borde:rgb(255 255 255/.5)}

/* Migas: una línea, con la tipografía de los rótulos. Barlow Condensed es
   estrecha, así que un «Inicio» a secas se queda en 39 px de ancho: el enlace
   lleva relleno propio para no bajar de los 44 px de área táctil. */
.rd-migas{font-family:var(--f-titulos);letter-spacing:.02em;font-size:.95rem}
.rd-migas a,
.rd-migas [aria-current]{
  display:inline-flex;align-items:center;
  min-height:44px;min-width:44px;justify-content:center;
  padding-inline:6px;
}

/* ---------- 10 · PIE --------------------------------------------------- */
.rd-pie{background:var(--c-oscuro)}
.rd-pie::before{
  content:"";display:block;height:var(--vlc-regla);
  background:linear-gradient(90deg,var(--c-acento) 0 16%,var(--c-secundario) 16% 44%,transparent 44%);
}

/* ---------- 11 · MOVIMIENTO SUTIL ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rd-parallax{transform:none !important}
}