/* ============================================================
   Sección "Cómo llegar en transporte público" — entorno.html
   Paleta alineada con style.css + acentos reales de Rodalies/Renfe.
   ============================================================ */
:root{
  --ct-renfe-orange: #ee5a0e;
  --ct-r1-blue: #4c8fc9;
  --ct-renfe-magenta: #a50050;
  --ct-sand: #e8d5ae;
  --ct-sand-line: #cbb187;
  --ct-sea: #3f7f99;
}

.ct-tren{
  font-family: var(--font-body);
  background: var(--wood-brown, #f3ece0);
  padding: 83.2px 0 0;
  overflow: hidden;
}
.ct-wrap{ max-width: 1508px; margin-inline: auto; padding-inline: var(--content-padding, clamp(0.77rem, 3.08vw, 2.31rem)); }

.ct-eyebrow{
  font-size: 15.6px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sun); text-align: center; margin: 0 0 15.6px;
}
.ct-title{
  font-family: var(--font-head);
  font-size: clamp(31.2px, 3.4vw, 49.4px); font-weight: 700; line-height: 1.2;
  color: var(--sea); text-align: center; margin: 0 auto; max-width: 22em; text-wrap: pretty;
}
.ct-title b{ color: var(--sea); border-bottom: 5.2px solid var(--sun); padding-bottom: 2.6px; }
.ct-sub{
  font-size: clamp(19.5px, 1.5vw, 22.1px); line-height: 1.6; color: var(--ink-soft);
  text-align: center; margin: 20.8px auto 0; max-width: 34em;
}
.ct-sub strong{ color: var(--sea); font-weight: 600; }
.ct-sub .ct-line{ display: inline-block; white-space: nowrap; margin-top: 7.8px; }

/* --- Distintivos Rodalies / Renfe --- */
.ct-r1{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1em; padding: .06em .32em; border-radius: 2.6px;
  background: var(--ct-r1-blue); color: #fff; font-weight: 700;
  letter-spacing: .02em; line-height: 1.25;
}
.ct-renfe{ color: var(--ct-renfe-magenta); font-weight: 600; letter-spacing: -.01em; }

.ct-diagram{ position: relative; max-width: 1274px; margin: 33.8px auto 0; aspect-ratio: 980/200; }
.ct-paths{ position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-node{ position: absolute; display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.ct-node--left, .ct-node--right{ gap: 2.6px; }
.ct-node--left .ct-node__name, .ct-node--right .ct-node__name{ width: 100%; text-align: center; }
/* El logo va por encima de donde terminan las lineas discontinuas de
   distancia (antes quedaba mas abajo, pegado a la via, y las lineas
   parecian cortarse en el aire en vez de apuntar hacia el). */
.ct-node--center{ left: 50%; bottom: 121px; top: auto; transform: translateX(-50%); gap: 0; }
.ct-node--center .ct-node__name{ margin-bottom: 10.4px; }
.ct-node--left{ left: 0; bottom: 0.65px; top: auto; width: 28%; }
.ct-node--right{ right: 0; bottom: 0.65px; top: auto; width: 28%; }
.ct-node__name{ font-size: clamp(18.2px, 1.5vw, 22.1px); font-weight: 600; color: var(--sea); line-height: 1.3; }
.ct-node__name span{ font-weight: 400; color: var(--ink-soft); }
.ct-node__name em{
  display: inline-block; margin-top: 7.8px; font-style: normal;
  font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sun); color: #fff; padding: 5.2px 15.6px; border-radius: 999px;
}

/* Antes era la foto del camping recortada en circulo; ahora es el logotipo
   (824x300, muy apaisado), asi que la insignia pasa de circulo a pastilla
   y la imagen usa contain (con relleno) para no recortar el logo. El padding
   interno se reduce para que el logo se vea mas grande sin agrandar la
   pastilla/borde azul exterior (que mantiene el mismo width/aspect-ratio). */
.ct-camping{
  width: clamp(163.8px, 17vw, 241.8px); aspect-ratio: 824/300; border-radius: 999px;
  object-fit: contain; padding: 4px 6px; box-sizing: border-box;
  background: #fff; border: 3.9px solid var(--sea); display: block;
}
.ct-station{ width: 100%; height: auto; max-width: 273px; aspect-ratio: 3/2; object-fit: contain; display: block; filter: drop-shadow(0 2.6px 3.9px rgba(0,0,0,.08)); }

.ct-km{
  position: absolute; font-size: clamp(18.2px, 1.5vw, 23.4px); font-weight: 700;
  background: var(--wood-brown, #f3ece0); padding: 2.6px 13px; border-radius: 5.2px;
}
.ct-km--left{ left: 36%; top: 62%; transform: translate(-50%,-50%); color: var(--ink-soft); }
.ct-km--right{ right: 31%; top: 62%; transform: translate(50%,-50%); color: var(--sun); }

/* --- Vía del tren (full-bleed) --- */
.ct-rail{ position: relative; height: 28.6px; margin-top: 0; }
.ct-rail::before, .ct-rail::after{
  content: ""; position: absolute; left: 0; right: 0; height: 0; border-top: 3.9px solid var(--ink);
}
.ct-rail::before{ top: 3.9px; }
.ct-rail::after{ top: 20.8px; }
.ct-sleepers{
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3.9px, transparent 3.9px 52px);
}
.ct-railtag{
  display: flex; align-items: center; gap: 6.5px;
  position: absolute; left: 31.2px; top: 33.8px; font-size: 14.3px; letter-spacing: .14em;
  text-transform: uppercase; color: #7a6a4e; background: var(--ct-sand); padding: 0 10.4px;
}
.ct-rail__city{
  position: absolute; bottom: 100%; margin-bottom: 7.8px; z-index: 1;
  font-size: 14.3px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--ink); padding: 3.9px 13px; border-radius: 999px;
}
.ct-rail__city--start{ left: 20.8px; }
.ct-rail__city--end{ right: 20.8px; }

.ct-beach{
  height: 62.4px; background: var(--ct-sand);
  background-image: radial-gradient(#c9b184 1.95px, transparent 2.08px);
  background-size: 33.8px 23.4px;
}
.ct-sea{
  height: 119.6px; background: var(--ct-sea); border-top: 2.6px solid var(--ct-sand-line);
  background-image: radial-gradient(circle at 50% 120%, #5b9bb3 22%, transparent 23%);
  background-size: 83.2px 36.4px;
  display: flex; align-items: center; justify-content: center;
}
.ct-sea span{ font-size: 14.3px; letter-spacing: .16em; text-transform: uppercase; color: #eaf4f8; }

.ct-notes{ max-width: 884px; margin: 0 auto; padding: 41.6px 31.2px 83.2px; display: grid; gap: 20.8px; }
.ct-note{ display: flex; gap: 18.2px; align-items: flex-start; }
.ct-note__icon{
  flex: none; width: 36.4px; height: 36.4px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 18.2px; font-weight: 700;
}
.ct-note--warn .ct-note__icon{ border: 2.6px solid var(--sun); color: var(--sun); }
.ct-note--info .ct-note__icon{ border: 2.6px solid var(--sea); color: var(--sea); }
.ct-note p{ margin: 0; font-size: 19.5px; line-height: 1.6; color: var(--ink-soft); }
.ct-note strong{ color: var(--sea); }

@media (max-width: 720px){
  .ct-tren{ padding-top: 49.28px; }
  .ct-diagram{ aspect-ratio: auto; display: grid; gap: 24.64px; justify-items: center; margin-top: 31.36px; }
  .ct-paths, .ct-km{ display: none; }
  .ct-rail{ margin-top: 36.4px; }
  .ct-node{ position: static; width: 100%; max-width: 358.4px; flex-direction: row; align-items: center; gap: 15.68px; text-align: left; }
  .ct-node--center{ order: 0; }
  .ct-node--right{ order: 1; }
  .ct-node--left{ order: 2; }
  .ct-node--center{ flex-direction: column; text-align: center; left: auto; top: auto; transform: none; }
  .ct-station{ max-width: 134.4px; margin-bottom: 0; }
  .ct-mobile-km{ display: block; font-size: 15.68px; color: var(--ink-soft); }
  .ct-sea{ height: 71.68px; }
}
@media (min-width: 721px){ .ct-mobile-km{ display: none; } }