/* ============================================================
   canvastore — hoja de estilos única
   ============================================================ */

:root{
  --tinta:#0d0f1e;
  --tinta-2:#3d4363;
  --suave:#7b8199;
  --linea:#e8eaf3;
  --fondo:#f4f5fb;
  --papel:#ffffff;

  --marca:#6c5ce7;
  --marca-2:#00c2a8;
  --marca-3:#ff5f9e;
  --marca-d:#5a48d6;
  --noche:#12142c;

  --ok:#0f9d58;
  --aviso:#e8a33d;
  --error:#e0455c;

  --radio:16px;
  --radio-lg:24px;
  --sombra:0 4px 18px rgba(18,20,44,.07);
  --sombra-alta:0 18px 50px rgba(18,20,44,.16);
  --brillo:0 0 0 4px rgba(108,92,231,.14);
  --curva:cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--fondo);
  color:var(--tinta);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--marca);text-decoration:none;transition:color .18s}
a:hover{color:var(--marca-d)}

.contenedor{width:min(1200px,92%);margin:0 auto;padding:30px 0 70px}
.contenedor--angosto{width:min(470px,92%);margin:0 auto}
.oculto{display:none !important}
.texto-centro{text-align:center}
.texto-suave{color:var(--suave);font-size:.9rem}
.grande{font-size:1.15rem}
.en-linea{display:inline-block;margin:0}
.peligro-txt{color:var(--error);font-weight:700}

/* ============================================================
   Animaciones base
   ============================================================ */
@keyframes subir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes escala{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes flotar{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-24px) scale(1.08)}66%{transform:translate(-22px,18px) scale(.95)}}
@keyframes brillo{0%{background-position:-500px 0}100%{background-position:500px 0}}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes barrido{0%{left:-60%}60%,100%{left:130%}}

/* Aparición al hacer scroll (la activa app.js).
   Se hace con transiciones —no con @keyframes— para que el estado final sea
   siempre visible aunque el navegador congele la animación.
   Y solo se ocultan si hay JavaScript: sin JS la página se ve completa. */
.js .revelar{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--curva),transform .7s var(--curva)}
.js .revelar.visible{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .revelar{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   Barra superior
   ============================================================ */
.progreso{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--marca),var(--marca-2),var(--marca-3));transition:width .1s linear}

.nav{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:100;transition:box-shadow .25s}
.nav.pegada{box-shadow:0 6px 26px rgba(18,20,44,.09)}
.nav__in{display:flex;align-items:center;justify-content:space-between;padding:13px 0;width:min(1200px,92%);margin:0 auto}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--tinta);font-size:1.06rem;letter-spacing:-.3px}
.marca:hover{color:var(--tinta)}
.marca__punto{width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg,var(--marca),var(--marca-2));animation:latido 3.2s ease-in-out infinite}
.nav__links{display:flex;align-items:center;gap:20px}
.nav__links a{color:var(--tinta-2);font-size:.95rem;font-weight:600;position:relative}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;
  background:var(--marca);transition:width .25s var(--curva)}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__user{color:var(--suave);font-size:.9rem}
.nav__burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--tinta)}

/* ============================================================
   Botones
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--marca),#8b6fe8);color:#fff;border:1px solid transparent;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:.95rem;
  cursor:pointer;font-family:inherit;position:relative;overflow:hidden;
  box-shadow:0 6px 18px rgba(108,92,231,.28);
  transition:transform .2s var(--curva),box-shadow .2s,filter .2s;
}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(108,92,231,.36);color:#fff}
.btn:hover::before{animation:barrido .8s var(--curva)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn--sm{padding:8px 15px;font-size:.85rem;box-shadow:0 4px 12px rgba(108,92,231,.22)}
.btn--grande{padding:15px 34px;font-size:1.06rem}
.btn--bloque{width:100%}
.btn--ghost{background:transparent;color:var(--marca);border-color:var(--linea);box-shadow:none}
.btn--ghost:hover{background:#f1efff;color:var(--marca-d);box-shadow:0 6px 16px rgba(108,92,231,.14)}
.btn--claro{background:#fff;color:var(--noche);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.btn--claro:hover{color:var(--noche);background:#fff}
.btn--peligro{background:transparent;color:var(--error);border-color:#f3d3d8;box-shadow:none}
.btn--peligro:hover{background:#fdeef0}

/* ============================================================
   Bloques
   ============================================================ */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:24px;box-shadow:var(--sombra);margin-bottom:22px}
.tarjeta--form{margin-top:46px;padding:34px;animation:escala .5s var(--curva) both;border-radius:var(--radio-lg)}
.seccion{margin-top:52px}
.seccion__cab{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:20px}
.cab-pagina{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.dos-col{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.h1{font-size:2rem;margin:0 0 6px;letter-spacing:-.8px;font-weight:800}
.h2{font-size:1.5rem;margin:0 0 14px;letter-spacing:-.5px;font-weight:800}
.h3{font-size:1.08rem;margin:0 0 12px;font-weight:700}

/* ---------- Alertas ---------- */
.alerta{padding:13px 17px;border-radius:12px;margin:14px 0;font-size:.93rem;border:1px solid;
  animation:subir .45s var(--curva) both}
.alerta--ok{background:#e9f8ef;border-color:#bfe8cf;color:#0b6b3d}
.alerta--error{background:#fdedef;border-color:#f5cdd3;color:#9b1c2e}
.alerta--aviso{background:#fff6e6;border-color:#f6dfb2;color:#8a5b12}

/* ============================================================
   Portada
   ============================================================ */
.hero{position:relative;margin:-30px calc(-50vw + 50%) 0;padding:70px calc(50vw - 50%) 80px;
  background:var(--noche);color:#fff;overflow:hidden;isolation:isolate}
.hero__fondo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hero__blob--1{width:440px;height:440px;background:var(--marca);top:-130px;left:-90px;animation:flotar 17s ease-in-out infinite}
.hero__blob--2{width:380px;height:380px;background:var(--marca-2);bottom:-140px;right:6%;animation:flotar 21s ease-in-out infinite reverse}
.hero__blob--3{width:300px;height:300px;background:var(--marca-3);top:34%;right:36%;opacity:.32;animation:flotar 25s ease-in-out infinite}
.hero__rejilla{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 72%)}

.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  width:min(1200px,92%);margin:0 auto;position:relative}
.hero__titulo{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;margin:14px 0 16px;
  letter-spacing:-1.6px;font-weight:800;animation:subir .8s var(--curva) both .1s}
.hero__titulo em{font-style:normal;background:linear-gradient(120deg,#a99bff,var(--marca-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__desc{color:#c3c7e4;font-size:1.06rem;margin-bottom:22px;max-width:52ch;
  animation:subir .8s var(--curva) both .2s}
.hero__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px;
  animation:subir .8s var(--curva) both .4s}
.etiqueta{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);color:#dfe1f5;padding:7px 15px;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  animation:subir .8s var(--curva) both;backdrop-filter:blur(6px)}
.etiqueta__punto{width:7px;height:7px;border-radius:50%;background:var(--marca-2);animation:latido 1.8s infinite}

.precio{font-size:2.5rem;font-weight:800;letter-spacing:-1.5px;line-height:1}
.precio small{display:block;font-size:.72rem;font-weight:600;color:#9ba0c4;letter-spacing:.4px;
  text-transform:uppercase;margin-top:5px}
.precio--ok{font-size:1.15rem;color:var(--marca-2)}
.precio__antes{font-size:1.1rem;color:#7b80a8;text-decoration:line-through;margin-right:10px;font-weight:600}

.hero__cifras{display:flex;gap:30px;margin-top:34px;animation:subir .8s var(--curva) both .5s}
.cifra__n{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(120deg,#fff,#a99bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cifra__t{font-size:.78rem;color:#9ba0c4;text-transform:uppercase;letter-spacing:.6px}

/* Abanico de portadas */
.abanico{position:relative;height:400px;animation:escala .9s var(--curva) both .3s}
.abanico__i{position:absolute;width:52%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.42);background:#2a2d52 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.13);transition:transform .5s var(--curva),box-shadow .5s}
.abanico__i:nth-child(1){left:2%;top:16%;transform:rotate(-9deg) translateY(0);z-index:1}
.abanico__i:nth-child(2){left:24%;top:4%;transform:rotate(-1deg);z-index:3}
.abanico__i:nth-child(3){left:47%;top:14%;transform:rotate(8deg);z-index:2}
.abanico:hover .abanico__i:nth-child(1){transform:rotate(-14deg) translate(-16px,-10px)}
.abanico:hover .abanico__i:nth-child(2){transform:rotate(0deg) translateY(-18px) scale(1.03)}
.abanico:hover .abanico__i:nth-child(3){transform:rotate(13deg) translate(16px,-10px)}

/* Resplandor que sigue al cursor dentro de la portada */
.hero__luz{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 65%)}
.hero:hover .hero__luz{opacity:1}

/* Sellos de confianza bajo el botón */
.sellos{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12)}
.sello{display:flex;align-items:center;gap:9px;color:#b8bce0;font-size:.83rem;font-weight:600}
.sello svg{flex:none;color:var(--marca-2)}

/* Onda que separa la portada del catálogo (ocupa todo el ancho, como la portada) */
.onda{display:block;height:54px;color:var(--fondo);background:var(--noche);
  width:100vw;margin:-1px calc(-50vw + 50%) 0;position:relative;z-index:2}

/* Botón flotante para volver arriba */
.arriba{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--marca);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(108,92,231,.42);opacity:0;visibility:hidden;
  transform:translateY(14px);transition:opacity .3s,transform .3s var(--curva),visibility .3s}
.arriba.visible{opacity:1;visibility:visible;transform:none}
.arriba:hover{background:var(--marca-d);transform:translateY(-3px)}

/* Ondas al pulsar un botón */
.onda-clic{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.5);animation:expandir .6s ease-out forwards}
@keyframes expandir{to{transform:scale(2.6);opacity:0}}

.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lista-check li{padding-left:30px;position:relative;color:#cfd2ea}
.lista-check li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
  background:rgba(0,194,168,.18);border:1px solid rgba(0,194,168,.5)}
.lista-check li::after{content:"";position:absolute;left:5.5px;top:.66em;width:5px;height:9px;
  border:solid var(--marca-2);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lista-check--claro li{color:var(--tinta-2)}
.lista-check--sm li{font-size:.9rem}

/* ============================================================
   Rejilla de diseños
   ============================================================ */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:22px}
.card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);display:flex;flex-direction:column;position:relative;
  transform-style:preserve-3d;
  transition:transform .3s var(--curva),box-shadow .3s var(--curva),border-color .3s}
.card:hover{transform:translateY(-7px);box-shadow:var(--sombra-alta);border-color:#d7d3fb}
/* Cuando el ratón la inclina, manda el transform del JS */
.card.inclinada{transition:box-shadow .3s,border-color .3s}
.card__img{aspect-ratio:4/5;background:#eceef7 center/cover no-repeat;position:relative;overflow:hidden;cursor:pointer}
.card__img::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#eceef7 30%,#f7f8ff 50%,#eceef7 70%);background-size:900px 100%;
  animation:brillo 1.5s linear infinite;opacity:1;transition:opacity .4s;z-index:0}
.card--lista .card__img::before{opacity:0;animation:none}
.card__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity .5s,transform .55s var(--curva)}
.card--lista .card__foto{opacity:1}
.card:hover .card__foto{transform:scale(1.06)}
.card--bloqueada .card__foto{filter:blur(10px) saturate(.5)}
.card--bloqueada .card__img::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(13,15,30,.28),rgba(13,15,30,.62))}
/* Candado dibujado (SVG), no un emoji: se ve igual en cualquier equipo */
.card__lock{position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.card__lock__i{background:#fff;color:var(--marca);width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .35s var(--curva)}
.card__lock__t{background:rgba(13,15,30,.72);color:#fff;font-size:.71rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  backdrop-filter:blur(4px);transition:transform .35s var(--curva)}
.card:hover .card__lock__i{transform:scale(1.13) rotate(-6deg)}
.card:hover .card__lock__t{transform:translateY(3px)}
.card__cat{position:absolute;left:11px;top:11px;background:rgba(255,255,255,.94);color:var(--tinta-2);
  font-size:.71rem;font-weight:800;padding:5px 11px;border-radius:999px;z-index:4;letter-spacing:.2px}
.card__ojo{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(13,15,30,.45);opacity:0;transition:opacity .3s;color:#fff;font-weight:700;font-size:.9rem}
.card:not(.card--bloqueada) .card__img:hover .card__ojo{opacity:1}
.card__body{padding:15px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__titulo{font-size:1rem;margin:0;font-weight:700;letter-spacing:-.2px}
.card__desc{font-size:.85rem;color:var(--suave);margin:0;flex:1}
.vacio{text-align:center;color:var(--suave);padding:40px}

/* ============================================================
   Visor incrustado (modal)
   ============================================================ */
.visor{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:20px;
  background:rgba(9,10,24,.82);backdrop-filter:blur(7px)}
.visor.abierto{display:grid;animation:aparecer .25s both}
.visor__caja{background:var(--papel);border-radius:var(--radio-lg);width:min(1020px,100%);
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.5);animation:escala .35s var(--curva) both}
.visor__cab{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--linea)}
.visor__tit{font-weight:800;font-size:1.05rem;margin:0}
.visor__cerrar{background:#f2f3fa;border:0;width:36px;height:36px;border-radius:50%;font-size:1.2rem;
  cursor:pointer;color:var(--tinta-2);transition:.2s;line-height:1}
.visor__cerrar:hover{background:#e6e8f4;transform:rotate(90deg)}
.visor__cuerpo{flex:1;min-height:0;background:#f7f8fd;position:relative;display:grid;place-items:center}
.visor__marco{width:100%;height:min(66vh,620px);border:0;display:block;background:#f7f8fd}
.visor__cargando{position:absolute;inset:0;display:grid;place-items:center;gap:12px;color:var(--suave);
  font-size:.9rem;pointer-events:none}
.rueda{width:34px;height:34px;border:3px solid #dcdfef;border-top-color:var(--marca);
  border-radius:50%;animation:girar .8s linear infinite;margin:0 auto 10px}
.visor__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:15px 20px;border-top:1px solid var(--linea);background:var(--papel)}
.visor__nota{font-size:.85rem;color:var(--suave);margin:0;max-width:52ch}

/* ============================================================
   Pasos, preguntas
   ============================================================ */
.pasos{margin-top:64px}
.pasos__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin-top:24px}
.paso{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:24px;
  position:relative;overflow:hidden;transition:transform .3s var(--curva),box-shadow .3s}
.paso:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.paso::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--marca),var(--marca-2));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--curva)}
.paso:hover::after{transform:scaleX(1)}
.paso h3{font-size:1.02rem;margin:12px 0 6px}
.paso p{margin:0;color:var(--suave);font-size:.9rem}
.paso__n{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--marca),var(--marca-2));color:#fff;font-weight:800;font-size:1.05rem}

.faq{display:grid;gap:12px;margin-top:22px;max-width:820px}
.faq__i{background:var(--papel);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.faq__i summary{padding:16px 20px;cursor:pointer;font-weight:700;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center;transition:background .2s}
.faq__i summary:hover{background:#fafbff}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";font-size:1.35rem;color:var(--marca);transition:transform .3s var(--curva)}
.faq__i[open] summary::after{transform:rotate(45deg)}
.faq__i p{margin:0;padding:0 20px 18px;color:var(--tinta-2);font-size:.94rem;animation:subir .35s var(--curva) both}

.franja{margin:64px calc(-50vw + 50%) -70px;padding:60px calc(50vw - 50%);background:var(--noche);color:#fff;
  text-align:center;position:relative;overflow:hidden}
.franja h2{color:#fff}
.franja p{color:#b9bde0;max-width:56ch;margin:0 auto 26px}
.franja__blob{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(80px);
  background:var(--marca);opacity:.4;top:-160px;left:12%;animation:flotar 19s ease-in-out infinite}

/* ============================================================
   Formularios
   ============================================================ */
.form{display:grid;gap:17px}
.form label{display:grid;gap:7px;font-size:.88rem;font-weight:700;color:var(--tinta-2)}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=search],input[type=file],select,textarea{
  font-family:inherit;font-size:.95rem;font-weight:400;color:var(--tinta);
  padding:12px 14px;border:1px solid var(--linea);border-radius:12px;background:#fbfbfe;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--marca);background:#fff;box-shadow:var(--brillo)}
textarea{resize:vertical}
.check{display:flex !important;flex-direction:row;align-items:center;gap:10px;font-weight:600}
.check input{width:auto}
.preview{max-width:190px;border-radius:12px;border:1px solid var(--linea)}
.input-mini{width:130px !important;display:inline-block;padding:7px 11px;font-size:.85rem}

.form--linea{grid-auto-flow:column;justify-content:start;align-items:center;gap:8px}
.campo-con-boton{display:flex;gap:8px;align-items:center}
.campo-con-boton input{flex:1}

/* Ficha de usuario */
.ficha{border-color:#d9d4fb;box-shadow:0 10px 34px rgba(108,92,231,.12)}
.ficha__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--linea)}
.ficha__cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.lista-paq{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.lista-paq li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#f5f4ff;border:1px solid #e2ddfb;border-radius:11px;padding:9px 13px;font-size:.9rem;font-weight:600}
.fila--pendiente td{background:#fffbf2}
.fila--pendiente:hover td{background:#fff6e6}

.filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filtros--linea{margin-bottom:16px}
.buscador,.select{min-width:190px;padding:11px 16px;border:1px solid var(--linea);border-radius:999px;
  background:var(--papel);font-family:inherit;transition:border-color .2s,box-shadow .2s}
.buscador:focus,.select:focus{box-shadow:var(--brillo)}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.tabs__i{padding:9px 18px;border-radius:999px;background:var(--papel);border:1px solid var(--linea);
  color:var(--tinta-2);font-size:.9rem;font-weight:600;transition:.22s var(--curva)}
.tabs__i:hover{border-color:var(--marca);transform:translateY(-2px)}
.tabs__i.es-activo{background:var(--marca);color:#fff;border-color:var(--marca);
  box-shadow:0 6px 16px rgba(108,92,231,.3)}

/* ============================================================
   Checkout
   ============================================================ */
.checkout{display:grid;grid-template-columns:350px 1fr;gap:26px;align-items:start;margin-top:24px}
.resumen{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:26px;
  box-shadow:var(--sombra);position:sticky;top:92px;animation:subir .55s var(--curva) both}
.resumen__item{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--linea)}
.resumen__total{display:flex;justify-content:space-between;padding:15px 0 18px;font-size:1.25rem;font-weight:800}
.datos-pago{background:#f7f8fd;border:1px dashed #cfd4ea;border-radius:12px;padding:16px;white-space:pre-wrap;
  font-family:inherit;font-size:.92rem;color:var(--tinta-2)}
.aviso-canva{background:linear-gradient(120deg,#eefaf7,#f2f0ff);border:1px solid #c9ece5;color:#0b6b5c;
  padding:16px 18px;border-radius:14px;margin-bottom:22px;font-size:.93rem;animation:subir .5s var(--curva) both}
.pagos .tarjeta{animation:subir .55s var(--curva) both}
.pagos .tarjeta:nth-child(2){animation-delay:.1s}

/* ============================================================
   Tablas
   ============================================================ */
.tabla-wrap{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th,.tabla td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla th{font-size:.75rem;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);font-weight:800}
.tabla tbody tr{transition:background .18s}
.tabla tbody tr:hover{background:#fafbff}
.acciones-fila{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mini{width:44px;height:55px;border-radius:8px;background:#eceef7 center/cover no-repeat;border:1px solid var(--linea)}

.chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:800;
  text-transform:capitalize;border:1px solid transparent;cursor:default;font-family:inherit}
.chip--pagado{background:#e9f8ef;color:#0b6b3d}
.chip--pendiente{background:#fff6e6;color:#8a5b12}
.chip--rechazado{background:#fdedef;color:#9b1c2e}
button.chip{cursor:pointer;transition:transform .18s}
button.chip:hover{transform:scale(1.06)}

.ranking{margin:0;padding-left:20px;display:grid;gap:9px}
.ranking li span{margin-right:10px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:15px;margin-bottom:24px}
.kpi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px;
  box-shadow:var(--sombra);animation:subir .5s var(--curva) both;transition:transform .25s var(--curva)}
.kpi:hover{transform:translateY(-4px)}
.kpi:nth-child(2){animation-delay:.06s}.kpi:nth-child(3){animation-delay:.12s}
.kpi:nth-child(4){animation-delay:.18s}.kpi:nth-child(5){animation-delay:.24s}
.kpi--aviso{border-color:#f6dfb2;background:#fffaf0}
.kpi__n{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-1px}
.kpi__t{font-size:.8rem;color:var(--suave)}

/* ============================================================
   Panel de administración
   ============================================================ */
.admin{background:var(--fondo)}
.admin__cont{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.lateral{background:var(--noche);color:#c9cbe4;padding:24px 18px;display:flex;flex-direction:column;gap:24px}
.marca--lateral{color:#fff}
.lateral__nav{display:grid;gap:4px}
.lateral__nav a{color:#a9adcd;padding:11px 13px;border-radius:11px;font-size:.94rem;font-weight:600;
  transition:.2s var(--curva)}
.lateral__nav a:hover{background:#20244a;color:#fff;transform:translateX(3px)}
.lateral__nav a.es-activo{background:linear-gradient(135deg,var(--marca),#8b6fe8);color:#fff;
  box-shadow:0 6px 16px rgba(108,92,231,.34)}
.lateral__pie{margin-top:auto;display:grid;gap:9px;font-size:.85rem}
.lateral__pie a{color:#8b90b8}
.admin__main{padding:30px 32px 60px;overflow-x:hidden}

/* ---------- Pie ---------- */
.pie{background:var(--papel);border-top:1px solid var(--linea);padding:44px 0 0;margin-top:0}
.pie__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;
  width:min(1200px,92%);margin:0 auto;padding-bottom:34px}
.pie__col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.pie__col h4{margin:0 0 2px;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--suave)}
.pie__col a{color:var(--tinta-2);font-size:.9rem;font-weight:600}
.pie__col a:hover{color:var(--marca)}
.pie__col p{margin:0}
.pie__legal{border-top:1px solid var(--linea);padding:18px 0;text-align:center;
  color:var(--suave);font-size:.83rem}
.pie__legal p{margin:0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .abanico{height:330px;max-width:440px}
  .checkout{grid-template-columns:1fr}
  .resumen{position:static}
  .dos-col{grid-template-columns:1fr}
  .ficha__cols{grid-template-columns:1fr;gap:22px}
  .admin__cont{grid-template-columns:1fr}
  .lateral{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px}
  .lateral__nav{grid-auto-flow:column;gap:2px;overflow-x:auto}
  .lateral__pie{margin:0;grid-auto-flow:column;gap:14px}
  .admin__main{padding:20px 16px 50px}
}
@media (max-width:640px){
  .nav__burger{display:block}
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--papel);
    border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;gap:0;padding:8px 6%;
    box-shadow:0 14px 30px rgba(18,20,44,.12)}
  .nav__links.abierto{display:flex;animation:subir .3s var(--curva) both}
  .nav__links a{padding:13px 0;border-bottom:1px solid var(--linea)}
  .nav__links .btn{margin:12px 0}
  .hero{padding:48px calc(50vw - 50%) 58px}
  .hero__cifras{gap:20px}
  .form__fila{grid-template-columns:1fr}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}
  .h1{font-size:1.55rem}
  .pie__in{grid-template-columns:1fr;gap:24px}
  .arriba{right:14px;bottom:14px}
  .visor{padding:0}
  .visor__caja{max-height:100vh;height:100%;border-radius:0}
  .visor__marco{height:62vh}
}