/* ============================================================
   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-login.jpg') center 18% / 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; }
}
.btn-google-principal { display: flex; align-items: center; justify-content: center; gap: 10px; color: #000 !important; }
.btn-google-principal svg { background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }
/* Inicio: la tarjeta "Análisis con IA" no tapa la cara de Chini */
@media (min-width: 1021px) { .tarjeta-flotante { left: -205px; top: 250px; } }
@media (min-width: 641px) and (max-width: 1020px) { .tarjeta-flotante { left: -40px; top: auto; bottom: 150px; } }

/* Redes: solo íconos */
.redes { display: flex; gap: 10px; align-items: center; }
.redes a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #ff7aa8; background: rgb(255 79 139 / .1); border: 1px solid rgb(255 79 139 / .28); transition: transform .15s ease, background .15s ease, color .15s ease; }
.redes a svg { width: 17px; height: 17px; }
.redes a:hover, .redes a:focus-visible { background: #ff4f8b; color: #000; transform: translateY(-2px); outline: none; }
.redes-login { justify-content: center; margin-bottom: 8px; }
.redes-grande { margin-top: 18px; gap: 12px; }
.redes-grande a { width: 44px; height: 44px; }
.redes-grande a svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: reduce) { .redes a { transition: none; } }
.login3-pie p { margin: 0; }

/* Pie con derechos reservados en todas las páginas */
.pie-derechos { margin-top: 56px; padding: 26px 16px 30px; border-top: 1px solid var(--borde); text-align: center; color: #8f888c; font-size: .78rem; }
.pie-derechos p { margin: 0; }
body.imprimiendo .pie-derechos { display: none; }

/* ===== Pulido general: cuadros más compactos y proporcionados ===== */
.seccion { padding: clamp(40px, 5vw, 64px) 0; }
.seccion .cabeza { margin-bottom: 22px; }
.encabezado { padding: 36px 0 24px; margin-bottom: 28px; }
.encabezado h1 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
/* Biblioteca: tarjetas más bajas */
.miniatura { aspect-ratio: 16 / 7; }
.ficha { border-radius: 16px; }
.ficha-cuerpo { padding: 14px 16px 16px; gap: 4px; }
.ficha-cuerpo h3 { font-size: 1rem; line-height: 1.3; }
.ficha-cuerpo p { font-size: .86rem; }
.ficha-pie { padding-top: 8px; font-size: .78rem; }
/* Quién soy */
.retrato { aspect-ratio: 1 / 1; max-width: 420px; border-radius: 22px; }
.valor { padding: 20px; border-radius: 16px; }
.valor h3 { margin: 10px 0 4px; font-size: 1rem; }
.valor p { font-size: .88rem; }
/* Membresía */
.plan { padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; }
.plan ul { margin: 18px 0 20px; gap: 10px; }
.plan li { font-size: .92rem; }
.metodo { padding: 16px 18px; border-radius: 14px; }
.metodo strong { font-size: 1.2rem; margin-bottom: 4px; }
.metodo p { font-size: .86rem; }
/* Banda final (llamado a la acción) más chica */
.banda-cta { padding: clamp(22px, 3vw, 32px) clamp(24px, 3.4vw, 40px); border-radius: 20px; gap: 20px; }
.banda-cta h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 22ch; }
.banda-cta p { margin-top: 6px; font-size: .92rem; }
.llamado { padding: clamp(40px, 5vw, 60px) 0; }
/* Preguntas: lista centrada y más angosta */
.preguntas, .faq { max-width: 760px; }
.pie-derechos { margin-top: 32px; }
@media (max-width: 640px) {
  .miniatura { aspect-ratio: 16 / 6; }
  .seccion { padding: 32px 0; }
}
.pasos { gap: 16px; }
.pasos li { padding: 20px 20px; border-radius: 16px; }
.pasos li::before { font-size: 1.9rem; margin-bottom: 10px; }
.pasos h3 { font-size: 1rem; margin-bottom: 4px; }
.pasos p { font-size: .88rem; }
.seccion h2, .cabeza h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.puerta-pro { padding: clamp(22px, 2.6vw, 30px); border-radius: 20px; }
.puerta-pro h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 10px 0 8px; }
.puerta-pro > p { font-size: .92rem; }
.puerta-pro .lista-check li { font-size: .9rem; }
.hist-pagina { padding-bottom: 32px; }
.hist-pagina .esperando { padding: 36px 20px; }
.hist-pagina .esperando h2 { font-size: 1.5rem; }
.panel-vacio { padding: clamp(22px, 3vw, 36px); border-radius: 20px; margin-bottom: 40px; }
.panel-vacio h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); }

/* Biblioteca: menú de estantes arriba, sin columna lateral */
.bib2 { padding-bottom: 20px; }
.bib-menu { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 18px; margin-bottom: 22px; border-bottom: 1px solid var(--borde); }
.bib-menu::-webkit-scrollbar { display: none; }
.bib-menu button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); font: 700 .86rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
.bib-menu button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bib-menu button:hover { color: var(--texto); border-color: #ff4f8b; }
.bib-menu button[aria-pressed="true"] { background: #f5f1f3; color: #000; border-color: #f5f1f3; }
.bib2 .grilla { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bib-cerrada { text-align: center; padding: 40px 20px; border-radius: 20px; background: var(--capa); border: 1px solid var(--borde); max-width: 560px; margin: 0 auto; }
.bib-cerrada h2 { font-size: 1.6rem; margin: 12px 0 6px; }
.bib-cerrada p { color: var(--suave); margin: 0 0 18px; }
.bib-cerrada .acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bib-candado { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #ff4f8b, #d9a441); }
.bib-candado .icono { width: 22px; height: 22px; color: #000; }
/* Pie sin línea; en el Inicio entra todo en una pantalla */
.pie-derechos { border-top: 0; }
body.inicio .portada { min-height: calc(100vh - 120px); padding: 32px 0 16px; }
body.inicio .pie-derechos { margin-top: 0; padding: 8px 16px 18px; }
@media (max-width: 1020px) { body.inicio .portada { min-height: 0; } }
/* Quién soy: foto fundida con el fondo, como en el login */
.retrato { border: 0; box-shadow: none; border-radius: 0; background: none; overflow: visible; aspect-ratio: 4 / 5; }
.retrato img { -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 100%); }
.retrato figcaption { left: 50%; right: auto; bottom: 8%; transform: translateX(-50%); white-space: nowrap; background: rgb(0 0 0 / .45); }

/* Quién soy en una sola pantalla */
body.pag-quien .encabezado { padding: 22px 0 14px; margin-bottom: 14px; }
body.pag-quien .encabezado h1 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
body.pag-quien .quien { gap: clamp(28px, 4vw, 64px); padding-bottom: 8px; grid-template-columns: .75fr 1.25fr; }
body.pag-quien .retrato { max-height: calc(100vh - 230px); width: auto; aspect-ratio: 4 / 5; justify-self: center; }
body.pag-quien .quien-texto h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); margin-top: 6px; }
body.pag-quien .quien-texto p { font-size: .9rem; margin-top: 10px; line-height: 1.55; }
body.pag-quien .quien-texto .firma-grande { margin-top: 12px; padding-top: 10px; font-size: .95rem; }
body.pag-quien .quien-texto .firma-grande small { display: inline; margin-left: 6px; }
.valores-mini { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.valores-mini .valor { padding: 12px 14px; border-radius: 12px; }
.valores-mini .valor .icono { width: 18px; height: 18px; }
.valores-mini .valor h3 { font-size: .86rem; margin: 6px 0 2px; }
.valores-mini .valor p { font-size: .78rem; margin: 0; line-height: 1.4; }
.quien-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.quien-pie .acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.quien-pie .redes-grande { margin-top: 0; }
body.pag-quien .pie-derechos { margin-top: 8px; padding: 10px 16px 16px; }
@media (max-width: 1020px) { body.pag-quien .retrato { max-height: none; width: min(100%, 360px); } .valores-mini { grid-template-columns: 1fr; } }
body.pag-quien .valores-mini .valor p { margin: 0; font-size: .78rem; }
body.pag-quien .valores-mini .valor h3 { margin: 4px 0 2px; }
@media (min-width: 1021px) and (max-height: 760px) {
  body.pag-quien .encabezado { padding: 14px 0 8px; margin-bottom: 8px; }
  body.pag-quien .encabezado .migas { display: none; }
  body.pag-quien .quien-texto h2 { font-size: 1.5rem; }
  body.pag-quien .quien-texto p { font-size: .84rem; margin-top: 6px; }
  body.pag-quien .valores-mini { margin-top: 8px; }
  body.pag-quien .quien-pie { margin-top: 10px; }
  body.pag-quien .retrato { max-height: calc(100vh - 190px); }
}
@media (max-width: 1020px) {
  body.pag-quien .quien { grid-template-columns: 1fr; gap: 20px; }
  body.pag-quien .retrato { width: min(100%, 320px); aspect-ratio: 4 / 5; }
}
/* Quién soy: foto chica arriba, lo demás abajo a lo ancho */
body.pag-quien .quien { grid-template-columns: auto 1fr; align-items: center; row-gap: 18px; }
body.pag-quien .retrato { width: clamp(200px, 20vw, 290px); max-height: none; aspect-ratio: 4 / 5; }
body.pag-quien .retrato figcaption { font-size: 1rem; padding: 8px 12px; }
.quien-abajo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.quien-abajo .valores-mini { margin-top: 0; }
.quien-abajo .acciones { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1020px) {
  body.pag-quien .quien { grid-template-columns: 1fr; }
  body.pag-quien .retrato { width: min(70%, 260px); }
  .quien-abajo { grid-template-columns: 1fr; }
  .quien-abajo .acciones { flex-direction: row; flex-wrap: wrap; }
}
.quien-subt { grid-column: 1 / -1; margin: 6px 0 -6px; }
/* Quién soy: fénix de marca de agua a la izquierda */
.quien-main { position: relative; overflow: hidden; }
.quien-fenix { position: absolute; z-index: 0; pointer-events: none; left: -60px; top: 50%; width: min(26vw, 380px); transform: translateY(-50%) rotate(-8deg); opacity: .32; filter: drop-shadow(0 0 24px rgb(255 79 139 / .3)); }
.quien-main > .quien { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .quien-fenix { animation: respira-fenix-q 8s ease-in-out infinite; } @keyframes respira-fenix-q { 50% { opacity: .45; } } }
@media (max-width: 1020px) { .quien-fenix { left: -25%; top: 4%; width: 90%; transform: none; opacity: .12; } }
@media (min-width: 1021px) { .quien-fenix { left: 4px; width: min(19vw, 300px); top: 46%; transform: translateY(-50%) rotate(-6deg); opacity: .4; } }
@media (min-width: 1021px) and (prefers-reduced-motion: no-preference) { @keyframes respira-fenix-q { 50% { opacity: .55; } } }
/* Fénix detrás de la foto, con las alas asomando */
body.pag-quien .retrato { position: relative; isolation: isolate; }
body.pag-quien .retrato > img:not(.quien-fenix) { position: relative; z-index: 1; }
body.pag-quien .retrato figcaption { z-index: 2; }
.quien-fenix, body.pag-quien .retrato .quien-fenix { position: absolute; z-index: 0; left: 50%; top: 48%; width: 175%; max-width: none; height: auto; transform: translate(-50%, -50%); opacity: .5; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 0 22px rgb(255 79 139 / .35)); }
@media (min-width: 1021px) { body.pag-quien .retrato .quien-fenix { left: 50%; width: 175%; transform: translate(-50%, -50%); opacity: .5; } }
@media (max-width: 1020px) { body.pag-quien .retrato .quien-fenix { width: 150%; opacity: .35; left: 50%; top: 48%; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: no-preference) { @keyframes respira-fenix-q { 50% { opacity: .65; } } }
@media (min-width: 1021px) { body.pag-quien .retrato .quien-fenix { width: 145%; top: 44%; } }
@media (max-width: 1020px) { body.pag-quien .retrato .quien-fenix { width: 130%; top: 44%; } }
/* Quién soy: fénix a la derecha de la pantalla */
.quien-fenix-der { position: absolute; z-index: 0; pointer-events: none; right: -40px; top: 6%; width: min(24vw, 360px); transform: rotate(8deg) scaleX(-1); opacity: .35; filter: drop-shadow(0 0 24px rgb(255 79 139 / .3)); }
@media (prefers-reduced-motion: no-preference) { .quien-fenix-der { animation: respira-fenix-d 8s ease-in-out infinite; } @keyframes respira-fenix-d { 50% { opacity: .5; } } }
@media (max-width: 1020px) { .quien-fenix-der { right: -30%; top: 30%; width: 80%; opacity: .12; } }
@media (min-width: 1021px) { .quien-fenix-der { right: 12px; top: 4%; width: min(20vw, 320px); } }
@media (min-width: 1021px) { .quien-fenix-der { right: 8px; top: 12%; width: min(15vw, 270px); } }
@media (min-width: 1021px) and (max-width: 1500px) { .quien-fenix-der { width: 13vw; opacity: .28; } }
/* Fénix pegado al texto (logo de la marca) */
body.pag-quien .quien-texto { position: relative; }
body.pag-quien .quien-texto > :not(.quien-fenix-der) { position: relative; z-index: 1; }
@media (min-width: 1021px) {
  body.pag-quien .quien-texto .quien-fenix-der { position: absolute; left: 525px; right: auto; top: 70px; width: min(16vw, 250px); transform: rotate(6deg) scaleX(-1); opacity: .45; }
}
@media (min-width: 1021px) and (max-width: 1500px) { body.pag-quien .quien-texto .quien-fenix-der { left: 500px; width: 170px; } }
@media (max-width: 1020px) { body.pag-quien .quien-texto .quien-fenix-der { position: absolute; right: -10%; left: auto; top: 0; width: 60%; opacity: .12; } }
@media (min-width: 1501px) { body.pag-quien .quien-texto .quien-fenix-der { left: 545px; top: 92px; width: 230px; } }
@media (min-width: 1501px) { body.pag-quien .quien-texto .quien-fenix-der { left: 540px; top: 72px; width: 300px; opacity: .5; } }
@media (min-width: 1021px) and (max-width: 1500px) { body.pag-quien .quien-texto .quien-fenix-der { left: 500px; top: 60px; width: 205px; } }
@media (min-width: 1501px) { body.pag-quien .quien-texto .quien-fenix-der { top: 92px; } }
@media (min-width: 1021px) and (max-width: 1500px) { body.pag-quien .quien-texto .quien-fenix-der { top: 76px; } }

/* Membresía en una pantalla */
body.pag-membresia .encabezado { padding: 22px 0 14px; margin-bottom: 16px; }
body.pag-membresia .encabezado h1 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
body.pag-membresia .planes { gap: 16px; }
body.pag-membresia .plan { padding: 20px 24px; }
body.pag-membresia .plan-cab strong { font-size: 1.4rem; }
body.pag-membresia .precio { font-size: clamp(2.2rem, 3.4vw, 2.8rem); margin-top: 10px; }
body.pag-membresia .precio-detalle { margin-top: 2px; font-size: .86rem; }
body.pag-membresia .plan ul { margin: 12px 0 14px; gap: 6px; }
body.pag-membresia .plan li { font-size: .86rem; }
body.pag-membresia .plan .btn { padding-block: 10px; }
body.pag-membresia .anual { margin-top: 8px; font-size: .82rem; }
body.pag-membresia .nota { margin-top: 12px; padding: 10px 16px; font-size: .86rem; align-items: center; }
.mem-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.mem-extra > div { padding: 14px 18px; border-radius: 16px; background: var(--capa); border: 1px solid var(--borde); }
.mem-extra .etiqueta { margin-bottom: 8px; font-size: .8rem; }
.mem-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mem-pasos li { display: flex; gap: 10px; align-items: center; font-size: .86rem; color: var(--suave); }
.mem-pasos li b { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgb(255 79 139 / .15); color: #ff7aa8; font-size: .76rem; }
.mem-pasos li strong { color: var(--texto); }
.mem-paises .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mem-paises .chips span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--borde-fuerte); font-size: .8rem; font-weight: 700; }
.mem-paises p.suave { margin: 0; font-size: .82rem; }
body.pag-membresia .pie-derechos { margin-top: 10px; padding: 10px 16px 16px; }
@media (max-width: 1020px) { .mem-extra { grid-template-columns: 1fr; } }
body.pag-membresia .membresia2 { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.pag-membresia .plan.simple { display: flex; flex-direction: column; }
body.pag-membresia .plan.simple .botones-plan { margin-top: auto; }
body.pag-membresia .encabezado .migas { display: none; }
body.pag-membresia .encabezado { padding: 18px 0 12px; margin-bottom: 12px; }
body.pag-membresia .encabezado p.suave { margin-top: 2px; }
body.pag-membresia .precio { font-size: clamp(2rem, 3vw, 2.5rem); margin-top: 6px; display: inline-block; }
body.pag-membresia .precio-detalle { display: inline-block; margin-left: 10px; }
body.pag-membresia .plan.destacado ul { grid-template-columns: 1fr 1fr; column-gap: 18px; }
body.pag-membresia .plan.destacado ul li:nth-child(2) { grid-column: 1 / -1; }
.mem-extra { grid-template-columns: 1.1fr 1fr 1fr; }
body.pag-membresia .mem-extra .nota { margin: 0; padding: 14px 18px; border-radius: 16px; background: none; flex-direction: column; align-items: flex-start; gap: 6px; font-size: .84rem; }
@media (max-width: 1020px) { body.pag-membresia .plan.destacado ul { grid-template-columns: 1fr; } .mem-extra { grid-template-columns: 1fr; } body.pag-membresia .precio-detalle { display: block; margin-left: 0; } }
body.pag-membresia .plan.destacado ul { grid-template-columns: 1fr; }
body.pag-membresia .plan .precio-detalle { margin-left: 8px; }
.mem-paises .chips span { padding: 4px 10px; }

/* Membresía: carnecito ilustrado en cada plan */
.plan { position: relative; }
.mini-carnet { position: absolute; right: 24px; top: 62px; width: 150px; height: 94px; border-radius: 12px; padding: 10px 12px; box-sizing: border-box;
  background: linear-gradient(135deg, #1c1c20 0%, #121214 55%, #3a1424 100%); border: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 12px 30px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 79 139 / .15) inset; transform: rotate(-6deg); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 6px; overflow: hidden; }
.mini-carnet.pro { background: linear-gradient(135deg, #ff4f8b 0%, #c2185b 55%, #d9a441 120%); border-color: rgb(255 255 255 / .25); }
.mini-carnet::after { content: ''; position: absolute; inset: -40% -60% auto auto; width: 120%; height: 60%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent); transform: rotate(25deg); }
.mc-logo svg { width: 20px; height: 20px; display: block; }
.mc-marca { font: italic 400 .62rem/1.1 var(--serif); color: #f5f1f3; align-self: center; }
.mc-chip { grid-column: 1; grid-row: 2; width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #e7c46a, #a97a22); margin-top: 8px; }
.mc-tipo { grid-column: 1 / -1; grid-row: 3; font: italic 400 .95rem/1 var(--serif); color: #fff; align-self: end; }
.mc-barras { position: absolute; right: 10px; bottom: 11px; width: 46px; height: 12px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 1px, transparent 1px 3px, rgb(255 255 255 / .55) 3px 5px, transparent 5px 7px); opacity: .7; }
.mini-carnet.pro .mc-barras { background: repeating-linear-gradient(90deg, rgb(0 0 0 / .45) 0 1px, transparent 1px 3px, rgb(0 0 0 / .45) 3px 5px, transparent 5px 7px); }
@media (prefers-reduced-motion: no-preference) { .plan:hover .mini-carnet { transform: rotate(-2deg) translateY(-3px); transition: transform .3s ease; } }
@media (max-width: 1020px) { .mini-carnet { width: 112px; height: 70px; top: 58px; right: 16px; padding: 7px 9px; } .mc-marca { font-size: .5rem; } .mc-tipo { font-size: .78rem; } .mc-chip { width: 16px; height: 12px; margin-top: 4px; } }
body.pag-membresia .plan-cab { justify-content: flex-start; padding-right: 170px; }
body.pag-membresia .precio-detalle { display: block; margin-left: 0 !important; padding-right: 170px; }
body.pag-membresia .plan ul { margin-top: 16px; }
.mini-carnet { top: 22px; right: 26px; }
@media (max-width: 1020px) { body.pag-membresia .plan-cab { padding-right: 0; flex-wrap: wrap; } body.pag-membresia .precio-detalle { padding-right: 0; } .mini-carnet { position: relative; top: auto; right: auto; margin: 4px 0 10px auto; display: grid; } body.pag-membresia .plan { display: flex; flex-direction: column; } }
@media (max-width: 1020px) {
  body.pag-membresia .plan { display: block; }
  .mini-carnet { position: absolute; top: 64px; right: 14px; margin: 0; width: 104px; height: 66px; }
  body.pag-membresia .precio-detalle { padding-right: 110px; }
}
/* Membresía: contenedores más chicos */
body.pag-membresia .membresia2, body.pag-membresia .mem-extra { max-width: 1040px; margin-inline: auto; }
body.pag-membresia .planes { align-items: start; gap: 14px; }
body.pag-membresia .plan { padding: 16px 20px; border-radius: 18px; }
body.pag-membresia .plan.simple .botones-plan { margin-top: 0; }
body.pag-membresia .precio { font-size: clamp(1.8rem, 2.6vw, 2.2rem); }
body.pag-membresia .plan ul { margin: 12px 0 12px; gap: 4px; }
body.pag-membresia .plan li { font-size: .84rem; }
body.pag-membresia .plan .btn { padding-block: 8px; font-size: .9rem; }
.mini-carnet { width: 128px; height: 80px; top: 16px; right: 20px; padding: 8px 10px; }
.mc-marca { font-size: .54rem; } .mc-tipo { font-size: .85rem; } .mc-chip { width: 18px; height: 13px; margin-top: 5px; } .mc-logo svg { width: 17px; height: 17px; }
body.pag-membresia .plan-cab, body.pag-membresia .precio-detalle { padding-right: 140px; }
.mem-extra { gap: 12px; margin-top: 12px; }
.mem-extra > div, body.pag-membresia .mem-extra .nota { padding: 12px 14px; border-radius: 14px; }
.mem-pasos li { font-size: .82rem; }
body.pag-membresia .mem-extra .nota { font-size: .8rem; }
.mem-paises p.suave { font-size: .78rem; }
.mem-paises .chips span { font-size: .74rem; padding: 3px 9px; }
@media (max-width: 1020px) { body.pag-membresia .plan-cab { padding-right: 0; } body.pag-membresia .precio-detalle { padding-right: 110px; } .mini-carnet { width: 104px; height: 66px; top: 58px; right: 14px; } }
body.pag-membresia .encabezado .envoltura { max-width: 1040px; }
body.pag-membresia .planes { align-items: stretch; }
.plan-intro { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgb(255 79 139 / .07); border: 1px solid rgb(255 79 139 / .18); }
.plan-intro strong { display: block; font: italic 400 1.05rem/1.2 var(--serif); color: #ff7aa8; margin-bottom: 3px; }
.plan-intro p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--suave); }
.bib-intro { margin: 0 0 14px; max-width: 70ch; }
.bib-intro h2 { margin: 0 0 4px; font: italic 400 clamp(1.4rem, 2vw, 1.7rem)/1.2 var(--serif); color: #ff7aa8; }
.bib-intro p { margin: 0; color: var(--suave); font-size: .92rem; line-height: 1.55; }
/* Membresía reordenada: descripción arriba, cuadritos, después los planes */
.mem-desc { margin: 8px 0 0; max-width: 78ch; font-size: .9rem; line-height: 1.55; color: var(--suave); }
.mem-desc strong { font: italic 400 1.05rem var(--serif); color: #ff7aa8; margin-right: 4px; }
body.pag-membresia .mem-extra { margin-top: 0; margin-bottom: 14px; }
body.pag-membresia .encabezado { margin-bottom: 14px; }
body.pag-membresia .plan.simple { display: flex; flex-direction: column; }
body.pag-membresia .plan.simple .botones-plan { margin-top: auto; }
body.pag-membresia .plan.simple ul { margin-bottom: 18px; }
body.pag-membresia .mem-extra > div, body.pag-membresia .mem-extra .nota { padding: 10px 14px; }
@media (max-width: 1020px) { body.pag-membresia .plan.simple { display: block; } }
/* Biblioteca: fénix a la derecha, debajo de los estantes */
.bib2 { position: relative; }
.bib2 > :not(.bib-fenix) { position: relative; z-index: 1; }
.bib-fenix { position: absolute; z-index: 0; pointer-events: none; right: 70px; top: 190px; width: min(15vw, 240px); transform: rotate(6deg) scaleX(-1); opacity: .42; filter: drop-shadow(0 0 22px rgb(255 79 139 / .3)); }
@media (prefers-reduced-motion: no-preference) { .bib-fenix { animation: respira-fenix-b 8s ease-in-out infinite; } @keyframes respira-fenix-b { 50% { opacity: .58; } } }
@media (max-width: 1020px) { .bib-fenix { display: none; } }
@media (min-width: 1021px) and (max-width: 1500px) { .bib-fenix { right: 10px; width: 150px; } }
@media (max-width: 1020px) { body.pag-quien .quien-texto .quien-fenix-der, .quien-fenix-der { display: none; } }
@media (min-width: 1021px) { .bib-fenix { top: -22px; right: 40px; width: 150px; } }
@media (min-width: 1021px) and (max-width: 1500px) { .bib-fenix { top: -18px; right: 10px; width: 130px; } }
/* Biblioteca: sin línea bajo el título y fénix más grande */
body.pag-biblio .encabezado { border-bottom: 0; margin-bottom: 8px; }
body.pag-biblio .encabezado .envoltura { position: relative; z-index: 1; }
@media (min-width: 1021px) { .bib-fenix { top: -150px; right: 30px; width: 250px; opacity: .45; } }
@media (min-width: 1021px) and (max-width: 1500px) { .bib-fenix { top: -130px; right: 0; width: 200px; } }

/* Biblioteca: estantes con vida */
.estantes-viva { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.estante-v { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 16px 18px 14px; border-radius: 16px; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, #121214) 0%, #0e0e10 60%); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c) 55%, transparent); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.estante-v:hover, .estante-v:focus-visible { transform: translateY(-3px); border-color: var(--c); box-shadow: inset 0 -3px 0 var(--c), 0 14px 30px -12px color-mix(in srgb, var(--c) 60%, transparent); outline: none; }
.ev-icono { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.ev-icono .icono { width: 21px; height: 21px; }
.estante-v strong { font: italic 400 1.25rem/1.15 var(--serif); color: #f5f1f3; }
.estante-v small { grid-column: 2; color: var(--suave); font-size: .8rem; line-height: 1.35; padding-right: 54px; }
.ev-pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgb(255 255 255 / .08); font-size: .76rem; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, #fff); }
.ev-pie .icono { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.ev-pie em { font-style: normal; color: var(--c); }
.ev-lomos { position: absolute; right: 14px; top: 12px; display: flex; align-items: flex-end; gap: 3px; height: 46px; opacity: .85; }
.ev-lomos i { display: block; width: 8px; border-radius: 2px 2px 1px 1px; background: var(--c); }
.ev-lomos i:nth-child(1) { height: 70%; opacity: .55; }
.ev-lomos i:nth-child(2) { height: 100%; }
.ev-lomos i:nth-child(3) { height: 82%; opacity: .75; transform: rotate(8deg); transform-origin: bottom left; margin-left: 2px; }
.ev-lomos i:nth-child(4) { height: 60%; opacity: .4; }
.ev-lomos::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -3px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .2); }
@media (prefers-reduced-motion: no-preference) {
  .estante-v { animation: ev-entra .5s ease both; animation-delay: calc(var(--i) * 60ms); }
  @keyframes ev-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .estante-v:hover .ev-lomos i:nth-child(3) { transform: rotate(0deg); transition: transform .25s ease; }
}
.bib-cerrada-mini { display: flex; align-items: center; gap: 16px; text-align: left; max-width: none; padding: 14px 18px; }
.bib-cerrada-mini h2 { font-size: 1.15rem; margin: 0 0 2px; }
.bib-cerrada-mini p { margin: 0; font-size: .86rem; }
.bib-cerrada-mini .acciones { margin-left: auto; }
@media (max-width: 1020px) { .estantes-viva { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .estantes-viva { grid-template-columns: 1fr; } .bib-cerrada-mini { flex-wrap: wrap; } .bib-cerrada-mini .acciones { margin-left: 0; } }
.estante-v { grid-template-rows: auto auto 1fr; padding: 13px 16px 11px; }
.ev-pie { align-self: end; margin-top: 10px; padding-top: 8px; }
.estante-v small { align-self: start; }
.estantes-viva { gap: 12px; }

/* Preguntas: chat */
body.pag-preguntas .encabezado { padding: 18px 0 10px; margin-bottom: 12px; border-bottom: 0; }
body.pag-preguntas .encabezado h1 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.chat-pagina { max-width: 820px; }
.chat-pagina .chat { position: relative; left: auto; right: auto; bottom: auto; z-index: auto;  display: flex; flex-direction: column; height: min(calc(100vh - 230px), 640px); min-height: 460px; border-radius: 20px; background: linear-gradient(170deg, #141416, #0b0b0d); border: 1px solid var(--borde-fuerte); box-shadow: 0 0 80px -40px rgb(255 79 139 / .5); overflow: hidden; }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); background: rgb(255 79 139 / .05); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid #ff4f8b; }
.chat-cab strong { display: block; font: italic 400 1.1rem/1.1 var(--serif); }
.chat-cab small { color: var(--suave); font-size: .76rem; display: flex; align-items: center; gap: 6px; }
.chat-cab small i { width: 7px; height: 7px; border-radius: 50%; background: #2ecc8f; box-shadow: 0 0 0 3px rgb(46 204 143 / .2); }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.msj { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.5; animation: msj-entra .25s ease both; }
.msj-bot { align-self: flex-start; background: var(--capa-2, #1b1b1e); border: 1px solid var(--borde); border-bottom-left-radius: 4px; color: #e9e3e6; }
.msj-yo { align-self: flex-end; background: #ff4f8b; color: #000; font-weight: 600; border-bottom-right-radius: 4px; }
.msj-link { display: inline-block; margin: 8px 8px 0 0; padding: 6px 12px; border-radius: 999px; background: rgb(255 79 139 / .14); color: #ff7aa8; font-weight: 700; font-size: .82rem; text-decoration: none; }
.msj-link:hover { background: #ff4f8b; color: #000; }
@keyframes msj-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msj { animation: none; } }
.escribiendo { display: inline-flex; gap: 4px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--suave); animation: punto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 50% { opacity: .2; transform: translateY(-2px); } }
.chat-sugerencias { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; border-top: 1px solid var(--borde); scrollbar-width: none; }
.chat-sugerencias::-webkit-scrollbar { display: none; }
.chat-sugerencias button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); font: 600 .8rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
.chat-sugerencias button:hover, .chat-sugerencias button:focus-visible { color: #fff; border-color: #ff4f8b; outline: none; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; }
.chat-form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: #070708; color: var(--texto); font: inherit; font-size: .95rem; }
.chat-form input:focus { outline: none; border-color: #ff4f8b; box-shadow: 0 0 0 3px rgb(255 79 139 / .15); }
.chat-form .btn { padding-inline: 18px; }
body.pag-preguntas .pie-derechos { margin-top: 10px; padding: 10px 16px 14px; }
@media (max-width: 640px) { .chat { height: calc(100vh - 200px); min-height: 420px; } .msj { max-width: 92%; } }
.chat-pagina { max-width: 820px; margin: 0 auto; }
.chat-pagina .chat { height: min(calc(100vh - 260px), 640px); }
/* Preguntas: frecuentes a un costado, chat al otro */
.chat-pagina { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.faq-mini { max-height: min(calc(100vh - 260px), 640px); overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.faq-mini .etiqueta { margin-bottom: 6px; }
.faq-mini .faq { max-width: none; }
.faq-mini .faq summary { padding: 11px 32px 11px 0; font-size: .88rem; font-weight: 600; }
.faq-mini .faq summary::after { width: 8px; height: 8px; right: 4px; }
.faq-mini .faq details p { padding: 0 0 12px; font-size: .82rem; line-height: 1.5; max-width: none; }
.faq-mini .faq details p a { color: #ff7aa8; font-weight: 700; }
@media (max-width: 1020px) { .chat-pagina { grid-template-columns: 1fr; } .faq-mini { max-height: none; order: 2; } }
/* Chat más chico y sin cortes */
.chat-pagina { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.chat-pagina .chat { height: min(calc(100vh - 290px), 500px); min-height: 400px; border-radius: 18px; }
.chat-cab { padding: 10px 14px; }
.chat-avatar { width: 34px; height: 34px; }
.chat-cab strong { font-size: 1rem; }
.chat-mensajes { padding: 12px; gap: 8px; }
.msj { font-size: .85rem; padding: 8px 12px; max-width: 88%; }
.chat-sugerencias { flex-wrap: wrap; overflow: visible; gap: 5px; padding: 8px 12px; }
.chat-sugerencias button { padding: 5px 10px; font-size: .74rem; }
.chat-sugerencias button:nth-child(n+5) { display: none; }
.chat-form { padding: 8px 10px 10px; }
.chat-form input { padding: 9px 12px; font-size: .88rem; }
.chat-form .btn { padding: 8px 16px; font-size: .88rem; }

/* ===== Asistente flotante ===== */
.asistente { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.as-boton { position: relative; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 2px solid #ff4f8b; background: #0b0b0d; cursor: pointer; box-shadow: 0 10px 28px rgb(255 79 139 / .45); transition: transform .2s ease; }
.as-boton img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; display: block; }
.as-boton:hover, .as-boton:focus-visible { transform: scale(1.06); outline: none; }
.as-punto { position: absolute; right: 1px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc8f; border: 2px solid #0b0b0d; }
@media (prefers-reduced-motion: no-preference) { .asistente:not(.abierto) .as-boton { animation: as-latido 3s ease-in-out infinite; } @keyframes as-latido { 50% { box-shadow: 0 10px 28px rgb(255 79 139 / .45), 0 0 0 8px rgb(255 79 139 / .12); } } }
.as-panel { width: 320px; height: 430px; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: linear-gradient(170deg, #151517, #0b0b0d); border: 1px solid var(--borde-fuerte); box-shadow: 0 20px 50px rgb(0 0 0 / .6), 0 0 60px -30px rgb(255 79 139 / .6); }
.as-panel[hidden] { display: none; }
.as-panel header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: rgb(255 79 139 / .06); }
.as-panel header img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid #ff4f8b; }
.as-panel header strong { display: block; font: italic 400 .98rem/1.1 var(--serif); }
.as-panel header small { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--suave); }
.as-panel header small i { width: 6px; height: 6px; border-radius: 50%; background: #2ecc8f; }
.as-x { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--suave); cursor: pointer; }
.as-x .icono { width: 16px; height: 16px; }
.as-x:hover { color: #fff; background: rgb(255 255 255 / .06); }
.as-msjs { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px; scrollbar-width: thin; }
.as-m { max-width: 88%; padding: 7px 11px; border-radius: 14px; font-size: .8rem; line-height: 1.45; animation: msj-entra .25s ease both; }
.as-bot { align-self: flex-start; background: #1b1b1e; border: 1px solid var(--borde); border-bottom-left-radius: 4px; color: #e9e3e6; }
.as-yo { align-self: flex-end; background: #ff4f8b; color: #000; font-weight: 600; border-bottom-right-radius: 4px; }
.as-link { display: inline-block; margin: 6px 6px 0 0; padding: 4px 10px; border-radius: 999px; background: rgb(255 79 139 / .14); color: #ff7aa8; font-weight: 700; font-size: .74rem; text-decoration: none; }
.as-link:hover { background: #ff4f8b; color: #000; }
.as-sug { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--borde); }
.as-sug button { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); font: 600 .7rem/1.2 var(--sans); cursor: pointer; }
.as-sug button:hover, .as-sug button:focus-visible { color: #fff; border-color: #ff4f8b; outline: none; }
.as-form { display: flex; gap: 6px; padding: 6px 10px 10px; }
.as-form input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: #070708; color: var(--texto); font: inherit; font-size: .82rem; }
.as-form input:focus { outline: none; border-color: #ff4f8b; }
.as-form button { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; background: #ff4f8b; color: #000; cursor: pointer; }
.as-form button .icono { width: 16px; height: 16px; }
body.imprimiendo .asistente { display: none; }
@media (max-width: 640px) { .asistente { right: 12px; bottom: 12px; } .as-panel { width: calc(100vw - 24px); height: min(70vh, 460px); } .as-boton { width: 50px; height: 50px; } }
/* el aviso de bienvenida no choca con el botón */
.toast-bienvenida { right: 88px; }
@media (max-width: 1020px) { .toast-bienvenida { right: 16px; bottom: 76px; } }

/* Preguntas: frecuentes + fénix */
.preg2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.preg-lado { display: grid; justify-items: center; text-align: center; gap: 10px; }
.preg-fenix { width: min(100%, 330px); opacity: .7; filter: drop-shadow(0 0 30px rgb(255 79 139 / .35)); }
@media (prefers-reduced-motion: no-preference) { .preg-fenix { animation: respira-fenix-p 8s ease-in-out infinite; } @keyframes respira-fenix-p { 50% { opacity: .9; } } }
.preg-frase { margin: 0; font: italic 400 1.2rem var(--serif); color: #f5f1f3; }
@media (max-width: 1020px) { .preg2 { grid-template-columns: 1fr; } .preg-lado { order: 2; } .preg-fenix { width: 180px; } }
/* Biblioteca: sin la fila de botones (los estantes ya están en las tarjetas) */
.bib-menu[hidden] { display: none; }
.bib-intro { margin-bottom: 18px; }
.bib-volver { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); font: 700 .84rem/1 var(--sans); cursor: pointer; }
.bib-volver:hover { color: #fff; border-color: #ff4f8b; }
.bib-estante-tit { margin: 0 0 14px; font: italic 400 1.6rem/1.2 var(--serif); color: var(--c); }
@media (min-width: 1021px) { .bib-fenix { top: -150px; } }

/* Pie de página siempre a la misma altura: pegado abajo en todas las páginas */
body.app:not(.pag-login3):not(.imprimiendo) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.app:not(.pag-login3) > main { flex: 1 0 auto; }
body.app .pie-derechos { margin-top: auto !important; padding: 18px 16px 18px !important; }
body.app .pie-derechos .redes-login { margin-bottom: 6px; }
body.inicio:not(.imprimiendo) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.inicio > main { flex: 1 0 auto; }
body.inicio .pie-derechos { margin-top: auto !important; padding: 18px 16px 18px !important; }
body.inicio .portada { min-height: 0; }
/* Analizá tu perfil: entra con el pie a la vista */
@media (min-width: 1021px) {
  body.pag-analiza .encabezado { padding: 16px 0 12px; margin-bottom: 14px; }
  body.pag-analiza .encabezado .migas { display: none; }
  body.pag-analiza .encabezado h1 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
  body.pag-analiza main.analiza-grid { padding-bottom: 8px; }
  body.pag-analiza .firma-ia { margin: 4px auto 0; font-size: .72rem; }
  body.pag-analiza .pie-derechos { padding: 10px 16px 14px !important; }
}

/* ===== Guía (lectura en la web) ===== */
.guia { position: relative; max-width: 760px; margin: 0 auto; padding: 0 16px 24px; }
.g-portada { position: relative; overflow: hidden; margin: 18px 0 18px; padding: 26px 28px 28px; border-radius: 22px;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%), linear-gradient(160deg, #18181b, #0b0b0d); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.g-fenix { position: absolute; right: -30px; top: -20px; width: 230px; opacity: .22; pointer-events: none; }
.g-volver { position: relative; display: inline-block; margin-bottom: 18px; font-size: .82rem; font-weight: 700; color: var(--suave); text-decoration: none; }
.g-volver:hover { color: var(--c); }
.g-estante { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: var(--c); }
.g-estante i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.g-portada h1 { position: relative; margin: 0 0 8px; font: italic 400 clamp(2.2rem, 4.4vw, 3.2rem)/1.05 var(--serif); }
.g-bajada { position: relative; margin: 0; max-width: 52ch; color: #d8d1d5; font-size: 1rem; line-height: 1.6; }
.g-bloque { margin: 0 0 14px; padding: 20px 22px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); }
.g-tag { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #000; background: var(--c); }
.g-bloque h2 { margin: 0 0 10px; font: italic 400 1.45rem/1.25 var(--serif); }
.g-bloque p { margin: 0 0 10px; color: var(--suave); line-height: 1.7; }
.g-bloque p strong { color: var(--texto); }
.g-error { border-left: 3px solid var(--c); }
.g-error p { font: italic 400 1.08rem/1.65 var(--serif); color: #ece6e9; }
.g-nota { font: 600 .78rem/1.4 var(--sans) !important; color: #d9a441 !important; margin: 0 !important; }
.g-formula { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-formula li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); }
.g-formula b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); font: italic 400 1.1rem var(--serif); }
.g-formula strong { display: block; font-size: .92rem; }
.g-formula span { font-size: .82rem; color: var(--suave); line-height: 1.45; }
.g-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-antes, .g-despues { padding: 14px 16px; border-radius: 14px; }
.g-antes { background: rgb(255 92 92 / .07); border: 1px solid rgb(255 92 92 / .3); }
.g-despues { background: rgb(46 204 143 / .07); border: 1px solid rgb(46 204 143 / .35); }
.g-antes small, .g-despues small { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.g-antes small { color: #ff7b7b; } .g-despues small { color: #2ecc8f; }
.g-antes p, .g-despues p { margin: 0 0 10px; color: #f5f1f3; font-size: .92rem; line-height: 1.6; }
.g-antes em, .g-despues em { font-size: .78rem; color: var(--suave); }
.g-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g-check label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #0e0e10; border: 1px solid var(--borde); cursor: pointer; }
.g-check input { appearance: none; width: 20px; height: 20px; flex: none; margin: 1px 0 0; border-radius: 6px; border: 2px solid var(--borde-fuerte); display: grid; place-items: center; cursor: pointer; }
.g-check input:checked { background: var(--c); border-color: var(--c); }
.g-check input:checked::after { content: '✓'; color: #000; font-size: .78rem; font-weight: 900; }
.g-check input:checked + span { color: var(--suave); text-decoration: line-through; }
.g-check input:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.g-progreso { margin: 10px 0 0 !important; font-size: .82rem; font-weight: 700; color: var(--c) !important; }
.g-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(120deg, rgb(255 79 139 / .16), rgb(217 164 65 / .1)); border: 1px solid rgb(255 79 139 / .35); }
.g-cta strong { display: block; font: italic 400 1.2rem var(--serif); }
.g-cta span { font-size: .86rem; color: var(--suave); }
.g-firma { text-align: center; padding: 18px 0 6px; }
.g-firma p { margin: 0 0 4px; font: italic 400 1.05rem var(--serif); color: var(--suave); }
.g-firma span { font: italic 400 1.6rem var(--serif); color: #ff7aa8; }
.g-bloqueado { max-height: 300px; overflow: hidden; filter: blur(5px); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.g-candado { position: relative; margin-top: -120px; padding: 22px; text-align: center; border-radius: 20px; background: var(--capa); border: 1px solid var(--borde-fuerte); }
.g-candado h2 { margin: 10px 0 4px; font-size: 1.4rem; }
.g-candado p { margin: 0 0 14px; color: var(--suave); }
@media (max-width: 640px) {
  .g-portada { padding: 20px; } .g-fenix { width: 160px; }
  .g-formula, .g-comparar { grid-template-columns: 1fr; }
  .g-cta { flex-direction: column; align-items: flex-start; }
}

/* Guía por pasos: entra en una pantalla */
.pag-guia .guia { padding-bottom: 8px; }
.pag-guia .g-portada { margin: 14px 0 12px; padding: 18px 24px 20px; }
.pag-guia .g-volver { margin-bottom: 10px; }
.pag-guia .g-portada h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.pag-guia .g-bajada { font-size: .92rem; }
.pag-guia .g-fenix { width: 170px; }
.g-paso[hidden] { display: none; }
.pag-guia .g-bloque { margin-bottom: 12px; padding: 16px 20px; }
.pag-guia .g-bloque h2 { font-size: 1.25rem; }
.pag-guia .g-bloque p { font-size: .9rem; line-height: 1.6; }
.pag-guia .g-error p { font-size: 1rem; }
.pag-guia .g-formula li { padding: 9px 12px; }
.pag-guia .g-check { gap: 6px; }
.pag-guia .g-check label { padding: 7px 10px; font-size: .88rem; }
.g-final .g-cta { margin: 12px 0 0; padding: 12px 16px; }
.g-final .g-firma { padding: 10px 0 0; }
.g-final .g-firma p { font-size: .92rem; } .g-final .g-firma span { font-size: 1.3rem; }
.g-resto.g-bloqueado { max-height: none; filter: none; -webkit-mask-image: none; mask-image: none; pointer-events: auto; }
.g-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; }
.g-nav .btn[hidden] { visibility: hidden; display: inline-flex; }
.g-nav .btn:disabled { opacity: .35; cursor: default; }
.g-puntos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.g-puntos button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); font: 700 .74rem/1 var(--sans); cursor: pointer; }
.g-puntos button i { width: 7px; height: 7px; border-radius: 50%; background: var(--borde-fuerte); }
.g-puntos button[aria-current="true"] { color: #fff; border-color: var(--c); }
.g-puntos button[aria-current="true"] i { background: var(--c); }
.pag-guia .g-candado { margin: 0 0 12px; padding: 18px; }
.pag-guia .g-candado h2 { margin: 6px 0 2px; font-size: 1.2rem; }
.pag-guia .g-candado p { margin: 0 0 10px; font-size: .88rem; }
@media (max-width: 640px) { .g-puntos button span { display: none; } .g-puntos button { padding: 7px; } }
@media (min-width: 1021px) { .pag-guia .g-check { grid-template-columns: 1fr 1fr; } .pag-guia .g-check li:last-child { grid-column: 1 / -1; } }
.pag-guia .g-progreso { margin-top: 8px !important; }

/* Guía: circulitos de perfil y foto */
.gp-foto { display: grid; place-items: end center; overflow: hidden; border-radius: 50%; flex: none; }
.gp-foto svg { display: block; }
.gp-foto.lejos { width: 54px; height: 54px; background: radial-gradient(circle at 50% 40%, #3a3a40, #121214 70%); border: 2px solid #2a2a2e; }
.gp-foto.lejos svg { width: 40%; fill: #55555c; filter: blur(.6px); margin-bottom: 6px; }
.gp-foto.cerca { width: 54px; height: 54px; background: linear-gradient(160deg, #ffd6a5, #ff9fbf); border: 2px solid #ff4f8b; box-shadow: 0 0 0 3px rgb(255 79 139 / .2); }
.gp-foto.cerca svg { width: 100%; fill: #7a3a52; margin-bottom: -6px; }
.g-perfil { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gp-datos { display: grid; gap: 1px; min-width: 0; }
.gp-datos strong { font-size: .9rem; color: #fff; }
.gp-datos span { font-size: .74rem; color: var(--suave); }
.gp-num b { color: #fff; }
.gp-bio { font-size: .84rem !important; line-height: 1.5 !important; }
.g-fotos { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; margin-top: 6px; }
.gf { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 150px; }
.gf .gp-foto { width: 92px; height: 92px; }
.gf.mal .gp-foto svg { width: 30%; }
.gf figcaption { font-size: .78rem; color: var(--suave); line-height: 1.4; }
.gf figcaption b { display: block; font-size: .8rem; margin-bottom: 2px; }
.gf.mal b { color: #ff7b7b; } .gf.bien b { color: #2ecc8f; }
.gf-tips { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--borde); display: grid; gap: 8px; }
.gf-tips li { position: relative; padding-left: 16px; font-size: .86rem; color: #e9e3e6; }
.gf-tips li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (max-width: 640px) { .g-fotos { grid-template-columns: 1fr 1fr; } .gf-tips { grid-column: 1 / -1; border-left: 0; padding: 0; } }
.g-puntos { flex-wrap: nowrap; gap: 4px; }
.g-puntos button { padding: 5px 8px; font-size: .7rem; white-space: nowrap; }
@media (min-width: 1021px) { .pag-guia .g-check li:last-child { grid-column: auto; } }
.pag-guia .g-final .g-cta { margin-top: 10px; padding: 10px 16px; }
.pag-guia .g-final .g-firma { padding-top: 6px; }
@media (max-width: 1200px) { .g-puntos button span { display: none; } .g-puntos button { padding: 7px; } }

/* Guía ganchos */
.g-ganchos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-ganchos div { padding: 12px 14px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); border-top: 3px solid var(--c); }
.g-ganchos strong { display: block; margin-bottom: 6px; font-size: .8rem; color: var(--c); }
.g-ganchos q { display: block; font: italic 400 1rem/1.4 var(--serif); color: #f5f1f3; quotes: '“' '”'; }
.g-pie-nota { margin: 12px 0 0 !important; font-size: .86rem !important; }
.g-linea { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 14px; counter-reset: paso; }
.g-linea div { position: relative; padding: 12px 14px 12px 16px; background: #0e0e10; border: 1px solid var(--borde); display: grid; gap: 2px; }
.g-linea div:first-child { border-radius: 14px 0 0 14px; } .g-linea div:last-child { border-radius: 0 14px 14px 0; }
.g-linea div + div { border-left: 0; }
.g-linea div::after { content: '→'; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #000; font-size: .7rem; font-weight: 900; }
.g-linea div:last-child::after { display: none; }
.g-linea b { font: italic 400 1.15rem var(--serif); color: var(--c); }
.g-linea small { font-size: .7rem; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.g-linea span { font-size: .84rem; color: #e9e3e6; }
.g-no { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.g-no div { position: relative; padding: 12px 14px 12px 42px; border-radius: 14px; background: rgb(255 92 92 / .06); border: 1px solid rgb(255 92 92 / .25); }
.g-no div::before { content: '✕'; position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 92 92 / .2); color: #ff7b7b; font-size: .7rem; font-weight: 900; }
.g-no strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.g-no span { font-size: .82rem; color: var(--suave); line-height: 1.45; }
.g-no div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .g-ganchos, .g-no { grid-template-columns: 1fr; } .g-linea { grid-template-columns: 1fr 1fr; gap: 8px; } .g-linea div { border-radius: 14px !important; border-left: 1px solid var(--borde) !important; } .g-linea div::after { display: none; } }

/* Guía ganchos */
.g-ganchos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-ganchos div, .g-noes div { padding: 10px 12px; border-radius: 12px; background: #0e0e10; border: 1px solid var(--borde); display: grid; gap: 4px; }
.g-ganchos strong { font-size: .86rem; color: var(--c); }
.g-ganchos span { font: italic 400 .9rem/1.4 var(--serif); color: #ece6e9; }
.g-estructura { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-estructura div { position: relative; padding: 12px; border-radius: 12px; background: #0e0e10; border: 1px solid var(--borde); border-top: 3px solid var(--c); display: grid; gap: 2px; }
.g-estructura b { font: italic 400 1.3rem var(--serif); color: var(--c); }
.g-estructura strong { font-size: .92rem; }
.g-estructura small { font-size: .7rem; font-weight: 700; color: var(--tenue); }
.g-estructura span { font-size: .8rem; color: var(--suave); line-height: 1.45; margin-top: 4px; }
.g-porque { margin: 12px 0 0 !important; font-size: .86rem !important; }
.g-noes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-noes div { border-left: 3px solid #ff7b7b; }
.g-noes strong { font-size: .88rem; color: #ff9a9a; }
.g-noes span { font-size: .8rem; color: var(--suave); line-height: 1.45; }
@media (max-width: 1020px) { .g-ganchos, .g-estructura { grid-template-columns: 1fr 1fr; } .g-noes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g-ganchos, .g-estructura, .g-noes { grid-template-columns: 1fr; } }
.g-noes .g-si { border-left-color: #2ecc8f; background: rgb(46 204 143 / .06); }
.g-noes .g-si strong { color: #2ecc8f; }
.g-puntos button:not([aria-current="true"]) span { display: none; }
.g-puntos button:not([aria-current="true"]) { padding: 7px; }
/* guía ganchos: catálogo, tarea, guion, antes/después, armador */
.g-sub { margin: 0 0 10px !important; font-size: .88rem !important; color: var(--suave); }
.g-catalogo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.g-cat-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-cat-lista button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #0e0e10; border: 1px solid var(--borde); color: #e9e3e6; font: 600 .8rem/1.2 inherit; font-family: inherit; text-align: left; cursor: pointer; }
.g-cat-lista button b { font: italic 400 .95rem var(--serif); color: var(--c); min-width: 16px; }
.g-cat-lista button:hover { border-color: var(--c); }
.g-cat-lista button[aria-selected="true"] { background: var(--c); color: #120d0f; border-color: var(--c); }
.g-cat-lista button[aria-selected="true"] b { color: #120d0f; }
.g-cat-ficha { padding: 16px 18px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); border-top: 3px solid var(--c); }
.g-cat-ficha small { font-size: .72rem; font-weight: 700; color: var(--tenue); }
.g-cat-ficha h3 { margin: 2px 0 6px; font: italic 400 1.6rem/1.1 var(--serif); color: var(--c); }
.g-cat-ficha p { margin: 0 0 10px; font-size: .88rem; color: var(--suave); }
.g-cat-ficha ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.g-cat-ficha li { padding: 8px 10px; border-radius: 10px; background: rgb(255 255 255 / .04); font: italic 400 .95rem/1.4 var(--serif); color: #f5f1f3; }
.g-cat-ficha .g-cat-sig { margin: 0; font-size: .82rem; }
.g-cat-sig strong { color: #e9e3e6; }
.g-necesidades { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; counter-reset: n; }
.g-necesidades li { display: flex; align-items: center; gap: 8px; counter-increment: n; }
.g-necesidades li::before { content: counter(n); font: italic 400 1rem var(--serif); color: var(--c); min-width: 18px; text-align: right; }
.g-necesidades input, .g-armador textarea, .g-armador select { width: 100%; padding: 9px 12px; border-radius: 10px; background: #0e0e10; border: 1px solid var(--borde); color: #f5f1f3; font: inherit; font-size: .88rem; }
.g-necesidades input:focus, .g-armador textarea:focus, .g-armador select:focus { outline: 2px solid var(--c); outline-offset: 1px; border-color: transparent; }
.g-guion { display: grid; gap: 8px; }
.g-guion div { display: grid; grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #0e0e10; border: 1px solid var(--borde); border-left: 3px solid var(--c); }
.g-guion small { font-size: .74rem; font-weight: 800; color: var(--c); }
.g-guion p { margin: 0 !important; font: italic 400 .98rem/1.4 var(--serif) !important; color: #f5f1f3 !important; }
.g-guion span { font-size: .8rem; color: var(--suave); line-height: 1.45; }
.g-arranques { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-arranques div { padding: 12px 14px; border-radius: 12px; background: #0e0e10; border: 1px solid var(--borde); display: grid; gap: 6px; }
.g-arranques p { margin: 0 !important; padding-left: 26px; position: relative; font: italic 400 .95rem/1.35 var(--serif) !important; }
.g-arranques p::before { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 .7rem/1 system-ui; font-style: normal; }
.g-arranques .g-mal { color: var(--tenue) !important; text-decoration: line-through; text-decoration-color: rgb(255 123 123 / .6); }
.g-arranques .g-mal::before { content: '✕'; background: rgb(255 123 123 / .18); color: #ff7b7b; }
.g-arranques .g-bien { color: #f5f1f3 !important; }
.g-arranques .g-bien::before { content: '✓'; background: rgb(46 204 143 / .18); color: #2ecc8f; }
.g-arranques span { font-size: .8rem; color: var(--suave); padding-left: 26px; }
.g-armador { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.g-armador label { display: grid; gap: 5px; font-size: .82rem; font-weight: 700; }
.g-armador label small { font-weight: 600; color: var(--tenue); margin-left: 4px; }
.g-armador textarea { resize: none; line-height: 1.45; }
.g-arm-tipo { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 260px); align-items: center; gap: 10px !important; }
.g-arm-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: .84rem; color: var(--suave); }
@media (max-width: 760px) {
  .g-catalogo, .g-necesidades, .g-arranques, .g-armador { grid-template-columns: 1fr; }
  .g-cat-lista { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .g-cat-lista button { flex: 0 0 auto; white-space: nowrap; }
  .g-guion div { grid-template-columns: 1fr; gap: 4px; }
  .g-arm-pie { flex-direction: column; align-items: stretch; }
}
.g-catalogo { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.g-cat-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cat-lista button { padding: 7px 9px; font-size: .78rem; min-width: 0; }
.g-guion { gap: 6px; }
.g-guion div { grid-template-columns: 110px minmax(0, 1.5fr) minmax(0, 1fr); padding: 8px 14px; }
.g-guion p { font-size: .93rem !important; line-height: 1.35 !important; }
.g-guion span { font-size: .78rem; line-height: 1.4; }
.g-arranques div { padding: 10px 12px; }
@media (max-width: 760px) { .g-catalogo { grid-template-columns: 1fr; } .g-guion div { grid-template-columns: 1fr; } }
.g-catalogo { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.g-cat-lista button { overflow: hidden; }
.g-arm-tipo { display: flex !important; justify-content: flex-start; }
.g-arm-tipo select { width: 260px; }
@media (max-width: 760px) { .g-puntos { overflow-x: auto; max-width: 52vw; } }
.g-3seg { display: flex; gap: 16px; align-items: center; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgb(255 255 255 / .05), transparent); border: 1px solid var(--c); }
.g-3seg > b { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #120d0f; font: italic 400 2.2rem/1 var(--serif); }
.g-3seg strong { display: block; font-size: 1.02rem; margin-bottom: 3px; color: #f5f1f3; }
.g-3seg span { font-size: .84rem; line-height: 1.45; color: var(--suave); }
.g-3seg span { line-height: 1.4; }
.g-3seg ~ .g-formula { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3seg ~ .g-formula span { line-height: 1.4; }
@media (max-width: 760px) { .g-3seg ~ .g-formula { grid-template-columns: 1fr; } .g-3seg { align-items: flex-start; } .g-3seg > b { width: 46px; height: 46px; font-size: 1.8rem; } }
.g-3seg span, .g-3seg ~ .g-formula li span { line-height: 1.38 !important; font-size: .82rem !important; }
.g-3seg ~ .g-formula li { padding: 10px 12px !important; }
.g-3seg span, .g-3seg ~ .g-formula li span { display: block; }
.g-3seg ~ .g-formula { margin-top: 10px; }
/* guías: componentes compartidos */
.g-cards { display: grid; gap: 8px; margin: 10px 0 0; }
.g-cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-cards div { padding: 11px 13px; border-radius: 12px; background: #0e0e10; border: 1px solid var(--borde); border-top: 3px solid var(--c); display: grid; gap: 4px; align-content: start; }
.g-cards strong { font-size: .88rem; color: var(--c); line-height: 1.3; }
.g-cards span { display: block; font-size: .8rem; line-height: 1.45; color: var(--suave); }
.g-guion.dos div { grid-template-columns: 150px minmax(0, 1fr); }
.g-guion { margin-top: 10px; }
.g-cita { margin: 12px 0 0; padding: 12px 18px; border-left: 3px solid var(--c); border-radius: 0 12px 12px 0; background: rgb(255 255 255 / .04); font: italic 400 1.08rem/1.45 var(--serif); color: #f5f1f3; }
.g-h3 { margin: 14px 0 0; font: italic 400 1.1rem var(--serif); color: #f5f1f3; }
.g-formula.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-formula.f5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-formula.f3 span, .g-formula.f5 span, .g-formula.f2 span { display: block; line-height: 1.42; }
.g-formula.f5 li { flex-direction: column; gap: 6px; }
.g-control { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.g-control > div { padding: 12px 16px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); }
.g-control .si { border-left: 3px solid #2ecc8f; } .g-control .no { border-left: 3px solid #ff7b7b; }
.g-control strong { display: block; margin-bottom: 6px; font-size: .92rem; }
.g-control .si strong { color: #2ecc8f; } .g-control .no strong { color: #ff7b7b; }
.g-control ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .84rem; color: var(--suave); }
.g-frases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.g-frases q { display: block; padding: 18px 20px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); font: italic 400 1.2rem/1.4 var(--serif); color: #f5f1f3; quotes: '“' '”'; }
.g-frases q::before { color: var(--c); }
.g-estructura.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 10px; }
.g-prop { grid-template-columns: 1fr 1fr; }
.g-prop input, .g-ficha-oferta input { width: 100%; padding: 9px 12px; border-radius: 10px; background: #0e0e10; border: 1px solid var(--borde); color: #f5f1f3; font: inherit; font-size: .88rem; }
.g-prop input:focus, .g-ficha-oferta input:focus { outline: 2px solid var(--c); outline-offset: 1px; border-color: transparent; }
.g-ficha-oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.g-ficha-oferta label { display: grid; gap: 5px; font-size: .8rem; font-weight: 700; }
.g-aclara { margin: 10px 0 0 !important; font-size: .74rem !important; color: var(--tenue) !important; }
@media (max-width: 760px) {
  .g-cards.c2, .g-cards.c3, .g-cards.c4, .g-formula.f3, .g-formula.f5, .g-control, .g-frases, .g-estructura.c5, .g-prop, .g-ficha-oferta, .g-guion.dos div { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) { .pag-guia .guia { max-width: 940px; } .g-bajada { max-width: 640px; } }
.g-estructura.c5 div { align-content: start; }
@media (min-width: 1200px) { .g-guion div { grid-template-columns: 150px minmax(0, 1.5fr) minmax(0, 1fr); padding: 7px 14px; } .g-guion.dos div { grid-template-columns: 170px minmax(0, 1fr); } }
.g-ficha-oferta { gap: 8px 14px; } .g-ficha-oferta label { gap: 3px; } .g-ficha-oferta input, .g-prop input { padding: 7px 12px; }
.g-cita { font-size: 1rem; padding: 10px 16px; }
@media (min-width: 1200px) { .g-guion { gap: 5px; } .g-guion div { padding: 6px 14px; } .g-ficha-oferta { gap: 6px 14px; } }
.g-bios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.g-bios > div { padding: 14px 16px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); display: grid; gap: 6px; align-content: start; }
.g-bios small { font-size: .7rem; font-weight: 700; color: var(--tenue); }
.g-bios strong { font-size: .95rem; color: #f5f1f3; }
.g-bios p { margin: 0 !important; font-size: .86rem !important; line-height: 1.5 !important; color: #e9e3e6 !important; }
.g-bios em { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--c); }
@media (max-width: 760px) { .g-bios { grid-template-columns: 1fr; } }
.g-cat-tip { grid-column: 2; margin: 0 !important; font-size: .78rem !important; line-height: 1.45; color: var(--suave); }
.g-cat-tip strong { color: #e9e3e6; }
.g-catalogo { row-gap: 10px; }
.g-cat-lista { grid-row: span 2; }
.g-arm-ancho { grid-column: 1 / -1; }
@media (max-width: 760px) { .g-cat-tip { grid-column: 1; } .g-cat-lista { grid-row: auto; } }
.g-cat-lista { grid-row: auto; grid-column: 1; }
.g-cat-tip { grid-column: 1; grid-row: 2; }
.g-cat-ficha { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 760px) { .g-cat-ficha, .g-cat-tip, .g-cat-lista { grid-column: 1; grid-row: auto; } }
@media (min-width: 1200px) { .g-catalogo { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } .g-cat-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g-cat-lista button { font-size: .76rem; padding: 7px 8px; } }
.grilla-guias { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guia-ficha { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 20px 18px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); border-top: 3px solid var(--c); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.guia-ficha:hover, .guia-ficha:focus-visible { transform: translateY(-3px); border-color: var(--c); }
.guia-ficha small { font-size: .72rem; font-weight: 700; color: var(--c); }
.guia-ficha strong { font: italic 400 1.5rem/1.15 var(--serif); color: #f5f1f3; }
.guia-ficha span { font-size: .86rem; line-height: 1.5; color: var(--suave); }
.guia-ficha em { margin-top: 4px; font-style: normal; font-size: .84rem; font-weight: 800; color: var(--c); }
@media (prefers-reduced-motion: reduce) { .guia-ficha { transition: none; } }
/* ===== Lector de libros ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.libro { max-width: 940px; margin: 0 auto; padding: 0 16px 24px; }
.l-cargando { padding: 80px 0; text-align: center; color: var(--suave); }
.l-portada { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin: 14px 0 16px; padding: 22px 28px 26px; border-radius: 22px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), var(--capa); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.l-portada .g-volver { grid-column: 1 / -1; align-self: start; }
.l-portada h1 { margin: 6px 0 6px; font: italic 400 clamp(2rem, 4vw, 3rem)/1.05 var(--serif); }
.l-autor { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #f5f1f3; }
.l-portada small { font-size: .8rem; color: var(--suave); }
.l-tapa { position: relative; width: 150px; height: 210px; padding: 20px 16px 16px 24px; border-radius: 4px 12px 12px 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 45%, #000)); box-shadow: -6px 0 0 color-mix(in srgb, var(--c) 30%, #000) inset, 0 18px 40px rgb(0 0 0 / .45); display: flex; flex-direction: column; justify-content: space-between; transform: rotate(3deg); }
.l-tapa::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgb(255 255 255 / .18); }
.l-tapa span { font: italic 400 1.2rem/1.15 var(--serif); color: #fff; }
.l-tapa em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: rgb(255 255 255 / .85); }
.l-cuerpo { display: grid; gap: 14px; }
.l-intro, .l-claves, .l-texto { padding: 20px 24px; border-radius: 18px; background: var(--capa); border: 1px solid var(--borde); }
.l-intro h2, .l-claves h2 { margin: 0 0 10px; font: italic 400 1.45rem var(--serif); color: var(--c); }
.l-intro p { margin: 0 0 10px; max-width: 70ch; line-height: 1.65; color: #e9e3e6; }
.l-claves-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.l-claves-grilla button { display: grid; gap: 5px; align-content: start; padding: 14px 16px; border-radius: 14px; background: #0e0e10; border: 1px solid var(--borde); border-top: 3px solid var(--c); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s; }
.l-claves-grilla button:hover, .l-claves-grilla button:focus-visible { border-color: var(--c); }
.l-claves-grilla small { font-size: .7rem; font-weight: 700; color: var(--c); text-transform: capitalize; }
.l-claves-grilla strong { font: italic 400 1.1rem/1.25 var(--serif); color: #f5f1f3; }
.l-claves-grilla span { font-size: .82rem; line-height: 1.5; color: var(--suave); }
.l-claves-grilla em { font-style: normal; font-size: .78rem; font-weight: 800; color: var(--c); }
.l-texto { --l-tam: 1; padding-top: 0; }
.l-barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 -24px 6px; padding: 14px 24px; background: color-mix(in srgb, var(--capa) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); border-radius: 18px 18px 0 0; }
.l-barra input { padding: 8px 12px; border-radius: 10px; background: #0e0e10; border: 1px solid var(--borde); color: #f5f1f3; font: inherit; font-size: .88rem; }
.l-barra input:focus { outline: 2px solid var(--c); outline-offset: 1px; border-color: transparent; }
.l-buscar { flex: 1 1 220px; } .l-buscar input { width: 100%; }
.l-ir { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--suave); } .l-ir input { width: 76px; }
.l-letra { display: flex; } .l-letra button { padding: 7px 11px; background: #0e0e10; border: 1px solid var(--borde); color: #f5f1f3; font: 700 .82rem/1 inherit; font-family: inherit; cursor: pointer; } .l-letra button:first-child { border-radius: 10px 0 0 10px; } .l-letra button + button { border-left: 0; border-radius: 0 10px 10px 0; }
.l-encontrados { margin: 8px 0 0; font-size: .84rem; color: var(--c); }
.l-parte { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--borde); scroll-margin-top: 90px; }
.l-parte > b { font: italic 400 1.6rem/1 var(--serif); color: var(--c); text-align: right; padding-top: 2px; }
.l-parte h3 { margin: 0 0 6px; font-size: calc(1.02rem * var(--l-tam)); font-weight: 800; color: #f5f1f3; line-height: 1.35; }
.l-parte p { margin: 0 0 8px; max-width: 68ch; font: 400 calc(1.12rem * var(--l-tam))/1.7 var(--serif); color: #e6dfe3; }
.l-prologo { grid-template-columns: 1fr; }
.l-marca { animation: l-marca 2.2s ease-out; border-radius: 12px; }
@keyframes l-marca { 0% { background: color-mix(in srgb, var(--c) 22%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .l-marca { animation: none; outline: 2px solid var(--c); } }
@media (max-width: 760px) {
  .l-portada { grid-template-columns: 1fr; padding: 18px; }
  .l-tapa { display: none; }
  .l-claves-grilla { grid-template-columns: 1fr; }
  .l-intro, .l-claves, .l-texto { padding: 16px; } .l-texto { padding-top: 0; }
  .l-barra { margin: 0 -16px 6px; padding: 12px 16px; }
  .l-parte { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; } .l-parte > b { font-size: 1.3rem; }
}
/* libro en el estante */
.bib-libro-tit { margin: 26px 0 10px; font: italic 400 1.35rem var(--serif); color: var(--c); }
.libro-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 18px 22px; border-radius: 18px; background: radial-gradient(100% 160% at 0% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--capa); border: 1px solid var(--borde); color: inherit; text-decoration: none; transition: border-color .2s; }
.libro-ficha:hover, .libro-ficha:focus-visible { border-color: var(--c); }
.libro-ficha .l-tapa { width: 74px; height: 104px; padding: 10px 8px 8px 14px; transform: rotate(-3deg); }
.libro-ficha .l-tapa span { font-size: .72rem; } .libro-ficha .l-tapa em { font-size: .52rem; }
.libro-ficha small { font-size: .72rem; font-weight: 700; color: var(--c); }
.libro-ficha strong { display: block; margin: 2px 0 4px; font: italic 400 1.45rem/1.15 var(--serif); color: #f5f1f3; }
.libro-ficha p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--suave); }
.libro-ficha em.lf-ir { font-style: normal; font-size: .86rem; font-weight: 800; color: var(--c); white-space: nowrap; }
@media (max-width: 760px) { .libro-ficha { grid-template-columns: auto minmax(0, 1fr); } .libro-ficha em.lf-ir { grid-column: 1 / -1; } }
.pag-libro .g-candado { margin: 0; }
.l-parte h4 { margin: 16px 0 6px; font-size: calc(.92rem * var(--l-tam)); font-weight: 800; color: var(--c); }
.libros-lista { display: grid; gap: 12px; }