/* ======================================================================
   VicNegocio — sistema de diseño compartido del sitio de ventas.
   Un solo archivo, sin build step, igual que la PWA (pwa/index.html).
   Usado por todas las páginas de web/ — index, soluciones/*, precios,
   contacto. Cambiar acá afecta a todas.
   ====================================================================== */
:root{
  --ink:#101418; --ink-2:#3C4550; --ink-3:#6B7280;
  --paper:#F7F7F4; --card:#FFFFFF; --line:#E3E2DB;
  --cobalt:#1F3FBF; --cobalt-deep:#16299B; --cobalt-tint:#E9EDFB;
  --green:#0E7A4B; --green-tint:#E6F3ED;
  --amber:#B5680A; --amber-tint:#FBF0DF;
  --red:#D42A1E; --red-tint:#FBEAE8;
  --radius:16px;
  --shadow: 0 1px 2px rgba(16,20,24,.04), 0 12px 32px -16px rgba(16,20,24,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1760px; margin:0 auto; padding:0 clamp(24px, 5vw, 72px)}
.wrap-narrow{max-width:940px; margin:0 auto; padding:0 24px}
section{padding:88px 0}
@media (max-width:720px){ section{padding:56px 0} }
h1,h2,h3{margin:0; letter-spacing:-0.02em}
p{margin:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--cobalt-deep); background:var(--cobalt-tint); padding:6px 14px; border-radius:100px;
  margin-bottom:18px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:12px; font-weight:600; font-size:15.5px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cobalt); color:#fff; box-shadow:0 10px 24px -10px rgba(31,63,191,.55)}
.btn-primary:hover{background:var(--cobalt-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cobalt); color:var(--cobalt-deep)}
.btn-light{background:#fff; color:var(--cobalt-deep); border-color:var(--line)}
.btn-light:hover{border-color:var(--cobalt)}
.btn-block{width:100%}
.btn:disabled{opacity:.6; cursor:default; pointer-events:none}

/* --------- nav --------- */
.navbar{position:sticky; top:14px; z-index:40; padding:0 16px}
.navbar-inner{
  max-width:1760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 18px; border-radius:16px;
  background:rgba(247,247,244,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(16,20,24,.06); box-shadow:0 8px 24px -18px rgba(16,20,24,.3);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; text-decoration:none; color:var(--ink)}
.brand .mark{width:26px; height:26px; border-radius:8px; flex:none; display:block}
.brand.brand-sm .mark{width:22px; height:22px; border-radius:7px}
.navlinks{display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:600; color:var(--ink-2)}
.navlinks a{text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent; transition:border-color 180ms, color 180ms}
.navlinks a:hover, .navlinks a.active{color:var(--cobalt-deep); border-color:var(--cobalt)}
.nav-cta{display:flex; align-items:center; gap:10px}
/* Solo existe para el panel mobile -- en desktop "Entrar" ya esta en .nav-cta,
   sin esto aparecia duplicado (bug real, encontrado revisando desktop
   despues del fix mobile). */
.mobile-entrar{display:none}

/* dropdown "Soluciones" */
.has-dropdown{position:relative}
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:10px; width:260px; opacity:0; visibility:hidden; transform-origin:top center;
  transition:opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown a{
  display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:9px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; border:none;
}
.dropdown a:hover{background:var(--cobalt-tint); color:var(--cobalt-deep)}
.dropdown a span.sub{font-weight:400; font-size:12.5px; color:var(--ink-3)}
.dropdown a:hover span.sub{color:var(--cobalt-deep)}

/* boton hamburguesa -- oculto en desktop, solo aparece bajo el breakpoint mobile */
.nav-toggle{display:none; background:none; border:none; padding:8px; margin:-8px; color:var(--ink); cursor:pointer}
.nav-toggle svg{width:24px; height:24px; display:block}

/* chevron para abrir un submenu dentro del panel mobile -- en desktop el dropdown
   ya se abre solo con :hover/:focus-within, este boton no aparece ahi */
.dropdown-toggle{display:none}

@media (max-width:860px){
  /* position+z-index mayor que .navlinks (60) para que el boton de cerrar
     (el mismo hamburguesa, que cambia a X) siga clickeable arriba del panel
     -- sin esto quedaba tapado en cuanto el menu se abria. */
  .nav-toggle{display:flex; align-items:center; justify-content:center; position:relative; z-index:70}
  /* Ver comentario en site.js: sin esto, .navlinks (position:fixed) queda
     encogida al tamano de .navbar-inner en vez de cubrir la pantalla,
     porque backdrop-filter en el padre crea un containing block nuevo. */
  .navbar-inner.menu-open{backdrop-filter:none; -webkit-backdrop-filter:none}

  /* En mobile, .navlinks deja de ser una fila horizontal y pasa a ser el panel
     de pantalla completa que desliza desde la derecha -- antes esto quedaba
     con display:none y el sitio no tenia NINGUNA forma de llegar a Precios/
     Producto/Nosotros desde el celular (bug real, encontrado revisando la
     version mobile antes de reenviar la solicitud de AWS Activate). */
  .navlinks{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:60; background:var(--paper);
    padding:96px 24px 32px; overflow-y:auto;
    transform:translateX(100%); transition:transform 280ms cubic-bezier(.22,1,.36,1);
  }
  .navlinks.open{transform:translateX(0)}
  .navlinks a{width:100%; padding:16px 4px; font-size:17px; border-bottom:1px solid var(--line)}

  .navlinks .has-dropdown{display:flex; flex-direction:column}
  .navlinks .has-dropdown > a{flex:1; border-bottom:1px solid var(--line)}
  .navlinks .has-dropdown-row{display:flex; align-items:center}
  .navlinks .has-dropdown .dropdown-toggle{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; margin:4px 0; border-bottom:1px solid var(--line); color:var(--ink-3);
  }
  .navlinks .has-dropdown .dropdown-toggle svg{transition:transform 200ms ease}
  .navlinks .has-dropdown.open .dropdown-toggle svg{transform:rotate(180deg)}

  .navlinks .dropdown{
    position:static; opacity:1; visibility:visible; box-shadow:none; border:none; width:auto;
    transform:none; padding:0; max-height:0; overflow:hidden; transition:max-height 240ms ease;
  }
  .navlinks .has-dropdown.open .dropdown{max-height:320px; padding:6px 0 10px 14px}
  .navlinks .dropdown a{border-bottom:none; padding:10px 4px; font-size:15.5px; color:var(--ink-2)}

  .nav-cta{margin-left:auto; margin-right:8px}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{padding:9px 16px; font-size:13.5px; white-space:nowrap}
}

/* dentro del panel mobile abierto, "Entrar" si tiene que verse (es el unico
   lugar donde un usuario que ya es cliente encuentra el login) */
@media (max-width:860px){
  .navlinks .mobile-entrar{display:flex; width:100%; margin-top:14px; justify-content:center}
}

/* --------- hero (home) --------- */
.hero{padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.hero h1{font-size:clamp(34px,5vw,54px); line-height:1.06; font-weight:800}
.hero h1 .accent{color:var(--cobalt)}
.hero p.lead{margin-top:20px; font-size:18px; color:var(--ink-2); max-width:52ch}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.trust-line{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:13.5px; color:var(--ink-3)}
.trust-line svg{flex-shrink:0; color:var(--green)}

.hero-visual{
  border-radius:24px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:22px; position:relative;
}
.hv-topbar{display:flex; align-items:center; gap:8px; margin-bottom:16px}
.hv-dot{width:9px; height:9px; border-radius:50%; background:var(--line)}
.hv-card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px}
.hv-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.hv-row:last-child{border-bottom:none}
.hv-badge{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--green-tint); color:var(--green)}
.hv-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:6px}
.hv-total b{font-size:26px}
.hv-total span{color:var(--ink-3); font-size:13px}

/* --------- page header (paginas interiores: soluciones/precios/contacto) --------- */
.page-header{padding:56px 0 48px; text-align:center}
.page-header .eyebrow{margin-left:auto; margin-right:auto}
.page-header h1{font-size:clamp(30px,4.4vw,46px); font-weight:800; line-height:1.1}
.page-header p.lead{margin:18px auto 0; font-size:17px; color:var(--ink-2); max-width:56ch}

/* --------- paginas legales (Terminos, Privacidad) --------- */
.legal{padding:8px 0 90px}
.legal .updated{color:var(--ink-3); font-size:13.5px; margin-bottom:36px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.legal h2{font-size:19px; font-weight:800; margin:38px 0 12px; letter-spacing:-.01em}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--ink-2); line-height:1.75; margin:0 0 14px; font-size:15.5px}
.legal ul{color:var(--ink-2); line-height:1.75; margin:0 0 14px; padding-left:22px; font-size:15.5px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink); font-weight:700}
.legal a{color:var(--cobalt-deep); font-weight:600}
.breadcrumb{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--ink-3); margin-bottom:16px}
.breadcrumb a{text-decoration:none; color:var(--ink-3)}
.breadcrumb a:hover{color:var(--cobalt-deep)}

/* --------- logos strip --------- */
.strip{padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.strip-label{font-size:12.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.strip-items{display:flex; gap:32px; flex-wrap:wrap; font-size:14px; font-weight:600; color:var(--ink-2)}

/* --------- section heads --------- */
.section-head{max-width:640px; margin-bottom:48px}
.section-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:800}
.section-head p{margin-top:14px; font-size:16.5px; color:var(--ink-2)}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* --------- problema / feature-grid de 3 --------- */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:860px){ .problem-grid{grid-template-columns:1fr} }
.problem-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.problem-card .ico{width:44px; height:44px; border-radius:12px; background:var(--red-tint); color:var(--red); display:grid; place-items:center; margin-bottom:16px}
.problem-card.pos .ico{background:var(--green-tint); color:var(--green)}
.problem-card h3{font-size:17px; font-weight:700; margin-bottom:8px}
.problem-card p{font-size:14.5px; color:var(--ink-2)}

/* --------- bento --------- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:860px){ .bento{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} }
.bento-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; position:relative; transition:border-color 180ms, box-shadow 180ms, transform 180ms;
}
.bento-card:hover{border-color:var(--cobalt); box-shadow:var(--shadow); transform:translateY(-2px)}
.bento-card .ico{width:40px; height:40px; border-radius:11px; background:var(--cobalt-tint); color:var(--cobalt-deep); display:grid; place-items:center; margin-bottom:14px}
.bento-card h3{font-size:15.5px; font-weight:700; margin-bottom:6px}
.bento-card p{font-size:13.5px; color:var(--ink-3); line-height:1.5}
.status{position:absolute; top:20px; right:20px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px}
.status.live{background:var(--green-tint); color:var(--green)}
.status.soon{background:var(--amber-tint); color:var(--amber)}

/* --------- comparativa --------- */
.compare-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
table.compare{width:100%; border-collapse:collapse; background:var(--card); font-size:14px; min-width:720px}
table.compare th, table.compare td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line)}
table.compare thead th{background:var(--ink); color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em}
table.compare thead th.us{background:var(--cobalt)}
table.compare tbody tr:last-child td{border-bottom:none}
table.compare td.us{background:var(--cobalt-tint); font-weight:700; color:var(--cobalt-deep)}
table.compare td.feature{font-weight:600; color:var(--ink)}
.check{color:var(--green)}
.cross{color:var(--ink-3)}

/* --------- precios --------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
@media (max-width:900px){ .pricing{grid-template-columns:1fr} }
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px;
  display:flex; flex-direction:column; position:relative;
}
.price-card.featured{border:2px solid var(--cobalt); box-shadow:0 20px 40px -20px rgba(31,63,191,.35)}
.price-tag{position:absolute; top:-13px; left:26px; background:var(--cobalt); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:100px}
.price-card h3{font-size:19px; font-weight:800}
.price-card .who{font-size:13.5px; color:var(--ink-3); margin-top:6px; min-height:36px}
.price-amount{display:flex; align-items:baseline; gap:6px; margin:22px 0}
.price-amount b{font-size:34px}
.price-amount span{color:var(--ink-3); font-size:14px}
.price-list{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1}
.price-list li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-2)}
.price-list svg{flex-shrink:0; margin-top:2px; color:var(--green)}

/* --------- faq (acordeon simple, sin JS de mas) --------- */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.faq-item summary{
  padding:18px 22px; font-weight:700; font-size:15px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:transform 200ms}
.faq-item[open] summary .plus{transform:rotate(45deg); border-color:var(--cobalt); color:var(--cobalt)}
.faq-item .faq-body{padding:0 22px 20px; font-size:14.5px; color:var(--ink-2)}

/* --------- origen / bloque oscuro --------- */
.origin{background:var(--ink); color:#fff; border-radius:28px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
@media (max-width:860px){ .origin{grid-template-columns:1fr; padding:36px 26px} }
.origin .eyebrow{background:rgba(255,255,255,.1); color:#C9D3FF}
.origin h2{font-size:clamp(24px,3vw,32px); font-weight:800; line-height:1.2}
.origin p{color:rgba(255,255,255,.75); font-size:15.5px; margin-top:16px}
.origin-stats{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.stat b{display:block; font-size:32px; font-weight:800}
.stat span{font-size:13px; color:rgba(255,255,255,.6)}

/* --------- cta final --------- */
.cta-final{text-align:center}
.cta-final h2{font-size:clamp(26px,3.6vw,38px); font-weight:800}
.cta-final p{margin-top:14px; font-size:16.5px; color:var(--ink-2); max-width:52ch; margin-left:auto; margin-right:auto}
.cta-actions{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap}

/* --------- formularios (contacto) --------- */
.form-card{background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:36px; max-width:640px; margin:0 auto}
.fld{margin-bottom:18px}
.fld label{display:block; font-size:13.5px; font-weight:700; color:var(--ink-2); margin-bottom:7px}
.fld input, .fld select, .fld textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:15px; background:var(--paper); color:var(--ink);
}
.fld input:focus, .fld select:focus, .fld textarea:focus{outline:none; border-color:var(--cobalt); background:#fff}
.fld textarea{resize:vertical; min-height:100px}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .fld-row{grid-template-columns:1fr} }
.form-msg{
  padding:13px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px; display:none;
}
.form-msg.ok{display:block; background:var(--green-tint); color:var(--green)}
.form-msg.err{display:block; background:var(--red-tint); color:var(--red)}
.form-success{text-align:center; padding:20px 0}
.form-success .ico{width:56px; height:56px; border-radius:50%; background:var(--green-tint); color:var(--green); display:grid; place-items:center; margin:0 auto 18px}

/* --------- contact info cards --------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:640px; margin:0 auto 40px}
@media (max-width:560px){ .contact-grid{grid-template-columns:1fr} }
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; display:flex; align-items:center; gap:14px; transition:border-color 180ms, transform 180ms}
.contact-card:hover{border-color:var(--cobalt); transform:translateY(-2px)}
.contact-card .ico{width:40px; height:40px; border-radius:10px; background:var(--cobalt-tint); color:var(--cobalt-deep); display:grid; place-items:center; flex-shrink:0}
.contact-card b{display:block; font-size:14.5px; color:var(--ink)}
.contact-card span{font-size:13px; color:var(--ink-3)}

/* --------- antes / ahora (paginas de soluciones por vertical) --------- */
.transform{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; max-width:900px; margin:0 auto}
@media (max-width:720px){ .transform{grid-template-columns:1fr; gap:14px} }
.transform-arrow{color:var(--ink-3); display:flex; justify-content:center}
@media (max-width:720px){ .transform-arrow{transform:rotate(90deg)} }
.transform-card{border-radius:var(--radius); padding:26px; border:1px solid var(--line)}
.transform-card.before{background:var(--paper)}
.transform-card.after{background:var(--card); border:1.5px solid var(--green); box-shadow:0 12px 28px -18px rgba(14,122,75,.35)}
.transform-card .tag{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin-bottom:12px; display:block}
.transform-card.after .tag{color:var(--green)}
.transform-card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.transform-card li{font-size:14px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start}
.transform-card.before li::before{content:"×"; color:var(--red); font-weight:800; flex-shrink:0}
.transform-card.after li::before{content:"✓"; color:var(--green); font-weight:800; flex-shrink:0}

/* --------- diff-grid (tarjetas numeradas, ej. diferenciales) --------- */
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:860px){ .diff-grid{grid-template-columns:1fr} }
.diff-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.diff-card .num{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:700; color:var(--cobalt); margin-bottom:12px}
.diff-card h3{font-size:17px; font-weight:700; margin-bottom:8px}
.diff-card p{font-size:14.5px; color:var(--ink-2)}

/* --------- pasos numerados en linea (ej. como funciona) --------- */
.steps-list{display:flex; flex-direction:column; gap:0; max-width:720px; margin:0 auto}
.step-item{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line)}
.step-item:last-child{border-bottom:none}
.step-item .n{flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--cobalt-tint); color:var(--cobalt-deep); display:grid; place-items:center; font-weight:800; font-size:14.5px}
.step-item h4{font-size:15.5px; font-weight:700; margin-bottom:5px}
.step-item p{font-size:14px; color:var(--ink-2)}

/* --------- timeline vertical (nosotros) --------- */
.timeline{max-width:680px; margin:0 auto; position:relative; padding-left:32px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding-bottom:32px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-32px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--cobalt); border:3px solid var(--cobalt-tint)}
.tl-item .date{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:700; color:var(--cobalt-deep); margin-bottom:6px}
.tl-item h4{font-size:16px; font-weight:700; margin-bottom:6px}
.tl-item p{font-size:14px; color:var(--ink-2)}

/* --------- values / principios --------- */
.values-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (max-width:720px){ .values-grid{grid-template-columns:1fr} }
.value-card{padding:24px 0; border-top:1px solid var(--line)}
.value-card h3{font-size:16.5px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:10px}
.value-card h3 svg{color:var(--cobalt); flex-shrink:0}
.value-card p{font-size:14.5px; color:var(--ink-2)}

/* --------- help categories --------- */
.help-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:860px){ .help-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .help-grid{grid-template-columns:1fr} }
.help-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-decoration:none; color:var(--ink); transition:border-color 180ms, transform 180ms}
.help-card:hover{border-color:var(--cobalt); transform:translateY(-2px)}
.help-card .ico{width:40px; height:40px; border-radius:11px; background:var(--cobalt-tint); color:var(--cobalt-deep); display:grid; place-items:center; margin-bottom:14px}
.help-card h3{font-size:15.5px; font-weight:700; margin-bottom:6px}
.help-card p{font-size:13.5px; color:var(--ink-3)}

/* --------- footer --------- */
footer{border-top:1px solid var(--line); padding:44px 0; font-size:13.5px; color:var(--ink-3)}
.foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.foot-links a{text-decoration:none; color:var(--ink-3)}
.foot-links a:hover{color:var(--cobalt-deep)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important}
}