/* ═══════════════════════════════════════════════
   PEKEPOLIS · Área de clientes
   Sistema de marca: Baloo 2 + Nunito · morado / naranja / azul
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --amarillo:#F7C948; --naranja:#F4722B; --rojo:#E8394A; --rosa:#F06292;
  --verde:#5BAD6F;    --azul:#4A90D9;    --azul-oscuro:#3B5BA5;
  --morado:#8E44C4;   --morado-osc:#6A2E9C; --teal:#26C6DA;
  --crema:#FFF9F0;    --texto:#2B2440;   --texto-suave:#6B6577;
  --linea:#EFE6F7;
  --radio:20px;
  --sombra:0 6px 20px rgba(43,36,64,.07);
  --sombra-alta:0 14px 40px rgba(43,36,64,.13);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--crema);
  color:var(--texto);
  line-height:1.6;
  min-height:100vh;
  display:flex;flex-direction:column;
}
h1,h2,h3{font-family:'Baloo 2',cursive;font-weight:800;line-height:1.2;}
a{color:var(--morado-osc);font-weight:700;}

/* ── Barra superior ── */
.topbar{
  background:#fff;border-bottom:3px solid var(--morado);
  padding:.7rem 1.2rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;position:sticky;top:0;z-index:50;
}
.topbar img{height:40px;width:auto;display:block;}
.topbar nav{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
.topbar nav a{
  font-size:.84rem;font-weight:800;text-decoration:none;color:var(--morado-osc);
  background:#F3E8FB;padding:.42rem .95rem;border-radius:50px;transition:.18s;
}
.topbar nav a:hover{background:var(--morado);color:#fff;}
.topbar nav a.salir{background:#FDECEE;color:var(--rojo);}
.topbar nav a.salir:hover{background:var(--rojo);color:#fff;}

/* ── Estructura ── */
main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:1.8rem 1.1rem 3rem;}
main.estrecho{max-width:460px;}
.titulo{font-size:clamp(1.6rem,5vw,2.2rem);margin-bottom:.2rem;}
.titulo span{color:var(--morado);}
.subtitulo{color:var(--texto-suave);font-size:.95rem;margin-bottom:1.6rem;}

.tarjeta{
  background:#fff;border:2px solid var(--linea);border-radius:var(--radio);
  padding:1.4rem;box-shadow:var(--sombra);margin-bottom:1.1rem;
}
.tarjeta h2{font-size:1.15rem;color:var(--morado-osc);margin-bottom:.8rem;}

/* ── Carné: la pieza principal de la ficha ── */
.carne{
  background:linear-gradient(135deg,var(--morado) 0%,var(--morado-osc) 100%);
  color:#fff;border-radius:26px;padding:1.5rem;box-shadow:var(--sombra-alta);
  margin-bottom:1.1rem;position:relative;overflow:hidden;
}
.carne::after{ /* burbuja decorativa */
  content:'';position:absolute;right:-60px;top:-60px;width:190px;height:190px;
  background:rgba(255,255,255,.09);border-radius:50%;
}
.carne .quien{font-size:.8rem;text-transform:uppercase;letter-spacing:1.2px;
  opacity:.75;font-weight:800;}
.carne .nombre{font-family:'Baloo 2',cursive;font-size:1.65rem;font-weight:800;
  margin-bottom:.9rem;position:relative;}
.rango-chip{
  display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.35);border-radius:50px;
  padding:.35rem 1rem;font-weight:800;font-size:.95rem;position:relative;
}
.rango-chip .icono{font-size:1.15rem;}

.cifras{display:flex;gap:1.6rem;margin-top:1.1rem;position:relative;}
.cifra .n{font-family:'Baloo 2',cursive;font-size:2rem;font-weight:800;line-height:1;}
.cifra .t{font-size:.76rem;text-transform:uppercase;letter-spacing:.8px;opacity:.8;font-weight:800;}

/* ── Carné de familia fundadora ──
   Dorado en vez de morado, para que se distinga de un vistazo. El texto
   va en marrón oscuro y no en blanco: sobre amarillo, el blanco no se
   lee. Con este par el contraste pasa de sobra las pautas de
   accesibilidad, que en un carné lleno de cifras importa. */
.carne.fundadora{
  background:linear-gradient(135deg,#FFD75E 0%,var(--amarillo) 45%,#F49B1C 100%);
  color:#4A2C00;
  box-shadow:0 14px 40px rgba(196,124,0,.35);
  border:3px solid #FFE9A8;
}
.carne.fundadora::after{background:rgba(255,255,255,.28);}
.carne.fundadora .rango-chip{
  background:rgba(255,255,255,.55);
  border-color:rgba(74,44,0,.22);
}
.carne.fundadora .progreso .barra{background:rgba(74,44,0,.16);}
.carne.fundadora .progreso .relleno{background:#8A4B00;}

/* Va en el flujo, no superpuesta: encima del nombre se solapaba con el
   rótulo del carné en pantallas estrechas. */
.sello-fundador{
  display:inline-block;position:relative;z-index:2;
  background:#4A2C00;color:#FFD75E;
  font-size:.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:.32rem .8rem;border-radius:50px;
  box-shadow:0 3px 10px rgba(74,44,0,.28);
}
.carne.fundadora .quien{opacity:1;margin-bottom:.55rem;}

/* Estrellas de fondo. Decorativas: van con aria-hidden y se paran
   solas si el sistema pide menos animación. */
.estrellas{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.estrellas span{
  position:absolute;color:#fff;opacity:.5;
  animation:brillo 3.5s ease-in-out infinite;
}
.estrellas span:nth-child(1){top:9%;right:8%;font-size:1.05rem;animation-delay:0s;}
.estrellas span:nth-child(2){top:34%;right:16%;font-size:.8rem;animation-delay:.9s;}
.estrellas span:nth-child(3){top:52%;right:7%;font-size:1.2rem;animation-delay:1.8s;}
.estrellas span:nth-child(4){bottom:30%;right:26%;font-size:.75rem;animation-delay:2.6s;}
@keyframes brillo{
  0%,100%{opacity:.28;transform:scale(.85);}
  50%    {opacity:.85;transform:scale(1.15);}
}

/* Barra de progreso al siguiente rango */
.progreso{margin-top:1.2rem;position:relative;}
.progreso .barra{height:11px;background:rgba(255,255,255,.22);border-radius:50px;overflow:hidden;}
.progreso .relleno{height:100%;background:var(--amarillo);border-radius:50px;transition:width .5s;}
.progreso .texto{font-size:.8rem;margin-top:.45rem;opacity:.9;font-weight:700;}

/* ── QR ──
   Va incrustado en el carné como la foto de un carné de verdad;
   tocándolo se abre el popup con el código en grande. */
.qr-mini{
  position:absolute;top:1.2rem;right:1.2rem;z-index:2;
  background:#fff;border:0;border-radius:14px;padding:7px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.22);line-height:0;
}
.qr-mini svg{display:block;width:64px;height:64px;}
.qr-mini:active{transform:scale(.95);}
/* Que el nombre no se meta debajo de la miniatura */
.carne .quien,.carne .nombre{padding-right:96px;}

.qr-velo{
  position:fixed;inset:0;z-index:50;background:rgba(35,20,60,.55);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
}
.qr-velo[hidden]{display:none;}
.qr-popup{
  background:#fff;border-radius:26px;padding:1.6rem;text-align:center;
  max-width:340px;width:100%;position:relative;box-shadow:var(--sombra-alta);
  animation:aparecer .18s ease-out;
}
@keyframes aparecer{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
.qr-popup h2{font-size:1.15rem;color:var(--morado-osc);margin-bottom:.8rem;}
.qr-popup .qr-marco{box-shadow:none;border:2px solid var(--linea);}
.qr-popup .ayuda{margin-top:.9rem;}
.qr-cerrar{
  position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;
  border:0;border-radius:50%;background:#F3E8FB;color:var(--morado-osc);
  font-size:1rem;font-weight:800;cursor:pointer;line-height:1;
}
.qr-marco{
  display:inline-block;background:#fff;padding:12px;border-radius:18px;
  border:5px solid #fff;box-shadow:var(--sombra-alta);line-height:0;
}
.qr-marco svg{display:block;width:230px;height:230px;}
.codigo{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.32rem;
  font-weight:700;letter-spacing:3px;color:var(--morado-osc);
  background:#F3E8FB;border-radius:12px;padding:.5rem 1rem;
  display:inline-block;margin-top:.9rem;
}

/* ── Avisos ── */
.aviso{border-radius:16px;padding:.9rem 1.1rem;margin-bottom:1rem;font-size:.92rem;font-weight:600;}
.aviso.ok{background:#E8F6EC;border:2px solid #BFE5C9;color:#2E6B3F;}
.aviso.error{background:#FDECEE;border:2px solid #F7C3C9;color:#A32233;}
.aviso.info{background:#FFF3E0;border:2px solid #FFD9A8;color:#8A5316;}
.aviso.cumple{background:linear-gradient(135deg,#FFF3E0,#FFE7F0);border:2px solid #F7C3D8;color:#8A2F5C;}
.aviso.early{background:linear-gradient(135deg,#F3E8FB,#FFF3E0);border:2px solid #E0C6F2;color:var(--morado-osc);}

/* ── Formularios ── */
label{display:block;font-weight:800;font-size:.87rem;margin-bottom:.3rem;color:var(--texto);}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],select{
  width:100%;padding:.72rem .9rem;border:2px solid var(--linea);border-radius:13px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--texto);transition:.18s;
}
input:focus,select:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 4px rgba(142,68,196,.13);}
.campo{margin-bottom:1rem;}
.ayuda{font-size:.8rem;color:var(--texto-suave);margin-top:.28rem;font-weight:600;}

.acepto{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;
  font-weight:600;color:var(--texto-suave);margin-bottom:1rem;}
.acepto input{margin-top:.22rem;width:18px;height:18px;accent-color:var(--morado);flex-shrink:0;}
.acepto label{font-weight:600;font-size:.86rem;margin:0;color:var(--texto-suave);}

.btn{
  display:inline-block;background:var(--naranja);color:#fff;border:none;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1.02rem;
  padding:.8rem 1.8rem;border-radius:50px;cursor:pointer;text-decoration:none;
  box-shadow:0 5px 14px rgba(244,114,43,.32);transition:.18s;text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(244,114,43,.4);}
.btn:active{transform:translateY(0);}
.btn.ancho{width:100%;}
.btn.morado{background:var(--morado);box-shadow:0 5px 14px rgba(142,68,196,.32);}
.btn.morado:hover{box-shadow:0 9px 22px rgba(142,68,196,.4);}
.btn.suave{background:#F3E8FB;color:var(--morado-osc);box-shadow:none;}
.btn.suave:hover{background:#E9D8F7;transform:none;box-shadow:none;}

.enlaces{text-align:center;margin-top:1.1rem;font-size:.88rem;}
.enlaces a{display:inline-block;margin:0 .5rem;}

/* ── Listas ── */
.movs{list-style:none;}
.movs li{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.68rem 0;border-top:1px solid var(--linea);}
.movs li:first-child{border-top:none;}
.movs .qué{font-weight:700;font-size:.92rem;}
.movs .cuándo{font-size:.78rem;color:var(--texto-suave);font-weight:600;}
.movs .pts{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.05rem;
  color:var(--verde);white-space:nowrap;}
.movs .pts.neg{color:var(--rojo);}

.hijos{list-style:none;}
.hijos li{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.65rem .85rem;background:#FAF6FE;border:2px solid var(--linea);
  border-radius:13px;margin-bottom:.55rem;}
.hijos .nom{font-weight:800;}
.hijos .meta{font-size:.8rem;color:var(--texto-suave);font-weight:600;}
.borrar{background:none;border:none;color:var(--rojo);font-weight:800;
  cursor:pointer;font-size:.83rem;font-family:inherit;}

/* ── Escalera de rangos ── */
.escalera{list-style:none;}
.escalera li{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;
  border-top:1px solid var(--linea);font-size:.92rem;}
.escalera li:first-child{border-top:none;}
.escalera .ic{font-size:1.25rem;width:1.8rem;text-align:center;flex-shrink:0;}
.escalera .nm{font-weight:800;flex:1;}
.escalera .vs{font-size:.8rem;color:var(--texto-suave);font-weight:700;white-space:nowrap;}
.escalera li.actual{background:#F9F2FE;border-radius:11px;padding-left:.6rem;padding-right:.6rem;}
.escalera li.futuro{opacity:.45;}

/* ── Elegir peque al comprar el pasaporte ── */
.opcion-hijo{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;
  border:2px solid var(--linea);border-radius:14px;margin-bottom:.6rem;cursor:pointer;
  transition:.15s;background:#fff;}
.opcion-hijo:hover{border-color:var(--morado);background:#FAF6FE;}
.opcion-hijo input{width:20px;height:20px;accent-color:var(--morado);flex-shrink:0;}
.opcion-hijo:has(input:checked){border-color:var(--morado);background:#F6ECFC;
  box-shadow:0 0 0 3px rgba(142,68,196,.12);}
.opcion-hijo .meta{display:block;font-size:.8rem;color:var(--texto-suave);font-weight:600;}

/* ── Invitar ── */
.panel-invitar{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem;}
.panel-invitar .btn{flex:1 1 auto;min-width:170px;}
.cifras-claras{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;}
.cifras-claras > div{
  background:#FAF6FE;border:2px solid var(--linea);border-radius:16px;
  padding:.85rem .4rem;text-align:center;
}
.cifras-claras .n{font-family:'Baloo 2',cursive;font-size:1.75rem;font-weight:800;
  line-height:1;color:var(--morado-osc);}
.cifras-claras .t{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;
  font-weight:800;color:var(--texto-suave);margin-top:.3rem;line-height:1.25;}
/* La tercera cifra son los puntos ganados: se destaca, que es la que
   engancha. */
.cifras-claras > div:last-child{background:#FFF8EC;border-color:#F7DFA8;}
.cifras-claras > div:last-child .n{color:var(--naranja);}
.movs .pts.pendiente{color:var(--texto-suave);}
input[readonly]{background:#FAF6FE;color:var(--texto-suave);}

footer{background:var(--azul-oscuro);color:rgba(255,255,255,.75);text-align:center;
  padding:1.5rem 1.2rem;font-size:.82rem;}
footer a{color:rgba(255,255,255,.9);}

@media(max-width:520px){
  .cifras{gap:1.1rem;}
  .qr-marco svg{width:190px;height:190px;}
  .topbar{padding:.6rem .7rem;}
  .topbar img{height:32px;}
  /* Con cuatro apartados, el menú se partía en dos filas y la barra
     ocupaba casi 100px de alto. Se aprieta para que quepan en una. */
  .topbar nav{flex-wrap:nowrap;gap:.28rem;}
  .topbar nav a{font-size:.78rem;padding:.38rem .68rem;white-space:nowrap;}
  .panel-invitar{flex-direction:column;}
  .cifras-claras{gap:.8rem;}
}
@media(max-width:360px){
  .topbar nav a{font-size:.72rem;padding:.34rem .55rem;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* Entradas online sin usar, en el carné (23 sep 2026).
   El QR vive aquí y no en el correo: el correo es texto plano. */
.entrada-viva{display:flex;gap:1rem;align-items:center;background:#fff;border:2px solid var(--linea);
  border-radius:20px;padding:1rem;margin:1rem 0;}
.entrada-viva .qr{flex:none;background:#fff;border:2px solid var(--linea);border-radius:14px;padding:5px;line-height:0;}
.entrada-viva .det{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.entrada-viva .tit{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.05rem;color:var(--morado-osc);}
.entrada-viva .cod{font-family:'Baloo 2',cursive;font-size:1.7rem;letter-spacing:3px;color:var(--morado-osc);line-height:1.1;}
.entrada-viva .meta{font-size:.8rem;font-weight:600;color:var(--texto-suave);line-height:1.35;}
@media(max-width:480px){.entrada-viva{flex-direction:column;text-align:center;}}