/* ════════════════════════════════════════════
   RESTRICCIONES.CSS — Estilos exclusivos de
   la página de restricciones de acercamiento.
   Tono claro y humano, sin frialdad legal.
   Se carga DESPUÉS de base.css y subpaginas.css
   ════════════════════════════════════════════ */


/* ── CONTENEDOR PRINCIPAL ─────────────────────
   Sin gap: los bloques se separan por color
   de fondo. Sin padding lateral: llegan
   de borde a borde dentro del max-w.
   ─────────────────────────────────────────── */

.rs-container {
  width: 100%;
  max-width: var(--max-w);
  padding: 0 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ── ETIQUETA DE SECCIÓN ──────────────────────
   Naranja, uppercase, pequeña.
   Versión clara (.rs-tag-light) para fondos oscuros.
   ─────────────────────────────────────────── */

.rs-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 0.4rem;
}

.rs-tag-light { color: var(--orange); }   /* Igual — naranja funciona en negro también */


/* ── DECLARACIÓN DE INTENCIÓN ─────────────────
   Franja de apertura. Fondo negro, texto grande
   y cálido que establece el espíritu de la página
   antes del procedimiento.
   ─────────────────────────────────────────── */

.rs-declaration {
  background: var(--black);
  padding: 2.5rem 2rem;
}

.rs-declaration-text {
  font-family: var(--font);
  font-size: clamp(1.2rem, 1.5vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  max-width: 640px;
}


/* ── BLOQUE PRINCIPAL ─────────────────────────
   Fondo blanco. Contiene: situación, pasos
   del procedimiento y detalle de comunicaciones.
   ─────────────────────────────────────────── */

.rs-main {
  background: var(--white);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}


/* ── SITUACIÓN ────────────────────────────────
   Título y párrafo introductorio del caso.
   ─────────────────────────────────────────── */

.rs-situation { display: flex; flex-direction: column; gap: 0.5rem; }

.rs-section-title {
  font-family: var(--font);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
}

.rs-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(0,0,0,0.75);
  max-width: 620px;
}

.rs-intro strong { color: var(--black); font-weight: 700; }


/* ── PASOS DEL PROCEDIMIENTO ──────────────────
   Tres pasos numerados. Número grande naranja
   a la izquierda, texto a la derecha.
   ─────────────────────────────────────────── */

.rs-steps {
  display: flex;
  flex-direction: column;
  gap: 0;                     /* Sin gap: la línea izquierda los conecta visualmente */
  border-left: 4px solid var(--black);
  padding-left: 0;
}

/* Paso individual */
.rs-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  transition: background 0.2s;
}

.rs-step:hover { background: var(--grey); }

/* Número del paso — Outfit grande, naranja */
.rs-step-num {
  font-family: var(--font);
  font-size: 2rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.5rem;
}

/* Contenido textual del paso */
.rs-step-content { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.2rem; }

.rs-step-content strong {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  display: block;
}

.rs-step-content p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(0,0,0,0.65);
}


/* ── DETALLE DE COMUNICACIONES ────────────────
   Dos tarjetas: una para cada parte implicada.
   Colores distintos para diferenciarlas.
   ─────────────────────────────────────────── */

.rs-comms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* Tarjeta base */
.rs-comm-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Etiqueta de la tarjeta — quién recibe este mensaje */
.rs-comm-label {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rs-comm-label i { font-size: 1rem; }

/* Texto de la tarjeta */
.rs-comm-card p:not(.rs-comm-label) {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Tarjeta de la persona protegida — fondo negro */
.rs-comm-protected {
  background: var(--black);
  color: var(--white);
}

.rs-comm-protected .rs-comm-label { color: var(--orange); }
.rs-comm-protected p:not(.rs-comm-label) { color: rgba(255,255,255,0.8); }

/* Tarjeta de la otra parte — fondo gris */
.rs-comm-other {
  background: var(--grey);
  color: var(--black);
}

.rs-comm-other .rs-comm-label { color: var(--black); }
.rs-comm-other p:not(.rs-comm-label) { color: rgba(0,0,0,0.65); }


/* ── CTA — CONTACTO ───────────────────────────
   Fondo negro. Texto + botón WhatsApp.
   Layout horizontal en desktop.
   ─────────────────────────────────────────── */

.rs-cta {
  background: var(--black);
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.rs-cta-text { display: flex; flex-direction: column; gap: 0.4rem; }

/* Título del CTA — Outfit grande, celeste */
.rs-cta-title {
  font-family: var(--font);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bg);
}

/* Descripción del CTA */
.rs-cta-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 400px;
}

/* Botón WhatsApp — naranja, hover invierte */
.rs-btn-wsp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  background: var(--orange);
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.rs-btn-wsp:hover { background: var(--white); color: var(--orange); }


/* ── GUARDA DECORATIVA ────────────────────────
   Franja diagonal negro/naranja de cierre.
   ─────────────────────────────────────────── */

.rs-guarda {
  height: 20px;
  background: repeating-linear-gradient(
    45deg,
    var(--black), var(--black) 10px,
    var(--orange) 10px, var(--orange) 20px
  );
}


/* ── RESPONSIVE ───────────────────────────────
   768px: comunicaciones a 1 columna,
          CTA apila texto y botón.
   520px: ajustes de padding.
   ─────────────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
  .rs-comms { grid-template-columns: 1fr; }
  .rs-cta   { flex-direction: column; align-items: flex-start; }
  .rs-btn-wsp { width: 100%; justify-content: center; }
}

/* Móvil */
@media (max-width: 520px) {
  .rs-declaration { padding: 2rem 1.25rem; }
  .rs-main        { padding: 2rem 1.25rem; }
  .rs-cta         { padding: 2rem 1.25rem; }
  .rs-step        { padding: 1rem 1.25rem; }
}