/* Gertium — estilos de la landing (maqueta). Sin dependencias. */

:root{
  /* Marca, tomada del logo */
  --navy:#082E5F;
  --turq:#018FA3;
  --turq-deep:#027587;
  --turq-tint:#E1F2F4;
  /* Neutros derivados del azul marino (propuesta, pendiente de decidir) */
  --navy-deep:#051B39;
  --ink:#10233F;
  --text:#2F4160;
  --muted:#66768E;
  --line:#DAE1EA;
  --line-strong:#C3CEDC;
  --surface:#F3F6FA;
  --surface-2:#E7EDF4;
  --white:#FFFFFF;
  /* Un solo color de alerta, para el dato que urge */
  --alerta:#B5561D;
  --alerta-tint:#FBEFE6;

  --radio:14px;
  --ancho:1200px;

  /* Tipografía: Manrope, una sola familia (decidida el 3-sep-2026) */
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --peso-titulo:800;
  --track-titulo:-0.02em;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--peso-titulo);color:var(--ink);margin:0;line-height:1.12;letter-spacing:var(--track-titulo)}
p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--turq-deep)}
img{max-width:100%;display:block}
strong{color:var(--ink);font-weight:700}
:focus-visible{outline:3px solid var(--turq);outline-offset:3px;border-radius:4px}

.saltar{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:8px;z-index:50;text-decoration:none}
.saltar:focus{left:8px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.seccion{padding:96px 0}
.ceja{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:16px}
.titulo{font-size:clamp(1.85rem,3.4vw,2.6rem);max-width:24ch}
.bajada{font-size:1.15rem;line-height:1.55;max-width:38rem;margin-top:16px}
.nota{color:var(--muted)}

/* Texto corrido justificado, con guiones automáticos en español para que no queden huecos.
   Solo párrafos: títulos, botones, etiquetas y el panel de ejemplo van alineados a la izquierda. */
.bajada,.hoy-grid p,.resuelve-grid p,.dinero-grid p,.tarjeta p,.pasos p,.origen .grande,.origen .nota,.quien .nota,.pie .lema{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;text-wrap:pretty}

/* Botones y enlaces */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:48px;border-radius:10px;font-weight:700;font-size:.97rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--font-body);line-height:1;white-space:nowrap;transition:background .18s ease,transform .18s ease}
.boton:active{transform:translateY(1px)}
.boton-navy{background:var(--navy);color:#fff}
.boton-navy:hover{background:var(--navy-deep)}
.boton-acento{background:var(--turq);color:#fff}
.boton-acento:hover{background:var(--turq-deep)}
.boton-chico{height:40px;padding:0 18px;font-size:.92rem}
.enlace{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);text-decoration:none}
.enlace svg{width:18px;height:18px;transition:transform .18s ease}
.enlace:hover{color:var(--turq-deep)}
.enlace:hover svg{transform:translateX(3px)}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.cabecera .contenedor{display:flex;align-items:center;gap:36px;height:70px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none}
.marca .simbolo{height:34px;width:auto}
.marca .wordmark{height:12px;width:auto;margin-top:2px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 0}
.nav a:hover{color:var(--turq-deep)}

/* Hero */
.hero{padding:76px 0 64px;overflow:hidden}
.hero .contenedor{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,4.6vw,3.75rem);line-height:1.04;margin:0 0 24px}
.hero .bajada{font-size:1.22rem;max-width:33rem;margin-top:0}
.acciones{display:flex;gap:22px;align-items:center;margin-top:32px;flex-wrap:wrap}
.hechos{display:flex;flex-direction:column;gap:10px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.hechos li{font-size:.9rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.hechos svg{width:16px;height:16px;flex:none;color:var(--navy)}

/* La flecha del logo, como subrayado del titular */
.subrayado{position:relative;white-space:nowrap;display:inline-block;padding-right:.08em}
.subrayado::after{content:"";position:absolute;left:.03em;right:.5em;bottom:-.05em;height:.08em;background:var(--turq);border-radius:2px;transform-origin:left center;animation:trazo .7s .45s cubic-bezier(.2,.7,.2,1) both}
.subrayado .punta{position:absolute;right:0;bottom:-.2em;width:.52em;height:.38em;fill:var(--turq);animation:punta .35s 1.05s ease-out both}
@keyframes trazo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes punta{from{opacity:0;transform:translateX(-.25em)}to{opacity:1;transform:none}}

/* Entrada del hero */
.entra{animation:entra .7s cubic-bezier(.2,.7,.2,1) both}
.entra-2{animation-delay:.08s}.entra-3{animation-delay:.16s}.entra-4{animation-delay:.24s}.entra-5{animation-delay:.32s}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* El panel de ejemplo */
.panel{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 80px -40px rgba(8,46,95,.45),0 1px 3px rgba(8,46,95,.08);animation:entra .8s .25s cubic-bezier(.2,.7,.2,1) both}
.panel-cab{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-titulo{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1.05rem}
.etiqueta{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--turq-deep);background:var(--turq-tint);padding:5px 9px;border-radius:6px}
.grupo{padding:16px 22px 4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fila{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 22px;align-items:baseline}
.fila+.fila{border-top:1px solid var(--line)}
.ramo{font-weight:700;color:var(--ink)}
.ramo small{font-weight:500;color:var(--muted);font-size:.88rem;margin-left:6px}
.estado{font-size:.9rem;font-weight:600;color:var(--text);text-align:right;white-space:nowrap}
.estado.alerta{color:var(--alerta)}
.detalle{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--muted);margin-top:4px;flex-wrap:wrap}
.barra{flex:1 1 120px;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;position:relative;max-width:200px}
.barra::after{content:"";position:absolute;inset:0;width:var(--p,50%);background:var(--navy);border-radius:3px}
.barra.alerta::after{background:var(--alerta)}
.chip{font-size:.72rem;font-weight:700;color:var(--alerta);background:var(--alerta-tint);padding:3px 8px;border-radius:6px}
.detalle.ok{color:var(--turq-deep);font-weight:600;gap:6px}
.detalle.ok svg{width:14px;height:14px}
.panel-pie{margin:12px 10px 10px;padding:12px 14px;border-radius:12px;background:var(--surface);font-size:.86rem;color:var(--text);display:flex;gap:10px;align-items:center}
.panel-pie svg{width:18px;height:18px;color:var(--turq-deep);flex:none}

/* Así se lleva hoy */
.hoy{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.hoy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.hoy-grid p{font-size:1.08rem;line-height:1.5;max-width:26rem}

/* Qué resuelve */
.resuelve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:56px;border-top:1px solid var(--line)}
.resuelve-grid article{padding:32px 0 36px;border-bottom:1px solid var(--line)}
.resuelve-grid h3{font-size:1.25rem;margin-bottom:12px}
.resuelve-grid p{font-size:1rem;line-height:1.6}
.ademas{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.ademas .ceja{margin:0 6px 0 0}
.ademas ul{display:contents}
.ademas li{font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px}

/* Por qué Gertium: el lado del dinero */
.dinero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.dinero .ceja{color:#8FB1D9}
.dinero .titulo{color:#fff}
.dinero .bajada{color:#C9D8EA}
.dinero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px;position:relative}
.dinero-grid article{padding-top:24px;border-top:3px solid var(--turq)}
.dinero-grid h3{color:#fff;font-size:1.45rem;margin-bottom:14px}
.dinero-grid p{color:#C9D8EA;font-size:1rem;line-height:1.62}
.marca-agua{position:absolute;right:-4%;top:-8%;width:min(46vw,600px);opacity:.05;pointer-events:none}

/* De dónde viene */
.origen{padding:112px 0}
.origen .grande{font-family:var(--font-display);font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.3;color:var(--ink);font-weight:600;max-width:52rem;letter-spacing:-.01em}
.origen .nota{margin-top:24px;font-size:1rem}

/* Para quién */
.quien{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quien-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.tarjeta{background:#fff;border:1px solid var(--line);border-radius:var(--radio);padding:32px}
.tarjeta h3{font-size:1.3rem;margin-bottom:12px}
.quien .nota{margin-top:24px}

/* Cómo empezar */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.pasos li{padding-top:20px;border-top:1px solid var(--line)}
.paso{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--navy);margin-bottom:12px}
.pasos h3{font-size:1.25rem;margin-bottom:10px}

/* Contacto */
.contacto{background:var(--surface);border-top:1px solid var(--line)}
.contacto .contenedor{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radio);padding:32px;display:grid;gap:18px}
.campo{display:grid;gap:6px}
.campo label{font-weight:600;font-size:.92rem;color:var(--ink)}
.campo input,.campo textarea{font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;color:var(--ink);background:#fff;width:100%}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--turq);box-shadow:0 0 0 3px var(--turq-tint)}
.campo textarea{min-height:110px;resize:vertical}
.form .boton{justify-self:start}
.nota-form{font-size:.9rem;color:var(--alerta);background:var(--alerta-tint);padding:10px 14px;border-radius:8px}

/* Pie */
.pie{background:var(--navy-deep);color:#B8C7DC;padding:56px 0 36px}
.pie .contenedor{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.pie .lema{margin-top:18px;font-size:.95rem;max-width:26rem}
.pie nav{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:8px}
.pie nav a{color:#fff;text-decoration:none;font-weight:600;font-size:.93rem}
.pie nav a:hover{color:#8FD8E2}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
html.sinanimar *,html.sinanimar *::before,html.sinanimar *::after{animation:none!important;transition:none!important}
html.sinanimar .reveal{opacity:1;transform:none}

@media (max-width:1000px){
  .hero .contenedor{grid-template-columns:1fr;gap:48px}
  .hero h1{font-size:clamp(2.5rem,6.5vw,3.5rem)}
  .panel{max-width:600px}
  .dinero-grid,.resuelve-grid,.hoy-grid,.pasos{grid-template-columns:1fr 1fr}
  .marca-agua{width:60vw;top:auto;bottom:-20%}
}
@media (max-width:680px){
  .contenedor{padding:0 20px}
  .seccion{padding:72px 0}
  .nav{display:none}
  .cabecera .contenedor{height:64px;gap:16px}
  .cabecera .boton{margin-left:auto}
  .hero{padding:52px 0 44px}
  .hero .bajada{font-size:1.1rem}
  .origen{padding:80px 0}
  .dinero-grid,.resuelve-grid,.hoy-grid,.pasos,.quien-grid,.contacto .contenedor,.pie .contenedor{grid-template-columns:1fr}
  .resuelve-grid{gap:0}
  .hoy-grid{gap:20px}
  .fila{grid-template-columns:1fr}
  .estado{text-align:left}
  .contacto .contenedor{gap:36px}
  .form{padding:24px}
  .pie nav{padding-top:0}
}