/* ==================================================================
   Tema visual — ISOCAP (v4.0.0; base v3.23.0)

   Tema institucional moderno sobre Bootstrap 5. Contrastes verificados
   WCAG 2.1 AA (RD 1112/2018): texto blanco sobre --pp-primary (#14507c,
   ratio 7,4:1) y sobre --pp-footer (#12293d, ratio 12,5:1); enlaces
   #125a94 sobre blanco (5,9:1).
   ================================================================== */

:root {
  --pp-primary: #14507c;        /* azul institucional (agua) */
  --pp-primary-dark: #0e3a5c;
  --pp-accent: #0e7d74;         /* verde-azulado (acuífero) */
  --pp-bg: #f5f8fb;
  --pp-footer: #12293d;
  --pp-footer-text: #d7e3ee;
  --pp-link: #125a94;
  --pp-radius: 1rem;
}

body {
  background: var(--pp-bg);
  color: #1d2733;
}

h1, h2, h3, h4, h5, h6 { color: #16324a; font-weight: 700; }

a { color: var(--pp-link); }
a:hover { color: var(--pp-primary-dark); }

/* --- Cabecera / navegación --- */
.pp-navbar {
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(18, 41, 61, .12);
}
.pp-navbar .navbar-brand {
  font-weight: 700;
  color: var(--pp-primary);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pp-navbar .nav-link { color: #2c3e50; font-weight: 500; }
.pp-navbar .nav-link:hover,
.pp-navbar .nav-link:focus { color: var(--pp-primary); }
.pp-brand-logo { flex-shrink: 0; }
.pp-brand-img { height: 56px; width: auto; max-width: 260px; object-fit: contain; }
.pp-footer-logo { height: 40px; width: auto; max-width: 260px; object-fit: contain; }

/* --- Referencia bibliográfica del método (formulario y resultado) --- */
.pp-method-ref {
  background: #eef4f9;
  border-left: 5px solid var(--pp-accent);
  border-radius: .5rem;
  padding: .75rem 1rem;
}
.pp-method-ref h2 { color: var(--pp-primary); }

/* --- Identificador destacado del cálculo (resultado e histórico) --- */
.pp-calc-id { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: #e6f0f8; border-left: 5px solid var(--pp-primary); border-radius: .5rem; padding: .5rem .75rem; }
.pp-calc-id-badge { background: var(--pp-primary); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .15rem .45rem; border-radius: .3rem; }
.pp-calc-desc-plain { color: #16324a; }
.pp-history .pp-history-src { background: #e6f0f8; border-left: 4px solid var(--pp-primary); }

/* --- Selector de unidades del formulario --- */
.unit-select { max-width: 7.5rem; flex: 0 0 auto; }

/* Botones institucionales (contraste AA con texto blanco) */
.btn-pp {
  background: var(--pp-primary);
  border-color: var(--pp-primary);
  color: #fff;
  font-weight: 600;
}
.btn-pp:hover, .btn-pp:focus {
  background: var(--pp-primary-dark);
  border-color: var(--pp-primary-dark);
  color: #fff;
}
.btn-pp-outline {
  border: 2px solid var(--pp-primary);
  color: var(--pp-primary);
  font-weight: 600;
  background: transparent;
}
.btn-pp-outline:hover, .btn-pp-outline:focus {
  background: var(--pp-primary);
  color: #fff;
}

/* --- Tarjetas y contenido --- */
.card {
  border: 0;
  border-radius: var(--pp-radius);
  box-shadow: 0 1px 8px rgba(18, 41, 61, .08);
}

.pp-section { padding: 3rem 0; }
.pp-section-alt { background: #ffffff; }
.pp-section h2 {
  color: var(--pp-primary);
  margin-bottom: 1.25rem;
}
.pp-kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-accent);
  margin-bottom: .25rem;
}

/* --- Hero de la portada --- */
.pp-hero {
  background: linear-gradient(135deg, var(--pp-primary-dark) 0%, var(--pp-primary) 55%, var(--pp-accent) 100%);
  color: #fff;
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
}
.pp-hero h1 { color: #fff; }
.pp-hero .lead { color: #eaf2f9; max-width: 46rem; }
.pp-hero-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pp-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.pp-hero .btn-light { font-weight: 600; }

/* Cinta institucional bajo el hero */
.pp-institucional {
  background: #ffffff;
  border-radius: var(--pp-radius);
  box-shadow: 0 2px 12px rgba(18, 41, 61, .10);
}
.pp-institucional .badge-inst {
  font-size: .9rem;
  color: #2c3e50;
}
.pp-institucional .badge-inst strong { color: var(--pp-primary); }

/* Iconos SVG inline (decorativos) */
.pp-ico {
  width: 1.35rem;
  height: 1.35rem;
  vertical-align: -0.3rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* --- Pie de página institucional --- */
.pp-footer {
  background: var(--pp-footer);
  color: var(--pp-footer-text);
}
.pp-footer a { color: #9fc6e8; }
.pp-footer a:hover, .pp-footer a:focus { color: #ffffff; }
.pp-footer h2, .pp-footer h3 {
  color: #ffffff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pp-footer .pp-ico { width: 1.15rem; height: 1.15rem; }
.pp-footer-copy {
  background: rgba(0, 0, 0, .25);
  font-size: .85rem;
}

/* --- Accesibilidad --- */
:focus-visible {
  outline: 3px solid var(--pp-accent);
  outline-offset: 2px;
}
.pp-hero :focus-visible,
.pp-footer :focus-visible { outline-color: #ffd166; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==================================================================
   Portada ISOCAP (v4.0.0)
   ================================================================== */
.pp-hero-photo {
  position: relative;
  color: #fff;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
}
.pp-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.pp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(14,58,92,.93) 0%, rgba(20,80,124,.85) 50%, rgba(14,125,116,.55) 100%);
}
.pp-hero-title { margin: 0 0 .75rem; line-height: 1; }
.pp-hero-logo {
  height: 112px; width: auto; max-width: 100%;
  background: rgba(255,255,255,.94);
  border-radius: .75rem; padding: .5rem 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.pp-hero-sub { font-size: 1.15rem; font-weight: 600; color: #eaf2f9; max-width: 44rem; }
.pp-hero-photo .lead { color: #eaf2f9; max-width: 46rem; }
.pp-kicker-light { color: #ffd166; }
.pp-link-light { color: #ffd166; }
.pp-link-light:hover { color: #fff; }
.btn-pp-outline-light {
  border: 2px solid #fff; color: #fff; font-weight: 600; background: transparent;
}
.btn-pp-outline-light:hover, .btn-pp-outline-light:focus { background: #fff; color: var(--pp-primary); }

.pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0; }
.pp-stat {
  background: rgba(255,255,255,.12); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25); border-radius: .75rem;
  padding: 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.pp-stat-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pp-stat-label { font-size: .85rem; color: #d7e3ee; }

.pp-figure img { width: 100%; height: auto; border-radius: var(--pp-radius); box-shadow: 0 6px 24px rgba(18,41,61,.18); }
.pp-figure figcaption { font-size: .8rem; color: #5c6b7a; margin-top: .5rem; }

.pp-zone { display: flex; flex-direction: column; gap: .25rem; border-radius: .75rem; padding: .9rem 1rem; height: 100%; background: #fff; border-top: 5px solid; box-shadow: 0 1px 8px rgba(18,41,61,.08); }
/* v4.4.0: dos casos (menos / más de 50.000 habitantes) en lugar de tres zonas */
.pp-zone-a { border-color: #0e7d74; }
.pp-zone-b { border-color: #c0392b; }
.pp-zone strong:first-child { color: #16324a; }
/* Título de una sola línea a ancho de columna («¿Qué es un perímetro…?») */
.pp-title-compact { font-size: 1.45rem; }

.pp-card-photo { overflow: hidden; position: relative; }
.pp-card-photo .card-img-top { height: 200px; object-fit: cover; }
.pp-credit { font-size: .72rem; color: #6c7a89; padding: 0 1.25rem .75rem; }

.pp-pills .nav-link { color: var(--pp-primary); font-weight: 600; border: 1px solid #cfdcea; margin-right: .35rem; margin-bottom: .35rem; }
.pp-pills .nav-link.active { background: var(--pp-primary); border-color: var(--pp-primary); color: #fff; }
.pp-method-card { display: flex; flex-direction: column; }
.pp-shape-badge { font-weight: 600; white-space: nowrap; }
.pp-shape-circulo { background: #e7f1fb; color: #14507c; }
.pp-shape-elipse { background: #e5f5f2; color: #0e7d74; }
.pp-shape-isocrona { background: #fff4de; color: #8a5a00; }
.pp-shape-abierta { background: #f3e8ff; color: #5b21b6; }
.pp-ref-card { border-left: 5px solid var(--pp-accent); }

.pp-steps { counter-reset: paso; list-style: none; padding-left: 0; }
.pp-steps li { counter-increment: paso; position: relative; padding-left: 3.25rem; margin-bottom: 1rem; }
.pp-steps li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--pp-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.pp-cta { background: var(--pp-primary-dark); color: #fff; }
.pp-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.pp-cta .lead { color: #eaf2f9; max-width: 46rem; }

.pp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.pp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pp-reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 575.98px) {
  .pp-hero-logo { height: 84px; }
  .pp-stats { grid-template-columns: 1fr; }
}

/* Logotipo sobre el pie oscuro: tarjeta blanca para preservar el contraste */
.pp-footer-logo-card { display: inline-block; background: #fff; border-radius: .6rem; padding: .4rem .8rem; }
/* v4.6.3: campo trampa del registro, fuera de la vista (no display:none: algunos robots lo respetan) */
.pp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* v4.6.2: logotipos institucionales (bandas anchas) con enlace */
.pp-footer-inst { display: block; max-width: 330px; }
.pp-footer-inst img { width: 100%; height: auto; display: block; }
.pp-footer-inst:hover, .pp-footer-inst:focus { outline: 2px solid #ffd166; outline-offset: 2px; }