/* G2 Labs, tema claro y cálido (2/11/2026, a pedido: aire de Clínica Aurora de Moxen, pero con nuestra tecnología).
   Se carga después del <style> de cada página y cambia la paleta por variables: papel crema, grafito y el azul de G2 Labs.
   La mascota G2™ conserva su cara oscura (es la única pieza oscura). */
:root {
    --obsidiana: #F4F1EA;
    --obsidiana-2: #FBFAF6;
    --perla: #F2EFE8;
    --blanco: #FBFAF6;
    --pizarra: #1B1B1F;
    --plomo: #6C6A62;
    --linea-clara: rgba(27, 27, 31, .11);
    --linea-oscura: rgba(27, 27, 31, .11);
    --cian: #005C97;
    --cian-suave: #0B6FB0;
    --texto-oscuro: #1B1B1F;
    --texto-oscuro-2: #5A5852;
    --azul: #005C97;
    color-scheme: light;
}
html { background: var(--obsidiana); }
body { background: var(--obsidiana); color: var(--texto-oscuro); }
body::before { background: var(--obsidiana); }
:focus-visible { outline-color: var(--azul); }
.saltar { background: var(--azul); color: #fff; }
::selection { background: #A9C9EC; color: #1B1B1F; }

/* Numeración de las secciones: 01 · Sectores, 02 · Cómo trabajamos… */
main { counter-reset: sec; }
main section:not(.portada) .ceja { counter-increment: sec; }
main section:not(.portada) .ceja::before { content: "0" counter(sec) " \00B7  "; color: var(--plomo); }
.ceja { color: var(--azul); }

/* Encabezado */
.cabecera.solida { background: rgba(244, 241, 234, .86); }
.logo img, .menu-movil .fila img, .pie img { filter: none; }
.menu a:hover { color: var(--azul); }
.btn-fantasma { border-color: rgba(27, 27, 31, .22); color: var(--texto-oscuro); }
.btn-fantasma:hover { border-color: var(--azul); background: rgba(0, 92, 151, .06); }
.hamburguesa { border-color: var(--linea-clara); }
.idioma > button { border-color: rgba(27, 27, 31, .2); }
.idioma > button:hover { border-color: rgba(27, 27, 31, .4); }
.idioma-menu { background: #fff; box-shadow: 0 24px 48px -20px rgba(27, 27, 31, .3); }
.idioma-menu .lang-btn small { color: var(--plomo); }
.idioma-menu .lang-btn:hover, .idioma-menu .lang-btn[aria-current="true"] { background: rgba(0, 92, 151, .08); color: var(--azul); }
.menu-movil { background: var(--obsidiana); }
.menu-movil nav a:hover { color: var(--azul); }

/* Botones */
.btn-primario { background: var(--azul); color: #fff; box-shadow: 0 12px 28px -14px rgba(0, 92, 151, .7); }
.btn-primario:hover { background: #004878; }
.enlace-flecha { border-bottom-color: rgba(27, 27, 31, .28); }
.enlace-flecha:hover { border-color: var(--azul); color: var(--azul); }
.btn-wa { color: #047857; border-color: rgba(4, 120, 87, .4); background: rgba(4, 120, 87, .06); }
.btn-wa:hover { background: rgba(4, 120, 87, .12); border-color: #047857; }

/* Portada: papel crema, titular grande en minúsculas con la cursiva en azul, rejilla viva en grafito */
.portada { background: var(--obsidiana); padding-top: 124px; padding-bottom: 72px; }
.portada::after { display: none; }
.textura { background: radial-gradient(ellipse 60% 50% at 82% 38%, rgba(169, 201, 236, .55), transparent 65%), radial-gradient(ellipse 45% 40% at 8% 100%, rgba(243, 221, 138, .35), transparent 70%); }
.puntos { opacity: .6; background-image: radial-gradient(rgba(27, 27, 31, .1) 1px, transparent 1px); }
.rejilla-viva { --rt-punto: #1B1B1F; opacity: .55; }
.reticula span { background: rgba(27, 27, 31, .07); }
.brillo { display: none; }
.titular { color: var(--texto-oscuro); text-transform: none; font-weight: 600; letter-spacing: -.045em; line-height: .96; font-size: clamp(42px, 5.6vw, 76px); }
html[lang="de"] .titular { font-size: clamp(36px, 5.6vw, 72px); }
.titular .serif { color: var(--azul); font-size: 1.1em; line-height: .8; }
.titular .punto, .cierre h2 .punto { color: var(--azul); }
.bajada { font-size: 17px; }
.confianza i { box-shadow: none; }
.cifras { border-top-color: var(--linea-clara); }
.cifras b { color: var(--texto-oscuro); }

/* Escena de la portada: mascota G2™ y tarjetas claras */
.halo { border-color: rgba(27, 27, 31, .1); }
.halo.h2 { border-color: rgba(0, 92, 151, .22); }
.robot { box-shadow: 0 40px 80px -30px rgba(27, 27, 31, .55), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(212, 175, 55, .3); }
.marca-g2 { color: var(--plomo); }
.vidrio { background: rgba(251, 250, 246, .88); border: 1px solid var(--linea-clara); box-shadow: 0 30px 60px -34px rgba(27, 27, 31, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vidrio::before { display: none; }
.tarjeta-prueba .etq { color: var(--plomo); }
.tarjeta-prueba h3 { color: var(--texto-oscuro); }
.tarjeta-prueba h3 .serif { color: var(--azul); }
.tarjeta-prueba p { color: var(--texto-oscuro-2); }
.cifra-grande { color: var(--texto-oscuro); }
.vivo { color: #047857; }
.turno-sector { color: var(--plomo); }

/* Bandas y títulos de sección: más aire */
.seccion { padding-block: clamp(96px, 12vw, 168px); }
.h-seccion { font-weight: 600; letter-spacing: -.045em; font-size: clamp(36px, 5.4vw, 72px); line-height: 1; }
.banda-clara .h-seccion .serif, .banda-blanca .h-seccion .serif { color: var(--azul); }
.lead { font-size: 18px; }
.sector-tarjeta { border-radius: 24px; background: var(--blanco); box-shadow: none; border-color: var(--linea-clara); }
.sector-tarjeta:hover { box-shadow: 0 28px 50px -34px rgba(27, 27, 31, .4); }
.sector-tarjeta p { color: var(--texto-oscuro-2); }
.sector-tarjeta .estado { background: rgba(27, 27, 31, .06); color: var(--texto-oscuro-2); }
.sector-tarjeta .estado.on { background: rgba(4, 120, 87, .1); color: #047857; }

/* Cómo trabajamos: palabras enormes llenas de foto (efecto «Ventana», hecho con CSS y un poco de JS) */
.etapas { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linea-clara); }
.etapa { position: relative; display: grid; gap: 14px 48px; align-items: end; padding: clamp(28px, 4vw, 52px) 0; border-top: 1px solid var(--linea-clara); }
@media (min-width: 960px) { .etapa { grid-template-columns: minmax(0, 2fr) minmax(0, .7fr); } }
.etapa-n { grid-column: 1 / -1; font-family: var(--f-cifra); font-size: 12px; letter-spacing: .14em; color: var(--plomo); }
.palabra { --p: .5; margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(56px, 12vw, 160px); line-height: .98; letter-spacing: -.055em; padding-bottom: .06em; color: var(--texto-oscuro);
    background: var(--foto) center calc(var(--p) * 100%) / 150% auto no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    transform: translateY(26px); transition: transform .9s cubic-bezier(.2, .7, .2, 1), background-size .9s cubic-bezier(.2, .7, .2, 1); display: inline-block; width: fit-content; max-width: 100%; overflow-wrap: normal; white-space: nowrap; }
html[lang="de"] .palabra { font-size: clamp(48px, 10vw, 130px); }
.etapa.vista .palabra { transform: none; }
.etapa:hover .palabra { background-size: 175% auto; }
@supports not (background-clip: text) { .palabra { -webkit-text-fill-color: currentColor; background: none; } }
.punto-foto { display: inline-block; width: .18em; height: .18em; margin-left: .06em; border-radius: 50%; background: var(--foto) center / cover; vertical-align: baseline; box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 3px var(--linea-clara); }
.etapa-texto { padding-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.etapa-texto h4 { margin: 0; font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.etapa-texto p { font-size: 16px; color: var(--texto-oscuro-2); max-width: 38ch; }

/* Automatización: la ventana del robot, en claro */
.pasos li { border-color: var(--linea-clara); }
.ventana { background: var(--blanco); color: var(--texto-oscuro); box-shadow: 0 40px 80px -50px rgba(27, 27, 31, .45), 0 0 0 1px var(--linea-clara); }
.ventana-barra i { background: rgba(27, 27, 31, .16); }
.ventana-barra span { color: var(--plomo); }
.ventana-barra em { color: #8A6D12; border-color: rgba(138, 109, 18, .4); }
.registro div { color: var(--texto-oscuro-2); }
.registro div time { color: var(--plomo); }
.registro div b { color: #047857; }
.registro div.pend b { color: var(--plomo); }
.registro div.act b { color: var(--azul); }
.resumen-ventana small { color: var(--plomo); }
.resumen-ventana strong { color: var(--texto-oscuro); }

/* Contacto */
.cierre { background: var(--blanco); border-top: 1px solid var(--linea-clara); }
.cierre h2 { color: var(--texto-oscuro); text-transform: none; font-weight: 600; letter-spacing: -.045em; font-size: clamp(40px, 6vw, 80px); }
.cierre h2 .serif { color: var(--azul); }
.cierre .vidrio { background: #fff; box-shadow: 0 40px 70px -50px rgba(27, 27, 31, .45); border-radius: 26px; }
.campo label { color: var(--texto-oscuro-2); }
.campo input, .campo select, .campo textarea { color: var(--texto-oscuro); background: var(--obsidiana-2); border-color: rgba(27, 27, 31, .16); }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(27, 27, 31, .38); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); background: #fff; }
.consent { color: var(--texto-oscuro-2); }
.consent input { accent-color: var(--azul); }
.consent a { color: var(--azul) !important; }
.exito h3 { color: var(--texto-oscuro); }
.exito .check { color: #047857; }
.exito button { color: var(--azul); }

/* Pie */
.pie { background: var(--obsidiana); border-top: 1px solid var(--linea-clara); }
.pie h4 { color: var(--plomo); }
.pie ul a:hover { color: var(--azul); }
.legal { color: var(--plomo); }

/* ---------- «Apps y casos» (soluciones.html): la sección de apps también en claro ---------- */
.suite { background: var(--blanco); }
.suite::before { background: radial-gradient(closest-side, rgba(169, 201, 236, .45), transparent); }
.suite .h-seccion { color: var(--texto-oscuro); }
.suite .h-seccion .serif { color: var(--azul); }
.suite .lead, .suite-datos { color: var(--texto-oscuro-2); }
.suite-datos b { color: var(--texto-oscuro); }
.destacada { background: #fff; border-radius: 26px; }
.destacada::after { opacity: .55; }
.app-cabeza h3 { color: var(--texto-oscuro); }
.app-icono { box-shadow: 0 0 0 1px var(--linea-clara), 0 8px 18px -10px rgba(27, 27, 31, .35); }
.ejemplo { color: var(--plomo); border-color: var(--linea-clara); }
.sello-dnda { color: #047857; border-color: rgba(4, 120, 87, .35); }
.lote, .ficha { background: var(--obsidiana-2); border-color: var(--linea-clara); }
.lote-fila { border-bottom-color: var(--linea-clara); }
.lote-fila.cab { color: var(--plomo); }
.lote-fila .num { color: var(--texto-oscuro); }
.pild.ok { background: rgba(4, 120, 87, .1); color: #047857; }
.pild.en { background: rgba(0, 92, 151, .1); color: var(--azul); }
.pild.oro { background: rgba(201, 162, 39, .18); color: #8A6D12; }
.buscador { background: var(--obsidiana-2); color: var(--texto-oscuro); }
.buscador svg { color: var(--plomo); }
.ficha h4 { color: var(--texto-oscuro); }
.equivalencias div { background: #fff; border: 1px solid var(--linea-clara); }
.equivalencias b { color: var(--texto-oscuro); }
.charla p { background: var(--obsidiana-2); color: var(--texto-oscuro); border: 1px solid var(--linea-clara); }
.acta-lista { color: var(--texto-oscuro); }
.acta-lista li::before { color: #047857; }
.acta-lista em { color: var(--plomo); }
.precio { color: var(--texto-oscuro); }
.precio-barra { background: rgba(27, 27, 31, .08); }
.flujo span { background: var(--obsidiana-2); color: var(--plomo); }

/* Lista de apps: filas numeradas, como las «Especialidades» de Clínica Aurora */
.apps { border-radius: 26px; border-color: var(--linea-clara); background: #fff; counter-reset: app; }
button.app { counter-increment: app; grid-template-columns: 30px 44px 1fr auto; border-bottom-color: var(--linea-clara); }
button.app::before { content: counter(app, decimal-leading-zero); font-family: var(--f-cifra); font-size: 12px; letter-spacing: .08em; color: var(--plomo); }
button.app:hover { background: var(--obsidiana-2); }
button.app h3 { color: var(--texto-oscuro); }
button.app .ir { color: var(--plomo); }
button.app[aria-selected="true"] { background: var(--obsidiana-2); }
.apps-sep { background: var(--obsidiana-2); border-bottom-color: var(--linea-clara); color: var(--plomo); }
.estrella { color: var(--azul); background: rgba(0, 92, 151, .08); border-color: rgba(0, 92, 151, .3); }

/* Casos y bloque «Lo que difícilmente encontrará…» */
.caso { background: var(--blanco); border-radius: 24px; padding: 30px 28px 32px; transition: transform .25s, box-shadow .25s; }
.caso:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -36px rgba(27, 27, 31, .45); }
.caso h3 { letter-spacing: -.025em; }
.estado.on { background: rgba(4, 120, 87, .1); color: #047857; }
.estado { background: rgba(27, 27, 31, .06); }
.diferencial { background: var(--perla); color: var(--texto-oscuro-2); border: 1px solid var(--linea-clara); border-radius: 26px; }
.h-dif { color: var(--texto-oscuro); }
.h-dif .serif { color: var(--azul); }
.dif-grid b { color: var(--texto-oscuro); }
.dif-grid span { color: var(--texto-oscuro-2); }
.herramientas li, .roles > div, .camino { background: var(--blanco); }
.cita { font-weight: 500; letter-spacing: -.035em; }

/* Portada: el resultado primero, y dos botones claros */
.resultado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--linea-clara); border-bottom: 1px solid var(--linea-clara); max-width: 560px; }
.resultado b { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--f-cifra); font-weight: 500; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.04em; color: var(--texto-oscuro); }
.resultado b i { font-style: normal; color: var(--azul); }
.resultado .cifra-res:last-child { color: #047857; }
.resultado > span { font-size: 13px; color: var(--plomo); flex: 1 1 220px; line-height: 1.45; }
.btn-contorno { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; border-radius: 99px; border: 1px solid rgba(27, 27, 31, .28); font-weight: 600; font-size: 14px; color: var(--texto-oscuro); transition: border-color .2s, background .2s; }
.btn-contorno:hover { border-color: var(--azul); background: rgba(0, 92, 151, .06); color: var(--azul); }