/**
 * components.css — Componentes reutilizables del frontend público y del panel.
 *
 * Lenguaje visual inspirado en localhost/legal (sin copiar sus colores ni
 * contenido): tarjetas con esquinas redondeadas (--radio-borde-tarjeta) y
 * sombra que crece al hover, secciones separadas por padding generoso +
 * línea delgada, header fijo con línea de acento inferior, footer con
 * encabezados en color de acento.
 */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 420px;
}

.formulario label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.formulario input,
.formulario select,
.formulario textarea {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  min-height: 44px; /* área táctil mínima en móvil */
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: 2px solid var(--color-secundario);
  outline-offset: 1px;
}

.btn {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.75rem;
  margin-top: 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radio-borde);
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primario {
  background-color: var(--color-primario);
  color: #ffffff;
}

.btn-primario:hover {
  background-color: var(--color-primario-oscuro);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  border-color: var(--color-borde);
}

.btn-outline:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.alerta {
  padding: 0.75rem 1rem;
  border-radius: var(--radio-borde);
  font-size: 0.9rem;
  margin: 1rem 0;
}

.alerta-error {
  background-color: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c6c3;
}

.alerta-exito {
  background-color: #e3f6ec;
  color: #1e7d43;
  border: 1px solid #bfe8d1;
}

.contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 1.5rem;
}

/* Honeypot: oculto para personas (fuera de pantalla, no display:none —
   algunos bots detectan y evitan ese caso), visible para bots simples. */
.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.error-campo {
  color: #b3261e;
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-primario);
  font-weight: 600;
  text-decoration: none;
}

.enlace-flecha:hover {
  color: var(--color-primario-oscuro);
  text-decoration: underline;
}

/* Cabecera pública: degradado de 3 tonos con profundidad (azul primario
   → azul oscuro → blueprint) en vez de un relleno de un solo color. El
   brillo verde radial en la esquina superior derecha rompe la simetría
   del degradado sin competir con el logo (izquierda). */
.cabecera-publica {
  position: sticky;
  top: 0;
  z-index: 30;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(55% 160% at 90% 0%, rgba(70, 168, 91, 0.35), transparent 60%),
    linear-gradient(115deg, var(--color-primario) 0%, var(--color-primario-oscuro) 62%, var(--color-blueprint) 135%);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.cabecera-publica::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 0;
  pointer-events: none;
  background: var(--color-secundario);
}

.cabecera-contenido {
  position: relative;
  z-index: 1;
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cabecera-logo {
  text-decoration: none;
  transition: transform 0.2s ease;
}

.cabecera-logo:hover {
  transform: scale(1.03);
}

/* El logo lleva sus propios colores de marca sobre fondo transparente:
   sobre el navbar azul necesita una tarjeta blanca sólida para verse
   legible — mismo criterio que .pie-marca-caja-logo en el footer
   oscuro. */
.cabecera-logo-caja {
  display: block;
  background-color: #ffffff;
  border-radius: var(--radio-borde);
  padding: 0.4rem 0.65rem;
  line-height: 0;
}

.cabecera-logo img {
  display: block;
  height: 44px;
  width: auto;
}

.cabecera-logo span {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: #ffffff;
}

.menu-hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-hamburguesa:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.menu-hamburguesa span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: #ffffff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Anima a "X" usando aria-expanded (lo actualiza main.js), sin depender
   de una clase extra en el botón. */
.menu-hamburguesa[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-hamburguesa[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-hamburguesa[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-principal {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.menu-principal.menu-principal-abierto {
  display: flex;
}

/* Enlaces con indicador de acento tipo "ceja": una barra corta y curva
   (óvalo aplanado) que aparece bajo el texto al pasar el mouse o cuando
   el enlace corresponde a la página actual (clase .activo, ver nav.php).
   Le da color y dinamismo al navbar sin perder el tono empresarial. */
.menu-principal a {
  position: relative;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}

.menu-principal a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 5px;
  background: var(--color-secundario);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: width 0.25s ease, opacity 0.25s ease;
}

.menu-principal a:hover,
.menu-principal a:focus-visible,
.menu-principal a.activo {
  color: #ffffff;
}

.menu-principal a:hover::after,
.menu-principal a:focus-visible::after,
.menu-principal a.activo::after {
  width: 100%;
  opacity: 1;
}

@media (min-width: 768px) {
  .menu-hamburguesa {
    display: none;
  }

  .menu-principal {
    display: flex;
    flex-direction: row;
    width: auto;
    gap: 2rem;
  }
}

/* Pie de página público: colofón del mismo motivo "plano técnico" del
   Hero/navbar (degradado blueprint + grid fino + brillo radial), no un
   bloque de color plano. Barra inferior separada por una línea
   punteada tipo "línea de corte" de plano técnico, con copyright,
   redes sociales y volver arriba. */
.pie-pagina {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(50% 140% at 6% 0%, rgba(70, 168, 91, 0.22), transparent 60%),
    linear-gradient(160deg, var(--color-blueprint), var(--color-primario-oscuro));
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--espacio-seccion);
}

.pie-contenido,
.pie-inferior {
  position: relative;
  z-index: 1;
}

.pie-contenido {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 4rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.pie-columna-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.pie-tagline {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #90cb9d;
  margin: 0;
}

.pie-marca-caja {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radio-borde-tarjeta);
  padding: 1rem 1.25rem;
}

.pie-marca {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0;
}

/* El logo lleva sus propios colores de marca sobre fondo transparente:
   necesita una tarjeta blanca sólida (no la caja translúcida de texto)
   para verse legible sobre el pie de página oscuro. */
.pie-marca-caja-logo {
  background-color: #ffffff;
  border-color: transparent;
}

.pie-marca-logo {
  display: block;
  height: 40px;
  width: auto;
}

/* Encabezados de columna como etiqueta técnica (mono, mayúsculas,
   espaciado) con una línea fina a la derecha — mismo vocabulario que
   .hero-eyebrow/.badge-codigo, no un <h3> genérico en verde. */
.pie-columna h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--fuente-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #90cb9d;
  margin: 0 0 1.1rem;
}

.pie-columna h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.pie-enlaces-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 1.5rem;
}

/* :not(.pie-red-icono):not(.pie-dato) — excluye los iconos de redes y
   los datos de contacto (.pie-dato tiene su propio layout con ícono),
   solo aplica a los enlaces simples de "Enlaces rápidos". El guiño
   ("ceja") bajo el texto al pasar el mouse reutiliza el mismo lenguaje
   de interacción que el navbar (ver .menu-principal a en nav). */
.pie-columna a:not(.pie-red-icono):not(.pie-dato) {
  position: relative;
  display: block;
  width: fit-content;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0.3rem 0;
}

.pie-columna a:not(.pie-red-icono):not(.pie-dato)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--color-secundario);
  transition: width 0.2s ease;
}

.pie-columna a:hover {
  color: #ffffff;
}

.pie-columna a:not(.pie-red-icono):not(.pie-dato):hover::after {
  width: 100%;
}

/* Dato de contacto (dirección/teléfono/correo) con ícono — mismo
   lenguaje visual que la tarjeta de información de public/contacto.php. */
.pie-dato {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0.35rem 0;
}

a.pie-dato:hover {
  color: #ffffff;
}

.pie-dato-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: #90cb9d;
}

.pie-dato-icono svg {
  width: 16px;
  height: 16px;
}

/* Barra inferior: separada del contenido por una línea punteada (línea
   de corte de plano técnico), no una regla sólida centrada — copyright
   a la izquierda, redes + volver arriba a la derecha. */
.pie-inferior {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
}

.pie-copyright {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.pie-inferior-derecha {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pie-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.pie-red-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff !important;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pie-red-icono:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.pie-red-icono svg {
  width: 18px;
  height: 18px;
}

.pie-volver-arriba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pie-volver-arriba:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.pie-volver-arriba svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .pie-inferior {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .pie-contenido {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* Hero de la home — "plano técnico": fondo Blueprint con grid fino tipo
   papel milimétrico y una línea de escaneo animada (respeta
   prefers-reduced-motion, ver main.css). Cuando el admin sube una imagen
   de portada, esta se pinta como background-image inline en index.php
   (junto con un degradado de oscurecimiento) y el grid/escaneo quedan
   encima como capas independientes — la identidad técnica se mantiene
   con o sin foto. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-blueprint);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 6.5rem 1.5rem 5.5rem;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(94, 234, 212, 0.16) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(94, 234, 212, 0.16) 0 1px, transparent 1px 40px);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.7), transparent);
  animation: hero-escaneo 8s linear infinite;
}

@keyframes hero-escaneo {
  0% {
    top: 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.hero-contenido {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #90cb9d;
  margin: 0 0 1.5rem;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(144, 203, 157, 0.7);
}

.hero h1 {
  font-size: clamp(1.85rem, 4vw, 3rem);
  margin: 0 0 1rem;
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.75rem;
}

.hero .btn-primario {
  background-color: #ffffff;
  color: var(--color-primario);
}

.hero .btn-primario:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Banda de cabecera de páginas de contenido (todas menos la home): ver
   app/includes/cabecera-pagina.php. Degradado verde/Blueprint (no el
   azul del Hero) a propósito: aunque ambas bandas admiten una imagen de
   fondo configurable, deben leerse como algo distinto del Hero de
   inicio, no como una copia. */
.cabecera-pagina {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-secundario-oscuro), var(--color-blueprint));
  background-size: cover;
  background-position: center;
  color: #ffffff;
  /* ~3/4 del padding vertical del Hero (6.5rem/5.5rem, ver .hero) — banda
     de cabecera más presente sin igualar el protagonismo del Hero. */
  padding: 5rem 1.5rem 4.25rem;
  text-align: center;
}

.cabecera-pagina::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 40px);
}

.cabecera-pagina .contenedor {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.cabecera-pagina-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.cabecera-pagina h1 {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
}

.cabecera-pagina p {
  max-width: 640px;
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}

/* Secciones (home): separadas por padding generoso + línea delgada, en
   vez de bloques de color alternados. */
.seccion-servicios,
.seccion-noticias-home,
.seccion-nosotros {
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
}

/* Cada sección de la home lleva su propio fondo de principio a fin del
   viewport (por eso el <section> ya NO tiene la clase .contenedor
   directamente — el contenido va en un <div class="contenedor"> interno)
   para que se distingan claramente unas de otras. */
/* background-color es opaco y tapa la textura de body (ver main.css), así
   que cada sección repite el mismo motivo de grid técnico a baja
   opacidad para no quedar en un color liso. */
.seccion-nosotros,
.seccion-nosotros-alterna,
.seccion-servicios,
.seccion-noticias-listado,
.seccion-contacto,
.seccion-sedes {
  background-image:
    repeating-linear-gradient(0deg, rgba(25, 53, 150, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(25, 53, 150, 0.035) 0 1px, transparent 1px 44px);
}

/* Tinte azulado claro, no blanco puro — mismo criterio que
   .seccion-servicios: sin esto, las tarjetas/textos de ¿Quiénes somos?,
   Misión y Visión y Nuestra identidad se perdían contra el fondo. */
.seccion-nosotros {
  background-color: var(--color-fondo-servicios);
}

.seccion-nosotros-alterna {
  background-color: var(--color-fondo-alterno);
}

/* Tinte azulado claro (no blanco, no gris neutro): separa visualmente
   las tarjetas blancas del fondo — antes ambas eran var(--color-fondo)
   y las tarjetas se perdían contra la sección. */
.seccion-servicios {
  background-color: var(--color-fondo-servicios);
}

/* Degradado en un azul más notorio que el tinte muy pálido de
   .seccion-servicios (#eef1fa): cada sección de la home debe
   distinguirse de la de arriba, no solo separarse por espaciado.
   Incluye el mismo grid técnico que las demás secciones en la propia
   declaración (en vez de la regla compartida de arriba): `background`
   en shorthand reinicia background-image, así que combinarlo aquí es
   la única forma de tener degradado + grid en el mismo elemento. */
.seccion-noticias-home {
  background-image:
    repeating-linear-gradient(0deg, rgba(25, 53, 150, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(25, 53, 150, 0.035) 0 1px, transparent 1px 44px),
    linear-gradient(135deg, #cfe4f7 0%, var(--color-fondo-alterno) 100%);
}

/* Envoltura del listado de Noticias (public/noticias.php) — antes el
   filtro/grid de artículos iba directo sobre <main class="contenedor">
   sin ninguna sección con fondo, quedando en blanco puro. */
.seccion-noticias-listado {
  background-color: var(--color-fondo-servicios);
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
  min-height: 50vh;
}

/* Envoltura de Contacto (public/contacto.php) — mismo motivo: las
   tarjetas .tarjeta-contacto-formulario/.tarjeta-contacto-info iban
   directo sobre <main class="contenedor"> en blanco puro y la tarjeta
   blanca del formulario se perdía contra el fondo. */
.seccion-contacto {
  background-color: var(--color-fondo-servicios);
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
  min-height: 50vh;
}

/* Envoltura de Sedes (public/sedes.php) — mismo motivo que Contacto: el
   mapa y el panel lateral necesitan un fondo con tinte, no blanco puro. */
.seccion-sedes {
  background-color: var(--color-fondo-servicios);
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
  min-height: 50vh;
}

.seccion-nosotros-titulo {
  text-align: center;
  font-size: 2rem;
  margin-top: 0;
}

.seccion-servicios h2,
.seccion-noticias-home h2,
.seccion-nosotros h2 {
  text-align: center;
  font-size: 2rem;
}

.eyebrow-centrado {
  text-align: center;
}

/* Tarjeta de ¿Quiénes somos? — más amplia que la columna de texto
   angosta anterior (760px): ocupa el ancho del contenedor y se divide
   en dos columnas cuando hay imagen (public/quienes-somos.php,
   configurable desde admin/logo-favicon.php). Sin imagen, el texto
   ocupa toda la tarjeta. Mismo patrón de tarjeta que .tarjeta-servicio
   (fondo blanco, sombra, acento superior). */
.tarjeta-quienes-somos {
  margin-top: 2.5rem;
  background-color: var(--color-fondo);
  border-radius: var(--radio-borde-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  border-top: 3px solid var(--color-secundario);
  overflow: hidden;
}

.tarjeta-quienes-somos-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.tarjeta-quienes-somos-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-quienes-somos-cuerpo {
  padding: 2.5rem;
  color: var(--color-texto-suave);
  font-size: 1.05rem;
  line-height: 1.7;
}

.tarjeta-quienes-somos-cuerpo p {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 768px) {
  .tarjeta-quienes-somos-con-imagen {
    display: grid;
    grid-template-columns: minmax(0, 42%) 1fr;
    align-items: stretch;
  }

  .tarjeta-quienes-somos-con-imagen .tarjeta-quienes-somos-visual {
    aspect-ratio: auto;
    height: 100%;
  }

  .tarjeta-quienes-somos-con-imagen .tarjeta-quienes-somos-cuerpo {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Página de Contacto (public/contacto.php): dos tarjetas lado a lado —
   formulario e información de contacto. La segunda usa el mismo
   degradado oscuro de marca que .cta-final/.cabecera-pagina para dar
   contraste "empresarial" frente a la tarjeta blanca del formulario. */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .contacto-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.tarjeta-contacto-formulario,
.tarjeta-contacto-info {
  border-radius: var(--radio-borde-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 2.5rem;
}

.tarjeta-contacto-formulario {
  background-color: var(--color-fondo);
  border-top: 3px solid var(--color-primario);
}

.tarjeta-contacto-info {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-blueprint), var(--color-primario-oscuro));
  color: #ffffff;
}

.tarjeta-contacto-info::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(94, 234, 212, 0.12) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(94, 234, 212, 0.12) 0 1px, transparent 1px 40px);
}

.tarjeta-contacto-info > * {
  position: relative;
  z-index: 1;
}

.tarjeta-contacto-formulario h2,
.tarjeta-contacto-info h2 {
  margin-top: 0;
  font-size: 1.4rem;
}

.tarjeta-contacto-formulario > p,
.tarjeta-contacto-info > p {
  margin-top: 0.5rem;
}

.tarjeta-contacto-formulario > p {
  color: var(--color-texto-suave);
}

.tarjeta-contacto-info > p {
  color: rgba(255, 255, 255, 0.75);
}

/* Formulario "empresarial": grid de 2 columnas para campos cortos en
   pantallas anchas, textarea y botón a todo el ancho — antes era una
   sola columna angosta (max-width: 420px) igual que cualquier
   formulario del panel admin. */
.tarjeta-contacto-formulario .formulario {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

@media (min-width: 540px) {
  .tarjeta-contacto-formulario .formulario {
    grid-template-columns: 1fr 1fr;
  }
}

.campo-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo-formulario-ancho-completo {
  grid-column: 1 / -1;
}

.tarjeta-contacto-formulario .formulario label {
  margin-top: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto);
}

.tarjeta-contacto-formulario .formulario input,
.tarjeta-contacto-formulario .formulario select,
.tarjeta-contacto-formulario .formulario textarea {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-contacto-formulario .formulario input:focus,
.tarjeta-contacto-formulario .formulario select:focus,
.tarjeta-contacto-formulario .formulario textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(25, 53, 150, 0.14);
}

.tarjeta-contacto-formulario .formulario button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.9rem 2.5rem;
  margin-top: 0.25rem;
}

/* Variante clara de .icono-circular para usar sobre el fondo oscuro de
   .tarjeta-contacto-info (la versión base es un tinte verde pensado
   para fondo blanco y quedaría casi invisible aquí). */
.icono-circular-claro {
  background-color: rgba(255, 255, 255, 0.12);
  color: #7fd9a0;
  flex-shrink: 0;
  margin-bottom: 0;
}

.lista-contacto-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lista-contacto-info li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.lista-contacto-info strong {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

.lista-contacto-info p {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
}

.lista-contacto-info a {
  color: #ffffff;
  text-decoration: none;
}

.lista-contacto-info a:hover {
  text-decoration: underline;
}

.grid-mision-vision {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .grid-mision-vision {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-mision-vision .tarjeta-servicio h2,
.grid-mision-vision .tarjeta-servicio h3 {
  color: var(--color-primario);
  font-size: 1.3rem;
}

.grid-servicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 576px) {
  .grid-servicios {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-servicios {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tarjeta-servicio {
  padding: 2rem 1.75rem;
  border-radius: var(--radio-borde-tarjeta);
  background-color: var(--color-fondo);
  box-shadow: var(--sombra-tarjeta);
  border-top: 3px solid transparent;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.tarjeta-servicio:hover {
  box-shadow: var(--sombra-tarjeta-hover);
  transform: translateY(-3px);
  border-top-color: var(--color-secundario);
}

/* Badge de código técnico (2-3 letras, tipo etiqueta de espécimen), no
   un número de secuencia — usado en la navegación e indicadores del
   panel admin (admin/configuracion.php, admin/dashboard.php). Ya NO se
   usa en las tarjetas de Servicios de la home (ver
   .tarjeta-servicio-marcador más abajo) — necesitan tamaños distintos y
   compartir esta clase entre ambos rompía el tamaño del panel admin. */
.badge-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  background-color: var(--color-blueprint);
  color: #90cb9d;
  font-family: var(--fuente-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}

/* Icono de línea en círculo (Misión/Visión, Nuestra identidad) — mismo
   rol que .badge-codigo (marca de identidad al inicio de la tarjeta)
   pero con un ícono real en vez de un código de 2-3 letras, a pedido
   del usuario. Reutiliza los iconos SVG de app/helpers/iconos.php. */
.icono-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(70, 168, 91, 0.12);
  color: var(--color-secundario-oscuro);
  margin-bottom: 1.1rem;
}

.icono-circular svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Tarjetas de Servicios (home) con imagen: banner a todo el ancho de la
   tarjeta, mismo patrón que .tarjeta-articulo (noticias.css) — no un
   icono pequeño, para que la foto tenga presencia real. Solo aplica
   dentro de .tarjeta-servicio-con-visual (público/index.php); las
   tarjetas de Misión/Visión y Nuestra identidad siguen usando la
   .tarjeta-servicio base sin tocar (con .icono-circular). */
.tarjeta-servicio-con-visual {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.tarjeta-servicio-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-blueprint);
}

.tarjeta-servicio-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Iniciales de respaldo cuando el servicio no tiene imagen: ocupan el
   mismo banner (no un badge chico aparte) para que todas las tarjetas
   tengan la misma presencia visual, con o sin foto. */
.tarjeta-servicio-marcador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #90cb9d;
  font-family: var(--fuente-mono);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: 0.08em;
}

.tarjeta-servicio-cuerpo {
  padding: 1.75rem 1.75rem 2rem;
  flex: 1;
}

.grid-mision-vision .tarjeta-servicio {
  text-align: center;
}

.grid-mision-vision .icono-circular {
  margin-left: auto;
  margin-right: auto;
}

/* El grid de Misión/Visión es de 2 columnas (tarjetas más anchas que en
   Servicios, que es de 3) — un banner 16:9 se ve demasiado alto ahí, así
   que se recorta más bajo. */
.grid-mision-vision .tarjeta-servicio-visual {
  aspect-ratio: 21 / 9;
}

.grid-mision-vision .tarjeta-servicio-cuerpo {
  padding-top: 2rem;
}

.tarjeta-servicio h3 {
  margin: 0 0 0.5rem;
  color: var(--color-texto);
  font-size: 1.2rem;
}

.tarjeta-servicio p {
  color: var(--color-texto-suave);
  margin-bottom: 0;
  text-align: justify;
  text-justify: inter-word;
}

/* CTA final (home): banda de cierre con contraste fuerte (en vez del
   verde pálido plano anterior), para que la página no termine "en
   silencio" tras el carrusel de noticias. */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-secundario-oscuro), var(--color-primario-oscuro));
  color: #ffffff;
  padding: var(--espacio-seccion) 1.5rem;
  text-align: center;
}

.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 40px);
}

.cta-final-contenido {
  position: relative;
  z-index: 1;
}

.cta-final .btn-primario {
  background-color: #ffffff;
  color: var(--color-primario);
}

.cta-final .btn-primario:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.texto-centrado {
  text-align: center;
}

/* Carrusel de noticias (home): scroll horizontal nativo con snap — sin
   librería externa. El teclado/lector de pantalla siguen funcionando
   porque cada tarjeta contiene un enlace enfocable normal; los botones
   prev/next son un atajo adicional, no el único modo de navegarlo. */
.carrusel {
  position: relative;
  margin-bottom: 1.5rem;
  /* Espacio reservado a los lados para las flechas (ver
     .carrusel-controles): así se superponen sobre ese "margen" y nunca
     tapan el texto de la primera/última tarjeta. */
  padding: 0 52px;
}

.carrusel-pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  /* Sin scroll-snap ni scroll-behavior:smooth aquí a propósito: el
     desplazamiento automático continuo (carrusel.js) mueve scrollLeft
     cuadro a cuadro y ambos pelearían contra eso. Los botones prev/next
     piden 'smooth' directamente en su propia llamada a scrollBy(). */
  padding: 0.25rem 0.25rem 0.75rem;
  /* Barra de desplazamiento oculta: el movimiento es automático y ya
     hay botones prev/next como affordance de navegación manual — la
     barra nativa (gris, gruesa) solo añadía ruido visual debajo de las
     tarjetas. El scroll/drag/touch nativo sigue funcionando igual. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrusel-pista::-webkit-scrollbar {
  display: none;
}

.carrusel-pista > * {
  flex: 0 0 85%;
}

@media (min-width: 576px) {
  .carrusel-pista > * {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (min-width: 992px) {
  .carrusel-pista > * {
    flex: 0 0 calc(33.333% - 1rem);
  }
}

/* Flechas a los laterales del carrusel, superpuestas a la pista y
   centradas verticalmente — no debajo, para que no compitan con el
   enlace "Ver todas las noticias" ni empujen el layout hacia abajo. */
.carrusel-controles {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  pointer-events: none;
}

/* Círculo blanco con ícono, mismo lenguaje que .pie-red-icono/.pie-volver-arriba
   (pero en versión clara, para fondo de sección con contraste): al pasar
   el mouse se llena del verde de marca, el mismo acento interactivo que
   usan las tarjetas de servicio/noticia. */
.carrusel-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-fondo);
  color: var(--color-primario);
  cursor: pointer;
  box-shadow: var(--sombra-tarjeta);
  pointer-events: auto;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.carrusel-boton svg {
  width: 20px;
  height: 20px;
}

.carrusel-boton:hover {
  background-color: var(--color-secundario);
  color: #ffffff;
  box-shadow: var(--sombra-tarjeta-hover);
  transform: translateY(-2px);
}

.carrusel-boton:active {
  transform: translateY(0) scale(0.95);
}

.cta-final-contenido h2 {
  margin-top: 0;
  font-size: 2rem;
}