/* =========================================================
   AESS — Diseño 2026 — Hoja de estilos de la página de inicio
   ========================================================= */

:root {
  --azul-900: #071a42;
  --azul-800: #0d2c6c;
  --azul-700: #163e8f;
  --dorado-600: #a97a1f;
  --dorado-500: #c8962c;
  --dorado-300: #e8c574;
  --dorado-100: #faf1dc;
  --blanco: #ffffff;
  --gris-50: #f7f9fc;
  --gris-100: #eef2f7;
  --gris-300: #d7deea;
  --texto: #1c2333;
  --texto-suave: #5a6478;
  --exito: #1a7a4c;
  --sombra: 0 20px 45px -15px rgba(13, 44, 108, .25);
  --radio: 18px;
  --radio-sm: 10px;
  --ancho-maximo: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Inter', sans-serif;
  line-height: 1.2;
  margin: 0;
}

p { line-height: 1.65; margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
}

.etiqueta-seccion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dorado-100);
  color: var(--dorado-600);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 99px;
}

.titulo-seccion {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 700;
  color: var(--azul-900);
  margin-top: 14px;
}

.subtitulo-seccion {
  font-size: 1.05rem;
  color: var(--texto-suave);
  margin-top: 12px;
  max-width: 620px;
}

.encabezado-seccion {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 99px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-dorado {
  background: linear-gradient(135deg, var(--dorado-500), var(--dorado-600));
  color: var(--azul-900);
  box-shadow: 0 10px 25px -8px rgba(200, 150, 44, .55);
}
.btn-dorado:hover { box-shadow: 0 14px 30px -8px rgba(200, 150, 44, .7); }

.btn-fantasma {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
  color: var(--blanco);
  backdrop-filter: blur(4px);
}
.btn-fantasma:hover { background: rgba(255,255,255,.18); }

.btn-azul {
  background: var(--azul-800);
  color: var(--blanco);
  box-shadow: 0 10px 25px -8px rgba(13, 44, 108, .45);
}
.btn-azul:hover { background: var(--azul-700); }

.btn-whatsapp {
  background: #25D366;
  color: #05330f;
  box-shadow: 0 10px 25px -8px rgba(37, 211, 102, .55);
}

/* ===================== HEADER ===================== */
#encabezado {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-300);
}
.barra-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  gap: 20px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--azul-900);
}
.marca img { width: 46px; height: 46px; object-fit: contain; }
.marca small { display: block; font-weight: 500; font-size: .68rem; color: var(--texto-suave); letter-spacing: .04em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-weight: 600;
  font-size: .92rem;
  color: var(--texto);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--dorado-500);
  transition: width .2s ease;
}
.nav-links a:hover::after,
.nav-links a.activo::after { width: 100%; }
.nav-links a.activo { color: var(--azul-800); }

.nav-acciones { display: flex; align-items: center; gap: 14px; }
.nav-acciones .btn { padding: 11px 22px; font-size: .85rem; }

@media (max-width: 1150px) {
  .marca small { display: none; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: .86rem; }
  .nav-acciones .btn { padding: 9px 16px; font-size: .8rem; }
}

#btn-hamburguesa {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--azul-800);
  cursor: pointer;
}

/* ===================== HERO ===================== */
#hero {
  position: relative;
  background: radial-gradient(circle at 15% 20%, var(--azul-700), var(--azul-900) 60%);
  overflow: hidden;
  padding: 90px 24px 110px;
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(200,150,44,.35), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(200,150,44,.18), transparent 50%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 50px;
  align-items: center;
}
.hero-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--dorado-300);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 99px;
}
.hero-titulo {
  color: var(--blanco);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  margin-top: 20px;
}
.hero-titulo span { color: var(--dorado-300); }
.hero-texto {
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  margin-top: 20px;
  max-width: 520px;
}
.hero-acciones {
  display: flex;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-escudo {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-escudo img {
  width: min(360px, 100%);
  filter: drop-shadow(0 25px 40px rgba(0,0,0,.45));
  animation: flotar 5s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ===================== FRANJA DE CONFIANZA ===================== */
#franja-confianza {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-300);
  margin-top: -55px;
  position: relative;
  z-index: 5;
}
.tarjetas-confianza {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  transform: translateY(-50%);
}
.tarjeta-confianza {
  background: var(--blanco);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra);
  padding: 22px 20px;
  text-align: center;
  border: 1px solid var(--gris-300);
}
.tarjeta-confianza .icono {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--dorado-100);
  color: var(--dorado-600);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.1rem;
}
.tarjeta-confianza strong { display: block; color: var(--azul-900); font-size: 1.02rem; }
.tarjeta-confianza span { display: block; font-size: .82rem; color: var(--texto-suave); margin-top: 4px; }

/* ===================== BENEFICIOS ===================== */
#beneficios { padding: 20px 24px 90px; }
.grid-beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tarjeta-beneficio {
  background: var(--gris-50);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 30px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-beneficio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
  border-color: var(--dorado-300);
  background: var(--blanco);
}
.tarjeta-beneficio .icono {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--azul-800), var(--azul-700));
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
.tarjeta-beneficio h3 { font-size: 1.08rem; color: var(--azul-900); margin-bottom: 10px; }
.tarjeta-beneficio p { color: var(--texto-suave); font-size: .93rem; }

/* ===================== COMO AFILIARSE ===================== */
#pasos {
  background: var(--azul-900);
  padding: 90px 24px;
  position: relative;
  overflow: hidden;
}
#pasos::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(200,150,44,.18), transparent 50%);
  pointer-events: none;
}
#pasos .encabezado-seccion .titulo-seccion,
#pasos .encabezado-seccion .subtitulo-seccion { color: var(--blanco); }
#pasos .encabezado-seccion .subtitulo-seccion { color: rgba(255,255,255,.72); margin-left: auto; margin-right: auto; }

.linea-pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.paso {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radio);
  padding: 32px 26px;
  color: var(--blanco);
}
.paso .numero {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--dorado-500);
  color: var(--azul-900);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.paso h3 { font-size: 1.05rem; margin-bottom: 8px; }
.paso p { color: rgba(255,255,255,.72); font-size: .92rem; }
.paso .icono-doc {
  position: absolute; top: 26px; right: 26px;
  font-size: 1.2rem; color: var(--dorado-300);
}
.pasos-cta { text-align: center; margin-top: 40px; }

/* ===================== ACTUALIDAD ===================== */
#actualidad { padding: 90px 24px; }
.grid-actualidad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tarjeta-noticia {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--gris-300);
  transition: transform .2s ease, box-shadow .2s ease;
  background: var(--blanco);
}
.tarjeta-noticia:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.tarjeta-noticia .miniatura { aspect-ratio: 4/3; overflow: hidden; background: var(--gris-100); }
.tarjeta-noticia img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-noticia .cuerpo { padding: 16px 18px; }
.tarjeta-noticia .cuerpo span {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dorado-600);
}
.tarjeta-noticia .cuerpo p { margin-top: 6px; font-size: .92rem; font-weight: 600; color: var(--azul-900); }
.actualidad-cta { text-align: center; margin-top: 40px; }

/* ===================== CTA FINAL ===================== */
#cta-final {
  background: linear-gradient(120deg, var(--dorado-600), var(--dorado-500));
  padding: 60px 24px;
}
.cta-final-caja {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-final-caja h2 { color: var(--azul-900); font-size: 1.7rem; }
.cta-final-caja p { color: rgba(7,26,66,.75); margin-top: 8px; }
.cta-final-acciones { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===================== FOOTER ===================== */
#pie {
  background: var(--azul-900);
  color: rgba(255,255,255,.75);
  padding: 70px 24px 30px;
}
.pie-grid {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.pie-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pie-marca img { width: 50px; }
.pie-marca strong { color: var(--blanco); font-size: 1.15rem; }
.pie-col h4 { color: var(--blanco); font-size: .95rem; margin-bottom: 16px; }
.pie-col ul li { margin-bottom: 10px; font-size: .88rem; }
.pie-col ul li a:hover { color: var(--dorado-300); }
.pie-redes { display: flex; gap: 12px; margin-top: 18px; }
.pie-redes a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.pie-redes a:hover { background: var(--dorado-500); color: var(--azul-900); }
.pie-linea {
  max-width: var(--ancho-maximo);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===================== WHATSAPP FLOTANTE ===================== */
#whatsapp-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 600;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); }
  50% { box-shadow: 0 12px 30px -4px rgba(37,211,102,.9); }
}

/* ===================== REVELADO AL HACER SCROLL ===================== */
.revelar {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.revelar.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Variantes direccionales — mismo mecanismo de .revelar, solo cambia
   de dónde llega el bloque en vez de siempre subir desde abajo. */
.revelar.desde-izquierda { transform: translateX(-40px) scale(.98); }
.revelar.desde-izquierda.visible { transform: translateX(0) scale(1); }
.revelar.desde-derecha { transform: translateX(40px) scale(.98); }
.revelar.desde-derecha.visible { transform: translateX(0) scale(1); }
.revelar.desde-arriba { transform: translateY(-28px) scale(.98); }
.revelar.desde-arriba.visible { transform: translateY(0) scale(1); }
.revelar.con-zoom { transform: scale(.9); }
.revelar.con-zoom.visible { transform: scale(1); }

/* Aparición escalonada dentro de una grilla — cada tarjeta se revela
   con un pequeño retraso adicional según su posición ("efecto cascada") */
.grid-valores .tarjeta-valor:nth-child(2),
.grid-beneficios .tarjeta-beneficio:nth-child(2),
.linea-pasos .paso:nth-child(2),
.grid-actualidad .tarjeta-noticia:nth-child(2),
.grid-noticias-completa .tarjeta-noticia-externa:nth-child(2) { transition-delay: .08s; }

.grid-valores .tarjeta-valor:nth-child(3),
.grid-beneficios .tarjeta-beneficio:nth-child(3),
.linea-pasos .paso:nth-child(3),
.grid-actualidad .tarjeta-noticia:nth-child(3),
.grid-noticias-completa .tarjeta-noticia-externa:nth-child(3) { transition-delay: .16s; }

.grid-valores .tarjeta-valor:nth-child(4),
.grid-beneficios .tarjeta-beneficio:nth-child(4),
.grid-actualidad .tarjeta-noticia:nth-child(4),
.grid-noticias-completa .tarjeta-noticia-externa:nth-child(4) { transition-delay: .24s; }

.grid-beneficios .tarjeta-beneficio:nth-child(5),
.grid-noticias-completa .tarjeta-noticia-externa:nth-child(5) { transition-delay: .32s; }

.grid-beneficios .tarjeta-beneficio:nth-child(6),
.grid-noticias-completa .tarjeta-noticia-externa:nth-child(6) { transition-delay: .4s; }

/* Zoom suave al pasar el cursor sobre fotos reales enmarcadas */
.foto-enmarcada { overflow: hidden; }
.foto-enmarcada img { transition: transform .5s cubic-bezier(.16,.8,.3,1); }
.foto-enmarcada:hover img { transform: scale(1.045); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-texto { margin-left: auto; margin-right: auto; }
  .hero-acciones { justify-content: center; }
  .hero-escudo { order: -1; }
  .tarjetas-confianza { grid-template-columns: repeat(2, 1fr); }
  .grid-beneficios { grid-template-columns: repeat(2, 1fr); }
  .linea-pasos { grid-template-columns: 1fr; }
  .grid-actualidad { grid-template-columns: repeat(2, 1fr); }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-links, .nav-acciones .btn-azul { display: none; }
  #btn-hamburguesa { display: block; }
  .marca small { display: none; }
  .nav-acciones .btn-dorado { padding: 10px 18px; font-size: .82rem; }
  .cta-final-caja { flex-direction: column; text-align: center; }
  .tarjetas-confianza { grid-template-columns: 1fr 1fr; transform: translateY(-30px); }
  .grid-beneficios { grid-template-columns: 1fr; }
  .grid-actualidad { grid-template-columns: 1fr 1fr; }
  .pie-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Menú móvil desplegable */
#menu-movil {
  position: fixed;
  top: 0; right: -300px;
  width: 280px; height: 100%;
  background: var(--azul-900);
  z-index: 900;
  padding: 28px 24px;
  transition: right .3s ease;
  display: flex; flex-direction: column; gap: 22px;
}
#menu-movil.abierto { right: 0; }
#menu-movil a { color: var(--blanco); font-weight: 600; font-size: 1.02rem; }
#menu-movil .btn { margin-top: 10px; }
#cerrar-menu-movil { align-self: flex-end; background: none; border: none; color: var(--blanco); font-size: 1.4rem; cursor: pointer; }
#fondo-menu-movil {
  display: none;
  position: fixed; inset: 0; background: rgba(7,26,66,.6);
  z-index: 800;
}
#fondo-menu-movil.activo { display: block; }

/* =========================================================
   COMPONENTES COMPARTIDOS — páginas internas
   ========================================================= */

/* Foto real enmarcada (fotos propias de AESS) */
.foto-enmarcada {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid var(--gris-200);
}
.foto-enmarcada img { width: 100%; height: auto; display: block; }

/* Banner de encabezado para páginas internas (no-inicio) */
.banner-pagina {
  position: relative;
  background: radial-gradient(circle at 15% 20%, var(--azul-700), var(--azul-900) 60%);
  overflow: hidden;
  padding: 60px 24px 90px;
  text-align: center;
}
.banner-pagina::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 10%, rgba(200,150,44,.35), transparent 45%);
  pointer-events: none;
}
.banner-pagina .contenedor { position: relative; }
.banner-pagina.con-foto {
  background:
    linear-gradient(120deg, rgba(7,26,66,.92), rgba(13,44,108,.88)),
    var(--foto-banner, none);
  background-size: cover;
  background-position: center;
}
.banner-pagina h1 {
  color: var(--blanco);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  margin-top: 16px;
}
.banner-pagina p {
  color: rgba(255,255,255,.78);
  font-size: 1.02rem;
  margin: 14px auto 0;
  max-width: 560px;
}

/* Envoltorio de página interna: sube por encima del banner, como la franja de confianza */
.cuerpo-pagina {
  max-width: var(--ancho-maximo);
  margin: -55px auto 0;
  padding: 0 24px 90px;
  position: relative;
  z-index: 5;
}

/* Tarjeta genérica de contenido (documentos, info de contacto, etc.) */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px;
}

/* Bloque de texto + foto en dos columnas, reutilizado en varias páginas internas */
.convenios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.lista-check { margin-top: 22px; display: grid; gap: 13px; }
.lista-check li {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; color: var(--azul-900); font-size: .98rem;
}
.lista-check li i {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--dorado-500); color: var(--azul-900);
  display: flex; align-items: center; justify-content: center; font-size: .75rem;
}
@media (max-width: 900px) {
  .convenios-grid { grid-template-columns: 1fr; gap: 30px; }
  .convenios-grid .lista-check li { justify-content: flex-start; }
}

/* ===================== FORMULARIO DE CONTACTO ===================== */
.formulario-nuevo {
  display: grid;
  gap: 18px;
}
.formulario-nuevo .fila-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.formulario-nuevo label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--azul-900);
  margin-bottom: 6px;
}
.formulario-nuevo input,
.formulario-nuevo textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--texto);
  background: var(--gris-50);
  transition: border-color .15s ease, background .15s ease;
}
.formulario-nuevo input:focus,
.formulario-nuevo textarea:focus {
  outline: none;
  border-color: var(--dorado-500);
  background: var(--blanco);
}
.formulario-nuevo .campo-incorrecto input,
.formulario-nuevo .campo-incorrecto textarea {
  border-color: #d64545;
}
.formulario-nuevo .mensaje-form {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radio-sm);
  font-size: .9rem;
  font-weight: 600;
}
.formulario-nuevo .mensaje-form.activo { display: flex; }
.formulario-nuevo .mensaje-error { background: #fbeaea; color: #a12626; }
.formulario-nuevo .mensaje-exito { background: #e6f6ee; color: var(--exito); }

/* Clases que usa js/contacto.js — mismo comportamiento, estilo nuevo */
.formulario__grupo-incorrecto input,
.formulario__grupo-incorrecto textarea { border-color: #d64545 !important; }
#formulario__mensaje {
  display: none; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: var(--radio-sm);
  font-size: .9rem; font-weight: 600;
  background: #fbeaea; color: #a12626; margin-top: -4px;
}
#formulario__mensaje.formulario__mensaje-activo { display: flex; }
#formulario__mensaje-exito {
  display: none; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: var(--radio-sm);
  font-size: .9rem; font-weight: 600;
  background: #e6f6ee; color: var(--exito); margin: 0;
}
#formulario__mensaje-exito.formulario__mensaje-exito-activo { display: flex; }

/* Tarjetas de contacto rápido (whatsapp/waze/facebook) */
.grid-contacto-rapido {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tarjeta-contacto-rapido {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-300);
  background: var(--gris-50);
  font-weight: 700;
  color: var(--azul-900);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-contacto-rapido:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta-contacto-rapido .icono {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--blanco); flex-shrink: 0;
}
.tarjeta-contacto-rapido.whatsapp .icono { background: #25D366; }
.tarjeta-contacto-rapido.waze .icono { background: #33ccff; }
.tarjeta-contacto-rapido.facebook .icono { background: #1877f2; }

/* Lista de datos de contacto (dirección / teléfonos / correo) */
.lista-datos { display: grid; gap: 22px; }
.lista-datos .dato h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dorado-600); margin-bottom: 6px; font-weight: 700;
}
.lista-datos .dato p, .lista-datos .dato a { color: var(--texto); font-size: .95rem; display: block; }
.lista-datos .dato a:hover { color: var(--azul-800); }

.mapa-caja { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--gris-300); }
.mapa-caja iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ===================== REGLAMENTOS / DOCUMENTOS ===================== */
.grid-documentos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.tarjeta-documento {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  transition: box-shadow .15s ease, border-color .15s ease;
  flex-wrap: wrap;
}
.tarjeta-documento:hover { box-shadow: var(--sombra); border-color: var(--dorado-300); }
.tarjeta-documento .icono {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--dorado-100); color: var(--dorado-600);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.tarjeta-documento .nombre-doc {
  font-weight: 600; font-size: .9rem; color: var(--azul-900); line-height: 1.35;
  flex: 1; min-width: 140px;
}
.tarjeta-documento .acciones-doc {
  display: flex; gap: 8px; margin-left: auto;
}
.btn-doc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px;
  font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--gris-300);
  color: var(--azul-800);
  background: var(--gris-50);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-doc:hover { border-color: var(--azul-700); background: var(--gris-100); }
.btn-doc.btn-doc-descargar { background: var(--dorado-100); border-color: var(--dorado-300); color: var(--dorado-600); }
.btn-doc.btn-doc-descargar:hover { background: var(--dorado-300); color: var(--azul-900); }

.categoria-titulo {
  font-size: 1.05rem; font-weight: 700; color: var(--azul-900);
  margin: 40px 0 16px; display: flex; align-items: center; gap: 10px;
}
.categoria-titulo:first-of-type { margin-top: 0; }
.categoria-titulo i { color: var(--dorado-500); }

/* ===================== NOTICIAS ===================== */
.grid-noticias-completa {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  align-items: start;
}
.grid-noticias-completa .tarjeta-noticia { display: flex; flex-direction: column; }
.grid-noticias-completa .tarjeta-noticia .extracto {
  padding: 0 18px 18px; margin-top: -6px;
  font-size: .84rem; line-height: 1.55; color: var(--texto-suave);
}
.grid-noticias-completa .boletin-detalle {
  margin: 0 18px 18px; padding-top: 14px; border-top: 1px solid var(--gris-300);
}
.grid-noticias-completa .boletin-detalle summary {
  cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--azul-700);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.grid-noticias-completa .boletin-detalle summary::-webkit-details-marker { display: none; }
.grid-noticias-completa .boletin-detalle summary::after { content: "+"; margin-left: auto; font-size: 1rem; }
.grid-noticias-completa .boletin-detalle[open] summary::after { content: "–"; }
.grid-noticias-completa .boletin-detalle ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.grid-noticias-completa .boletin-detalle li { font-size: .82rem; line-height: 1.55; color: var(--texto); }
.grid-noticias-completa .boletin-detalle .fuente-boletin { margin-top: 12px; font-size: .74rem; color: var(--texto-suave); font-style: italic; }

/* Tarjeta de noticia externa (prensa) — sin imagen ajena, con ícono + fuente citada */
.tarjeta-noticia-externa {
  display: block;
  border-radius: var(--radio);
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  padding: 22px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tarjeta-noticia-externa:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--dorado-300); }
.tarjeta-noticia-externa .icono-fuente {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--azul-800); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: 14px;
}
.tarjeta-noticia-externa h3 {
  font-size: 1rem; color: var(--azul-900); line-height: 1.4; margin-bottom: 12px;
}
.tarjeta-noticia-externa .pie-fuente {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--texto-suave);
}

/* ===================== ESTILO PERIÓDICO (feed en vivo) ===================== */
.periodico-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  border-top: 3px solid var(--azul-900);
  border-bottom: 1px solid var(--gris-300);
  padding: 10px 0; margin-bottom: 26px;
}
.periodico-cabecera .edicion {
  font-family: 'Poppins', serif; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; font-size: .95rem; color: var(--azul-900);
}
.periodico-cabecera .estado-feed {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--texto-suave);
}
.periodico-cabecera .punto-en-vivo {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  animation: pulso 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 rgba(34,197,94,.6);
}

.periodico-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; margin-bottom: 10px; }

.periodico-destacada {
  display: block; border-bottom: 1px solid var(--gris-300); padding-bottom: 24px;
}
.periodico-destacada .miniatura-destacada {
  aspect-ratio: 16/9; border-radius: var(--radio-sm); overflow: hidden;
  background: var(--gris-100); margin-bottom: 16px;
}
.periodico-destacada .miniatura-destacada img { width: 100%; height: 100%; object-fit: cover; }
.periodico-destacada .etiqueta-cat {
  display: inline-block; background: var(--dorado-100); color: var(--dorado-600);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 99px; margin-bottom: 10px;
}
.periodico-destacada h2 {
  font-family: 'Poppins', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--azul-900); line-height: 1.3; margin-bottom: 10px;
}
.periodico-destacada:hover h2 { text-decoration: underline; text-decoration-color: var(--dorado-500); }
.periodico-destacada p.resumen { color: var(--texto-suave); font-size: .95rem; line-height: 1.6; margin-bottom: 12px; }
.periodico-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--texto-suave); font-weight: 600;
}
.periodico-meta .fuente { color: var(--azul-800); }

.periodico-lista { display: flex; flex-direction: column; }
.periodico-item {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--gris-300);
}
.periodico-item:first-child { padding-top: 0; }
.periodico-item .miniatura-chica {
  width: 74px; height: 74px; flex-shrink: 0; border-radius: var(--radio-sm);
  overflow: hidden; background: var(--gris-100);
}

/* Marcador neutro para artículos del feed sin imagen propia —
   evita mostrar una foto real de AESS que no tiene relación con
   la noticia enlazada. */
.placeholder-noticia {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gris-100), var(--gris-300));
  color: var(--azul-700); font-size: 1.6rem;
}
.miniatura-chica .placeholder-noticia { font-size: 1.15rem; }
.periodico-item .miniatura-chica img { width: 100%; height: 100%; object-fit: cover; }
.periodico-item h3 {
  font-family: 'Poppins', serif; font-size: .92rem; font-weight: 700;
  color: var(--azul-900); line-height: 1.35; margin-bottom: 6px;
}
.periodico-item:hover h3 { text-decoration: underline; text-decoration-color: var(--dorado-500); }

.periodico-briefs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--gris-300); margin-top: 20px;
}
.periodico-brief {
  padding: 18px 20px; border-right: 1px solid var(--gris-300);
}
.periodico-brief:last-child { border-right: none; }
.periodico-brief h3 {
  font-family: 'Poppins', serif; font-size: .88rem; font-weight: 700;
  color: var(--azul-900); line-height: 1.35; margin-bottom: 8px;
}
.periodico-brief:hover h3 { text-decoration: underline; text-decoration-color: var(--dorado-500); }

.periodico-cargando {
  text-align: center; padding: 50px 20px; color: var(--texto-suave); font-size: .9rem;
}
.periodico-cargando i { font-size: 1.4rem; color: var(--dorado-500); margin-bottom: 10px; display: block; }

@media (max-width: 900px) {
  .periodico-layout { grid-template-columns: 1fr; }
  .periodico-briefs { grid-template-columns: 1fr; }
  .periodico-brief { border-right: none; border-bottom: 1px solid var(--gris-300); }
}
.tarjeta-noticia-externa .pie-fuente strong { color: var(--dorado-600); text-transform: uppercase; letter-spacing: .04em; }

/* ===================== PROCESO DE AFILIACIÓN (página completa) ===================== */
.afiliacion-pdf-caja {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--gris-300);
  box-shadow: var(--sombra);
}
.afiliacion-pdf-caja iframe { width: 100%; height: 620px; border: 0; display: block; }

/* ===================== RESPONSIVE — COMPONENTES COMPARTIDOS ===================== */
@media (max-width: 980px) {
  .grid-contacto-rapido { grid-template-columns: 1fr; }
  .grid-documentos { grid-template-columns: 1fr; }
  .grid-noticias-completa { grid-template-columns: 1fr; }
  .grid-contacto-principal { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .formulario-nuevo .fila-2 { grid-template-columns: 1fr; }
}