/*
 * sections.css — Estilos de todas las secciones de contenido
 * Orden: About → Impact Strip → Gallery → Social Impact → ODS →
 *        Sponsors → Financial → Methodology → CTA → Contact
 * ════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════
   SOBRE NOSOTROS (s-offwhite / on-light)
   ══════════════════════════════════════════ */
.about-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.about-video-wrap {
  position: relative;
  height:   560px;
}

.about-video-container {
  position:   absolute;
  top:        0;
  left:       0;
  width:      72%;
  height:     80%;
  overflow:   hidden;
  z-index:    2;
  background: var(--gray-100);
}

.about-video-poster,
.about-video-player {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.video-play-btn {
  position:        absolute;
  inset:           0;
  background:      rgba(10, 10, 10, 0.28);
  border:          none;
  cursor:          pointer;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  transition:      background var(--transition);
}

.video-play-btn:hover {
  background: rgba(10, 10, 10, 0.44);
}

.play-icon {
  width:           72px;
  height:          72px;
  border-radius:   50%;
  background:      var(--yellow);
  color:           var(--black);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      transform 0.3s, box-shadow 0.3s;
  box-shadow:      0 0 0 0 rgba(245, 196, 0, 0.4);
}

.play-icon svg {
  width:  28px;
  height: 28px;
  fill:   currentColor;
  margin-left: 4px; /* Compensar óptico del triángulo */
}

.video-play-btn:hover .play-icon {
  transform:  scale(1.08);
  box-shadow: 0 0 0 16px rgba(245, 196, 0, 0.15);
}

.video-play-btn span {
  font-family:    var(--font-head);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--white);
}

.about-video-accent {
  position:   absolute;
  bottom:     0;
  right:      0;
  width:      52%;
  height:     48%;
  z-index:    3;
  border:     4px solid var(--offwhite);
}

.about-video-accent img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.about-badge-float {
  position:   absolute;
  top:        -28px;
  left:       -28px;
  z-index:    4;
  background: var(--yellow);
  color:      var(--black);
  padding:    18px 22px;
  text-align: center;
}

.about-badge-float .num {
  font-family: var(--font-display);
  font-size:   48px;
  line-height: 1;
}

.about-badge-float .lbl {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-text h2 {
  font-family:   var(--font-display);
  font-size:     clamp(48px, 6vw, 72px);
  line-height:   0.92;
  margin-bottom: 24px;
  color:         var(--text-dark);
}

.about-text h2 span {
  color: var(--yellow-mid);
}

.about-text p {
  font-size:     15px;
  margin-bottom: 18px;
  color:         var(--text-mid);
}

.about-pillars {
  display:   flex;
  gap:       20px;
  margin:    32px 0;
}

.about-pillar {
  border-top: 2px solid var(--yellow-mid);
  padding-top: 12px;
  flex:       1;
}

.about-pillar-label {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--yellow-mid);
  margin-bottom:  4px;
}

.about-pillar-text {
  font-size: 13px;
  color:     var(--text-light);
}

/* ══════════════════════════════════════════
   IMPACT STRIP — Amarillo
   ══════════════════════════════════════════ */
.impact-strip {
  background: var(--yellow);
  padding:    56px 0;
}

.impact-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            rgba(0, 0, 0, 0.08);
}

.impact-item {
  background: var(--yellow);
  padding:    36px 28px;
  text-align: center;
  transition: background var(--transition);
}

.impact-item:hover {
  background: var(--yellow-dark);
}

.impact-num {
  font-family: var(--font-display);
  font-size:   60px;
  color:       var(--black);
  line-height: 1;
}

.impact-unit {
  font-family: var(--font-display);
  font-size:   32px;
  color:       var(--black);
}

.impact-label {
  font-family:    var(--font-head);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(0, 0, 0, 0.6);
  margin-top:     6px;
}

/* ══════════════════════════════════════════
   DEPORTE QUE TRANSFORMA (s-white / on-light)
   ══════════════════════════════════════════ */
.social-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.impact-list {
  list-style:  none;
  margin:      24px 0 32px;
}

.impact-list li {
  display:     flex;
  gap:         16px;
  align-items: flex-start;
  padding:     16px 0;
  border-bottom: 1px solid var(--gray-100);
}

.impact-list li:last-child {
  border-bottom: none;
}

.impact-list .icon {
  font-size:   24px;
  flex-shrink: 0;
  margin-top:  2px;
}

.impact-list .text {
  display:       flex;
  flex-direction: column;
  gap:           4px;
}

.impact-list strong {
  font-family:    var(--font-head);
  font-size:      15px;
  font-weight:    700;
  color:          var(--text-dark);
}

.impact-list span {
  font-size:   14px;
  color:       var(--text-mid);
  line-height: 1.6;
}

.social-image-wrap {
  position:   relative;
  height:     500px;
}

.social-image-main {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.social-image-badge {
  position:   absolute;
  bottom:     -20px;
  left:       -20px;
  background: var(--yellow);
  padding:    24px 28px;
  text-align: center;
  z-index:    1;
}

.social-image-badge .big {
  font-family: var(--font-display);
  font-size:   52px;
  color:       var(--black);
  line-height: 1;
}

.social-image-badge .small {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--black);
}

/* ══════════════════════════════════════════
   ODS (s-charcoal / on-dark)
   ══════════════════════════════════════════ */
.ods-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  margin-top:            48px;
}

.ods-item {
  padding:    40px 32px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 3px solid var(--yellow);
  transition: background var(--transition);
}

.ods-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ods-number {
  font-family:    var(--font-head);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--yellow);
  margin-bottom:  8px;
}

.ods-title {
  font-family:   var(--font-display);
  font-size:     32px;
  color:         var(--white);
  margin-bottom: 16px;
  line-height:   1;
}

.ods-desc {
  font-size:   14px;
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

/* ══════════════════════════════════════════
   SPONSORS INTRO
   ══════════════════════════════════════════ */
.sponsors-intro {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   60px;
  align-items:           center;
  margin-bottom:         0;
}

.sponsors-intro h2 {
  font-family: var(--font-display);
  font-size:   clamp(44px, 6vw, 72px);
  line-height: 0.92;
  color:       var(--text-dark);
}

.sponsors-intro h2 span {
  color: var(--yellow-mid);
}

.sponsors-intro p {
  font-size:     15px;
  color:         var(--text-mid);
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════
   FINANCIAL (s-black / on-dark)
   ══════════════════════════════════════════ */
.financial-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.budget-items {
  margin-top: 32px;
  display:    flex;
  flex-direction: column;
  gap:        20px;
}

.budget-item-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   8px;
}

.budget-item-label {
  font-family:    var(--font-head);
  font-size:      13px;
  font-weight:    600;
  color:          rgba(255, 255, 255, 0.75);
}

.budget-item-val {
  font-family: var(--font-head);
  font-size:   14px;
  font-weight: 700;
  color:       var(--yellow);
}

.budget-bar {
  height:       6px;
  background:   rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow:     hidden;
}

.budget-fill {
  height:        100%;
  background:    var(--yellow);
  border-radius: 3px;
  transition:    width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.financial-right {
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

.financial-total {
  padding:     32px;
  background:  rgba(245, 196, 0, 0.08);
  border:      1px solid rgba(245, 196, 0, 0.2);
  text-align:  center;
}

.financial-total .label {
  font-family:    var(--font-head);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.5);
  margin-bottom:  8px;
}

.financial-total .amount {
  font-family: var(--font-display);
  font-size:   72px;
  color:       var(--yellow);
  line-height: 1;
}

.financial-total .equiv {
  font-family: var(--font-head);
  font-size:   13px;
  color:       rgba(255, 255, 255, 0.4);
  margin-top:  4px;
}

.funding-sources h3 {
  font-family:   var(--font-head);
  font-size:     16px;
  font-weight:   700;
  color:         var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.source-list {
  list-style: none;
}

.source-list li {
  font-size:     14px;
  color:         rgba(255, 255, 255, 0.65);
  padding:       10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-left:  20px;
  position:      relative;
}

.source-list li::before {
  content:   '→';
  position:  absolute;
  left:      0;
  color:     var(--yellow);
}

/* ══════════════════════════════════════════
   METODOLOGÍA (s-white / on-light)
   ══════════════════════════════════════════ */
.timeline {
  display:        flex;
  flex-direction: column;
  gap:            0;
  margin-top:     48px;
}

.timeline-step {
  display:     grid;
  grid-template-columns: 80px 180px 1fr;
  gap:         24px;
  align-items: start;
  padding:     24px 0;
  border-bottom: 1px solid var(--gray-100);
  position:    relative;
}

.timeline-step:last-child {
  border-bottom: none;
}

.step-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--yellow-mid);
  border:        3px solid var(--white);
  box-shadow:    0 0 0 2px var(--yellow-mid);
  margin-top:    6px;
  justify-self:  center;
}

.step-num {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--yellow-mid);
  margin-top:     4px;
}

.step-title {
  font-family: var(--font-head);
  font-size:   18px;
  font-weight: 700;
  color:       var(--text-dark);
  margin-bottom: 8px;
}

.step-desc {
  font-size:   14px;
  color:       var(--text-mid);
  line-height: 1.7;
}

/* ══════════════════════════════════════════
   CTA (fondo amarillo)
   ══════════════════════════════════════════ */
.cta-section {
  background: var(--yellow);
  padding:    var(--section-py) 0;
}

.cta-content {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.cta-content h2 {
  font-family: var(--font-display);
  font-size:   clamp(56px, 8vw, 112px);
  line-height: 0.88;
  color:       var(--black);
}

.cta-content p {
  font-size:     16px;
  color:         rgba(0, 0, 0, 0.65);
  line-height:   1.7;
  margin-bottom: 32px;
}

.cta-actions {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   CONTACTO (s-gray / on-light)
   ══════════════════════════════════════════ */
.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
}

.contact-grid h2 {
  font-family: var(--font-display);
  font-size:   clamp(44px, 6vw, 72px);
  line-height: 0.92;
  color:       var(--text-dark);
  margin-bottom: 20px;
}

.contact-grid h2 span {
  color: var(--yellow-mid);
}

.contact-grid > div > p {
  font-size: 15px;
  color:     var(--text-mid);
}