/* ============================================================
   PÁGINAS PÚBLICAS — Bloques compartidos (P1)
   Navy + rojo/azul del escudo · Fredoka · plano (sin degradados)
   Global de componentes (como site-header/footer). Se carga en index.html.
   Lo usan: Historia, Infraestructura, Propuesta, Servicios,
   Inicial/Primaria/Secundaria, Éxitos, Eventos, Trabaja, Contacto.
   ============================================================ */
:root{
  --pp-navy:#0C1836; --pp-navy2:#14264F; --pp-blue:#0A6FD0; --pp-sky:#2AA9FF;
  --pp-red:#C81E1E; --pp-red-d:#9E1414; --pp-ink:#1A2230; --pp-ink2:#5B6472;
  --pp-line:#E6E9EF; --pp-bg:#F4F7FB; --pp-wa:#25D366;
}

/* Empuja el contenido bajo el header fijo (accent 4px + header) */
.pub-page{ padding-top: 64px; background:#fff; }
.pub-page h1,.pub-page h2,.pub-page h3,.pub-page h4{ font-family:"Fredoka",system-ui,sans-serif; }
.pub-container{ max-width:1180px; margin:0 auto; padding:0 22px; }
.mt-l{ margin-top:1.4rem; }
.mt-s{ margin-top:.8rem; }
.ph-img{
  background:repeating-linear-gradient(45deg,#e4e9f0,#e4e9f0 10px,#eef2f7 10px,#eef2f7 20px);
  display:flex; align-items:center; justify-content:center;
  color:#8a97a3; font-size:13px; text-align:center; padding:10px; border-radius:14px;
}

/* Banner de página */
.pub-banner{ position:relative; background:var(--pp-navy); min-height:230px; display:flex; align-items:center; overflow:hidden; }
.pub-banner .pub-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pub-banner .pub-banner-scrim{ position:absolute; inset:0; background:rgba(9,16,38,.62); }
.pub-banner h1{ position:relative; z-index:2; color:#fff; font-size:clamp(28px,5vw,46px); font-weight:700; max-width:1180px; margin:0 auto; padding:48px 22px; width:100%; }
.pub-banner .pub-crumb{ display:block; font-family:"Fredoka"; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--pp-sky); margin-bottom:8px; }

/* Secciones */
.pub-section{ padding:clamp(44px,7vw,80px) 0; }
.pub-section.alt{ background:var(--pp-bg); }
.pub-section.dark{ background:var(--pp-navy2); color:#fff; }
.pub-kicker{ font-family:"Fredoka"; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pp-red); font-size:13px; margin-bottom:8px; }
.pub-h2{ font-size:clamp(24px,4vw,38px); color:var(--pp-navy2); line-height:1.14; margin-bottom:14px; font-weight:700; }
.pub-section.dark .pub-h2{ color:#fff; }
.pub-lead{ color:var(--pp-ink2); line-height:1.7; max-width:62ch; }
.pub-section.dark .pub-lead{ color:#C6D0E4; }

/* Dos columnas texto + imagen */
.pub-two-col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,48px); align-items:center; }
.pub-two-col .ph-img,.pub-two-col img{ width:100%; height:320px; object-fit:cover; border-radius:18px; }
.pub-two-col p{ color:var(--pp-ink2); line-height:1.75; margin-bottom:1rem; }

/* Quote banner (cabecera de nivel / propuesta) */
.quote-banner{ display:flex; flex-wrap:wrap; align-items:stretch; }
.quote-banner .q-text{ flex:1 1 340px; padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px); color:#fff; font-family:"Fredoka"; font-weight:500; font-size:clamp(20px,2.6vw,30px); line-height:1.3; display:flex; align-items:center; }
.quote-banner .q-img{ flex:1 1 340px; min-height:300px; object-fit:cover; }
.quote-banner .ph-img{ border-radius:0; }
.quote-banner .q-img img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }
.quote-banner.azul .q-text{ background:var(--pp-blue); }
.quote-banner.celeste .q-text{ background:var(--pp-sky); }
.quote-banner.rojo .q-text{ background:var(--pp-red); }
.quote-banner.navy .q-text{ background:var(--pp-navy2); }

/* Perfil / grid de bloques (misión-visión, competencias, cartas) */
.perfil-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.perfil-item{ background:#fff; border:1px solid var(--pp-line); border-left:4px solid var(--pp-blue); border-radius:12px; padding:20px; }
.pub-section.alt .perfil-item{ background:#fff; }
.perfil-item h4{ color:var(--pp-navy2); font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.perfil-item p{ color:var(--pp-ink2); font-size:.95rem; line-height:1.6; }

/* Galería */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.gallery-grid .ph-img,.gallery-grid img{ aspect-ratio:4/3; width:100%; object-fit:cover; border-radius:14px; border:1px solid var(--pp-line); }

/* Servicios */
.service-list{ display:grid; gap:18px; }
.service-item{ display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--pp-line); border-radius:16px; padding:22px; }
.service-item .svc-ic{ flex:none; width:52px; height:52px; border-radius:14px; background:var(--pp-navy2); color:var(--pp-sky); display:grid; place-items:center; }
.service-item .svc-ic svg{ width:26px; height:26px; }
.service-item h4{ color:var(--pp-navy2); font-size:1.15rem; font-weight:700; margin-bottom:4px; }
.service-item p{ color:var(--pp-ink2); line-height:1.6; font-size:.95rem; }

/* Diagrama (propuesta) */
.diagram{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; }
.diagram .d-center{ width:132px; height:132px; border-radius:50%; background:var(--pp-navy); color:#fff; display:grid; place-items:center; text-align:center; font-family:"Fredoka"; font-weight:600; font-size:14px; padding:10px; }
.diagram .d-node{ width:104px; height:104px; border-radius:50%; border:3px solid var(--pp-sky); color:var(--pp-navy2); display:grid; place-items:center; text-align:center; font-size:12.5px; font-weight:600; padding:8px; transition:background .2s ease,color .2s ease; }
.diagram .d-node:hover{ background:var(--pp-sky); color:#fff; }
.list-plain{ max-width:820px; margin:0 auto; }
.list-plain li{ padding:12px 0; border-bottom:1px solid var(--pp-line); color:var(--pp-ink2); list-style:none; }
.list-plain li strong{ color:var(--pp-navy2); }

/* Blog (eventos) */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.blog-card{ background:#fff; border:1px solid var(--pp-line); border-radius:16px; overflow:hidden; }
.blog-card .ph-img,.blog-card img{ height:160px; border-radius:0; width:100%; object-fit:cover; }
.blog-card .blog-info{ padding:16px; }
.blog-card .blog-date{ font-size:12px; color:var(--pp-ink2); margin-bottom:6px; }
.blog-card h4{ color:var(--pp-navy2); font-size:1.05rem; line-height:1.3; }
.pagination{ text-align:center; padding:26px 0 0; }
.pagination span{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--pp-line); margin:0 4px; font-size:13px; color:var(--pp-ink2); }
.pagination span.active{ background:var(--pp-red); color:#fff; border-color:var(--pp-red); }

/* Trabaja con nosotros */
.jobs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.job-card{ background:#fff; border:1px solid var(--pp-line); border-radius:16px; overflow:hidden; }
.job-card .job-head{ background:var(--pp-navy2); color:#fff; padding:16px 20px; font-family:"Fredoka"; font-weight:600; }
.job-card .job-body{ padding:18px 20px; font-size:.95rem; color:var(--pp-ink2); }
.job-card .job-body ul{ margin:10px 0; padding-left:18px; list-style:disc; }
.job-card .job-dl{ display:inline-block; margin-top:10px; background:var(--pp-red); color:#fff; padding:9px 18px; border-radius:999px; font-family:"Fredoka"; font-weight:600; font-size:13px; text-decoration:none; }
.job-card .job-dl:hover{ background:var(--pp-red-d); }

/* Contacto */
.contact-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:34px; align-items:start; }
.contact-form{ background:#fff; border:1px solid var(--pp-line); border-radius:18px; padding:28px; }
.contact-form h3{ color:var(--pp-navy2); margin-bottom:6px; }
.contact-form input,.contact-form textarea{ width:100%; padding:12px 14px; margin:8px 0; border:1px solid var(--pp-line); border-radius:10px; font-family:inherit; font-size:15px; }
.contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:var(--pp-blue); }
.contact-form .btn-form{ background:var(--pp-red); color:#fff; border:none; padding:13px 20px; border-radius:999px; font-family:"Fredoka"; font-weight:600; width:100%; cursor:pointer; font-size:15px; }
.contact-form .btn-form:hover{ background:var(--pp-red-d); }
.contact-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.contact-card{ background:var(--pp-navy2); color:#fff; border-radius:16px; padding:22px; text-align:center; }
.contact-card .cc-ic{ color:var(--pp-sky); margin-bottom:8px; display:inline-flex; }
.contact-card b{ font-family:"Fredoka"; font-weight:600; display:block; margin-bottom:2px; }
.contact-card span{ font-size:.9rem; color:#C6D0E4; }
.contact-card a{ color:#fff; text-decoration:none; }

/* WhatsApp flotante (todas las páginas públicas) */
.pub-wa{ position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; background:var(--pp-wa); color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.28); z-index:1030; transition:transform .2s ease; }
.pub-wa:hover{ transform:scale(1.08); }

@media (max-width:720px){
  .pub-two-col .ph-img,.pub-two-col img{ height:240px; }
  .quote-banner .q-img{ min-height:220px; }
}
@media (prefers-reduced-motion: reduce){
  .pub-wa,.diagram .d-node{ transition:none; }
}

/* ============================================================
   HEADER — submenús desplegables (P1). El header es el mismo
   componente reutilizable (SiteHeader) en TODAS las páginas.
   ============================================================ */
.nav-group{ position:relative; display:inline-flex; align-items:center; }
.nav-group > .nav-trigger{ background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; white-space:nowrap; font-family:var(--font-heading); font-size:.82rem; font-weight:600; line-height:1; color:rgba(255,255,255,.85); }
.nav-group > .nav-trigger:hover{ color:#fff; }
.nav-group > .nav-trigger::after{ content:"▾"; position:static; width:auto; height:auto; background:none; transform:none; border-radius:0; margin-left:6px; font-size:10px; line-height:1; opacity:.85; }
.nav-submenu{
  position:absolute; top:100%; left:0; min-width:210px;
  background:#fff; border-radius:12px; padding:8px 0;
  box-shadow:0 14px 30px rgba(12,24,54,.22);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:1200;
}
.nav-group:hover .nav-submenu, .nav-group:focus-within .nav-submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-submenu a{ display:block; padding:9px 18px; color:#14264F; font-size:14px; font-weight:600; text-decoration:none; }
.nav-submenu a:hover{ background:#F4F7FB; color:#C81E1E; }