/* =====================================================
   CLEMiC — Servicio de Traslados Programados
   Estilo alineado con el tema clemic-theme existente.
   Referencia visual: /servicios/plan-salud/
   Posicionarte en Internet — PEI · v2.0
===================================================== */

:root {
  --trl-naranja:   #E87030;
  --trl-naranja-d: #C25A1E;
  --trl-naranja-l: #FEF3EC;
  --trl-azul:      #1B3F70;
  --trl-azul-l:    #EBF0F8;
  --trl-vittal:    #8B2030;
  --trl-vittal-l:  #FBEAEA;
  --trl-txt:       #1C1C1E;
  --trl-muted:     #5A5A5A;
  --trl-suave:     #9A9A9A;
  --trl-bg:        #F6F6F4;
  --trl-card:      #FFFFFF;
  --trl-borde:     #E2E2DC;
  --trl-radius:    10px;
  --trl-shadow:    0 2px 14px rgba(0,0,0,0.07);
  --trl-shadow-lg: 0 6px 28px rgba(0,0,0,0.11);
  --trl-max:       1100px;
}

/* ── BASE ── */
.trl-page { color: var(--trl-txt); }
.trl-page *, .trl-page *::before, .trl-page *::after { box-sizing: border-box; }

.trl-container {
  max-width: var(--trl-max);
  margin: 0 auto;
  padding: 0 24px;
}
.trl-section { padding: 72px 0; }
.trl-section-alt { background: var(--trl-bg); }

/* ── TIPOGRAFÍA — igual al tema ── */
.trl-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--trl-naranja);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.trl-section-title {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--trl-azul);
  line-height: 1.2;
  margin: 0 0 18px;
}
.trl-section-desc {
  font-size: 16px;
  color: var(--trl-muted);
  line-height: 1.7;
  max-width: 600px;
  margin: 0;
}
.trl-lead {
  font-size: 17px;
  color: var(--trl-txt);
  line-height: 1.75;
  margin-bottom: 20px;
}
.trl-section-header { margin-bottom: 48px; }
.trl-section-header.trl-centered { text-align: center; }
.trl-section-header.trl-centered .trl-section-desc { margin: 0 auto; }

/* ── BOTONES — al estilo del tema ── */
.trl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s;
  cursor: pointer;
  border: none;
  line-height: 1;
}
.trl-btn-primary { background: var(--trl-naranja); color: #fff; }
.trl-btn-primary:hover { background: var(--trl-naranja-d); color: #fff; }
.trl-btn-outline  { background: transparent; color: var(--trl-naranja); border: 1.5px solid var(--trl-naranja); }
.trl-btn-outline:hover  { background: var(--trl-naranja-l); }
.trl-btn-ghost    { background: rgba(255,255,255,0.14); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.trl-btn-ghost:hover    { background: rgba(255,255,255,0.24); color: #fff; }
.trl-btn-emergencia { background: var(--trl-vittal); color: #fff; font-size: 16px; padding: 13px 26px; }
.trl-btn-emergencia:hover { background: #6e1824; color: #fff; }
.trl-btn-lg { padding: 15px 32px; font-size: 16px; }
.trl-tel { color: var(--trl-naranja); font-weight: 600; text-decoration: none; }
.trl-tel:hover { text-decoration: underline; }

/* ── FULL-WIDTH OVERRIDE (quirúrgico — no toca header/footer) ──
   Solo afecta al wrapper de contenido del artículo en clemic-theme. */
body.page-template-page-traslados #primary > article > .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-template-page-traslados #primary > article {
  padding: 0 !important;
}
body.page-template-page-traslados #secondary { display: none !important; }

/* ══════════════════════════════════════════
   HERO — igual estructura que Plan Salud
══════════════════════════════════════════ */
.trl-hero {
  background: var(--trl-azul);
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.trl-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.trl-hero-img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1B3F70 0%, #2A5FA8 100%);
}
.trl-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(27,63,112,0.88) 45%, rgba(27,63,112,0.45) 100%);
  z-index: 1;
}
.trl-hero-content {
  position: relative;
  z-index: 2;
  padding: 72px 24px;
  max-width: 680px;
}
.trl-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}
.trl-hero-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 16px;
}
.trl-hero-title em { color: #FFB066; font-style: normal; }
.trl-hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}
.trl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   QUÉ ES
══════════════════════════════════════════ */
.trl-que-es { background: var(--trl-card); }
.trl-que-es-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: center;
}
.trl-aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--trl-naranja-l);
  border-left: 3px solid var(--trl-naranja);
  border-radius: 0 var(--trl-radius) var(--trl-radius) 0;
  padding: 14px 18px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--trl-txt);
  line-height: 1.6;
}
.trl-aviso-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.trl-aviso p { margin: 0; }

/* ══════════════════════════════════════════
   FOTOS — placeholders y reales
══════════════════════════════════════════ */
.trl-foto-wrap {
  position: relative;
  border-radius: var(--trl-radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--trl-bg);
}
.trl-foto-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.trl-foto-vertical { aspect-ratio: 3/4; }

.trl-foto-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg, #EBEBEA, #EBEBEA 10px, #F3F3F1 10px, #F3F3F1 20px
  );
  border: 2px dashed #CBCBC4;
  border-radius: var(--trl-radius);
  color: var(--trl-suave);
  text-align: center;
  gap: 6px;
}
.trl-foto-placeholder span { font-size: 28px; opacity: 0.45; }
.trl-foto-placeholder p   { font-size: 13px; margin: 0; line-height: 1.5; }
.trl-foto-placeholder small { font-size: 11px; opacity: 0.7; }

.trl-foto-banner {
  margin-top: 48px;
  border-radius: var(--trl-radius);
  overflow: hidden;
  height: 260px;
  position: relative;
  background: var(--trl-bg);
}
.trl-foto-banner .trl-foto-placeholder { border-radius: var(--trl-radius); }

/* ══════════════════════════════════════════
   SITUACIONES — cards estilo Plan Salud
══════════════════════════════════════════ */
.trl-situaciones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.trl-situacion-card {
  background: var(--trl-card);
  border: 1px solid var(--trl-borde);
  border-radius: var(--trl-radius);
  padding: 24px;
  transition: box-shadow .2s, transform .2s;
}
.trl-situacion-card:hover {
  box-shadow: var(--trl-shadow-lg);
  transform: translateY(-2px);
}
.trl-sit-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.trl-situacion-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--trl-azul);
  margin: 0 0 8px;
}
.trl-situacion-card p {
  font-size: 14px;
  color: var(--trl-muted);
  margin: 0;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   PROCESO — línea de tiempo vertical
   (fondo azul oscuro, como el bloque CTA
   de Plan Salud)
══════════════════════════════════════════ */
.trl-proceso { background: var(--trl-azul); }
.trl-proceso .trl-eyebrow  { color: rgba(255,255,255,0.5); }
.trl-proceso .trl-section-title { color: #fff; }
.trl-proceso .trl-section-desc  { color: rgba(255,255,255,0.65); }
.trl-proceso .trl-section-desc strong { color: #FFB066; }

.trl-pasos {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
.trl-paso {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

/* Número grande del paso */
.trl-paso-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--trl-naranja);
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  min-width: 48px;
  text-align: right;
  padding-top: 2px;
  margin-right: 20px;
}

/* Conector vertical — oculto del flujo, dibujado como pseudo */
.trl-paso-conector { display: none; }
.trl-paso { position: relative; }
.trl-paso:not(.trl-paso--last) .trl-paso-num::after {
  content: '';
  display: block;
  width: 3px;
  background: rgba(232,112,48,0.3);
  border-radius: 2px;
  position: absolute;
  left: 67px;
  top: 54px;
  bottom: 10px;
}

/* Cuerpo del paso — ocupa TODO el ancho restante sin comprimir */
.trl-paso-body {
  flex: 1 1 0%;
  min-width: 0;
  padding: 2px 0 40px;
}
.trl-paso--last .trl-paso-body { padding-bottom: 0; }

.trl-paso-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.trl-paso-body p {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  margin: 0 0 12px;
  line-height: 1.65;
}
.trl-paso-body a { color: #FFB066; }

.trl-paso-contactos { display: flex; gap: 10px; flex-wrap: wrap; }
.trl-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background .18s;
}
.trl-contact-chip:hover { background: rgba(255,255,255,0.2); color: #fff; }

.trl-datos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.trl-datos-list li {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.trl-datos-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--trl-naranja);
  flex-shrink: 0;
  margin-top: 7px;
}
.trl-paso-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,112,48,0.14);
  border: 1px solid rgba(232,112,48,0.28);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 13px;
  color: #FFB066;
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   GALERÍA
══════════════════════════════════════════ */
.trl-galeria { background: var(--trl-bg); padding-top: 0; }
.trl-galeria-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 16px;
  align-items: end;
}
.trl-galeria-grid .trl-foto-wrap:nth-child(1) { aspect-ratio: 4/3; }
.trl-galeria-grid .trl-foto-wrap:nth-child(2) { aspect-ratio: 3/4; }
.trl-galeria-grid .trl-foto-wrap:nth-child(3) { aspect-ratio: 4/3; }

/* ══════════════════════════════════════════
   COMPARATIVA
══════════════════════════════════════════ */
.trl-comparativa { background: var(--trl-card); }
.trl-tabla-wrap {
  overflow-x: auto;
  border-radius: var(--trl-radius);
  border: 1px solid var(--trl-borde);
  margin-bottom: 24px;
}
.trl-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 480px;
}
.trl-tabla thead tr { background: var(--trl-bg); }
.trl-tabla th {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--trl-muted);
  border-bottom: 2px solid var(--trl-borde);
  text-align: left;
}
.trl-tabla td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--trl-borde);
  vertical-align: top;
  line-height: 1.55;
}
.trl-tabla tr:last-child td { border-bottom: none; }
.trl-tabla tbody tr:hover td { background: var(--trl-bg); }
.trl-tabla td:first-child { color: var(--trl-muted); font-size: 13px; }

.trl-col-traslado { background: var(--trl-naranja-l); border-left: 3px solid var(--trl-naranja); color: #7A3800; }
.trl-col-vittal   { background: var(--trl-vittal-l);  border-left: 3px solid var(--trl-vittal);  color: #5A0010; }
.trl-tabla thead .trl-col-traslado,
.trl-tabla thead .trl-col-vittal { color: var(--trl-muted); }

.trl-col-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.trl-col-badge--traslado { color: var(--trl-naranja-d); }
.trl-col-badge--vittal   { color: var(--trl-vittal); }

.trl-emergencia-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--trl-vittal-l);
  border: 1px solid rgba(139,32,48,0.2);
  border-radius: var(--trl-radius);
  padding: 22px 24px;
  flex-wrap: wrap;
}
.trl-emergencia-icon { font-size: 28px; flex-shrink: 0; }
.trl-emergencia-texto { flex: 1; min-width: 160px; }
.trl-emergencia-texto strong { display: block; font-size: 15px; color: var(--trl-vittal); font-weight: 700; margin-bottom: 2px; }
.trl-emergencia-texto span   { font-size: 13px; color: var(--trl-muted); }

/* ══════════════════════════════════════════
   QUIÉNES PUEDEN ACCEDER
══════════════════════════════════════════ */
.trl-acceso { background: var(--trl-bg); }
.trl-acceso-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.trl-acceso-texto p {
  font-size: 16px;
  color: var(--trl-txt);
  line-height: 1.7;
  margin-bottom: 12px;
}
.trl-acceso-sub { color: var(--trl-muted) !important; font-size: 15px !important; }
.trl-acceso-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.trl-acceso-foto { position: relative; }
.trl-acceso-card {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: var(--trl-naranja);
  border-radius: var(--trl-radius);
  padding: 18px 22px;
  box-shadow: var(--trl-shadow-lg);
  text-align: center;
  color: #fff;
}
.trl-acceso-card-num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}
.trl-acceso-card-txt {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.85;
  margin-top: 3px;
}

/* ══════════════════════════════════════════
   CTA FINAL — igual al bloque verde de
   Plan Salud "¿Querés afiliarte?"
══════════════════════════════════════════ */
.trl-cta-final {
  background: var(--trl-azul);
  padding: 64px 0;
  text-align: center;
}
.trl-cta-title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.trl-cta-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.trl-cta-acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.trl-cta-or      { font-size: 13px; color: rgba(255,255,255,0.38); }
.trl-cta-dir     { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; text-align: left; }
.trl-cta-dir small { color: rgba(255,255,255,0.42); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .trl-que-es-grid, .trl-acceso-grid { grid-template-columns: 1fr; gap: 32px; }
  .trl-foto-vertical { aspect-ratio: 16/9; }
  .trl-situaciones-grid { grid-template-columns: repeat(2, 1fr); }
  .trl-galeria-grid { grid-template-columns: 1fr 1fr; }
  .trl-galeria-grid .trl-foto-wrap:nth-child(3) { display: none; }
  .trl-acceso-card { left: 12px; }
}
@media (max-width: 640px) {
  .trl-section { padding: 52px 0; }
  .trl-hero { min-height: auto; }
  .trl-hero-content { padding: 56px 24px; }
  .trl-situaciones-grid { grid-template-columns: 1fr; }
  .trl-galeria-grid { grid-template-columns: 1fr; }
  .trl-galeria-grid .trl-foto-wrap { display: block !important; aspect-ratio: 4/3 !important; }
  .trl-paso-num { font-size: 34px; width: 40px; }
  .trl-paso-conector { width: 18px; margin: 0 8px; }
  .trl-emergencia-cta { flex-direction: column; }
  .trl-cta-acciones { flex-direction: column; align-items: center; }
  .trl-cta-dir { text-align: center; }
  .trl-acceso-card { position: static; margin-top: 16px; display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .trl-situacion-card, .trl-btn { transition: none; }
}