:root{
  --green:#0a8f3c;
  --yellow:#ffd85a;
  --text:#1b1b1b;
  --muted:#6b6b6b;
  --line:#d8d8d8;
  --card:#ffffff;
  --bg:#ffffff;
  --shadow:0 12px 30px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
a{color:inherit}

.page{min-height:100vh}

.split{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
}

.leftArt{
  position:relative;
  background:#fff;
  overflow:hidden;
  border-right: 6px solid #111;
}

.logosTop{
  position:absolute; top:28px; left:0; right:0; height:52px;
  background:transparent;
}

.artTitle{
  position:absolute; top:120px; left:70px; right:40px;
}
.artTitle .t1{font-weight:800; color:var(--green); letter-spacing:.5px; font-size:44px; line-height:1}
.artTitle .t2{font-weight:900; color:var(--green); font-size:72px; line-height:1}
.artTitle .t3{margin-top:10px; font-weight:600; color:#222; font-size:24px}
.binoculars{
  position:absolute; left:60px; bottom:80px; width:520px; height:520px;
  background:transparent;
}
.ribbons{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  background:transparent;
}

.rightForm{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 60px 70px;
  background: #f2f2f2;
}
.rightForm h1{margin:0 0 12px; color:var(--green); font-size:40px}
.rightForm .sub{margin:0 0 24px; color:var(--muted); font-size:18px}

.form{display:flex; flex-direction:column; gap:16px; max-width:420px;}
.field span{display:block; color:var(--muted); font-weight:600; margin-bottom:8px}
.field input,.field select{
  width:100%;
  border:none;
  border-bottom:2px solid #8b8b8b;
  background:transparent;
  padding: 10px 6px;
  font-size:18px;
  outline:none;
}
.field input:focus,.field select:focus{border-bottom-color:var(--green)}

.btn{
  border:none;
  cursor:pointer;
  font-weight:800;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.btn.primary{
     background: var(--yellow);
    color: var(--green);
    border: 0px solid #111;
    font-size: 25px;
    font-weight: bolder;
}
.links{margin-top:-6px}
.link{color:var(--green); text-decoration:underline; font-weight:700}
.link.strong{font-weight:900}

.footerLinks{
  margin-top: 22px;
  display:flex; gap:10px; align-items:center;
  color: #666;
}

.alert{
  background:#ffe3e3;
  border:1px solid #ffb3b3;
  color:#7a0b0b;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:14px;
  max-width:420px;
}
.ok{
  background:#e6ffed;
  border:1px solid #b8f5c8;
  color:#0b5a22;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:14px;
}

.secBox{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
}
.secTitle{
  font-weight:900;
  color:#222;
  margin-bottom:10px;
}

.single{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px;
  background:#f2f2f2;
}
.card{
  width:min(560px, 100%);
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:26px;
}
.card h1{margin:0 0 10px; color:var(--green); font-size:32px}
.actions{margin-top:14px}

/* Modal */
.modalOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px;
  z-index:9999;
}
.modal{
  width:min(560px, 100%);
  background:#fff;
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:22px 22px 18px;
  position:relative;
  text-align:center;
}
.modalClose{
  position:absolute; right:14px; top:10px;
  border:none; background:transparent;
  font-size:28px; cursor:pointer; color:#777;
}
.modalIcon{height:90px; background:transparent; margin-top:8px}
.modal h2{margin:10px 0 10px; color:var(--green); font-size:40px; line-height:1.15}
.modalText{margin:0 0 12px; color:#222; font-size:16px}
.modalList{
  text-align:left;
  margin: 0 auto 14px;
  width:min(460px, 100%);
  color:#222;
}
.modalList li{margin:8px 0}

/* Responsive (móvil = se parece a tus pantallas) */
@media (max-width: 980px){
  .split{grid-template-columns:1fr}
  .leftArt{display:none}
  .rightForm{
    min-height:100vh;
    padding: 50px 22px;
    background:##f6f8f7;
  }
  .rightForm h1{font-size:44px; text-align:center}
  .rightForm .sub{text-align:center}
  .form{max-width:520px; margin:0 auto}
}
/* ===== LOGIN IMAGEN FULL ===== */

/* ===== LOGIN IMAGEN FULL (DESKTOP) ===== */
/* ===== LOGIN IMAGEN FULL (DESKTOP) ===== */
.loginArt{
  background-image: url('/assets/img/imagen1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* ===== MÓVIL (PORTRAIT y general bajo 980px): 1 columna + imagen móvil arriba ===== */
@media (max-width: 980px){
  .split{
    grid-template-columns: 1fr;
  }

  .leftArt{
    display:block;
    border-right:none;
  }

  .loginArt{
    background-image: url('/assets/img/imagen1_movil.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 45vh;
  }

  .rightForm{
    min-height: auto;
    padding: 36px 22px;
  }
}

/* ===== MÓVIL HORIZONTAL (LANDSCAPE): 2 columnas para que se vea correcto ===== */
@media (max-width: 980px) and (orientation: landscape){
  .split{
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
  }

  .loginArt{
    /* En horizontal se ve mejor la imagen grande */
    background-image: url('/assets/img/imagen1.jpg');
    min-height: 100vh;
  }

  .rightForm{
    padding: 24px 28px;
    justify-content: center;
  }

  .form{
    max-width: 380px;
  }
}
/* ===== AJUSTE LOGIN PC PARA CALCAR MOCK ===== */
@media (min-width: 981px){
  /* Columna derecha: centrado similar al diseño */
  .rightForm{
    background: transparent;
    align-items: center;         /* centra el contenido horizontal */
    padding: 0 70px;             /* menos “aire” vertical */
  }

  /* Bloque del form */
  .rightForm h1{
    width: 420px;
    text-align: left;
    font-size: 34px;
    margin: 0 0 18px;
  }

  .form{
    width: 420px;
    gap: 18px;
  }

  /* Labels: pequeños, cercanos al underline, estilo mock */
  .field span{
    font-size: 12px;
    font-weight: 600;
    color: #6f6f6f;
    margin-bottom: 6px;
  }

  /* Inputs: underline más fino, tipografía un poco más grande */
  .field input, .field select{
    border-bottom: 2px solid #8b8b8b;
    padding: 10px 6px 8px;
    font-size: 16px;
  }

  /* Botón: más angosto y centrado */
  .btn.primary{
    width: 320px;
    align-self: center;
    margin-top: 10px;
  }

  /* Links centrados con el botón */
  .links{
    width: 280px;
    align-self: center;
    text-align: center;
    margin-top: -6px;
  }

  .footerLinks{
    width: 310px;
    align-self: center;
    justify-content: center;
    text-align: center;
    margin-top: 34px;
  }

  /* Ajuste de tamaño de links para calcar mock */
  .link{
    font-size: 25px;
  }
  .footerLinks span{
    font-size: 18px;
  }
}
/* ===== FLOATING LABEL LOGIN ===== */

.field.floating{
  position: relative;
  width: 100%;
}

.field.floating input{
  width: 100%;
  border: none;
  border-bottom: 2px solid #8b8b8b;
  background: transparent;
  padding: 18px 6px 8px;
  font-size: 18px;
  outline: none;
}

.field.floating label{
  position: absolute;
  left: 6px;
  top: 18px;
  font-size: 18px;
  color: #6f6f6f;
  font-weight: 600;
  pointer-events: none;
  transition: all .2s ease;
}

/* Al hacer focus o cuando hay texto */
.field.floating input:focus + label,
.field.floating input:not(:placeholder-shown) + label{
  opacity: 0;
  transform: translateY(-6px);
}

/* Focus visual */
.field.floating input:focus{
  border-bottom-color: var(--green);
}

/* ===== AJUSTES LOGIN MÓVIL (PANTALLA 1) ===== */
@media (max-width: 980px){
  body{
    background-color: #f6f8f7;
  }
  /* 1) Subir y centrar el bloque */
  .rightForm{
    padding: 22px 18px;     /* menos aire */
    align-items: center;    /* centra todo */
    justify-content: flex-start;
  }

  .rightForm h1{
    width: 100%;
    text-align: center;
    margin: 8px 0 14px;     /* sube el título */
    font-size: 44px;        /* similar a la referencia */
  }

  /* El form centrado y con ancho controlado */
  .form{
    width: min(520px, 100%);
    margin: 0 auto;
    gap: 18px;
  }

  /* 2) Inputs: evitar salto de línea del label (ellipsis) */
  .field.floating label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 12px);
    display: block;
    text-align: center;     /* la referencia lo ve centrado */
    left: 50%;
    transform: translateX(-50%);
  }

  .field.floating input{
    text-align: center;     /* la referencia alinea al centro */
  }

  /* 3) Botón: sin borde negro y centrado */
  .btn.primary{
    border: none !important;
    width: 280px;
    align-self: center;
  }

  /* 4) Olvidaste: centrado y sin negrita */
  .links{
    width: 280px;
    align-self: center;
    text-align: center;
    margin-top: -6px;
  }

  .links .link{
    font-weight: 400 !important;  /* quita negrita */
    text-decoration: underline;
  }

  /* Footer centrado como referencia */
  .footerLinks{
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 24px;
  }

  .footerLinks span{
    font-weight: 600;
    color: #777;
  }
}
/* ===== FORGOT (OLVIDASTE) ESTILO CONSISTENTE ===== */
.forgotPage{
  background: var(--bg);
}

.forgotCard{
  background: transparent;
  box-shadow: none;
  padding: 10px 0 0;
}

.forgotCard h1{
  color: var(--green);
  text-align: left;
  font-size: 44px;
  margin: 10px 0 18px;
}

/* Card contenedor simple */
.single .card{
  border-radius: 0;
}

/* Botón igual a pantalla 1 en móvil: sin borde negro */
@media (max-width: 980px){
  .forgotCard .btn.primary{
    border: none !important;
  }
}
/* ===== OLVIDASTE - LANDSCAPE: CENTRADO REAL ===== */
@media (max-width: 980px) and (orientation: landscape){

  /* 1) El section ocupa todo y alinea arriba */
  .forgotPage.single{
    display: flex;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 24px 0 !important;
  }

  /* 2) Card centrada horizontalmente */
  .forgotCard{
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: center; /* CLAVE */
  }

  /* 3) Título centrado respecto a viewport */
  .forgotCard h1{
    width: 100%;
    text-align: center;
    font-size: 34px;
    margin: 10px 0 14px;
  }

  /* 4) Form centrado REAL */
  .forgotCard .form{
    width: 420px;
    max-width: 92vw;
    margin: 0 auto !important;

    display: flex;
    flex-direction: column;
    align-items: center; /* CLAVE */
    gap: 14px;
  }

  /* 5) Inputs y labels alineados */
  .forgotCard .field.floating{
    width: 100%;
  }

  .forgotCard .field.floating input{
    width: 100%;
    text-align: center;
    padding: 14px 6px 8px;
    font-size: 16px;
  }

  .forgotCard .field.floating label{
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 12px);
    text-align: center;
    top: 14px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 6) Botón y link alineados al centro */
  .forgotCard .btn.primary,
  .forgotCard .links{
    width: 280px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
/* ===== REGISTRO (PANTALLA 2) ===== */

/* Desktop: imagen completa a la izquierda */
.registerArt{
  background-image: url('/assets/img/imagen1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Icono superior (lo reemplazas por imagen real si quieres) */
.registerTopIcon{
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  margin: 0 auto 10px;
  background-image: url("../img/profile.png");
  background-size: contain;
}

/* Mismo comportamiento de PC que login (ancho y centrado) */
@media (min-width: 981px){
  .registerForm{
    align-items: center;
    justify-content: center;
  }

  .registerForm h1{
    width: 420px;
    text-align: center;
    font-size: 34px;
    margin: 0 0 6px;
  }

  .registerForm .sub{
    width: 420px;
    text-align: center;
    margin: 0 0 18px;
  }

  .registerFormFields{
    width: 420px;
  }

  .registerBottomArt{
    display: none;
  }

  /* Botón como mock (más angosto) */
  .registerForm .btn.primary{
    width: 280px;
    align-self: center;
  }
}

/* Móvil: ocultar izquierda + arte inferior antes del footer */
@media (max-width: 980px){
  .registerSplit{
    grid-template-columns: 1fr;
  }

  .registerSplit .leftArt{
    display: none !important; /* en vertical desaparece */
  }

  .registerForm{
    padding: 22px 18px;
    align-items: center;
    justify-content: flex-start;
  }

  .registerForm h1{
    width: 100%;
    text-align: center;
    font-size: 44px;
    margin: 10px 0 6px;
  }

  .registerForm .sub{
    text-align: center;
    margin: 0 0 18px;
    font-size: 18px;
  }

  /* Igual que login móvil: centrado y sin salto de label */
  .registerForm .field.floating label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 12px);
    display: block;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
  }

  .registerForm .field.floating input{
    text-align: center;
    font-size: 17px;
  }

  /* Botón sin borde negro en móvil */
  .registerForm .btn.primary{
    border: none !important;
    width: 280px;
    align-self: center;
  }

  /* Arte inferior (usa tu imagen de “líneas” / cintas) */
  .registerBottomArt{
    width: 100%;
    height: 180px;
    margin: -80px auto 0;
    background: url('/assets/img/registro_bottom.png') no-repeat center bottom / contain;
  }

  .registerForm .footerLinks{
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
  }
}
/* ===== MODAL BIENVENIDA (PANTALLA 3) ===== */

.modalWelcome{
  width: min(980px, 92vw);     /* más ancho como referencia */
  border-radius: 32px;
  padding: 26px 34px 18px;
  text-align: center;
}

/* X más grande */
.modalCloseBig{
  font-size: 38px;
  right: 18px;
  top: 14px;
  color: #666;
}

/* Espacio para imagen superior */
.welcomeTopImg{
  height: 90px;
  margin: 6px auto 8px;
  background: url('/assets/img/modal_top.png') no-repeat center / contain;
}

/* Título y texto más grandes */
.welcomeTitle{
  margin: 8px 0 10px;
  color: var(--green);
  font-size: 34px;
  line-height: 1.15;
  font-weight: unset;
}

.welcomeText{
  margin: 0 auto 10px;
  max-width: 760px;
  font-size: 23px;
  color: #222;
}

.welcomeList{
  margin: 8px auto 16px;
  max-width: 780px;
  font-size: 25px;
  color: #222;
  padding-left: 22px;
  text-align: center;          /* como tu referencia se ve centrado */
  list-style-position: inside; /* centra mejor numeración */
}

.welcomeList li{
  margin: 6px 0;
}

/* Botón centrado */
.welcomeBtn{
  width: 320px;
  border: none;                /* consistente con móvil */
  font-size: 18px;
}

/* Imagen inferior */
.welcomeBottomImg{
  height: 70px;
  margin: 12px auto 2px;
  background: url('/assets/img/modal_bottom.png') no-repeat center / contain;
}

/* Ajuste específico para horizontal (desktop/landscape amplio) */
@media (min-width: 981px){
  .modalWelcome{
    width: min(1100px, 88vw);
  }
}
/* ===== MODAL BIENVENIDA (MÓVIL) CENTRADO REAL ===== */
@media (max-width: 980px){
  .modalOverlay{
    position: fixed;
    inset: 0;
    display: block;                 /* evita que flex heredado interfiera */
    padding: 0;
    z-index: 9999;
  }

  .modalWelcome{
    position: fixed;                /* CLAVE: no depende del overlay */
    left: 37%;
    top: 37%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 32px);
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;               /* si el contenido crece */
    margin: 0;
    padding: 18px 18px 14px;
    border-radius: 28px;
  }

  /* Tipos ajustados (si ya los tenías, esto los refuerza) */
  .welcomeTitle{ font-size: 26px; }
  .welcomeText, .welcomeList{ font-size: 15px; }

  .modalCloseBig{
    font-size: 34px;
    right: 14px;
    top: 10px;
  }
}
/* ===========================
   Pantalla 5 (Mapa único) - P5
   Pegar al FINAL del styles.css
   =========================== */

.p5-wrap{
  min-height: 100vh;
  background: #fff;
}

/* TOPBAR */
.p5-topbar{
  height: 100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 48px;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  position: relative;
  z-index: 10;
  background:#fff;
}

.p5-logos img{
  height: 70px;
  width: auto;
  object-fit: contain;
  display:block;
}

.p5-salir{
  color: var(--green);
  font-weight: bold;
  text-decoration: none;
  font-size: 30px;
}

/* HEADER (nombre + progreso + pill) */
.p5-header{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 5px 40px;
  background:#fff;
  position: relative;
  z-index: 9;
}

.p5-left{ flex: 1; min-width: 320px; }
.p5-right{
  display:flex;
  align-items: center;
  gap: 18px;
}

/* Títulos (solo 1 visible según breakpoint) */
.p5-titleDesktop{
  font-size: 28px;
  font-weight: bold;
  color: var(--green);
  white-space: nowrap;
}
.p5-titleMobile{ display:none; }

.p5-name{
  font-size: 34px;
  font-weight: bold;
  color: #6b6b6b;
  margin-top: 8px;
}

.p5-progressLabel{
  font-size: 20px;
  font-weight: bold;
  color: #6b6b6b;
  margin-top: 10px;
}

.p5-progressTrack{
  margin-top: 10px;
  height: 12px;
  border-radius: 999px;
  background: #f2f2f2;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;
  width: 100%;
  max-width: 820px; /* barra larga como mock */
}

.p5-progressFill{
  height:100%;
  border-radius: 999px;
  background: var(--yellow);
}

.p5-percent{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
  color: #7a7a7a;
}

.p5-pill{
  background: #1fb85a;
  color:#fff;
  font-weight: bold;
  border-radius: 999px;
  padding: 14px 26px;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  white-space:nowrap;
  font-size: 20px;
}

/* STAGE (MAPA) */
.p5-stage{
  position: relative;
  width: 100%;
  /* ocupa lo que queda del viewport */
  height: calc(100vh - 86px - 120px);
  min-height: 520px;
  overflow: hidden;
  background:#fff;
}

.p5-mapPicture,
.p5-mapImg{
  width:100%;
  height:100%;
  display:block;
}

.p5-mapImg{
  object-fit: cover; /* se recorta levemente como en mock */
  object-fit: cover;
  opacity: 0.9;
}

/* Velo blanco suave encima del mapa para que el logo respire */
.p5-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.14);
  z-index: 2;
  pointer-events:none;
}

/* Logo inferior derecho */
.p5-brand{
  position:absolute;
  right: 60px;
  bottom: 40px;
  width: 340px;
  height: auto;
  object-fit: contain;
  z-index: 5;
  pointer-events:none;
}

/* NODOS (hotspots encima del mapa) */
.p5-node{
  position:absolute;
  display:block;
  z-index: 6;
  text-decoration:none;
  transform: translate(-50%, -50%);
}

.p5-nodeImg{
  width: 190px;
  height: auto;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.25));
}

.p5-check{
  position:absolute;
  right: 18px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  z-index: 7;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.25));
}

/* POSICIONES DESKTOP (order 1..6) */
/* Ajustables: left/top en % según tu gusto */
.p5-node-1{ left: 25%; top: 75%; }  /* Transformación */
.p5-node-2{ left: 40%; top: 65%; }  /* Visión */
.p5-node-3{ left: 60%; top: 70%; }  /* Excelencia */
.p5-node-4{ left: 65%; top: 40%; }  /* Gobierno */
.p5-node-5{ left: 80%; top: 45%; }  /* Nuestras metas */
.p5-node-6{ left: 86%; top: 15%; }  /* Nuestra gente */


/* ===========================
   MÓVIL / TABLET
   =========================== */
@media (max-width: 980px){
  .p5-topbar{
    padding: 0 14px;
  }
  .p5-logos img{
    height: 38px;
  }
  .p5-percent{
    font-size: 15px;
    font-weight: normal;
  }

  .p5-header{
    padding: 12px 14px 10px;
    gap: 12px;
    align-items: flex-start;
  }

  /* En móvil el título va a la izquierda arriba (como Mesa 13) */
  .p5-titleDesktop{ display:none; }
  .p5-titleMobile{
    display:block;
    font-size: 16px;
    font-weight: bold;
    color: var(--green);
    margin-bottom: 6px;
  }

  .p5-right{
    align-items:flex-start;
    justify-content:flex-end;
    min-width: 140px;
    margin-left: -145px;
  }

  .p5-name{
    font-size: 15px;
    margin-top: 0;
  }

  .p5-progressLabel{
    font-size: 12px;
  }

  .p5-progressTrack{
    max-width: none;
  }

  .p5-pill{
    font-size: 16px;
    padding: 10px 16px;
    margin-top: 22px; /* baja el pill como en mock */
  }

  /* Stage más alto en móvil */
  .p5-stage{
    height: calc(100vh - 86px - 85px);
    min-height: 640px;
  }

  .p5-brand{
    right: 18px;
    bottom: 120px;
    width: 180px;
  }

  .p5-nodeImg{
    width: 85px;
  }
  .p5-salir {
      font-size: 20px;
  }

  .p5-check{
    width: 44px;
    height: 44px;
    right: 16px;
    bottom: 20px;
  }

  /* POSICIONES MÓVIL (order 1..6) */
  .p5-node-1{ left: 20%; top: 75%; }
  .p5-node-2{ left: 23%; top: 60%; }
  .p5-node-3{ left: 50%; top: 55%; }
  .p5-node-4{ left: 60%; top: 40%; }
  .p5-node-5{ left: 80%; top: 25%; }
  .p5-node-6{ left: 82%; top: 10%; }

}

/* Muy pequeño: reduce nodos para que no tapen todo */
@media (max-width: 420px){
}
/* =========================
   Mundo (Video + Preguntas)
   ========================= */

.w6-page{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  position: relative;
}

.w6-header{
  background:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  position: relative;
  z-index: 5;
}

.w6-headerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 22px 10px;
}

.w6-logos{ height: 60px; width:auto; display:block; }

.w6-worldLabel{
    font-weight: bold;
    color: #5b5b5b;
    font-size: 25px;
    line-height: 1.15;
    text-align: right;
}

.w6-headerInfo{
  display:flex;
  gap: 18px;
  padding: 0 22px 16px;
  align-items:flex-end;
}

.w6-leftInfo{ min-width: 1120px; }

.w6-userName{
    font-weight: normal;
    color: #333;
    font-size: 25px;
}

.w6-progressLabel{
    margin-top: 10px;
    font-weight: bold;
    color: #555;
    font-size: 20px;
}


.w6-progressBar{
  margin-top: 8px;
  height: 20px;
  border-radius: 999px;
  background: #e6e6e6;
  overflow:hidden;
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, .3);
  margin-bottom: 10px;
}

.w6-progressFill{
  height: 100%;
  background: var(--yellow);
  border-radius: 999px;
}

.w6-pill{
    margin-left: auto;
    background: #22b455;
    color: #fff;
    border-radius: 999px;
    padding: 20px 40px;
    font-weight: bold;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .22);
    white-space: nowrap;
    font-size: 25px;
}

.w6-body{
  flex: 1;
  padding: 22px 22px 0;
  background: #f7f7f7;
  padding-bottom: 120px; /* espacio para cenefa móvil */
}

.w6-title{
  margin: 18px 0 18px;
  text-align:center;
  color: var(--green);
  font-weight: 1000;
  letter-spacing: .2px;
  font-size: clamp(33px, 4vw, 40px);
}

.w6-grid{
  display:grid;
  gap: 22px;
  align-items:start;
}

.w6-videoCard{ background: transparent; }

.w6-videoFrame{
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

#yt-player, #yt-player iframe{ width:100%; height:100%; display:block; }

.w6-videoHint{
  margin-top: 14px;
  color:#777;
  font-weight: 700;
  text-align:center;
}

/* Continuar: oculto por defecto (no aparece en desktop/landscape) */
.w6-continueBtn{
  display:none;
  margin: 18px auto 0;
  min-width: 240px;
  padding: 16px 44px;
  font-size: 20px;
  border-radius: 999px;
}

/* Ver el video: oculto por defecto (no aparece en desktop/landscape) */
.w6-backVideoBtn{
  display:none;
  margin: 14px auto 0;
  min-width: 240px;
  padding: 16px 44px;
  font-size: 20px;
  border-radius: 999px;
}

.w6-qaCard{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
  padding: 18px 18px 22px;
      text-align: center;
}

.w6-qaHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.w6-qaTitle{
  font-weight: 1000;
  color:#2e2e2e;
}

.w6-qaMeta{
  color:#777;
  font-weight: 800;
}

.w6-question{
 margin: 12px 0 14px;
    font-weight: normal;
    color: #2e2e2e;
    font-size: 30px;
    text-align: center;
}

.w6-options{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.w6-options button{
    width: 100%;
    border-radius: 999px;
    padding: 20px 50px;
    background: #fff;
    border: 2px solid #8b8b8b;
    font-weight: normal;
    color: #666;
    font-size: 25px;
}

.w6-feedback{
  margin-top: 14px;
  text-align:center;
 font-weight: normal;
    font-size: 30px;
}

.w6-backBottom{
  display:none; /* solo desktop */
  margin: 18px 0 0;
  color: var(--green);
  text-decoration:none;

        margin-top: 220px;
        margin-left: 45px;
        font-size: 35px;
        font-weight: bold;
}

/* Brand inferior (logoMapa) */
.w6-brand{
  position:absolute;
  left: 22px;
  bottom: 140px; /* encima de la cenefa */
  width: 190px;
  height:auto;
  z-index: 2;
}

/* Cenefa inferior */
.w6-cenefa{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size: cover;
  height: 120px; /* móvil */
  background-image: url('/assets/img/cenefaPreguntasMovil.png');
  z-index: 1;
}

/* Desktop */
@media (min-width: 992px){
  .w6-grid{ grid-template-columns: 1.15fr 0.85fr; }
  .w6-body{ padding: 60px 28px 0; padding-bottom: 170px; }
  .w6-cenefa{
    height: 280px;
    background-image: url('/assets/img/cenefaPregunasPC.png');
  }
  .w6-backBottom{ display:inline-block; }
}

/* Móvil: Opción B (misma URL) alternando video/preguntas + header como mock */
@media (max-width: 980px){
  .w6-body{
    background:#fff;
    padding: 14px 14px 0;
    padding-bottom: 140px; /* aire para la cenefa móvil */
  }

  .w6-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Logos centrados + título debajo (pequeño) */
  .w6-headerTop{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 8px;
  }

  .w6-logos{
    height: 40px;
    margin: 0 auto;
  }

  .w6-worldLabel{
  font-size: 18px;
        line-height: 1.1;
        align-self: flex-start;
  }

  /* Nombre + pill arriba / barra abajo */
  .w6-headerInfo{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name pill"
      "label pill"
      "bar  bar";
    gap: 6px 12px;
    padding: 0 14px 12px;
    align-items: start;
  }

  /* Aplana .w6-leftInfo para que sus hijos vivan en el grid (solo móvil) */
  .w6-leftInfo{
    display: contents;
    min-width: 0;
  }

  .w6-userName{
    grid-area: name;
    font-size: 15px;
  }

  .w6-progressLabel{
    grid-area: label;
    margin-top: 0px;
        font-size: 12px;
  }

  .w6-progressBar{
    grid-area: bar;
    margin-top: 0;
    height: 16px;
  }

  .w6-pill{
    grid-area: pill;
    margin: 0;
    align-self: start;
    justify-self: end;
    padding: 9px 20px;
        font-size: 11px;
  }
  .w6-title {
    margin: 18px 0 18px;
    text-align: center;
    color: var(--green);
    font-weight: bold;
    letter-spacing: .2px;
    font-size: clamp(24px, 4vw, 40px);
}
.w6-options button {
    width: 100%;
    border-radius: 999px;
    padding: 10px 25px;
    background: #fff;
    border: 2px solid #8b8b8b;
    font-weight: normal;
    color: #666;
    font-size: 15px;
  }
  .btn.primary {
    font-size: 17px;
  }
  .w6-feedback {
    font-size: 20px;
  }
  .w6-backBottom {
    display: none;
    }

  /* Opción B: alterna secciones en vertical (solo cuando JS setea data-mobile-view) */
  .w6-page[data-mobile-view="video"] #qa-card{ display:none; }
  .w6-page[data-mobile-view="qa"] #video-card{ display:none; }

  .w6-question{ font-size: 18px; }
}

/* Botones SOLO en portrait */
@media (max-width: 980px) and (orientation: portrait){
  .w6-continueBtn{ display:block; }
  .w6-page[data-mobile-view="qa"] .w6-backVideoBtn{ display:block; }
}

/* Muy pequeño */
@media (max-width: 520px){
  .w6-brand{ width: 150px; left: 16px; bottom: 140px; }
}