/* =========================================================
   SECTIONS.CSS — Estilos comunes para secciones internas
   v19
   ========================================================= */

:root{
  --navy:#0a1b2e;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#e4572e;

  /* Tipografía/ritmo */
  --base-size:16px;
  --base-leading:1.55;     /* interlineado base */
  --para-gap:0.5em;        /* separación entre párrafos (≈ media línea) */

  /* Títulos */
  --title-blue:#0f2742;    /* azul oscuro para h1 de artículo */

  /* Bullets */
  --pt-tab:1.25em;         /* “tab” visual para listas */
}

/* Fondo azul para toda la sección (llega hasta el footer) */
.sections{ background:var(--navy); }

/* Contenedor con 1 cm por lados */
.section-wrap{
  padding-left:1cm;
  padding-right:1cm;
  padding-top:clamp(18px,3vh,28px);
  padding-bottom:clamp(28px,6vh,48px);
}

/* Títulos */
.section-title{
  color:#fff;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 8px;
}
.section-subtitle{
  color:#cbd5e1;
  margin:0 0 16px;
}

/* Grid 2 columnas (1 en móvil) */
.cards{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }

/* ---- TARJETAS ---- */
.card{
  background:#fff;
  color:var(--ink);
  border:3px solid var(--accent);
  outline:1px solid rgba(228,87,46,.35);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.08), 0 14px 30px rgba(0,0,0,.08);
  padding:16px;
}
.card h3{
  margin:0;
  font-weight:700;
  line-height:1.25;
}
.card .date{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}
.card .brief{
  margin-top:10px;
  line-height:var(--base-leading);
  color:#111827;
  text-align:justify;
  text-justify:inter-word;
}

/* Botón “Abrir” */
.card .actions{ margin-top:14px; }
.card .btn-open,
.sections .btn-open{
  display:inline-block;
  text-decoration:none;
  background:var(--accent);
  color:#000;
  font-weight:800;
  border:3px solid var(--accent);
  border-radius:12px;
  padding:10px 16px;
  transition:transform .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.card .btn-open:hover,
.sections .btn-open:hover{
  background:#000;
  color:var(--accent);
  border-color:#000;
  transform:translateY(-2px);
}

/* Separador */
hr.soft{
  border:0;
  border-top:1px solid rgba(255,255,255,.15);
  margin:18px 0 22px;
}

/* ---- ARTÍCULO: tipografía unificada ---- */
.article-card h1{
  color:var(--title-blue);
  font-weight:800;
  letter-spacing:-.015em;
  /* ~20% más grande que h1 base del sitio */
  font-size: clamp(30px, 5.6vw, 44px);
  margin: 0 0 .25em;
}
.article-card .meta{
  font-size:13px; color:#94a3b8; margin:6px 0 12px;
}

/* Resumen superior: negrita + itálica, justificado y compacto */
.lead-summary{
  font-weight:800;
  font-style:italic;
  text-align:justify; text-justify:inter-word;
  line-height:var(--base-leading);
  margin: 0 0 var(--para-gap);
}

/* Contenido del artículo: mismo ritmo tipográfico en todo el sitio */
.article-card .brief{
  font-size: var(--base-size);
  line-height: var(--base-leading);
  text-align: justify;
  text-justify: inter-word;
}
.article-card .brief p{ margin: 0 0 var(--para-gap); }
.article-card .brief br + br{ display:none; }
.article-card .brief br{ display:block; margin-bottom: calc(var(--para-gap) * 0.9); }

/* ---- LISTAS con “hanging indent” y bullet a ras del margen ---- */
/* Aplica igual en tarjetas, artículos, CV, About, etc, siempre que estén dentro de .sections */
.sections ul{
  margin: 0 0 var(--para-gap);
  padding-left: 0;                 /* sin sangría en UL */
  list-style-position: outside;    /* marcador fuera */
}
.sections ul li{
  margin: 0 0 calc(var(--para-gap) * 0.8);
  /* truco para colgar el texto pero dejar el bullet a la izquierda */
  padding-left: var(--pt-tab);
  text-indent: calc(-1 * var(--pt-tab));
}

/* ---- Negrita para “título de sección” inline ---- */
.mark-sec{
  font-weight:800;
  color:var(--title-blue);
}

/* Asegurar mismo tamaño/ritmo en bloques “brief” genéricos (News, Publications, CV, About) */
.sections .brief{
  font-size: var(--base-size);
  line-height: var(--base-leading);
  text-align: justify;
  text-justify: inter-word;
}
.sections .brief p{ margin: 0 0 var(--para-gap); }

/* ---- Temáticas ---- */
.thematic-card h3{
  margin-bottom:10px;
}
.topic-list{
  display:grid;
  gap:10px;
}
.topic-list li{
  background:#eaf4ff;
  border:1px solid #9cc8ef;
  border-radius:8px;
  color:#0f2742;
  padding:10px 12px !important;
  text-align:left;
  text-indent:0 !important;
  list-style:none;
}
.topic-list li strong{
  color:#0b3a67;
  font-weight:800;
}
.topic-list li a{
  color:#0b3a67;
  text-decoration:none;
}
.topic-list li a:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.topic-list li div{
  color:#1f2937;
  margin-top:4px;
}

/* ---- Contacto ---- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:16px;
}
.contact-grid--wide{
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
}
.contact-intro{
  color:#475569;
  line-height:1.5;
  margin:8px 0 12px;
}
.contact-form{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.contact-form label{
  display:grid;
  gap:6px;
  color:#111827;
  font-weight:700;
}
.form-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.contact-check{
  align-items:flex-start;
  display:flex !important;
  font-weight:700;
  gap:10px !important;
}
.contact-check input{
  margin-top:3px;
}
.notice{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:12px;
  color:#111827;
  font-weight:800;
  margin-bottom:16px;
  padding:12px 14px;
}
.notice-ok{ border-color:#059669; background:#ecfdf5; color:#065f46; }
.notice-error{ border-color:#b91c1c; background:#fef2f2; color:#991b1b; }
.contact-side .brief p{
  text-align:left;
}
.social-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.social-row{
  align-items:center;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:10px;
  color:#111827;
  display:grid;
  gap:10px;
  grid-template-columns:42px 1fr;
  padding:10px;
  text-decoration:none;
}
.social-row:hover{
  background:#fff7ed;
  color:#111827;
}
.social-row small{
  color:#64748b;
  display:block;
  font-size:12px;
  margin-top:2px;
}
.social-row.is-disabled{
  cursor:default;
  opacity:.72;
}
.social-icon{
  align-items:center;
  border-radius:8px;
  color:#fff;
  display:inline-flex;
  font-weight:900;
  height:38px;
  justify-content:center;
  width:38px;
}
.social-icon--facebook-public,
.social-icon--facebook-help{ background:#1877f2; font-family:Arial,sans-serif; font-size:28px; }
.social-icon--linkedin{ background:#0a66c2; font-size:15px; }
.social-icon--x{ background:#000; font-size:18px; }
.social-icon--instagram{ background:#c13584; font-size:22px; }
.social-icon--whatsapp{ background:#25d366; font-size:18px; }
.contact-note{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:10px;
  color:#7c2d12;
  font-size:13px;
  line-height:1.45;
  margin-top:14px;
  padding:10px;
}
@media(max-width:860px){
  .contact-grid,
  .form-two{
    grid-template-columns:1fr;
  }
}