/* Sitio público de Coworkithm (portada, privacidad y login) */
:root {
    --tinta: #141B2B;
    --tinta-2: #444E66;
    --tinta-3: #6B7489;
    --azul: #2563EB;
    --azul-osc: #1D4ED8;
    --azul-claro: #EBF1FE;
    --fondo: #FFFFFF;
    --fondo-2: #F5F7FB;
    --borde: #E2E7F0;
    --noche: #0C1220;
    --noche-2: #141C2E;
    --radio: 18px;
    --sombra: 0 30px 70px -30px rgba(20, 27, 43, .35);
    --sombra-s: 0 10px 30px -14px rgba(20, 27, 43, .3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; background: var(--fondo); color: var(--tinta);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Outfit', 'Inter', sans-serif; line-height: 1.1; margin: 0; letter-spacing: -.025em; }
p { margin: 0; }
.cont { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 16px; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; }
.btn:hover { transform: translateY(-1px); }
.btn-azul { background: var(--azul); color: #fff; box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .8); }
.btn-azul:hover { background: var(--azul-osc); }
.btn-borde { border: 1.5px solid var(--borde); color: var(--tinta); background: #fff; }
.btn-borde:hover { border-color: #B9C2D3; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.barra.con-borde { border-bottom-color: var(--borde); }
.barra .cont { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca .ic { height: 32px; width: auto; }
.marca .nm { height: 21px; width: auto; }
.menu { display: flex; align-items: center; gap: 30px; }
.menu a { color: var(--tinta-2); font-weight: 500; font-size: 15px; }
.menu a:hover { color: var(--tinta); }
.menu .btn { color: #fff; padding: 10px 18px; font-size: 15px; border-radius: 10px; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinta); }

/* Etiquetas */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); margin-bottom: 16px; }
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.titulo { max-width: 720px; margin-bottom: 56px; }
.titulo.centro { margin-left: auto; margin-right: auto; text-align: center; }
.titulo.centro .eyebrow::before { display: none; }
.titulo h2, .h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; }
.titulo p { margin-top: 18px; font-size: 19px; color: var(--tinta-2); }

/* Portada */
.hero { position: relative; padding: 64px 0 40px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%); opacity: .55; pointer-events: none; }
.hero .cont { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.sello { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.sello .bandera { display: inline-flex; width: 28px; height: 20px; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.sello .bandera i { flex: 1; }
.hero h1 { font-size: clamp(42px, 5.4vw, 70px); font-weight: 700; margin: 24px 0 22px; letter-spacing: -.035em; }
.hero h1 .az { color: var(--azul); }
.hero .lead { font-size: 20px; color: var(--tinta-2); max-width: 540px; }
.hero .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero .nota { margin-top: 22px; color: var(--tinta-3); font-size: 15px; }

/* Composición: navegador + teléfono */
.compo { position: relative; padding: 20px 0 56px 0; }
.navegador { position: relative; border-radius: 14px; background: #fff; box-shadow: var(--sombra); border: 1px solid var(--borde); overflow: hidden; margin-left: 110px; }
.navegador .bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #F1F3F8; border-bottom: 1px solid var(--borde); }
.navegador .bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5DAE4; }
.navegador .bar span { margin-left: 14px; flex: 1; max-width: 260px; height: 20px; border-radius: 6px; background: #fff; border: 1px solid var(--borde); font-size: 11px; color: var(--tinta-3); display: flex; align-items: center; padding: 0 8px; font-family: ui-monospace, monospace; }
.navegador.oscuro { background: #11151F; border-color: #222A3A; }
.navegador.oscuro .bar { background: #1A2030; border-bottom-color: #222A3A; }
.navegador.oscuro .bar i { background: #343D52; }
.navegador.oscuro .bar span { background: #11151F; border-color: #2A3245; color: #7C879E; }
.telefono { position: absolute; left: 0; bottom: 0; width: 190px; border-radius: 34px; padding: 8px; background: #0E131F; box-shadow: 0 40px 70px -24px rgba(12, 18, 32, .6), inset 0 0 0 1.5px #2C3446; }
.telefono .pantalla { border-radius: 27px; overflow: hidden; background: #F1F4F8; aspect-ratio: 9 / 19; }
.telefono .pantalla img { width: 100%; }
.aviso-wa { position: absolute; right: -8px; bottom: 18px; width: 270px; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra-s); border: 1px solid var(--borde); display: flex; gap: 12px; font-size: 13.5px; line-height: 1.4; }
.aviso-wa .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #25D366; display: grid; place-items: center; color: #fff; }
.aviso-wa b { display: block; font-size: 14px; }
.aviso-wa small { color: var(--tinta-3); }

/* Giros */
.giros { padding: 36px 0 8px; }
.giros p { text-align: center; color: var(--tinta-3); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.giros ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 0; margin: 18px 0 0; }
.giros li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--borde); border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--tinta-2); background: #fff; }

/* Secciones */
.seccion { padding: 112px 0; }
.seccion.gris { background: var(--fondo-2); }

/* El nombre / equipo */
.equipo { background: var(--noche); color: #fff; position: relative; overflow: hidden; }
.equipo::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.equipo .cont { position: relative; }
.nombre-eq { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; font-family: 'Outfit', sans-serif; font-size: clamp(26px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 22px; }
.nombre-eq .pz { padding: 6px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
.nombre-eq .op { color: #6B7A99; font-weight: 400; }
.nombre-eq .res { color: #7FAAFF; }
.equipo .bajada { text-align: center; color: #AAB4C8; font-size: 19px; max-width: 680px; margin: 0 auto 60px; }
.equipo .bajada b { color: #fff; font-weight: 600; }
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; overflow: hidden; }
.rol { background: var(--noche-2); padding: 30px 26px 32px; }
.rol .num { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; color: #6B7A99; letter-spacing: .08em; }
.rol .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(127, 170, 255, .12); color: #7FAAFF; margin: 16px 0 18px; }
.rol h3 { font-size: 20px; margin-bottom: 8px; }
.rol p { color: #AAB4C8; font-size: 15.5px; }
.rol .tag { display: inline-block; margin-top: 16px; font-size: 13px; color: #CFE0FF; background: rgba(127, 170, 255, .12); border-radius: 6px; padding: 3px 9px; }

/* Servicios */
.servicio-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.servicio-fila + .servicio-fila { margin-top: 112px; }
.servicio-fila.inv .medio { order: 2; }
.servicio-fila h3 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; margin-bottom: 16px; }
.servicio-fila .txt > p { color: var(--tinta-2); font-size: 18px; }
.check { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.check li { display: flex; gap: 12px; color: var(--tinta-2); }
.check li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; background: var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.etq { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--azul); background: var(--azul-claro); padding: 5px 12px; border-radius: 8px; margin-bottom: 18px; }
.medio { position: relative; border-radius: 24px; padding: 40px; display: flex; justify-content: center; align-items: center; min-height: 440px; overflow: hidden; }
.medio.m-verde { background: linear-gradient(160deg, #E6F6EE, #D3EFE1); }
.medio.m-naranja { background: linear-gradient(160deg, #FFF0E3, #FFE0C7); }
.medio.m-morado { background: linear-gradient(160deg, #F1ECFF, #E2D8FF); }
.medio.m-azul { background: linear-gradient(160deg, #EBF1FE, #D9E5FD); }
.medio .navegador { margin: 0; width: 100%; }
.medio .tel { width: 230px; border-radius: 34px; padding: 8px; background: #0E131F; box-shadow: 0 40px 70px -24px rgba(12, 18, 32, .55); flex: none; }
.medio .tel .pantalla { border-radius: 27px; overflow: hidden; background: #F1F4F8; aspect-ratio: 9 / 18; }
.medio .tel + .tel { margin-left: -40px; margin-top: 70px; }
.medio .chat { width: 100%; max-width: 380px; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); background: #EFEAE2; }
.medio .chat .cab { display: flex; align-items: center; gap: 10px; background: #075E54; color: #fff; padding: 12px 16px; font-size: 14px; }
.medio .chat .cab .av { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.medio .chat .cab .av img { width: 20px; }
.medio .chat .cab b { display: block; font-size: 15px; }
.medio .chat .cab small { opacity: .8; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.caja { background: #fff; border: 1px solid var(--borde); border-radius: 22px; padding: 30px; overflow: hidden; position: relative; }
.caja h3 { font-size: 22px; margin-bottom: 8px; }
.caja p { color: var(--tinta-2); font-size: 16px; }
.caja .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); margin-bottom: 18px; }
.c4 { grid-column: span 4; } .c2 { grid-column: span 2; } .c3 { grid-column: span 3; }
.caja .captura { margin: 26px -30px -30px 30px; border-radius: 12px 0 0 0; border: 1px solid var(--borde); border-right: 0; border-bottom: 0; overflow: hidden; box-shadow: var(--sombra-s); }
.caja.oscura { background: var(--noche); color: #fff; border-color: var(--noche); }
.caja.oscura p { color: #AAB4C8; }
.caja.oscura .ico { background: rgba(127, 170, 255, .14); color: #7FAAFF; }
.cifra { font-family: 'Outfit', sans-serif; font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 6px 0 12px; color: var(--azul); }
.lista-mini { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.lista-mini li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; padding: 10px 14px; border-radius: 10px; background: var(--fondo-2); }
.lista-mini li b { font-weight: 600; }
.caja.oscura .lista-mini li { background: rgba(255, 255, 255, .06); }
.pill { font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.p-ok { background: #E3F6EC; color: #0F7A44; } .p-bajo { background: #FFF2DC; color: #9A5B00; } .p-ag { background: #FDE6E6; color: #B42318; }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--borde); }
.paso { padding: 36px 32px 8px 0; position: relative; }
.paso + .paso { padding-left: 32px; border-left: 1px solid var(--borde); }
.paso .n { font-family: ui-monospace, 'SF Mono', monospace; font-size: 13px; color: var(--azul); font-weight: 600; letter-spacing: .08em; }
.paso h3 { font-size: 24px; margin: 14px 0 10px; }
.paso p { color: var(--tinta-2); }

/* Nosotros */
.nosotros { background: var(--noche); color: #fff; position: relative; overflow: hidden; }
.nosotros::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent 20%, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%); pointer-events: none; }
.nosotros .cont { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.nosotros .eyebrow { color: #9CC0FF; }
.nosotros h2 { font-size: clamp(34px, 4.2vw, 50px); }
.nosotros .txt > p { color: #C3CBDA; font-size: 18px; margin-top: 18px; }
.valores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.valores div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 16px 18px; }
.valores b { display: block; font-size: 16px; margin-bottom: 2px; }
.valores span { color: #AAB4C8; font-size: 14.5px; }
.mosaico { position: relative; padding-bottom: 80px; }
.mosaico .navegador { margin: 0; }
.mosaico .tel { position: absolute; right: -6px; bottom: 0; width: 180px; border-radius: 30px; padding: 7px; background: #05080F; box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .8), inset 0 0 0 1.5px #2C3446; }
.mosaico .tel .pantalla { border-radius: 24px; overflow: hidden; aspect-ratio: 9 / 18; background: #F1F4F8; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; background: var(--azul); color: #fff; border-radius: 28px; padding: 64px; position: relative; overflow: hidden; }
.contacto::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.contacto > * { position: relative; }
.contacto h2 { font-size: clamp(32px, 4vw, 46px); }
.contacto p { color: #DCE6FF; font-size: 19px; margin-top: 16px; }
.contacto .tarjeta { background: #fff; color: var(--tinta); border-radius: 18px; padding: 26px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .45); }
.contacto .tarjeta small { color: var(--tinta-3); font-size: 14px; }
.contacto .tarjeta a.correo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--tinta); margin: 6px 0 18px; word-break: break-all; }
.contacto .tarjeta .btn { width: 100%; justify-content: center; }

/* Pie */
.pie { background: var(--noche); color: #AEB7C9; padding: 64px 0 32px; font-size: 15px; }
.pie.separado { margin-top: 112px; }
.pie .arriba { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pie .nm { height: 24px; width: auto; margin-bottom: 14px; }
.pie .lema { color: #fff; font-family: 'Outfit', sans-serif; font-size: 18px; margin-bottom: 8px; }
.pie h4 { color: #fff; font-size: 15px; font-family: 'Inter', sans-serif; letter-spacing: 0; margin-bottom: 14px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pie a { color: #AEB7C9; }
.pie a:hover { color: #fff; }
.pie .abajo { border-top: 1px solid #222B3D; margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Aparición al hacer scroll */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Documento legal */
.legal { padding: 64px 0 0; }
.legal .cont { max-width: 820px; }
.legal h1 { font-size: clamp(34px, 4.4vw, 48px); font-weight: 700; }
.legal .fecha { color: var(--tinta-3); margin-top: 10px; }
.legal .indice { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 16px; padding: 22px 26px; margin: 36px 0 12px; }
.legal .indice b { display: block; margin-bottom: 10px; }
.legal .indice ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal .indice li { margin-bottom: 4px; font-size: 15px; }
.legal h2 { font-size: 24px; margin: 44px 0 12px; scroll-margin-top: 90px; }
.legal p, .legal li { color: var(--tinta-2); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 12px 0 0; }
.legal li { margin-bottom: 6px; }
.legal .aviso { background: var(--azul-claro); border-radius: 14px; padding: 18px 22px; color: var(--tinta); margin-top: 16px; }

/* Responsivo */
@media (max-width: 1000px) {
    .hero .cont, .servicio-fila, .nosotros .cont, .contacto { grid-template-columns: 1fr; }
    .servicio-fila { gap: 36px; }
    .servicio-fila.inv .medio { order: 0; }
    .roles { grid-template-columns: 1fr 1fr; }
    .bento { grid-template-columns: 1fr 1fr; }
    .c4, .c3 { grid-column: span 2; } .c2 { grid-column: span 1; }
    .pie .arriba { grid-template-columns: 1fr 1fr; }
    .compo, .mosaico { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
    body { font-size: 16px; }
    .cont { padding: 0 16px; }
    .menu { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; border-bottom: 1px solid var(--borde); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .25); }
    .menu.abierto { display: flex; }
    .menu a { padding: 12px 4px; font-size: 16px; }
    .menu .btn { justify-content: center; margin-top: 8px; padding: 12px; }
    .menu-btn { display: block; }
    .marca .nm { height: 18px; }
    .hero { padding: 40px 0 24px; }
    .hero .lead { font-size: 18px; }
    .navegador { margin-left: 56px; }
    .telefono { width: 128px; border-radius: 24px; padding: 5px; left: 0; }
    .telefono .pantalla { border-radius: 20px; }
    .aviso-wa { width: 220px; right: -4px; bottom: 0; font-size: 12.5px; }
    .compo { padding-bottom: 72px; }
    .seccion { padding: 80px 0; }
    .titulo { margin-bottom: 40px; }
    .roles, .bento, .valores { grid-template-columns: 1fr; }
    .c4, .c3, .c2 { grid-column: span 1; }
    .medio { padding: 24px; min-height: 0; }
    .medio .tel { width: 160px; border-radius: 26px; padding: 6px; }
    .medio .tel .pantalla { border-radius: 21px; }
    .medio .tel + .tel { margin-left: -30px; margin-top: 50px; }
    .servicio-fila + .servicio-fila { margin-top: 80px; }
    .pasos { grid-template-columns: 1fr; }
    .paso, .paso + .paso { padding: 28px 0 4px; border-left: 0; }
    .paso + .paso { border-top: 1px solid var(--borde); }
    .mosaico .tel { width: 120px; border-radius: 22px; padding: 5px; right: 0; }
    .mosaico .tel .pantalla { border-radius: 18px; }
    .mosaico { padding-bottom: 60px; }
    .contacto { padding: 40px 22px; border-radius: 22px; }
    .pie .arriba { grid-template-columns: 1fr; }
    .legal .indice ol { columns: 1; }
}