/* manegit.com · sitio del holding · v0 (2026-10-16)
   Mezcla gradual: base del sitio actual (negro + violeta + resplandor, secciones #F7F7F7)
   + logo del brandbook + Noto Sans JP para texto.
   Socio Operador (crema cálido) e Inversiones (arena/piedra) son paletas propias: propuesta a validar. */
/* Fuentes alojadas en el sitio (la CSP no permite Google Fonts), mismos pesos que el v0: Bricolage 500 y 700, Noto Sans JP 400, 500 y 700 */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url(/fonts/noto-sans-jp-latin-wght.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --negro:#101010; --negro-2:#18161D; --linea-osc:#2B2833;
  --tinta-osc:#FFF4FE; --muted-osc:#B9B2C4;
  --violeta:#7424F5; --violeta-claro:#8072FC; --violeta-hover:#5E14D6;
  --claro:#F7F7F7; --blanco:#FFFFFF; --tinta:#333333; --muted:#5D5A66; --linea:#E2E0E8;
  --crema:#FBF6EF; --crema-2:#F2E9DC; --tinta-calida:#2B2420; --muted-calida:#6A5D53; --linea-calida:#E5D9C8;
  --arena:#EEE9E1; --arena-2:#E2DACD; --piedra:#2F3532; --muted-piedra:#5B625E;
  --display:"Bricolage Grotesque", "Noto Sans JP", system-ui, sans-serif;
  --texto:"Noto Sans JP", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;
  --radio:14px; --pildora:999px;
  --ancho:1160px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--negro);color:var(--tinta-osc);font-family:var(--texto);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
.contenedor{max-width:var(--ancho);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.salto{position:absolute;left:-999px}.salto:focus{left:16px;top:16px;z-index:50;background:var(--blanco);color:var(--negro);padding:8px 12px;border-radius:8px}
:focus-visible{outline:3px solid var(--violeta-claro);outline-offset:3px}

/* Encabezado */
.encabezado{position:sticky;top:0;z-index:20;background:rgba(16,16,16,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea-osc)}
.encabezado .contenedor{display:flex;align-items:center;gap:28px;min-height:76px}
.logo img{height:34px;width:auto}
.menu{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0;font-size:15.5px}
.menu a{text-decoration:none;color:var(--muted-osc);transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--blanco)}
.boton-menu{display:none;margin-left:auto;background:none;border:1px solid var(--linea-osc);color:var(--blanco);border-radius:var(--pildora);padding:8px 16px;font:inherit;font-size:15px;cursor:pointer}

/* Botones (píldora, como el sitio actual) */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:var(--pildora);font-family:var(--texto);font-weight:500;font-size:16px;text-decoration:none;border:1.5px solid var(--violeta);transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.boton-primario{background:var(--violeta);color:var(--blanco)}
.boton-primario:hover{background:var(--violeta-hover);border-color:var(--violeta-hover)}
.boton-borde{background:transparent;color:var(--blanco)}
.boton-borde:hover{background:rgba(116,36,245,.18)}
.claro .boton-borde,.calido .boton-borde,.arena .boton-borde{color:var(--violeta)}
.encabezado .boton{min-height:42px;padding:0 20px;font-size:15px}

/* Bandas */
.banda{padding-block:96px}
.oscuro{background:var(--negro);color:var(--tinta-osc)}
.oscuro-2{background:var(--negro-2);color:var(--tinta-osc)}
.claro{background:var(--claro);color:var(--tinta)}
.blanco{background:var(--blanco);color:var(--tinta)}
.calido{background:var(--crema);color:var(--tinta-calida);font-size:19px}
.arena{background:var(--arena);color:var(--piedra)}
.etiqueta{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violeta-claro);margin-bottom:16px}
.claro .etiqueta,.blanco .etiqueta{color:var(--violeta)}
.calido .etiqueta{color:#7A4A1E}
.arena .etiqueta{color:var(--muted-piedra)}
.titulo-seccion{font-size:clamp(32px,4.4vw,52px);font-weight:700;max-width:20ch}
.bajada{font-size:clamp(17px,1.6vw,20px);color:var(--muted-osc);max-width:62ch;margin-top:18px}
.claro .bajada,.blanco .bajada{color:var(--muted)}
.calido .bajada{color:var(--muted-calida)}
.arena .bajada{color:var(--muted-piedra)}
.idiomas{display:flex;gap:4px;justify-self:end;margin-bottom:28px;padding:4px;border:1px solid var(--arena-2);border-radius:var(--pildora);width:max-content;margin-left:auto}
.idiomas a{font-size:13px;font-weight:600;letter-spacing:.06em;padding:6px 14px;border-radius:var(--pildora);color:var(--muted-piedra);text-decoration:none}
.idiomas a[aria-current]{background:var(--piedra);color:var(--arena)}
.cabecera-seccion{margin-bottom:48px}

/* Hero con el resplandor violeta del sitio actual */
.hero{position:relative;overflow:hidden;padding-block:120px 110px;text-align:center}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(closest-side at 50% 45%,rgba(116,36,245,.55),rgba(116,36,245,.12) 55%,transparent 75%);pointer-events:none}
.hero .contenedor{position:relative;display:grid;justify-items:center;gap:26px}
.hero h1{font-size:clamp(40px,7vw,84px);font-weight:700;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--violeta-claro)}
.hero .bajada{margin-top:0;color:#D9D2E3;text-align:center}
.acciones{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-pagina{text-align:left;padding-block:96px 72px}
/* /we-manegit/ hero: We Manegit design system (violet, WM isotype, waves, blue band, orange CTA) */
.hero-wm,.banda-wm{background:#31008C}
.banda-wm{position:relative;overflow:hidden}
.banda-wm>.contenedor{position:relative}
.hero-wm::before{content:none}
.hero-wm .wm-ondas,.banda-wm .wm-ondas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;color:#fff}
.hero-wm .wm-marca,.banda-wm .wm-marca{position:absolute;right:-6%;bottom:-14%;width:58%;max-width:760px;opacity:.16;pointer-events:none}
.hero-wm .etiqueta,.banda-wm .etiqueta{color:#fff}
.hero-wm .bajada,.banda-wm .bajada{color:rgba(255,255,255,.74)}
.wm-hl{position:relative;z-index:0;white-space:nowrap}
.wm-hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.2em;background:#1A99FF;z-index:-1;transform-origin:0 50%}
.hero-wm .boton-primario{background:#FF5A36;border-color:#FF5A36;color:#1B016A}
.hero-wm .boton-primario:hover{background:#fff;border-color:#fff;color:#1B016A}
@media (max-width:760px){.hero-wm .wm-ondas,.banda-wm .wm-ondas{display:none}.hero-wm .wm-marca,.banda-wm .wm-marca{width:90%;bottom:-6%}}
.hero-pagina .contenedor{justify-items:start}
.hero-pagina h1{font-size:clamp(38px,5.6vw,68px)}
.hero-pagina .bajada{text-align:left}
.hero-pagina .acciones{justify-content:flex-start}
.cifras{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;margin-top:18px;padding-top:28px;border-top:1px solid var(--linea-osc)}
.cifra{display:grid;gap:2px;text-align:center}
.cifra b{font-family:var(--display);font-size:clamp(30px,3.6vw,42px);font-weight:700;color:var(--blanco);font-variant-numeric:tabular-nums}
.cifra span{font-size:14px;color:var(--muted-osc)}

/* Grillas y tarjetas */
.grilla{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tarjeta{border-radius:var(--radio);padding:28px;display:grid;gap:12px;align-content:start;min-width:0}
.oscuro .tarjeta,.oscuro-2 .tarjeta{background:var(--negro-2);border:1px solid var(--linea-osc)}
.oscuro-2 .tarjeta{background:var(--negro)}
.claro .tarjeta{background:var(--blanco);border:1px solid var(--linea)}
.blanco .tarjeta{background:var(--claro);border:1px solid var(--linea)}
.calido .tarjeta{background:var(--blanco);border:1px solid var(--linea-calida)}
.arena .tarjeta{background:#F7F3EC;border:1px solid var(--arena-2)}
.tarjeta h3{font-size:22px;font-weight:700}
/* Group company favicons (MARCAS in build.py): right of the card's CTA, and of the Trumi title */
.marca-icono{display:block;width:32px;height:32px;border-radius:8px;overflow:hidden;flex:none}
.marca-icono img{display:block;width:100%;height:100%;object-fit:contain}
.marca-icono--blanco img{filter:brightness(0) invert(1)}
.ir-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.tarjeta .ir-fila .ir{margin-top:0}
.titulo-con-icono{display:flex;align-items:center;gap:.35em}
.titulo-con-icono .marca-icono{width:.8em;height:.8em;border-radius:.18em}
/* NDA bar (Socio Operador, Compromisos): one row on desktop, a column on phones; the lock takes the primary button's color */
.nda-barra{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 20px}
.grilla>.nda-barra{grid-column:1/-1}
.nda-barra p{flex:1;margin:0}
.nda-barra__icono{flex:none;color:var(--violeta)}
.nda-barra .boton{white-space:nowrap;padding:9px 20px}
.doc-inversion{margin-top:8px}
@media (max-width:640px){.nda-barra{flex-direction:column;align-items:flex-start;padding:16px 20px}}
/* NDA card: full row in its grid; buttons wrap on phones */
.grilla>.nda{grid-column:1/-1}
.grilla>.nda.lateral{grid-column:auto}
.nda .acciones .boton{max-width:100%}
.nda strong{overflow-wrap:anywhere}
.tarjeta p{font-size:15.5px;color:var(--muted-osc)}
.claro .tarjeta p,.blanco .tarjeta p{color:var(--muted)}
.calido .tarjeta p{color:var(--muted-calida);font-size:17px}
.arena .tarjeta p{color:var(--muted-piedra)}
a.tarjeta{text-decoration:none;transition:border-color .2s,transform .2s}
/* Link cards (tag, title, text, CTA): the text row takes the extra height, so the CTA and its favicon sit on the same line across a row of cards */
a.tarjeta{grid-template-rows:auto auto 1fr auto}
a.tarjeta:hover{border-color:var(--violeta)}
.tarjeta .ir{font-size:15px;font-weight:500;color:var(--violeta-claro);margin-top:6px}
.claro .tarjeta .ir,.blanco .tarjeta .ir,.calido .tarjeta .ir{color:var(--violeta)}
.marca-tag{font-size:12.5px;font-weight:500;color:var(--muted-osc);letter-spacing:.04em}
.claro .marca-tag,.blanco .marca-tag{color:var(--muted)}

/* Áreas de seniors */

/* Puertas por necesidad */
.puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.puerta{display:grid;gap:14px;align-content:start;padding:32px;border-radius:var(--radio);background:var(--blanco);border:1px solid var(--linea);text-decoration:none;color:var(--tinta);transition:border-color .2s}
.puerta:hover{border-color:var(--violeta)}
.puerta .q{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.2}
.puerta p{color:var(--muted);font-size:15.5px}
.puerta .ir{color:var(--violeta);font-weight:500;font-size:15px}
/* The three doors share the grid rows (subgrid): title, text and CTA start at the same height in every card. Without subgrid: CTA at the bottom */
.puerta{grid-template-rows:auto 1fr auto}
@supports (grid-template-rows:subgrid){.puerta{grid-row:span 3;grid-template-rows:subgrid;row-gap:14px}}

/* Socio Operador: banda cálida */
.socio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.socio h2{font-size:clamp(36px,5vw,60px);font-weight:700;color:var(--tinta-calida)}
.lista-check{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:12px}
.lista-check li{padding-left:30px;position:relative}
.lista-check li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2.5px solid var(--violeta);border-bottom:2.5px solid var(--violeta);transform:rotate(-45deg)}
.situaciones{display:grid;gap:12px}
.situacion{display:block;background:var(--blanco);border:1px solid var(--linea-calida);border-radius:var(--radio);padding:20px 24px;text-decoration:none;transition:border-color .2s}
.situacion:hover{border-color:var(--violeta)}
.situacion b{display:block;font-family:var(--display);font-size:21px;color:var(--tinta-calida)}
.situacion span{font-size:16px;color:var(--muted-calida)}

/* Pendientes (datos que faltan) */
.pendiente{border:1.5px dashed currentColor;border-radius:var(--radio);padding:24px;opacity:.75;font-size:15px}
.pendiente b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}

/* Notas */
.nota{display:grid;gap:10px}
.nota .meta{font-size:13.5px;color:var(--muted)}
.nota h3{font-size:22px}

/* Texto largo */
.prosa{max-width:68ch;display:grid;gap:20px}
.prosa h2{font-size:clamp(26px,3vw,34px);margin-top:20px}
.pasos{counter-reset:p;list-style:none;padding:0;margin:0;display:grid;gap:16px}
.pasos li{counter-increment:p;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.pasos li::before{content:counter(p);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--violeta);font-family:var(--display);font-weight:700;color:var(--violeta)}
.oscuro .pasos li::before{color:var(--violeta-claro)}

/* Preguntas */
.preguntas{display:grid;gap:10px;max-width:820px}
.preguntas details{background:var(--blanco);border:1px solid var(--linea-calida);border-radius:var(--radio);padding:18px 24px}
.preguntas summary{cursor:pointer;font-weight:700;font-size:18px}
.preguntas p{margin-top:10px;color:var(--muted-calida)}

/* Formulario */
.form{display:grid;gap:18px;max-width:720px}
.form .fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.campo{display:grid;gap:6px}
.campo label{font-size:14.5px;font-weight:500}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;color:var(--tinta);background:var(--blanco);border:1px solid #CFCBD8;border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--violeta);box-shadow:0 0 0 3px rgba(116,36,245,.2)}
.nota-form{font-size:14px;color:var(--muted)}
.aviso{display:none;background:#EFE8FF;border:1px solid #CDB8FF;color:#3A1580;border-radius:10px;padding:14px 16px;font-size:15px}
.aviso.visible,.aviso:target{display:block}

/* Cierre y pie */
.cierre{text-align:center}
.cierre .contenedor{display:grid;justify-items:center;gap:22px}
.cierre h2{font-size:clamp(34px,5vw,58px);max-width:18ch}
.pie{background:var(--negro);border-top:1px solid var(--linea-osc);padding-block:56px 40px;font-size:15px;color:var(--muted-osc)}
.pie .columnas{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.pie h4{font-family:var(--texto);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blanco);margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie a{text-decoration:none}.pie a:hover{color:var(--blanco)}
.pie .legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--linea-osc);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}

/* Migas */
.migas{font-size:14px;color:var(--muted-osc);margin-bottom:8px}
.migas a{text-decoration:none}

@media (max-width:960px){
  .g3,.puertas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .socio{grid-template-columns:minmax(0,1fr)}
  .pie .columnas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .menu{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:var(--negro);border-bottom:1px solid var(--linea-osc);padding:8px max(20px,env(safe-area-inset-left,0px)) 20px}
  .menu.abierto{display:flex}
  .menu a{display:block;padding:12px 0;font-size:17px}
  .boton-menu{display:inline-flex}
  .encabezado .boton{display:none}
  .g2,.g3,.puertas,.form .fila{grid-template-columns:minmax(0,1fr)}
  .banda{padding-block:72px}
  .hero{padding-block:88px 80px}
  .cifras{gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Movimiento nivel 1 (2026-10-22): sin librerías, solo transform y opacity ----------
   Sin JS o con prefers-reduced-motion, todo visible y quieto. El estado oculto inicial depende de .js en <html>.
   Los mismos selectores de revelado están en static/site.js (REVELA). */
/* Encabezado: arriba se ve igual que antes (está sobre el fondo negro); al hacer scroll, translúcido con desenfoque */
.js .encabezado{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.js .encabezado::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(16,16,16,.82);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);opacity:0;transition:opacity .3s ease}
.js .encabezado.con-scroll::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  :root{--rv-y:16px;--rv-t:.7s;--curva:cubic-bezier(.2,.65,.25,1)}
  @keyframes mn-sube{from{opacity:0;transform:translateY(var(--rv-y))}}
  @keyframes mn-respira{from{opacity:.82;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
  /* Hero (primera sección): el título entra por palabras y después el resto */
  .js main>.hero:first-child:not(.entra) .contenedor>*{opacity:0}
  .js main>.hero.entra .contenedor>*:not(.partido),.js main>.hero.entra h1.partido .pal{animation:mn-sube var(--rv-t) var(--curva) var(--d,0ms) backwards}
  .js h1.partido .pal{display:inline-block}
  /* El resplandor violeta respira lento */
  .hero::before{animation:mn-respira 8s ease-in-out infinite alternate}
  /* Secciones y tarjetas: aparecen una vez al entrar en pantalla, escalonadas */
  .js :is(.cabecera-seccion,.grilla>*,.constelacion,.puertas>.puerta,.situaciones>.situacion,.socio>div:first-child,.socio>.tarjeta,.preguntas>details,.pasos>li,.contenedor>.pendiente,.prosa>:not(.pasos),.cierre .contenedor>*):not(.visto){opacity:0}
  .js .visto{animation:mn-sube var(--rv-t) var(--curva) var(--d,0ms) backwards}
  /* Tarjetas, puertas y situaciones: suben apenas y marcan el borde violeta */
  @media (hover:hover){
    a.tarjeta,.puerta,.situacion{transition:border-color .2s,transform .25s var(--curva)}
    a.tarjeta:hover,.puerta:hover,.situacion:hover{transform:translateY(-3px);border-color:var(--violeta)}
  }
}
@media (prefers-reduced-motion:no-preference){
  .js .hero-wm .wm-hl::after{animation:wm-banda .7s var(--curva) .9s both}
  .js .banda-wm .cabecera-seccion:not(.visto) .wm-hl::after{transform:scaleX(0)}
  .js .banda-wm .cabecera-seccion.visto .wm-hl::after{animation:wm-banda .7s var(--curva) .5s both}
  @keyframes wm-banda{from{transform:scaleX(0)}}
}
/* En celular, menos movimiento: recorrido y duración más cortos, título sin cortar en palabras, resplandor quieto */
@media (prefers-reduced-motion:no-preference) and (max-width:760px){
  :root{--rv-y:8px;--rv-t:.5s}
  .hero::before{animation:none}
}