/*
 * templates.css — Estilos específicos de templates PHP
 * Secretaría de Formación Política · Fuerza del Pueblo · República Dominicana
 *
 * EdTech visual system — vibrant green hero, clean white cards.
 * Reference: registroformacionpoliticafp.edu.do
 *
 * Hero de portada, ejes, acceso cards, cards de equipo, placeholder states.
 * Depende de _variables.css (cargado desde main.css).
 */

/* ══════════════════════════════════════════════════════════════
   HERO — portada
   EdTech: vibrant green (#16a34a) + geometric CSS decorations.
   Decorative elements (rectangles, crosses, circles) rendered via
   CSS shapes and pseudo-elements on the child elements.
   All decorative shapes use rgba(255,255,255,0.15) per design ref.
══════════════════════════════════════════════════════════════ */
.sfp-hero {
  min-height:  80svh;
  display:     flex;
  align-items: center;
  background:  linear-gradient(160deg, #0c1f0e 0%, #1a3d1e 100%);   /* night green — institutional */
  position:    relative;
  overflow:    hidden;
}

/* Subtle dot texture — reduced opacity for premium feel */
.sfp-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

/* Geometric accent — corner rectangle, larger and more pronounced */
.sfp-hero::after {
  content:       '';
  position:      absolute;
  top:           -100px;
  right:         -100px;
  width:         480px;
  height:        480px;
  border:        1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  transform:     rotate(18deg);
  pointer-events: none;
}

.sfp-hero__inner {
  padding-block: clamp(6rem, 14vw, 12rem);
  position:      relative;   /* above the ::before layer */
  z-index:       2;          /* above all decorative pseudo-elements */
}

/* Circle decoration — bottom left */
.sfp-hero__inner::before {
  content:       '';
  position:      absolute;
  bottom:        8%;
  left:          -80px;
  width:         240px;
  height:        240px;
  border:        1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

/* Plus mark — top right */
.sfp-hero__inner::after {
  content:      '+';
  position:     absolute;
  top:          18%;
  right:        10%;
  font-size:    3rem;
  font-weight:  300;
  color:        rgba(255, 255, 255, 0.12);
  line-height:  1;
  pointer-events: none;
}

/* Eyebrow — with decorative green line above (::before) */
.sfp-hero__eyebrow {
  display:          block;
  font-family:      'Inter', sans-serif;
  font-size:        0.6875rem;
  font-weight:      700;
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  color:            rgba(255, 255, 255, 0.85);
  margin-block-end: 1rem;
  padding-block-start: 1rem;
  position:         relative;
}

.sfp-hero__eyebrow::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      2.5rem;
  height:     2px;
  background: #16a34a;   /* bright accent green line */
  border-radius: 1px;
}

.sfp-hero__title {
  font-family:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size:      clamp(3.5rem, 7vw, 6rem);
  font-weight:    800;
  line-height:    0.95;
  color:          #fff;
  max-width:      18ch;
  margin-block:   0 1.25rem;
  text-wrap:      balance;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sfp-hero__subtitle {
  font-size:       clamp(1rem, 1.8vw, 1.2rem);
  color:           rgba(255, 255, 255, 0.88);   /* warm white, not cream */
  max-width:       55ch;
  line-height:     1.6;
  margin-block-end: 2.5rem;
}

.sfp-hero__ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
}

/* Botón outline para fondos verdes — white border, white text */
.sfp-btn--outline-inv {
  background:  transparent;
  border:      2px solid rgba(255, 255, 255, 0.75);
  color:       #ffffff;
  font-weight: 600;
}

.sfp-btn--outline-inv:visited {
  color: #ffffff;
}

.sfp-btn--outline-inv:hover,
.sfp-btn--outline-inv:focus-visible {
  background:   rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color:        #ffffff;
}

/* Botón ghost para fondos oscuros */
.sfp-btn--ghost-inv {
  background:        transparent;
  border:            2px solid transparent;
  color:             rgba(255, 255, 255, 0.85);
  text-decoration:   underline;
  text-underline-offset: 3px;
}

.sfp-btn--ghost-inv:visited {
  color: rgba(255, 255, 255, 0.85);
}

.sfp-btn--ghost-inv:hover,
.sfp-btn--ghost-inv:focus-visible {
  color: #fff;
}

/* Botón secundario — white filled on green backgrounds */
.sfp-btn--secondary {
  background:   #ffffff;
  border-color: #ffffff;
  color:        #16a34a;   /* green text on white btn */
}
.sfp-btn--secondary:hover,
.sfp-btn--secondary:focus-visible {
  background:   #f0fdf4;
  border-color: #f0fdf4;
  color:        #15803d;
}

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS
   EdTech eyebrow: vibrant green, tracked uppercase, 0.75rem
══════════════════════════════════════════════════════════════ */
.sfp-section-header {
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.sfp-section-header--center {
  text-align: center;
}

/* Eyebrow — institutional signal: accent green, tighter, bolder */
.sfp-section-header__eyebrow {
  font-family:    'Inter', sans-serif;
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-primary, #16a34a);   /* accent green */
  margin-block-end: 0.5rem;
  display:        block;
}

/* On dark/green sections, eyebrow lightens slightly */
.sfp-section--verde .sfp-section-header__eyebrow,
.sfp-section--verde-oscuro .sfp-section-header__eyebrow {
  color: #4ade80;   /* lighter green on dark bg */
}

.sfp-section-header__title {
  font-family:    'Inter', sans-serif;
  font-size:      clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:    800;
  line-height:    1.1;
  color:          #0c1f0e;   /* night green — deeper institutional heading */
  margin-block:   0 0.75rem;
  text-wrap:      balance;
  letter-spacing: -0.03em;
}

/* On dark/green sections, heading is white */
.sfp-section--verde-oscuro .sfp-section-header__title {
  color: #fff;
}

/* sfp-section--verde is now light (#f0fdf4), so keep heading dark */
.sfp-section--verde .sfp-section-header__title {
  color: #111827;
}

.sfp-section-header__subtitle {
  font-size:   1rem;
  color:       #6b7280;   /* --neutral-500 — secondary text */
  max-width:   60ch;
  line-height: 1.65;
}

.sfp-section-header--center .sfp-section-header__subtitle {
  margin-inline: auto;
}

/* On light verde sections, subtitle stays gray */
.sfp-section--verde .sfp-section-header__subtitle {
  color: #6b7280;
}

/* On dark sections, subtitle uses muted light */
.sfp-section--verde-oscuro .sfp-section-header__subtitle {
  color: #86efac;   /* green-200 */
}

/* ══════════════════════════════════════════════════════════════
   SECTION FOOTER (CTA centrado bajo una sección)
══════════════════════════════════════════════════════════════ */
.sfp-section-footer {
  display:         flex;
  justify-content: center;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* ══════════════════════════════════════════════════════════════
   ACCESO CARDS — plataformas externas
   EdTech: white card, gray border, radius 12px, subtle shadow.
══════════════════════════════════════════════════════════════ */
.sfp-acceso-card {
  background:     #ffffff;
  border:         1px solid #e5e7eb;
  border-radius:  0.5rem;   /* 8px */
  padding:        2rem;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  box-shadow:     0 2px 8px rgba(0, 0, 0, 0.07);
  transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.sfp-acceso-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform:  translateY(-3px);
}

.sfp-acceso-card__icon {
  font-size:  2rem;
  line-height: 1;
}

.sfp-acceso-card__title {
  font-family:    var(--font-display, 'Inter', sans-serif);
  font-size:      1.4rem;
  font-weight:    700;
  color:          #111827;   /* dark heading */
  line-height:    1.2;
  margin:         0;
}

.sfp-acceso-card__sub {
  font-size:  0.85rem;
  color:      #6b7280;   /* --neutral-500 */
  margin:     0;
  font-style: italic;
}

.sfp-acceso-card__desc {
  font-size:   0.95rem;
  color:       #374151;   /* --neutral-700 */
  line-height: 1.6;
  flex:        1;
  margin:      0;
}

.sfp-acceso-card .sfp-btn {
  align-self:         flex-start;
  margin-block-start: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   EJE CARDS — plan estratégico
   These sit on dark sections; keep glass card treatment.
══════════════════════════════════════════════════════════════ */
.sfp-eje-card {
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;   /* 8px — institutional precision */
  padding:       1.75rem;
}

.sfp-eje-card__num {
  font-family:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size:      3rem;
  font-weight:    800;
  color:          #16a34a;   /* bright accent green on dark bg */
  line-height:    1;
  display:        block;
  margin-block-end: 0.75rem;
  letter-spacing: -0.02em;
}

.sfp-eje-card__title {
  font-family:  'Inter', sans-serif;
  font-size:    1.25rem;
  font-weight:  700;
  color:        #fff;
  line-height:  1.25;
  margin-block: 0 0.75rem;
}

.sfp-eje-card__desc {
  font-size:   0.9rem;
  color:       rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin:      0;
}

/* When eje-cards sit on light sections (Plan 2026-2028 white/tinted bg) */
.sfp-section--blanco .sfp-eje-card,
.sfp-section--verde .sfp-eje-card,
section:not(.sfp-section--verde-oscuro):not(.sfp-section--negro) .sfp-eje-card {
  background:   #ffffff;
  border:       1px solid #e5e7eb;
  border-left:  3px solid #16a34a;   /* accent left-border — plan structure signal */
}

.sfp-section--blanco .sfp-eje-card__num,
.sfp-section--verde .sfp-eje-card__num {
  color: #0c1f0e;   /* night green numerals on white */
}

.sfp-section--blanco .sfp-eje-card__title,
.sfp-section--verde .sfp-eje-card__title {
  color: #0c1f0e;
}

.sfp-section--blanco .sfp-eje-card__desc,
.sfp-section--verde .sfp-eje-card__desc {
  color: #4b5563;
}

/* ══════════════════════════════════════════════════════════════
   CARDS GENÉRICOS (area, noticia, actividad)
   EdTech: white bg, #e5e7eb border, 12px radius, light shadow.
══════════════════════════════════════════════════════════════ */
.sfp-card {
  background:     #ffffff;
  border:         1px solid #e5e7eb;
  border-radius:  0.5rem;   /* 8px — institutional precision */
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  box-shadow:     0 2px 8px rgba(0, 0, 0, 0.07);
  transition:     box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.sfp-card:hover {
  box-shadow:   0 8px 24px rgba(0, 0, 0, 0.14);
  border-color: #d1d5db;
}

@media (prefers-reduced-motion: no-preference) {
  .sfp-card:hover {
    transform: translateY(-3px);
  }
}

.sfp-card__title {
  font-family:    var(--font-display, 'Inter', sans-serif);
  font-size:      1.2rem;
  font-weight:    700;
  color:          #111827;   /* dark heading */
  line-height:    1.25;
  margin:         0;
}

.sfp-card__title a {
  color:           inherit;
  text-decoration: none;
}

.sfp-card__title a:hover {
  color: #16a34a;   /* vibrant green on hover */
}

.sfp-card__objetivo,
.sfp-card__extracto {
  font-size:          0.9rem;
  color:              #6b7280;   /* secondary text */
  line-height:        1.55;
  flex:               1;
  margin:             0;
  display:            -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.sfp-card__link {
  color:           var(--color-primary, #16a34a);
  font-size:       0.9rem;
  font-weight:     600;
  text-decoration: none;
  align-self:      flex-start;
  display:         inline-flex;
  align-items:     center;
  gap:             0.25rem;
  transition:      color 0.2s ease, gap 0.2s ease;
}

.sfp-card__link::after {
  content:    '→';
  display:    inline-block;
  transition: transform 0.2s ease;
}

.sfp-card__link:hover {
  color: var(--color-primary-hover, #16a34a);
}

.sfp-card__link:hover::after {
  transform: translateX(4px);
}

.sfp-card__fecha {
  font-size:           0.8rem;
  color:               #9ca3af;   /* --neutral-400 */
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   TERRITORIO CTA — sección last on homepage
══════════════════════════════════════════════════════════════ */
.sfp-territorio-cta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             3rem;
  padding-block:   clamp(3rem, 5vw, 5rem);
}

.sfp-territorio-cta__text {
  flex: 1;
}

.sfp-territorio-cta__action {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .sfp-territorio-cta {
    flex-direction: column;
    align-items:    flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   Dark green — kept per spec (verde-oscuro for interior pages).
══════════════════════════════════════════════════════════════ */
.sfp-page-hero {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.sfp-page-hero__title,
.sfp-section--verde-oscuro h1,
.sfp-section--verde h1 {
  font-family:    var(--font-display, 'Inter', sans-serif);
  font-size:      clamp(2rem, 4vw, 3.5rem);
  font-weight:    800;
  color:          #fff;
  line-height:    1.1;
  margin-block:   0.5rem 1rem;
  text-wrap:      balance;
  letter-spacing: -0.04em;
}

/* sfp-section--verde is now light; override h1 color for that context */
.sfp-section--verde h1 {
  color: #111827;   /* dark heading on light green section */
}

.sfp-page-hero__subtitle {
  font-size:   1.05rem;
  color:       #86efac;   /* green-200 — on dark hero */
  max-width:   55ch;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.sfp-empty-state,
.sfp-page-placeholder {
  text-align:   center;
  color:        #6b7280;   /* --neutral-500 */
  font-size:    1rem;
  padding-block: 3rem;
  max-width:    45ch;
  margin-inline: auto;
  line-height:  1.65;
}

/* ══════════════════════════════════════════════════════════════
   CONSEJO / EQUIPO — placeholder cards
══════════════════════════════════════════════════════════════ */
.sfp-consejo-card {
  background:   #ffffff;
  border:       1px dashed #d1d5db;   /* gray dashed — lighter */
  border-radius: 0.75rem;
  padding:      1.5rem;
  text-align:   center;
  color:        #9ca3af;   /* muted gray */
  font-size:    0.9rem;
}

.sfp-consejo-card__cargo {
  font-family:    var(--font-display, 'Inter', sans-serif);
  font-size:      1rem;
  font-weight:    700;
  color:          #374151;
  margin-block-end: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   MISION / VISION — 2-col on secretaria page
══════════════════════════════════════════════════════════════ */
.sfp-mv-card {
  background:   #ffffff;
  border-left:  4px solid #16a34a;   /* accent green — v2.2.0 standard */
  border-radius: 0 0.5rem 0.5rem 0;
  padding:      2rem;
}

.sfp-mv-card__label {
  font-family:    var(--font-display, 'Inter', sans-serif);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          #16a34a;
  margin-block-end: 0.5rem;
  display:        block;
}

.sfp-mv-card__text {
  font-size:   0.95rem;
  color:       #1f2937;   /* --neutral-800 */
  line-height: 1.7;
  margin:      0;
}

/* ══════════════════════════════════════════════════════════════
   ÁREAS — numbered list en la Escuela
══════════════════════════════════════════════════════════════ */
.sfp-areas-list {
  list-style:            none;
  padding:               0;
  margin:                0;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap:                   1rem;
  counter-reset:         area-counter;
}

.sfp-areas-list li {
  counter-increment: area-counter;
  display:           flex;
  align-items:       center;
  gap:               1rem;
  padding:           0.9rem 1.25rem;
  background:        #ffffff;
  border-radius:     0.5rem;
  /* border-top replaces full border — structural signal, not noise */
  border:            none;
  border-top:        3px solid #16a34a;
  box-shadow:        0 1px 4px rgba(0, 0, 0, 0.06);
  font-size:         0.95rem;
  color:             #1f2937;
  transition:        transform 0.2s ease, box-shadow 0.2s ease;
}

.sfp-areas-list li:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.sfp-areas-list li::before {
  content:        counter(area-counter, decimal-leading-zero);
  font-family:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight:    800;
  font-size:      1.4rem;
  color:          #16a34a;   /* accent green counter */
  flex-shrink:    0;
  min-width:      2ch;
  letter-spacing: -0.02em;
}

.sfp-areas-list a {
  color:           inherit;
  text-decoration: none;
}

.sfp-areas-list a:hover {
  color: #16a34a;
}

/* ══════════════════════════════════════════════════════════════
   PAGE CONTENT — texto libre sin Divi
══════════════════════════════════════════════════════════════ */
.sfp-page-content {
  font-size:  1rem;
  line-height: 1.75;
  color:      #1f2937;   /* --neutral-800 */
  max-width:  70ch;
}

.sfp-page-content p { margin-block-end: 1.25rem; }
.sfp-page-content h2 { margin-block: 2rem 0.75rem; }
.sfp-page-content ul { padding-inline-start: 1.5rem; }

/* ══════════════════════════════════════════════════════════════
   PLAN — arquitectura items (stats-like)
   EdTech: vibrant green large numbers.
══════════════════════════════════════════════════════════════ */
.sfp-plan-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            0.5rem;
  padding:        1.5rem;
  background:     #ffffff;
  border-radius:  0.75rem;
  border:         1px solid #e5e7eb;
}

.sfp-plan-item__num {
  font-family:    var(--font-display, 'Inter', sans-serif);
  font-size:      clamp(2rem, 5vw, 3.5rem);
  font-weight:    800;
  color:          #16a34a;   /* accent green — v2.2.0 standard */
  line-height:    1;
  letter-spacing: -0.03em;
}

.sfp-plan-item__label {
  font-size:   0.95rem;
  font-weight: 600;
  color:       #111827;
}

.sfp-plan-item__desc {
  font-size:   0.85rem;
  color:       #6b7280;
  margin:      0;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════════════════════════════ */
.sfp-contact-form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.sfp-contact-form label {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  font-size:      0.9rem;
  font-weight:    600;
  color:          #1f2937;
}

.sfp-contact-form input,
.sfp-contact-form textarea {
  padding:     0.65rem 1rem;
  border:      1px solid #d1d5db;   /* --neutral-300 */
  border-radius: 6px;
  font-family: inherit;
  font-size:   0.95rem;
  background:  #ffffff;
  color:       #111827;
  width:       100%;
  transition:  border-color 0.2s ease;
}

.sfp-contact-form input:focus,
.sfp-contact-form textarea:focus {
  outline:        3px solid rgba(34, 197, 94, 0.18);
  outline-offset: 0;
  border-color:   #16a34a;   /* accent green — v2.2.0 standard */
}

.sfp-contact-form textarea {
  min-height: 8rem;
  resize:     vertical;
}

/* ══════════════════════════════════════════════════════════════
   ACTIVIDAD CARD inline
══════════════════════════════════════════════════════════════ */
.sfp-actividad-inline {
  display:     flex;
  gap:         1.25rem;
  align-items: flex-start;
  padding:     1.25rem;
  background:  #ffffff;
  border-radius: 0.75rem;
  border:      1px solid #e5e7eb;
}

.sfp-actividad-inline__fecha {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size:   2rem;
  font-weight: 800;
  color:       #16a34a;   /* accent green — v2.2.0 standard */
  line-height: 1;
  flex-shrink: 0;
  min-width:   3ch;
  letter-spacing: -0.03em;
}

.sfp-actividad-inline__body {
  flex: 1;
}

.sfp-actividad-inline__title {
  font-size:       1rem;
  font-weight:     700;
  color:           #111827;
  margin-block-end: 0.25rem;
}

.sfp-actividad-inline__meta {
  font-size: 0.85rem;
  color:     #6b7280;
}

/* ══════════════════════════════════════════════════════════════
   SECRETARIO — página Quiénes somos
══════════════════════════════════════════════════════════════ */
.sfp-secretario {
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   3rem;
  align-items:           start;
}

.sfp-secretario__media {
  position: sticky;
  top:      100px;
}

.sfp-secretario__foto {
  width:        100%;
  height:       auto;
  border-radius: 8px;
  object-fit:   cover;
  display:      block;
}

.sfp-secretario__foto-placeholder {
  width:        100%;
  aspect-ratio: 4/5;
  background:   #0e3a1c;   /* dark green placeholder */
  border-radius: 8px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-family:  'Inter', sans-serif;
  font-size:    3rem;
  font-weight:  800;
  color:        rgba(255, 255, 255, 0.2);
  letter-spacing: 0.05em;
}

.sfp-secretario__nombre {
  font-family:    'Inter', sans-serif;
  font-size:      clamp(1.75rem, 3vw, 2.5rem);
  font-weight:    800;
  color:          #111827;
  margin:         0.25rem 0 1rem;
  line-height:    1.1;
  letter-spacing: -0.03em;
}

.sfp-secretario__cita {
  border-left:  3px solid #16a34a;   /* accent green — v2.2.0 standard */
  padding-left: 1.25rem;
  margin:       0 0 1.5rem;
  font-family:  'Inter', sans-serif;
  font-size:    1.15rem;
  font-weight:  600;
  font-style:   italic;
  color:        #15803d;   /* darker green for quote text */
  line-height:  1.5;
}

.sfp-secretario__bio {
  font-size:     1rem;
  line-height:   1.75;
  color:         #374151;   /* --neutral-700 */
  margin-bottom: 2rem;
}

.sfp-secretario__facetas {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.sfp-secretario__faceta {
  border-top:  1px solid #e5e7eb;
  padding-top: 1.25rem;
}

.sfp-secretario__faceta-titulo {
  font-family:    'Inter', sans-serif;
  font-weight:    600;
  font-size:      0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          #16a34a;   /* vibrant green section label */
  margin:         0 0 0.5rem;
  display:        block;
}

.sfp-secretario__faceta p {
  font-size:   0.9375rem;
  line-height: 1.7;
  color:       #4b5563;   /* --neutral-600 */
  margin:      0;
}

@media (max-width: 768px) {
  .sfp-secretario {
    grid-template-columns: 1fr;
  }

  .sfp-secretario__media {
    position:  static;
    max-width: 240px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sfp-hero {
    min-height: 70svh;
  }
  .sfp-hero__title {
    font-size: clamp(2rem, 7vw, 3rem);
  }
}

@media (max-width: 600px) {
  .sfp-hero__ctas {
    flex-direction: column;
    align-items:    flex-start;
  }
  .sfp-acceso-card {
    padding: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   TERRITORIO — regiones
══════════════════════════════════════════════════════════════ */
.sfp-territorio-regiones {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   1.25rem;
  margin-block-start:    1rem;
}

.sfp-region-card {
  background:   #ffffff;
  border:       1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding:      1.25rem 1.25rem 1rem;
}

.sfp-region-card__nombre {
  font-family:     var(--font-display, 'Inter', sans-serif);
  font-size:       1rem;
  font-weight:     700;
  color:           #111827;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  margin-block-end: 0.75rem;
  border-bottom:   2px solid #16a34a;   /* accent green — v2.2.0 standard */
  padding-block-end: 0.5rem;
}

.sfp-region-card__provincias {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.25rem 0.5rem;
}

.sfp-region-card__provincias li {
  font-size:   0.8125rem;
  color:       #374151;   /* --neutral-700 */
  line-height: 1.5;
}

.sfp-region-card__provincias li:not(:last-child)::after {
  content: ',';
}

@media (max-width: 640px) {
  .sfp-territorio-regiones {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════════════
   v2.3.0 INTERIOR PAGE STANDARDIZATION
   Breadcrumb bar, tag chips, accesos CTA, contact form,
   card variants, plan-item icon, filter bar, BEM aliases.
══════════════════════════════════════════════════════════════ */

/* Breadcrumb nav — standalone light bar (sits below hero) */
.sfp-breadcrumb {
  background:    #f6fdf7;
  border-bottom: 1px solid #e5e7eb;
  padding-block: 0.625rem;
}

/* Breadcrumb inside a dark hero — transparent treatment */
.sfp-section--verde-oscuro .sfp-breadcrumb {
  background:    transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sfp-section--verde-oscuro .sfp-breadcrumb__link,
.sfp-section--verde-oscuro .sfp-breadcrumb__item::before {
  color: rgba(255, 255, 255, 0.55);
}

.sfp-section--verde-oscuro .sfp-breadcrumb__link:hover {
  color: #4ade80;
}

.sfp-section--verde-oscuro .sfp-breadcrumb__item [aria-current] {
  color: rgba(255, 255, 255, 0.85);
}

/* Tag / chip list — vicesecretarías and similar enumerations */
.sfp-tag-list,
.sfp-vice-list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  list-style: none;
  margin:     0;
  padding:    0;
}

.sfp-tag,
.sfp-vice-list__item {
  background:    #f0fdf4;
  border:        1px solid rgba(34, 197, 94, 0.25);
  border-radius: 20px;
  padding:       0.35rem 0.85rem;
  font-size:     0.875rem;
  color:         #0c1f0e;
  font-weight:   500;
  line-height:   1.5;
}

/* BEM alias — PHP template uses sfp-card-mv; canonical CSS is sfp-mv-card */
.sfp-card-mv {
  background:    #ffffff;
  border-left:   4px solid #16a34a;
  border-radius: 0 0.5rem 0.5rem 0;
  padding:       2rem;
}

.sfp-card-mv__label {
  font-family:      'Inter', sans-serif;
  font-size:        0.75rem;
  font-weight:      600;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  color:            #16a34a;   /* darker green — WCAG AA for text on white */
  margin-block-end: 0.5rem;
  display:          block;
}

.sfp-card-mv__text {
  font-size:   0.95rem;
  color:       #1f2937;
  line-height: 1.7;
  margin:      0;
}

/* Cargo label — institutional role descriptor */
.sfp-liderazgo-card__cargo {
  font-size:      0.75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          #16a34a;
  margin:         0;
}

/* Placeholder / pendiente card variants */
.sfp-card--pendiente {
  border-style: dashed;
}

.sfp-card__avatar {
  width:           3.5rem;
  height:          3.5rem;
  background:      #f0fdf4;
  border:          2px solid rgba(34, 197, 94, 0.2);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.25rem;
  color:           #9ca3af;
  align-self:      center;
  margin-inline:   auto;
}

.sfp-card__cargo {
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          #9ca3af;
  margin:         0;
  text-align:     center;
}

.sfp-card__nombre-pendiente {
  font-size:  0.8125rem;
  color:      #d1d5db;
  text-align: center;
  font-style: italic;
  margin:     0;
}

/* Card — actividad-specific overrides (legacy sfp-grid--actividades) */
.sfp-card--actividad .sfp-card__fecha {
  color:       #16a34a;
  font-size:   0.875rem;
  font-weight: 600;
}

.sfp-card--actividad .sfp-card__lugar {
  color:     #6b7280;
  font-size: 0.875rem;
}

/* ══════════════════════════════════════════════════════════════
   ACTIVIDADES — event-row card (archive redesign)
══════════════════════════════════════════════════════════════ */
.sfp-actividades-filter-section { padding-block: 1.5rem; }

.sfp-actividades-grid {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.sfp-actividad-evento {
  display:        grid;
  grid-template-columns: 72px 1fr auto;
  gap:            0 2rem;
  align-items:    center;
  background:     #ffffff;
  border:         1.5px solid #e5e7eb;
  border-radius:  12px;
  padding:        1.5rem 2rem;
  transition:     border-color 0.2s ease, box-shadow 0.2s ease;
}

.sfp-actividad-evento:hover {
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow:   0 4px 16px rgba(22, 163, 74, 0.08);
}

/* Date badge — left column */
.sfp-actividad-evento__fecha {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  background:     #0c1f0e;
  border-radius:  8px;
  padding:        0.625rem 0.5rem;
  text-align:     center;
  min-height:     72px;
}

.sfp-fecha-mes {
  font-family:    'Inter', sans-serif;
  font-size:      0.625rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          #86efac;
  line-height:    1;
  margin-bottom:  2px;
}

.sfp-fecha-dia {
  font-family:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size:      2rem;
  font-weight:    800;
  color:          #ffffff;
  line-height:    1;
}

.sfp-fecha-anio {
  font-family: 'Inter', sans-serif;
  font-size:   0.625rem;
  font-weight: 500;
  color:       rgba(255,255,255,0.55);
  line-height: 1;
  margin-top:  2px;
}

.sfp-actividad-evento__fecha--empty {
  background: #f3f4f6;
}

.sfp-fecha-pronto {
  font-family: 'Inter', sans-serif;
  font-size:   0.75rem;
  font-weight: 600;
  color:       #9ca3af;
}

/* Body — center column */
.sfp-actividad-evento__body {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}

.sfp-tag--tipo {
  display:        inline-block;
  font-family:    'Inter', sans-serif;
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #16a34a;
  background:     #f0fdf4;
  border:         1px solid rgba(22,163,74,0.25);
  border-radius:  4px;
  padding:        2px 8px;
  width:          fit-content;
}

.sfp-actividad-evento__title {
  font-family:    'Inter', sans-serif;
  font-size:      clamp(1rem, 1.6vw, 1.125rem);
  font-weight:    700;
  color:          #0c1f0e;
  margin:         0;
  line-height:    1.35;
}

.sfp-actividad-evento__meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.25rem 1.25rem;
  margin-top: 0.125rem;
}

.sfp-actividad-evento__meta-item {
  display:     flex;
  align-items: center;
  gap:         0.375rem;
  font-size:   0.8125rem;
  color:       #6b7280;
  margin:      0;
}

.sfp-actividad-evento__meta-item svg {
  flex-shrink: 0;
  color:       #9ca3af;
}

.sfp-actividad-evento__meta-item--fecha { color: #374151; font-weight: 500; }

/* Action — right column */
.sfp-actividad-evento__action {
  flex-shrink: 0;
}

.sfp-btn--sm {
  padding:   0.5rem 1.125rem;
  font-size: 0.875rem;
}

/* Responsive — stack on mobile */
@media (max-width: 640px) {
  .sfp-actividad-evento {
    grid-template-columns: 60px 1fr;
    grid-template-rows:    auto auto;
    padding:               1.25rem;
    gap:                   0.75rem;
  }
  .sfp-actividad-evento__fecha {
    min-height: 60px;
    padding:    0.5rem 0.375rem;
  }
  .sfp-fecha-dia { font-size: 1.625rem; }
  .sfp-actividad-evento__action {
    grid-column: 1 / -1;
  }
}

/* Plan items — icon + title variant (emoji icon) */
.sfp-plan-item__icono {
  font-size:   2.25rem;
  line-height: 1;
}

.sfp-plan-item__titulo {
  font-family: 'Inter', sans-serif;
  font-size:   1.05rem;
  font-weight: 700;
  color:       #0c1f0e;
  margin:      0;
  line-height: 1.25;
}

/* Accesos CTA — dark full-width CTA block at page bottom */
.sfp-accesos-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.sfp-accesos-cta__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
  flex-wrap:       wrap;
}

.sfp-accesos-cta__title {
  font-family:    'Inter', sans-serif;
  font-size:      clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight:    800;
  color:          #ffffff;
  margin:         0 0 0.5rem;
  line-height:    1.15;
  letter-spacing: -0.02em;
}

.sfp-accesos-cta__lead {
  font-size:   1rem;
  color:       rgba(255, 255, 255, 0.78);
  margin:      0;
  max-width:   52ch;
  line-height: 1.6;
}

.sfp-accesos-cta__btns {
  display:     flex;
  gap:         0.75rem;
  flex-wrap:   wrap;
  flex-shrink: 0;
  align-items: center;
}

@media (max-width: 768px) {
  .sfp-accesos-cta__inner {
    flex-direction: column;
    align-items:    flex-start;
  }
}

/* Contact page layout */
.sfp-contacto-grid {
  gap:         clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.sfp-contacto-info__title,
.sfp-contacto-form-wrap__title {
  font-family:    'Inter', sans-serif;
  font-size:      clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight:    800;
  color:          #0c1f0e;
  margin:         0 0 1.5rem;
  letter-spacing: -0.025em;
}

.sfp-contacto-dl {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   0.5rem 1.5rem;
  margin:                0 0 2rem;
  align-items:           start;
}

.sfp-contacto-dl dt {
  font-weight:    600;
  font-size:      0.8125rem;
  color:          #0c1f0e;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-top:    0.15rem;
}

.sfp-contacto-dl dd {
  margin:    0;
  color:     #4b5563;
  font-size: 0.9375rem;
}

.sfp-contacto-dl dd a {
  color:           #16a34a;
  text-decoration: none;
  font-weight:     500;
}

.sfp-contacto-dl dd a:hover { text-decoration: underline; }

.sfp-contacto-plataformas { margin-top: 2rem; }

.sfp-contacto-plataformas > p {
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          #9ca3af;
  margin:         0 0 0.75rem;
}

.sfp-contacto-plataformas__list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.sfp-contacto-plataformas__list a {
  color:           #16a34a;
  text-decoration: none;
  font-size:       0.9375rem;
  font-weight:     500;
}

.sfp-contacto-plataformas__list a:hover { text-decoration: underline; }

.sfp-contacto-form-wrap__notice {
  font-size:     0.875rem;
  color:         #6b7280;
  background:    #f6fdf7;
  border:        1px solid #d1fae5;
  border-radius: 6px;
  padding:       0.75rem 1rem;
  margin-bottom: 1.5rem;
}

/* Form — v2.3.0 standardized inputs */
.sfp-form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.sfp-form__field {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.sfp-form__field label,
.sfp-form label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       #0c1f0e;
}

.sfp-form__input,
.sfp-form__textarea,
.sfp-form input[type="text"],
.sfp-form input[type="email"],
.sfp-form textarea {
  width:          100%;
  border:         1.5px solid #e5e7eb;
  border-radius:  8px;
  padding:        0.75rem 1rem;
  font-family:    'Inter', sans-serif;
  font-size:      1rem;
  color:          #111827;
  background:     #fff;
  transition:     border-color 0.2s ease;
}

.sfp-form__input:focus,
.sfp-form__textarea:focus,
.sfp-form input:focus,
.sfp-form textarea:focus {
  border-color:   #16a34a;
  outline:        3px solid rgba(34, 197, 94, 0.15);
  outline-offset: 0;
}

.sfp-form__textarea,
.sfp-form textarea {
  min-height: 8rem;
  resize:     vertical;
}

/* Form feedback messages */
.sfp-form-feedback {
  padding:       1rem 1.25rem;
  border-radius: 8px;
  font-size:     0.9375rem;
  font-weight:   500;
  margin-bottom: 1.5rem;
}

.sfp-form-feedback--success {
  background: #f0fdf4;
  border:     1.5px solid #86efac;
  color:      #166534;
}

.sfp-form-feedback--error {
  background: #fef2f2;
  border:     1.5px solid #fca5a5;
  color:      #991b1b;
}

.sfp-form__field span[aria-hidden] {
  color: #dc2626;
  margin-left: 2px;
}

/* Filter bar — archive pages */
.sfp-filter-bar {
  margin-block:  1.5rem;
  padding:       0.875rem 1.25rem;
  background:    #f6fdf7;
  border:        1px solid #e5e7eb;
  border-radius: 8px;
  display:       flex;
  flex-wrap:     wrap;
  gap:           1rem;
  align-items:   center;
}

.sfp-filter-bar label {
  font-size:      0.75rem;
  font-weight:    600;
  color:          #0c1f0e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sfp-filter-bar select {
  border:        1.5px solid #e5e7eb;
  border-radius: 6px;
  padding:       0.5rem 0.75rem;
  font-family:   'Inter', sans-serif;
  font-size:     0.875rem;
  color:         #111827;
  background:    #fff;
  cursor:        pointer;
  transition:    border-color 0.2s ease;
}

.sfp-filter-bar select:focus {
  border-color:   #16a34a;
  outline:        3px solid rgba(34, 197, 94, 0.15);
  outline-offset: 0;
}

/* Exterior grid — slightly smaller eje-card title */
.sfp-exterior-grid .sfp-eje-card__title,
.sfp-exterior-grid .sfp-eje-card__titulo {
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   NOTICIA CARD — imagen destacada
══════════════════════════════════════════════════════════════ */
.sfp-card--noticia {
  padding: 0;
  overflow: hidden;
}

.sfp-card__image-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0c1f0e;
  text-decoration: none;
}

.sfp-card__img,
.sfp-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.sfp-card--noticia:hover .sfp-card__img,
.sfp-card--noticia:hover .sfp-card__image-wrap img {
  transform: scale(1.05);
}

.sfp-card__img-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.sfp-card__img-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sfp-card--noticia .sfp-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.sfp-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #16a34a;
  width: fit-content;
}

.sfp-card__read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: #16a34a;
  text-decoration: none;
  margin-top: 0.25rem;
  align-self: flex-start;
  transition: gap 0.2s;
}

.sfp-card__read-more:hover {
  color: #15803d;
}

/* ══════════════════════════════════════════════════════════════
   NOTICIAS CAROUSEL — page-actualidad hero slider
══════════════════════════════════════════════════════════════ */
.sfp-noticias-carousel {
  position: relative;
  background: #0c1f0e;
  overflow: hidden;
}

.sfp-carousel__inner {
  position: relative;
  overflow: hidden;
}

.sfp-carousel__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.sfp-carousel__slide {
  flex: 0 0 100%;
  min-height: clamp(380px, 52vw, 620px);
  position: relative;
  background-size: cover;
  background-position: center top;
  background-color: #0c1f0e;
  display: flex;
  align-items: flex-end;
}

.sfp-carousel__slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 22, 12, 0.93) 0%,
    rgba(8, 22, 12, 0.55) 40%,
    rgba(8, 22, 12, 0.18) 100%
  );
}

.sfp-carousel__slide-content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sfp-carousel__cat {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(22, 163, 74, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 4px;
  padding: 3px 10px;
  width: fit-content;
}

.sfp-carousel__title {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.sfp-carousel__title-link {
  color: inherit;
  text-decoration: none;
}

.sfp-carousel__title-link:hover {
  color: #bbf7d0;
}

.sfp-carousel__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  margin: 0;
  max-width: 580px;
}

.sfp-carousel__date {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.sfp-carousel__cta {
  margin-top: 0.25rem;
  width: fit-content;
}

/* Arrows */
.sfp-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(6px);
  padding: 0;
}

.sfp-carousel__arrow:hover,
.sfp-carousel__arrow:focus-visible {
  background:   rgba(22, 163, 74, 0.45);
  border-color: rgba(74, 222, 128, 0.45);
}

.sfp-carousel__arrow:focus-visible {
  outline:        2px solid #34B356;
  outline-offset: 2px;
}

.sfp-carousel__arrow--prev { left:  1.25rem; }
.sfp-carousel__arrow--next { right: 1.25rem; }

/* Dots */
.sfp-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: #0c1f0e;
}

.sfp-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.sfp-carousel__dot.is-active,
.sfp-carousel__dot[aria-selected="true"] {
  background: #4ade80;
  transform: scale(1.35);
}

@media (max-width: 600px) {
  .sfp-carousel__arrow { display: none; }
  .sfp-carousel__slide { min-height: 280px; }
  .sfp-carousel__title { font-size: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   NOTICIAS — cabecera con buscador
══════════════════════════════════════════════════════════════ */
.sfp-noticias-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             1rem 2rem;
  margin-bottom:   2rem;
}

.sfp-noticias-header .sfp-section-header__title {
  margin: 0;
}

.sfp-noticias-search {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   nowrap;
}

.sfp-noticias-search__input {
  height:        2.625rem;
  padding:       0 0.875rem;
  border:        1.5px solid #d1d5db;
  border-radius: 8px;
  font-family:   'Inter', sans-serif;
  font-size:     0.875rem;
  color:         #111827;
  background:    #fff;
  width:         clamp(180px, 22vw, 280px);
  transition:    border-color 0.2s ease, box-shadow 0.2s ease;
  outline:       none;
}

.sfp-noticias-search__input:focus {
  border-color: #16a34a;
  box-shadow:   0 0 0 3px rgba(22, 163, 74, 0.15);
}

.sfp-noticias-search__btn {
  height:      2.625rem;
  display:     flex;
  align-items: center;
  gap:         0.375rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.sfp-noticias-search__clear {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2rem;
  height:          2rem;
  border-radius:   50%;
  font-size:       0.875rem;
  color:           #6b7280;
  text-decoration: none;
  background:      #f3f4f6;
  transition:      background 0.2s ease, color 0.2s ease;
  flex-shrink:     0;
}

.sfp-noticias-search__clear:hover {
  background: #e5e7eb;
  color:      #111827;
}

/* Mapa de contacto */
.sfp-contacto-mapa {
  margin-top: 1.75rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #e5e7eb;
}

.sfp-contacto-mapa iframe {
  display: block;
  width: 100%;
}

.sfp-contacto-mapa__link {
  display:         flex;
  align-items:     center;
  gap:             0.375rem;
  padding:         0.625rem 1rem;
  background:      #f9fafb;
  font-family:     'Inter', sans-serif;
  font-size:       0.8125rem;
  font-weight:     500;
  color:           #16a34a;
  text-decoration: none;
  border-top:      1px solid #e5e7eb;
  transition:      background 0.2s ease;
}

.sfp-contacto-mapa__link:hover {
  background: #f0fdf4;
}

/* Category pills */
.sfp-cat-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  margin-bottom: 2rem;
}

.sfp-cat-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             0.375rem;
  padding:         0.375rem 0.875rem;
  border-radius:   999px;
  border:          1.5px solid #d1d5db;
  background:      #fff;
  font-family:     'Inter', sans-serif;
  font-size:       0.8125rem;
  font-weight:     500;
  color:           #374151;
  text-decoration: none;
  transition:      border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space:     nowrap;
}

.sfp-cat-pill:hover {
  border-color: #16a34a;
  color:        #15803d;
  background:   #f0fdf4;
}

.sfp-cat-pill.is-active {
  background:   #16a34a;
  border-color: #16a34a;
  color:        #fff;
  font-weight:  600;
}

.sfp-cat-pill__count {
  font-size:    0.6875rem;
  font-weight:  600;
  opacity:      0.7;
  background:   rgba(0,0,0,0.08);
  border-radius: 999px;
  padding:      1px 6px;
}

.sfp-cat-pill.is-active .sfp-cat-pill__count {
  background: rgba(255,255,255,0.25);
  opacity:    1;
}

/* Pagination */
.sfp-pagination {
  margin-top:      2.5rem;
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             0.375rem;
}

.sfp-pagination .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       2.25rem;
  height:          2.25rem;
  padding:         0 0.625rem;
  border:          1.5px solid #e5e7eb;
  border-radius:   6px;
  font-family:     'Inter', sans-serif;
  font-size:       0.875rem;
  color:           #374151;
  text-decoration: none;
  background:      #fff;
  transition:      border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sfp-pagination .page-numbers:hover {
  border-color: #16a34a;
  color:        #16a34a;
}

.sfp-pagination .page-numbers.current {
  background:   #16a34a;
  border-color: #16a34a;
  color:        #fff;
  font-weight:  700;
}

.sfp-pagination .page-numbers.dots {
  border-color: transparent;
  background:   transparent;
  cursor:       default;
}

@media (max-width: 640px) {
  .sfp-noticias-header    { flex-direction: column; align-items: flex-start; }
  .sfp-noticias-search    { width: 100%; }
  .sfp-noticias-search__input { flex: 1; width: auto; }
}


/* ══════════════════════════════════════════════════════════════
   HERO ANIMATIONS — "más movido"
   Staggered entrance, floating decorations, animated gradient.
   All guarded by prefers-reduced-motion: no-preference.
══════════════════════════════════════════════════════════════ */

@keyframes sfp-hero-gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes sfp-hero-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sfp-hero-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sfp-hero-float-rect {
  0%   { transform: rotate(18deg) translateY(0px); }
  50%  { transform: rotate(20.5deg) translateY(-14px); }
  100% { transform: rotate(18deg) translateY(0px); }
}

@keyframes sfp-hero-float-circle {
  0%   { transform: scale(1) translateX(0px); }
  50%  { transform: scale(1.07) translateX(10px); }
  100% { transform: scale(1) translateX(0px); }
}

@keyframes sfp-hero-pulse-plus {
  0%   { opacity: 0.12; transform: scale(1); }
  50%  { opacity: 0.28; transform: scale(1.12); }
  100% { opacity: 0.12; transform: scale(1); }
}

@keyframes sfp-dot-drift {
  0%   { background-position: 0px 0px; }
  100% { background-position: 44px 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Shifting gradient background */
  .sfp-hero {
    background: linear-gradient(
      160deg,
      #071209 0%,
      #0c1f0e 25%,
      #1a3d1e 60%,
      #0f2d12 80%,
      #071209 100%
    );
    background-size: 300% 300%;
    animation: sfp-hero-gradient-shift 14s ease infinite;
  }

  /* Dot texture drifts slowly */
  .sfp-hero::before {
    animation: sfp-dot-drift 24s linear infinite;
  }

  /* Corner rectangle — slow float */
  .sfp-hero::after {
    animation: sfp-hero-float-rect 10s ease-in-out infinite;
  }

  /* Circle bottom-left — slow float */
  .sfp-hero__inner::before {
    animation: sfp-hero-float-circle 13s ease-in-out infinite;
  }

  /* Plus mark — pulse */
  .sfp-hero__inner::after {
    animation: sfp-hero-pulse-plus 5s ease-in-out infinite;
  }

  /* ── Staggered entrance ── */
  .sfp-hero .sfp-section-header__eyebrow {
    opacity: 0;
    animation: sfp-hero-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  }

  .sfp-hero .sfp-section-header__eyebrow::before {
    transform-origin: left center;
    animation: sfp-hero-line-grow 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
  }

  .sfp-hero__title {
    opacity: 0;
    animation: sfp-hero-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
  }

  .sfp-hero__subtitle {
    opacity: 0;
    animation: sfp-hero-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
  }

  .sfp-hero__ctas {
    opacity: 0;
    animation: sfp-hero-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE ENTRIES (sfp-ns) — layout magazine / diario digital
   Aplica a: sfp_noticia · sfp_actividad · sfp_area_formativa · sfp_publicacion
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.sfp-ns-crumb {
  border-bottom: 1px solid #e5e7eb;
  padding-block: 11px;
  font-size:     0.78rem;
  color:         #6b7280;
}

.sfp-ns-crumb .sfp-container {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}

.sfp-ns-crumb__link {
  color:           #6b7280;
  text-decoration: none;
}
.sfp-ns-crumb__link:hover { color: #16a34a; text-decoration: underline; }

.sfp-ns-crumb__current {
  color:       #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   40ch;
}

/* ── Cover: imagen + gradiente + texto flotante ───────────────────────────── */
.sfp-ns__cover {
  position:   relative;
  overflow:   hidden;
  background: #0c1f0e;
}

.sfp-ns__cover-img {
  margin:      0;
  aspect-ratio: 21 / 9;
  overflow:    hidden;
}

.sfp-ns__cover-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  opacity:    0.55;
}

/* Gradiente oscuro desde abajo para legibilidad del texto */
.sfp-ns__cover::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(5, 15, 8, 0.45) 55%,
    rgba(5, 15, 8, 0.88) 100%
  );
  pointer-events: none;
}

/* Texto superpuesto al cover */
.sfp-ns__cover-body {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  z-index:  2;
  padding-bottom: clamp(28px, 5vw, 52px);
}

.sfp-ns__cat {
  display:        inline-block;
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          #fff;
  background:     #16a34a;
  border-radius:  3px;
  padding:        4px 12px;
  margin-bottom:  14px;
}

.sfp-ns__title {
  font-family:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size:      clamp(2rem, 5vw, 3.5rem);
  font-weight:    800;
  line-height:    1.08;
  color:          #fff;
  margin:         0 0 14px;
  text-wrap:      balance;
  letter-spacing: -0.01em;
  text-shadow:    0 2px 12px rgba(0,0,0,0.35);
  max-width:      22ch;
}

.sfp-ns__meta {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
  font-size:   0.85rem;
  color:       rgba(255,255,255,0.78);
}

.sfp-ns__subtitle-cover {
  font-size:   1rem;
  color:       rgba(255,255,255,0.82);
  max-width:   60ch;
  line-height: 1.55;
  margin:      10px 0 0;
}

/* ── Barra inferior al cover: compartir / CTA ─────────────────────────────── */
.sfp-ns__share-bar {
  background:    #fff;
  border-bottom: 1px solid #e5e7eb;
  padding-block: 14px;
}

.sfp-ns__share-bar-inner {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.sfp-ns__share-label {
  font-size:   0.8rem;
  font-weight: 600;
  color:       #374151;
}

.sfp-ns__icon-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         7px 14px;
  border-radius:   6px;
  font-size:       0.8rem;
  font-weight:     600;
  text-decoration: none;
  transition:      filter 0.15s ease, transform 0.12s ease;
}
.sfp-ns__icon-btn:hover { filter: brightness(0.88); transform: translateY(-1px); }

.sfp-ns__icon-btn--fb { background: #1877f2; color: #fff; }
.sfp-ns__icon-btn--tw { background: #111;    color: #fff; }
.sfp-ns__icon-btn--wa { background: #25d366; color: #fff; }

/* ── Cuerpo del artículo ──────────────────────────────────────────────────── */
.sfp-ns__body {
  max-width:     740px;
  margin-inline: auto;
  padding-block: 48px 60px;
}

.sfp-ns__body p {
  font-size:     1.0625rem;
  line-height:   1.85;
  color:         #374151;
  margin-bottom: 22px;
}

.sfp-ns__body h2 {
  font-family:   'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size:     1.9rem;
  font-weight:   700;
  color:         #0c1f0e;
  margin:        44px 0 14px;
  line-height:   1.15;
}

.sfp-ns__body h3 {
  font-family:   'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size:     1.45rem;
  font-weight:   700;
  color:         #0c1f0e;
  margin:        36px 0 10px;
}

.sfp-ns__body img {
  width:         100%;
  height:        auto;
  border-radius: 8px;
  margin-block:  28px;
}

.sfp-ns__body blockquote {
  border-left:   3px solid #16a34a;
  padding-left:  22px;
  margin:        32px 0;
  color:         #4b5563;
  font-style:    italic;
  font-size:     1.075rem;
  line-height:   1.75;
}

.sfp-ns__body ul,
.sfp-ns__body ol  { padding-left: 26px; margin-bottom: 22px; }

.sfp-ns__body li  {
  font-size:     1rem;
  line-height:   1.8;
  color:         #374151;
  margin-bottom: 6px;
}

/* ── Footer: volver ───────────────────────────────────────────────────────── */
.sfp-ns__footer {
  max-width:     740px;
  margin-inline: auto;
  padding-top:   28px;
  border-top:    1px solid #e5e7eb;
  margin-bottom: 64px;
}

.sfp-ns__back-link {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       0.85rem;
  font-weight:     600;
  color:           #16a34a;
  text-decoration: none;
}
.sfp-ns__back-link:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sfp-ns__cover-img { aspect-ratio: 16 / 9; }
  .sfp-ns__title     { font-size: 1.85rem; max-width: none; }
}

@media (max-width: 480px) {
  .sfp-ns__cover-img { aspect-ratio: 4 / 3; }
  .sfp-ns__title     { font-size: 1.55rem; }
}


/* ══════════════════════════════════════════════════════════════
   HERO — objetos flotantes decorativos
   Círculos, anillos, barras y puntos que se mueven por el fondo.
══════════════════════════════════════════════════════════════ */

/* Contenedor absoluto que cubre todo el hero */
.sfp-hero__deco {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  overflow:       hidden;
  z-index:        1;   /* encima del ::before de textura, debajo del contenido */
}

/* Base compartida de cada objeto */
.sfp-hero__deco-item {
  position: absolute;
  display:  block;
}

/* ── Anillo grande — flota de abajo a arriba, lado derecho ── */
.sfp-hero__deco-item--ring-lg {
  width:         360px;
  height:        360px;
  border:        1.5px solid rgba(52, 211, 86, 0.14);
  border-radius: 50%;
  top:           60%;
  right:         8%;
  animation:     sfp-deco-float-up 18s ease-in-out infinite;
}

/* ── Anillo mediano — deriva hacia la derecha ── */
.sfp-hero__deco-item--ring-sm {
  width:         180px;
  height:        180px;
  border:        1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  top:           15%;
  left:          60%;
  animation:     sfp-deco-drift-right 14s ease-in-out infinite;
  animation-delay: -4s;
}

/* ── Anillo pequeño ── */
.sfp-hero__deco-item--ring-xs {
  width:         80px;
  height:        80px;
  border:        1px solid rgba(52, 211, 86, 0.20);
  border-radius: 50%;
  bottom:        20%;
  left:          30%;
  animation:     sfp-deco-pulse-ring 7s ease-in-out infinite;
  animation-delay: -2s;
}

/* ── Barra horizontal — cruza lentamente ── */
.sfp-hero__deco-item--bar-h {
  width:      200px;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 86, 0.25), transparent);
  top:        35%;
  left:       -200px;
  animation:  sfp-deco-slide-right 11s linear infinite;
  animation-delay: -3s;
}

/* ── Barra vertical — sube lentamente ── */
.sfp-hero__deco-item--bar-v {
  width:      1px;
  height:     160px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  top:        100%;
  right:      28%;
  animation:  sfp-deco-slide-up 13s linear infinite;
  animation-delay: -6s;
}

/* ── Puntos (dots) ── */
.sfp-hero__deco-item--dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(52, 211, 86, 0.35);
}

.sfp-hero__deco-item--dot-1 {
  top:    25%;
  left:   50%;
  animation: sfp-deco-float-up 9s ease-in-out infinite;
  animation-delay: -1s;
}

.sfp-hero__deco-item--dot-2 {
  top:    70%;
  right:  35%;
  width:  5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.20);
  animation: sfp-deco-float-up 12s ease-in-out infinite;
  animation-delay: -5s;
}

.sfp-hero__deco-item--dot-3 {
  top:    45%;
  left:   75%;
  width:  10px;
  height: 10px;
  background: rgba(52, 211, 86, 0.18);
  animation: sfp-deco-drift-right 16s ease-in-out infinite;
  animation-delay: -8s;
}

/* ── Cuadrado rotando ── */
.sfp-hero__deco-item--square {
  width:      60px;
  height:     60px;
  border:     1px solid rgba(255, 255, 255, 0.08);
  top:        55%;
  left:       15%;
  animation:  sfp-deco-rotate-float 20s linear infinite;
  animation-delay: -10s;
}

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES de movimiento de objetos
══════════════════════════════════════════════════════════════ */

@keyframes sfp-deco-float-up {
  0%   { transform: translateY(0px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

@keyframes sfp-deco-drift-right {
  0%   { transform: translateX(0px) translateY(0px); opacity: 0.4; }
  33%  { transform: translateX(30px) translateY(-20px); opacity: 0.9; }
  66%  { transform: translateX(-15px) translateY(10px); opacity: 0.6; }
  100% { transform: translateX(0px) translateY(0px); opacity: 0.4; }
}

@keyframes sfp-deco-slide-right {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
}

@keyframes sfp-deco-slide-up {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(calc(-100vh - 160px)); opacity: 0; }
}

@keyframes sfp-deco-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.20; }
  50%  { transform: scale(1.35); opacity: 0.05; }
  100% { transform: scale(1);    opacity: 0.20; }
}

@keyframes sfp-deco-rotate-float {
  0%   { transform: rotate(0deg) translateY(0px); }
  25%  { transform: rotate(90deg) translateY(-15px); }
  50%  { transform: rotate(180deg) translateY(0px); }
  75%  { transform: rotate(270deg) translateY(15px); }
  100% { transform: rotate(360deg) translateY(0px); }
}

/* Ocultar objetos si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .sfp-hero__deco { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   HERO — objetos flotantes temáticos (formación política)
   Libro, birrete, estrella, diploma, llave, globo.
══════════════════════════════════════════════════════════════ */

.sfp-hero__deco-item--book {
  width:  90px;
  height: 70px;
  color:  rgba(52, 211, 86, 0.18);
  bottom: 8%;
  right:  14%;
  animation: sfp-deco-float-up 20s ease-in-out infinite;
}

.sfp-hero__deco-item--cap {
  width:  80px;
  height: 65px;
  color:  rgba(255, 255, 255, 0.11);
  top:    12%;
  right:  32%;
  animation: sfp-deco-drift-right 15s ease-in-out infinite;
  animation-delay: -5s;
}


.sfp-hero__deco-item--diploma {
  width:  100px;
  height: 78px;
  color:  rgba(255, 255, 255, 0.09);
  bottom: 14%;
  left:   18%;
  animation: sfp-deco-float-up 26s ease-in-out infinite;
  animation-delay: -12s;
}

.sfp-hero__deco-item--key {
  width:  65px;
  height: 65px;
  color:  rgba(52, 211, 86, 0.16);
  top:    28%;
  left:   48%;
  animation: sfp-deco-drift-right 18s ease-in-out infinite;
  animation-delay: -7s;
}

.sfp-hero__deco-item--globe {
  width:  85px;
  height: 85px;
  color:  rgba(255, 255, 255, 0.08);
  top:    8%;
  left:   22%;
  animation: sfp-deco-drift-right 22s ease-in-out infinite;
  animation-delay: -3s;
}

.sfp-hero__deco-item svg {
  width:  100%;
  height: 100%;
  display: block;
}