/* ===== EDUCOOP – Patch de estilo (cargar después de css/style.css) ===== */

/* Paleta institucional */
:root{
  --azul-oscuro:#0B1E34;
  --azul:#00537A;
  --amarillo:#FFBA42;
  --celeste:#189DD3;
}

/* Utilidades */
.container{width:min(1100px,92%); margin-inline:auto}
.section{padding:2rem 0}
.just{text-align:justify}

/* ===== HERO estilo “banda + escudo” ===== */
.hero-educoop{position:relative; padding-top:3.5rem}
.hero-band{
  position:absolute; left:0; right:0; top:2.2rem; height:70px; background:var(--azul-oscuro);
}
.hero-badge{
  width:150px; height:150px; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  margin:0 auto; position:relative; z-index:2;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  border:8px solid var(--amarillo);
}
.hero-badge img{width:100%; height:100%; object-fit:contain; padding:14px}

.hero-text{margin-top:1rem; text-align:center}
.hero-sub{margin:.2rem 0; color:var(--azul); font-weight:700; letter-spacing:.02em}
.hero-title{margin:.2rem 0 .6rem; font-size:clamp(28px,4.2vw,42px); color:var(--azul-oscuro)}
.hero-q{color:var(--amarillo); font-weight:800; letter-spacing:.02em}

/* Subtítulos de sección */
.sec-mini{color:var(--azul-oscuro); text-transform:uppercase; letter-spacing:.04em; margin:0 0 .4rem}
.sec-title{margin:0 0 1rem; color:var(--azul-oscuro)}

/* ===== PRINCIPIOS: 4 cuadros con bordes de color ===== */
.principios-4{
  display:grid; gap:1rem;
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 1024px){ .principios-4{grid-template-columns:repeat(2, 1fr)} }
@media (max-width: 560px){  .principios-4{grid-template-columns:1fr} }

.p-card{
  background:#fff; border:3px solid #e5e7eb; border-radius:14px;
  padding:1rem 1.1rem; box-shadow:0 6px 14px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:.45rem;
}
.p-card h3{margin:.1rem 0 .2rem}

/* Bordes institucionales */
.b-azul-oscuro{border-color:var(--azul-oscuro)}
.b-azul{border-color:var(--azul)}
.b-amarillo{border-color:var(--amarillo)}
.b-celeste{border-color:var(--celeste)}

/* Botón PDF amarillo */
.btn.pdf{
  display:inline-block; background:var(--amarillo); color:var(--azul-oscuro);
  text-decoration:none; font-weight:800; padding:.7rem 1.1rem; border-radius:10px;
  box-shadow:0 6px 16px rgba(255,186,66,.35);
}
.btn.pdf:hover{filter:brightness(1.05); transform:translateY(-1px)}




/* ====== Subcolumnas internas ====== */
.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
  margin-top: 1rem;
}

.sub-col {
  background-color: #fff;
  border: 2px solid var(--amarillo);
  border-radius: 10px;
  padding: 1.2rem;
  box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

.sub-col h4 {
  color: var(--azul);
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--azul);
  margin-bottom: 1rem;
  padding-bottom: .3rem;
}

.sub-col p {
  text-align: justify;
  margin-bottom: 0.8rem;
}

/* Enlaces institucionales dentro */
.sub-col a {
  color: var(--azul);
  text-decoration: none;
  font-weight: 600;
}
.sub-col a:hover {
  color: var(--amarillo);
  text-decoration: underline;
}


/* ===== PRINCIPIOS EN FORMATO VERTICAL ===== */
.principios-vertical {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: min(850px, 95%);
  margin-inline: auto;
  padding: 2rem 0;
}

/* Estilo base de cada tarjeta */
.p-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 1.8rem 2rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  text-align: justify;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Títulos */
.p-card h3 {
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--azul);
  border-bottom: 3px solid currentColor;
  padding-bottom: 0.4rem;
}

/* Bordes con colores institucionales */
.b-azul-oscuro { border-left: 6px solid #0B1E34; }
.b-azul         { border-left: 6px solid #00537A; }
.b-amarillo     { border-left: 6px solid #FFBA42; }
.b-celeste      { border-left: 6px solid #189DD3; }

/* Responsive */
@media (max-width: 600px) {
  .p-card {
    padding: 1.4rem 1.2rem;
  }
  .p-card h3 {
    font-size: 1.2rem;
  }
}

.centered {
  text-align: center;
  margin: 2rem 0 4rem 0; /* agrega espacio abajo */
}

.btn.pdf {
  display: inline-block;
  background-color: #FFBA42; /* amarillo institucional */
  color: #0B1E34; /* azul institucional */
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn.pdf:hover {
  background-color: #0B1E34;
  color: #fff;
}