/* ============================================================
   gestion-redes.css — estilos exclusivos de public/gestion-redes.php
   Cargada solo en esta vista vía $pageStyles (ver header.php).

   Diseño intencionalmente distinto al de creacion-marca.php
   (que usa hero de imagen completa + tarjetas flotantes) y al
   de software-a-medida.php (hero dividido en dos mitades apiladas):
   acá el hero es un split lado a lado con fondo claro, franja de
   plataformas, panel de resultados con gráfico simulado y
   tarjetas de "qué incluye" con acento de color en vez de foto.
   ============================================================ */

/* ---------- HERO ---------- */
.redes-hero{
  position:relative;
  overflow:hidden;
  padding-top:150px;
  background:var(--navy-ink);
  /* Ocupa toda la pantalla en desktop: la franja de plataformas
     (.redes-platforms) queda dentro de esta misma sección, así que
     column + flex:1 en el grid de abajo la deja anclada al fondo
     mientras el texto+imagen se centran en el espacio que sobra. */
  display:flex; flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}

.redes-hero-bg{position:absolute; inset:0; z-index:0;}
.redes-hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:62% center; display:block;
}
.redes-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(10,14,26,.94) 0%,
    rgba(10,14,26,.82) 32%,
    rgba(10,14,26,.35) 55%,
    rgba(10,14,26,.08) 72%,
    transparent 88%);
}

.redes-hero-grid{
  position:relative; z-index:1;
  flex:1;
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; align-content:center;
  padding-bottom:64px;
}
.redes-hero-text h1{font-size:44px; line-height:1.15; color:#fff;}
.redes-hero-text .sub{font-size:16.5px; color:#C7CEE3; margin-top:16px; max-width:480px;}

.redes-hero-list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.redes-hero-list li{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#fff;}
.redes-hero-list svg{color:var(--crimson); flex-shrink:0;}

.redes-hero-text .cta-row{margin-top:32px;}
.redes-hero-text .cta-row .btn-primary{box-shadow:none;}
.redes-hero-text .cta-row .btn-primary:hover{box-shadow:none;}

/* ---------- FRANJA DE PLATAFORMAS ---------- */
.redes-platforms{position:relative; z-index:1; background:var(--navy-ink); padding:20px 0;}
.redes-platforms-inner{
  display:flex; align-items:center; flex-wrap:wrap; gap:18px 28px;
}
.redes-platforms-label{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#8791AE; flex-shrink:0;
}
.redes-platforms-list{display:flex; flex-wrap:wrap; gap:10px;}
.redes-platform-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#E4E7F2;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:7px 14px; border-radius:20px;
}
.redes-platform-pill i{color:var(--crimson); font-size:14px;}

/* ---------- PROCESO (horizontal, línea punteada) ---------- */
.redes-proceso{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:48px; position:relative;
}
.redes-proceso-step{
  position:relative; text-align:center; padding:0 20px;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.redes-proceso.in-view .redes-proceso-step{opacity:1; transform:translateY(0);}
.redes-proceso.in-view .redes-proceso-step:nth-child(1){transition-delay:0s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(2){transition-delay:.6s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(3){transition-delay:1.2s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(4){transition-delay:1.8s;}

/* línea punteada de fondo (siempre visible, guía estática) */
.redes-proceso-step:not(:last-child)::after{
  content:""; position:absolute; top:30px; left:calc(50% + 46px); right:calc(-50% + 46px);
  border-top:2px dashed var(--line);
}
/* línea sólida que se "dibuja" encima al entrar en pantalla,
   conectando cada paso con el siguiente en cadena */
.redes-proceso-step:not(:last-child)::before{
  content:""; position:absolute; top:29px; left:calc(50% + 46px); right:calc(-50% + 46px);
  height:2px; z-index:1; border-radius:2px;
  background:linear-gradient(90deg, var(--crimson), var(--crimson-dark));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.redes-proceso.in-view .redes-proceso-step:nth-child(1):not(:last-child)::before{transition-delay:.35s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(2):not(:last-child)::before{transition-delay:.95s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(3):not(:last-child)::before{transition-delay:1.55s;}
.redes-proceso.in-view .redes-proceso-step:not(:last-child)::before{transform:scaleX(1);}

.redes-proceso-icon{
  position:relative;
  width:60px; height:60px; margin:0 auto 14px;
  border-radius:50%; background:var(--crimson-tint); color:var(--crimson);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  z-index:2;
  transform:scale(.3);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease;
}
.redes-proceso.in-view .redes-proceso-step:nth-child(1) .redes-proceso-icon{transform:scale(1); transition-delay:0s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(2) .redes-proceso-icon{transform:scale(1); transition-delay:.6s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(3) .redes-proceso-icon{transform:scale(1); transition-delay:1.2s;}
.redes-proceso.in-view .redes-proceso-step:nth-child(4) .redes-proceso-icon{transform:scale(1); transition-delay:1.8s;}

.redes-proceso-step:hover .redes-proceso-icon{background:var(--crimson); color:#fff; transform:scale(1.1) !important;}

/* pulso sutil y continuo alrededor del ícono, para que la sección
   no se sienta estática una vez terminada la animación de entrada */
.redes-proceso-icon::after{
  content:""; position:absolute; inset:-6px; z-index:-1;
  border-radius:50%; border:2px solid var(--crimson);
  opacity:0; animation:redesProcesoPulse 3s ease-out infinite;
}
.redes-proceso-step:nth-child(1) .redes-proceso-icon::after{animation-delay:.6s;}
.redes-proceso-step:nth-child(2) .redes-proceso-icon::after{animation-delay:1.2s;}
.redes-proceso-step:nth-child(3) .redes-proceso-icon::after{animation-delay:1.8s;}
.redes-proceso-step:nth-child(4) .redes-proceso-icon::after{animation-delay:2.4s;}
@keyframes redesProcesoPulse{
  0%{transform:scale(.85); opacity:.5;}
  70%{transform:scale(1.4); opacity:0;}
  100%{opacity:0;}
}

.redes-proceso-num{
  display:block; font-size:11.5px; font-weight:700; color:var(--crimson);
  letter-spacing:.04em; margin-bottom:6px;
}
.redes-proceso-step h3{font-size:15.5px; color:var(--navy); margin-bottom:6px;}
.redes-proceso-step p{font-size:12.5px; color:var(--muted); line-height:1.55;}

@media (prefers-reduced-motion: reduce){
  .redes-proceso-step{opacity:1; transform:none; transition:none;}
  .redes-proceso-step::before{transform:scaleX(1) !important; transition:none;}
  .redes-proceso-icon{transform:scale(1) !important; transition:none;}
  .redes-proceso-icon::after{animation:none;}
}

@media (max-width:900px){
  .redes-proceso{grid-template-columns:1fr 1fr; gap:36px 0;}
  .redes-proceso-step:not(:last-child)::after,
  .redes-proceso-step:not(:last-child)::before{display:none;}
}

/* ---------- RESULTADOS: panel de gráfico + checklist ---------- */
.redes-resultados-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.redes-chart-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 26px 22px;
  box-shadow:0 20px 44px -26px rgba(30,44,81,.25);
}
.redes-chart-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:24px;
}
.redes-chart-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; color:#1EA672;
  background:#E7F7EF; padding:5px 10px; border-radius:20px;
}
.redes-chart{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  height:150px;
}
.redes-chart-bar{
  flex:1; height:var(--h); min-height:6px;
  background:var(--navy-tint); border-radius:6px 6px 0 0;
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  animation:redesBarGrow 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.redes-chart-bar-active{background:linear-gradient(180deg, var(--crimson), var(--crimson-dark));}
.redes-chart-bar span{
  position:absolute; bottom:-22px; font-size:11px; font-weight:600; color:var(--muted);
}
@keyframes redesBarGrow{
  from{transform:scaleY(0); transform-origin:bottom;}
  to{transform:scaleY(1); transform-origin:bottom;}
}

.redes-check-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:13px;}
.redes-check-list li{display:flex; align-items:flex-start; gap:9px; font-size:14.5px; font-weight:500; color:var(--navy);}
.redes-check-list svg{color:var(--crimson); flex-shrink:0; margin-top:3px;}

@media (max-width:900px){
  .redes-resultados-grid{grid-template-columns:1fr; gap:40px;}
}

/* ---------- QUÉ INCLUYE (acento de color, sin foto) ---------- */
.redes-incluye-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;
}
.redes-incluye-card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:30px 24px; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
/* Anillo de borde en degradado guinda, aparece solo en hover (misma
   técnica que .marca-porque-card en creacion-marca.css). */
.redes-incluye-card::before{
  content:""; position:absolute; inset:0; border-radius:16px;
  padding:1.5px;
  background:linear-gradient(135deg, var(--crimson), rgba(234,33,81,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
.redes-incluye-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 54px -22px rgba(30,44,81,.28), 0 0 30px -8px rgba(234,33,81,.35);
}
.redes-incluye-card:hover::before{opacity:1;}
.redes-incluye-icon{
  position:relative;
  width:48px; height:48px; border-radius:12px;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  margin-bottom:18px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), background .35s ease, color .35s ease;
}
.redes-incluye-card:hover .redes-incluye-icon{
  transform:scale(1.12) rotate(-6deg);
  background:var(--crimson);
}
/* Anillo de pulso continuo, escalonado por tarjeta */
.redes-incluye-icon::after{
  content:""; position:absolute; inset:-6px; z-index:-1;
  border-radius:inherit; border:2px solid var(--crimson);
  opacity:0;
  animation:redesIncluyePulse 2.8s ease-out infinite;
}
.redes-incluye-card:nth-child(1) .redes-incluye-icon::after{animation-delay:0s;}
.redes-incluye-card:nth-child(2) .redes-incluye-icon::after{animation-delay:.5s;}
.redes-incluye-card:nth-child(3) .redes-incluye-icon::after{animation-delay:1s;}
.redes-incluye-card:nth-child(4) .redes-incluye-icon::after{animation-delay:1.5s;}
@keyframes redesIncluyePulse{
  0%{transform:scale(.85); opacity:.55;}
  70%{transform:scale(1.5); opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .redes-incluye-icon::after{animation:none;}
  .redes-incluye-card{transition:none;}
}
.redes-incluye-card h3{font-size:15.5px; color:var(--navy); margin-bottom:8px;}
.redes-incluye-card p{font-size:13px; color:var(--muted); line-height:1.6;}

@media (max-width:1080px){
  .redes-incluye-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .redes-incluye-grid{grid-template-columns:1fr;}
  .redes-proceso{grid-template-columns:1fr; gap:28px;}
}

/* ---------- RESPONSIVE HERO ---------- */
@media (max-width:900px){
  /* El "ocupa toda la pantalla" es solo para desktop (ver .redes-hero
     base) — en mobile se queda como estaba, del alto de su contenido. */
  .redes-hero{padding-top:120px; min-height:0;}
  .redes-hero-grid{grid-template-columns:1fr; gap:40px;}
  .redes-hero-text h1{font-size:32px;}
  .redes-hero-overlay{
    background:linear-gradient(180deg,
      rgba(10,14,26,.55) 0%,
      rgba(10,14,26,.88) 55%,
      rgba(10,14,26,.97) 100%);
  }
}