/* ===========================================================================
   registro_civil.css — Trámites del Registro Civil en línea
   5 de noviembre de 2026
   ---------------------------------------------------------------------------
   PREFIJO rc- EN TODAS LAS CLASES, Y CON .rc-pagina DELANTE EN LOS TITULOS.

   Lección aprendida con el directorio del REMTyS el 4 de noviembre: el prefijo
   evita que coincidan los NOMBRES, pero NO protege de una regla de la
   plantilla que apunte a la ETIQUETA. style.css y theme-default.css fijan
   h1 { 48px } y h2 { 35px } con selectores que ganan a una clase suelta.
   Por eso los titulos llevan el contenedor delante: sube la especificidad sin
   recurrir a !important.

   Colores institucionales, los mismos del directorio:
     guinda #83152F · dorado #B99154 · beige #F5F0EA · gris #292424
   ======================================================================== */

.blog_area {
  --rc-guinda: #83152F;
  --rc-dorado: #B99154;
  --rc-beige:  #F5F0EA;
  --rc-gris:   #292424;
  --rc-linea:  #e7ddd2;
}

/* ---------- Encabezado ---------- */
.rc-hero {
  background: linear-gradient(135deg, var(--rc-guinda) 0%, #6d1026 100%);
  border-radius: 18px;
  padding: 34px 30px;
  margin-bottom: 8px;
  border-bottom: 4px solid var(--rc-dorado);
  color: #fff;
}
.blog_area .rc-hero-titulo {
  margin: 0;
  padding: 0;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.rc-hero-sub {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  max-width: 60ch;
}

/* ---------- Aviso de que son servicios federales ----------
   En ámbar, no en rojo: no es una alerta de peligro, es una aclaración de
   competencia. El rojo en un portal público alarma sin motivo. */
.rc-aviso {
  margin: 18px 0 26px;
  padding: 12px 16px;
  font-size: .9rem;
  line-height: 1.55;
  color: #7a5b1e;
  background: #fffaf0;
  border: 1px solid #f3dfb8;
  border-radius: 12px;
}
.rc-aviso i { color: var(--rc-dorado); margin-right: 6px; }

/* ---------- Bloques ---------- */
.rc-bloque {
  background: #fff;
  border: 1px solid var(--rc-linea);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(60, 40, 30, .06);
}
.blog_area .rc-bloque-titulo {
  margin: 0;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--rc-gris);
}
.rc-bloque-nota {
  margin: 6px 0 0;
  font-size: .92rem;
  color: #8a7f76;
}

/* ---------- Lista de enlaces ---------- */
.rc-lista {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.rc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #f1e8de;
}
.rc-item:first-child { border-top: 0; padding-top: 4px; }

.rc-item-icono {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: var(--rc-beige);
  color: var(--rc-guinda);
  font-size: 1.15rem;
}
.rc-item-texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--rc-gris);
}

.rc-item-boton {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--rc-guinda);
  color: #fff;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.rc-item-boton:hover,
.rc-item-boton:focus {
  background: #6d1026;
  color: #fff;
  transform: translateY(-1px);
}
.rc-item-boton:focus-visible {
  outline: 2px solid var(--rc-dorado);
  outline-offset: 3px;
}
/*  El icono de "se abre fuera" va mas pequeño: acompaña, no compite. */
.rc-item-boton .bi-box-arrow-up-right { font-size: .78rem; opacity: .85; }

/* ---------- Pie de la página ---------- */
.rc-pie {
  margin: 4px 0 0;
  font-size: .9rem;
  color: #8a7f76;
}
.rc-pie a { color: var(--rc-guinda); font-weight: 600; }

/* ---------- Móvil ----------
   Por debajo de 576 px el botón pasa debajo del texto y ocupa todo el ancho:
   al lado, un texto como "Consulta la validez de tu acta digital de
   nacimiento, matrimonio o defunción" se quedaría en una columna de dos
   palabras por renglón. */
@media (max-width: 575.98px) {
  .rc-hero { padding: 24px 20px; }
  .blog_area .rc-hero-titulo { font-size: 1.45rem; }
  .rc-bloque { padding: 18px 16px; }
  .rc-item {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .rc-item-texto { flex: 1 1 100%; order: 2; }
  .rc-item-icono { order: 1; }
  .rc-item-boton { order: 3; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-item-boton { transition: none; }
  .rc-item-boton:hover { transform: none; }
}