/* ============================================================
   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}
img[hidden],[hidden]{display:none !important}   /* el atributo hidden manda */
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;gap:18px;
  padding:13px 0;width:min(1200px,92%);margin:0 auto}
/* flex:none + nowrap: si hay muchos enlaces, la marca no se comprime ni se parte en varias líneas */
.marca{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--tinta);font-size:1.06rem;
  letter-spacing:-.3px;flex:none;white-space:nowrap}
.marca:hover{color:var(--tinta)}
.marca__punto{flex:none;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg,var(--marca),var(--marca-2));animation:latido 3.2s ease-in-out infinite}
/* El logo va sobre una placa blanca redondeada, como en la lona de la marca */
.marca__logo{flex:none;width:38px;height:38px;max-width:none;object-fit:contain;border-radius:10px;
  background:#fff;padding:4px;border:1px solid var(--linea);
  box-shadow:0 2px 10px rgba(18,20,44,.10)}
.marca--lateral .marca__logo{border-color:rgba(255,255,255,.16);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.nav__links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.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 — alegre y escolar, como la lona de la marca
   ============================================================ */
.h1,.h2,.hero__titulo,.marca,.franja h2{font-family:'Baloo 2','Segoe UI',system-ui,sans-serif}
.hero{position:relative;margin:-30px calc(-50vw + 50%) 0;padding:70px calc(50vw - 50%) 80px;
  background:linear-gradient(180deg,#5b3af0 0%,#7a4cf2 55%,#8a57f4 100%);
  color:#fff;overflow:hidden;isolation:isolate}
.hero__fondo{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* Estrellitas decorativas */
.hero__fondo::before{content:"✦";position:absolute;top:11%;right:7%;font-size:46px;color:#ffd23e;
  opacity:.95;animation:flotar 13s ease-in-out infinite;text-shadow:0 6px 18px rgba(0,0,0,.18)}
.hero__fondo::after{content:"✦";position:absolute;bottom:15%;left:5%;font-size:30px;color:#3ee6cf;
  opacity:.85;animation:flotar 17s ease-in-out infinite reverse}
.hero__blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.hero__blob--1{width:440px;height:440px;background:#16b8a5;top:-130px;left:-90px;animation:flotar 17s ease-in-out infinite}
.hero__blob--2{width:380px;height:380px;background:#ffd23e;bottom:-150px;right:5%;opacity:.4;animation:flotar 21s ease-in-out infinite reverse}
.hero__blob--3{width:300px;height:300px;background:#ff5f9e;top:30%;right:38%;opacity:.3;animation:flotar 25s ease-in-out infinite}
/* Confeti de puntitos en vez de rejilla técnica */
.hero__rejilla{position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.5) 2.2px,transparent 2.8px);
  background-size:36px 36px;
  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:-.5px;font-weight:800;animation:subir .8s var(--curva) both .1s;
  text-shadow:0 4px 22px rgba(30,10,90,.35)}
.hero__titulo em{font-style:normal;background:linear-gradient(120deg,#ffe27a,#ffc93e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__desc{color:#efeaff;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:#ffd23e;
  border:0;color:#4a3800;padding:8px 16px;border-radius:999px;
  font-size:.76rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  animation:subir .8s var(--curva) both;box-shadow:0 6px 18px rgba(30,10,90,.25)}
.etiqueta__punto{width:7px;height:7px;border-radius:50%;background:#7a4cf2;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:#ddd4ff;letter-spacing:.4px;
  text-transform:uppercase;margin-top:5px}
.precio--ok{font-size:1.15rem;color:#3ee6cf}
.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,#ffe27a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cifra__t{font-size:.78rem;color:#ddd4ff;text-transform:uppercase;letter-spacing:.6px}

/* Abanico de portadas: como cuadernos con marco blanco, igual que en la lona */
.abanico{position:relative;height:400px;animation:escala .9s var(--curva) both .3s}
.abanico::before{content:"";position:absolute;inset:6% -6% 4% -6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.abanico__i{position:absolute;width:52%;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 55px rgba(30,12,95,.45);background:#fff center/cover no-repeat;
  border:7px solid #fff;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,.25)}
.sello{display:flex;align-items:center;gap:9px;color:#e8e2ff;font-size:.83rem;font-weight:600}
.sello svg{flex:none;color:#3ee6cf}

/* Onda que separa la portada del catálogo (ocupa todo el ancho, como la portada) */
.onda{display:block;height:54px;color:var(--fondo);background:#8a57f4;
  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:#f3efff}
.lista-check li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
  background:rgba(62,230,207,.22);border:1px solid rgba(62,230,207,.65)}
.lista-check li::after{content:"";position:absolute;left:5.5px;top:.66em;width:5px;height:9px;
  border:solid #3ee6cf;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}
/* Si la tarjeta trae la imagen como fondo (no como <img>), no hay nada que esperar */
.card__img--fondo::before{display:none}
.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}
/* Cuántas plantillas trae el archivo */
.card__n{position:absolute;right:11px;top:11px;z-index:4;
  background:linear-gradient(135deg,var(--marca),var(--marca-2));color:#fff;
  font-size:.68rem;font-weight:800;padding:5px 10px;border-radius:999px;letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(0,0,0,.24)}
.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:linear-gradient(180deg,#5b3af0,#8a57f4);color:#fff;
  text-align:center;position:relative;overflow:hidden}
.franja::before{content:"✦";position:absolute;top:16%;right:10%;font-size:38px;color:#ffd23e;opacity:.9;
  animation:flotar 14s ease-in-out infinite}
.franja h2{color:#fff}
.franja p{color:#ece6ff;max-width:56ch;margin:0 auto 26px}
.franja__blob{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(80px);
  background:#16b8a5;opacity:.4;top:-160px;left:12%;animation:flotar 19s ease-in-out infinite}

/* Botón estrella (amarillo) en portada y franja final */
.hero .btn--claro,.franja .btn--claro{background:#ffd23e;color:#4a3800;
  box-shadow:0 12px 30px rgba(30,10,90,.35)}
.hero .btn--claro:hover,.franja .btn--claro:hover{background:#ffdc60;color:#4a3800}

/* ============================================================
   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}
.form__fila--3{grid-template-columns:1.4fr 1fr .6fr}
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}

/* Categorías y asignación en bloque */
.chip--cat{background:#efecff;color:var(--marca-d)}
.masivo{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:16px;padding:13px 16px;
  background:#f6f5ff;border:1px dashed #d9d4fb;border-radius:12px;font-size:.88rem}
.masivo select{width:auto;min-width:210px;padding:8px 12px;font-size:.88rem}
.masivo__n{color:var(--suave);font-weight:700}
.masivo .check{font-size:.86rem}
/* Solo el checkbox de las tablas: sin el prefijo input aplastaba el logo de la marca */
input.marca{width:17px;height:17px;cursor:pointer}
.celda-larga{max-width:420px;color:var(--suave)}
.campo-nuevo{animation:destello .9s ease-out}
@keyframes destello{0%{background:#e6fff6;border-color:var(--marca-2)}100%{background:#fbfbfe}}

.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}

/* ============================================================
   Compra sin cuenta y pedidos
   ============================================================ */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tic{width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--marca-2),#25d366);color:#fff;
  box-shadow:0 12px 30px rgba(0,194,168,.35);animation:escala .5s var(--curva) both}
.paso__n--linea{display:inline-grid;width:26px;height:26px;border-radius:8px;font-size:.85rem;
  vertical-align:middle;margin-right:8px}
.resumen__tiras{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
.resumen__tiras span{aspect-ratio:4/5;border-radius:8px;background:#eceef7 center/cover no-repeat;
  border:1px solid var(--linea)}

/* Código QR del banco */
.qr-pago{text-align:center;padding:22px;background:#fff;border:2px dashed #d9d4fb;border-radius:var(--radio);
  margin-bottom:16px}
.qr-pago img{width:min(280px,80%);margin:0 auto;border-radius:12px;background:#fff}
.qr-pago__txt{margin:14px 0 4px;font-weight:700;color:var(--tinta-2);font-size:.95rem}
.qr-pago__monto{margin:0;font-size:1.9rem;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--marca),var(--marca-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.qr-pago__monto span{font-size:.85rem;font-weight:700;color:var(--suave);letter-spacing:.5px;
  -webkit-text-fill-color:var(--suave)}

.qr-config{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start;margin:16px 0}
.qr-config__vista{text-align:center;display:grid;gap:8px;justify-items:center}
.qr-config__vista img{width:180px;border-radius:12px;border:1px solid var(--linea);padding:8px;background:#fff}
.qr-vacio{width:180px;height:180px;border:2px dashed var(--linea);border-radius:12px;display:grid;
  place-content:center;gap:4px;color:var(--suave);background:#fafbff}
.qr-vacio span{font-weight:800}
.qr-vacio small{font-size:.78rem}

.cobrado{color:var(--ok);font-weight:800}
.prueba-ok{color:var(--ok);font-weight:700;font-size:.9rem}
.prueba-mal{color:var(--error);font-weight:700;font-size:.9rem;max-width:60ch;line-height:1.45}
.pago-error{display:block;margin:0 0 14px;padding:11px 14px;border-radius:10px;font-size:.9rem;
  background:#fdedef;border:1px solid #f5cdd3;color:#9b1c2e;text-align:center}

/* Botones de PayPal tapados hasta que el cliente escriba sus datos */
.pp-caja{position:relative;border-radius:12px}
.pp-capa{position:absolute;inset:0;z-index:5;display:none;place-items:center;cursor:pointer;
  background:rgba(247,248,253,.82);backdrop-filter:blur(2px);border:2px dashed #d9d4fb;border-radius:12px}
.pp-capa__txt{background:var(--papel);color:var(--tinta-2);font-weight:700;font-size:.88rem;
  padding:9px 16px;border-radius:999px;box-shadow:var(--sombra);text-align:center;max-width:90%}
.pp-bloqueada .pp-capa{display:grid}
.pp-bloqueada #paypal-botones{filter:grayscale(.7) opacity(.55);pointer-events:none}
.pedido{border-left:4px solid var(--linea)}
.pedido--nuevo{border-left-color:var(--aviso);background:#fffdf8}
.pedido--atendido{border-left-color:var(--ok)}
.pedido--rechazado{opacity:.72}
.pedido__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.pedido__cab .h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.pedido__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin:16px 0;padding:14px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pedido__datos span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;color:var(--suave)}
.pedido__form{margin:18px 0;padding:18px;background:#f7f7fd;border-radius:12px;border:1px dashed #d9d4fb}
.pedido__pie{margin-top:6px}

.entrega{border:2px solid var(--marca-2);background:linear-gradient(180deg,#f2fbf9,#fff);
  animation:escala .4s var(--curva) both}
.entrega__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0}
.entrega__datos div{background:#fff;border:1px solid var(--linea);border-radius:11px;padding:11px 14px}
.entrega__datos span{display:block;font-size:.71rem;text-transform:uppercase;letter-spacing:.7px;color:var(--suave)}
.entrega__datos strong{font-size:.96rem;word-break:break-all}
.entrega textarea{font-family:inherit;background:#fff}

.globo{display:inline-block;min-width:19px;padding:1px 6px;margin-left:6px;border-radius:999px;
  background:var(--marca-3);color:#fff;font-size:.7rem;font-weight:800;text-align:center;
  animation:latido 1.8s ease-in-out infinite}

/* ============================================================
   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__cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lateral__plegar{flex:none;background:#20244a;border:0;color:#a9adcd;width:30px;height:30px;
  border-radius:9px;cursor:pointer;display:grid;place-content:center;transition:.2s var(--curva)}
.lateral__plegar:hover{color:#fff;background:#2a2f5e}
.lateral__nav{display:grid;gap:4px}
/* Grupos desplegables (acordeón) */
.grupo__btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:none;border:0;cursor:pointer;color:#8b90b8;font-family:inherit;
  font-size:.68rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  padding:13px 8px 7px;transition:color .2s}
.grupo__btn:hover{color:#fff}
.grupo__flecha{flex:none;transition:transform .25s var(--curva)}
.grupo.abierto .grupo__flecha{transform:rotate(180deg)}
.grupo__items{display:grid;gap:4px;overflow:hidden;max-height:0;transition:max-height .3s var(--curva)}
.grupo.abierto .grupo__items{max-height:340px}
.lateral__nav a{color:#a9adcd;padding:11px 13px;border-radius:11px;font-size:.94rem;font-weight:600;
  transition:.2s var(--curva);display:flex;align-items:center;gap:11px;position:relative}
.lateral__nav a svg{flex:none;opacity:.85}
.lateral__nav a.es-activo svg{opacity:1}
.lateral__nav .globo{margin-left:auto}
.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:4px;font-size:.85rem;
  border-top:1px solid #262b55;padding-top:12px}
.lateral__pie a{color:#8b90b8;display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;transition:.2s var(--curva)}
.lateral__pie a:hover{color:#fff;background:#20244a}
.lateral__pie svg{flex:none;opacity:.85}
.admin__main{padding:30px 32px 60px;overflow-x:hidden}

/* ---------- Menú contraído (solo escritorio) ---------- */
@media (min-width:961px){
  .menu-plegado .admin__cont{grid-template-columns:80px 1fr}
  .menu-plegado .lateral{padding:24px 12px}
  .menu-plegado .lateral__txt{display:none}
  .menu-plegado .lateral__cab{flex-direction:column;gap:12px}
  .menu-plegado .lateral__plegar svg{transform:rotate(180deg)}
  .menu-plegado .lateral__nav a{justify-content:center;padding:12px}
  /* Contraído: sin acordeón — todos los iconos a la vista y el grupo es una línea separadora */
  .menu-plegado .grupo__btn{font-size:0;padding:0;margin:10px 8px;height:1px;
    background:#262b55;pointer-events:none}
  .menu-plegado .grupo__flecha{display:none}
  .menu-plegado .grupo__items{max-height:none}
  .menu-plegado .lateral__nav .globo{position:absolute;top:4px;right:4px;margin:0}
  .menu-plegado .lateral__pie a{justify-content:center;padding:10px}
}

/* ---------- 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}
  .qr-config{grid-template-columns:1fr}
  .admin__cont{grid-template-columns:1fr}
  .lateral{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px}
  .lateral__plegar{display:none}
  /* En el celular el menú va en fila: sin acordeón, todo a la vista */
  .grupo,.grupo__items{display:contents}
  .grupo__items{max-height:none}
  .grupo__btn{display:none}
  .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,.form__fila--3{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}
}

/* ---------- Contar plantillas a mano ---------- */
.celda-pg{white-space:nowrap}
.input-pg{width:76px !important;padding:7px 9px;font-size:.9rem;text-align:center;font-weight:700}
.pg-dudosa .input-pg{border-color:var(--aviso);background:#fffaf0}
.pg-alerta{display:inline-grid;place-items:center;width:19px;height:19px;margin-left:5px;
  border-radius:50%;background:var(--aviso);color:#fff;font-size:.72rem;font-weight:800;cursor:help}
.guardar-pg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--linea)}

/* ---------- Progreso al verificar plantillas ---------- */
.verif{margin:18px 0;padding:18px 20px;background:#f6f5ff;border:1px solid #d9d4fb;border-radius:14px}
.verif__cab{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.verif__barra{height:9px;border-radius:999px;background:#e4e0f9;overflow:hidden}
.verif__barra span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--marca),var(--marca-2));transition:width .3s var(--curva)}
.verif p{margin:10px 0 0}



/* La foto de las tarjetas del panel se ve siempre, sin esperar a JavaScript */
.card__foto--fija{opacity:1 !important}

/* ============================================================
   El cliente personaliza su carátula
   ============================================================ */
.pz{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-top:8px}
.pz__vista{display:grid;place-items:start center}
.pz__marco{background:var(--papel);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra-alta);max-width:100%;line-height:0}
.pz__marco canvas{display:block;width:100%;height:auto;max-width:560px}

.pz__panel{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-lg);
  padding:24px;box-shadow:var(--sombra);position:sticky;top:92px}
.pz__lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.pz__item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;
  padding:12px 14px;border:1px solid var(--linea);border-radius:13px;background:#fbfbfe;
  cursor:pointer;transition:.18s var(--curva)}
.pz__item:hover{border-color:var(--marca);background:#fff;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(108,92,231,.14)}
.pz__etiqueta{grid-column:1;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;
  color:var(--suave);font-weight:800}
.pz__valor{grid-column:1;font-size:.98rem;font-weight:700;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz__lapiz{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:#eceafd;color:var(--marca)}
.pz__item:hover .pz__lapiz{background:var(--marca);color:#fff}
.pz__botones{display:grid;gap:10px;margin-top:22px}

/* Editor del dato, dentro del mismo panel: la carátula nunca se tapa */
.pz__volver{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  margin-bottom:14px;color:var(--marca);font-family:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.pz__volver:hover{color:var(--marca-d);gap:10px}
#pzEditor label{display:block;font-size:.78rem;font-weight:800;color:var(--tinta-2);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:15px}
#pzEditor input[type=text],#pzEditor select{width:100%;margin-top:6px;padding:11px 13px;
  border:1px solid var(--linea);border-radius:11px;font-family:inherit;font-size:.95rem;
  background:#fbfbfe;text-transform:none;letter-spacing:0;font-weight:600;color:var(--tinta)}
#pzEditor input[type=text]:focus,#pzEditor select:focus{outline:0;border-color:var(--marca);
  background:#fff;box-shadow:var(--brillo)}
#pzEditor input[type=range]{width:100%;margin-top:10px;accent-color:var(--marca)}
#pzEditor input[type=color]{width:100%;height:40px;margin-top:6px;padding:3px;
  border:1px solid var(--linea);border-radius:11px;background:#fff;cursor:pointer}

.pz-colores{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.pz-color{width:32px;height:32px;border-radius:50%;border:2px solid #e8eaf3;cursor:pointer;padding:0;
  transition:transform .15s var(--curva),box-shadow .15s}
.pz-color:hover{transform:scale(1.14)}
.pz-color.elegido{border-color:var(--marca);box-shadow:0 0 0 3px rgba(108,92,231,.25);transform:scale(1.14)}

@media (max-width:900px){
  .pz{grid-template-columns:1fr}
  .pz__panel{position:sticky;top:70px;z-index:20}
  .pz__marco canvas{max-width:100%}
}

/* ---------- Personalizar: estilos, efectos y extras ---------- */
.pz__historia{width:38px;height:38px;border:1px solid var(--linea);border-radius:50%;background:var(--papel);
  color:var(--tinta-2);cursor:pointer;display:grid;place-items:center;transition:.18s}
.pz__historia:hover:not(:disabled){border-color:var(--marca);color:var(--marca);background:#f6f5ff}
.pz__historia:disabled{opacity:.35;cursor:default}
.pz__enlace{background:none;border:0;padding:0;margin-left:6px;color:inherit;font-family:inherit;
  font-size:.88rem;font-weight:800;text-decoration:underline;cursor:pointer}

.pz__ficha{background:#f6f5ff;border:1px solid #ddd8fb;border-radius:14px;padding:15px;margin-bottom:20px}
.pz__ficha label{margin-bottom:8px !important}
.pz__ficha select{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--linea);
  border-radius:10px;font-family:inherit;font-size:.9rem;background:#fff}
.pz__ficha p{margin:0;font-size:.78rem}
.pz__ficha__acc{display:flex;gap:8px;flex-wrap:wrap}
.pz__ficha__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:11px}
.pz__ficha__cab .h3{margin:0}
.pz__ficha__nueva{background:#fff;border:1px solid var(--linea);border-radius:11px;
  padding:12px;margin-bottom:11px}
.pz__ficha__nueva label{display:block;font-size:.78rem;font-weight:800;color:var(--suave);
  text-transform:uppercase;letter-spacing:.03em}
.pz__ficha__nueva input{width:100%;margin:6px 0 10px;padding:10px 12px;border:1px solid var(--linea);
  border-radius:10px;font-family:inherit;font-size:.9rem}

/* ---------- Lista de fichas guardadas ---------- */
.pz-fichas{list-style:none;margin:0 0 11px;padding:0;display:grid;gap:7px}
.pz-fichas:empty{margin:0}
.pz-ficha{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid var(--linea);
  border-radius:11px;overflow:hidden;transition:.16s var(--curva)}
.pz-ficha:hover{border-color:#c9bffa}
.pz-ficha--activa{border-color:var(--marca);box-shadow:0 0 0 3px rgba(108,92,231,.13)}
.pz-ficha__usar{flex:1;display:grid;gap:2px;justify-items:start;text-align:left;padding:10px 12px;
  border:0;background:none;font-family:inherit;cursor:pointer;min-width:0}
.pz-ficha__nom{font-size:.9rem;font-weight:800;color:var(--tinta);line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-ficha__res{font-size:.75rem;color:var(--suave);line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-ficha__lapiz,
.pz-ficha__x{flex:0 0 auto;display:grid;place-items:center;width:40px;border:0;
  border-left:1px solid var(--linea);background:none;color:var(--suave);cursor:pointer;
  transition:.16s var(--curva)}
.pz-ficha__lapiz:hover{background:#f6f5ff;color:var(--marca)}
.pz-ficha__x:hover{background:#fff1f2;color:#e11d48}
.pz-ficha__x--seguro{background:#e11d48;color:#fff}
.pz-ficha__x--seguro:hover{background:#be123c;color:#fff}

/* ---------- Ficha del alumno (modal) ---------- */
body.sin-scroll{overflow:hidden}
.pz-modal{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:20px;
  background:rgba(13,15,30,.55);backdrop-filter:blur(3px)}
.pz-modal.abierto{display:grid}
.pz-modal__in{background:var(--papel);border-radius:var(--radio-lg);width:min(520px,100%);
  max-height:92vh;overflow:auto;padding:26px;box-shadow:var(--sombra-alta);
  animation:pzSube .22s var(--curva) both}
@keyframes pzSube{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pz-modal__in{animation:none}}

.pz-modal__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:6px}
.pz-modal__cab .h3{margin:0}
.pz-modal__x{width:34px;height:34px;border:0;border-radius:50%;background:var(--fondo);
  color:var(--suave);font-size:1.5rem;line-height:1;cursor:pointer;transition:.16s var(--curva)}
.pz-modal__x:hover{background:#fff1f2;color:#e11d48}
.pz-modal > .pz-modal__in > .texto-suave{margin:0 0 18px;font-size:.86rem}

.pz-modal__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.pz-modal__campos label,
.pz-modal__alias{display:block;font-size:.76rem;font-weight:800;color:var(--suave);
  text-transform:uppercase;letter-spacing:.03em}
.pz-modal__alias{margin-top:14px}
.pz-modal__campos input,
.pz-modal__alias input{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:11px;font-family:inherit;font-size:.92rem;text-transform:none;
  letter-spacing:normal;font-weight:400;color:var(--tinta)}
.pz-modal__campos input:focus,
.pz-modal__alias input:focus{outline:0;border-color:var(--marca);box-shadow:var(--brillo)}

.pz-modal__aviso{min-height:20px;margin:12px 0 0;font-size:.85rem;font-weight:600;
  color:var(--error)}
.pz-modal__pie{display:flex;gap:9px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}

.pz-estilos{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}
.pz-estilo{display:grid;gap:3px;justify-items:center;padding:9px 4px;border:2px solid var(--linea);
  border-radius:11px;background:#fff;cursor:pointer;transition:.16s var(--curva)}
.pz-estilo:hover{border-color:#c9c2f7;transform:translateY(-2px)}
.pz-estilo.elegido{border-color:var(--marca);box-shadow:0 4px 14px rgba(108,92,231,.2)}
.pz-estilo__txt{font-size:1.25rem;line-height:1.1}
.pz-estilo__n{font-size:.6rem;color:var(--suave);font-weight:700;text-transform:none;letter-spacing:0}

.pz-efectos{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pz-efecto{padding:7px 13px;border:1px solid var(--linea);border-radius:999px;background:#fff;
  font-family:inherit;font-size:.79rem;font-weight:700;color:var(--tinta-2);cursor:pointer;
  text-transform:none;letter-spacing:0;transition:.16s}
.pz-efecto:hover{border-color:var(--marca);color:var(--marca)}
.pz-efecto.elegido{background:var(--marca);border-color:var(--marca);color:#fff}

.pz-color--suyo{border-style:dashed;border-color:var(--marca-2)}
.pz-avanzado{margin-bottom:16px;border:1px solid var(--linea);border-radius:11px;overflow:hidden}
.pz-avanzado summary{padding:11px 14px;cursor:pointer;font-size:.8rem;font-weight:800;
  color:var(--tinta-2);background:#fbfbfe;list-style:none}
.pz-avanzado summary::-webkit-details-marker{display:none}
.pz-avanzado summary::after{content:"+";float:right;color:var(--marca);font-size:1.1rem;line-height:1}
.pz-avanzado[open] summary::after{content:"−"}
.pz-avanzado > label{padding:0 14px;margin-top:12px}
.pz-avanzado > label:last-of-type{padding-bottom:14px}

/* Ver antes de imprimir */
.pz-previa{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:18px;
  background:rgba(9,10,24,.8);backdrop-filter:blur(6px)}
.pz-previa.abierto{display:grid;animation:aparecer .2s both}
.pz-previa__in{background:#fff;border-radius:18px;width:min(560px,100%);max-height:94vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.45);
  animation:escala .28s var(--curva) both}
.pz-previa__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--linea)}
.pz-previa__x{width:34px;height:34px;border:0;border-radius:50%;background:#f2f3fa;color:var(--tinta-2);
  font-size:1.2rem;line-height:1;cursor:pointer;transition:.2s}
.pz-previa__x:hover{background:#e6e8f4;transform:rotate(90deg)}
.pz-previa__hoja{flex:1;min-height:0;overflow:auto;padding:22px;background:#e9ebf3;display:grid;place-items:center}
.pz-previa__hoja img{max-width:100%;max-height:62vh;box-shadow:0 10px 34px rgba(0,0,0,.28);background:#fff}
.pz-previa__pie{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;padding:15px 20px;
  border-top:1px solid var(--linea)}

@media (max-width:520px){
  .pz-estilos{grid-template-columns:repeat(3,1fr)}
  .pz-previa__pie{justify-content:stretch}
  .pz-previa__pie .btn{flex:1}
}

/* Mover los textos sobre la carátula */
#pzLienzo{touch-action:none}
.pz-moviendo{cursor:grabbing !important}
.ed-marca--falta{background:var(--error)}

/* Aviso del estudio cuando ningún texto dice qué dato es */
.ed-falta{background:#fff6ed;border:1px solid #fed7aa;border-radius:12px}
.ed-falta h4{color:#c2410c}
.ed-btn--fuerte{background:var(--marca);color:#fff;border-color:var(--marca);font-weight:800}
.ed-btn--fuerte:hover{filter:brightness(1.08)}

/* ============================================================
   Generador de prompts
   ============================================================ */
.gp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:26px;align-items:start}
@media (max-width:1080px){.gp{grid-template-columns:1fr}}

.gp__opciones{display:grid;gap:18px;min-width:0}
.gp__salida{position:sticky;top:20px;display:grid;gap:14px;min-width:0}
@media (max-width:1080px){.gp__salida{position:static}}

.gp-bloque{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:22px;box-shadow:var(--sombra)}
.gp-bloque__cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
  align-items:start;margin-bottom:16px}
.gp-bloque__cab .h3{margin:0 0 2px}
.gp-bloque__cab p{margin:0;font-size:.83rem}
.gp-bloque__n{width:28px;height:28px;border-radius:50%;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:800;flex:0 0 auto}

/* --- Fichas de opción --- */
.gp-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.gp-rejilla--estilos{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));margin-bottom:16px}

/* --- Plantillas con miniatura --- */
.gp-planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:11px}
.gp-plan{display:grid;gap:6px;justify-items:center;text-align:center;padding:12px 9px;
  border:2px solid var(--linea);border-radius:13px;background:var(--papel);
  font-family:inherit;cursor:pointer;transition:.16s var(--curva)}
.gp-plan:hover{border-color:#c9bffa;transform:translateY(-2px)}
.gp-plan--activa{border-color:var(--marca);background:#f6f5ff;box-shadow:var(--brillo)}
.gp-plan__mini{display:block;line-height:0;border-radius:5px;overflow:hidden;
  box-shadow:0 2px 8px rgba(18,20,44,.12)}
.gp-plan__nom{font-size:.83rem;font-weight:700;color:var(--tinta);line-height:1.2}
.gp-plan__pista{font-size:.7rem;color:var(--suave);line-height:1.3}

/* --- Estilos con muestra --- */
.gp-grupo{margin:2px 0 9px;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--suave)}
.gp-estilo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  text-align:left;padding:10px;border:2px solid var(--linea);border-radius:13px;
  background:var(--papel);font-family:inherit;cursor:pointer;transition:.16s var(--curva)}
.gp-estilo:hover{border-color:#c9bffa}
.gp-estilo--activo{border-color:var(--marca);background:#f6f5ff;box-shadow:var(--brillo)}
.gp-estilo__muestra{line-height:0;border-radius:9px;overflow:hidden;flex:0 0 auto;
  background:#f4f5fb;box-shadow:inset 0 0 0 1px rgba(18,20,44,.06)}
.gp-estilo__txt{display:grid;gap:1px;min-width:0}
.gp-chip{display:grid;gap:4px;justify-items:center;text-align:center;padding:13px 10px;
  border:2px solid var(--linea);border-radius:13px;background:var(--papel);
  font-family:inherit;cursor:pointer;transition:.16s var(--curva)}
.gp-chip:hover{border-color:#c9bffa;transform:translateY(-1px)}
.gp-chip--activo{border-color:var(--marca);background:#f6f5ff;box-shadow:var(--brillo)}
.gp-chip__ico{font-size:1.4rem;line-height:1}
.gp-chip__nom{font-size:.85rem;font-weight:700;color:var(--tinta);line-height:1.25}
.gp-chip__pista{font-size:.73rem;color:var(--suave);line-height:1.3}
.gp-chip--alto{justify-items:start;text-align:left;padding:14px}

.gp-libre{display:block;margin-top:14px;font-size:.78rem;font-weight:800;color:var(--suave);
  text-transform:uppercase;letter-spacing:.03em}
.gp-libre input{width:100%;margin-top:7px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:11px;font-family:inherit;font-size:.9rem}

/* --- Paletas --- */
.gp-paletas{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
.gp-paleta{display:grid;gap:7px;padding:11px;border:2px solid var(--linea);border-radius:12px;
  background:var(--papel);cursor:pointer;font-family:inherit;transition:.16s var(--curva)}
.gp-paleta:hover{border-color:#c9bffa}
.gp-paleta--activa{border-color:var(--marca);box-shadow:var(--brillo)}
.gp-paleta__cols{display:flex;height:22px;border-radius:6px;overflow:hidden}
.gp-paleta__cols i{flex:1}
.gp-paleta__nom{font-size:.79rem;font-weight:700;color:var(--tinta)}

.gp-propia{display:none;align-items:center;gap:9px;margin-top:12px;padding:11px 13px;
  background:#f6f5ff;border:1px solid #ddd8fb;border-radius:11px}
.gp-propia--visible{display:flex}
.gp-propia input[type=color]{width:40px;height:34px;padding:0;border:1px solid var(--linea);
  border-radius:8px;background:none;cursor:pointer}

/* --- Campos --- */
.gp-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.gp-campos label{display:block;font-size:.78rem;font-weight:800;color:var(--suave);
  text-transform:uppercase;letter-spacing:.03em}
.gp-campos select{width:100%;margin-top:7px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:11px;font-family:inherit;font-size:.88rem;background:var(--papel)}

.gp-extras{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:15px;
  border-top:1px solid var(--linea)}
.gp-extra{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--linea);border-radius:999px;font-size:.84rem;cursor:pointer;
  transition:.16s var(--curva)}
.gp-extra:hover{border-color:#c9bffa}
.gp-extra:has(input:checked){border-color:var(--marca);background:#f6f5ff;font-weight:700}
.gp-extra input{accent-color:var(--marca);cursor:pointer}

/* --- Vista y prompt --- */
.gp-vista{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px;box-shadow:var(--sombra);display:grid;gap:11px;justify-items:center}
.gp-vista svg{width:min(258px,100%);height:auto;display:block;border-radius:9px;
  box-shadow:0 10px 30px rgba(18,20,44,.2)}
.gp-vista__pie{margin:0;font-size:.8rem;text-align:center;font-weight:600}

.gp-prompt{background:var(--noche);border-radius:var(--radio);overflow:hidden}
.gp-prompt__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.1)}
.gp-prompt__cab .texto-suave{color:#8b90ad;font-size:.75rem}
.gp-prompt pre{margin:0;padding:16px;max-height:340px;overflow:auto;color:#e6e7f5;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.75rem;
  line-height:1.68;white-space:pre-wrap;word-break:break-word}

.gp-idioma{display:inline-flex;background:rgba(255,255,255,.08);border-radius:9px;padding:3px}
.gp-idioma__b{padding:5px 12px;border:0;border-radius:7px;background:none;color:#b8bcd4;
  font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:.16s var(--curva)}
.gp-idioma__b.activo{background:var(--marca);color:#fff}

.gp-acciones{display:grid;gap:9px}
.gp-acciones p{margin:0;font-size:.8rem}

/* --- Guardados --- */
.gp-guardados{margin-top:30px;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px;box-shadow:var(--sombra)}
.gp-lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}
.gp-item{display:flex;background:var(--fondo);border:1px solid var(--linea);
  border-radius:12px;overflow:hidden;transition:.16s var(--curva)}
.gp-item:hover{border-color:#c9bffa}
.gp-item__usar{flex:1;display:grid;gap:2px;justify-items:start;text-align:left;
  padding:11px 14px;border:0;background:none;font-family:inherit;cursor:pointer;min-width:0}
.gp-item__nom{font-size:.87rem;font-weight:700;color:var(--tinta);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-item__fecha{font-size:.74rem;color:var(--suave)}
.gp-item__x{flex:0 0 auto;display:grid;place-items:center;width:42px;border:0;
  border-left:1px solid var(--linea);background:none;color:var(--suave);cursor:pointer;
  transition:.16s var(--curva)}
.gp-item__x:hover{background:#fff1f2;color:var(--error)}
.gp-item__x--seguro{background:var(--error);color:#fff}

/* ---------- Versión para colorear ---------- */
.pz-pintar{background:#f6f5ff;border:1px solid #ddd8fb;border-radius:14px;
  padding:14px 16px;margin-bottom:14px}
.pz-pintar__cab{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pz-pintar__cab strong{font-size:.95rem;color:var(--tinta)}
.pz-pintar__cab>div{user-select:none}
.pz-pintar__cab p{margin:2px 0 0;font-size:.78rem}
.pz-pintar__ajustes{display:grid;gap:10px;margin-top:13px;padding-top:13px;
  border-top:1px solid #ddd8fb}
.pz-pintar__ajustes label{display:block;font-size:.75rem;font-weight:800;color:var(--suave);
  text-transform:uppercase;letter-spacing:.03em;user-select:none}
.pz-pintar__ajustes input[type=range]{width:100%;margin-top:5px;accent-color:var(--marca)}

.pz-interruptor{flex:0 0 auto;display:inline-flex;cursor:pointer}
.pz-interruptor input{position:absolute;opacity:0;width:0;height:0}
/* La bola va posicionada, no con margen: un margen en el primer hijo se
   colapsa fuera de la pista y la deja pegada al borde de arriba. */
.pz-interruptor__pista{position:relative;display:block;width:50px;height:28px;
  border-radius:999px;background:#cfcbe6;border:1px solid #bdb7dd;
  transition:background .2s var(--curva),border-color .2s var(--curva)}
.pz-interruptor__bola{position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,20,44,.35);
  transition:transform .2s var(--curva)}
.pz-interruptor input:checked + .pz-interruptor__pista{background:var(--marca);
  border-color:var(--marca)}
.pz-interruptor input:checked + .pz-interruptor__pista .pz-interruptor__bola{transform:translateX(22px)}
.pz-interruptor input:focus-visible + .pz-interruptor__pista{box-shadow:var(--brillo)}
.pz-interruptor input:disabled + .pz-interruptor__pista{opacity:.5;cursor:wait}

/* Cuando está encendido, la tarjeta lo dice sin que haya que mirar el botón */
.pz-pintar--activo{background:#efe9ff;border-color:#c9bffa}

/* ---------- Vista del cuaderno ---------- */
.pz-cuaderno__marco{display:grid;place-items:center;padding:14px;background:var(--fondo);
  border-radius:var(--radio);overflow:auto}
.pz-cuaderno__marco canvas{width:auto;max-width:100%;max-height:62vh;height:auto;display:block;
  border-radius:10px}

/* ---------- Páginas de temática ---------- */
.miga{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 18px;
  font-size:.85rem;color:var(--suave)}
.miga a{color:var(--marca);font-weight:600;text-decoration:none}
.miga a:hover{text-decoration:underline}

.cat-cab{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-lg);
  padding:32px;margin-bottom:28px;box-shadow:var(--sombra)}
.cat-cab .h1{margin:0 0 12px}
.cat-cab__txt{margin:0 0 18px;max-width:62ch;color:var(--tinta-2);font-size:1.02rem}
.cat-cab__datos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.cat-cab__datos span{background:var(--fondo);border:1px solid var(--linea);border-radius:999px;
  padding:7px 15px;font-size:.86rem;color:var(--suave)}
.cat-cab__datos strong{color:var(--tinta)}

.cat-pastillas{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 24px}
.cat-pastilla{display:inline-block;background:var(--papel);border:1px solid var(--linea);
  border-radius:999px;padding:9px 17px;font-size:.88rem;font-weight:600;color:var(--tinta);
  text-decoration:none;transition:.16s var(--curva)}
.cat-pastilla:hover{border-color:var(--marca);color:var(--marca);transform:translateY(-1px)}

.cat-otras{margin-top:46px;padding-top:30px;border-top:1px solid var(--linea)}
.cat-otras .h2{margin-bottom:16px}
.cat-otras__lista{display:flex;gap:9px;flex-wrap:wrap}

/* ============================================================
   Pedidos — lista densa con acciones ordenadas
   ============================================================ */
.ped-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-bottom:20px}
.ped-cifra{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px 18px;display:grid;gap:3px;text-decoration:none;color:inherit;
  transition:.16s var(--curva)}
a.ped-cifra:hover{border-color:var(--marca);transform:translateY(-2px);box-shadow:var(--sombra)}
.ped-cifra b{font-size:1.85rem;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.ped-cifra span{font-size:.76rem;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.05em}
.ped-cifra--urge{background:#fff6ed;border-color:#fed7aa}
.ped-cifra--urge b{color:#c2410c}
.ped-cifra--dinero b{color:var(--ok)}

.ped-barra{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.ped-busca{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ped-busca input[type=search]{min-width:250px;padding:9px 13px;border:1px solid var(--linea);
  border-radius:10px;font-family:inherit;font-size:.88rem}
.ped-busca select{padding:9px 11px;border:1px solid var(--linea);border-radius:10px;
  font-family:inherit;font-size:.88rem;background:var(--papel)}
.ped-busca input:focus,.ped-busca select:focus{outline:0;border-color:var(--marca);box-shadow:var(--brillo)}

/* --- Barra de acciones en lote --- */
.ped-lote{position:sticky;top:10px;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--noche);color:#fff;border-radius:12px;padding:11px 16px;margin-bottom:10px;
  box-shadow:var(--sombra-alta)}
.ped-lote b{font-size:1.05rem}
.ped-lote__acc{display:flex;gap:8px;flex-wrap:wrap}

/* --- La lista --- */
/* Sin overflow:hidden — recortaba el menú de tres puntos. Las esquinas se
   redondean en la primera y la última fila. */
.ped-lista{border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel)}
.ped-fila:first-child{border-radius:var(--radio) var(--radio) 0 0}
.ped-fila:last-child{border-radius:0 0 var(--radio) var(--radio)}
.ped-fila{display:grid;
  grid-template-columns:38px minmax(150px,1.1fr) minmax(180px,1.3fr) minmax(130px,1fr) minmax(120px,.9fr) auto;
  gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--linea)}
.ped-fila:last-child{border-bottom:0}
.ped-fila:hover{background:var(--fondo)}
.ped-fila--cab{background:var(--fondo);font-family:inherit;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.ped-fila--cab:hover{background:var(--fondo)}
.ped-fila--nuevo{box-shadow:inset 3px 0 0 var(--aviso)}
.ped-fila--rechazado{opacity:.62}
.ped-fila.es-abierta{background:#f6f5ff;box-shadow:inset 3px 0 0 var(--marca)}

.ped-marca{display:grid;place-items:center}
.ped-marca input{width:17px;height:17px;accent-color:var(--marca);cursor:pointer}

.ped-cliente{display:grid;gap:1px;min-width:0}
.ped-cliente strong{font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-cliente span{font-size:.76rem}

.ped-contacto{display:grid;gap:3px;min-width:0}
.ped-wa{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;font-weight:600;
  color:var(--ok);text-decoration:none;white-space:nowrap}
.ped-wa:hover{text-decoration:underline}
.ped-copiar{border:0;background:none;padding:0;font-family:inherit;font-size:.78rem;
  color:var(--suave);cursor:pointer;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ped-copiar:hover{color:var(--marca);text-decoration:underline}

.ped-pago{display:grid;gap:2px;min-width:0;position:relative}
.ped-pago strong{font-size:.92rem;font-variant-numeric:tabular-nums}
.ped-pago span{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-captura{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:36px;height:36px;padding:0;border-radius:7px;overflow:hidden;
  border:1px solid var(--linea);background:var(--fondo);cursor:pointer;
  transition:.16s var(--curva)}
.ped-captura img{width:100%;height:100%;object-fit:cover;display:block}
.ped-captura:hover{border-color:var(--marca);box-shadow:var(--brillo)}

/* --- Visor del comprobante --- */
.ped-visor{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:24px;
  background:rgba(13,15,30,.72);backdrop-filter:blur(3px)}
.ped-visor.abierto{display:grid}
.ped-visor__in{background:var(--papel);border-radius:var(--radio-lg);width:min(720px,100%);
  max-height:92vh;display:grid;grid-template-rows:auto 1fr;overflow:hidden;
  box-shadow:var(--sombra-alta)}
.ped-visor__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--linea)}
.ped-visor__acc{display:flex;align-items:center;gap:8px}
.ped-visor__x{width:34px;height:34px;border:0;border-radius:50%;background:var(--fondo);
  color:var(--suave);font-size:1.5rem;line-height:1;cursor:pointer;transition:.16s var(--curva)}
.ped-visor__x:hover{background:#fff1f2;color:var(--error)}
.ped-visor__foto{padding:18px;background:var(--fondo);display:grid;place-items:center;
  overflow:auto}
.ped-visor__foto img{max-width:100%;max-height:74vh;border-radius:10px;display:block;
  box-shadow:var(--sombra)}

.ped-estado{display:grid;gap:3px;justify-items:start;min-width:0}
.ped-estado span.texto-suave{font-size:.74rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}

/* --- Acciones --- */
.ped-acc{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.ped-menu{position:relative}
.ped-menu summary{list-style:none;display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--linea);border-radius:9px;cursor:pointer;color:var(--suave);
  background:var(--papel);transition:.16s var(--curva)}
.ped-menu summary::-webkit-details-marker{display:none}
.ped-menu summary:hover{border-color:var(--marca);color:var(--marca)}
.ped-menu[open] summary{border-color:var(--marca);color:var(--marca);background:#f6f5ff}
.ped-menu--arriba .ped-menu__caja,
.ped-menu.es-arriba .ped-menu__caja{top:auto;bottom:38px}
.ped-menu__caja{position:absolute;right:0;top:38px;z-index:40;min-width:190px;
  background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:6px;
  box-shadow:var(--sombra-alta);display:grid;gap:1px}
.ped-menu__caja a,.ped-menu__caja button{display:block;width:100%;text-align:left;
  padding:9px 12px;border:0;border-radius:8px;background:none;font-family:inherit;
  font-size:.86rem;color:var(--tinta);text-decoration:none;cursor:pointer}
.ped-menu__caja a:hover,.ped-menu__caja button:hover{background:var(--fondo)}
.ped-menu__caja .es-peligro{color:var(--error)}
.ped-menu__caja .es-peligro:hover{background:#fff1f2}

/* --- Formulario de entrega, dentro de la fila --- */
.ped-entregar{grid-column:1/-1;margin-top:12px;padding:20px;background:var(--papel);
  border:1px solid #ddd8fb;border-radius:var(--radio)}
.ped-entregar .h3{margin-top:0}
.ped-pie{margin-top:14px;font-size:.82rem}

@media (max-width:1080px){
  .ped-fila{grid-template-columns:34px 1fr auto;gap:10px 12px}
  .ped-fila--cab{display:none}
  .ped-contacto,.ped-pago,.ped-estado{grid-column:2/-1}
  .ped-captura{position:static;transform:none;width:46px;height:46px;margin-top:5px}
}

/* --- Pagos: la fila tiene otras columnas --- */
.pag-fila{grid-template-columns:minmax(160px,1.2fr) minmax(150px,1.2fr) 90px minmax(150px,1.1fr) 110px auto}
.pag-monto{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ok)}
.pag-paquete{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%}
.pag-metodo{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--fondo);color:var(--suave);border:1px solid var(--linea)}
.pag-metodo--paypal{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.pag-metodo--manual{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.pag-metodo--cortesia{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.ped-fila--pagado{box-shadow:none}
.ped-menu__nota{display:block;padding:8px 12px;font-size:.78rem;color:var(--suave);
  border-top:1px solid var(--linea);margin-top:3px}
@media (max-width:1080px){
  .pag-fila{grid-template-columns:1fr auto}
  .pag-fila > *{grid-column:1}
  .pag-fila .ped-acc{grid-column:2;grid-row:1/3}
}

/* --- Clientes: columnas propias --- */
.usu-fila{grid-template-columns:minmax(170px,1.4fr) minmax(150px,1fr) 80px 90px 100px auto}
.usu-paq{display:grid;place-items:start}
@media (max-width:1080px){
  .usu-fila{grid-template-columns:1fr auto}
  .usu-fila > *{grid-column:1}
  .usu-fila .ped-acc{grid-column:2;grid-row:1/3}
}

/* --- Paquetes: columnas propias --- */
.paq-fila{grid-template-columns:minmax(200px,2fr) 90px 80px 80px 110px 100px auto}
.paq-num{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.paq-num a{color:var(--marca);text-decoration:none}
.paq-num a:hover{text-decoration:underline}
.paq-num--dinero{color:var(--ok)}
@media (max-width:1080px){
  .paq-fila{grid-template-columns:1fr auto}
  .paq-fila > *{grid-column:1}
  .paq-fila .ped-acc{grid-column:2;grid-row:1/3}
}

/* ============================================================
   Modales del panel
   Editar sin perder de vista la lista: antes el formulario salía
   arriba y tocaba subir y bajar por cada cambio.
   ============================================================ */
.pnl-modal{position:fixed;inset:0;z-index:300;display:none;place-items:start center;
  padding:34px 20px;overflow-y:auto;background:rgba(13,15,30,.6);backdrop-filter:blur(3px)}
.pnl-modal.abierto{display:grid}
body.pnl-quieto{overflow:hidden}

.pnl-modal__in{background:var(--papel);border-radius:var(--radio-lg);width:min(880px,100%);
  box-shadow:var(--sombra-alta);animation:pnlSube .22s var(--curva) both;overflow:hidden}
@keyframes pnlSube{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pnl-modal__in{animation:none}}

.pnl-modal__cab{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 26px;border-bottom:1px solid var(--linea);position:sticky;top:0;
  background:var(--papel);z-index:2}
.pnl-modal__cab .h3,.pnl-modal__cab .h2{margin:0}
.pnl-modal__sub{display:block;margin-top:3px;font-size:.82rem;color:var(--suave);font-weight:400}
.pnl-modal__x{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:0;
  border-radius:50%;background:var(--fondo);color:var(--suave);font-size:1.6rem;line-height:1;
  cursor:pointer;text-decoration:none;transition:.16s var(--curva)}
.pnl-modal__x:hover{background:#fff1f2;color:var(--error)}
.pnl-modal__cuerpo{padding:26px}
.pnl-modal__cuerpo > .tarjeta{padding:0;border:0;box-shadow:none;background:none;margin:0}

/* --- Ficha del cliente dentro del modal --- */
.ficha__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
@media (max-width:760px){.ficha__cols{grid-template-columns:1fr;gap:24px}}
.ficha__cols .h3{margin-top:0}
.ficha__todo{margin:10px 0 0;padding:11px 14px;background:var(--fondo);
  border:1px dashed var(--linea);border-radius:10px;font-size:.86rem}
.form--linea{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form--linea select,.form--linea input{flex:1;min-width:130px;padding:9px 12px;
  border:1px solid var(--linea);border-radius:10px;font-family:inherit;font-size:.88rem}

/* --- Resumen --- */
.res-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.res-cab .h3{margin:0}

.res-rank{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:r}
.res-rank li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.res-rank__n{width:24px;height:24px;border-radius:50%;background:var(--fondo);color:var(--suave);
  display:grid;place-items:center;font-size:.78rem;font-weight:800}
.res-rank li:first-child .res-rank__n{background:var(--marca);color:#fff}
.res-rank__d{display:grid;gap:3px;min-width:0}
.res-rank__d a{font-size:.92rem;font-weight:700;color:var(--tinta);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-rank__d a:hover{color:var(--marca)}
.res-rank__d .texto-suave{font-size:.76rem}
.res-rank__v{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--marca)}
.res-barra{display:block;height:5px;border-radius:99px;background:var(--fondo);overflow:hidden;margin-top:2px}
.res-barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--marca),var(--marca-2))}

.res-act{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.res-act li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:10px 0;border-bottom:1px solid var(--linea)}
.res-act li:last-child{border-bottom:0}
.res-act__hora{font-size:.8rem;font-weight:800;color:var(--marca);
  font-variant-numeric:tabular-nums;padding-top:1px}
.res-act__q{display:grid;gap:2px;min-width:0;font-size:.88rem}
.res-act__q a{font-weight:700;color:var(--tinta);text-decoration:none}
.res-act__q a:hover{color:var(--marca)}
.res-act__q .texto-suave{font-size:.75rem}
.res-act--fria li{grid-template-columns:1fr}

/* ---------- Desglose del cobro con PayPal ----------
   El cliente ve en qué se le va cada centavo antes de pulsar. */
.pp-desglose{
  list-style:none; margin:0 0 14px; padding:14px 16px;
  background:var(--fondo); border:1px solid var(--linea); border-radius:var(--radio);
  display:flex; flex-direction:column; gap:8px;
  font-variant-numeric:tabular-nums;
}
.pp-desglose li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.pp-desglose span{ color:var(--tinta-2); }
.pp-desglose strong{ color:var(--tinta); font-weight:600; }
.pp-desglose__total{
  border-top:1px dashed var(--linea); padding-top:9px; margin-top:2px;
}
.pp-desglose__total span{ color:var(--tinta); font-weight:600; }
.pp-desglose__total strong{ color:var(--marca); font-size:1.15rem; }

/* ---------- Tira del complemento (membretes y horarios) ----------
   Va en «Mis diseños»: si ya lo compró abre la herramienta, y si no,
   lleva a comprarlo. La misma pieza sirve para los dos casos. */
.extra-tira{
  display:flex; align-items:center; gap:15px; text-decoration:none; color:inherit;
  background:var(--papel); border:1px solid var(--linea); border-left:4px solid var(--marca);
  border-radius:var(--radio); padding:15px 18px; margin:0 0 20px;
  box-shadow:var(--sombra); transition:transform .16s var(--curva), box-shadow .16s;
}
.extra-tira:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta)}
.extra-tira--oferta{border-left-color:var(--marca-2); background:linear-gradient(90deg,rgba(0,194,168,.07),transparent 46%)}
.extra-tira__ic{
  width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center;
  background:rgba(108,92,231,.11); color:var(--marca);
}
.extra-tira--oferta .extra-tira__ic{background:rgba(0,194,168,.13); color:var(--marca-2)}
.extra-tira__tx{flex:1; min-width:0}
.extra-tira__tx strong{display:block; font-size:1rem}
.extra-tira__tx span{font-size:.87rem; color:var(--suave)}
.extra-tira__ir{
  flex:0 0 auto; font-weight:800; font-size:.92rem; color:var(--marca);
  background:rgba(108,92,231,.09); padding:8px 14px; border-radius:99px; white-space:nowrap;
}
.extra-tira--oferta .extra-tira__ir{color:var(--marca-2); background:rgba(0,194,168,.12)}
@media (max-width:620px){
  .extra-tira{flex-wrap:wrap}
  .extra-tira__ir{width:100%; text-align:center}
}


/* ---------- Generador: qué se va a generar ----------
   Carátula y membrete no comparten reglas, así que se elige primero
   y la pantalla se adapta en vez de mezclar controles de los dos. */
.gp-producto{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.gp-prod{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  background:var(--papel); border:2px solid var(--linea); border-radius:14px;
  padding:13px 15px; font-family:inherit; color:inherit; transition:.16s;
}
.gp-prod:hover{border-color:var(--marca)}
.gp-prod--activo{border-color:var(--marca); background:rgba(108,92,231,.06)}
.gp-prod__ic{
  width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--fondo); color:var(--suave);
}
.gp-prod--activo .gp-prod__ic{background:rgba(108,92,231,.13); color:var(--marca)}
.gp-prod__tx{min-width:0}
.gp-prod__tx strong{display:block; font-size:.97rem}
.gp-prod__tx span{font-size:.8rem; color:var(--suave)}

/* La vista previa del membrete es apaisada: sin esto, el SVG 2:1 se
   quedaba flotando dentro del hueco vertical de la carátula. */
.gp-vista--ancha svg{max-height:none; width:100%}
.gp-vista--ancha{padding-top:18px; padding-bottom:18px}

@media (max-width:560px){ .gp-producto{grid-template-columns:1fr} }


/* ---------- Checkout con dos productos ----------
   Se ve de un golpe qué está pagado, qué entra en esta compra y qué falta
   por añadir. Antes solo se veía una línea y el complemento no existía. */
.prod{
  border:1.5px solid var(--linea); border-radius:14px; padding:13px 14px;
  margin-bottom:10px; transition:border-color .16s, background .16s;
}
.prod--dentro{border-color:var(--marca); background:rgba(108,92,231,.05)}
.prod--pagado{border-color:var(--ok); background:rgba(15,157,88,.06)}
.prod--fuera{opacity:.72}
.prod__cab{display:flex; align-items:flex-start; gap:11px}
.prod__check{width:20px; height:20px; margin:2px 0 0; accent-color:var(--marca); cursor:pointer; flex:0 0 auto}
.prod__marca{
  width:20px; height:20px; border-radius:6px; flex:0 0 auto; margin-top:2px;
  display:grid; place-items:center; background:var(--marca); color:#fff;
}
.prod--pagado .prod__marca--ok{background:var(--ok)}
.prod__tx{flex:1; min-width:0; cursor:pointer}
.prod__tx strong{display:block; font-size:.95rem; line-height:1.25}
.prod__tx span{font-size:.81rem; color:var(--suave)}
.prod__pr{font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums}
.prod__pagado{
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ok); background:rgba(15,157,88,.12); padding:3px 9px; border-radius:99px;
}
/* Seis muestras en vez de cuatro: en la caja lo que convence es ver.
   auto-fit para que en el móvil se repartan solas. */
.prod__tiras{display:grid; grid-template-columns:repeat(auto-fit,minmax(52px,1fr)); gap:5px; margin-top:11px}

.prod__ver{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  padding:7px 14px;border-radius:99px;border:1.5px solid currentColor;
  background:none;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;
  color:var(--marca,#6d3ceb);transition:background .2s ease}
.prod__ver:hover{background:rgba(109,60,235,.09)}
.prod__ver:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* El video, a lo grande */
.ver-modal{position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:24px;background:rgba(14,12,20,.86)}
.ver-modal.es-abierto{display:flex}
.ver-modal video{max-width:min(92vw,480px);max-height:86vh;border-radius:14px;
  background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ver-modal__x{position:absolute;top:18px;right:18px;width:44px;height:44px;
  border-radius:50%;border:0;cursor:pointer;font-size:1.5rem;line-height:1;
  background:rgba(255,255,255,.16);color:#fff}
.ver-modal__x:hover{background:rgba(255,255,255,.28)}
.prod__tiras span{
  display:block; aspect-ratio:3/4; border-radius:7px; background-size:cover;
  background-position:center; background-color:var(--fondo);
}
.prod__nada{margin:9px 0 0; font-size:.79rem; color:var(--suave)}
.prod__falta{
  margin:10px 0 0; font-size:.83rem; font-weight:700; color:var(--aviso);
  background:rgba(232,163,61,.12); padding:9px 12px; border-radius:10px;
}


/* ---------- Botón para rescatar a quien no logra entrar ---------- */
.res-act--fria li{display:flex; align-items:center; gap:12px}
.res-act--fria .res-act__q{flex:1; min-width:0}
.res-wa{background:#25d366 !important; border-color:#25d366 !important; color:#04331b !important; white-space:nowrap}
.res-wa:hover{filter:brightness(1.06)}


/* ---------- Barra del administrador en la tienda ----------
   Para probar qué ve la clienta antes y después de pagar sin comprarse el
   paquete a sí mismo, que era lo que ensuciaba las ventas. */
.barra-admin{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--noche); color:#fff; padding:8px 18px; font-size:.85rem;
}
.barra-admin__et{
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:3px 9px; border-radius:99px;
}
.barra-admin__txt{opacity:.85}
.barra-admin__txt strong{opacity:1; color:var(--marca-2)}
.barra-admin__bots{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.barra-admin__bots a{
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.28);
  border-radius:99px; padding:4px 13px; font-weight:700; font-size:.8rem; transition:.14s;
}
.barra-admin__bots a:hover{border-color:#fff}
.barra-admin__bots a.on{background:var(--marca-2); border-color:var(--marca-2); color:#04322c}
.barra-admin__ir{opacity:.7}
@media print{ .barra-admin{display:none !important} }


/* ---------- «Ya lo tienes»: la compra hecha, en grande ----------
   Con todo pagado no hay nada que cobrar. Antes salía el formulario de
   pago con un total de $0.00, que parecía un error del sistema. */
.yatodo{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-bottom:34px}
.yatodo__caja{
  background:var(--papel); border:2px solid var(--ok); border-radius:var(--radio-lg);
  padding:22px; box-shadow:var(--sombra);
}
.yatodo__cab{display:flex; align-items:flex-start; gap:13px; margin-bottom:16px}
.yatodo__cab .h2{margin:0 0 2px; font-size:1.25rem}
.yatodo__tic{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--ok); color:#fff;
}
.yatodo__tiras{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px}
.yatodo__tiras span{
  display:block; aspect-ratio:3/4; border-radius:10px; background-size:cover;
  background-position:center; background-color:var(--fondo); box-shadow:var(--sombra);
}
@media (max-width:520px){ .yatodo__caja{padding:16px} }


/* ---------- Paquetes: que el título de cada columna caiga sobre lo suyo ----------
   Los encabezados iban a la izquierda y los números centrados, así que
   PRECIO no quedaba encima del precio. Ahora la alineación se define por
   columna y la heredan las dos filas, la de arriba y las de datos. */
.paq-fila > *:nth-child(2),
.paq-fila > *:nth-child(3),
.paq-fila > *:nth-child(4),
.paq-fila > *:nth-child(5){text-align:right; justify-self:stretch}
.paq-fila > *:nth-child(6){text-align:center; justify-self:stretch}
.paq-fila > *:nth-child(7){justify-self:end}
.paq-num__mas{
  display:block; font-size:.72rem; font-weight:700; color:var(--suave);
  text-decoration:none; margin-top:1px;
}
.paq-num__mas:hover{color:var(--marca); text-decoration:underline}
@media (max-width:1080px){
  .paq-fila > *{text-align:left !important; justify-self:start !important}
}


/* ---------- Favoritos en «Mis diseños» ----------
   El corazón va encima de la miniatura: se busca donde está el diseño que
   gustó, no en una lista aparte. */
.favs-barra{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px}
.favs-chip{
  border:1px solid var(--linea); background:var(--papel); border-radius:99px;
  padding:7px 16px; font-size:.86rem; font-weight:700; color:var(--tinta-2);
  cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:7px;
}
.favs-chip:hover{border-color:var(--marca)}
.favs-chip.on{background:var(--marca); border-color:var(--marca); color:#fff}
.favs-chip b{font-size:.78rem; opacity:.75}
.favs-cor{color:var(--marca-3)}
.favs-chip.on .favs-cor{color:#fff}
.favs-ayuda{font-size:.83rem; margin-left:4px}

.card{position:relative}
.card__fav{
  position:absolute; top:9px; left:9px; z-index:3; width:32px; height:32px;
  border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#c8ccdb;
  font-size:1.15rem; line-height:1; cursor:pointer; display:grid; place-items:center;
  padding:0; transition:transform .14s var(--curva), color .14s;
  box-shadow:0 2px 8px rgba(18,20,44,.22);
}
.card__fav:hover{transform:scale(1.14); color:var(--marca-3)}
.card__fav.on{color:var(--marca-3)}
@media print{ .card__fav, .favs-barra{display:none !important} }


/* ---------- El corazón, dibujado ----------
   El carácter ♥ salía gris, flaco y distinto en cada teléfono. Un dibujo se
   ve igual en todos y sí parece un corazón. */
.card__fav{background:rgba(255,255,255,.94)}
.card__fav svg{
  width:19px; height:19px; display:block;
  fill:rgba(255,255,255,.5); stroke:#8b90b8; stroke-width:1.6;
  transition:fill .16s, stroke .16s, transform .16s var(--curva);
}
.card__fav:hover svg{stroke:#ff3b5c; transform:scale(1.1)}
.card__fav.on svg{fill:#ff3b5c; stroke:#e01e42}
.card__fav.late svg{animation:latido .32s var(--curva)}
@keyframes latido{
  0%{transform:scale(1)} 40%{transform:scale(1.42)} 70%{transform:scale(.92)} 100%{transform:scale(1)}
}
.favs-cor{display:inline-flex; vertical-align:-2px}
.favs-cor svg{width:15px; height:15px; display:block; fill:#ff3b5c; stroke:none}
.favs-chip.on .favs-cor svg{fill:#fff}


/* Las dos formas de dar acceso, en el panel de Pagos. Se ven como dos
   tarjetas y no como dos radios sueltos, porque elegir mal descuadra la
   caja y conviene que cueste equivocarse. */
.tipo-acceso{display:grid;gap:10px;margin:4px 0 16px}
.tipo-acceso__op{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1.5px solid var(--linea,#e5e5e5);border-radius:11px;padding:13px 15px;
  transition:border-color .18s ease,background .18s ease}
.tipo-acceso__op:hover{background:rgba(0,0,0,.02)}
.tipo-acceso__op input{margin-top:3px;flex:none}
.tipo-acceso__op:has(input:checked){border-color:var(--marca,#6d3ceb);
  background:rgba(109,60,235,.05)}
.tipo-acceso__op strong{display:block;font-size:.95rem}
.tipo-acceso__op small{display:block;margin-top:3px;color:var(--suave,#777);
  font-size:.82rem;line-height:1.45}
.tipo-acceso__op small b{color:var(--texto,#222)}


/* Caja sin nada marcado: los medios de pago se apagan. Dejarlos vivos
   solo sirve para que el cliente pulse y le salte un error. */
.pagos.es-vacio form,
.pagos.es-vacio #paypal-botones,
.pagos.es-vacio .metodos{opacity:.35;pointer-events:none;filter:grayscale(1)}