/*
Theme Name: Allin Route
Theme URI: https://allinroute.com
Author: Allin Route
Description: Tema a medida para Allin Route — ecosistema de bienestar andino en Cusco. Contenido e imágenes de cada sección editables desde WordPress con ACF (plantilla de página "Allin Route — Home"). Header de dos filas (logo + contacto/idioma/redes/CTA) y menú fijo al hacer scroll; footer de 4 columnas + logos aliados (MYPEs Digitales, Gerencia Regional de Producción, Hagamos Historia) + copyright, según el patrón del tema base de plantillas MYPES. Formularios conectados por correo (wp_mail), sin depender de un plugin externo.
Version: 2.0
Requires PHP: 7.4
Text Domain: allin-route
*/


/* ============================================================
   ALLIN ROUTE — Design tokens
   Paleta textil andina + ruta de peregrinaje (Ceques) como hilo
   conductor visual. Ver notas en el brief: colores tierra,
   andinos y naturales; carga rápida; separar gratuito de pago.
   ============================================================ */
:root{
  /* Base */
  --night:      #1A2233;   /* Ch'aska — cielo nocturno andino */
  --night-2:    #232E45;
  --night-soft: #2C3852;
  --paper:      #F2E7CE;   /* Pacha — papel/adobe cálido */
  --paper-2:    #ECDEC0;
  --cloud:      #FBF6EA;   /* casi blanco, para tarjetas sobre paper */

  /* Acentos textiles */
  --qori:   #CE9A3E;  /* oro / sol amanecer */
  --qori-l: #E4B85F;
  --kantu:  #A0472B;  /* rojo tierra / textil k'antu */
  --kantu-l:#C1653F;
  --qomer:  #46654A;  /* verde montaña — Allin Lab */
  --qomer-l:#5F8264;
  --wayra:  #6E8CA0;  /* azul bruma — Wellbeing/Mental Health */

  /* Texto y líneas */
  --ink:       #241F17;
  --ink-soft:  #5A5140;
  --line:      #C9B999;
  --line-dark: rgba(255,255,255,.14);

  /* Tipografía */
  --f-display: 'Fraunces', serif;
  --f-body: 'Work Sans', sans-serif;
  --f-mono: 'Space Mono', monospace;

  --radius: 2px;
  --container: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.05;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2.5px solid var(--qori); outline-offset:3px;}

/* ---------- Eyebrow / labels (estilo "bitácora de ruta") ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--kantu);
}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--kantu);
  box-shadow:0 0 0 3px rgba(160,71,43,.18);
}
.on-dark .eyebrow{color:var(--qori-l);}
.on-dark .eyebrow::before{background:var(--qori-l); box-shadow:0 0 0 3px rgba(228,184,95,.2);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:var(--radius);
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{background:var(--kantu); border-color:var(--kantu); color:var(--cloud);}
.btn-solid:hover{background:var(--ink); border-color:var(--ink);}
.btn-ghost-dark{border-color:rgba(255,255,255,.5); color:var(--cloud);}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12); border-color:var(--cloud);}
.btn-gold{background:var(--qori); border-color:var(--qori); color:var(--night);}
.btn-gold:hover{background:var(--qori-l); border-color:var(--qori-l);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--cloud);}
.btn-green{background:var(--qomer); border-color:var(--qomer); color:var(--cloud);}
.btn-green:hover{background:var(--qomer-l); border-color:var(--qomer-l);}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}

/* ---------- El Camino: línea de ruta que conecta secciones ---------- */
.route-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 14px);
  z-index:0;
}
.waypoint{
  width:14px;height:14px;border-radius:50%;
  background:var(--cloud);
  border:2px solid var(--kantu);
  box-shadow:0 0 0 6px rgba(160,71,43,.1);
  position:relative;
  z-index:1;
  flex-shrink:0;
}

/* ============================================================
   HEADER — Top + barra de menú
   (estructura basada en el patrón "Top / top_menu__box" del
   tema de plantillas MYPES, adaptada a la identidad Allin Route)
   ============================================================ */
header#menuResponsive{position:relative; z-index:100;}

/* Barra superior: logo + datos de contacto / idioma / redes / CTA */
.box_conten__top{
  background:var(--cloud);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.box_conten__top .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.top__logo{
  font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:.01em;
  color:var(--ink); display:flex; align-items:center; gap:9px; flex-shrink:0;
}
.top__logo svg{flex-shrink:0; color:var(--kantu);}
.top__logo .top__logo-sub{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400; margin-top:2px;
}
.top__right{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.top__info{
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:12px; color:var(--ink-soft);
}
.top__info a{color:var(--ink-soft); transition:color .2s;}
.top__info a:hover{color:var(--kantu);}
.top__info .sep{color:var(--line);}
.top__idiom{display:inline-flex; align-items:center; gap:5px; text-transform:uppercase;}
.top__actions{display:flex; align-items:center; gap:14px;}
.top__social{display:flex; align-items:center; gap:8px;}
.top__social a{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:0; color:var(--ink-soft);
  transition:border-color .2s, color .2s;
}
.top__social a:hover{border-color:var(--kantu); color:var(--kantu);}
.top__cta{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 18px; background:var(--kantu); color:var(--cloud); border-radius:var(--radius);
  transition:background .2s;
}
.top__cta:hover{background:var(--ink);}

/* Barra de menú principal */
.top_menu__box{
  background:var(--night);
  transition:transform .3s ease, box-shadow .3s ease;
}
.top_menu__box.menu-fixed{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  animation:slideDown .35s ease-out;
}
@keyframes slideDown{from{transform:translateY(-100%);} to{transform:translateY(0);}}
.box_menu{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 0;
}
.logo{
  font-family:var(--f-display); font-weight:600; font-size:21px; letter-spacing:.01em;
  color:var(--cloud); display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.logo svg{flex-shrink:0; color:var(--qori-l);}
.main-nav{display:flex; align-items:center;}
.main-nav ul{display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
.main-nav a{
  display:block;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(251,246,234,.78);
  padding:10px 13px; border-radius:var(--radius);
  transition:color .2s, background .2s;
}
.main-nav a:hover{color:#fff; background:rgba(255,255,255,.08);}
.nav-cta{margin-left:8px;}
.main-nav a.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; background:var(--qori); border:1.5px solid var(--qori); color:var(--night);
}
.main-nav a.btn:hover{background:var(--qori-l); border-color:var(--qori-l); color:var(--night);}

.content_menu_mobil{display:none;}
button.nav-bar{background:none; border:none; padding:6px; cursor:pointer;}
svg.icon-burger .line{fill:none; stroke:var(--cloud); stroke-width:36; stroke-linecap:round; transition:transform .3s ease, opacity .3s ease;}
svg.icon-burger .top{transform-origin:top left;}
svg.icon-burger .bottom{transform-origin:bottom left;}
.show_menu_mobil .nav-bar .top{transform:rotate(45deg) translate(3px,-4px);}
.show_menu_mobil .nav-bar .middle{opacity:0;}
.show_menu_mobil .nav-bar .bottom{transform:rotate(-45deg) translate(-1px,1px);}

@media (max-width:980px){
  header#menuResponsive{position:fixed; top:0; left:0; right:0; z-index:9999;}
  .box_conten__top{display:none;}
  .content_menu_mobil{display:block;}
  .box_menu{padding:14px 0;}
  .main-nav{
    position:fixed; inset:0; z-index:9998;
    background:var(--night);
    padding:110px 28px 28px;
    transform:translateY(-100%);
    transition:transform .35s ease;
    overflow-y:auto;
  }
  .show_menu_mobil .main-nav{transform:translateY(0);}
  .main-nav ul{flex-direction:column; align-items:flex-start; width:100%; gap:0;}
  .main-nav a{width:100%; padding:15px 4px; font-size:13px; border-bottom:1px solid var(--line-dark);}
  .nav-cta{margin-left:0; margin-top:16px;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:92vh;
  background:linear-gradient(180deg,#141A28 0%, var(--night) 45%, var(--night-2) 100%);
  color:var(--cloud);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-mountains{
  position:absolute; inset:auto 0 0 0; height:52%;
  z-index:1;
}
.hero-sun{
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(228,184,95,.55), rgba(228,184,95,0) 70%);
  top:8%; left:50%; transform:translateX(-50%);
  z-index:0;
  animation:sunGlow 8s ease-in-out infinite;
}
@keyframes sunGlow{50%{opacity:.7;}}
.hero-content{position:relative; z-index:2; text-align:center; margin:0 auto; max-width:800px;}
.hero-content .eyebrow{justify-content:center; margin-bottom:22px;}
.hero h1{
  font-size:clamp(52px,9vw,108px);
  letter-spacing:-.01em;
}
.hero .subtitle{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px,2.4vw,26px);
  color:var(--qori-l);
  margin-top:14px;
}
.hero .promise{
  margin:34px auto 0;
  max-width:560px;
  font-size:16px;
  line-height:1.65;
  color:rgba(251,246,234,.82);
}
.hero-actions{
  margin-top:42px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.hero-scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(251,246,234,.55);
}
.hero-scroll .line{width:1px; height:36px; background:linear-gradient(to bottom, rgba(251,246,234,.6), transparent); animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

@media (max-width:980px){
  .hero{padding-top:76px;}
}
@media (max-width:680px){
  .hero-actions{flex-direction:column; width:100%; padding:0 20px;}
  .hero-actions .btn{width:100%; justify-content:center;}
}

/* ============================================================
   Sección genérica
   ============================================================ */
section{position:relative; padding:110px 0;}
.section-head{max-width:680px; margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{font-size:clamp(32px,4.4vw,50px); margin-bottom:16px;}
.section-head p{font-size:17px; line-height:1.65; color:var(--ink-soft);}
.on-dark .section-head p{color:rgba(251,246,234,.75);}

.band-dark{background:var(--night); color:var(--cloud);}
.band-paper{background:var(--paper);}
.band-cloud{background:var(--cloud);}

/* ============================================================
   PRESENTACIÓN CORTA
   ============================================================ */
.intro-block{padding:96px 0 60px;}
.intro-block .wrap{max-width:840px; text-align:center;}
.intro-block p{
  font-family:var(--f-display);
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.4;
  color:var(--ink);
}
.intro-block strong{color:var(--kantu); font-weight:600;}

/* ============================================================
   LOS 5 ESPACIOS
   ============================================================ */
.spaces-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.space-card{
  background:var(--cloud);
  padding:32px 22px 28px;
  min-height:280px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .25s ease;
}
.space-card:hover{background:var(--paper-2);}
.space-card .num{font-family:var(--f-mono); font-size:12px; color:var(--ink-soft);}
.space-card .icon{width:38px;height:38px;}
.space-card h3{font-size:19px; margin-top:auto;}
.space-card p{font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.space-card.c-wellbeing .icon{color:var(--wayra);}
.space-card.c-mental .icon{color:var(--wayra);}
.space-card.c-learning .icon{color:var(--qori);}
.space-card.c-lab .icon{color:var(--qomer);}
.space-card.c-experiences .icon{color:var(--kantu);}

@media (max-width:980px){
  .spaces-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .spaces-grid{grid-template-columns:1fr;}
}

/* ============================================================
   PODCAST
   ============================================================ */
.podcast{
  display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center;
}
.podcast-art{
  aspect-ratio:1/1; border-radius:50%;
  background:conic-gradient(from 180deg, var(--qori), var(--kantu), var(--qomer), var(--wayra), var(--qori));
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.podcast-art::before{
  content:''; position:absolute; inset:14%; border-radius:50%;
  background:var(--night);
}
.podcast-art .play{
  position:relative; z-index:1;
  width:64px;height:64px; border-radius:50%;
  background:var(--cloud);
  display:flex; align-items:center; justify-content:center;
}
.podcast-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.tag{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.03em;
  padding:8px 14px; border:1px solid var(--line-dark); border-radius:30px;
  color:rgba(251,246,234,.85);
}
@media (max-width:840px){
  .podcast{grid-template-columns:1fr; gap:36px;}
  .podcast-art{max-width:220px; margin:0 auto;}
}

/* ============================================================
   MENSAJE ALEATORIO
   ============================================================ */
.message-band{
  padding:80px 0;
  text-align:center;
  position:relative;
}
.message-card{
  max-width:680px; margin:0 auto;
  padding:44px 40px;
  border:1px solid var(--line);
  background:var(--cloud);
  position:relative;
}
.message-card::before,.message-card::after{
  content:''; position:absolute; width:10px; height:10px;
  border:1.5px solid var(--kantu); top:-6px;
}
.message-card::before{left:-6px;}
.message-card::after{right:-6px;}
#daily-message{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(20px,3vw,28px); line-height:1.4; color:var(--ink);
  min-height:2.8em;
}
.message-refresh{
  margin-top:22px; background:none; border:none; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:8px;
}
.message-refresh:hover{color:var(--kantu);}

/* ============================================================
   ÚNETE CTA BAND
   ============================================================ */
.join-band{
  background:var(--kantu);
  color:var(--cloud);
  text-align:center;
  padding:90px 0;
}
.join-band h2{font-size:clamp(30px,4vw,44px); max-width:680px; margin:0 auto 18px;}
.join-band p{max-width:560px; margin:0 auto; font-size:16px; line-height:1.6; opacity:.92;}
.join-actions{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}
.join-band .btn-outline{border-color:rgba(255,255,255,.7); color:#fff;}
.join-band .btn-outline:hover{background:#fff; color:var(--kantu);}

/* ============================================================
   EXPERIENCIAS
   ============================================================ */
.exp-cards{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.exp-card{
  background:var(--cloud);
  border:1px solid var(--line);
  padding:40px 34px;
  display:flex; flex-direction:column; gap:18px;
}
.exp-card .tagline{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--kantu);}
.exp-card h3{font-size:26px;}
.exp-card p{font-size:15px; line-height:1.6; color:var(--ink-soft);}
.exp-card .btn{align-self:flex-start; margin-top:auto;}
.ceques-steps{display:flex; flex-direction:column; gap:10px; margin:6px 0 4px;}
.ceques-steps li{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.ceques-steps .dot{width:6px;height:6px; border-radius:50%; background:var(--kantu); margin-top:7px; flex-shrink:0;}
@media (max-width:840px){.exp-cards{grid-template-columns:1fr;}}

/* ============================================================
   LEARNING LAB
   ============================================================ */
.ll-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.ll-meta{display:flex; gap:28px; margin:26px 0; flex-wrap:wrap;}
.ll-meta div{font-size:14px;}
.ll-meta .k{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;}
.topic-tags{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 28px;}
.topic-tags span{
  font-size:12.5px; padding:7px 12px; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft);
}
.contrib-cards{display:flex; flex-direction:column; gap:14px;}
.contrib-card{
  border:1px solid var(--line); background:var(--cloud); padding:20px 22px;
  display:flex; gap:16px; align-items:flex-start;
}
.contrib-card .mark{
  font-family:var(--f-mono); font-size:11px; color:var(--cloud); background:var(--qomer);
  padding:3px 8px; border-radius:2px; flex-shrink:0; margin-top:2px;
}
.contrib-card h4{font-size:15.5px; margin-bottom:4px;}
.contrib-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
@media (max-width:900px){.ll-grid{grid-template-columns:1fr;}}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-card{
  background:var(--cloud);
  border:1px solid var(--line);
  padding:44px;
  max-width:640px;
}
.form-card.on-dark-form{background:var(--night-soft); border-color:var(--line-dark);}
.form-card .form-title{font-size:22px; margin-bottom:8px;}
.form-card .form-sub{font-size:14px; color:var(--ink-soft); line-height:1.55; margin-bottom:28px;}
.on-dark-form .form-sub{color:rgba(251,246,234,.65);}
.f-row{margin-bottom:20px;}
.f-row label{
  display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:8px; color:var(--ink-soft);
}
.on-dark-form .f-row label{color:rgba(251,246,234,.7);}
.f-row input[type=text], .f-row input[type=email], .f-row input[type=tel], .f-row textarea, .f-row select{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--paper);
  font-family:var(--f-body); font-size:14.5px; color:var(--ink); border-radius:2px;
}
.on-dark-form input, .on-dark-form textarea, .on-dark-form select{
  background:var(--night); border-color:var(--line-dark); color:var(--cloud);
}
.f-row textarea{resize:vertical; min-height:84px;}
.f-row input:focus, .f-row textarea:focus, .f-row select:focus{border-color:var(--kantu);}
.f-two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.f-radio-group, .f-check-group{display:flex; flex-direction:column; gap:10px;}
.f-radio, .f-check{
  display:flex; gap:12px; align-items:flex-start; font-size:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:2px; cursor:pointer;
}
.on-dark-form .f-radio, .on-dark-form .f-check{border-color:var(--line-dark);}
.f-radio input, .f-check input{margin-top:3px;}
.f-radio .label-main{font-weight:600; display:block;}
.f-radio .label-sub{color:var(--ink-soft); font-size:12.5px;}
.on-dark-form .f-radio .label-sub{color:rgba(251,246,234,.6);}
.form-note{font-size:12px; color:var(--ink-soft); margin-top:6px;}
.on-dark-form .form-note{color:rgba(251,246,234,.55);}
.form-success{
  display:none; padding:16px 18px; background:rgba(70,101,74,.12); border:1px solid var(--qomer);
  color:var(--qomer); font-size:13.5px; margin-top:18px; border-radius:2px;
}
.form-error{
  display:none; padding:16px 18px; background:rgba(160,71,43,.1); border:1px solid var(--kantu);
  color:var(--kantu); font-size:13.5px; margin-top:18px; border-radius:2px;
}
@media (max-width:520px){.f-two{grid-template-columns:1fr;}}

/* ============================================================
   BIENESTAR & SALUD MENTAL
   ============================================================ */
.campus-map{
  border:1px solid var(--line-dark);
  background:linear-gradient(180deg, var(--night) 0%, #2A3650 100%);
  padding:48px 40px;
  position:relative;
  overflow:hidden;
}
.campus-sites{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  margin-top:10px;
}
.site-cell{
  background:var(--night-soft); padding:22px 20px; min-height:120px;
  display:flex; flex-direction:column; justify-content:space-between; gap:10px;
}
.site-cell .site-name{font-family:var(--f-display); font-size:17px;}
.site-cell .site-practice{font-size:12.5px; color:rgba(251,246,234,.62);}
.live-card{
  margin-top:28px; padding:22px 24px; background:var(--cloud); color:var(--ink);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.live-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--kantu);
}
.live-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--kantu); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.35;}}
.live-card .details p{font-size:14px; line-height:1.5; margin-top:4px;}
@media (max-width:840px){.campus-sites{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.campus-sites{grid-template-columns:1fr;}}

.mh-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:70px;}
.mh-list{display:flex; flex-direction:column; gap:0; margin-top:24px;}
.mh-list li{padding:16px 0; border-bottom:1px solid var(--line-dark); display:flex; gap:14px; font-size:14.5px; color:rgba(251,246,234,.85);}
.purpose-box{margin-top:28px; padding:24px; border-left:2px solid var(--qori); background:rgba(206,154,62,.07);}
.purpose-box h4{font-size:16px; margin-bottom:8px; color:var(--qori-l);}
.purpose-box p{font-size:14px; line-height:1.6; color:rgba(251,246,234,.78);}
@media (max-width:900px){.mh-grid{grid-template-columns:1fr;}}

/* ============================================================
   ALLIN LAB — Metodología en 7 pasos (la Ruta)
   ============================================================ */
.methodology{position:relative; margin-top:70px;}
.method-step{
  display:grid; grid-template-columns:64px 1fr; gap:28px;
  padding-bottom:52px; position:relative;
}
.method-step:last-child{padding-bottom:0;}
.method-step .step-line{
  position:absolute; left:31px; top:56px; bottom:0; width:1px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 11px);
}
.method-step:last-child .step-line{display:none;}
.step-marker{
  width:64px;height:64px; border-radius:50%;
  background:var(--cloud); border:1.5px solid var(--qomer);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:22px; color:var(--qomer);
  flex-shrink:0; position:relative; z-index:1;
}
.method-body h3{font-size:22px; margin-bottom:8px;}
.method-body p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:560px;}
.method-support{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.method-support span{
  font-family:var(--f-mono); font-size:11.5px; padding:6px 12px; border-radius:20px;
  border:1px solid var(--qomer); color:var(--qomer);
}
.safe-space-box{
  margin-top:8px; background:var(--cloud); border:1px solid var(--qomer);
  padding:26px 28px; display:flex; gap:18px; align-items:flex-start;
}
.safe-space-box h4{font-size:16px; margin-bottom:6px;}
.safe-space-box p{font-size:14px; line-height:1.6; color:var(--ink-soft);}
.safe-space-box a{color:var(--qomer); font-weight:600; border-bottom:1px solid var(--qomer);}

/* Comunidad / aliados / proyectos */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px;}
.project-cell{background:var(--cloud); padding:30px 28px;}
.project-cell h4{font-size:17px; margin-bottom:10px;}
.project-cell p{font-size:14px; line-height:1.6; color:var(--ink-soft);}
.project-cell a{margin-top:12px; display:inline-block; font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--kantu); border-bottom:1px solid var(--kantu);}
@media (max-width:760px){.projects-grid{grid-template-columns:1fr;}}

.finding-quote{
  margin-top:60px; padding:44px 48px; background:var(--night); color:var(--cloud);
  font-family:var(--f-display); font-style:italic; font-size:clamp(18px,2.4vw,24px); line-height:1.55;
}
.finding-quote .attrib{margin-top:18px; font-family:var(--f-mono); font-style:normal; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--qori-l);}

/* ============================================================
   IMPACTO
   ============================================================ */
.impact-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:20px;}
.impact-cell{background:var(--night-soft); padding:34px 28px;}
.impact-cell h4{font-family:var(--f-display); font-size:18px; margin-bottom:10px; color:var(--qori-l);}
.impact-cell p{font-size:13.5px; line-height:1.6; color:rgba(251,246,234,.75);}
@media (max-width:760px){.impact-stats{grid-template-columns:1fr;}}

/* ============================================================
   POR QUÉ ALLIN — manifiesto
   ============================================================ */
.manifesto{background:var(--paper-2); padding:130px 0;}
.manifesto .wrap{max-width:760px;}
.manifesto .lead{font-family:var(--f-display); font-size:clamp(24px,3.6vw,36px); line-height:1.35; margin-bottom:10px;}
.manifesto .list-projects{margin:26px 0; font-size:15px; color:var(--ink-soft);}
.manifesto .list-projects span{display:inline-block; margin-right:6px;}
.manifesto .question{
  font-family:var(--f-display); font-style:italic; font-size:clamp(20px,2.8vw,28px); line-height:1.45;
  margin:34px 0; color:var(--kantu);
}
.manifesto p{font-size:16px; line-height:1.7; color:var(--ink); margin-bottom:18px;}
.flow-diagram{
  display:flex; align-items:center; gap:0; margin:44px 0; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.flow-diagram .node{padding:12px 20px; border:1.5px solid var(--ink); background:var(--cloud);}
.flow-diagram .arrow{padding:0 14px; color:var(--kantu); font-size:16px;}
.manifesto .final-quote{
  margin-top:50px; padding-top:40px; border-top:1px solid var(--line);
  font-family:var(--f-display); font-size:clamp(20px,3vw,28px); line-height:1.45;
}
.manifesto .founder{margin-top:22px; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}

/* ============================================================
   FOOTER — footer_box (4 columnas) + logos aliados + copyright
   (mismo patrón del tema base, con la identidad Allin Route)
   ============================================================ */
.footer_box{background:var(--night); color:var(--cloud); padding-top:90px;}
.footer_box .wrap{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:60px;
}
.footer__brand .logo{font-size:24px; margin-bottom:14px;}
.footer__brand .tagline{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--qori-l); margin-bottom:20px;}
.footer__brand p{font-size:14px; line-height:1.6; color:rgba(251,246,234,.7); max-width:280px;}
.footer_box h4{font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,246,234,.5); margin-bottom:18px;}
.footer_box .footer-col a{display:block; font-size:14.5px; padding:6px 0; color:rgba(251,246,234,.85); transition:color .2s;}
.footer_box .footer-col a:hover{color:var(--qori-l);}

/* Franja de logos aliados */
.logos_mypes_digitales{background:#EAEAEA; padding:28px 0;}
.logos_mypes_digitales .wrap{display:flex; align-items:center; justify-content:center; gap:5rem; flex-wrap:wrap;}
.logos_mypes_digitales img{
  max-height:38px; width:auto;
  filter:grayscale(100%) brightness(.9) contrast(1.1); opacity:.65;
  transition:filter .3s ease, opacity .3s ease;
}
.logos_mypes_digitales img:hover{filter:grayscale(0%) brightness(1) contrast(1); opacity:1;}

/* Barra de copyright */
#Copyright{background:var(--kantu); text-align:center; padding:16px 0;}
#Copyright p{color:#fff; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em; margin:0;}

@media (max-width:900px){
  .footer_box .wrap{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width:560px){
  .footer_box .wrap{grid-template-columns:1fr;}
  .logos_mypes_digitales .wrap{gap:32px;}
}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}