/* ==================================================================
   PÁGINAS DE CONTENIDO
   Estilos compartidos por como-puntuamos.html, transparencia.html,
   contacto.html, privacidad.html y aviso-legal.html. Reutiliza los
   tokens de css/styles.css — no define colores ni tipografías nuevas.
   ================================================================== */

.page-hero{
  padding:52px 0 40px;
  border-bottom:1px solid var(--line);
}
.page-hero .breadcrumb{
  font-size:13px; color:var(--ink-faint); margin-bottom:18px;
}
.page-hero .breadcrumb a{ color:var(--ink-soft); }
.page-hero .breadcrumb a:hover{ color:var(--ink); }
.page-hero h1{
  font-size:clamp(30px,5vw,44px);
  margin-bottom:14px;
}
.page-hero .lead{
  font-size:16px; color:var(--ink-soft); max-width:62ch;
}

.page-section{ padding:48px 0; }
.page-section + .page-section{ border-top:1px solid var(--line); }
.page-section h2{
  font-size:clamp(21px,3vw,27px);
  margin-bottom:16px;
}
.page-section h3{
  font-family:var(--font-display); font-weight:600; font-size:16px;
  margin-bottom:8px;
}
.page-section p{
  font-size:15px; color:var(--ink-soft); max-width:70ch; margin-bottom:14px;
}
.page-section p:last-child{ margin-bottom:0; }
.page-section ul.plain-list{ display:grid; gap:8px; margin:14px 0 0; max-width:70ch; }
.page-section ul.plain-list li{
  font-size:15px; color:var(--ink-soft); padding-left:18px; position:relative;
}
.page-section ul.plain-list li::before{
  content:"—"; position:absolute; left:0; color:var(--ink-faint);
}
.page-section-narrow{ max-width:760px; }

/* ---------------- Criterios de puntuación (Cómo puntuamos) ---------------- */
.criteria-grid{
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px;
}
@media (min-width:640px){ .criteria-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .criteria-grid{ grid-template-columns:repeat(3,1fr); } }

.criteria-card{
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--paper-raised); padding:22px;
}
.criteria-card .cc-num{
  font-family:var(--font-mono); font-size:12px; color:var(--cobalt);
  background:var(--cobalt-tint); width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.criteria-card h3{ margin-bottom:6px; }
.criteria-card p{ font-size:14px; margin-bottom:0; }

.independence-grid{ display:grid; gap:14px; margin-top:18px; }
@media (min-width:700px){ .independence-grid{ grid-template-columns:1fr 1fr; } }
.independence-card{
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--paper); padding:20px;
}
.independence-card h3{ color:var(--cobalt); margin-bottom:8px; }
.independence-card p{ font-size:14px; margin-bottom:0; }

/* ---------------- Aviso de afiliación futura (Transparencia) ---------------- */
.future-note{
  border:1px dashed var(--line-strong); border-radius:var(--radius-m);
  padding:16px 18px; margin-top:16px; max-width:70ch;
  font-size:13.5px; color:var(--ink-soft);
}

/* ---------------- Formulario de contacto ---------------- */
.contact-grid{ display:grid; gap:40px; }
@media (min-width:860px){ .contact-grid{ grid-template-columns:1.2fr 1fr; align-items:start; } }

.contact-form{ display:grid; gap:16px; max-width:520px; }
.form-field{ display:grid; gap:6px; }
.form-field label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.form-field input,
.form-field textarea{
  border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:12px 14px; font-family:inherit; font-size:14.5px;
  background:var(--paper-raised); color:var(--ink);
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-field input:focus,
.form-field textarea:focus{ outline:2px solid var(--cobalt); outline-offset:1px; }

.form-note{ font-size:12.5px; color:var(--ink-faint); margin-top:-4px; }
.form-success{
  display:none; border:1px solid var(--sage); background:var(--sage-tint); color:var(--sage);
  border-radius:var(--radius-s); padding:12px 14px; font-size:13.5px; margin-top:2px;
}
.form-success.is-visible{ display:block; }

.contact-info{ display:grid; gap:14px; align-content:start; }
.contact-info-card{
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--paper-raised); padding:18px 20px;
}
.contact-info-card h3{ font-size:14px; margin-bottom:6px; }
.contact-info-card p{ font-size:14px; margin-bottom:0; }
.contact-info-card .placeholder{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint);
}

/* ---------------- Aviso de contenido provisional (páginas legales) ---------------- */
.pending-banner{
  display:flex; gap:12px; align-items:flex-start;
  border:1px dashed var(--brass); background:var(--brass-tint);
  border-radius:var(--radius-m); padding:16px 18px; margin-bottom:8px;
}
.pending-banner svg{ width:18px; height:18px; color:var(--brass); flex-shrink:0; margin-top:2px; }
.pending-banner p{ margin-bottom:0; font-size:13.5px; color:var(--ink); }
.pending-banner strong{ color:var(--brass); }

.legal-placeholder{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-faint);
  background:var(--paper); border:1px dashed var(--line-strong);
  border-radius:var(--radius-s); padding:2px 8px; display:inline-block;
}