/* =====================================================================
   IPD — Información para la Defensa
   Hoja de estilos unificada
   Autor: Junta de Desarrolladores Nacional Justicialistas (J6)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES (design tokens)
   --------------------------------------------------------------------- */
:root{
  --azul-tactico:#1D3557;
  --azul-medio:#457B9D;
  --azul-claro:#A8DADC;
  --dorado:#C9A227;
  --dorado-hover:#dab733;
  --rojo:#C1121F;

  --fondo:#F7FAFC;
  --superficie:#ffffff;
  --superficie-alt:#eef1f6;
  --borde:#e3e8ef;

  --texto:#1a2332;
  --texto-suave:#5a6b82;
  --texto-inverso:#ffffff;

  --chip-nacion-bg:#e3edff;
  --chip-nacion-fg:#1D3557;
  --chip-pba-bg:#e6f6ec;
  --chip-pba-fg:#1e7a45;
  --chip-caba-bg:#fdeee6;
  --chip-caba-fg:#b5501f;

  --sombra:0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --sombra-fuerte:0 10px 30px rgba(15,23,42,.15);

  --radio:14px;
  --radio-chico:10px;
  --radio-pill:999px;

  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;

  --fuente:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:10px;
  --fs-sm:12px;
  --fs-base:14px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;

  --ancho-max:1000px;
  --alto-header-mobile:50px;
  --alto-header-desktop:64px;
  --alto-bottom-nav:62px;

  --t-rapida:.12s ease;
  --t-media:.22s ease;
}

/* ---------------------------------------------------------------------
   Modo oscuro
   --------------------------------------------------------------------- */
[data-tema="oscuro"]{
  --fondo:#0F172A;
  --superficie:#16213b;
  --superficie-alt:#1c2a48;
  --borde:#27354f;

  --texto:#e8edf5;
  --texto-suave:#9fb0c8;
  --texto-inverso:#0F172A;

  --chip-nacion-bg:#1e3355;
  --chip-nacion-fg:#a8c6ff;
  --chip-pba-bg:#16321f;
  --chip-pba-fg:#8ee0a8;
  --chip-caba-bg:#3a2318;
  --chip-caba-fg:#f0b18a;

  --sombra:0 1px 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  --sombra-fuerte:0 10px 30px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------
   2. RESET + LAYOUT BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--fuente);
  background:var(--fondo);
  color:var(--texto);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background var(--t-media), color var(--t-media);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
img{max-width:100%;display:block}
a{color:var(--azul-medio);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}

/* ---------------------------------------------------------------------
   3. TIPOGRAFÍA BASE
   --------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{line-height:1.25;color:var(--texto)}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p{line-height:1.6}

:focus-visible{
  outline:2px solid var(--dorado);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------------------------------------------------------------------
   4. LAYOUT / CONTENEDOR
   --------------------------------------------------------------------- */
.container{
  max-width:var(--ancho-max);
  margin:0 auto;
  padding:var(--sp-6) var(--sp-4) var(--sp-4);
  width:100%;
}
.seccion{margin-bottom:var(--sp-5)}
.seccion-titulo{
  display:flex;align-items:center;justify-content:space-between;
  margin:var(--sp-5) 0 var(--sp-3);
}
.seccion-titulo h2,
.seccion-titulo h3{
  font-size:var(--fs-base);
  color:var(--azul-tactico);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}
[data-tema="oscuro"] .seccion-titulo h2,
[data-tema="oscuro"] .seccion-titulo h3{color:var(--texto)}
.seccion-titulo a{
  font-size:var(--fs-sm);
  color:var(--azul-medio);
  font-weight:600;
}

/* ---------------------------------------------------------------------
   5. HEADER MOBILE
   --------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--azul-tactico);
  color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.header-top{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--alto-header-mobile);
  padding:0 var(--sp-4);
  max-width:var(--ancho-max);
  margin:0 auto;
  width:100%;
}
.header-izq{
  display:flex;align-items:center;gap:var(--sp-2);
  height:100%;
}
.header-logo{
  font-size:var(--fs-lg);
  font-weight:800;
  letter-spacing:.5px;
  line-height:1;
  color:#fff;
  display:inline-flex;align-items:center;
}
.header-nombre{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
  font-size:var(--fs-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.9;
  padding-top:1px;
}
.header-nombre .linea1,
.header-nombre .linea2{line-height:1}

.header-der{
  display:flex;align-items:center;gap:var(--sp-3);
}
.header-btn-tema{
  width:32px;height:32px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  color:#fff;
  background:rgba(255,255,255,.08);
  transition:background var(--t-rapida);
}
.header-btn-tema:hover{background:rgba(255,255,255,.18)}

.header-nav{display:none}

/* ---------------------------------------------------------------------
   6. HEADER DESKTOP
   --------------------------------------------------------------------- */
@media (min-width:768px){
  .header-top{
    height:var(--alto-header-desktop);
    padding:0 var(--sp-5);
  }
  .header-logo{font-size:26px}
  .header-nombre{font-size:var(--fs-sm)}
  .header-der::before{
    content:"";
    width:1px;height:28px;
    background:rgba(255,255,255,.25);
    margin-right:var(--sp-2);
  }
  .header-nav{
    display:flex;gap:var(--sp-5);
    font-size:var(--fs-base);
    font-weight:600;
  }
  .header-nav a{
    color:rgba(255,255,255,.75);
    padding-bottom:2px;
    border-bottom:2px solid transparent;
    transition:color var(--t-rapida), border-color var(--t-rapida);
  }
  .header-nav a:hover{color:#fff}
  .header-nav a.activo{
    color:#fff;
    border-bottom-color:var(--dorado);
  }
}

/* ---------------------------------------------------------------------
   7. BOTTOM NAV (solo mobile)
   --------------------------------------------------------------------- */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:90;
  background:var(--superficie);
  border-top:1px solid var(--borde);
  display:flex;justify-content:space-around;align-items:center;
  height:var(--alto-bottom-nav);
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(15,23,42,.05);
}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:9.5px;font-weight:600;
  color:var(--texto-suave);
  text-decoration:none;
  flex:1;
  position:relative;
  padding-top:8px;
}
.bottom-nav-item .ic{
  font-size:18px;line-height:1;opacity:.6;
  position:relative;
}
.bottom-nav-item.activo{color:var(--azul-tactico)}
[data-tema="oscuro"] .bottom-nav-item.activo{color:var(--dorado)}
.bottom-nav-item.activo .ic{opacity:1}
.bottom-nav-item.activo::before{
  content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;
  background:var(--dorado);
  border-radius:0 0 3px 3px;
}
.bottom-nav-badge{
  position:absolute;top:-2px;right:-8px;
  background:var(--rojo);color:#fff;
  font-size:8px;font-weight:800;
  min-width:14px;height:14px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
}
@media (min-width:768px){
  .bottom-nav{display:none}
}
body{padding-bottom:calc(var(--alto-bottom-nav) + env(safe-area-inset-bottom))}
@media (min-width:768px){
  body{padding-bottom:0}
}

/* ---------------------------------------------------------------------
   8. BOTONES
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);
  border-radius:var(--radio-chico);
  padding:11px 16px;
  font-size:var(--fs-base);
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:transform var(--t-rapida), opacity var(--t-rapida), background var(--t-rapida);
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primario{background:var(--azul-tactico);color:#fff}
.btn-primario:hover{background:#16294a}
.btn-dorado{background:var(--dorado);color:#1a1200}
.btn-dorado:hover{background:var(--dorado-hover)}
.btn-blanco{
  background:rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.btn-blanco:hover{background:rgba(255,255,255,.25)}
.btn-ghost{
  background:transparent;
  color:var(--azul-tactico);
  border:1px solid var(--borde);
}
[data-tema="oscuro"] .btn-ghost{color:var(--texto);border-color:var(--borde)}
.btn-ghost:hover{background:var(--superficie-alt)}
.btn-full{width:100%}
.btn-chico{padding:8px 12px;font-size:var(--fs-sm)}

/* ---------------------------------------------------------------------
   9. CHIPS + BADGES
   --------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;
  font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;
  padding:3px 8px;border-radius:var(--radio-pill);
}
.chip-nacion{background:var(--chip-nacion-bg);color:var(--chip-nacion-fg)}
.chip-pba{background:var(--chip-pba-bg);color:var(--chip-pba-fg)}
.chip-caba{background:var(--chip-caba-bg);color:var(--chip-caba-fg)}

.badge-hoy{
  background:var(--rojo);color:#fff;
  font-size:9px;font-weight:800;
  padding:3px 8px;border-radius:var(--radio-pill);
  letter-spacing:.05em;
}

/* ---------------------------------------------------------------------
   10. CARDS (normas)
   --------------------------------------------------------------------- */
.card{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-4);
  box-shadow:var(--sombra);
  transition:transform var(--t-rapida), box-shadow var(--t-rapida);
}
.card:hover{box-shadow:var(--sombra-fuerte)}
.card-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:var(--sp-3);
  flex-wrap:wrap;
  position:relative;
}
.card-fecha{
  font-size:10.5px;
  color:var(--texto-suave);
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}
.card h3,
.card h4{
  font-size:var(--fs-md);
  line-height:1.4;
  margin-bottom:var(--sp-2);
  color:var(--texto);
  font-weight:700;
  text-align:center;
}
.card p{
  font-size:13px;
  color:var(--texto-suave);
  line-height:1.65;
  margin-bottom:var(--sp-4);
  text-align:left;
}
.card-acciones{display:flex;gap:var(--sp-2)}
.card-acciones .btn{
  flex:1;
  padding:10px;
  font-size:var(--fs-sm);
}

/* ---------------------------------------------------------------------
   11. CARDS (blog)
   --------------------------------------------------------------------- */
.blog-card{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  margin-bottom:var(--sp-3);
  box-shadow:var(--sombra);
  transition:transform var(--t-rapida), box-shadow var(--t-rapida);
}
.blog-card:hover{box-shadow:var(--sombra-fuerte)}
.blog-card-img{
  height:140px;
  background:linear-gradient(135deg,var(--azul-medio),var(--azul-claro));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:32px;
  overflow:hidden;
}
.blog-card-img img{width:100%;height:100%;object-fit:cover}
.blog-card-body{padding:var(--sp-3) var(--sp-4)}
.blog-card-body h3,
.blog-card-body h4{
  font-size:var(--fs-base);
  line-height:1.3;
  margin-bottom:6px;
}
.blog-card-body p{
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  line-height:1.45;
  margin-bottom:var(--sp-2);
}

/* ---------------------------------------------------------------------
   12. BUSCADOR
   --------------------------------------------------------------------- */
.buscador{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  display:flex;align-items:center;gap:var(--sp-2);
  padding:10px var(--sp-3);
  margin-bottom:var(--sp-3);
  box-shadow:var(--sombra);
}
.buscador .icono{font-size:var(--fs-base);opacity:.5}
.buscador input{
  border:none;outline:none;
  font-size:var(--fs-base);
  flex:1;
  background:transparent;
  color:var(--texto);
}
.buscador input::placeholder{color:#9aa8bd}

/* ---------------------------------------------------------------------
   13. TABS
   --------------------------------------------------------------------- */
.tabs{
  display:flex;gap:6px;
  margin-bottom:var(--sp-3);
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-pill);
  padding:6px 14px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--texto-suave);
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--t-rapida), color var(--t-rapida);
}
.tab:hover{background:var(--superficie-alt)}
.tab.activo{
  background:var(--azul-tactico);
  color:#fff;
  border-color:var(--azul-tactico);
}

/* ---------------------------------------------------------------------
   14. FILTRO DE FECHA
   --------------------------------------------------------------------- */
.filtro-fecha{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  padding:10px var(--sp-3);
  margin-bottom:var(--sp-3);
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  cursor:pointer;
}

/* ---------------------------------------------------------------------
   15. STATS
   --------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-2);
  margin-bottom:var(--sp-4);
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.stat{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  padding:10px var(--sp-2);
  text-align:center;
}
.stat b{
  display:block;
  font-size:var(--fs-lg);
  color:var(--azul-tactico);
  line-height:1.1;
}
[data-tema="oscuro"] .stat b{color:var(--dorado)}
.stat span{
  font-size:9.5px;
  color:var(--texto-suave);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
}

/* ---------------------------------------------------------------------
   16. HERO
   --------------------------------------------------------------------- */
.hero{
  background:linear-gradient(135deg,var(--azul-tactico),var(--azul-medio));
  color:#fff;
  border-radius:var(--radio);
  padding:var(--sp-6) var(--sp-5);
  margin-bottom:var(--sp-4);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.hero,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero p,
.hero a,
.hero span{
  color:#fff;
}

.hero-condor-top{
  display:block;
  margin:0 auto var(--sp-4);
  height:100px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
}

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

.hero h1,
.hero h2{
  font-size:var(--fs-xl);
  line-height:1.25;
  margin-bottom:var(--sp-3);
}

.hero p{
  font-size:var(--fs-base);
  opacity:.9;
  line-height:1.5;
  margin-bottom:var(--sp-4);
}

.hero-botones{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  align-items:center;
  justify-content:center;
}
.hero-botones .btn{width:100%;max-width:280px}

@media (min-width:768px){
  .hero{
    padding:var(--sp-7) var(--sp-5);
  }
  .hero-condor-top{
    height:125px;
    margin-bottom:var(--sp-5);
  }
  .hero h1,
  .hero h2{
    font-size:var(--fs-2xl);
    white-space:nowrap;
  }
  .hero p{
    font-size:var(--fs-md);
    white-space:nowrap;
  }
  .hero-botones{
    flex-direction:row;
    gap:var(--sp-3);
  }
  .hero-botones .btn{width:auto;max-width:none}
}

/* ---------------------------------------------------------------------
   17. COMUNIDAD
   --------------------------------------------------------------------- */
.comunidad{
  background:var(--azul-tactico);
  color:#fff;
  border-radius:var(--radio);
  padding:var(--sp-5) var(--sp-4);
  margin-top:var(--sp-4);
  text-align:center;
}
.comunidad,
.comunidad h1,
.comunidad h2,
.comunidad h3,
.comunidad h4,
.comunidad p,
.comunidad span{
  color:#fff;
}
.comunidad h3{
  font-size:var(--fs-md);
  margin-bottom:var(--sp-3);
}
.comunidad-botones{
  display:flex;flex-direction:column;gap:var(--sp-2);
}
@media (min-width:768px){
  .comunidad-botones{
    flex-direction:row;
    justify-content:center;
  }
}

/* ---------------------------------------------------------------------
   18. FOOTER (sin cóndor, solo JDNJ)
   --------------------------------------------------------------------- */
.footer{
  background:var(--azul-tactico);
  color:#fff;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  margin-top:var(--sp-6);
  text-align:center;
}
.footer,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer p,
.footer span{
  color:#fff;
}
.footer-jdnj{
  height:60px;width:auto;object-fit:contain;
  margin:0 auto var(--sp-3);display:block;
  opacity:.95;
}
.footer p{
  font-size:10.5px;
  opacity:.75;
  line-height:1.5;
  letter-spacing:.04em;
}
.footer-links{
  display:flex;justify-content:center;gap:var(--sp-4);
  margin:var(--sp-3) 0 0;
  flex-wrap:wrap;
}
.footer-links a{
  color:rgba(255,255,255,.8);
  font-size:var(--fs-sm);
  font-weight:600;
}
.footer-links a:hover{color:#fff}

@media (min-width:768px){
  .footer{padding:var(--sp-5) var(--sp-5)}
  .footer-jdnj{height:75px}
  .footer p{font-size:var(--fs-sm)}
}

/* ---------------------------------------------------------------------
   19. FORMULARIO SUSCRIPCIÓN (CENTRADO)
   --------------------------------------------------------------------- */
.cta-sus{
  background:var(--azul-tactico);
  color:#fff;
  border-radius:var(--radio);
  padding:var(--sp-5) var(--sp-4);
  margin-top:var(--sp-4);
  text-align:center;
}
.cta-sus,
.cta-sus h1,
.cta-sus h2,
.cta-sus h3,
.cta-sus h4,
.cta-sus p,
.cta-sus span{
  color:#fff;
}
.cta-sus h3{
  font-size:var(--fs-md);
  margin-bottom:6px;
}
.cta-sus p{
  font-size:var(--fs-sm);
  opacity:.85;
  line-height:1.45;
  margin-bottom:var(--sp-3);
}
.cta-sus form{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  align-items:center;
  justify-content:center;
  max-width:420px;
  margin:0 auto;
}
.cta-sus input{
  width:100%;
  padding:11px var(--sp-3);
  border-radius:var(--radio-chico);
  border:none;
  font-size:var(--fs-base);
  color:#1a2332;
  text-align:center;
}
.cta-sus .btn{width:100%;max-width:220px}

@media (min-width:768px){
  .cta-sus form{
    flex-direction:row;
    max-width:520px;
    gap:var(--sp-3);
  }
  .cta-sus input{
    flex:1;
    text-align:left;
  }
  .cta-sus .btn{width:auto;max-width:none;flex-shrink:0}
}

/* ---------------------------------------------------------------------
   20. UTILIDADES
   --------------------------------------------------------------------- */
.oculto{display:none !important}
.oculto-mobile{display:none}
@media (min-width:768px){
  .oculto-mobile{display:block}
  .oculto-desktop{display:none}
}
.texto-centro{text-align:center}
.mt-1{margin-top:var(--sp-1)}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mb-1{margin-bottom:var(--sp-1)}
.mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}

/* ---------------------------------------------------------------------
   21. MODAL DE DETALLE (historial)
   --------------------------------------------------------------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.65);
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-4);
  animation:fadeIn .18s ease;
}
.modal-caja{
  background:var(--superficie);
  color:var(--texto);
  border-radius:var(--radio);
  width:100%;
  max-width:720px;
  max-height:90vh;
  overflow-y:auto;
  padding:var(--sp-5);
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation:slideUp .22s ease;
}
.modal-cerrar{
  position:absolute;
  top:var(--sp-3);
  right:var(--sp-3);
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--superficie-alt);
  color:var(--texto);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  border:none;
}
.modal-cerrar:hover{background:var(--borde)}
.modal-header{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
  flex-wrap:wrap;
  padding-right:44px;
}
.modal-fecha{
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  margin-left:auto;
}
.modal-titulo{
  font-size:var(--fs-xl);
  line-height:1.3;
  margin-bottom:var(--sp-3);
  color:var(--texto);
}
.modal-criollo{
  font-size:var(--fs-md);
  line-height:1.6;
  color:var(--texto-suave);
  margin-bottom:var(--sp-4);
  font-style:italic;
  border-left:3px solid var(--dorado);
  padding-left:var(--sp-3);
}
.modal-letra{
  background:var(--superficie-alt);
  border-radius:var(--radio-chico);
  padding:var(--sp-3) var(--sp-4);
  font-size:13px;
  line-height:1.6;
  color:var(--texto);
  margin-bottom:var(--sp-4);
}
.modal-letra strong{color:var(--rojo)}
.modal-articulo{
  font-size:15px;
  line-height:1.7;
  color:var(--texto);
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

@media (min-width:768px){
  .modal-caja{padding:var(--sp-6)}
  .modal-titulo{font-size:var(--fs-2xl)}
}

/* ---------------------------------------------------------------------
   22. ARTÍCULO DEL BLOG (entrada.html)
   Estilos para el cuerpo Markdown renderizado.
   --------------------------------------------------------------------- */
.articulo-cuerpo{
  max-width:720px;
  margin:0 auto;
  font-size:16px;
  line-height:1.75;
  color:var(--texto);
}
.articulo-cuerpo h1,
.articulo-cuerpo h2,
.articulo-cuerpo h3{
  margin-top:var(--sp-5);
  margin-bottom:var(--sp-3);
  line-height:1.3;
  color:var(--texto);
}
.articulo-cuerpo h1{font-size:var(--fs-2xl)}
.articulo-cuerpo h2{font-size:var(--fs-xl)}
.articulo-cuerpo h3{font-size:var(--fs-lg)}
.articulo-cuerpo p{margin-bottom:var(--sp-4)}
.articulo-cuerpo a{
  color:var(--azul-medio);
  text-decoration:underline;
}
.articulo-cuerpo strong{color:var(--texto);font-weight:700}
.articulo-cuerpo em{font-style:italic}
.articulo-cuerpo ul,
.articulo-cuerpo ol{
  margin:0 0 var(--sp-4) var(--sp-5);
}
.articulo-cuerpo ul{list-style:disc}
.articulo-cuerpo ol{list-style:decimal}
.articulo-cuerpo li{margin-bottom:var(--sp-2)}
.articulo-cuerpo blockquote{
  border-left:3px solid var(--dorado);
  padding-left:var(--sp-4);
  margin:var(--sp-4) 0;
  color:var(--texto-suave);
  font-style:italic;
}
.articulo-cuerpo img{
  border-radius:var(--radio);
  margin:var(--sp-4) auto;
}
.articulo-cuerpo code{
  background:var(--superficie-alt);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.9em;
}
.articulo-cuerpo pre{
  background:var(--superficie-alt);
  padding:var(--sp-4);
  border-radius:var(--radio-chico);
  overflow-x:auto;
  margin-bottom:var(--sp-4);
}
.articulo-cuerpo hr{
  border:none;
  border-top:1px solid var(--borde);
  margin:var(--sp-5) 0;
}

/* ---------------------------------------------------------------------
   23. SOBRE IPD
   --------------------------------------------------------------------- */
.sobre-seccion{
  margin-bottom:var(--sp-6);
}
.sobre-titulo{
  font-size:var(--fs-lg);
  color:var(--azul-tactico);
  margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--dorado);
  display:inline-block;
}
[data-tema="oscuro"] .sobre-titulo{color:var(--texto)}
.sobre-seccion p{
  font-size:var(--fs-base);
  line-height:1.75;
  color:var(--texto);
  margin-bottom:var(--sp-3);
}
.sobre-seccion p strong{color:var(--azul-tactico)}
[data-tema="oscuro"] .sobre-seccion p strong{color:var(--dorado)}

/* Principios */
.principios{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.principio{
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--sp-4);
  box-shadow:var(--sombra);
}
.principio-icono{
  font-size:28px;
  flex-shrink:0;
  line-height:1;
}
.principio h4{
  font-size:var(--fs-md);
  margin-bottom:var(--sp-1);
  color:var(--texto);
}
.principio p{
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  line-height:1.6;
  margin:0;
}

/* Pasos */
.pasos{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.pasos li{
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
}
.paso-num{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--azul-tactico);
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-base);
}
.pasos li strong{
  display:block;
  font-size:var(--fs-md);
  color:var(--texto);
  margin-bottom:var(--sp-1);
}
.pasos li p{
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  line-height:1.55;
  margin:0;
}

/* Junta */
.junta-caja{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--sp-5);
  text-align:center;
  box-shadow:var(--sombra);
}
.junta-caja img{
  height:80px;
  width:auto;
  margin:0 auto var(--sp-3);
}
.junta-caja p{
  font-size:var(--fs-md);
  margin-bottom:var(--sp-1);
  color:var(--texto);
}
.junta-caja .junta-sub{
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:var(--sp-3);
}
.junta-caja .junta-texto{
  font-size:var(--fs-sm);
  color:var(--texto-suave);
  line-height:1.6;
  max-width:520px;
  margin:0 auto;
}

/* FAQ */
.faq{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.faq details{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  padding:var(--sp-3) var(--sp-4);
  transition:background var(--t-rapida);
}
.faq details[open]{
  background:var(--superficie);
  border-color:var(--azul-medio);
}
.faq summary{
  cursor:pointer;
  font-weight:600;
  color:var(--texto);
  font-size:var(--fs-base);
  list-style:none;
  position:relative;
  padding-right:var(--sp-5);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:var(--azul-medio);
  font-weight:300;
  transition:transform var(--t-rapida);
}
.faq details[open] summary::after{
  content:"−";
}
.faq details p{
  margin-top:var(--sp-3);
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--texto-suave);
}

/* En desktop, 2 columnas para principios */
@media (min-width:768px){
  .principios{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--sp-3);
  }
  .sobre-titulo{font-size:var(--fs-xl)}
  .junta-caja{padding:var(--sp-6)}
  .junta-caja img{height:100px}
}