/* =====================================================================
   empresasdetransportemalaga.com — capa de estilo PROPIA
   ---------------------------------------------------------------------
   Encima de `cabitrans/ui`, nunca en su lugar: aquí sólo va lo que hace
   que esta web NO se parezca a Bilbao ni a Madrid. Todo sale de las
   variables del contrato común (`--c-*`, `--radio*`, `--u`, `--f-*`):
   si se cambia la paleta en config/marca.php, esto la sigue.

   La idea del kit: «Costa del Sol B2B, tecnológica y ligera». Eso aquí
   es una PÁGINA DE PRODUCTO — luz, aire, turquesa de agua, el coral
   reservado a la acción y un punto como firma — no un folleto del
   sector, que es lo que se obtiene dejando la plantilla tal cual.
   ===================================================================== */

/* ------------------------------------------------- 1 · LA APERTURA
   Héroe claro partido: texto a la izquierda y el cotizador flotando a
   la derecha, con la foto del parque empresarial sangrando por detrás
   y por debajo. En móvil la foto pasa a ser una banda bajo el texto,
   para que el formulario no caiga nunca encima de una imagen. */
.mlg-apertura{position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-superficie)}
.mlg-apertura__lavado{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 60% at 8% 0%, color-mix(in srgb,var(--c-primario) 14%,transparent) 0%, transparent 72%),
    radial-gradient(50% 50% at 96% 96%, color-mix(in srgb,var(--c-acento) 9%,transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--c-primario) 5%,var(--c-superficie)) 0%, var(--c-fondo) 100%)}
.mlg-apertura__puntos{z-index:1;opacity:.45}

.mlg-apertura__foto{position:absolute;z-index:1;inset:0 0 auto 0;height:clamp(200px,52vw,320px);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);opacity:.5}
.mlg-apertura__foto .rd-imagen,.mlg-apertura__foto img{width:100%;height:100%;object-fit:cover}

.mlg-apertura__interior{position:relative;z-index:3;
  padding-block:clamp(188px,46vw,240px) clamp(36px,6vw,56px);
  display:grid;gap:clamp(28px,4vw,48px);align-items:start}

.mlg-apertura__texto{min-width:0;max-width:62ch}
.mlg-apertura h1{font-size:calc(clamp(2.05rem,1.3rem + 3vw,3.75rem) * var(--escala));
  letter-spacing:-.038em;margin-bottom:calc(var(--u) * 5)}
.mlg-apertura__entrada{font-size:clamp(1.06rem,.98rem + .55vw,1.28rem);line-height:1.6;
  max-width:54ch;color:var(--c-texto-suave)}
.mlg-apertura__acciones{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 3);margin-top:calc(var(--u) * 7)}
/* El coral es el único color de la portada que pide ser pulsado: el CTA
   lleva su propia sombra para que se levante del lavado turquesa. */
.mlg-apertura__acciones .rd-boton--acento{box-shadow:0 10px 24px -10px color-mix(in srgb,var(--c-acento) 72%,transparent)}
.mlg-apertura__acciones .rd-boton--secundario{background:color-mix(in srgb,var(--c-superficie) 86%,transparent);
  backdrop-filter:blur(6px)}
.mlg-apertura__pruebas{list-style:none;display:flex;flex-wrap:wrap;
  gap:calc(var(--u) * 2.5) calc(var(--u) * 6);margin-top:calc(var(--u) * 7);
  padding-top:calc(var(--u) * 6);border-top:1px solid var(--c-borde);
  font-size:.95rem;color:var(--c-texto-suave)}
.mlg-apertura__pruebas li{display:flex;align-items:center;gap:calc(var(--u) * 2)}
.mlg-apertura__pruebas .rd-icono{color:var(--c-primario);flex:none}

/* La CHAPA: el antetítulo de esta web lleva un punto sólido delante, el
   mismo detalle que el logotipo. Es la firma de la identidad. */
.mlg-chapa{display:inline-flex;align-items:center;gap:calc(var(--u) * 2.5);
  margin:0 0 calc(var(--u) * 4);padding:calc(var(--u) * 1.75) calc(var(--u) * 3.5);
  border:1px solid color-mix(in srgb,var(--c-primario) 30%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--c-primario) 8%,var(--c-superficie));
  font-family:var(--f-texto);font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-primario-texto)}
.mlg-chapa__punto{width:8px;height:8px;border-radius:50%;background:var(--c-acento);flex:none}

/* El panel del cotizador: tarjeta blanca elevada, el objeto más cercano
   de la pantalla. Borde turquesa fino para que no sea una caja neutra. */
.mlg-apertura__panel{position:relative;min-width:0;
  padding:clamp(18px,calc(var(--u) * 5),26px);
  background:var(--c-superficie);border:1px solid color-mix(in srgb,var(--c-primario) 22%,var(--c-borde));
  border-radius:calc(var(--radio-l) + 4px);
  box-shadow:0 2px 4px -2px rgb(var(--c-sombra)/.1),
             0 28px 56px -24px rgb(var(--c-sombra)/.28),
             0 0 0 8px color-mix(in srgb,var(--c-primario) 5%,transparent)}
.mlg-apertura__panel::before{content:"";position:absolute;inset:auto auto calc(100% + 10px) 0;
  width:34px;height:4px;border-radius:4px;background:var(--c-acento)}

@media (min-width:1060px){
  .mlg-apertura__foto{inset:0 0 0 auto;width:52%;height:100%;
    /* El degradado es HORIZONTAL (90deg) a propósito: con un ángulo, el
       borde izquierdo de la foto se ve como una costura vertical en la
       parte alta, porque allí el degradado ya va adelantado. */
    mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.35) 34%,#000 72%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.35) 34%,#000 72%);
    width:58%;opacity:.66}
  .mlg-apertura h1{max-width:14ch}
  .mlg-apertura__entrada{max-width:46ch}
  .mlg-apertura__interior{grid-template-columns:minmax(0,1fr) minmax(0,470px);align-items:center;
    padding-block:clamp(72px,7vw,108px) clamp(64px,6vw,96px)}
}
@media (max-width:1059px){
  /* La foto arriba y el texto debajo: el titular nunca sobre la imagen. */
  .mlg-apertura__texto{padding-top:calc(var(--u) * 2)}
}

/* ------------------------------------------------- 2 · EL RAÍL
   Ficha técnica: las modalidades del árbol con su límite, en una tira
   fina pegada al borde del héroe. En móvil se desliza en horizontal
   dentro de su contenedor (nunca empuja la página). */
.mlg-rail{position:relative;z-index:3;border-top:1px solid var(--c-borde);
  background:color-mix(in srgb,var(--c-primario) 4%,var(--c-superficie))}
/* Sin scroll horizontal a propósito: una tira que se desliza es un desborde
   para el revisor y, en móvil, un sitio donde se esconden dos modalidades.
   Aquí envuelve: 1 columna a 360, 2 en tablet y las cinco en línea arriba. */
.mlg-rail__lista{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--c-borde);
  border-inline:1px solid var(--c-borde)}
.mlg-rail__item{background:color-mix(in srgb,var(--c-primario) 4%,var(--c-superficie))}
.mlg-rail__item a{display:flex;flex-direction:column;gap:calc(var(--u) * 1.25);
  min-height:68px;justify-content:center;padding:calc(var(--u) * 3.5) calc(var(--u) * 4);
  text-decoration:none;color:inherit;transition:background-color var(--t-rapida) ease}
.mlg-rail__item a:hover{background:color-mix(in srgb,var(--c-primario) 10%,transparent)}
.mlg-rail__nombre{display:flex;align-items:center;gap:calc(var(--u) * 2);
  font-family:var(--f-titulos);font-weight:700;font-size:.95rem;
  letter-spacing:-.02em;color:var(--c-texto)}
.mlg-rail__nombre .rd-icono{color:var(--c-primario);flex:none}
.mlg-rail__dato{font-size:.83rem;line-height:1.45;color:var(--c-texto-tenue);
  overflow-wrap:anywhere}
@media (min-width:600px){.mlg-rail__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){
  .mlg-rail__lista{grid-template-columns:repeat(5,minmax(0,1fr));border-inline:0;
    background:var(--c-borde)}
  .mlg-rail__item a{min-height:80px;padding:calc(var(--u) * 4) calc(var(--u) * 5)}
}

/* La matriz de servicios: cinco modalidades. Con la rejilla de la red la
   quinta se queda sola en una fila nueva; aquí van 3+2 en tablet y las
   cinco en línea en escritorio ancho. */
@media (min-width:1180px){
  .mlg-servicios .rd-servicios{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mlg-servicios .rd-servicio{padding:calc(var(--u) * 5)}
  .mlg-servicios .rd-servicio h3{font-size:1.02rem}
}
/* Las etiquetas de la red van en una línea; en cinco columnas una como
   «40 kg por bulto · 900 kg por envío» se sale de la tarjeta. Aquí
   envuelven. */
.mlg-servicios .rd-etiqueta{white-space:normal;text-align:left}

/* --------------------------------------- 3 · EL SISTEMA, en clave Málaga
   Mismos componentes de la red, otro acabado: superficies más limpias,
   hairline turquesa en vez de gris, y el punto del logotipo repetido en
   los antetítulos. Es lo que hace que una página interior también se
   reconozca como de esta web. */

/* El antetítulo de la red es una rayita; aquí es un punto coral. */
.rd-antetitulo{font-size:.82rem;letter-spacing:.1em;font-weight:700}
.rd-antetitulo::before{width:8px;height:8px;border-radius:50%;background:var(--c-acento)}
.rd-seccion--oscura .rd-antetitulo::before{background:var(--c-acento)}

/* Tarjetas: borde hairline, sombra baja y un hilo turquesa que aparece
   al pasar por encima. Nada de elevaciones grandes: la web es ligera. */
.rd-tarjeta{border-color:color-mix(in srgb,var(--c-primario) 14%,var(--c-borde));
  box-shadow:0 1px 2px rgb(var(--c-sombra)/.04)}
.rd-tarjeta--enlazada::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  border-radius:0 0 var(--radio-l) var(--radio-l);background:var(--c-primario);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-media) ease}
.rd-tarjeta--enlazada:hover::after{transform:scaleX(1)}
.rd-tarjeta--enlazada:hover{transform:translateY(-2px);
  box-shadow:0 18px 34px -20px rgb(var(--c-sombra)/.26);
  border-color:color-mix(in srgb,var(--c-primario) 38%,transparent)}

/* COTIZAR ES CORAL, SIEMPRE Y EN TODAS PARTES. El kit reserva el coral a
   la acción «para que cotizar sea siempre el punto más brillante de la
   pantalla», y cotizar se pide desde cinco sitios: la cabecera, el héroe,
   el botón del propio cotizador, el cierre y la barra fija del móvil. Si
   unos salen en turquesa y otros en coral, la portada parece de dos manos
   y el ojo deja de saber dónde está la acción. El turquesa se queda para
   lo demás (enlaces, iconos, bordes). */
.rd-cabecera__acciones .rd-boton--primario,
.rd-heroe__acciones .rd-boton--primario,
.rd-cierre__acciones .rd-boton--primario,
.rd-cta-movil .rd-boton--primario,
.cot-widget .rd-boton--primario{--_fondo:var(--c-acento);--_texto:var(--c-acento-contraste)}
.rd-cabecera__acciones .rd-boton--primario:hover,
.rd-heroe__acciones .rd-boton--primario:hover,
.rd-cierre__acciones .rd-boton--primario:hover,
.rd-cta-movil .rd-boton--primario:hover,
.cot-widget .rd-boton--primario:hover{--_fondo:color-mix(in srgb,var(--c-acento) 88%,#000)}

/* Botones de pastilla: el radio 16 del kit en los botones se lee como
   cápsula, que es el gesto «de producto» del brief. */
.rd-boton{border-radius:999px}
.rd-boton--acento:hover{--_fondo:color-mix(in srgb,var(--c-acento) 88%,#000)}

/* El cierre y la franja del mapa: degradado de agua, no un azul plano. */
.rd-seccion--oscura,.mlg-cierre .rd-cierre,.mlg-cierre{
  background:linear-gradient(160deg,var(--c-secundario) 0%,var(--c-oscuro) 62%)}
.mlg-mapa{position:relative}

/* Las cifras, como pie de datos del mapa: sin caja, en línea. */
.mlg-cifras{background:var(--c-superficie);border-bottom:1px solid var(--c-borde)}

/* Los pasos de la red son tarjetas numeradas; aquí el número es un
   numeral grande en Sora, casi un filigrana. */
.mlg-pasos .rd-paso__numero,.mlg-pasos .rd-pasos__numero{font-family:var(--f-titulos);
  font-weight:700;letter-spacing:-.04em}

/* La recogida: texto a un lado, la foto de preparación de pedidos al
   otro. Es la segunda imagen del kit y la única parte de la portada que
   enseña la operativa, que es lo que entienden comercio y e-commerce. */
.mlg-recogida__interior{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.mlg-recogida__texto{max-width:52ch}
.mlg-recogida__texto h2{margin-bottom:calc(var(--u) * 4)}
.mlg-recogida__accion{margin-top:calc(var(--u) * 6)}
.mlg-recogida__foto{margin:0}
.mlg-recogida__foto .rd-imagen{border-radius:var(--radio-l);
  box-shadow:0 24px 48px -30px rgb(var(--c-sombra)/.34)}
@media (min-width:1060px){
  .mlg-recogida__interior{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
}

/* La tabla de tránsitos en Sora tabular: dato, no prosa. */
.mlg-transitos table{font-variant-numeric:tabular-nums}

/* Patrón de puntos tenue en las secciones claras de superficie, para que
   el aire del héroe siga presente al bajar. */
.rd-seccion--superficie{position:relative;isolation:isolate}
.rd-seccion--superficie::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--c-primario) 22%,transparent) 1.1px,transparent 1.1px);
  background-size:26px 26px;opacity:.5}

/* El logotipo: el punto en coral y la palabra fuerte en turquesa. */
.rd-logo__detalle{color:var(--c-acento)}
.rd-logo__fuerte{color:var(--c-primario-texto)}

@media (prefers-reduced-motion:reduce){
  .rd-tarjeta--enlazada:hover,.rd-boton:hover{transform:none}
  .rd-tarjeta--enlazada::after{transition:none}
}