/* ===================================================================== NotiYape — hoja de estilo de pages/soluciones-notiyape.html ===================================================================== Se carga SOLO en esa pagina. Reemplaza a pos-page.css, que aportaba dos clases de 271 y ya estaban en sidebar.css. Depende de que lleve la clase .ny-page: ahi viven los tokens. ===================================================================== */ /* ===================================================================== NotiYape dentro de codeiasolutions.com.pe --------------------------------------------------------------------- Esta pagina es la landing de contratacion a la que apunta notiyape.irestapp.pe, asi que adopta el sistema de diseno de la app (neutro con sesgo violeta, escala de 4px, Bricolage/Figtree/Plex Mono) en vez del verde corporativo. El salto entre los dos sitios tiene que ser invisible. El chrome de Codeia (navbar, dropdown, sidebar, footer) NO se parchea componente por componente: se redefinen sus tokens sobre .ny-page y el tema baja solo por la cascada. ===================================================================== */ body.ny-page { /* --- Tokens propios de NotiYape (copiados de la app) --- */ --ground: #0f0d15; --surface: #17141f; --surface-2: #1f1b2b; --line: #292236; --line-soft: #211b2d; --text: #edeaf4; --muted: #9a93ad; --faint: #6e6884; --accent: #8356f5; --accent-dim: #2a2140; --accent-bd: #3b2f5c; --accent-fg: #ddd6fe; --yape: #8356f5; --plin: #00b3b0; --ok: #34d399; --warn: #fbbf24; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif; --ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; /* --- Re-tematizado de los tokens de Codeia --- */ --primary-green: #8356f5; --dark-green: #edeaf4; --light-green: #ddd6fe; --text-color: #edeaf4; --light-gray: #1f1b2b; --gradient: linear-gradient(135deg, #8356f5 0%, #5b34c7 100%); --gradient-hover: linear-gradient(135deg, #9670ff 0%, #6d43e0 100%); --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9); --shadow-hover: 0 26px 60px -28px rgba(0, 0, 0, 0.95); background: var(--ground); color: var(--text); font-family: var(--ui); } /* ---------- Chrome: lo que estaba escrito en duro y no en tokens ---------- */ /* updateNavbarBackground() en main.js pinta la navbar de blanco con estilo en linea al pasar los 50px de scroll. Es codigo compartido por todas las paginas, asi que en vez de tocarlo se le gana desde aqui con !important. */ body.ny-page .navbar { background: rgba(15, 13, 21, 0.82) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); box-shadow: 0 1px 0 rgba(41, 34, 54, 0.9) !important; } body.ny-page .logo-icon { background: var(--accent-dim); border: 1px solid var(--accent-bd); } body.ny-page .nav-link:hover { color: var(--text); } body.ny-page .dropdown-menu { background-color: var(--surface); border: 1px solid var(--line); } body.ny-page .dropdown-column ul li a::before { background: var(--line); } body.ny-page .dropdown-column ul li a i { color: var(--faint); } body.ny-page .sidebar { background: var(--surface); border: 1px solid var(--line); } body.ny-page .sidebar-link i { color: var(--faint); } body.ny-page .page-content { background: transparent; box-shadow: none; padding: 0; /* Es un item de grid: sin esto, min-width:auto deja que la tabla comparativa (min-width:720px) estire la pagina en movil. */ min-width: 0; } body.ny-page .page-content > section { min-width: 0; } body.ny-page .footer { background: #0b0912; border-top: 1px solid var(--line-soft); } body.ny-page .progress-bar { background: linear-gradient(90deg, var(--yape), var(--plin)); } /* ---------- Tipografia y ritmo de seccion ---------- */ body.ny-page .page-content h1, body.ny-page .page-content h2, body.ny-page .page-content h3, body.ny-page .page-content h4 { font-family: var(--display); letter-spacing: -0.025em; border-bottom: none; padding-bottom: 0; } .ny-sec { padding: 72px 0; border-top: 1px solid var(--line-soft); } .ny-sec.sin-linea { border-top: none; } .ny-h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 0 0 var(--e3); text-wrap: balance; color: var(--text); } body.ny-page .page-content .ny-lead { color: var(--muted); max-width: 58ch; margin: 0 0 42px; font-size: 17px; line-height: 1.6; } body.ny-page .page-content .ny-rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-fg); font-weight: 500; margin: 0 0 var(--e3); } /* ---------- Botones ---------- */ .ny-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-family: var(--ui); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ny-btn.principal { background: var(--accent); color: #fff; } .ny-btn.principal:hover { filter: brightness(1.12); color: #fff; } .ny-btn.fantasma { background: transparent; border-color: var(--line); color: var(--muted); } .ny-btn.fantasma:hover { color: var(--text); border-color: #3a3049; } .ny-btn.bloque { width: 100%; } /* ---------- Portada ---------- */ .ny-portada { position: relative; padding: 8px 0 12px; } .ny-portada::before { content: ""; position: absolute; top: -190px; left: 50%; transform: translateX(-50%); width: 760px; /* 100% y no mas: el resplandor esta centrado con translateX(-50%), y cualquier exceso se sale del contenedor y desplaza la pagina. */ max-width: 100%; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(131, 86, 245, 0.2), transparent 72%); } .ny-portada > * { position: relative; } .ny-insignia { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--e5); background: var(--accent-dim); border: 1px solid var(--accent-bd); color: var(--accent-fg); padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .ny-insignia .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: ny-latir 2s ease-in-out infinite; } @keyframes ny-latir { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } body.ny-page .page-content .ny-portada h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; margin: 0 0 var(--e5); max-width: 17ch; text-wrap: balance; color: var(--text); } .ny-portada h1 em { font-style: normal; color: var(--accent-fg); } body.ny-page .page-content .ny-bajada { color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; max-width: 56ch; margin: 0 0 var(--e8); } .ny-acciones { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; } .ny-acciones .nota { font-size: 13px; color: var(--faint); } /* ---------- Escena de dispositivos (la misma que la app) ---------- */ .ny-escena { position: relative; margin: 56px 0 0; min-height: 400px; display: flex; /* El celular va superpuesto en el carril izquierdo; el monitor se corre a la derecha para que no le tape los productos del POS. */ justify-content: flex-end; align-items: flex-end; } .ny-monitor { width: min(720px, calc(100% - 220px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95); } .ny-monitor .barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .ny-semaforo { width: 10px; height: 10px; border-radius: 50%; background: #3a3049; display: inline-block; flex: none; } .ny-monitor .titulo-ventana { margin-left: 10px; font-size: 12px; color: var(--faint); font-family: var(--mono); } .ny-pos { padding: var(--e4); position: relative; min-height: 280px; } .ny-pos .fila-pos { display: flex; gap: var(--e3); } .ny-pos .col { flex: 1; min-width: 0; } .ny-et { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 9px; } .ny-rejilla-prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .ny-prod { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 10px; font-size: 12px; color: var(--muted); line-height: 1.35; } .ny-prod b { display: block; color: var(--text); font-size: 12.5px; font-weight: 600; } .ny-prod .precio { font-family: var(--mono); font-size: 11px; color: var(--faint); } .ny-ticket { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: var(--e3); } .ny-ticket .linea { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 5px 0; gap: 10px; } .ny-ticket .linea span:last-child { font-family: var(--mono); color: var(--text); } .ny-ticket .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; } .ny-ticket .total b { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text); } .ny-aviso-pos { position: absolute; right: var(--e4); bottom: var(--e4); width: 250px; background: var(--surface); border: 1px solid var(--accent-bd); border-radius: 12px; padding: 12px 13px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9); animation: ny-entrar-aviso 7s ease-in-out infinite; } .ny-aviso-pos .top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .ny-aviso-pos .marca-app { font-size: 11px; font-weight: 700; color: var(--accent-fg); letter-spacing: 0.03em; } .ny-aviso-pos .sonando { margin-left: auto; font-size: 10px; color: var(--ok); font-family: var(--mono); } .ny-aviso-pos .monto { font-family: var(--display); font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text); } .ny-aviso-pos .de { font-size: 12px; color: var(--muted); margin-top: 2px; } @keyframes ny-entrar-aviso { 0%, 6% { opacity: 0; transform: translateY(14px) scale(0.97); } 12%, 72% { opacity: 1; transform: translateY(0) scale(1); } 82%, 100% { opacity: 0; transform: translateY(-8px) scale(0.99); } } .ny-celular { position: absolute; left: 0; bottom: -18px; width: 200px; background: #100c1c; border: 7px solid #100c1c; border-radius: 26px; box-shadow: 0 34px 70px -26px rgba(0, 0, 0, 0.95); overflow: hidden; } .ny-celular .pantalla { background: var(--ground); border-radius: 19px; overflow: hidden; } .ny-celular .top-app { display: flex; align-items: center; gap: 7px; padding: 11px 11px 9px; border-bottom: 1px solid var(--line); } .ny-celular .top-app img { width: 19px; height: 19px; } .ny-celular .top-app .nom { font-family: var(--display); font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--text); } .ny-celular .top-app .neg { font-size: 9.5px; color: var(--faint); } .ny-pila { padding: 9px; display: flex; flex-direction: column; gap: 8px; } .ny-aviso-cel { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--yape); border-radius: 9px; padding: 8px 9px; opacity: 0; animation: ny-aparecer-aviso 7s ease-in-out infinite; } .ny-aviso-cel.plin { border-left-color: var(--plin); } .ny-aviso-cel:nth-child(1) { animation-delay: 0.2s; } .ny-aviso-cel:nth-child(2) { animation-delay: 1.5s; } .ny-aviso-cel:nth-child(3) { animation-delay: 2.8s; } .ny-aviso-cel .app { font-size: 9px; font-weight: 700; color: var(--accent-fg); letter-spacing: 0.04em; } .ny-aviso-cel.plin .app { color: #5ee7e4; } .ny-aviso-cel .monto { font-family: var(--display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--text); } .ny-aviso-cel .de { font-size: 9.5px; color: var(--faint); line-height: 1.3; } @keyframes ny-aparecer-aviso { 0% { opacity: 0; transform: translateX(-12px); } 8%, 86% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } } @media (max-width: 1200px) { .ny-escena { flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--e6); min-height: 0; margin-top: 40px; } .ny-celular { position: static; width: 200px; } .ny-monitor { width: 100%; } .ny-pos .fila-pos { flex-direction: column; } .ny-pos .col { max-width: none !important; } .ny-aviso-pos { position: static; width: auto; margin-top: var(--e3); } } /* ---------- Tarjetas, pasos y franjas ---------- */ .ny-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); } .ny-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); } @media (max-width: 900px) { .ny-grid3, .ny-grid2 { grid-template-columns: 1fr; } } .ny-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--e6); } .ny-card .icono { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-dim); border: 1px solid var(--accent-bd); display: grid; place-items: center; margin-bottom: var(--e4); color: var(--accent-fg); font-size: 15px; } body.ny-page .page-content .ny-card h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--text); } body.ny-page .page-content .ny-card p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.6; } .ny-franja { background: #131020; border: 1px solid var(--line-soft); border-radius: 18px; padding: 56px var(--e8); margin: 0; } @media (max-width: 640px) { .ny-franja { padding: 40px var(--e5); } } .ny-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); } @media (max-width: 900px) { .ny-pasos { grid-template-columns: 1fr; } } .ny-paso .n { font-family: var(--mono); font-size: 12px; color: var(--accent-fg); background: var(--accent-dim); border: 1px solid var(--accent-bd); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: var(--e4); } body.ny-page .page-content .ny-paso h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; margin: 0 0 7px; color: var(--text); } body.ny-page .page-content .ny-paso p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.6; } /* ---------- Navegador con el panel ---------- */ .ny-navegador { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -44px rgba(0, 0, 0, 0.95); } .ny-navegador .barra-nav { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .ny-navegador .url { flex: 1; background: var(--ground); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ny-panel { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 270px; } .ny-panel .rail { background: var(--surface); border-right: 1px solid var(--line); padding: 11px 8px; } .ny-panel .rail .it { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; } .ny-panel .rail .it.on { background: var(--accent-dim); color: var(--accent-fg); } .ny-panel .cuerpo { background: var(--ground); padding: var(--e4); min-width: 0; } body.ny-page .page-content .ny-panel h4 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 0 0 var(--e4); color: var(--text); } .ny-mini-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: var(--e4); } .ny-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; } .ny-mini .et { font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); font-weight: 700; } .ny-mini .v { font-family: var(--display); font-size: 17px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--text); } .ny-mini .v.ok { color: var(--ok); } .ny-mini .v.warn { color: var(--warn); } .ny-barra-rep { margin-bottom: 9px; } .ny-barra-rep .fila { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 5px; gap: 10px; color: var(--muted); } .ny-pista { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .ny-pista i { display: block; height: 100%; border-radius: 99px; } @media (max-width: 700px) { .ny-panel { grid-template-columns: 1fr; } .ny-panel .rail { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); } .ny-mini-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Planes: interruptor mensual / anual ---------- */ .ny-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; margin-bottom: var(--e4); } .ny-switch button { appearance: none; background: transparent; border: 1px solid transparent; color: var(--muted); font-family: var(--ui); font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .ny-switch button:hover { color: var(--text); } .ny-switch button[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent-bd); color: var(--accent-fg); } .ny-switch .ahorro { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ok); background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.28); border-radius: 999px; padding: 1px 7px; } /* ---------- Planes: tarjetas ---------- */ .ny-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); align-items: stretch; margin-top: var(--e6); } @media (max-width: 980px) { .ny-planes { grid-template-columns: 1fr; max-width: 460px; } } .ny-plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--e6); display: flex; flex-direction: column; gap: var(--e4); } .ny-plan.destacado { border-color: var(--accent-bd); background: linear-gradient(180deg, rgba(131, 86, 245, 0.07), transparent 45%), var(--surface); box-shadow: 0 30px 70px -40px rgba(131, 86, 245, 0.75); } .ny-plan-badge { position: absolute; top: -11px; left: var(--e6); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .ny-plan-cab { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--e4); } body.ny-page .page-content .ny-plan-nombre { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text); } body.ny-page .page-content .ny-plan-para { font-size: 13px; color: var(--faint); margin: 0 0 var(--e5); line-height: 1.5; min-height: 2.7em; } .ny-precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .ny-precio .moneda { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--muted); } .ny-precio .cifra { font-family: var(--display); font-size: 42px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .ny-precio .periodo { font-size: 14px; color: var(--faint); } .ny-precio .a-medida { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--text); letter-spacing: -0.02em; } body.ny-page .page-content .ny-facturacion { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 9px; min-height: 1.4em; } .ny-facturacion .ahorras { color: var(--ok); } .ny-plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; } .ny-plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.5; } .ny-plan li i { color: var(--accent-fg); font-size: 11px; margin-top: 5px; flex: none; } .ny-plan li b { color: var(--text); font-weight: 600; } body.ny-page .page-content .ny-planes-pie { color: var(--faint); font-size: 13.5px; margin: var(--e6) 0 0; line-height: 1.6; } /* ---------- Tabla comparativa ---------- */ .ny-tabla-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); /* Sin contencion de pintado, el ancho intrinseco de la tabla se filtra al scroll del documento y la pagina entera se va de lado en movil. */ contain: paint; overscroll-behavior-x: contain; } .ny-tabla { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; } .ny-tabla caption { caption-side: top; text-align: left; padding: 0 0 var(--e4); color: var(--faint); font-size: 13px; } .ny-tabla th, .ny-tabla td { padding: 13px var(--e4); text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .ny-tabla thead th { background: var(--surface-2); border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; } .ny-tabla thead th span { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--faint); margin-top: 3px; } .ny-tabla thead th.destacada { color: var(--accent-fg); } .ny-tabla tbody th { font-weight: 500; color: var(--muted); background: var(--surface); position: sticky; left: 0; z-index: 1; min-width: 250px; } .ny-tabla td { text-align: center; color: var(--text); white-space: nowrap; } .ny-tabla td.col-destacada { background: rgba(131, 86, 245, 0.05); } .ny-tabla .si { color: var(--ok); } .ny-tabla .no { color: #4a4459; } .ny-tabla .valor { font-family: var(--mono); font-size: 12.5px; color: var(--text); } .ny-tabla tbody tr:last-child th, .ny-tabla tbody tr:last-child td { border-bottom: none; } .ny-tabla .grupo th { background: var(--surface-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding-top: 11px; padding-bottom: 11px; } /* ---------- FAQ ---------- */ .ny-faq { display: flex; flex-direction: column; gap: 10px; max-width: 780px; } .ny-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 var(--e5); } .ny-faq details[open] { border-color: var(--accent-bd); } .ny-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-family: var(--display); font-size: 15.5px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: var(--e4); } .ny-faq summary::-webkit-details-marker { display: none; } .ny-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--accent-fg); transition: transform 0.25s ease; flex: none; } .ny-faq details[open] summary::after { transform: rotate(180deg); } body.ny-page .page-content .ny-faq p { margin: 0 0 18px; line-height: 1.65; color: var(--muted); font-size: 14.5px; max-width: 68ch; } /* ---------- Cierre ---------- */ .ny-cierre { text-align: center; padding: 78px var(--e6); background: #131020; border: 1px solid var(--line-soft); border-radius: 18px; position: relative; overflow: hidden; } .ny-cierre::before { content: ""; position: absolute; top: -220px; left: 50%; transform: translateX(-50%); width: 620px; max-width: 140%; height: 400px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(131, 86, 245, 0.22), transparent 72%); } .ny-cierre > * { position: relative; } body.ny-page .page-content .ny-cierre h2 { font-family: var(--display); font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 var(--e4); text-wrap: balance; color: var(--text); } body.ny-page .page-content .ny-cierre p { color: var(--muted); max-width: 52ch; margin: 0 auto var(--e8); font-size: 17px; } .ny-cierre .ny-acciones { justify-content: center; } /* Texto solo para lectores de pantalla (celdas de la tabla que son iconos) */ .ny-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { body.ny-page *, body.ny-page *::before, body.ny-page *::after { animation: none !important; transition: none !important; } .ny-aviso-cel, .ny-aviso-pos { opacity: 1; } }