/* ==========================================================================
   RDZ Traslados — sólo lo propio de la subpágina.
   La página reusa todo el sistema de index (tokens, base, layout,
   componentes) y acá se le cambia la identidad: remapeando los tokens de
   marca, los botones, los acentos y el fondo pasan del naranja al celeste
   sin tocar una sola regla de los componentes.
   ========================================================================== */

[data-pagina="traslados"] {
  --marca-400: var(--traslados-400);
  --marca-500: var(--traslados-500);
  --marca-600: var(--traslados-600);
  --marca-texto: var(--tr-texto);
  --borde-marca: rgb(31 163 224 / 0.5);

  --hero-halo: var(--tr-halo);
  --hero-halo-2: var(--tr-halo-2);
  --hero-sombra: var(--tr-sombra);

  --atm-a: rgb(31 163 224 / 0.26);
  --atm-c: rgb(11 127 184 / 0.16);
  --matiz: 199;
}

/* La barra de esta página está siempre visible: no hay catálogo detrás que
   justifique esconderla, y es el único camino de vuelta al sitio principal. */
[data-pagina="traslados"] .topbar { opacity: 1; transform: none; border-bottom-color: var(--borde); }

.topbar__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.5em 0.9em;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--velo);
  color: var(--texto-suave);
  font-size: var(--paso--1);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
}
.topbar__volver:hover { background: var(--velo-fuerte); color: var(--texto); border-color: var(--borde-fuerte); }
@media (max-width: 620px) { .topbar__volver span { display: none; } }

/* Contenedor propio: .catalogo del index reserva una columna para el panel
   lateral, y acá no hay panel. Mismo ancho y mismos márgenes, sin la grilla. */
.contenido {
  position: relative;
  z-index: var(--z-contenido);
  /* Columna angosta con márgenes anchos: es una ficha de consulta, y leída
     en un bloque acotado se ve más breve que estirada de lado a lado.
     Mismo ancho que .hero__contenido, así el hero y el cuerpo se alinean. */
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(var(--e-4), 2.5vw, var(--e-6));
  padding-bottom: var(--e-6);
}

/* --- Hero ---------------------------------------------------------------- */

/* La barra de esta página es fija y está siempre visible, así que el aire de
   arriba arranca donde termina la barra: si no, el logo le queda debajo. */
.hero--traslados {
  min-height: auto;
  padding-block: calc(var(--alto-topbar) + clamp(var(--e-4), 3.5vh, var(--e-6))) var(--e-5);
  padding-inline: clamp(var(--e-4), 2.5vw, var(--e-6));
}
.hero--traslados .hero__logo { width: min(72vw, 440px); }
.hero--traslados .hero__contenido { gap: var(--e-5); }

.traslados__titulo {
  font-size: var(--paso-2);
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--titulo-1) 8%, var(--titulo-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Servicios ----------------------------------------------------------- */

.servicios {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.servicio {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  background: linear-gradient(180deg, var(--tarjeta-1), var(--tarjeta-2));
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.servicio:hover {
  transform: translateY(-3px);
  border-color: var(--borde-marca);
  box-shadow: 0 0 0 1px var(--borde-marca), 0 18px 44px -22px rgb(31 163 224 / 0.55);
}


.servicio__nombre {
  font-family: var(--fuente-texto);
  text-transform: none;
  font-size: var(--paso-1);
  font-weight: 700;
  line-height: 1.2;
}
.servicio__texto { color: var(--texto-suave); font-size: var(--paso--1); line-height: 1.55; }

/* --- Contacto ------------------------------------------------------------ */

.contacto {
  display: grid;
  gap: var(--e-4);
  justify-items: start;
  padding: clamp(var(--e-5), 4vw, var(--e-7));
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: linear-gradient(180deg, var(--tarjeta-1), var(--tarjeta-2));
}

.contacto__numero {
  font-family: var(--fuente-display);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
  letter-spacing: 0.02em;
  color: var(--tr-texto);
  /* Relieve en claro, resplandor en oscuro: el token cambia con el tema. */
  text-shadow: var(--tr-sombra-texto);
  font-variant-numeric: tabular-nums;
}
.contacto__numero:hover { text-decoration: underline; }

.contacto__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* --- Pie ----------------------------------------------------------------- */

.pie-traslados {
  position: relative;
  z-index: var(--z-contenido);
  border-top: 1px solid var(--borde);
  background: var(--pie-grad);
  padding-block: var(--e-6);
  text-align: center;
  color: var(--texto-tenue);
  font-size: var(--paso--1);
}


/* --- Ritmo de la página ---------------------------------------------------
   Esto es información de consulta rápida, no un catálogo para recorrer: las
   secciones van más juntas que en el sitio principal y se elimina el
   scroll de más. -------------------------------------------------------- */

[data-pagina="traslados"] .seccion {
  margin-top: var(--e-3);
  padding-top: var(--e-4);
  padding-bottom: var(--e-3);
}
[data-pagina="traslados"] .seccion:first-of-type { margin-top: 0; padding-top: var(--e-2); }
[data-pagina="traslados"] .seccion__intro { margin-bottom: var(--e-3); }
/* Acá «Servicios» y «Escribinos» son rótulos de una página de consulta
   rápida, no portadas de sección como en el catálogo: van mucho más chicos. */
[data-pagina="traslados"] .seccion__titulo {
  margin-bottom: var(--e-2);
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.7rem);
  letter-spacing: 0.09em;
}
[data-pagina="traslados"] .seccion__sumario { margin-bottom: var(--e-2); }
[data-pagina="traslados"] .contenido { padding-bottom: var(--e-6); }

.servicio { padding: var(--e-4); gap: var(--e-1); }
.servicio__nombre { font-size: var(--paso-0); }
.contacto { padding: var(--e-5); gap: var(--e-3); }

/* --- La planchada, entre servicios y contacto ---------------------------
   Recorte ancho con object-fit: la foto llena la franja sin deformarse y sin
   pasarse de los márgenes, porque la franja vive dentro de .contenido. --- */

.franja-foto {
  margin: var(--e-4) 0 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-md);
}
.franja-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: center 62%;
}
@media (max-width: 460px) {
  .franja-foto img { aspect-ratio: 4 / 3; }
}

/* --- Franja de Malvinas en el pie --------------------------------------- */

.pie-traslados__franja { margin-bottom: var(--e-4); }
.pie-traslados__franja img {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin-inline: auto;
  border-radius: 3px;
}

/* --- Las dos fotos de abajo ---------------------------------------------
   Dos columnas iguales dentro de la misma caja que todo lo demás, así que
   respetan los mismos márgenes. Las dos comparten relación de aspecto y van
   con object-fit: cover, que es lo que garantiza que ninguna se estire. --- */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-4);
}
@media (max-width: 640px) {
  .galeria { grid-template-columns: 1fr; }
}

.galeria__foto {
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-md);
}
.galeria__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}