/* =====================================================================
ESTILO NOTIAPP para la landing
Copiado del panel (repo Clients, public/estilos.css, estilo «Kos» del
29-oct-2026: html[data-sistema="A"][data-sobrio="1"]). Si la app cambia,
se cambia AQUÍ y en ningún otro lado.
Reglas:
- Siempre claro (la app no tiene modo oscuro).
- Una sola letra: DM Sans, pesos 400 / 500 / 600. Nada más grueso.
- Colores: solo estas variables. Nada de hex sueltos en las páginas.
- Piezas con prefijo na- para no chocar con otras clases.
Para usarlo en una página:
===================================================================== */
:root{
color-scheme:light;
/* Letra */
--na-f:"DM Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
/* Fondo y superficies */
--na-fondo:#e7f8f6; /* aguamarina clarito: fondo de toda la app */
--na-fondo-menta:#dcf8eb; /* degradado de la app y los videos: menta → aqua → celeste */
--na-fondo-aqua:#dbf6f4;
--na-fondo-celeste:#ddf2fc;
--na-card:#ffffff;
--na-sup:#f4f6f9; /* opciones sin elegir */
--na-linea:#e3e8ef;
--na-linea-2:#e1e8ef;
/* Texto */
--na-ink:#1b2733;
--na-ink-2:#3f4a56;
--na-mute:#5d6a76;
/* Azul de la app */
--na-pri:#1a73c9;
--na-pri-ink:#ffffff;
--na-on:#135a9e; /* azul oscuro: enlaces y texto sobre azul clarito */
--na-soft:#e2effb; /* azul clarito: opción elegida */
--na-toque:#eef6ff;
--na-toque-ln:#d3e7fd;
--na-celeste:#70c8f0;
/* Marca (logo) */
--na-marca-azul:#1f6fa8;
--na-marca-aguamarina:#3fb6aa;
/* Estados */
--na-ok:#22a074; --na-ok-soft:#e2f7ef; --na-ok-ink:#11704f;
--na-alm:#be1e4a; --na-alm-soft:#fce8ee; /* alarma / lo malo */
--na-aviso:#d39b1c; /* puntito de «falta» */
--na-amarillo:#fff9e6; --na-amarillo-ink:#5a4200; --na-amarillo-line:#f3dc8f;
/* Hojita amarilla del borrador */
--na-borr:#fff8dc; --na-borr-cuad:#f5eabd; --na-borr-tag:#f6d55c;
--na-borr-ink:#5a4200; --na-borr-falta:#d9a400; --na-borr-boton:#ecc232;
/* Hoja de la nota final */
--na-nf-cuad:#ecf3fb; --na-nf-linea:#d7dee6;
/* Catéteres (ISO 10555-5) */
--na-g14:#f28c28; --na-g16:#8f969c; --na-g18:#1f9d55; --na-g20:#ef8fb6;
--na-g22:#1e6fd0; --na-g24:#f2c81b; --na-g26:#8e5bc4;
/* Quemadura de grado II: el color con que se pinta en el cuerpo de la app
(Clients/public/estilos.css, --qm2). Se agrega para la animación del cuerpo en la landing. */
--na-qm2:#d9482b;
--na-qm3:#7a1f2b; /* quemadura de grado III (--qm3): el trazo del dibujito de quemadura */
/* Heridas y úlceras como las dibuja la app en el cuerpo (Clients/public/estilos.css: --her-linea, --her-punto,
--her-halo, --les-upp-*, --les-ven-*). Se agregan para la animación del cuerpo de la propuesta v3. */
--na-her-linea:#7a2533; --na-her-punto:#3a2326; --na-her-halo:#e79a9a; /* herida quirúrgica: incisión y puntos de sutura */
--na-les-upp-borde:#8a2c3a; --na-les-upp-lecho:#b5505a; --na-les-upp-halo:#eaa4a4; /* úlcera por presión: mancha rojiza */
--na-les-ven-borde:#7a3d22; --na-les-ven-lecho:#a8643c; --na-les-ven-halo:#e6b48f; /* úlcera venosa: mancha café */
/* ---- SOLO LANDING: secciones oscuras (pedido de Paula, 9-nov-2026: «fondos oscuros, menta con azul, cuadros blancos»).
La app sigue siendo clara; esto es para vender. El azul noche sale de la marca (#0f4a85 «hondo» llevado a casi negro). ---- */
--na-noche:#0a1b2e; /* fondo oscuro principal */
--na-noche-2:#0f2640; /* oscuro un poco más claro (tarjetas sobre oscuro, degradado) */
--na-noche-3:#163556; /* bordes y separadores sobre oscuro */
--na-sobre-noche:#eef5fb; /* texto sobre oscuro */
--na-sobre-noche-2:#a8bdd2; /* texto secundario sobre oscuro */
--na-menta-viva:#5fd3c4; /* aguamarina de la marca, más luminosa para leerse sobre oscuro */
--na-celeste-vivo:#7cc4f2; /* celeste para acompañar la menta sobre oscuro */
--na-blanco-velo:color-mix(in srgb,#ffffff 7%,transparent); /* superficies sutiles sobre oscuro */
/* Forma */
--na-r:12px; /* tarjetas */
--na-r-boton:10px; /* botones */
--na-r-chip:8px; /* opciones */
--na-sombra:0 0 0 1px var(--na-linea),0 10px 30px rgb(26 115 201 / .06);
--na-sombra-hoja:0 1px 2px rgb(16 40 70 / .06),0 8px 24px rgb(16 40 70 / .08);
--na-sombra-boton:0 1px 2px rgb(16 40 70 / .14);
}
/* ---------- Base ---------- */
.na-pagina{margin:0;background:var(--na-fondo);color:var(--na-ink);font:400 17px/1.5 var(--na-f);-webkit-font-smoothing:antialiased}
.na-pagina :focus-visible{outline:3px solid var(--na-pri);outline-offset:2px}
.na-degradado{background:linear-gradient(90deg,var(--na-fondo-menta) 0%,var(--na-fondo-aqua) 50%,var(--na-fondo-celeste) 100%)}
/* ---------- Logo: cuadrito con degradado azul → aguamarina y la N; «Noti» oscuro + «App» azul ---------- */
.na-logo{display:inline-flex;align-items:center;gap:9px;font:600 21px/1 var(--na-f);letter-spacing:-.02em;color:var(--na-ink);text-decoration:none}
.na-logo i{flex:none;width:32px;height:32px;border-radius:10px;font-size:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M176 352V160l160 192V160' fill='none' stroke='%23fff' stroke-width='72' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,linear-gradient(135deg,var(--na-marca-azul),var(--na-marca-aguamarina))}
.na-logo b{font-weight:600;color:var(--na-marca-azul)}
/* ---------- Tarjeta: blanca, línea fina, sombra muy suave ---------- */
.na-tarjeta{background:var(--na-card);border-radius:var(--na-r);box-shadow:var(--na-sombra)}
/* ---------- Botones ---------- */
.na-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:var(--na-r-boton);
background:var(--na-pri);color:var(--na-pri-ink);font:500 16px/1.2 var(--na-f);text-decoration:none;box-shadow:var(--na-sombra-boton);cursor:pointer}
.na-boton:hover{background:var(--na-on)}
.na-boton.na-sec{background:var(--na-card);color:var(--na-on);box-shadow:0 0 0 1px var(--na-linea)}
.na-boton.na-sec:hover{background:var(--na-toque)}
.na-boton.na-verde{background:var(--na-ok-ink)} /* «Todo normal» de la app */
.na-boton.na-mostaza{background:var(--na-borr-boton);color:var(--na-borr-ink)} /* «Guardar» dentro del borrador */
/* ---------- Opciones de la nota (chips): gris clarito; la elegida azul clarito con ✓; puntito verde o rojo ---------- */
.na-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:0;border-radius:var(--na-r-chip);
background:var(--na-card);box-shadow:inset 0 0 0 1px var(--na-linea);color:var(--na-ink);font:400 16px/1.3 var(--na-f);cursor:pointer}
/* Opciones BLANCAS con línea fina (Paula, 10-nov-2026: «en la app se ven blancas»; allá son --sup-kos sobre fondo de color, aquí van sobre tarjetas blancas) */
.na-chip.on,.na-chip[aria-pressed="true"]{box-shadow:none}
.na-chip[data-col]::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}
.na-chip[data-col="ok"]::before{background:var(--na-ok)}
.na-chip[data-col="mal"]::before{background:var(--na-alm)}
.na-chip.on,.na-chip[aria-pressed="true"]{background:var(--na-soft);color:var(--na-on);font-weight:500}
.na-chip.on::after,.na-chip[aria-pressed="true"]::after{content:"✓";margin-left:auto;padding-left:8px;color:var(--na-on)}
/* ---------- Estado con puntito (Mi turno) ---------- */
.na-estado{display:inline-flex;align-items:center;gap:6px;font:400 14px/1.3 var(--na-f)}
.na-estado::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.na-estado.na-falta{color:var(--na-amarillo-ink)}
.na-estado.na-falta::before{background:var(--na-aviso)}
.na-estado.na-lista{color:var(--na-ok-ink)}
.na-estado.na-lista::before{background:var(--na-ok)}
/* ---------- Píldora ---------- */
.na-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font:500 13px/1.5 var(--na-f);background:var(--na-soft);color:var(--na-on);white-space:nowrap}
/* ---------- Hojita amarilla del borrador («Así va a quedar en la nota») ---------- */
.na-borrador{border-radius:8px;padding:14px 16px;box-shadow:var(--na-sombra-hoja);color:var(--na-ink);font:400 15px/1.55 var(--na-f);
background:linear-gradient(var(--na-borr-cuad) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--na-borr-cuad) 1px,transparent 1px) 0 0/16px 16px,var(--na-borr)}
.na-borr-tag{display:inline-block;margin:0 6px 8px 0;padding:2px 10px;border-radius:999px;background:var(--na-borr-tag);color:var(--na-borr-ink);font:500 13px/1.4 var(--na-f)}
.na-borrador .na-v{padding:0 3px;border-radius:4px;background:var(--na-borr-tag);color:var(--na-borr-ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.na-borrador .na-hueco{padding:0 3px;border-radius:4px;background:var(--na-card);box-shadow:inset 0 0 0 1px var(--na-borr-falta);color:var(--na-borr-ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* ---------- Nota de enfermería final: hoja con cuadrícula celeste y membrete azul ---------- */
.na-nota{overflow:hidden;border:1px solid var(--na-nf-linea);border-radius:6px;box-shadow:0 1px 2px rgb(16 40 70 / .06);color:var(--na-ink);
background:linear-gradient(var(--na-nf-cuad) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--na-nf-cuad) 1px,transparent 1px) 0 0/16px 16px,var(--na-card)}
.na-nota-cab{padding:14px 22px 14px;background:var(--na-pri);color:var(--na-card)}
.na-nota-cab h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;font:600 16px/1.3 var(--na-f)}
.na-nota-cab h3 small{flex:none;font:500 14px var(--na-f)}
.na-nota-cab p{margin:4px 0 0;font:400 14px/1.4 var(--na-f)}
.na-nota-cuerpo{padding:14px 22px 18px}
.na-reg{padding:8px 0}
.na-reg-cab{display:flex;align-items:center;gap:8px}
.na-reg-cab b{font:600 15px/1.5 var(--na-f);font-variant-numeric:tabular-nums}
.na-nota-tipo{padding:2px 10px;border-radius:12px;background:color-mix(in srgb,var(--na-celeste) 24%,transparent);color:var(--na-on);font:400 14px/1.35 var(--na-f)}
.na-reg p{margin:4px 0 0;font-size:15px;line-height:1.5}
.na-firma{margin:18px 0 0;padding-top:8px;border-top:1px solid var(--na-ink);max-width:260px;font-size:13px;color:var(--na-mute)}
.na-firma b{display:block;color:var(--na-ink)}
/* Sin bloque de «reducir movimiento»: en la landing las animaciones se ven siempre, en Windows y en Mac (Paula, 9-nov-2026) */
/* ---------- Secciones oscuras de la landing ---------- */
.na-oscuro{background:var(--na-noche);color:var(--na-sobre-noche)}
.na-oscuro .na-mute{color:var(--na-sobre-noche-2)}
/* Luz de marca detrás del producto: un solo resplandor suave azul → menta (no más de uno por sección) */
.na-resplandor{background:radial-gradient(60% 55% at 70% 45%,color-mix(in srgb,var(--na-marca-aguamarina) 22%,transparent),transparent 70%),radial-gradient(45% 45% at 85% 70%,color-mix(in srgb,var(--na-pri) 25%,transparent),transparent 70%),var(--na-noche)}
/* Texto con el degradado de la marca (para UNA palabra clave del titular) */
.na-texto-marca{background:linear-gradient(90deg,var(--na-menta-viva),var(--na-celeste-vivo));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Botón claro para fondos oscuros */
.na-boton.na-claro{background:var(--na-card);color:var(--na-noche)}
.na-boton.na-claro:hover{background:var(--na-toque)}
.na-boton.na-borde-claro{background:transparent;color:var(--na-sobre-noche);box-shadow:inset 0 0 0 1px var(--na-noche-3)}
.na-boton.na-borde-claro:hover{background:var(--na-blanco-velo)}
/* Franja de cierre con el degradado de la marca */
.na-banda-marca{background:linear-gradient(120deg,var(--na-marca-azul),var(--na-marca-aguamarina));color:var(--na-card)}
/* ---------- SOLO LANDING v4 (propuesta-a-v4-premium, 9-nov-2026): radios y sombras de las piezas grandes ----------
Se agregan porque las tarjetas de producto de la landing son más grandes que las de la app y van sobre azul noche. */
:root{
--na-r-grande:24px; /* tarjetas grandes: simulación, tabla, precios */
--na-r-medio:20px; /* tarjetas de los dolores */
--na-r-tel:46px; /* bisel del celular del video */
--na-sombra-noche:0 1px 2px rgb(3 10 20 / .30),0 32px 72px -24px rgb(3 10 20 / .70); /* tarjeta blanca sobre azul noche */
--na-sombra-suave:0 1px 2px rgb(16 40 70 / .04),0 20px 44px -18px rgb(16 40 70 / .16); /* tarjeta blanca sobre claro, sin borde */
--na-sombra-tel:0 60px 110px -30px rgb(0 0 0 / .75),0 0 0 1px var(--na-noche-3),inset 0 1px 0 color-mix(in srgb,#ffffff 8%,transparent); /* celular oscuro del hero */
}
/* Logo sobre fondo oscuro: «Noti» claro y «App» en menta viva */
.na-logo.na-en-noche{color:var(--na-sobre-noche)}
.na-logo.na-en-noche b{color:var(--na-menta-viva)}
/* Resplandor centrado y más abajo: para una sección oscura cuyo producto va al centro (la simulación de la v4) */
.na-resplandor.na-al-centro{background:radial-gradient(55% 40% at 50% 68%,color-mix(in srgb,var(--na-marca-aguamarina) 20%,transparent),transparent 70%),radial-gradient(45% 35% at 50% 88%,color-mix(in srgb,var(--na-pri) 24%,transparent),transparent 70%),var(--na-noche)}
/* ---------- SOLO LANDING · vista previa del hero 3 «Celular y computador» (9-nov-2026) ----------
La ventana del navegador es más grande que el celular y necesita una sombra más honda para despegarse del azul noche;
el cursor del mouse lleva una sombrita para leerse sobre la app clara. */
:root{
--na-sombra-ventana:0 0 0 1px var(--na-noche-3),0 1px 2px rgb(3 10 20 / .30),0 40px 90px -30px rgb(3 10 20 / .80),0 90px 160px -50px rgb(0 0 0 / .60);
--na-sombra-cursor:drop-shadow(0 2px 3px rgb(0 0 0 / .35));
}
/* ---------- SOLO LANDING (9-nov-2026): aluminio y negro de bisel para dibujar el computador del hero ----------
Se agregan para propuestas/hero/opciones-computador.html (portátil plateado, monitor, ventana): grises del metal, de claro a oscuro. */
:root{
--na-alu-1:#f4f5f7; /* aluminio: brillo */
--na-alu-2:#e0e3e8; /* aluminio: cara */
--na-alu-3:#c4c9d0; /* aluminio: borde y sombra suave */
--na-alu-4:#8f97a2; /* aluminio: canto en sombra */
--na-negro:#0b0e12; /* bisel de la pantalla */
}