/* ============================================
   MURCIA EN FUTURO — Estilos de la Homepage
   Solo secciones específicas de la portada
   (Los globales están en styles.css)
   ============================================ */

/* === HERO === */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-dark); }
.hero-video-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(346deg, rgb(6 115 219 / 71%) 14%, rgb(17 142 235 / 84%) 43%, rgb(213 166 102 / 80%) 68%, rgb(255 252 21 / 64%) 100%); }
.hero-lines { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-lines svg { width: 100%; height: 100%; }
.hero-divider { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 5; line-height: 0; pointer-events: none; }
.hero-divider svg { display: block; width: 100%; height: 80px; }
.hero-content { position: relative; z-index: 4; text-align: center; padding: 0 24px; max-width: 820px; }
.hero-badge { display: inline-block; background: rgba(1, 37, 65, 0.842); border: 1px solid rgba(19,112,182,0.45); color: rgba(255,255,255,0.9); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 22px; border-radius: 100px; margin-bottom: 24px; backdrop-filter: blur(8px); }
.hero h1 { color: var(--color-white); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; margin-bottom: 20px; letter-spacing: -0.02em; text-shadow: 1px 3px 6px rgba(0, 0, 50, 0.6); }
.hero h1 span { color: var(--color-primary-light); }
.hero-subtitle { color: rgba(255,255,255,0.8); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 600px; margin: 0 auto 36px; line-height: 1.75; text-shadow: 1px 1px 2px rgba(0, 0, 50, 0.6); font-weight: 500; }
.hero-actions { display: block; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,0.7); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; text-align: center; animation: float 2.5s ease-in-out infinite; }
.hero-scroll .arrow { display: block; margin: 8px auto 0; width: 18px; height: 18px; border-right: 2px solid rgba(255,255,255,0.4); border-bottom: 2px solid rgba(255,255,255,0.4); transform: rotate(45deg); }
@keyframes float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* === INTRO / CLAIM === */
.section-intro { background: var(--color-white); text-align: center; padding: 100px 0; }
.section-intro h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 750px; margin: 0 auto 24px; }
.section-intro .lead { color: var(--color-text-light); font-size: 1.1rem; max-width: 650px; margin: 0 auto 36px; line-height: 1.75; }

/* === PEDANÍAS MARQUEE === */
.pedanias-marquee { overflow: hidden; white-space: nowrap; margin-top: 48px; padding: 16px 0; }
.pedanias-track { display: inline-flex; animation: marqueeScroll 60s linear infinite; }
.pedanias-track span { font-family: var(--font-heading); font-size: 30px; font-weight: 600; color: #acb3c1; letter-spacing: 0.01em; padding-right: 0; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.pedanias-marquee:hover .pedanias-track { animation-play-state: paused; }

/* === PROYECTO NAV === */
.proyecto-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; text-align: left; }
.proyecto-nav-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); transition: all var(--transition); text-decoration: none; color: var(--color-text); }
.proyecto-nav-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--color-text); }
.proyecto-nav-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(19,112,182,0.1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proyecto-nav-item strong { display: block; font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-dark); margin-bottom: 2px; }
.proyecto-nav-item small { display: block; font-size: 0.78rem; color: var(--color-text-light); }

/* === ÁMBITOS / DIMENSIONES === */
.section-ambitos { background: var(--color-bg); background-image: url(../img/plan01.gif); background-size: cover; background-repeat: no-repeat; background-position: center center; }
.dimensions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.dimension-block { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.dimension-block:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.dimension-header { padding: 28px 24px 20px; text-align: center; }
.dimension-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.5rem; }
.dimension-block:nth-child(1) .dimension-icon { background: rgba(42,157,92,0.12); color: #2a9d5c; }
.dimension-block:nth-child(2) .dimension-icon { background: rgba(230,126,34,0.12); color: #e67e22; }
.dimension-block:nth-child(3) .dimension-icon { background: rgba(19,112,182,0.12); color: var(--color-primary); }
.dimension-header h3 { font-size: 1.15rem; margin-bottom: 8px; }
.dimension-header p { font-size: 0.86rem; color: var(--color-text-light); line-height: 1.55; }
.dimension-items { padding: 0 24px 24px; }
.dimension-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; color: var(--color-text); cursor: default; transition: color var(--transition); }
.dimension-item:hover { color: var(--color-primary); }
.dimension-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dimension-block:nth-child(1) .dot { background: #2a9d5c; }
.dimension-block:nth-child(2) .dot { background: #e67e22; }
.dimension-block:nth-child(3) .dot { background: var(--color-primary); }

/* === FASES TIMELINE === */
.section-fases { background: var(--color-white); }
#proceso { background-image: url(../img/participacion.jpg); background-size: cover; background-repeat: no-repeat; background-position: -100px; }
.fases-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.fases-timeline::before { content: ''; position: absolute; top: 40px; left: calc(16.66% + 12px); right: calc(16.66% + 12px); height: 3px; background: var(--color-border); z-index: 0; }
.fase-card { text-align: center; padding: 0 20px; position: relative; }
.fase-number { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--color-white); position: relative; z-index: 1; }
.fase-card:nth-child(1) .fase-number { background: var(--color-primary); }
.fase-card:nth-child(2) .fase-number { background: var(--color-primary-dark); }
.fase-card:nth-child(3) .fase-number { background: #0a4170; }
.fase-period { display: inline-block; vertical-align: middle; background: var(--color-accent); color: var(--color-primary); font-size: 0.78rem; font-weight: 700; padding: 4px 14px; border-radius: 100px; margin-bottom: 14px; }
.fase-card h3 { font-size: 1.1rem; margin-bottom: 12px; }
.fase-card p { font-size: 0.88rem; color: var(--color-text-light); line-height: 1.65; }

/* === DOCUMENTACIÓN === */
.section-docs { background: var(--color-bg); background-color: #0e5a94; color: #ffffff; }
.section-docs .section-header h2 { color: #ffffff !important; }
.section-docs .section-header p { color: #ffffff !important; }
.section-docs .section-header .section-label { color: #ff8b06 !important; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.doc-card { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: var(--color-white); border-radius: var(--radius); border: 1px solid var(--color-border); transition: all var(--transition); }
.doc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.doc-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); background: var(--color-accent); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.doc-card h4 { font-size: 0.95rem; margin-bottom: 6px; }
.doc-card p { font-size: 0.82rem; color: var(--color-text-light); line-height: 1.55; }
.doc-badge { display: inline-block; margin-top: 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 100px; }
.doc-badge.available { background: rgba(42,157,92,0.1); color: #2a9d5c; }
.doc-badge.pending { background: rgba(230,126,34,0.1); color: #e67e22; }

/* === EVENTOS === */
.section-eventos { background: var(--color-white); }
.eventos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.evento-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.evento-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.evento-img { height: 200px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.25); font-size: 3rem; }
.evento-date-badge { position: absolute; top: 16px; left: 16px; background: var(--color-white); border-radius: var(--radius); padding: 8px 12px; text-align: center; box-shadow: var(--shadow-sm); }
.evento-date-badge .day { display: block; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.evento-date-badge .month { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-light); }
.evento-body { padding: 20px 24px 24px; }
.evento-type { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 8px; }
.evento-body h3 { font-size: 1.02rem; margin-bottom: 8px; line-height: 1.35; }
.evento-body p { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.55; }

/* === PARTICIPA CTA === */
.section-participa { background: linear-gradient(135deg, #071e33 0%, var(--color-primary-dark) 60%, var(--color-primary) 100%); padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.section-participa::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(19,112,182,0.15); top: -200px; right: -100px; pointer-events: none; }
.section-participa::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(26,138,216,0.1); bottom: -150px; left: -50px; pointer-events: none; }
.section-participa .container { position: relative; z-index: 1; }
.section-participa h2 { color: var(--color-white); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 16px; }
.section-participa p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 600px; margin: 0 auto 36px; line-height: 1.7; }
.section-participa .btn-white { background: var(--color-white); color: var(--color-primary); font-size: 1rem; padding: 16px 40px; }
.section-participa .btn-white:hover { background: var(--color-accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

/* === NOTICIAS === */
.section-noticias { background-color: #ffffff; }
.noticias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.noticia-featured { grid-row: span 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.noticia-featured:hover { box-shadow: var(--shadow-md); }
.noticia-featured .noticia-img { height: 280px; background: linear-gradient(135deg, #0e5a94, #1370b6); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 3rem; overflow: hidden; }
.noticia-featured .noticia-body { padding: 28px; }
.noticia-small { display: flex; gap: 20px; background: var(--color-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.noticia-small:hover { box-shadow: var(--shadow-md); }
.noticia-small .noticia-img { width: 160px; min-height: 140px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 2rem; overflow: hidden; }
.noticia-small .noticia-body { padding: 20px 20px 20px 0; display: flex; flex-direction: column; justify-content: center; }
.noticia-date { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.noticia-body h3 { font-size: 1rem; margin-bottom: 8px; line-height: 1.35; }
.noticia-featured .noticia-body h3 { font-size: 1.25rem; }
.noticia-body p { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.55; }

/* === MAP === */
#map-container { width: 100%; }
/* #map-container svg, #proyecto svg { width: 100%; height: auto; display: block; }*/
.maparea { opacity: 0.35; transition: opacity 0.4s ease, fill 0.4s ease; }
.animate-map .maparea { animation: pulseArea 4s ease-in-out infinite; }
@keyframes pulseArea {
  0%   { fill: #D3D3D3; opacity: 0.4; }
  15%  { fill: var(--color-primary-light); opacity: 0.40; }
  30%  { fill: #D3D3D3; opacity: 0.4; }
  100% { fill: #D3D3D3; opacity: 0.4; }
}
.animate-map .maparea:nth-child(1)  { animation-delay: 0s; }
.animate-map .maparea:nth-child(2)  { animation-delay: 0.06s; }
.animate-map .maparea:nth-child(3)  { animation-delay: 0.12s; }
.animate-map .maparea:nth-child(4)  { animation-delay: 0.18s; }
.animate-map .maparea:nth-child(5)  { animation-delay: 0.24s; }
.animate-map .maparea:nth-child(6)  { animation-delay: 0.3s; }
.animate-map .maparea:nth-child(7)  { animation-delay: 0.36s; }
.animate-map .maparea:nth-child(8)  { animation-delay: 0.42s; }
.animate-map .maparea:nth-child(9)  { animation-delay: 0.48s; }
.animate-map .maparea:nth-child(10) { animation-delay: 0.54s; }
.animate-map .maparea:nth-child(11) { animation-delay: 0.6s; }
.animate-map .maparea:nth-child(12) { animation-delay: 0.66s; }
.animate-map .maparea:nth-child(13) { animation-delay: 0.72s; }
.animate-map .maparea:nth-child(14) { animation-delay: 0.78s; }
.animate-map .maparea:nth-child(15) { animation-delay: 0.84s; }
.animate-map .maparea:nth-child(16) { animation-delay: 0.9s; }
.animate-map .maparea:nth-child(17) { animation-delay: 0.96s; }
.animate-map .maparea:nth-child(18) { animation-delay: 1.02s; }
.animate-map .maparea:nth-child(19) { animation-delay: 1.08s; }
.animate-map .maparea:nth-child(20) { animation-delay: 1.14s; }
.animate-map .maparea:nth-child(21) { animation-delay: 1.2s; }
.animate-map .maparea:nth-child(22) { animation-delay: 1.26s; }
.animate-map .maparea:nth-child(23) { animation-delay: 1.32s; }
.animate-map .maparea:nth-child(24) { animation-delay: 1.38s; }
.animate-map .maparea:nth-child(25) { animation-delay: 1.44s; }
.animate-map .maparea:nth-child(26) { animation-delay: 1.5s; }
.animate-map .maparea:nth-child(27) { animation-delay: 1.56s; }
.animate-map .maparea:nth-child(28) { animation-delay: 1.62s; }
.animate-map .maparea:nth-child(29) { animation-delay: 1.68s; }
.animate-map .maparea:nth-child(30) { animation-delay: 1.74s; }
.animate-map .maparea:nth-child(31) { animation-delay: 1.8s; }
.animate-map .maparea:nth-child(32) { animation-delay: 1.86s; }
.animate-map .maparea:nth-child(33) { animation-delay: 1.92s; }
.animate-map .maparea:nth-child(34) { animation-delay: 1.98s; }
.animate-map .maparea:nth-child(35) { animation-delay: 2.04s; }
.animate-map .maparea:nth-child(36) { animation-delay: 2.1s; }
.animate-map .maparea:nth-child(37) { animation-delay: 2.16s; }
.animate-map .maparea:nth-child(38) { animation-delay: 2.22s; }
.animate-map .maparea:nth-child(39) { animation-delay: 2.28s; }
.animate-map .maparea:nth-child(40) { animation-delay: 2.34s; }
.animate-map .maparea:nth-child(41) { animation-delay: 2.4s; }
.animate-map .maparea:nth-child(42) { animation-delay: 2.46s; }
.animate-map .maparea:nth-child(43) { animation-delay: 2.52s; }
.animate-map .maparea:nth-child(44) { animation-delay: 2.58s; }
.animate-map .maparea:nth-child(45) { animation-delay: 2.64s; }
.animate-map .maparea:nth-child(46) { animation-delay: 2.7s; }
.animate-map .maparea:nth-child(47) { animation-delay: 2.76s; }
.animate-map .maparea:nth-child(48) { animation-delay: 2.82s; }
.animate-map .maparea:nth-child(49) { animation-delay: 2.88s; }
.animate-map .maparea:nth-child(50) { animation-delay: 2.94s; }
.animate-map .maparea:nth-child(51) { animation-delay: 3.0s; }
.animate-map .maparea:nth-child(52) { animation-delay: 3.06s; }
.animate-map .maparea:nth-child(53) { animation-delay: 3.12s; }
.animate-map .maparea:nth-child(54) { animation-delay: 3.18s; }
.animate-map .maparea:nth-child(55) { animation-delay: 3.24s; }
.animate-map .maparea:nth-child(56) { animation-delay: 3.3s; }

/* === RESPONSIVE HOMEPAGE === */
@media (max-width: 1024px) {
  .dimensions-grid { grid-template-columns: 1fr; }
  .fases-timeline { grid-template-columns: 1fr; gap: 40px; }
  .fases-timeline::before { display: none; }
  .eventos-grid { grid-template-columns: 1fr 1fr; }
  .noticias-grid { grid-template-columns: 1fr; }
  .noticia-featured { grid-row: span 1; }
  .proyecto-nav { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero { min-height: 90vh; }
  .hero-actions { flex-direction: column; align-items: center; }
  .eventos-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .noticia-small { flex-direction: column; }
  .noticia-small .noticia-img { width: 100%; min-height: 160px; }
  .noticia-small .noticia-body { padding: 20px; }
}
@media (max-width: 430px) {
  .hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(346deg, rgb(6 115 219 / 71%) 14%, rgb(17 142 235 / 84%) 43%, rgb(6 115 219 / 80%) 68%, rgb(255 252 21 / 64%) 100%); }
  .hero-subtitle { font-size: 1.2rem; max-width: 600px; margin: 0 auto 36px; line-height: 1.2; text-shadow: 1px 2px 2px rgba(0, 0, 50, 0.6); }
  .hero-badge { max-width: 80%; }
  .hero-divider { margin-bottom: -1px !important; }
  #proceso { background-image: url(../img/participacionw.jpg); background-size: cover; background-repeat: no-repeat; background-position: -100px; }
}