/*
 * NEOPASS — sitio público (www). Diseño de Claude Design (2026-10-08), pasado a
 * CSS estático sin dependencias. Las fuentes se sirven desde este mismo origen:
 * sin Google Fonts la página no le cuenta a nadie quién la visita y no necesita
 * aviso de cookies.
 *
 * Geist y Sora: SIL Open Font License 1.1 (fonts/OFL.txt).
 */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{margin:0;background:#FFFFFF;color:#0E0F0C;font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none !important}
h1,h2,h3{font-family:'Sora',system-ui,sans-serif;letter-spacing:-0.025em}
a{color:#0E0F0C}a:hover{color:#3A3D34}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.sec{padding:112px 0}
.tint{background:#F4F5EF}
.stack{display:flex;flex-direction:column;gap:56px}
.intro{display:flex;flex-direction:column;gap:20px;max-width:780px}
.h2{margin:0;font-size:clamp(30px,4vw,46px);line-height:1.08;font-weight:600}
.h3{margin:0;font-size:19px;font-weight:600}
.h3.big{font-size:21px}
.lead{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.5}
.lead.strong{color:#0E0F0C;font-weight:500}
.body{margin:0;font-size:17px;line-height:1.6;color:#4B4F45}
.muted{margin:0;font-size:16px;line-height:1.55;color:#4B4F45}
.fine{margin:0;font-size:14px;line-height:1.5;color:#4B4F45}
.plain{list-style:none;margin:0;padding:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4B4F45}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:999px;background:#CCFF00;box-shadow:0 0 0 1px rgba(14,15,12,.25)}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:#CCFF00;color:#0E0F0C;font-weight:600;text-decoration:none}
.skip:focus{top:16px}

/*
 * El logo oficial de NEOPASS: el sello —la entrada con sus muescas y la barra
 * volt— y la palabra con «pass» en su pastilla. Es el mismo de
 * `apps/web/components/brand/logo.tsx` y del panel de plataforma, en proporción:
 * sello 1,2 veces la letra, separación 0,6, pastilla con 0,25 de radio. El
 * cuerpo del sello es tinta sobre claro y el gris elevado sobre oscuro.
 */
.logo{display:inline-flex;align-items:center;gap:0.6em;text-decoration:none;color:#161616;min-height:44px;line-height:1}
.logo .mark{height:1.2em;width:auto;aspect-ratio:44/32;display:block;color:#161616}
.logo .word{font-family:'Sora',system-ui,sans-serif;font-weight:700;letter-spacing:-0.03em;white-space:nowrap}
.logo .pill{background:#CCFF00;color:#161616;border-radius:0.25em;padding:0 0.2em}
.logo.on-ink{color:#F4F4F2}
.logo.on-ink .mark{color:#39383A}

/* Botones y enlaces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 'Geist',system-ui,sans-serif;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn-lime{background:#CCFF00;color:#0E0F0C}.btn-lime:hover{background:#B8E600;color:#0E0F0C}
.btn-outline-dark{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.4)}.btn-outline-dark:hover{border-color:#FFFFFF;color:#FFFFFF}
.btn-dark{background:#0E0F0C;color:#FFFFFF}.btn-dark:hover{background:#2A2C25;color:#FFFFFF}
.btn-submit{width:100%;min-height:54px;font-size:17px;background:#0E0F0C;color:#FFFFFF}.btn-submit:hover{background:#2A2C25}
.btn[disabled]{opacity:.75;cursor:progress}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px solid #CCFF00;padding-bottom:4px;min-height:44px}
.lang-link{color:#D9DCD2;font-size:15px;font-weight:500;text-decoration:none;padding:10px 0}.lang-link:hover{color:#FFFFFF}
:focus-visible{outline:3px solid #0E0F0C;outline-offset:3px;box-shadow:0 0 0 6px #CCFF00;border-radius:6px}
.on-dark :focus-visible{outline-color:#CCFF00;box-shadow:0 0 0 6px rgba(204,255,0,.25)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:#D9DCD2;text-decoration:none;font-size:15px;font-weight:500;padding:10px 0}.nav-links a:hover{color:#FFFFFF}

/* Rejillas */
.g-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.g-feat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.span3{grid-column:span 3}.span2{grid-column:span 2}
.g-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}

/* Tarjetas */
.card{padding:28px;border-radius:20px;display:flex;flex-direction:column;gap:16px}
.card.soft{background:#F4F5EF}
.card.step{background:#FFFFFF;border:1px solid #E3E5DC;gap:18px}
.card.step.dark{background:#0E0F0C;color:#FFFFFF;border-color:#0E0F0C}
.card.step.dark .muted{color:#C3C7BA}
.card.feat{padding:32px;border-radius:24px;border:1px solid #E3E5DC}
.card.feat .h3{font-size:22px}
.card.feat .muted{line-height:1.6}
.card.ink{background:#0E0F0C;color:#FFFFFF;gap:14px}
.card.ink .ic{width:28px;height:28px;color:#CCFF00}
.card.ink .muted{color:#C3C7BA}
.tile{width:48px;height:48px;border-radius:14px;background:#FFFFFF;border:1px solid #E3E5DC;display:grid;place-items:center}
.tile.lime{width:52px;height:52px;border-radius:16px;background:#CCFF00;border:0}
.step-head{display:flex;justify-content:space-between;align-items:center}
.step-tag{font:700 15px/1 'Sora',sans-serif;background:#CCFF00;color:#0E0F0C;padding:8px 14px;border-radius:999px}
.case{border-radius:24px;background:#FFFFFF;border:1px solid #E3E5DC;overflow:hidden;display:flex;flex-direction:column}
.case-art{height:168px;position:relative;overflow:hidden}
.case-icon{position:absolute;right:28px;top:28px;width:72px;height:72px;border-radius:20px;background:#0E0F0C;color:#CCFF00;display:grid;place-items:center}
.case-icon.lime{background:#CCFF00;color:#0E0F0C}
.case-body{padding:28px;display:flex;flex-direction:column;gap:12px}
.case-body .h3{font-size:22px}
.case-body .muted{line-height:1.6}
.plans{border-radius:32px;background:#FFFFFF;border:1px solid #E3E5DC;padding:clamp(28px,5vw,64px)}
.enterprise{margin-top:24px;border-radius:32px;background:#0E0F0C;color:#FFFFFF;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 64px;align-items:start}
.enterprise>div:last-child{grid-column:1/-1}
.eyebrow.ent{color:#C3C7BA}
.ent-title{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.1;font-weight:600}
.ent-body{margin:0;font-size:17px;line-height:1.6;color:#C3C7BA}
.ent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.ent-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.55;color:#E6E8E0}
.ent-list li>span:last-child{padding-top:4px}
.enterprise .dot{color:#161616}
.checks{display:flex;flex-direction:column}
.checks li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #E3E5DC;font-size:17px;line-height:1.55}
.checks li:last-child{border-bottom:0}
.checks li>span:last-child{padding-top:3px}
.dot{flex:none;width:32px;height:32px;border-radius:999px;background:#CCFF00;display:grid;place-items:center}
.dot .ic{width:18px;height:18px;stroke-width:2.4}
.dot.big{width:64px;height:64px}
.dot.big .ic{width:30px;height:30px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot-links a{display:inline-block;padding:12px 0;text-decoration:none;font-size:15px;font-weight:500}

/* Ilustración de la portada */
.mock{container-type:inline-size;position:relative;width:100%;aspect-ratio:56/52}
.mock-in{position:absolute;inset:0;font-size:calc(100cqw / 56)}

/* Preguntas frecuentes: acordeón nativo */
details.faq{border-bottom:1px solid #E3E5DC}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4px;font:600 clamp(17px,1.6vw,19px)/1.35 'Sora',system-ui,sans-serif;letter-spacing:-0.01em;min-height:44px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .pm{flex:none;width:32px;height:32px;border-radius:999px;border:1.5px solid #0E0F0C;display:grid;place-items:center;transition:transform .2s,background .2s}
details.faq summary .pm .ic{width:16px;height:16px;stroke-width:2.2}
details.faq[open] summary .pm{transform:rotate(45deg);background:#CCFF00;border-color:#CCFF00}
details.faq p{margin:0;padding:0 56px 24px 4px;color:#4B4F45;font-size:17px;line-height:1.6}

/* Formulario de contacto */
.form-card{background:#FFFFFF;color:#0E0F0C;border-radius:28px;padding:clamp(24px,4vw,40px)}
.form-card :focus-visible{outline-color:#0E0F0C;box-shadow:0 0 0 6px #CCFF00}
#contact-form{display:flex;flex-direction:column;gap:20px}
.lbl{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#0E0F0C}
.field{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1.5px solid #C9CCC0;background:#FFFFFF;color:#0E0F0C;font:400 16px/1.4 'Geist',system-ui,sans-serif}
.field:hover{border-color:#8E9284}
.field:focus-visible{border-color:#0E0F0C;border-radius:12px}
.field[aria-invalid="true"]{border-color:#B42318;background:#FFF7F6}
textarea.field{min-height:120px;resize:vertical}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0F0C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.req{color:#B42318}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#FEF1EF;border:1.5px solid #B42318;color:#7A1A11}
.alert p{margin:0;font-size:15px;line-height:1.5;font-weight:500}
.success{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding:24px 0}
.success p{margin:0;font:600 22px/1.35 'Sora',sans-serif;letter-spacing:-0.01em}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:18px;height:18px;border-radius:999px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#CCFF00;animation:spin .8s linear infinite}
@keyframes scan{0%,100%{top:18%}50%{top:74%}}
.scanline{animation:scan 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.scanline,.spin{animation:none}html{scroll-behavior:auto}}

@media (max-width:1040px){
.g-hero,.g-split{grid-template-columns:minmax(0,1fr);gap:48px}
.enterprise{grid-template-columns:minmax(0,1fr)}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:minmax(0,1fr)}
.g-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
.span3,.span2{grid-column:span 1}
.span-last{grid-column:span 2}
}
@media (max-width:860px){.nav-links{display:none}}
@media (max-width:640px){
.ent-list{grid-template-columns:minmax(0,1fr)}
.wrap{padding:0 16px}
.sec{padding:72px 0}
.g2,.g4,.g-feat{grid-template-columns:minmax(0,1fr)}
.span-last{grid-column:span 1}
details.faq p{padding-right:4px}
}
@media (max-width:420px){.hide-xs{display:none}}