/* ============================================================
   Mis errores son tu camino — sistema visual
   Negro profundo, rosa vivo de los lives, oro de la corona.
   Tipografía: Instrument Serif (títulos) + Manrope (interfaz)
   ============================================================ */
:root {
  --negro: #000;
  --fondo: #050505;
  --capa: #0e0e0f;
  --capa-2: #151516;
  --borde: #232325;
  --borde-fuerte: #34343a;
  --texto: #f5f1f3;
  --suave: #a29ca0;
  --tenue: #6f6a6e;
  --rosa: #ff4f8b;
  --rosa-hondo: #e0336f;
  --oro: #d9a441;
  --vivo: #ff2d55;
  --ok: #4ed6a5;

  --cat-perfil: #ff4f8b;
  --cat-contenido: #d9a441;
  --cat-lives: #a98bff;
  --cat-tecnica: #4ed6c0;
  --cat-mentalidad: #ff9a6b;
  --cat-ventas: #e58fd1;

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --radio: 16px;
  --ancho: 1200px;
  --sombra: 0 30px 60px -30px rgb(0 0 0 / .9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--rosa); color: #fff; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.02; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.08; }
h3 { font: 700 1.08rem/1.35 var(--sans); letter-spacing: -0.01em; }
p { margin: 0; }
.suave { color: var(--suave); }
.envoltura { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.icono { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Menú lateral ---------- */
body:not(.lectura) { padding-left: 268px; }
body:not(.lectura) .envoltura { width: min(100% - 64px, var(--ancho)); }
.cabecera .envoltura { width: 100% !important; }
.cabecera { position: fixed; top: 0; left: 0; bottom: 0; width: 268px; z-index: 50; background: #080808; border-right: 1px solid var(--borde); }
.cabecera .envoltura { width: 100%; height: 100%; margin: 0; padding: 30px 18px 22px; display: flex; flex-direction: column; gap: 34px; overflow-y: auto; }
.barra-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo span { font: italic 400 1.32rem/1.05 var(--serif); }
.cajon { flex: 1; display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu-titulo { font: 700 .72rem/1 var(--sans); color: var(--tenue); padding: 0 14px 10px; letter-spacing: .04em; }
.menu a { display: flex; align-items: center; gap: 13px; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--suave); padding: 12px 14px; border-radius: 12px; transition: color .15s ease, background .15s ease; }
.menu a .icono { width: 19px; height: 19px; }
.menu a:hover { color: var(--texto); background: rgb(255 255 255 / .03); }
.menu a[aria-current='page'] { color: var(--texto); background: var(--capa-2); box-shadow: inset 3px 0 0 var(--rosa); }
.menu a[aria-current='page'] .icono { color: var(--rosa); }
.menu a .pronto { margin-left: auto; font-size: .56rem; font-weight: 800; padding: 3px 6px; border-radius: 999px; background: rgb(255 79 139 / .16); color: var(--rosa); }
.barra-pie { margin-top: auto; display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--borde); }
.cuenta-mini { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; text-decoration: none; background: var(--capa); border: 1px solid var(--borde); }
.cuenta-mini:hover { border-color: var(--borde-fuerte); }
.cuenta-mini span { min-width: 0; }
.cuenta-mini strong { display: block; font-size: .9rem; }
.cuenta-mini small { display: block; color: var(--suave); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pie .btn { width: 100%; }
.frase-mini { font: italic 400 1rem/1.3 var(--serif); color: var(--suave); padding: 0 6px; }
.copy { color: var(--tenue); font-size: .76rem; padding: 0 6px; }
.hamburguesa { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borde); background: var(--capa); color: var(--texto); cursor: pointer; place-items: center; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 .92rem/1 var(--sans); text-decoration: none; flex: none;
  background: linear-gradient(135deg, var(--rosa), var(--oro)); color: #000; }
.pie { display: none; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 .94rem/1 var(--sans); text-decoration: none; cursor: pointer;
  padding: 15px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-rosa { background: var(--rosa); color: #fff; box-shadow: 0 10px 30px -10px rgb(255 79 139 / .7); }
.btn-rosa:hover { background: var(--rosa-hondo); }
.btn-claro { background: var(--texto); color: #000; }
.btn-linea { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.btn-linea:hover { border-color: var(--texto); }
.btn-chico { padding: 11px 18px; font-size: .9rem; }
.btn[disabled], .btn.apagado { opacity: .4; pointer-events: none; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid var(--borde); }
.cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 44px; }
.cabeza > div { max-width: 600px; }
.cabeza p { color: var(--suave); font-size: 1.04rem; margin-top: 12px; }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .85rem; color: var(--rosa); margin-bottom: 14px; }
.etiqueta::before { content: ''; width: 22px; height: 1px; background: currentColor; }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.portada::before { content: ''; position: absolute; top: -30%; right: -15%; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgb(255 79 139 / .22), transparent 62%); pointer-events: none; }
.portada::after { content: ''; position: absolute; left: -200px; bottom: -300px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgb(217 164 65 / .12), transparent 62%); pointer-events: none; }
.portada .envoltura { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.portada h1 { max-width: 14ch; }
.portada-bajada { margin-top: 20px; font-size: 1.08rem; color: var(--suave); max-width: 46ch; }
.portada-acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.garantias { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--suave); font-weight: 600; font-size: .92rem; }
.garantias span { display: inline-flex; align-items: center; gap: 8px; }
.garantias .icono { color: var(--oro); }

/* Celular con el live */
.escena { position: relative; justify-self: center; width: min(100%, 320px); }
.celular { position: relative; aspect-ratio: 9 / 18.5; border-radius: 48px; padding: 12px; background: linear-gradient(145deg, #2a2a2e, #0c0c0d);
  box-shadow: 0 0 0 1px #3a3a40, 0 50px 100px -30px rgb(0 0 0 / .95), 0 0 120px -30px rgb(255 79 139 / .45); }
.pantalla { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #111; }
.pantalla > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pantalla::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, transparent 22%, transparent 55%, rgb(0 0 0 / .75) 100%); pointer-events: none; }
.isla { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 96px; height: 28px; border-radius: 20px; background: #000; z-index: 3; }
.live-top { position: absolute; z-index: 2; top: 50px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; }
.live-perfil { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgb(0 0 0 / .45); backdrop-filter: blur(6px); font: 700 .78rem/1.1 var(--sans); }
.live-perfil i { width: 28px; height: 28px; border-radius: 50%; background: url('chini-retrato.jpg') center 20% / cover; box-shadow: 0 0 0 2px var(--rosa); }
.live-perfil small { display: block; font-weight: 600; opacity: .75; font-size: .68rem; }
.badge-vivo { margin-left: auto; background: var(--vivo); color: #fff; font: 800 .7rem/1 var(--sans); padding: 6px 9px; border-radius: 6px; letter-spacing: .06em; }
.badge-vistas { background: rgb(0 0 0 / .45); backdrop-filter: blur(6px); font: 700 .72rem/1 var(--sans); padding: 6px 9px; border-radius: 6px; display: inline-flex; gap: 5px; align-items: center; }
.chat { position: absolute; z-index: 2; left: 14px; right: 70px; bottom: 74px; display: grid; gap: 8px; }
.burbuja { justify-self: start; max-width: 100%; padding: 7px 11px; border-radius: 14px; background: rgb(0 0 0 / .4); backdrop-filter: blur(6px); font: 500 .76rem/1.3 var(--sans);
  animation: subir 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); opacity: 0; }
.burbuja b { color: var(--oro); font-weight: 700; margin-right: 4px; }
@keyframes subir { 0% { opacity: 0; transform: translateY(12px); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-6px); } }
.barra-live { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 18px; display: flex; gap: 8px; align-items: center; }
.barra-live span { flex: 1; height: 38px; border-radius: 999px; background: rgb(255 255 255 / .14); backdrop-filter: blur(6px); font: 500 .74rem/38px var(--sans); padding-left: 14px; color: rgb(255 255 255 / .7); }
.barra-live b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14); }
.corazones { position: absolute; z-index: 2; right: 18px; bottom: 72px; width: 40px; height: 220px; pointer-events: none; }
.corazones i { position: absolute; bottom: 0; left: 50%; width: 22px; height: 22px; animation: flotar 3.6s ease-in infinite; animation-delay: calc(var(--i) * .7s); opacity: 0; }
.corazones i svg { width: 100%; height: 100%; fill: var(--c, var(--rosa)); }
@keyframes flotar { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x, 10px)), -210px) scale(1.15); } }
.tarjeta-flotante { position: absolute; z-index: 3; left: -78px; top: 118px; width: 230px; padding: 16px; border-radius: 18px; background: rgb(14 14 15 / .92); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra); backdrop-filter: blur(10px); }
.tarjeta-flotante small { color: var(--suave); font-weight: 600; font-size: .78rem; }
.tarjeta-flotante strong { display: block; font: italic 400 1.35rem/1.15 var(--serif); margin-top: 4px; }
.tarjeta-flotante .linea { margin-top: 12px; height: 4px; border-radius: 2px; background: var(--capa-2); overflow: hidden; }
.tarjeta-flotante .linea i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, var(--rosa), var(--oro)); }

/* ---------- Tarjetas con miniatura ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.ficha { position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; border-radius: 20px; overflow: hidden; background: var(--capa); border: 1px solid var(--borde);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease; }
.ficha:hover { transform: translateY(-4px); border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.miniatura { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--capa-2); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.ficha:hover .miniatura img { transform: scale(1.04); }
.miniatura::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgb(0 0 0 / .55)); pointer-events: none; }
.tapa-generada { position: absolute; inset: 0; padding: 22px; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 60%), linear-gradient(160deg, #1a1a1c, #0b0b0c); }
.tapa-generada .icono { width: 64px; height: 64px; color: var(--c); stroke-width: 1.2; opacity: .9; }
.tapa-generada strong { font: italic 400 1.6rem/1.1 var(--serif); max-width: 14ch; }
.chip { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: rgb(0 0 0 / .62); backdrop-filter: blur(8px); font: 700 .76rem/1 var(--sans); color: var(--texto); border: 1px solid rgb(255 255 255 / .08); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.candado { position: absolute; z-index: 2; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .62); backdrop-filter: blur(8px); }
.nuevo { position: absolute; z-index: 2; bottom: 14px; left: 14px; padding: 5px 10px; border-radius: 6px; background: var(--rosa); color: #fff; font: 800 .7rem/1 var(--sans); letter-spacing: .05em; }
.ficha-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.ficha-cuerpo p { color: var(--suave); font-size: .94rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-pie { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--tenue); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.ficha-pie span:last-child { color: var(--texto); display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Estantes (categorías) ---------- */
.estantes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 24px; overflow: hidden; }
.estante { position: relative; background: var(--capa); padding: 34px 30px 30px; text-decoration: none; display: grid; gap: 12px; align-content: start; min-height: 250px; transition: background .2s ease; }
.estante:hover { background: var(--capa-2); }
.estante .icono { width: 30px; height: 30px; color: var(--c); }
.estante h3 { font: italic 400 1.6rem/1.1 var(--serif); margin-top: 12px; }
.estante p { color: var(--suave); font-size: .96rem; }
.estante::before { content: ''; position: absolute; top: 0; left: 30px; width: 40px; height: 3px; background: var(--c); border-radius: 0 0 3px 3px; }

/* ---------- Quién soy ---------- */
.quien { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.retrato { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.retrato figcaption { position: absolute; left: 18px; bottom: 18px; right: 18px; padding: 14px 16px; border-radius: 14px; background: rgb(0 0 0 / .6); backdrop-filter: blur(10px); font: italic 400 1.25rem/1.25 var(--serif); }
.quien-texto p { color: var(--suave); font-size: 1.04rem; margin-top: 18px; max-width: 58ch; }
.quien-texto p strong { color: var(--texto); font-weight: 700; }
.firma-grande { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--borde); font: italic 400 clamp(1.4rem, 2.4vw, 1.8rem)/1.25 var(--serif); }
.firma-grande small { display: block; font: 700 .9rem/1 var(--sans); color: var(--rosa); margin-top: 14px; font-style: normal; }

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; padding: 32px 28px; border-radius: 22px; background: var(--capa); border: 1px solid var(--borde); }
.pasos li::before { content: counter(paso, decimal-leading-zero); display: block; font: italic 400 2.6rem/1 var(--serif); color: var(--rosa); margin-bottom: 18px; }
.pasos h3 { margin-bottom: 8px; }
.pasos p { color: var(--suave); }

/* ---------- Membresía ---------- */
.membresia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.plan { position: relative; border-radius: 28px; padding: clamp(28px, 4vw, 44px); background: linear-gradient(160deg, #18181a, #0b0b0c); box-shadow: var(--sombra), 0 0 120px -40px rgb(255 79 139 / .45); }
.plan::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--rosa), #2a2a2e 40%, #2a2a2e 60%, var(--oro));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan-cab strong { font: italic 400 1.7rem/1 var(--serif); }
.plan-cab span { font: 700 .78rem/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: rgb(217 164 65 / .14); color: var(--oro); }
.precio { font: 400 clamp(3rem, 6vw, 4rem)/1 var(--serif); margin-top: 26px; letter-spacing: -0.02em; }
.precio-detalle { color: var(--suave); margin-top: 8px; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 30px; display: grid; gap: 14px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; }
.plan li .icono { color: var(--ok); margin-top: 4px; }
.plan .btn { width: 100%; }
.plan .btn + .btn { margin-top: 10px; }
.nota { margin-top: 28px; padding: 20px 22px; border-radius: 16px; border: 1px dashed var(--borde-fuerte); color: var(--suave); display: flex; gap: 14px; }
.nota .icono { color: var(--rosa); width: 22px; height: 22px; margin-top: 2px; }
.nota strong { color: var(--texto); }

/* ---------- Preguntas ---------- */
.faq { max-width: 860px; border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; position: relative; font: 600 1.04rem/1.4 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 2px solid var(--rosa); border-bottom: 2px solid var(--rosa); rotate: 45deg; transition: rotate .2s ease, margin .2s ease; }
.faq details[open] summary::after { rotate: -135deg; margin-top: -2px; }
.faq details p { padding: 0 0 26px; color: var(--suave); max-width: 66ch; }

/* ---------- Llamado final y pie ---------- */
.llamado { text-align: center; padding: clamp(64px, 8vw, 100px) 0; border-top: 1px solid var(--borde); background: radial-gradient(600px 300px at 50% 100%, rgb(255 79 139 / .16), transparent 70%); }
.llamado h2 { max-width: 16ch; margin-inline: auto; }
.llamado p { color: var(--suave); margin: 20px auto 34px; max-width: 48ch; font-size: 1.1rem; }
.pie { border-top: 1px solid var(--borde); padding: 64px 0 40px; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pie-grid p { color: var(--suave); margin-top: 16px; max-width: 34ch; }
.pie h4 { font: 700 .88rem/1 var(--sans); color: var(--tenue); margin-bottom: 18px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pie ul a { text-decoration: none; color: var(--suave); }
.pie ul a:hover { color: var(--texto); }
.pie-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--tenue); font-size: .88rem; }

/* ============================================================
   Páginas internas
   ============================================================ */
.encabezado { position: relative; padding: 52px 0 34px; border-bottom: 1px solid var(--borde); margin-bottom: 40px; background: radial-gradient(700px 260px at 90% 0%, rgb(255 79 139 / .14), transparent 70%); }
.encabezado .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.migas { color: var(--tenue); font-weight: 600; font-size: .88rem; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.migas a { text-decoration: none; color: var(--suave); }
.encabezado h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.encabezado p.suave { margin-top: 10px; }
.pastilla { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; font-weight: 700; font-size: .88rem; background: var(--capa); border: 1px solid var(--borde-fuerte); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(78 214 165 / .18); flex: none; }
.punto.off { background: var(--rosa); box-shadow: 0 0 0 4px rgb(255 79 139 / .18); }

.archivo { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; padding-bottom: 110px; }
.lateral { position: sticky; top: 100px; display: grid; gap: 20px; }
.widget { padding: 22px; border-radius: 20px; background: var(--capa); border: 1px solid var(--borde); }
.widget h4 { font: 700 .82rem/1 var(--sans); color: var(--tenue); margin-bottom: 14px; }
.buscador { position: relative; display: block; }
.buscador .icono { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--tenue); }
.buscador input { font: inherit; font-size: .95rem; width: 100%; padding: 13px 14px 13px 42px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--texto); }
.buscador input:focus { outline: none; border-color: var(--rosa); }
.categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.categorias button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--suave); font: 600 .95rem/1 var(--sans); cursor: pointer; text-align: left; }
.categorias button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--texto)); }
.categorias button b { margin-left: auto; font-size: .8rem; color: var(--tenue); }
.categorias button:hover, .categorias button[aria-pressed='true'] { color: var(--texto); background: var(--capa-2); }
.widget-carnet { background: linear-gradient(160deg, #1b1b1d, #0d0d0e); }
.widget-carnet strong { display: block; font: italic 400 1.5rem/1.15 var(--serif); margin: 8px 0 16px; }
.resultado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; color: var(--suave); font-weight: 600; font-size: .92rem; }
.aviso-socias { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; margin-bottom: 30px; border-radius: 20px;
  background: radial-gradient(400px 120px at 0% 0%, rgb(255 79 139 / .2), transparent 70%), var(--capa); border: 1px solid var(--borde-fuerte); }
.aviso-socias strong { font: italic 400 1.55rem/1.2 var(--serif); display: block; }
.vacio { text-align: center; padding: 70px 20px; border: 1px dashed var(--borde-fuerte); border-radius: 22px; color: var(--suave); }
.vacio h2 { font-size: 2.2rem; color: var(--texto); margin-bottom: 10px; }
.panel-vacio { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--capa); border: 1px solid var(--borde); margin-bottom: 80px; }
.panel-vacio h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); margin-bottom: 14px; }
.panel-vacio p { color: var(--suave); margin-bottom: 24px; max-width: 46ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Formularios */
.campo { display: grid; gap: 7px; margin-bottom: 16px; }
.campo label, .campo > span { font-weight: 700; font-size: .9rem; }
.campo input, .campo select, .campo textarea { font: inherit; font-size: .98rem; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde-fuerte); border-radius: 12px; padding: 14px 15px; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--rosa); outline: none; box-shadow: 0 0 0 4px rgb(255 79 139 / .15); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tenue); }
.separador { display: flex; align-items: center; gap: 12px; color: var(--tenue); margin: 20px 0; font-size: .88rem; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.mensaje { margin-top: 14px; padding: 13px 15px; border-radius: 12px; font-weight: 600; font-size: .95rem; }
.mensaje.ok { background: rgb(78 214 165 / .1); border: 1px solid rgb(78 214 165 / .35); }
.mensaje.error { background: rgb(255 79 139 / .1); border: 1px solid rgb(255 79 139 / .35); }
.aviso { padding: 16px 18px; border-radius: 12px; background: rgb(217 164 65 / .12); border: 1px solid rgb(217 164 65 / .35); margin-bottom: 20px; }

/* Ingreso */
.ingreso { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 77px); }
.ingreso-imagen { position: relative; overflow: hidden; min-height: 420px; }
.ingreso-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ingreso-imagen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .88)); }
.ingreso-imagen div { position: absolute; z-index: 1; left: clamp(24px, 5vw, 56px); right: clamp(24px, 5vw, 56px); bottom: clamp(28px, 5vw, 56px); }
.ingreso-imagen h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 14ch; }
.ingreso-imagen p { color: #d8d2d5; margin-top: 14px; max-width: 42ch; }
.ingreso-form { display: grid; place-items: center; padding: 48px 16px; }
.ingreso-form .caja { width: min(100%, 420px); }
.ingreso-form h1 { font-size: clamp(2.6rem, 4.4vw, 3.4rem); margin-bottom: 12px; }

/* Lector */
body.lectura { background: #0a0a0b; }
.lector-top { position: sticky; top: 0; z-index: 30; background: rgb(10 10 11 / .85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); }
.lector-top .envoltura { display: flex; align-items: center; gap: 14px; height: 70px; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--borde-fuerte); background: var(--capa); color: var(--texto); cursor: pointer; text-decoration: none; flex: none; }
.icon-btn:hover { border-color: var(--texto); }
.lector-titulo { flex: 1; min-width: 0; }
.lector-titulo h1 { font: 700 1.05rem/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lector-titulo small { color: var(--suave); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.lector-titulo small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--rosa)); }
.controles { display: flex; align-items: center; gap: 6px; }
.contador { font: 700 .88rem/1 var(--sans); padding: 0 10px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.progreso span { display: block; height: 2px; width: 0; background: linear-gradient(90deg, var(--rosa), var(--oro)); }
.hojas { display: grid; gap: 28px; justify-items: center; padding: 44px 0 60px; user-select: none; -webkit-user-select: none; }
.hoja { width: 100%; max-width: var(--ancho-hoja, 820px); border-radius: 4px; background: #fff; box-shadow: 0 30px 70px -25px rgb(0 0 0 / .9); overflow: hidden; }
.hoja canvas { display: block; width: 100%; height: auto; }
.hoja.cargando { aspect-ratio: 1 / 1.414; background: linear-gradient(100deg, #161617 30%, #1f1f21 50%, #161617 70%) 0 0 / 300% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -150% 0; } }
.aviso-lectura { text-align: center; color: var(--tenue); font-size: .88rem; display: flex; justify-content: center; align-items: center; gap: 8px; padding-bottom: 80px; }

/* Mi cuenta */
.cuenta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; padding-bottom: 100px; }
.carnet2 { position: relative; overflow: hidden; border-radius: 26px; padding: 32px; min-height: 270px; display: grid; gap: 24px;
  background: radial-gradient(420px 220px at 100% 0%, rgb(255 79 139 / .5), transparent 70%), linear-gradient(140deg, #1d1d20, #0a0a0b); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra); }
.carnet2.inactivo { filter: grayscale(.9); }
.carnet2-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.carnet2-cab strong { font: italic 400 1.3rem/1.1 var(--serif); display: flex; align-items: center; gap: 10px; }
.carnet2-cab strong svg { width: 26px; height: 26px; flex: none; }
.chip-oro { width: 48px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #f1cf7a, #a7781c); flex: none; }
.carnet2-nombre { font: 700 1.5rem/1.2 var(--sans); word-break: break-all; }
.carnet2-datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 34px; }
.carnet2 small { display: block; color: var(--suave); font-size: .78rem; font-weight: 600; }
.carnet2-datos span { font-weight: 700; }
.codigo { height: 32px; opacity: .35; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 10px); }
.lista-ajustes { display: grid; gap: 12px; }
.ajuste { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); text-decoration: none; cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; transition: border-color .15s ease; }
.ajuste:hover { border-color: var(--borde-fuerte); }
.ajuste .icono { width: 22px; height: 22px; color: var(--rosa); }
.ajuste div { flex: 1; }
.ajuste strong { display: block; }
.ajuste small { color: var(--suave); }

/* Panel de administración */
.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.metrica { padding: 24px; border-radius: 20px; background: var(--capa); border: 1px solid var(--borde); display: grid; gap: 8px; }
.metrica small { color: var(--suave); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.metrica small .icono { color: var(--c); }
.metrica strong { font: 400 2.6rem/1 var(--serif); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tarjeta2 { background: var(--capa); border: 1px solid var(--borde); border-radius: 22px; padding: clamp(22px, 3vw, 32px); }
.tarjeta2 h2 { font: 700 1.25rem/1.2 var(--sans); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tarjeta2 h2 .icono { color: var(--rosa); }
.tarjeta2 > p.suave { margin-bottom: 22px; font-size: .95rem; }
.zona-archivo { position: relative; display: grid; place-items: center; gap: 6px; text-align: center; padding: 28px 16px; border: 1px dashed var(--borde-fuerte); border-radius: 16px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.zona-archivo:hover, .zona-archivo.encima { border-color: var(--rosa); background: rgb(255 79 139 / .05); }
.zona-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-archivo .icono { width: 28px; height: 28px; color: var(--rosa); }
.zona-archivo strong { font-size: .95rem; }
.zona-archivo small { color: var(--tenue); }
.tabla2 { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabla2 th { text-align: left; font-weight: 700; color: var(--tenue); font-size: .8rem; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla2 td { padding: 14px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla2 tr:last-child td { border-bottom: 0; }
.persona { display: flex; align-items: center; gap: 12px; }
.persona .avatar { width: 32px; height: 32px; font-size: .8rem; box-shadow: none; }
.mini-tapa { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; object-position: top; background: var(--capa-2); flex: none; border: 1px solid var(--borde); }
.estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .86rem; }
.tabla-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.link-boton { background: none; border: 0; padding: 0; color: var(--rosa); font: inherit; font-weight: 700; cursor: pointer; }
.link-boton:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .portada .envoltura, .quien, .membresia, .archivo, .panel-vacio, .cuenta-grid, .ingreso, .admin-grid { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .tarjeta-flotante { left: -12px; }
  .estantes { grid-template-columns: 1fr 1fr; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .logo svg { width: 28px; height: 28px; }
  .estantes, .pasos, .metricas, .pie-grid { grid-template-columns: 1fr; }
  .tarjeta-flotante { display: none; }
  .controles .contador { display: none; }
  .carnet2-datos { grid-template-columns: 1fr 1fr; }
  .tabla2 .ocultar-movil { display: none; }
  .grilla { grid-template-columns: 1fr; }
  .ingreso-imagen { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .burbuja { opacity: 1; }
}
@media print { body:not(.imprimiendo) * { display: none !important; } }

/* ============================================================
   v4 — páginas separadas, estilo comercial
   ============================================================ */
.menu a .pronto { font-size: .62rem; font-weight: 800; padding: 3px 6px; border-radius: 999px; background: rgb(255 79 139 / .16); color: var(--rosa); margin-left: 6px; vertical-align: 2px; }
.ofertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.oferta { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: 30px 28px; border-radius: 22px; background: var(--capa); border: 1px solid var(--borde); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.oferta:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.oferta::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); }
.oferta-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.oferta-icono .icono { width: 24px; height: 24px; }
.oferta h3 { font: italic 400 1.6rem/1.1 var(--serif); margin-top: 6px; }
.oferta p { color: var(--suave); font-size: .96rem; }
.oferta .enlace { margin-top: 6px; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.badge-pronto { position: absolute; top: 22px; right: 22px; z-index: 1; font: 800 .7rem/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--rosa); color: #fff; }
.franja { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding-inline: max(16px, calc((100% - var(--ancho)) / 2)); }
.franja div { padding: 26px 22px; display: flex; gap: 14px; align-items: center; border-right: 1px solid var(--borde); }
.franja div:last-child { border-right: 0; }
.franja .icono { width: 22px; height: 22px; color: var(--oro); }
.franja strong { display: block; font-size: .95rem; }
.franja small { color: var(--suave); font-size: .85rem; }
.banda-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: clamp(32px, 5vw, 56px); border-radius: 28px;
  background: radial-gradient(500px 240px at 100% 0%, rgb(255 79 139 / .35), transparent 70%), radial-gradient(400px 200px at 0% 100%, rgb(217 164 65 / .18), transparent 70%), var(--capa); border: 1px solid var(--borde-fuerte); }
.banda-cta h2 { max-width: 18ch; }
.banda-cta p { color: var(--suave); margin-top: 12px; max-width: 46ch; }
.banda-cta .acciones { justify-content: flex-end; }
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.valor { padding: 28px; border-radius: 20px; background: var(--capa); border: 1px solid var(--borde); }
.valor .icono { width: 24px; height: 24px; color: var(--rosa); }
.valor h3 { margin: 16px 0 6px; }
.valor p { color: var(--suave); font-size: .95rem; }
.metodos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metodo { padding: 22px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); }
.metodo strong { display: block; font: italic 400 1.4rem/1.1 var(--serif); margin-bottom: 8px; }
.metodo p { color: var(--suave); font-size: .92rem; }
.informe { position: relative; border-radius: 26px; padding: 28px; background: linear-gradient(160deg, #18181a, #0b0b0c); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra), 0 0 100px -40px rgb(255 79 139 / .5); }
.informe-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
.informe-cab small { color: var(--suave); font-weight: 600; }
.informe-cab strong { display: block; font: italic 400 1.5rem/1.1 var(--serif); }
.nota-global { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font: 400 2rem/1 var(--serif); flex: none;
  background: conic-gradient(var(--rosa) calc(var(--p) * 1%), var(--capa-2) 0); position: relative; }
.nota-global::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #121213; }
.nota-global span { position: relative; }
.criterios { display: grid; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--borde); }
.criterio { display: grid; grid-template-columns: 120px 1fr 40px; gap: 12px; align-items: center; font-size: .92rem; font-weight: 600; }
.criterio .barra { height: 6px; border-radius: 3px; background: var(--capa-2); overflow: hidden; }
.criterio .barra i { display: block; height: 100%; width: calc(var(--v) * 10%); border-radius: 3px; background: var(--c, var(--rosa)); }
.criterio b { text-align: right; color: var(--suave); }
.consejos { list-style: none; padding: 18px 0 0; margin: 0; display: grid; gap: 12px; }
.consejos li { display: flex; gap: 12px; color: var(--suave); font-size: .93rem; }
.consejos li .icono { color: var(--oro); margin-top: 3px; }
.consejos li strong { color: var(--texto); }
.etiqueta-ejemplo { position: absolute; top: -12px; left: 28px; font: 800 .7rem/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--oro); color: #000; }
.lista-check { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; color: var(--suave); }
.lista-check li .icono { color: var(--ok); margin-top: 4px; }
.lista-check li strong { color: var(--texto); }
@media (max-width: 1020px) {
  .ofertas, .valores { grid-template-columns: 1fr; }
  .franja { grid-template-columns: 1fr 1fr; }
  .franja div:nth-child(2) { border-right: 0; }
  .franja div:nth-child(-n+2) { border-bottom: 1px solid var(--borde); }
  .banda-cta { grid-template-columns: 1fr; }
  .banda-cta .acciones { justify-content: flex-start; }
  .metodos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .franja, .metodos { grid-template-columns: 1fr; }
  .franja div { border-right: 0; border-bottom: 1px solid var(--borde); }
  .criterio { grid-template-columns: 96px 1fr 34px; }
}

/* ---------- Menú lateral en celular/tablet ---------- */
@media (max-width: 1020px) {
  body:not(.lectura) { padding-left: 0; }
  body:not(.lectura) .envoltura { width: min(100% - 32px, var(--ancho)); }
  .cabecera { position: sticky; bottom: auto; width: auto; height: 66px; border-right: 0; border-bottom: 1px solid var(--borde); background: #080808; }
  .cabecera .envoltura { padding: 0 16px; height: 66px; flex-direction: row; align-items: center; overflow: visible; gap: 0; }
  .barra-top { width: 100%; padding: 0; }
  .logo svg { width: 32px; height: 32px; }
  .logo span { font-size: 1.12rem; }
  .hamburguesa { display: grid; }
  .cajon { display: none; position: fixed; top: 66px; left: 0; right: 0; bottom: 0; padding: 20px 16px 24px; background: #080808; overflow-y: auto; }
  .cabecera.abierta .cajon { display: flex; }
}

/* ---------- Inicio: una sola pantalla ---------- */
body.inicio .portada { min-height: 100vh; display: grid; align-items: center; padding: 48px 0; }
body.inicio .portada .envoltura { width: min(100% - 64px, 1120px); }
@media (max-width: 1020px) { body.inicio .portada { min-height: calc(100vh - 66px); } body.inicio .portada .envoltura { width: min(100% - 32px, 1120px); } }

/* ============================================================
   Analizá tu perfil
   ============================================================ */
.analiza-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; padding-bottom: 90px; }
.pestanas-a { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--capa); border: 1px solid var(--borde); margin-bottom: 22px; }
.pestanas-a button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 10px; background: transparent; color: var(--suave); font: 700 .92rem/1 var(--sans); cursor: pointer; }
.pestanas-a button .icono { width: 18px; height: 18px; }
.pestanas-a button[aria-selected='true'] { background: var(--texto); color: #000; }
.subida { position: relative; display: grid; place-items: center; text-align: center; gap: 10px; min-height: 260px; padding: 30px 20px; border: 1.5px dashed var(--borde-fuerte); border-radius: 22px; background: var(--capa); cursor: pointer; transition: border-color .15s ease, background .15s ease; overflow: hidden; }
.subida:hover, .subida.encima { border-color: var(--rosa); background: rgb(255 79 139 / .04); }
.subida input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subida .icono-grande { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgb(255 79 139 / .12); color: var(--rosa); }
.subida .icono-grande .icono { width: 26px; height: 26px; }
.subida strong { font-size: 1.02rem; }
.subida small { color: var(--suave); max-width: 34ch; }
.vista-previa { display: none; }
.subida.con-archivo .vacio-subida { display: none; }
.subida.con-archivo .vista-previa { display: block; width: 100%; }
.vista-previa img.unica { max-height: 360px; margin: 0 auto; border-radius: 12px; }
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tira img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); }
.tira figure { margin: 0; position: relative; }
.tira figcaption { position: absolute; left: 6px; bottom: 6px; font: 700 .7rem/1 var(--sans); padding: 4px 6px; border-radius: 6px; background: rgb(0 0 0 / .7); }
.cambiar { margin-top: 12px; font: 700 .85rem/1 var(--sans); color: var(--suave); }
.consejo-captura { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: var(--capa); border: 1px solid var(--borde); color: var(--suave); font-size: .92rem; display: flex; gap: 12px; }
.consejo-captura .icono { color: var(--oro); margin-top: 3px; }
.accion-analizar { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.accion-analizar .btn { min-width: 220px; }
.cupo { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: var(--capa); border: 1px solid var(--borde-fuerte); font-weight: 700; font-size: .88rem; }
.cupo .anillo { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--rosa) calc(var(--p) * 1%), var(--capa-2) 0); position: relative; }
.cupo .anillo::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--capa); }

/* Informe */
.informe2 { border-radius: 26px; background: linear-gradient(165deg, #161618, #0b0b0c); border: 1px solid var(--borde-fuerte); overflow: hidden; box-shadow: var(--sombra); }
.informe2-cab { display: flex; align-items: center; gap: 20px; padding: 26px 28px; border-bottom: 1px solid var(--borde);
  background: radial-gradient(420px 160px at 100% 0%, rgb(255 79 139 / .22), transparent 70%); }
.informe2-cab small { color: var(--suave); font-weight: 600; font-size: .82rem; }
.informe2-cab h2 { font-size: 1.9rem; margin: 4px 0 6px; }
.informe2-cab p { color: var(--suave); font-size: .95rem; }
.anillo-grande { --t: var(--rosa); width: 96px; height: 96px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--t) calc(var(--p) * 1%), #222225 0); }
.anillo-grande::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #121214; }
.anillo-grande span { position: relative; font: 400 2.2rem/1 var(--serif); }
.anillo-grande span small { font: 700 .7rem/1 var(--sans); color: var(--suave); display: block; text-align: center; margin-top: 2px; }
.informe2-cuerpo { padding: 8px 28px 28px; }
.bloque-i { padding: 20px 0; border-bottom: 1px solid var(--borde); }
.bloque-i:last-child { border-bottom: 0; }
.bloque-i h3 { font-size: .82rem; color: var(--tenue); font-weight: 700; margin-bottom: 14px; letter-spacing: .02em; }
.area-i { display: grid; grid-template-columns: 14px 1fr auto; gap: 4px 12px; align-items: start; padding: 10px 0; }
.area-i + .area-i { border-top: 1px dashed var(--borde); }
.semaforo { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--s); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s) 20%, transparent); }
.area-i strong { font-size: .97rem; }
.area-i p { grid-column: 2 / 4; color: var(--suave); font-size: .92rem; }
.area-i b { font-variant-numeric: tabular-nums; color: var(--suave); font-size: .9rem; }
.lista-i { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-i li { display: flex; gap: 10px; color: var(--suave); font-size: .94rem; }
.lista-i li .icono { margin-top: 3px; flex: none; }
.lista-i.bien .icono { color: var(--ok); }
.lista-i.pistas .icono { color: var(--oro); }
.bloqueado { position: relative; margin-top: 4px; border-radius: 18px; overflow: hidden; border: 1px solid var(--borde-fuerte); }
.bloqueado-falso { padding: 20px; display: grid; gap: 10px; filter: blur(5px); opacity: .6; user-select: none; }
.bloqueado-falso i { display: block; height: 10px; border-radius: 5px; background: #2a2a2e; }
.bloqueado-capa { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px; background: linear-gradient(180deg, rgb(11 11 12 / .4), rgb(11 11 12 / .92)); }
.bloqueado-capa strong { display: block; font: italic 400 1.35rem/1.2 var(--serif); margin: 8px 0 6px; }
.bloqueado-capa p { color: var(--suave); font-size: .9rem; max-width: 40ch; margin: 0 auto 14px; }
.bloqueado-capa .acciones { justify-content: center; }
.firma-informe { padding: 18px 28px; border-top: 1px solid var(--borde); font: italic 400 1.05rem/1.3 var(--serif); color: var(--suave); }
.esperando { display: grid; place-items: center; text-align: center; gap: 14px; min-height: 420px; padding: 40px 24px; border-radius: 26px; border: 1px solid var(--borde); background: var(--capa); color: var(--suave); }
.esperando h2 { font-size: 1.8rem; color: var(--texto); }
.esperando .icono { width: 40px; height: 40px; color: var(--rosa); }
.girando { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--capa-2); border-top-color: var(--rosa); animation: girar .9s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.historial { margin-top: 28px; }
.historial h3 { font-size: .82rem; color: var(--tenue); margin-bottom: 12px; }
.item-h { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--capa); border: 1px solid var(--borde); color: inherit; font: inherit; cursor: pointer; text-align: left; margin-bottom: 8px; }
.item-h:hover { border-color: var(--borde-fuerte); }
.item-h .nota-h { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 400 1.3rem/1 var(--serif); background: var(--capa-2); flex: none; }
.item-h small { display: block; color: var(--suave); font-size: .82rem; }
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.plan.destacado { box-shadow: var(--sombra), 0 0 140px -40px rgb(255 79 139 / .7); }
.plan.simple { background: var(--capa); box-shadow: none; }
.plan.simple::before { background: var(--borde-fuerte); }
.menu a.estrella { color: var(--texto); }
.menu a .pro { margin-left: auto; font-size: .56rem; font-weight: 800; padding: 3px 6px; border-radius: 999px; background: linear-gradient(135deg, var(--rosa), var(--oro)); color: #000; }
@media (max-width: 1020px) { .analiza-grid, .planes { grid-template-columns: 1fr; } }
.pro-tag { font-size: .62rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: linear-gradient(135deg, var(--rosa), var(--oro)); color: #000; vertical-align: middle; }
.membresia2 { padding-bottom: clamp(64px, 8vw, 104px); }
.membresia2 .nota { margin-top: 24px; }
.plan .botones-plan { display: grid; gap: 10px; }
.vacio-subida { display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 42ch; margin: 0 auto; }
.vacio-subida strong { display: block; font-size: 1.02rem; }
.vacio-subida small { display: block; color: var(--suave); font-size: .9rem; line-height: 1.5; }
.bloqueado { min-height: 230px; }
.bloqueado-falso { padding: 26px 20px; gap: 16px; }
.esperando { align-content: center; gap: 10px; }
.esperando p { max-width: 44ch; margin: 0; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caja-guion { display: grid; gap: 8px; }
.caja-guion textarea { font: inherit; font-size: 1rem; line-height: 1.6; color: var(--texto); background: var(--capa); border: 1.5px dashed var(--borde-fuerte); border-radius: 22px; padding: 22px; min-height: 260px; resize: vertical; width: 100%; }
.caja-guion textarea:focus { outline: none; border-style: solid; border-color: var(--rosa); box-shadow: 0 0 0 4px rgb(255 79 139 / .15); }
.caja-guion textarea::placeholder { color: var(--tenue); }
.caja-guion small { color: var(--tenue); font-size: .85rem; padding-left: 6px; }
.opciones-video { display: grid; gap: 10px; margin-top: 16px; padding: 20px; border-radius: 22px; background: var(--capa); border: 1px solid var(--borde); }
.opciones-video .pregunta-op, .opciones-video label { font-weight: 700; font-size: .95rem; margin: 0; }
.opciones-video label { margin-top: 6px; }
.chips-op { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-op button { font: inherit; font-weight: 600; font-size: .92rem; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); cursor: pointer; }
.chips-op button[aria-pressed="true"] { background: var(--texto); color: #000; border-color: var(--texto); }
.chips-op button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.opciones-video textarea { font: inherit; font-size: .98rem; line-height: 1.55; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde-fuerte); border-radius: 14px; padding: 14px; resize: vertical; width: 100%; }
.opciones-video textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 4px rgb(255 79 139 / .15); }
.opciones-video small { color: var(--tenue); font-size: .85rem; }
.detectado { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--suave); }
.detectado .icono { color: var(--rosa); margin-top: 3px; flex: none; }
.detectado b { color: var(--texto); }
.escuchado { margin-top: 12px; border: 1px solid var(--borde); border-radius: 14px; padding: 12px 16px; background: var(--capa-2); }
.escuchado summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--texto); }
.escuchado p { margin: 10px 0 0; color: var(--suave); font-style: italic; line-height: 1.6; }
.plan-mejora { border: 1px solid var(--borde-fuerte); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--capa-2), var(--capa)); }
.plan-mejora ol { list-style: none; margin: 0; padding: 8px 0; }
.plan-mejora li { display: grid; grid-template-columns: 34px 1fr 20px; gap: 14px; align-items: center; padding: 14px 20px; }
.plan-mejora li + li { border-top: 1px solid var(--borde); }
.plan-mejora .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 1.15rem/1 var(--serif); background: rgb(255 79 139 / .12); color: var(--rosa); }
.plan-mejora strong { display: block; font-size: 1rem; margin-bottom: 8px; }
.plan-mejora .borroso { display: grid; gap: 6px; filter: blur(3px); opacity: .55; }
.plan-mejora .borroso i { display: block; height: 8px; border-radius: 4px; background: #34343a; }
.plan-mejora li > .icono { color: var(--tenue); width: 18px; height: 18px; }
.plan-cta { padding: 18px 20px 20px; border-top: 1px solid var(--borde); text-align: center; }
.plan-cta p { color: var(--suave); font-size: .92rem; max-width: 46ch; margin: 0 auto 14px; }
.plan-cta .acciones { justify-content: center; }
.aviso-ia { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: rgb(255 45 85 / .08); border: 1px solid rgb(255 45 85 / .4); margin-bottom: 8px; }
.aviso-ia > .icono { color: var(--vivo); width: 26px; height: 26px; flex: none; margin-top: 2px; }
.aviso-ia strong { display: block; font: italic 400 1.35rem/1.2 var(--serif); margin-bottom: 6px; }
.aviso-ia p { margin: 0 0 8px; color: var(--suave); line-height: 1.6; font-size: .95rem; }
.aviso-ia p:last-child { margin-bottom: 0; }
.aviso-ia b { color: var(--texto); }
.pasos-sol { display: none; list-style: none; margin: 4px 0 0; padding: 0; gap: 8px; }
.pasos-sol li { position: relative; padding-left: 18px; color: var(--suave); font-size: .94rem; line-height: 1.55; }
.pasos-sol li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa); }
.plan-mejora.abierto .pasos-sol { display: grid; }
.plan-mejora.abierto .borroso, .plan-mejora.abierto li > .icono { display: none; }
.plan-mejora.abierto > ol > li { grid-template-columns: 34px 1fr; align-items: start; }
.plan-mejora.abierto .num { background: var(--rosa); color: #000; }
.plan-mejora .pasos-sol li { display: block; padding: 0 0 0 18px; border: 0; }
.puerta-pro { padding: clamp(26px, 4vw, 40px); border-radius: 26px; background: linear-gradient(160deg, #18181a, #0b0b0c); border: 1px solid var(--borde-fuerte); box-shadow: 0 0 120px -50px rgb(255 79 139 / .6); }
.puerta-pro h2 { margin: 14px 0 10px; }
.puerta-pro > p { color: var(--suave); margin: 0 0 18px; line-height: 1.6; }
.puerta-pro .lista-check { margin: 0 0 24px; }
.cinta-ejemplo { margin: 0 0 10px; font-size: .85rem; font-weight: 700; color: var(--tenue); }
.legal-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-bottom: clamp(64px, 8vw, 104px); }
.legal-indice { position: sticky; top: 32px; display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); }
.legal-indice a { padding: 10px 12px; border-radius: 10px; color: var(--suave); font-weight: 600; font-size: .92rem; text-decoration: none; }
.legal-indice a:hover { background: var(--capa-2); color: var(--texto); }
.legal { max-width: 70ch; }
.legal section { scroll-margin-top: 24px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--borde); }
.legal section:last-child { border-bottom: 0; }
.legal h2 { margin: 0 0 18px; }
.legal h3 { font: 700 1.05rem/1.4 var(--sans); margin: 26px 0 8px; color: var(--texto); }
.legal p, .legal li { color: var(--suave); line-height: 1.7; }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; }
.legal b { color: var(--texto); }
.legal a { color: var(--rosa); }
.acepto { font-size: .82rem; color: var(--tenue); margin: 12px 0 0; line-height: 1.5; }
.acepto a, .copy a { color: var(--suave); }
@media (max-width: 1020px) { .legal-grid { grid-template-columns: 1fr; } .legal-indice { position: static; grid-auto-flow: column; overflow-x: auto; } }
.legal-solo { padding-bottom: clamp(64px, 8vw, 104px); }
.legal-solo .legal > section { border-bottom: 0; }
.legal-otro { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--borde); }
.check-mayor { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; font-size: .9rem; line-height: 1.5; color: var(--suave); cursor: pointer; }
.check-mayor input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--rosa); flex: none; }
.check-mayor b { color: var(--texto); }
.check-mayor a { color: var(--rosa); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.capa-mayor { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .82); }
.caja-mayor { width: min(480px, 100%); padding: 30px; border-radius: 24px; background: linear-gradient(160deg, #18181a, #0b0b0c); border: 1px solid var(--borde-fuerte); }
.caja-mayor h2 { font-size: 1.7rem; margin: 0 0 10px; }
.caja-mayor > p { color: var(--suave); margin: 0 0 18px; }
.caja-mayor .acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-legal { display: grid; gap: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.menu .menu-legal a { padding: 7px 14px; font-size: .8rem; font-weight: 600; color: var(--tenue); gap: 11px; }
.menu .menu-legal a .icono { width: 15px; height: 15px; }
.menu .menu-legal a:hover { color: var(--suave); }
.etiqueta-portada { font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 700; color: var(--texto); margin-bottom: 18px; gap: 14px; }
.etiqueta-portada::before { width: 28px; height: 2px; background: var(--rosa); }
.portada .portada-bajada { max-width: 50ch; }
.etiqueta-portada { font-size: 1.04rem; }
@media (min-width: 1100px) { .etiqueta-portada { white-space: nowrap; } }
.menu a .ia { margin-left: auto; font-size: .56rem; font-weight: 800; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--rosa); color: var(--rosa); letter-spacing: .02em; }
.menu a .ia + .pro { margin-left: 4px; }
/* portada v5 */
@media (max-width: 700px) { .portada h1 br.d { display: none; } }
.portada h1 { max-width: none; }
.portada .portada-bajada { max-width: 44ch; }
.menu a .pro { white-space: nowrap; letter-spacing: .02em; }
.tarjeta-ia { width: 236px; }
.ti-cab { display: flex; align-items: center; gap: 12px; }
.ti-anillo { --p: 80; position: relative; width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--capa-2) 0); }
.ti-anillo::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #0e0e0f; }
.ti-anillo b { position: relative; font: 400 1.25rem/1 var(--serif); }
.tarjeta-ia strong { margin-top: 2px; }
.ti-areas { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--borde); display: grid; gap: 8px; }
.ti-areas li { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--suave); font-weight: 600; }
.ti-areas i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.cabecera, .cajon, .barra-pie { min-width: 0; overflow-x: hidden; }
.cuenta-mini { min-width: 0; max-width: 100%; }
.cuenta-mini > span:last-child { min-width: 0; overflow: hidden; }
.cuenta-mini small, .cuenta-mini strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasos-login { list-style: none; margin: 0 0 26px; padding: 16px 18px; display: grid; gap: 12px; border-radius: 16px; background: var(--capa); border: 1px solid var(--borde); }
.pasos-login li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--suave); line-height: 1.45; }
.pasos-login b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem/1 var(--sans); background: rgb(255 79 139 / .15); color: var(--rosa); }
.pasos-login strong { color: var(--texto); }
.toast-bienvenida { position: fixed; z-index: 120; right: 20px; bottom: 20px; display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-radius: 16px; background: #0f1a15; border: 1px solid rgb(78 214 165 / .45); box-shadow: var(--sombra); transition: opacity .5s ease, transform .5s ease; }
.toast-bienvenida .icono { color: var(--ok); width: 22px; height: 22px; }
.toast-bienvenida strong { display: block; }
.toast-bienvenida small { color: var(--suave); }
.toast-bienvenida.fuera { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .toast-bienvenida { transition: none; } }
.toast-error { background: #1a0f13; border-color: rgb(255 79 139 / .5); align-items: flex-start; max-width: 380px; }
.toast-error .icono { color: var(--rosa); }
.toast-error .btn { margin-top: 10px; }
.form-codigo { display: flex; gap: 8px; margin: 12px 0 8px; }
.form-codigo input { flex: 1; min-width: 0; font: 700 1.3rem/1 var(--sans); letter-spacing: .3em; text-align: center; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde-fuerte); border-radius: 12px; padding: 12px; }
.form-codigo input:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 4px rgb(255 79 139 / .15); }
.form-codigo .btn { flex: none; }
div.mensaje small { display: block; color: var(--suave); margin-top: 4px; }
.precio .antes { font-size: .5em; color: var(--tenue); font-weight: 400; margin-right: 6px; }
.plan .anual { margin: 14px 0 0; font-size: .88rem; color: var(--suave); text-align: center; }
.plan .anual a { color: var(--rosa); }
/* Analizá: más estética */
.subida { background: radial-gradient(120% 90% at 50% 0%, rgb(255 79 139 / .08), transparent 60%), var(--capa); border-color: rgb(255 79 139 / .35); }
.subida .icono-grande { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(145deg, rgb(255 79 139 / .25), rgb(217 164 65 / .15)); box-shadow: 0 10px 30px -10px rgb(255 79 139 / .6); }
.pestanas-a button[aria-selected='true'] { background: linear-gradient(135deg, #fff, #f3e7ec); box-shadow: 0 6px 20px -8px rgb(255 79 139 / .6); }
.consejo-captura { border-color: transparent; background: rgb(217 164 65 / .07); }
.vacio-informe { position: relative; overflow: hidden; min-height: 420px; padding: clamp(24px, 3vw, 34px); border-radius: 26px; border: 1px solid var(--borde-fuerte); background: radial-gradient(90% 70% at 100% 0%, rgb(255 79 139 / .16), transparent 60%), linear-gradient(180deg, #141416, #0c0c0d); display: grid; gap: 26px; align-content: start; }
.vi-cab { display: flex; gap: 18px; align-items: center; }
.vi-anillo { width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, #121214 78%, transparent 80%), conic-gradient(var(--rosa) 0 62%, var(--borde) 0); }
.vi-anillo b { font: 400 2rem/1 var(--serif); color: var(--suave); }
.vi-anillo small { font-size: .68rem; color: var(--tenue); font-weight: 700; }
.vi-cab small { color: var(--rosa); font-weight: 700; font-size: .85rem; }
.vi-cab h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 4px 0 0; }
.vi-areas { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: rgb(255 255 255 / .02); border: 1px solid var(--borde); }
.vi-areas div { display: flex; align-items: center; gap: 12px; }
.vi-areas i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); flex: none; }
.vi-areas span { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #2a2a2f, #1c1c20); }
.vi-areas b { margin-left: auto; width: 34px; height: 10px; border-radius: 5px; background: #222226; }
.vi-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vi-pasos li { display: flex; gap: 12px; align-items: center; color: var(--suave); font-weight: 600; font-size: .95rem; }
.vi-pasos span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 1rem/1 var(--serif); background: rgb(255 79 139 / .14); color: var(--rosa); flex: none; }
.informe2 { border-color: var(--borde-fuerte); background: radial-gradient(90% 60% at 100% 0%, rgb(255 79 139 / .12), transparent 60%), linear-gradient(180deg, #141416, #0c0c0d); }
.area-i { border-radius: 14px; padding: 14px 16px; background: rgb(255 255 255 / .02); border: 1px solid var(--borde); margin-bottom: 10px; }
.vi-cab .vi-anillo small { color: var(--tenue); font-size: .68rem; }
/* contadores mensual + extra */
.contadores { display: flex; gap: 12px; flex-wrap: wrap; }
.contador { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde-fuerte); }
.contador small { display: block; font-size: .72rem; font-weight: 700; color: var(--tenue); text-transform: none; }
.contador strong { display: block; font-size: 1.02rem; }
.contador em { display: block; font-style: normal; font-size: .76rem; color: var(--suave); }
.contador .anillo { width: 34px; height: 34px; flex: none; }
.contador.extra .cuenta-extra { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 400 1.1rem/1 var(--serif); background: rgb(217 164 65 / .16); color: var(--oro); }
.contador .btn { margin-left: 6px; }
.aviso-cupo { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: rgb(217 164 65 / .1); color: var(--texto); font-size: .9rem; }
.aviso-cupo .icono { color: var(--oro); width: 18px; height: 18px; }
.paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 460px; margin: 6px auto 0; }
.paquete { position: relative; display: grid; justify-items: center; gap: 2px; padding: 18px 10px 16px; border-radius: 18px; background: var(--capa-2); border: 1px solid var(--borde-fuerte); color: var(--texto); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.paquete:hover { border-color: var(--rosa); }
.paquete strong { font: 400 1.9rem/1 var(--serif); }
.paquete small { color: var(--suave); font-size: .8rem; }
.paquete b { margin-top: 8px; font-size: .95rem; color: var(--rosa); }
.paquete.destacado { border-color: var(--rosa); box-shadow: 0 10px 30px -14px rgb(255 79 139 / .8); }
.paq-tag { position: absolute; top: -10px; font-size: .62rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, var(--rosa), var(--oro)); color: #000; }
.nota-paquetes { font-size: .82rem; color: var(--tenue); margin: 10px 0 0; }
@media (max-width: 520px) { .paquetes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .paquete:hover { transform: translateY(-2px); } }
.contador .anillo { border-radius: 50%; background: conic-gradient(var(--rosa) calc(var(--p) * 1%), var(--capa-2) 0); position: relative; }
.contador .anillo::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--capa); }
.contador small, .contador em, .contador strong { font-family: var(--sans); letter-spacing: 0; }
.contador small { font-weight: 600; }
.contador strong { font-weight: 800; line-height: 1.2; }
.contador em { font-weight: 500; }
.encabezado .contadores { align-self: end; }
/* ===== Analizá: compacto y apto celular ===== */
.analiza-grid > * { min-width: 0; }
.subida { min-height: 210px; padding: 24px 18px; }
.vacio-informe { min-height: 0; }
.contador { padding: 10px 14px; }
@media (max-width: 1020px) {
  body:not(.lectura) .encabezado h1 { font-size: 2rem; }
  .encabezado .suave { font-size: .95rem; }
  .contadores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .contador { gap: 10px; padding: 10px 12px; border-radius: 14px; flex-wrap: wrap; }
  .contador .anillo, .contador.extra .cuenta-extra { width: 28px; height: 28px; }
  .contador .anillo::after { inset: 5px; }
  .contador strong { font-size: .92rem; }
  .contador em { font-size: .7rem; }
  .contador .btn { margin: 4px 0 0; width: 100%; padding: 7px 10px; font-size: .8rem; }
  .pestanas-a { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-bottom: 14px; }
  .pestanas-a button { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 4px; font-size: .78rem; }
  .subida { min-height: 170px; padding: 20px 14px; border-radius: 18px; }
  .subida .icono-grande { width: 50px; height: 50px; border-radius: 16px; }
  .subida strong { font-size: .95rem; }
  .subida small { font-size: .82rem; }
  .consejo-captura { font-size: .86rem; padding: 12px 14px; }
  .accion-analizar { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px; background: linear-gradient(180deg, transparent, var(--fondo) 30%); }
  .accion-analizar .btn { width: 100%; }
  .vacio-informe { padding: 18px; gap: 14px; border-radius: 20px; }
  .vacio-informe .vi-areas { display: none; }
  .vi-anillo { width: 64px; height: 64px; }
  .vi-anillo b { font-size: 1.4rem; }
  .vi-cab h2 { font-size: 1.15rem; }
  .vi-pasos li { font-size: .86rem; }
  .vi-pasos span { width: 24px; height: 24px; font-size: .85rem; }
  .informe2-cab { gap: 14px; }
  .anillo-grande { width: 84px; height: 84px; }
  .paquetes { gap: 8px; }
}
@media (max-width: 520px) { .paquetes { grid-template-columns: repeat(3, 1fr); } .paquete { padding: 14px 6px 12px; } .paquete strong { font-size: 1.5rem; } }
@media (max-width: 1020px) {
  .accion-analizar { position: static; margin: 12px 0 0; padding: 0; background: none; }
  .contador { flex-wrap: nowrap; align-items: flex-start; }
  .contador.extra { flex-wrap: wrap; }
  .contador > div { min-width: 0; }
  .contador em { white-space: normal; }
}
/* Analizá: más compacto también en compu */
.pag-analiza .encabezado { padding: 30px 0 22px; margin-bottom: 26px; }
.pag-analiza .encabezado h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.pag-analiza .encabezado .suave { font-size: .95rem; margin-top: 4px; }
.pag-analiza .encabezado .envoltura { gap: 18px; }
.pag-analiza .contador { padding: 8px 12px; border-radius: 14px; }
.pag-analiza .pestanas-a { margin-bottom: 14px; }
.pag-analiza .pestanas-a button { padding: 9px 14px; font-size: .86rem; }
.pag-analiza .subida { min-height: 160px; padding: 18px; gap: 6px; }
.pag-analiza .subida .icono-grande { width: 48px; height: 48px; border-radius: 14px; }
.pag-analiza .consejo-captura { padding: 11px 14px; font-size: .88rem; margin-top: 12px; }
.pag-analiza .accion-analizar { margin-top: 14px; }
.pag-analiza .analiza-grid { gap: 24px; }
.pag-analiza .vacio-informe { padding: 22px; gap: 16px; }
.pag-analiza .vi-anillo { width: 70px; height: 70px; }
.pag-analiza .vi-anillo b { font-size: 1.5rem; }
.pag-analiza .vi-cab h2 { font-size: 1.3rem; }
.pag-analiza .vi-areas { padding: 14px; gap: 10px; }
button.paquete { font: inherit; cursor: pointer; }
.checkout { display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); border-radius: 24px; border: 1px solid var(--borde-fuerte); background: radial-gradient(90% 70% at 100% 0%, rgb(255 79 139 / .14), transparent 60%), linear-gradient(180deg, #141416, #0c0c0d); }
.volver-paq { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }
.volver-paq .icono { width: 16px; height: 16px; }
.co-resumen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--capa-2); border: 1px solid var(--rosa); }
.co-resumen small { display: block; color: var(--suave); font-size: .82rem; }
.co-resumen strong { display: block; font: 400 1.8rem/1.1 var(--serif); }
.co-resumen em { display: block; font-style: normal; color: var(--tenue); font-size: .8rem; margin-top: 4px; word-break: break-all; }
.co-resumen b { font-size: 1.4rem; color: var(--rosa); white-space: nowrap; }
.co-opciones { display: grid; gap: 10px; }
.co-opciones .btn { width: 100%; justify-content: center; }
/* ===== Tablero (vista previa del informe) ===== */
.btn-todos { width: 100%; margin-top: 10px; justify-content: center; }
.accion-analizar .btn-rosa { width: 100%; justify-content: center; box-shadow: 0 12px 40px -14px rgb(255 79 139 / .9); }
.tablero { position: relative; overflow: hidden; padding: clamp(20px, 3vw, 28px); border-radius: 26px; border: 1px solid var(--borde-fuerte); background: radial-gradient(60% 50% at 50% 30%, rgb(255 79 139 / .14), transparent 70%), linear-gradient(180deg, #141416, #0b0b0c); display: grid; gap: 18px; }
.tb-fila { display: grid; grid-template-columns: 1fr minmax(160px, 1.4fr) 1fr; align-items: center; gap: 10px; }
.tb-barras rect { fill: rgb(255 79 139 / .55); }
.tb-barras rect:nth-child(3n) { fill: rgb(255 255 255 / .18); }
.tb-radar { justify-self: end; width: 100%; max-width: 110px; }
.tb-radar polygon { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 1; }
.tb-radar .r3 { fill: rgb(255 79 139 / .25); stroke: var(--rosa); }
.tb-anillo { position: relative; width: 100%; max-width: 220px; justify-self: center; aspect-ratio: 1; }
.tb-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tb-ticks { fill: none; stroke: rgb(255 79 139 / .35); stroke-width: 6; stroke-dasharray: 1.2 6; }
.tb-pista { fill: none; stroke: #222226; stroke-width: 10; }
.tb-arco { fill: none; stroke: var(--rosa); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 150 500; filter: drop-shadow(0 0 8px rgb(255 79 139 / .8)); }
.tb-interior { fill: #101012; stroke: rgb(255 255 255 / .06); }
.tb-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tb-centro b { font: 400 2.6rem/1 var(--serif); }
.tb-centro b small { font-size: .45em; color: var(--suave); }
.tb-centro span { font-size: .78rem; color: var(--suave); margin-top: 6px; }
.tb-titulo { text-align: center; color: var(--suave); margin: 0; font-size: .95rem; }
.tb-areas { display: grid; gap: 14px; }
.tb-areas div { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
.tb-areas span { font-weight: 600; font-size: .92rem; }
.tb-areas b { font-size: .85rem; color: var(--tenue); font-weight: 600; }
.tb-areas i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #222226; position: relative; overflow: hidden; }
.tb-areas i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, rgb(255 79 139 / .25), rgb(255 79 139 / .6)); }
@media (prefers-reduced-motion: no-preference) { .tb-arco { animation: girar-arco 6s linear infinite; transform-origin: 100px 100px; } @keyframes girar-arco { to { transform: rotate(360deg); } } }
@media (max-width: 1020px) { .tb-fila { grid-template-columns: 1fr; } .tb-barras, .tb-radar { display: none; } .tb-anillo { max-width: 170px; } }
/* ===== Historial ===== */
.hist-pagina { padding-bottom: 80px; display: grid; gap: 18px; }
.hist-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hr-caja { padding: 16px 18px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde-fuerte); }
.hr-caja small { display: block; color: var(--tenue); font-weight: 700; font-size: .78rem; }
.hr-caja strong { display: block; font: 400 2rem/1.1 var(--serif); margin-top: 4px; }
.hr-caja em { display: block; font-style: normal; font-size: .8rem; color: var(--suave); }
.hist-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.hist-filtros button { font: 700 .86rem/1 var(--sans); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); cursor: pointer; }
.hist-filtros button span { opacity: .6; margin-left: 4px; }
.hist-filtros button[aria-selected='true'] { background: var(--texto); color: #000; border-color: var(--texto); }
.hist-lista { display: grid; gap: 10px; }
.hist-item { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); }
.hist-item:hover { border-color: var(--borde-fuerte); }
.hi-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--capa-2); color: var(--rosa); }
.hi-texto { min-width: 0; }
.hi-texto strong { display: block; }
.hi-texto small { color: var(--tenue); font-size: .82rem; }
.hi-texto p { margin: 4px 0 0; color: var(--suave); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-nota { font: 400 1.7rem/1 var(--serif); color: var(--c); }
.hi-nota small { font-size: .5em; color: var(--tenue); }
.hi-acciones { display: flex; gap: 8px; }
.hi-desc { display: inline-flex; align-items: center; gap: 6px; }
.hi-desc .icono { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .hist-resumen { grid-template-columns: 1fr 1fr; } .hist-resumen .hr-caja:last-child { grid-column: 1 / -1; }
  .hist-item { grid-template-columns: 40px 1fr auto; } .hi-acciones { grid-column: 1 / -1; } .hi-acciones .btn { flex: 1; justify-content: center; }
  .hi-texto p { white-space: normal; }
}
/* ===== Imprimir / PDF del informe ===== */
@media print {
  body.imprimiendo { background: #fff !important; color: #111 !important; padding: 0 !important; }
  body.imprimiendo .cabecera, body.imprimiendo .encabezado, body.imprimiendo #herramienta, body.imprimiendo #puerta, body.imprimiendo .toast-bienvenida, body.imprimiendo .plan-cta { display: none !important; }
  body.imprimiendo main.analiza-grid { display: block !important; padding: 0 !important; }
  body.imprimiendo .informe2 { background: #fff !important; border: 0 !important; box-shadow: none !important; color: #111 !important; }
  body.imprimiendo .informe2 * { color: #111 !important; }
  body.imprimiendo .area-i, body.imprimiendo .plan-mejora { background: #fff !important; border-color: #ddd !important; break-inside: avoid; }
  body.imprimiendo .bloque-i h3 { color: #c2185b !important; }
  body.imprimiendo .anillo-grande::before { background: #fff !important; }
  body.imprimiendo .borroso, body.imprimiendo .bloqueado { display: none !important; }
  body.imprimiendo .pasos-sol li::before { background: #c2185b !important; }
}
@media print {
  body.imprimiendo #resultado { display: block !important; }
  body.imprimiendo .plan-mejora .pasos-sol { display: grid !important; }
  body.imprimiendo .plan-mejora li > .icono { display: none !important; }
  body.imprimiendo .informe2-cuerpo, body.imprimiendo .informe2-cab { display: grid !important; }
}
.btn-todos.brilla { border-color: var(--rosa); color: var(--texto); background: rgb(255 79 139 / .12); box-shadow: 0 0 0 0 rgb(255 79 139 / .6); gap: 8px; }
.btn-todos.brilla .icono { color: var(--ok); width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-todos.brilla { animation: latido 1.6s ease-out infinite; }
  @keyframes latido { 0% { box-shadow: 0 0 0 0 rgb(255 79 139 / .65); } 70% { box-shadow: 0 0 0 14px rgb(255 79 139 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 79 139 / 0); } }
}
/* tablero: procesando y resultado */
.tb-arco { stroke: var(--col, var(--rosa)); stroke-dasharray: 30 100; }
.tb-resultado .tb-arco { stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1); animation: none !important; filter: drop-shadow(0 0 10px var(--col)); }
.tb-resultado.lleno .tb-arco { stroke-dasharray: var(--pct) 100; }
.tb-resultado .tb-ticks { stroke: var(--col); opacity: .4; }
.tb-resultado .tb-centro b { color: var(--col); }
.tb-procesando .tb-arco { animation-duration: 1.4s !important; }
.tb-procesando .tb-ticks { animation: tb-pulso 1.4s ease-in-out infinite; }
@keyframes tb-pulso { 50% { opacity: .2; } }
.tb-centro .pulso { animation: tb-pulso 1.2s ease-in-out infinite; }
.tb-centro span { max-width: 13ch; margin-inline: auto; }
.tb-areas i::after { background: var(--c, linear-gradient(90deg, rgb(255 79 139 / .25), rgb(255 79 139 / .6))); }
.tb-resultado .tb-areas i::after { width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.tb-resultado.lleno .tb-areas i::after { width: var(--w); }
.tb-areas .con-dato small { grid-column: 1 / -1; color: var(--suave); font-size: .82rem; line-height: 1.4; }
.tb-barras rect { transition: fill .3s; }
@media (prefers-reduced-motion: reduce) { .tb-resultado .tb-arco, .tb-resultado .tb-areas i::after { transition: none; } .tb-procesando .tb-ticks, .tb-centro .pulso { animation: none; } }
.informe-tablero { background: none; border: 0; padding: 0; }
.informe-tablero > .tablero { border-radius: 26px 26px 0 0; border-bottom: 0; }
.it-titulo { padding: 18px clamp(20px, 3vw, 28px) 4px; background: #0d0d0e; border: 1px solid var(--borde-fuerte); border-top: 0; }
.it-titulo small { color: var(--rosa); font-weight: 700; font-size: .8rem; }
.it-titulo h2 { margin: 4px 0 6px; font-size: 1.5rem; }
.it-titulo p { margin: 0 0 6px; color: var(--suave); }
.informe-tablero .informe2-cuerpo { background: #0d0d0e; border: 1px solid var(--borde-fuerte); border-top: 0; border-radius: 0 0 26px 26px; }
.informe-tablero .firma-informe { border: 0; }
@media print { body.imprimiendo .tablero { background: #fff !important; border-color: #ddd !important; } body.imprimiendo .tb-interior { fill: #fff !important; } body.imprimiendo .it-titulo, body.imprimiendo .informe-tablero .informe2-cuerpo { background: #fff !important; border-color: #ddd !important; } body.imprimiendo .tb-areas span, body.imprimiendo .tb-areas small { color: #111 !important; } }
/* informe compacto con pestañas */
.informe-tablero .tb-areas { gap: 10px; }
.informe-tablero .tb-areas div { gap: 4px 10px; }
.informe-tablero .tb-areas span { font-size: .86rem; }
.informe-tablero .tb-areas i { height: 5px; }
.informe-tablero .tablero { gap: 14px; padding-bottom: 18px; }
.informe-tablero .tb-anillo { max-width: 180px; }
.it-titulo h2 { font-size: 1.25rem; }
.it-titulo p { font-size: .9rem; }
.it-pestanas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--capa-2); border: 1px solid var(--borde); margin-bottom: 14px; }
.it-pestanas button { font: 700 .8rem/1.2 var(--sans); padding: 9px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); cursor: pointer; }
.it-pestanas button[aria-selected='true'] { background: var(--texto); color: #000; }
.it-panel { max-height: 360px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.it-panel .bloque-i { border-top: 0; padding-top: 0; margin-top: 0; }
.it-panel .bloque-i + .bloque-i { margin-top: 18px; }
.diag-lista { display: grid; gap: 12px; }
.diag-item { display: flex; gap: 12px; align-items: flex-start; }
.diag-item .semaforo { margin-top: 6px; flex: none; }
.diag-item strong { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.diag-item strong b { color: var(--suave); font-weight: 700; }
.diag-item p { margin: 2px 0 0; color: var(--suave); font-size: .86rem; line-height: 1.45; }
.firma-ia { max-width: 70ch; margin: 18px auto 40px; padding: 0 16px; text-align: center; font-size: .78rem; line-height: 1.55; color: var(--tenue); }
.firma-ia b { color: var(--rosa); letter-spacing: .02em; }
.pag-analiza .informe-tablero .firma-informe { display: none; }
@media print { body.imprimiendo .it-pestanas, body.imprimiendo .firma-ia { display: none !important; } body.imprimiendo .it-panel { display: block !important; max-height: none !important; overflow: visible !important; } body.imprimiendo .it-panel + .it-panel { margin-top: 18px; } body.imprimiendo .informe-tablero .firma-informe { display: block !important; } }
.it-pestanas .corto { display: none; }
@media (max-width: 700px) {
  .it-pestanas .largo { display: none; } .it-pestanas .corto { display: inline; }
  .caja-guion textarea { min-height: 150px; padding: 16px; }
  .informe-tablero .tablero { padding: 16px; }
  .it-titulo { padding: 14px 16px 4px; }
  .informe-tablero .informe2-cuerpo { padding: 14px 12px 16px; }
  .plan-mejora li { grid-template-columns: 28px 1fr 18px; gap: 10px; padding: 12px; }
  .plan-mejora .num { width: 28px; height: 28px; font-size: 1rem; }
  .plan-mejora strong { font-size: .92rem; }
  .plan-cta { padding: 14px 12px 16px; }
  .it-panel { max-height: 300px; }
  .contador.extra .btn { padding: 6px 8px; }
  .firma-ia { margin: 14px auto 28px; }
  .hist-resumen .hr-caja strong { font-size: 1.6rem; }
}
.btn-instalar { width: 100%; justify-content: center; gap: 8px; border-color: rgb(255 79 139 / .5); }
.btn-instalar .icono { width: 16px; height: 16px; color: var(--rosa); }
.pasos-ios { margin: 0 0 18px; padding-left: 1.2em; display: grid; gap: 10px; color: var(--suave); }
.pasos-ios b { color: var(--texto); }
@media (display-mode: standalone) { .btn-instalar { display: none !important; } }
.menu .btn-instalar { margin: 12px 0 0; }

/* Botón Cerrar sesión visible en el menú */
.btn-salir { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: transparent; border: 1px solid var(--borde); color: var(--suave); font: inherit; font-size: .85rem; cursor: pointer; }
.btn-salir .icono { width: 16px; height: 16px; }
.btn-salir:hover, .btn-salir:focus-visible { color: var(--texto, #f5f1f3); border-color: #ff4f8b; outline: none; }
.btn-activar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #ff4f8b; color: #000; font-weight: 700; font-size: .88rem; text-decoration: none; }
.btn-activar[hidden] { display: none; }
.btn-activar .icono { width: 16px; height: 16px; }
.btn-activar:hover, .btn-activar:focus-visible { filter: brightness(1.08); outline: 2px solid #ff4f8b; outline-offset: 2px; }
.socia-verificada { margin: 12px 0 0; text-align: center; font-size: .86rem; color: var(--suave); }
.socia-verificada span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2ecc8f; color: #000; font-size: .7rem; font-weight: 800; margin-right: 4px; }
.socia-verificada .link-boton { font-size: .86rem; }

/* Ingresar: pantalla limpia, sin menú */
body.pag-ingreso { padding-left: 0 !important; }
body.pag-ingreso .cabecera { display: none; }
body.pag-ingreso .ingreso { min-height: 100vh; }
.volver-inicio { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--suave); text-decoration: none; font-weight: 600; font-size: .9rem; }
.volver-inicio:hover, .volver-inicio:focus-visible { color: #ff4f8b; }
.logo-mini svg { width: 30px; height: 30px; display: block; }
@media (max-width: 1020px) {
  body.pag-ingreso .ingreso-imagen { min-height: 250px; }
  body.pag-ingreso .ingreso-imagen h2 { font-size: 1.75rem; max-width: 18ch; }
  body.pag-ingreso .ingreso-imagen p { font-size: .9rem; margin-top: 8px; }
  body.pag-ingreso .ingreso-form { padding-top: 28px; }
}

/* Ingresar: foto chiquita en lugar de media pantalla */
body.pag-ingreso .ingreso { grid-template-columns: 1fr; }
body.pag-ingreso .ingreso-imagen { display: none; }
body.pag-ingreso .ingreso-form { background: radial-gradient(60% 50% at 50% 0%, rgb(255 79 139 / .10), transparent 70%); }
.ingreso-quien { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ingreso-quien img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 35%; border: 2px solid #ff4f8b; flex: none; }
.ingreso-quien p { margin: 0; font: italic 400 1.05rem/1.35 var(--serif); color: var(--suave); }

/* Ingresar: la marca es el mensaje principal */
body.pag-ingreso .ingreso-form .caja.caja-marca { width: min(100%, 980px); display: grid; grid-template-columns: 1fr 420px; gap: 28px 72px; align-items: center; }
.caja-marca .volver-inicio { grid-column: 1 / -1; margin-bottom: 8px; justify-self: start; }
.marca-login { display: grid; gap: 22px; justify-items: start; }
.logo-grande svg { width: 72px; height: 72px; display: block; }
.marca-titulo { font: italic 400 clamp(3rem, 6vw, 4.6rem)/1.02 var(--serif) !important; margin: 0 !important; letter-spacing: -.01em; }
.que-hay { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.que-hay li { display: flex; align-items: center; gap: 14px; color: var(--suave); font-weight: 600; }
.que-hay .icono { width: 22px; height: 22px; flex: none; color: #ff4f8b; padding: 9px; box-sizing: content-box; border-radius: 12px; background: rgb(255 79 139 / .1); border: 1px solid rgb(255 79 139 / .22); }
.form-login { background: #0e0e10; border: 1px solid var(--borde); border-radius: 24px; padding: 30px 28px; }
.saludo { font-weight: 800; font-size: 1.3rem; margin: 0 0 6px; }
.bajada-login { font-size: .92rem; margin: 0 0 22px; }
@media (max-width: 1020px) {
  body.pag-ingreso .ingreso-form .caja.caja-marca { grid-template-columns: 1fr; gap: 26px; }
  .logo-grande svg { width: 56px; height: 56px; }
  .marca-titulo { font-size: 2.7rem !important; }
  .que-hay { grid-template-columns: 1fr 1fr; gap: 12px; }
  .que-hay li { font-size: .84rem; gap: 10px; align-items: flex-start; }
  .que-hay .icono { width: 18px; height: 18px; padding: 7px; }
  .form-login { padding: 24px 18px; }
}

/* Ingresar: foto en arco junto a la lista */
.marca-login { grid-template-columns: 1fr 210px; grid-template-areas: "logo logo" "titulo titulo" "lista foto"; column-gap: 28px; align-items: end; }
.marca-login .logo-grande { grid-area: logo; }
.marca-login .marca-titulo { grid-area: titulo; }
.marca-login .que-hay { grid-area: lista; align-self: center; }
.foto-arco { grid-area: foto; position: relative; margin: 0; width: 210px; aspect-ratio: 3 / 4; justify-self: end; }
.foto-arco::before { content: ''; position: absolute; inset: -10px 10px 10px -10px; border: 1.5px solid #ff4f8b; border-radius: 999px 999px 22px 22px; opacity: .7; }
.foto-arco img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; border-radius: 999px 999px 22px 22px; box-shadow: 0 24px 60px rgb(255 79 139 / .18); }
.foto-arco::after { content: ''; position: absolute; right: -6px; top: 18%; width: 14px; height: 14px; border-radius: 50%; background: #d9a441; box-shadow: 0 0 0 5px rgb(217 164 65 / .18); }
@media (max-width: 1020px) {
  .marca-login { grid-template-columns: 1fr 112px; grid-template-areas: "logo foto" "titulo foto" "lista lista"; column-gap: 14px; align-items: center; }
  .foto-arco { width: 112px; align-self: center; }
  .foto-arco::before { inset: -6px 6px 6px -6px; }
  .foto-arco::after { width: 10px; height: 10px; right: -4px; }
  .marca-titulo { font-size: 2.35rem !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .foto-arco img { animation: aparecer-arco .7s ease-out both; }
  @keyframes aparecer-arco { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
body.pag-ingreso .ingreso-form .caja.caja-marca { width: min(100%, 1080px); column-gap: 64px; }
.marca-login { grid-template-columns: 1fr 190px; }
.foto-arco { width: 190px; }
.foto-arco::before { inset: -8px; border-radius: 999px 999px 28px 28px; }
.que-hay li { white-space: nowrap; }
@media (max-width: 1020px) {
  .marca-login { grid-template-columns: 1fr 112px; }
  .foto-arco { width: 112px; }
  .foto-arco::before { inset: -5px; }
  .que-hay li { white-space: normal; }
}

/* Ingresar v3: foto a la izquierda (más angosta) con la marca + íconos en fila */
body.pag-login .ingreso { grid-template-columns: minmax(300px, 38%) 1fr; min-height: 100vh; padding: 20px; gap: 20px; }
body.pag-login .ingreso-imagen.login-foto { display: block; position: relative; min-height: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--borde); }
body.pag-login .login-foto img { object-position: center 28%; }
body.pag-login .foto-marca { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 14px; justify-items: start; }
body.pag-login .foto-marca .logo-grande svg { width: 54px; height: 54px; }
body.pag-login .foto-marca .marca-titulo { font-size: clamp(2.4rem, 3.6vw, 3.4rem) !important; text-shadow: 0 2px 24px rgb(0 0 0 / .5); }
body.pag-login .ingreso-form { padding: 24px 16px; }
body.pag-login .caja.caja-login2 { width: min(100%, 440px); display: grid; gap: 22px; }
body.pag-login .caja-login2 .volver-inicio { margin: 0; }
body.pag-login .que-hay { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; }
body.pag-login .que-hay li { flex-direction: column; gap: 8px; text-align: center; font-size: .74rem; line-height: 1.25; white-space: normal; align-items: center; }
body.pag-login .que-hay .icono { width: 20px; height: 20px; padding: 10px; }
@media (max-width: 1020px) {
  body.pag-login .ingreso { grid-template-columns: 1fr; padding: 14px; gap: 6px; }
  body.pag-login .ingreso-imagen.login-foto { height: 230px; }
  body.pag-login .foto-marca { left: 20px; right: 20px; bottom: 18px; gap: 8px; }
  body.pag-login .foto-marca .logo-grande svg { width: 40px; height: 40px; }
  body.pag-login .foto-marca .marca-titulo { font-size: 2.1rem !important; }
  body.pag-login .ingreso-form { padding: 14px 2px 24px; }
  body.pag-login .que-hay { gap: 4px; }
  body.pag-login .que-hay li { font-size: .68rem; gap: 6px; }
  body.pag-login .que-hay .icono { width: 18px; height: 18px; padding: 8px; }
}
body.pag-login .ingreso-form { background: none; }
body.pag-login .login-foto::after { background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .85)); }
@media (max-width: 1020px) { body.pag-login .login-foto img { object-position: center 52%; } }

/* Ingresar v4: foto que se funde con el fondo + íconos en color sobre la foto */
body.pag-login .ingreso { padding: 0; gap: 0; grid-template-columns: minmax(340px, 44%) 1fr; }
body.pag-login .ingreso-imagen.login-foto { border: 0; border-radius: 0; }
body.pag-login .login-foto img {
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
body.pag-login .login-foto::after { background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .75) 78%, #050505); }
body.pag-login .foto-marca { left: 44px; right: 18%; bottom: 44px; gap: 16px; }
body.pag-login .foto-marca .que-hay { grid-template-columns: repeat(5, auto); justify-content: start; gap: 14px; margin-top: 6px; }
body.pag-login .foto-marca .que-hay li { color: #f5f1f3; font-size: .72rem; font-weight: 700; max-width: 74px; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
body.pag-login .foto-marca .que-hay .icono { color: #000; background: linear-gradient(135deg, #ff4f8b, #d9a441); border: 0; padding: 11px; border-radius: 14px; box-shadow: 0 8px 22px rgb(255 79 139 / .35); }
body.pag-login .foto-marca .que-hay li:nth-child(2n) .icono { background: linear-gradient(135deg, #d9a441, #ff4f8b); }
@media (max-width: 1020px) {
  body.pag-login .ingreso { grid-template-columns: 1fr; }
  body.pag-login .ingreso-imagen.login-foto { height: 380px; }
  body.pag-login .login-foto img { object-position: center 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  body.pag-login .foto-marca { left: 18px; right: 18px; bottom: 14px; gap: 10px; }
  body.pag-login .foto-marca .que-hay { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  body.pag-login .foto-marca .que-hay li { font-size: .64rem; max-width: none; }
  body.pag-login .foto-marca .que-hay .icono { padding: 9px; width: 18px; height: 18px; }
  body.pag-login .ingreso-form { padding: 8px 14px 28px; }
}

/* ===== Ingresar v5: foto a toda pantalla que se funde, marca arriba, íconos bajo la foto ===== */
body.pag-login3 { background: #050507; }
.login3 { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(380px, 460px); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 5vw, 80px); padding: 24px clamp(20px, 5vw, 72px) 18px; overflow: hidden; isolation: isolate; }
.login3-fondo { position: absolute; inset: -40px; z-index: -2; background: url(chini-live.jpg) center 30% / cover; filter: blur(38px) saturate(1.3) brightness(.38); transform: scale(1.08); }
.login3::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 85% 50%, rgb(5 5 7 / .55), transparent 70%), linear-gradient(90deg, transparent 40%, rgb(5 5 7 / .55)); pointer-events: none; }
.login3-marca { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 12px; text-decoration: none; color: #f5f1f3; font: italic 400 1.15rem/1.15 var(--serif); }
.login3-marca svg { width: 44px; height: 44px; display: block; }
.login3-izq { grid-column: 1; grid-row: 2 / 4; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; margin: -24px 0 -18px calc(-1 * clamp(20px, 5vw, 72px)); min-height: 0; }
.login3-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  -webkit-mask-image: radial-gradient(85% 80% at 40% 42%, #000 45%, transparent 100%); mask-image: radial-gradient(85% 80% at 40% 42%, #000 45%, transparent 100%); }
.login3-izq .que-hay { position: relative; display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 44px clamp(28px, 6vw, 80px); padding: 0; list-style: none; }
.login3-izq .que-hay li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px; text-align: center; color: #f5f1f3; font-size: .74rem; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 10px rgb(0 0 0 / .8); }
.login3-izq .que-hay .icono { width: 22px; height: 22px; padding: 12px; box-sizing: content-box; border-radius: 16px; color: #000; background: linear-gradient(135deg, #ff4f8b, #d9a441); box-shadow: 0 10px 26px rgb(255 79 139 / .4); }
.login3-izq .que-hay li:nth-child(2n) .icono { background: linear-gradient(135deg, #d9a441, #ff4f8b); }
.login3-der { grid-column: 2; grid-row: 2; align-self: center; padding: 28px 0; }
.login3-der .caja { width: 100%; }
.login3-der h1 { font-size: clamp(2.6rem, 4vw, 3.4rem); margin: 0 0 10px; }
.login3-der .bajada-login { color: #cfc8cc; font-size: 1rem; margin: 0 0 18px; }
.login3-der .pasos-login { background: rgb(14 14 16 / .6); backdrop-filter: blur(8px); }
.login3-der .campo input { background: rgb(5 5 7 / .55); }
.login3-pie { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin: 0; color: #8f888c; font-size: .78rem; text-align: right; position: relative; }
@media (max-width: 1020px) {
  .login3 { grid-template-columns: 1fr; grid-template-rows: auto; padding: 0 16px 20px; column-gap: 0; }
  .login3-marca { position: absolute; top: 16px; left: 0; right: 0; justify-content: center; z-index: 2; }
  .login3-izq { grid-column: 1; grid-row: 1; height: 400px; margin: 0 -16px; }
  .login3-foto { object-position: center 45%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .login3-izq .que-hay { justify-content: center; gap: 6px; margin: 0 8px 4px; flex-wrap: nowrap; }
  .login3-izq .que-hay li { width: 20%; font-size: .66rem; gap: 6px; }
  .login3-izq .que-hay .icono { width: 18px; height: 18px; padding: 10px; border-radius: 13px; }
  .login3-der { grid-column: 1; grid-row: 2; padding: 22px 0 10px; }
  .login3-der h1 { font-size: 2.4rem; }
  .login3-pie { grid-row: 3; justify-self: center; text-align: center; margin-top: 14px; }
}
@media (min-width: 1021px) {
  .login3-foto {
    -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 98%), linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(90deg, #000 50%, transparent 98%), linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  }
}
@media (max-width: 1020px) {
  .login3-foto { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 55%, transparent 100%); }
}
@media (min-width: 1021px) { .login3-foto { object-position: center 62%; } }
.mensaje-verifica { text-align: left; line-height: 1.55; }
.verifica-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 10px; font-size: 1.3rem; color: #000; background: linear-gradient(135deg, #ff4f8b, #d9a441); }
.verifica-titulo { display: block; font-size: 1.25rem; margin-bottom: 4px; }
.form-codigo input::placeholder { letter-spacing: normal; font-weight: 500; font-size: 1rem; color: var(--tenue); }
.login3-der, .login3-der .caja, #msg { min-width: 0; }
.mensaje-verifica { overflow-wrap: anywhere; }

/* Menú lateral: sin barra de scroll y más compacto para que entre todo */
.cabecera .envoltura, .cajon, .barra-pie, #nav-cuenta { scrollbar-width: none; -ms-overflow-style: none; }
.cabecera .envoltura::-webkit-scrollbar, .cajon::-webkit-scrollbar, .barra-pie::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 1021px) {
  .cabecera .envoltura { gap: 22px; padding: 24px 18px 18px; }
  .cajon { gap: 16px; overflow: visible; }
  .menu a { padding: 10px 14px; }
  .menu-legal { margin-top: 8px; padding-top: 8px; }
  .menu-legal a { padding: 7px 14px; }
  .barra-pie { gap: 10px; padding-top: 14px; overflow: visible; }
  .btn-activar, .btn-salir { margin-top: 6px; padding-top: 8px; padding-bottom: 8px; }
  .frase-mini { font-size: .88rem; }
}
/* Mi carnet con mail largo: que no se salga del menú */
.cajon, .barra-pie, #nav-cuenta { min-width: 0; max-width: 100%; }
#nav-cuenta { display: grid; grid-template-columns: minmax(0, 1fr); }
.cuenta-mini, .btn-activar, .btn-salir { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.frase-mini, .copy { overflow-wrap: anywhere; }

/* Login: cinta de marca + sello de seguridad, y avisos más chicos y finos */
.login3-cinta { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-weight: 700; font-size: .92rem; color: #f5f1f3; }
.login3-cinta::before { content: ''; width: 26px; height: 2px; background: #ff4f8b; flex: none; }
.login3-seguro { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .08); color: #8f888c; font-size: .8rem; }
.login3-seguro svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #2ecc8f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mensaje-verifica { padding: 16px 18px; font-size: .86rem; font-weight: 500; line-height: 1.5; background: rgb(14 14 16 / .7); border-color: rgb(255 79 139 / .28); backdrop-filter: blur(8px); }
.mensaje-verifica .verifica-icono { width: 30px; height: 30px; border-radius: 10px; font-size: .9rem; margin: 0 0 8px; }
.mensaje-verifica .verifica-titulo { font-size: 1rem; margin-bottom: 2px; }
.mensaje-verifica .form-codigo { margin-top: 12px; }
.mensaje-verifica .form-codigo input { font-size: 1.05rem; padding: 10px; }
.mensaje-verifica small { font-size: .74rem; }
.mensaje-verifica .link-boton { font-size: .82rem; }
.toast-bienvenida { padding: 10px 14px; gap: 10px; border-radius: 12px; max-width: 300px; }
.toast-bienvenida strong { font-size: .86rem; }
.toast-bienvenida small { font-size: .74rem; }
.toast-bienvenida .icono { width: 18px; height: 18px; }
@media (max-width: 1020px) { .toast-bienvenida { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
/* Login: todo entra en una pantalla */
@media (min-width: 1021px) {
  .login3-der { padding: 8px 0; }
  .login3-der h1 { font-size: clamp(2.3rem, 3.2vw, 2.9rem); margin-bottom: 6px; }
  .login3-der .bajada-login { font-size: .92rem; margin-bottom: 14px; }
  .login3-der .pasos-login { padding: 12px 16px; gap: 6px; margin-bottom: 14px; }
  .login3-der .pasos-login li { font-size: .84rem; }
  .login3-der .campo { margin-bottom: 10px; }
  .login3-der .check-mayor { margin: 8px 0 12px; font-size: .86rem; }
  .login3-der .separador { margin: 12px 0; }
  .login3-cinta { margin-bottom: 10px; font-size: .86rem; }
  .login3-seguro { margin-top: 12px; padding-top: 12px; }
  .login3-der p.suave { margin-top: 14px !important; }
}

/* Clave: campo con botón Ver, cambio de modo y ventana para crearla */
.clave-caja { position: relative; display: flex; }
.clave-caja input { flex: 1; min-width: 0; padding-right: 84px !important; }
.ver-clave { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: rgb(255 255 255 / .06); border: 1px solid var(--borde); color: var(--suave); font: 600 .78rem/1 var(--sans); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.ver-clave:hover, .ver-clave:focus-visible { color: #ff4f8b; border-color: #ff4f8b; outline: none; }
.cambiar-modo { margin: 12px 0 0; text-align: center; font-size: .86rem; }
.capa-clave .caja-mayor { text-align: left; max-width: 420px; }
.capa-clave .clave-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #ff4f8b, #d9a441); margin-bottom: 14px; }
.capa-clave .clave-icono .icono { width: 22px; height: 22px; color: #000; }
.capa-clave h2 { margin: 0 0 6px; }
.capa-clave p { margin: 0 0 16px; color: var(--suave); font-size: .92rem; }
.capa-clave .campo { margin-bottom: 12px; }
.capa-clave .campo input { width: 100%; box-sizing: border-box; }
.capa-clave .clave-error { min-height: 1.2em; margin: 0 0 8px; color: #ff6f9f; font-size: .84rem; font-weight: 600; }
.capa-clave .acciones { display: flex; align-items: center; gap: 16px; }
.capa-clave .acciones .btn { flex: 1; }
.crear-clave .campo { margin-bottom: 10px; }
.crear-clave .campo label { font-size: .84rem; }
.crear-clave .verifica-icono .icono { width: 16px; height: 16px; color: #000; }
.crear-clave .clave-error { min-height: 1.1em; margin: 0 0 8px; color: #ff6f9f; font-size: .82rem; font-weight: 600; }
.crear-clave { margin-top: 4px; border: 1px solid rgb(255 79 139 / .28); border-radius: 16px; }

/* Login: foto del fénix */
.login3-fondo { background-image: url(chini-fenix.jpg); background-position: center 40%; filter: blur(42px) saturate(1.2) brightness(.32); }
@media (min-width: 1021px) { .login3-foto { object-position: center 34%; } }
@media (max-width: 1020px) { .login3-izq { height: 460px; } .login3-foto { object-position: center 36%; } }
/* Login: foto real de Chini en su estudio */
.login3-fondo { background-image: url(chini-login.jpg); background-position: center 30%; filter: blur(46px) saturate(1.3) brightness(.36); }
@media (min-width: 1021px) { .login3-foto { object-position: center 22%; } }
@media (max-width: 1020px) { .login3-foto { object-position: center 20%; } }
@media (min-width: 1021px) {
  .login3-foto { inset: 0 auto 0 50%; transform: translateX(-50%); width: auto; height: 100%; aspect-ratio: 260 / 585; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 24%, #000 58%, transparent 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 2%, #000 24%, #000 58%, transparent 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}

/* Login: fondo con los colores de la marca (rosa y azul), no marrón */
.login3-fondo { background: radial-gradient(45% 55% at 18% 30%, rgb(60 90 255 / .35), transparent 70%), radial-gradient(50% 60% at 40% 75%, rgb(255 79 139 / .32), transparent 70%), radial-gradient(40% 50% at 85% 15%, rgb(255 79 139 / .14), transparent 70%), #07060a; filter: blur(30px); }
@media (min-width: 1021px) {
  .login3-foto { -webkit-mask-composite: source-over; mask-composite: add;
    -webkit-mask-image: radial-gradient(closest-side at 50% 44%, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 44%, #000 62%, transparent 100%); }
}

/* Login: cabecera con marca, lema y descripción */
.login3-cabeza { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 10px; margin: 0 auto 8px; max-width: 720px; position: relative; z-index: 2; }
.login3-cabeza .login3-marca { justify-self: center; }
.login3-lema { margin: 0; font-weight: 700; font-size: .95rem; color: #ff7aa8; letter-spacing: .01em; }
.login3-desc { margin: 0; color: #cfc8cc; font-size: .9rem; line-height: 1.6; max-width: 64ch; }
.login3-desc em { font-family: var(--serif); color: #f5f1f3; }
@media (min-width: 1021px) {
  .login3 { grid-template-rows: auto 1fr auto; }
  .login3-izq { grid-row: 2 / 4; margin-top: 0; }
  .login3-der h1 { font-size: clamp(2rem, 2.8vw, 2.5rem); }
}
@media (max-width: 1020px) {
  .login3-cabeza { position: relative; padding: 18px 4px 4px; order: -1; }
  .login3-cabeza .login3-marca { position: static; }
  .login3-izq { grid-row: 2; height: 380px; }
  .login3-der { grid-row: 3; }
  .login3-pie { grid-row: 4; }
  .login3-lema { font-size: .86rem; }
  .login3-desc { font-size: .84rem; }
}
@media (min-width: 1021px) {
  .login3 { padding-top: 18px; }
  .login3-cabeza { max-width: 980px; gap: 6px; margin-bottom: 4px; }
  .login3-desc { max-width: 100ch; font-size: .86rem; line-height: 1.5; }
  .login3-der { padding: 4px 0; }
  .login3-der .pasos-login { display: none; }
  .login3-der .bajada-login { margin-bottom: 12px; }
}

/* Login: ícono de la IA resaltado + frase debajo de los íconos */
.login3-izq .que-hay { align-items: flex-end; }
.login3-izq .que-hay li.ia { width: 112px; color: #fff; }
.login3-izq .que-hay li.ia .icono { width: 30px; height: 30px; padding: 15px; border-radius: 20px; background: linear-gradient(135deg, #ff4f8b, #ffb347); box-shadow: 0 0 0 3px rgb(255 79 139 / .35), 0 12px 34px rgb(255 79 139 / .6); }
.login3-izq .que-hay li.ia span { font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .login3-izq .que-hay li.ia .icono { animation: brillo-ia 2.4s ease-in-out infinite; }
  @keyframes brillo-ia { 50% { box-shadow: 0 0 0 6px rgb(255 79 139 / .2), 0 14px 40px rgb(255 79 139 / .8); } }
}
.login3-frase { position: relative; margin: -30px 0 40px clamp(28px, 6vw, 80px); max-width: 46ch; color: #e9e3e6; font-size: .86rem; line-height: 1.5; text-shadow: 0 1px 10px rgb(0 0 0 / .8); }
@media (max-width: 1020px) {
  .login3-izq .que-hay li.ia { width: 26%; }
  .login3-izq .que-hay li.ia .icono { width: 22px; height: 22px; padding: 11px; }
  .login3-izq .que-hay li { width: 18.5%; }
  .login3-frase { margin: 8px 12px 0; max-width: none; text-align: center; font-size: .8rem; }
}
.login3-izq .que-hay li.ia { white-space: normal !important; }
.login3-izq .que-hay li.ia span { display: block; max-width: 112px; }
@media (max-width: 1020px) { .login3-izq .que-hay { align-items: flex-start; } .login3-izq .que-hay li.ia span { max-width: none; } }

/* ===== Login v6: descripción | foto (+frase debajo) | íconos en columna ===== */
body.pag-login3 .login3 .login3-izq { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) auto 128px; grid-template-areas: "desc foto iconos"; align-items: center; gap: 32px; margin: 0; padding: 8px 0 20px; min-height: 0; }
body.pag-login3 .login3-izq > .login3-desc { grid-area: desc; margin: 0; text-align: left; max-width: 34ch; font-size: .95rem; line-height: 1.7; color: #d8d1d5; }
body.pag-login3 .login3-izq > .login3-desc em { font-size: 1.15em; }
body.pag-login3 .login3-figura { grid-area: foto; margin: 0; display: grid; justify-items: center; gap: 10px; }
body.pag-login3 .login3-figura .login3-foto { position: static; inset: auto; transform: none; display: block; width: auto; height: min(56vh, 500px); aspect-ratio: 260 / 585; object-fit: cover; object-position: center 22%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 64%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 64%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
body.pag-login3 .login3-figura .login3-frase { position: static; margin: 0; max-width: 34ch; text-align: center; font-size: .84rem; line-height: 1.5; color: #e9e3e6; }
body.pag-login3 .login3-izq > .que-hay { grid-area: iconos; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0; padding: 0; }
body.pag-login3 .login3-izq > .que-hay li { width: 100%; font-size: .7rem; gap: 6px; }
body.pag-login3 .login3-izq > .que-hay li .icono { width: 16px; height: 16px; padding: 9px; border-radius: 12px; }
body.pag-login3 .login3-izq > .que-hay li.ia { width: 100%; }
body.pag-login3 .login3-izq > .que-hay li.ia .icono { width: 22px; height: 22px; padding: 12px; border-radius: 16px; }
body.pag-login3 .login3-izq > .que-hay li.ia span { max-width: 120px; font-size: .72rem; }
@media (min-width: 1021px) {
  body.pag-login3 .login3 { grid-template-columns: 1fr minmax(360px, 440px); }
  body.pag-login3 .login3 .login3-izq { grid-row: 2 / 4; align-self: center; }
}
@media (max-width: 1020px) {
  body.pag-login3 .login3 .login3-izq { grid-template-columns: 1fr; grid-template-areas: "desc" "foto" "iconos"; gap: 16px; height: auto; margin: 0; padding: 6px 0; }
  body.pag-login3 .login3-izq > .login3-desc { text-align: center; max-width: none; font-size: .86rem; }
  body.pag-login3 .login3-figura .login3-foto { height: 380px; }
  body.pag-login3 .login3-izq > .que-hay { flex-direction: row; align-items: flex-start; justify-content: center; gap: 4px; }
  body.pag-login3 .login3-izq > .que-hay li { width: 19%; font-size: .64rem; }
  body.pag-login3 .login3-izq > .que-hay li.ia { width: 24%; }
}
body.pag-login3 .login3-figura { gap: 0; }
body.pag-login3 .login3-figura .login3-frase { margin-top: -28px; position: relative; }
@media (max-width: 1020px) {
  body.pag-login3 .login3-figura .login3-foto { width: 100%; height: 340px; aspect-ratio: auto; object-position: center 24%; }
  body.pag-login3 .login3-figura .login3-frase { margin-top: -18px; }
}

/* Login: descripción con título, texto chico y firma */
body.pag-login3 .login3-izq > .login3-desc { justify-self: end; max-width: 300px; text-align: left; font-size: inherit; }
.desc-titulo { margin: 0 0 12px; font: italic 400 clamp(2rem, 2.6vw, 2.5rem)/1.05 var(--serif); color: #f5f1f3; }
.login3-desc p { margin: 0; font-size: .84rem; line-height: 1.65; color: #cfc8cc; }
.login3-desc .desc-firma { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgb(255 79 139 / .35); display: grid; gap: 2px; }
.firma-nombre { font: italic 400 1.7rem/1 var(--serif); color: #ff7aa8; }
.firma-rol { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #e9e3e6; }
@media (max-width: 1020px) {
  body.pag-login3 .login3-izq > .login3-desc { justify-self: center; max-width: 34ch; text-align: center; }
  .desc-titulo { font-size: 2rem; }
  .login3-desc .desc-firma { justify-items: center; }
}
body.pag-login3 .login3-pie { grid-column: 1 / -1; justify-self: center; text-align: center; width: 100%; }
/* Login: lema más grande y todo más junto al centro */
.login3-lema { font-size: 1.12rem; }
@media (min-width: 1021px) {
  body.pag-login3 .login3 { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: 40px; max-width: none; margin: 0; padding-left: max(24px, calc((100vw - 1460px) / 2)); padding-right: max(24px, calc((100vw - 1460px) / 2)); }
  body.pag-login3 .login3 .login3-izq { gap: 26px; }
}
@media (max-width: 1020px) { .login3-lema { font-size: .98rem; } }

/* Login: marca de agua del fénix (solo contorno) a la izquierda */
.login3-marca-agua { position: absolute; z-index: 0; pointer-events: none; left: max(-40px, calc((100vw - 1460px) / 2 - 120px)); top: 50%; width: min(46vw, 640px); height: auto; transform: translateY(-46%) rotate(-8deg); opacity: .16; }
.login3 > :not(.login3-fondo):not(.login3-marca-agua) { position: relative; z-index: 1; }
@media (max-width: 1020px) { .login3-marca-agua { left: -30%; top: 6%; width: 130%; transform: none; opacity: .09; } }
@media (prefers-reduced-motion: no-preference) {
  .login3-marca-agua { animation: respira-fenix 8s ease-in-out infinite; }
  @keyframes respira-fenix { 50% { opacity: .22; } }
}
@media (max-width: 1020px) and (prefers-reduced-motion: no-preference) { @keyframes respira-fenix { 50% { opacity: .13; } } }
img.login3-marca-agua { opacity: .14; filter: saturate(.9); width: min(40vw, 560px); transform: translateY(-48%) rotate(-6deg); }
@keyframes respira-fenix { 50% { opacity: .2; } }
@media (max-width: 1020px) { img.login3-marca-agua { left: -10%; top: 4%; width: 120%; transform: none; opacity: .08; } }
@media (min-width: 1021px) { img.login3-marca-agua { opacity: .24; left: max(10px, calc((100vw - 1460px) / 2 - 40px)); } }
@media (min-width: 1021px) and (prefers-reduced-motion: no-preference) { @keyframes respira-fenix { 50% { opacity: .32; } } }
/* Marca de agua: fénix rosa intenso, más visible y corrido hacia el margen */
@media (min-width: 1021px) {
  img.login3-marca-agua { opacity: .42; filter: drop-shadow(0 0 30px rgb(255 79 139 / .35)); width: min(36vw, 520px); left: max(-30px, calc((100vw - 1460px) / 2 - 150px)); top: 52%; transform: translateY(-50%) rotate(-8deg); }
  .login3-izq > .login3-desc { text-shadow: 0 2px 14px rgb(5 5 7 / .9); }
  .login3-fondo { background: radial-gradient(45% 55% at 12% 25%, rgb(60 90 255 / .22), transparent 70%), radial-gradient(50% 60% at 40% 75%, rgb(255 79 139 / .3), transparent 70%), radial-gradient(40% 50% at 85% 15%, rgb(255 79 139 / .14), transparent 70%), #07060a; }
}
@media (min-width: 1021px) and (prefers-reduced-motion: no-preference) { @keyframes respira-fenix { 50% { opacity: .55; } } }
@media (max-width: 1020px) { img.login3-marca-agua { opacity: .16; } }
@media (max-width: 1020px) and (prefers-reduced-motion: no-preference) { @keyframes respira-fenix { 50% { opacity: .22; } } }
/* Celular: foto entera (vertical) como en la compu, no la cara recortada */
@media (max-width: 1020px) {
  body.pag-login3 .login3-figura .login3-foto { width: auto; height: 420px; aspect-ratio: 260 / 585; object-position: center 22%;
    -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 64%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 64%, transparent 100%); }
  body.pag-login3 .login3-figura .login3-frase { margin-top: -22px; }
}