/* ==========================================================================
   Translamy SAS — hoja de estilos del sitio
   Mundo visual: señalización de vía. Paneles, líneas de carril y marcadores
   de ruta como sistema, no como adorno.

   Índice
   01. Tokens
   02. Base y tipografía
   03. Utilidades y accesibilidad
   04. Cabecera y navegación
   05. Portada
   06. Secciones y componentes
   07. Cinta de logos en desplazamiento
   08. Publicaciones y ventana modal
   09. Contacto, mapa y pie
   10. Acordeón de preguntas frecuentes
   11. Formulario de cotización
   12. Movimiento
   ========================================================================== */

/* 01. Tokens ------------------------------------------------------------- */

:root {
  /* Paleta medida sobre el logo y el papel membretado de la empresa. */
  --verde: #009000;
  --verde-700: #0a6b14;
  --verde-900: #06380c;
  --verde-050: #eef5ee;
  --ambar: #f0c010;
  --naranja: #c9662a;
  --naranja-700: #9c4a17;
  --tinta: #12180f;
  --gris-700: #4b564c;
  --gris-400: #8b958c;
  --gris-200: #d7ded8;
  --fondo: #f7f9f7;
  --blanco: #fff;

  /* Semántica de superficie */
  --superficie: var(--blanco);
  --superficie-alt: var(--verde-050);

  /* Tipografía */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.15rem, 0.6vw + 1rem, 1.3rem);
  --t-h4: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --t-h3: clamp(1.55rem, 1.6vw + 1rem, 2.05rem);
  --t-h2: clamp(2rem, 3.2vw + 1rem, 3.1rem);
  --t-h1: clamp(2.4rem, 4.4vw + 0.9rem, 4rem);

  /* Espacio */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;
  --e9: clamp(4rem, 8vw, 7.5rem);

  --radio: 4px;
  --radio-g: 10px;
  --ancho: 1220px;
  /* Medida de lectura: en rem y no en ch. En Barlow el "0" es mucho más ancho
     que la letra media, así que 68ch daban líneas de ~90 caracteres. Con 34rem
     las líneas quedan entre 60 y 79 caracteres según el tamaño del texto. */
  --ancho-texto: 34rem;

  --sombra-1: 0 1px 2px rgb(18 24 15 / 0.06), 0 4px 14px -6px rgb(18 24 15 / 0.12);
  --sombra-2: 0 2px 4px rgb(18 24 15 / 0.07), 0 14px 34px -12px rgb(18 24 15 / 0.22);
  --sombra-cabecera: 0 1px 0 rgb(18 24 15 / 0.08), 0 10px 30px -22px rgb(18 24 15 / 0.5);

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 02. Base y tipografía --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0 0 var(--e4);
  text-transform: uppercase;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.15; }

p { margin: 0 0 var(--e4); max-width: var(--ancho-texto); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Al pasar el cursor engorda el subrayado; el color lo define cada contexto,
   para no pintar textos oscuros sobre los bloques oscuros. */
a:hover { text-decoration-thickness: 2px; }
.seccion--oscura a:not(.boton):hover,
.encabezado-pagina a:not(.boton):hover { color: var(--ambar); }
.prosa a:hover,
.contacto a:hover { color: var(--verde-900); }

strong { font-weight: 600; }

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

figure { margin: 0; }

/* Cifras alineadas en columnas y tablas */
.cifra { font-variant-numeric: tabular-nums; }

/* 03. Utilidades y accesibilidad ----------------------------------------- */

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--verde-900);
  color: var(--blanco);
  padding: var(--e3) var(--e5);
  font-weight: 600;
}
.salto-contenido:focus { left: 0; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: var(--radio);
}

/* Superficies que el diseño no dibuja pero el navegador sí */
::selection { background: var(--ambar); color: var(--tinta); }

body {
  caret-color: var(--verde-700);
  scrollbar-color: var(--gris-400) var(--fondo);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb {
  background: var(--gris-400);
  border: 3px solid var(--fondo);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--verde-700); }

/* 04. Cabecera y navegación ---------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--gris-200);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--e5);
  min-height: 5.25rem;
  padding-block: var(--e3);
}

.cabecera__logo { flex: 0 0 auto; display: block; }
.cabecera__logo img { width: clamp(150px, 17vw, 196px); height: auto; }

.nav { margin-left: auto; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__enlace {
  display: inline-block;
  padding: var(--e2) var(--e3);
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  border-radius: var(--radio);
  transition: background-color 0.18s var(--curva), color 0.18s var(--curva);
}
.nav__enlace:hover { background: var(--verde-050); color: var(--verde-900); }
.nav__enlace[aria-current="page"] { color: var(--verde-700); box-shadow: inset 0 -3px 0 var(--ambar); }

/* Desplegable de Políticas: botón real, no un enlace vacío */
.desplegable { position: relative; }

.desplegable__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--tinta);
  background: none;
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color 0.18s var(--curva);
}
.desplegable__boton:hover { background: var(--verde-050); }
.desplegable__boton svg { transition: transform 0.22s var(--curva); }
.desplegable__boton[aria-expanded="true"] { background: var(--verde-050); color: var(--verde-900); }
.desplegable__boton[aria-expanded="true"] svg { transform: rotate(180deg); }

.desplegable__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 21rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--e2);
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-2);
}
.desplegable__panel[hidden] { display: none; }

.desplegable__panel a {
  display: block;
  padding: 0.55rem var(--e3);
  color: var(--tinta);
  text-decoration: none;
  border-radius: var(--radio);
  font-size: var(--t-sm);
}
.desplegable__panel a:hover { background: var(--verde-050); color: var(--verde-900); }

/* Botón de contacto: enlace directo al correo */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.7rem 1.35rem;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform 0.18s var(--curva), background-color 0.18s var(--curva),
              color 0.18s var(--curva), border-color 0.18s var(--curva);
}
.boton--principal { background: var(--verde-700); color: var(--blanco); }
.boton--principal:hover { background: var(--verde-900); color: var(--blanco); transform: translateY(-2px); }
.boton--contorno { border-color: var(--verde-700); color: var(--verde-700); background: transparent; }
.boton--contorno:hover { background: var(--verde-700); color: var(--blanco); }
/* Secundario: contorno neutro, con borde por encima de 3:1 sobre blanco. */
.boton--secundario { border-color: var(--gris-400); color: var(--tinta); background: transparent; }
.boton--secundario:hover { border-color: var(--verde-700); color: var(--verde-900); background: var(--verde-050); }
.boton--claro { background: var(--blanco); color: var(--verde-900); }
.boton--claro:hover { background: var(--ambar); color: var(--tinta); transform: translateY(-2px); }
.boton--fantasma { border-color: rgb(255 255 255 / 0.55); color: var(--blanco); background: transparent; }
.boton--fantasma:hover { background: rgb(255 255 255 / 0.14); border-color: var(--blanco); color: var(--blanco); transform: translateY(-2px); }
.boton--grande { padding: 0.95rem 1.9rem; font-size: 1.2rem; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e3); }

/* Botón del menú móvil */
.menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  background: none;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio);
  cursor: pointer;
  color: var(--tinta);
}
.menu-boton:hover { border-color: var(--verde-700); color: var(--verde-700); }

/* 05. Portada ------------------------------------------------------------- */

.portada {
  position: relative;
  isolation: isolate;
  min-height: min(88vh, 46rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--verde-900);
}

.portada__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
}

/* Velo: oscurece arriba y abajo para que el texto siempre tenga contraste */
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(6 56 12 / 0.72) 0%, rgb(6 56 12 / 0.28) 38%, rgb(6 56 12 / 0.88) 100%),
    linear-gradient(90deg, rgb(6 56 12 / 0.55) 0%, rgb(6 56 12 / 0) 62%);
}

/* Sin ancho propio: conserva el del contenedor, que ya deja el margen lateral. */
.portada__interior {
  padding-block: var(--e9) var(--e8);
}

.portada__texto { max-width: 46rem; }

.portada h1 {
  color: var(--blanco);
  margin-bottom: var(--e5);
  letter-spacing: -0.01em;
}
.portada h1 em {
  font-style: normal;
  color: var(--ambar);
}

.portada__entrada {
  color: rgb(255 255 255 / 0.93);
  font-size: var(--t-lg);
  max-width: 40rem;
  margin-bottom: var(--e6);
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Panel de datos sobre la portada: datos verificables, no adorno */
.portada__panel {
  margin-top: var(--e7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5) var(--e7);
  padding-top: var(--e5);
  border-top: 2px dashed rgb(255 255 255 / 0.42);
  list-style: none;
  margin-inline: 0;
  padding-inline: 0;
}
.portada__panel li { color: rgb(255 255 255 / 0.9); font-size: var(--t-sm); }
.portada__panel b {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1;
}

/* 06. Secciones y componentes -------------------------------------------- */

.seccion { padding-block: var(--e9); }
.seccion--alt { background: var(--superficie-alt); }
.seccion--oscura { background: var(--verde-900); color: rgb(255 255 255 / 0.92); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }

/* Encabezado de las páginas internas: el mismo lenguaje de señal, sin foto */
.encabezado-pagina {
  position: relative;
  background: var(--verde-900);
  color: var(--blanco);
  padding-block: var(--e8) var(--e7);
}
.encabezado-pagina::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--ambar) 0 26px, transparent 26px 46px);
}
.encabezado-pagina h1 { color: var(--blanco); margin-bottom: var(--e4); max-width: 22ch; }
.encabezado-pagina p { color: rgb(255 255 255 / 0.88); font-size: var(--t-lg); }

.migas {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgb(255 255 255 / 0.72);
  margin: 0 0 var(--e4);
}
.migas a { color: rgb(255 255 255 / 0.88); text-decoration: none; }
.migas a:hover { color: var(--ambar); text-decoration: underline; }
.migas span { margin-inline: 0.4rem; }

/* Proporciones de los marcos de imagen */
.marco--43 { aspect-ratio: 4 / 3; }
.marco--32 { aspect-ratio: 3 / 2; }
.marco--169 { aspect-ratio: 16 / 9; }

.sep-arriba { margin-top: var(--e8); }
.caja-clara { background: var(--blanco); padding: var(--e5); border-radius: var(--radio-g); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.prosa { max-width: var(--ancho-texto); }
.prosa h3 { margin-top: var(--e7); }
.prosa h3:first-child { margin-top: 0; }

.seccion__cabeza { max-width: 43rem; margin-bottom: var(--e7); }
.seccion__cabeza p { font-size: var(--t-lg); color: var(--gris-700); }
.seccion--oscura .seccion__cabeza p { color: rgb(255 255 255 / 0.86); }

/* Línea de carril: separa bloques sin usar una tarjeta */
.carril {
  height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--ambar) 0 26px, transparent 26px 46px);
  border: 0;
  margin: 0;
}

/* Lista de modalidades: filas con marcador de ruta, no una rejilla de tarjetas */
.rutas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gris-200); }
.rutas > li { border-bottom: 1px solid var(--gris-200); }
.rutas__fila {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--e5);
  align-items: baseline;
  padding-block: var(--e6);
  text-decoration: none;
  color: inherit;
}
.rutas__fila:hover .rutas__nombre { color: var(--verde-700); }
.rutas__fila:hover .rutas__flecha { transform: translateX(6px); opacity: 1; }

.rutas__marca {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--verde-700);
  font-variant-numeric: tabular-nums;
}
.rutas__nombre {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  transition: color 0.18s var(--curva);
}
.rutas__desc { color: var(--gris-700); font-size: var(--t-sm); }
.rutas__flecha {
  display: inline-block;
  margin-left: var(--e3);
  opacity: 0.35;
  transition: transform 0.2s var(--curva), opacity 0.2s var(--curva);
}

/* Enlace con subrayado de carril */
.enlace-carril {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--verde-900);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--ambar), var(--ambar));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: background-size 0.25s var(--curva);
}
.enlace-carril:hover { background-size: 0% 2px; background-position: 100% 100%; }

/* Panel de imagen con encuadre propio */
.marco {
  position: relative;
  border-radius: var(--radio-g);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}
.marco img { width: 100%; height: 100%; object-fit: cover; }

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.tres-columnas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4);
}
@media (max-width: 54rem) {
  .tres-columnas { grid-template-columns: 1fr; }
}
.dos-columnas--invertida .dos-columnas__media { order: 2; }

.lista-marcada { list-style: none; margin: 0 0 var(--e5); padding: 0; }
.lista-marcada li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--e3);
  max-width: var(--ancho-texto);
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.62em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--verde-700);
  box-shadow: 0 -0.3rem 0 -0.16rem var(--ambar);
}

/* Franja de cifras verificables */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--e5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.datos li { border-top: 2px solid var(--ambar); padding-top: var(--e4); }
.datos b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}
.seccion--oscura .datos li { border-top-color: var(--ambar); }
.seccion--oscura .datos b { color: var(--blanco); }
.datos span { font-size: var(--t-sm); color: var(--gris-700); }
.seccion--oscura .datos span { color: rgb(255 255 255 / 0.84); }

/* Rejilla de certificaciones */
.sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sellos img { height: 3.4rem; width: auto; }
/* La franja de certificados se muestra a su tamaño natural dentro del ancho
   disponible: encogida en una caja grande quedaba perdida. */
.sellos--grandes { justify-content: center; }
.sellos--grandes img { height: auto; width: auto; max-width: 100%; max-height: 11rem; }

/* 07. Cinta de logos en desplazamiento ----------------------------------- */

/* Contenedor: recorta la pista y difumina los dos extremos, para que los logos
   aparezcan y desaparezcan en vez de cortarse contra el borde. */
.cinta {
  overflow: hidden;
  padding-block: var(--e6);
  border-block: 1px solid var(--gris-200);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

/* Pista: mide lo que ocupan los dos grupos y se desplaza la mitad de su ancho,
   que es exactamente un grupo. Lineal, así la velocidad es constante y el
   relevo entre la primera copia y la segunda no se nota. */
.cinta__pista {
  display: flex;
  width: max-content;
  animation: cinta-desplazar 70s linear infinite;
}

.cinta__grupo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada celda mide lo mismo y centra su logo: el centrado se mantiene en
   cualquier ancho y el desplazamiento no tiene costura. */
.cinta__grupo li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(8rem, 13vw, 11rem);
  padding-inline: var(--e4);
}

.cinta__grupo img {
  max-width: 100%;
  max-height: clamp(2.4rem, 4.4vw, 3.4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s var(--curva);
}

/* Al pasar el cursor por encima, la cinta se detiene en el punto en que está
   (sin saltar ni retroceder) y el logo señalado crece un poco. La parada es
   instantánea porque el navegador no interpola `animation-play-state`: lo que
   se evita es el salto, no el cambio de velocidad. */
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grupo li:hover img { transform: scale(1.1); }

@keyframes cinta-desplazar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Pantallas medianas: mismos logos, más pequeños y siempre centrados. */
@media (max-width: 64rem) {
  .cinta__grupo li {
    width: clamp(7rem, 16vw, 9rem);
    padding-inline: var(--e3);
  }
  .cinta__grupo img { max-height: clamp(2rem, 4.6vw, 2.6rem); }
}

/* Móvil: la cinta ocupa todo el ancho, con menos difuminado en los extremos.
   La celda se mantiene ancha para que los logos con texto no queden ilegibles:
   con menos separación entre celdas caben casi los mismos y se leen mejor. */
@media (max-width: 40rem) {
  .cinta {
    padding-block: var(--e5);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  }
  .cinta__grupo li {
    width: clamp(6.5rem, 28vw, 8rem);
    padding-inline: var(--e1);
  }
  .cinta__grupo img { max-height: 2.1rem; }
  .cinta__pista { animation-duration: 45s; }
}

/* Con movimiento reducido la cinta queda quieta, mostrando los mismos logos. */
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta__grupo li:hover img { transform: none; }
}

/* 08. Publicaciones y ventana modal -------------------------------------- */

.publicaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--e6);
}

.publicacion {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-g);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow 0.25s var(--curva), transform 0.25s var(--curva);
}
.publicacion:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); }
.publicacion__media { aspect-ratio: 16 / 10; overflow: hidden; }
.publicacion__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--curva); }
.publicacion:hover .publicacion__media img { transform: scale(1.04); }
.publicacion__cuerpo { padding: var(--e5); display: flex; flex-direction: column; flex: 1; }
.publicacion__fecha {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-700);
  font-weight: 600;
}
/* El título de la tarjeta usa el tamaño de h3: a tamaño de h2 (49 px) se comía
   la tarjeta y ocupaba cuatro líneas. */
.publicacion h2 { font-size: var(--t-h3); margin: var(--e2) 0 var(--e3); }
.publicacion p { font-size: var(--t-sm); color: var(--gris-700); }
.publicacion__pie { margin-top: auto; padding-top: var(--e4); }

.boton-texto {
  background: none;
  border: 0;
  padding: var(--e2) 0;
  font: inherit;
  font-weight: 600;
  color: var(--verde-700);
  cursor: pointer;
  text-align: left;
}
.boton-texto:hover { color: var(--verde-900); }

/* Ventana modal nativa */
dialog {
  width: min(100% - 2rem, 46rem);
  max-height: min(88vh, 52rem);
  padding: 0;
  border: 0;
  border-radius: var(--radio-g);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
dialog::backdrop { background: rgb(6 30 10 / 0.62); backdrop-filter: blur(3px); }
dialog[open] { animation: aparecer 0.28s var(--curva) both; }

.modal__barra {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  background: var(--verde-900);
  color: var(--blanco);
}
.modal__titulo {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.modal__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-radius: var(--radio);
  color: var(--blanco);
  cursor: pointer;
  flex: 0 0 auto;
}
.modal__cerrar:hover { background: rgb(255 255 255 / 0.14); border-color: var(--blanco); }

.modal__cuerpo { padding: var(--e6) var(--e5) var(--e7); overflow-y: auto; max-height: calc(88vh - 4rem); }
.modal__cuerpo h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: var(--e3); }
.modal__cuerpo h3 { font-size: var(--t-h4); margin: var(--e6) 0 var(--e3); text-transform: none; letter-spacing: 0; }
.modal__cuerpo img { border-radius: var(--radio); margin-bottom: var(--e4); }
.modal__meta { font-size: var(--t-sm); color: var(--gris-700); margin-bottom: var(--e5); }

.pasos { list-style: none; counter-reset: paso; margin: 0 0 var(--e5); padding: 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--e4);
  max-width: var(--ancho-texto);
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--verde-050);
  border: 2px solid var(--verde-700);
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  color: var(--verde-900);
}

.enlaces-video {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  border-top: 1px solid var(--gris-200);
}
.enlaces-video li { border-bottom: 1px solid var(--gris-200); }
.enlaces-video a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) 0;
  text-decoration: none;
  color: inherit;
}
.enlaces-video a:hover { color: var(--verde-700); }
.enlaces-video strong { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.02em; }
.enlaces-video span { color: var(--gris-700); font-size: var(--t-sm); text-align: right; }

.aviso {
  border: 2px dashed var(--verde-700);
  border-radius: var(--radio);
  padding: var(--e4) var(--e5);
  background: var(--verde-050);
  font-size: var(--t-sm);
  margin-bottom: var(--e5);
}

/* 09. Contacto, mapa y pie ------------------------------------------------ */

.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--e6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.contacto > li { border-top: 2px solid var(--ambar); padding-top: var(--e4); }
.contacto h3 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--e3);
}
.contacto p, .contacto a { font-size: var(--t-sm); color: var(--gris-700); }
.contacto a { color: var(--verde-700); }

/* En los bloques oscuros los datos y enlaces deben leerse; los botones
   conservan su propio color. */
.seccion--oscura a:not(.boton) { color: rgb(255 255 255 / 0.92); }
.seccion--oscura a:not(.boton):hover { color: var(--ambar); }
.seccion--oscura .contacto p { color: rgb(255 255 255 / 0.88); }

.mapa-enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 600;
  text-decoration: none;
  color: var(--verde-700);
}

.pie {
  background: var(--verde-900);
  color: rgb(255 255 255 / 0.82);
  padding-block: var(--e8) var(--e5);
  font-size: var(--t-sm);
}
.pie a { color: rgb(255 255 255 / 0.9); text-decoration: none; }
.pie a:hover { color: var(--ambar); text-decoration: underline; }

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e6);
  padding-bottom: var(--e6);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}
.pie__logo { width: 190px; background: var(--blanco); padding: var(--e3); border-radius: var(--radio); }
.pie h3 {
  font-size: 1rem;
  letter-spacing: 0.09em;
  margin-bottom: var(--e4);
  color: var(--blanco);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--e3); }

.pie__redes { display: flex; gap: var(--e3); margin-top: var(--e5); }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radio);
  transition: background-color 0.2s var(--curva), border-color 0.2s var(--curva), color 0.2s var(--curva);
}
.pie__redes a:hover { background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }

.pie__sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e5);
  padding-block: var(--e5);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}
.pie__sellos img { height: 3rem; width: auto; }
.pie__sellos .pie__sello-claro {
  background: var(--blanco);
  padding: var(--e2) var(--e3);
  border-radius: var(--radio);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  justify-content: space-between;
  padding-top: var(--e5);
}

/* 10. Acordeón de preguntas frecuentes ----------------------------------- */

/* Una pregunta por fila, separadas con el filete discontinuo de carril en vez
   de tarjetas. Cada encabezado envuelve un botón real, así que se abre con el
   teclado y con lector de pantalla. */
.acordeon { max-width: 43rem; }

.acordeon__titulo {
  margin: 0;
  border-top: 1px dashed var(--gris-200);
}
.acordeon__titulo:first-of-type { border-top: 0; }

.acordeon__boton {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  width: 100%;
  margin-inline: calc(var(--e3) * -1);
  padding: var(--e5) var(--e3);
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radio);
  transition: background-color 0.18s var(--curva), color 0.18s var(--curva);
}
/* Sin JavaScript el botón no responde: se ve como la pregunta de una lista. */
html.con-js .acordeon__boton { cursor: pointer; }
html.con-js .acordeon__boton:hover { background: var(--verde-050); }
.acordeon__boton[aria-expanded="true"] { color: var(--verde-900); }

/* La flecha solo aparece cuando el acordeón funciona de verdad. */
.acordeon__icono { display: none; }
html.con-js .acordeon__icono {
  display: block;
  flex: 0 0 auto;
  margin-top: 0.6em;
  color: var(--verde);
  transition: transform 0.25s var(--curva);
}
.acordeon__boton[aria-expanded="true"] .acordeon__icono { transform: rotate(180deg); }

/* Abrir y cerrar anima la altura de una fila de rejilla (0fr → 1fr): llega
   sola hasta la altura real del texto, sin medir nada por script. El estado
   cerrado lo marca el script, no el CSS: si el script no carga, las cuatro
   respuestas se ven como antes. Cerrado, el panel no recibe el foco ni lo lee
   el lector de pantalla (el script le pone inert; visibility lo respalda). */
.acordeon__panel {
  display: grid;
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s var(--curva), visibility 0.35s;
}
.acordeon__panel[data-cerrado] {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.acordeon__interior {
  min-height: 0;
  overflow: hidden;
}
.acordeon__interior p {
  max-width: var(--ancho-texto);
  margin: 0;
  padding-bottom: var(--e5);
  color: var(--gris-700);
}

@media (max-width: 40rem) {
  .acordeon__boton {
    gap: var(--e3);
    padding: var(--e4) var(--e2);
    margin-inline: calc(var(--e2) * -1);
  }
  .acordeon__interior p { padding-bottom: var(--e4); }
}

/* Cierre de página: titular y una sola acción, en una banda equilibrada. */
.cierre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e5) var(--e7);
  align-items: center;
}
.cierre h2 { margin-bottom: var(--e3); }
/* La banda de cierre no lleva relleno inferior: el pie ya trae el suyo y
   entre los dos no debe quedar un hueco oscuro de relleno. */
.seccion--cierre { padding-block: var(--e8) 0; }
.cierre p { max-width: 36rem; }
.cierre__accion { margin: 0; }

@media (max-width: 54rem) {
  .cierre { grid-template-columns: 1fr; }
}

/* 11. Formulario de cotización ------------------------------------------- */

/* El correo es el canal de cotización. El formulario recoge lo que la propia
   solicitud pide —modalidad, personas, origen y destino, frecuencia— y arma el
   mensaje; el enlace de WhatsApp lleva el mismo texto. Sin JavaScript el
   formulario sigue visible y su atributo action abre el gestor de correo con
   los campos: nunca hay un toque que no haga nada. */
.cotizacion-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 54rem) {
  .cotizacion-cuerpo { grid-template-columns: 1fr; }
}

/* El formulario tiene su propia página, sobre fondo claro: una tarjeta blanca
   que flota sobre el fondo con la sombra del sistema. Sin banda verde. */
.cotizador {
  background: var(--blanco);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-1);
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
}

/* Título de la zona de recuperación del 404: cierra el salto de jerarquía
   entre el h1 de la banda y los h3 del pie. */
.error-404__titulo { font-size: var(--t-h4); margin-bottom: var(--e4); }

/* Tres salidas en columna: sin envolver en dos filas y dejar una huérfana.
   Todas comparten ancho mínimo para que el borde derecho no quede dentado. */
.acciones--pila {
  display: grid;
  gap: var(--e3);
  justify-items: start;
}
.acciones--pila .boton { min-width: 17rem; }

.formulario { margin: 0; }

.formulario__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4) var(--e5);
  margin-bottom: var(--e5);
}

.campo { margin: 0; }
.campo--ancho { grid-column: 1 / -1; }

.campo__etiqueta {
  display: block;
  margin-bottom: var(--e2);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* Marca de obligatoriedad: el requisito se conoce antes de enviar, no después. */
.campo__marca {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--gris-700);
}

.campo__control {
  width: 100%;
  padding: 0.62rem 0.8rem;
  font: inherit;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--tinta);
  background: var(--blanco);
  /* Gris-400 sobre blanco da 3,1:1: el borde de un control se ve. */
  border: 1px solid var(--gris-400);
  border-radius: var(--radio);
  transition: border-color 0.18s var(--curva), background-color 0.18s var(--curva);
}
.campo__control::placeholder { color: var(--gris-700); }
.campo__control:hover { border-color: var(--verde-700); }
.campo__control:focus { border-color: var(--verde-700); }
/* El campo solo se marca tras interactuar: uno obligatorio vacío no nace en rojo. */
.campo__control:user-invalid { border-color: var(--naranja); background: rgb(201 102 42 / 0.07); }

/* El aviso nombra el problema: el color por sí solo no comunica. */
.campo__alerta {
  display: none;
  margin-top: var(--e2);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--naranja-700);
}
.campo__control:user-invalid ~ .campo__alerta { display: block; }

textarea.campo__control { min-height: 7rem; resize: vertical; }

/* Misma flecha que el desplegable del menú, dibujada en el control. */
select.campo__control {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2312180f' stroke-width='2'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
select.campo__control option { color: var(--tinta); background: var(--blanco); }

.formulario__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e4); }

.formulario__nota { font-size: var(--t-sm); color: var(--gris-700); max-width: 42rem; }

/* Datos de contacto junto al formulario: la misma lista de siempre, en columna. */
.cotizacion-datos__titulo { font-size: var(--t-h4); margin-bottom: var(--e4); }
.cotizacion-datos .contacto { grid-template-columns: 1fr; gap: var(--e5); }

@media (max-width: 40rem) {
  .formulario__rejilla { grid-template-columns: 1fr; }
  .formulario__acciones .boton { flex: 1 1 100%; justify-content: center; }
}

/* Barra de acción fija: en móvil la cotización está siempre a un toque.
   Se retira sola mientras el formulario está a la vista. */
.barra-acciones {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  gap: var(--e2);
  padding: var(--e2) var(--e2) calc(var(--e2) + env(safe-area-inset-bottom, 0px));
  background: rgb(6 56 12 / 0.97);
  border-top: 1px solid rgb(255 255 255 / 0.18);
  transform: translateY(110%);
  transition: transform 0.3s var(--curva);
}
.barra-acciones[data-visible="true"] { transform: none; }
.barra-acciones .boton {
  flex: 1 1 0;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

@media (max-width: 54rem) {
  html.con-js .barra-acciones { display: flex; }
  html.con-js body { padding-bottom: 4.9rem; }
}

/* 12. Movimiento ---------------------------------------------------------- */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Un solo gesto de entrada: la portada se arma, el resto aparece al llegar. */
.portada h1 { animation: subir 0.75s var(--curva) both; }
.portada__entrada { animation: subir 0.75s 0.1s var(--curva) both; }
.portada__acciones { animation: subir 0.75s 0.2s var(--curva) both; }
.portada__panel { animation: subir 0.75s 0.3s var(--curva) both; }

.revelar { opacity: 1; }
html.con-js .revelar { opacity: 0; }
html.con-js .revelar.visible { animation: subir 0.7s var(--curva) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.con-js .revelar { opacity: 1; }
}

/* Adaptación a pantallas -------------------------------------------------- */

@media (max-width: 62rem) {
  .rutas__fila { grid-template-columns: 4rem minmax(0, 1fr); }
  .rutas__desc { grid-column: 2; margin-top: var(--e3); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 54rem) {
  .menu-boton { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 5.25rem;
    margin: 0;
    background: var(--superficie);
    border-bottom: 1px solid var(--gris-200);
    box-shadow: var(--sombra-2);
    padding: var(--e4) var(--e5) var(--e6);
    max-height: calc(100vh - 5.25rem);
    overflow-y: auto;
  }
  /* Sin JavaScript el menú se muestra siempre: solo se oculta cuando el
     documento lleva la marca con-js que añade el propio script. */
  html.con-js .nav { display: none; }
  html.con-js .nav[data-abierto="true"] { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace, .desplegable__boton { width: 100%; font-size: 1.2rem; padding: var(--e3) var(--e2); }
  .desplegable__panel {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--gris-200);
    background: var(--verde-050);
    border-radius: 0;
    max-height: none;
    margin: 0 0 var(--e3) var(--e2);
  }
  .cabecera__interior { gap: var(--e2); }
  .cabecera__acciones { margin-left: 0; }
  .cabecera__acciones .boton { padding: 0.55rem 0.85rem; font-size: 0.98rem; letter-spacing: 0.03em; }
  .dos-columnas { grid-template-columns: 1fr; }
  .dos-columnas--invertida .dos-columnas__media { order: 0; }
  .pie__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
  .contenedor { width: min(100% - 1.75rem, var(--ancho)); }
  .portada__panel { gap: var(--e4) var(--e5); }
  .rutas__fila { grid-template-columns: 1fr; gap: var(--e2); }
  .rutas__desc { grid-column: 1; }
  .cabecera__logo img { width: 132px; }
}