/* ARCHIVO GENERADO - no editar a mano.
   Sale de: fuentes.css, tokens.css, base.css, components.css
   Regenerar con:  python construir.py  */

/* ---- fuentes.css ---- */
/* contasuma - fuentes auto-hospedadas (OFL), solo rango latin.
   Inter y Sora en formato variable: un archivo cubre todos los pesos,
   en vez de 4 y 3 archivos estaticos. Baja de 314 KB a lo que se ve
   abajo y quita ancho de banda de la ruta critica del primer pintado. */

/* Inter 400 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/inter-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sora 500 700 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/sora-500-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 400 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 500 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 600 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens.css ---- */
/* contasuma - tokens de marca
   Generado en FASE 1 desde el CSS embebido. No editar a mano sin
   revisar las 17 paginas: este archivo es compartido. */

/* Paleta oficial del sitio claro. NO NEGOCIABLE: estos hex son marca. */
:root{
  --ink:#03251C;
  --paper:#F5FBF8;
  --emerald:#059669;
  --emerald-dark:#047857;
  --emerald-deep:#035C43;   /* hover del boton primario */
  --emerald-light:#34D399;  /* verde de marca para fondos oscuros */
  --emerald-soft:#E4F7EE;
  --amber:#FBBF24;
  --red:#E2574C;            /* solo como fondo o acento, nunca como texto pequeno */
  --alerta:#7A5A07;         /* ambar legible: 6.0:1 sobre #FFF8E6 */
  --peligro:#B3271B;        /* rojo legible: 5.5:1 sobre #FDE8E6 */
  /* El texto secundario estaba en #51617A, que es un gris AZUL: matiz 217
     en una paleta cuyo resto vive entre 146 y 165. Era el unico elemento
     frio de toda la marca, y se notaba sin saber por que — las cifras
     secundarias de las tablas se leian azules.
     Este esta en matiz 158, entre el esmeralda y la linea, y ademas sube
     el contraste de 5,91 a 6,61 sobre blanco. */
  --ink-soft:#456358;
  --line:#D9E7DF;
  --card:#FFFFFF;
  --radius:14px;

/* ══════════════════════════════════════════════════════════════
 * MOVIMIENTO
 *
 * Las curvas que trae CSS de fábrica son flojas: ease, ease-out y
 * ease-in-out se quedan a medias y hacen que todo parezca dudar. Estas
 * tienen empuje, que es lo que hace que una interfaz se sienta despierta.
 *
 * Y una regla que manda sobre las demás: NUNCA ease-in en la interfaz.
 * Empieza lento, justo en el instante en que la persona está mirando, y
 * eso se lee como lentitud aunque el reloj diga lo mismo.
 * ════════════════════════════════════════════════════════════ */

  /* Entra o sale: arranca rápido, contesta al instante. */
  --sal: cubic-bezier(.23, 1, .32, 1);
  /* Se mueve por la pantalla: acelera y frena como algo con peso. */
  --entra-sal: cubic-bezier(.77, 0, .175, 1);
  /* Cajones y paneles laterales, la curva de iOS. */
  --cajon: cubic-bezier(.32, .72, 0, 1);

  /* Duraciones. Nada de la interfaz pasa de 300 ms: un desplegable de
     180 ms se siente más despierto que uno de 400, y esto es una caja
     que se usa cien veces al día. */
  --t-toque: 120ms;     /* respuesta al pulsar */
  --t-corto: 160ms;     /* color, borde, foco */
  --t-medio: 220ms;     /* desplegables, diálogos */
  --t-cajon: 280ms;     /* el menú lateral del teléfono */

/* ══════════════════════════════════════════════════════════════
 * FORMA
 *
 * Había doce radios distintos repartidos por la aplicación: 5, 6, 7, 8,
 * 9, 10, 11, 12, 13, 14, 16 y 999. Nadie nota un radio suelto; lo que sí
 * se nota es el conjunto, y un conjunto sin sistema se lee como
 * descuidado sin que se sepa por qué.
 * ════════════════════════════════════════════════════════════ */

  --r-1: 8px;      /* controles pequeños: pastillas, iconos, casillas */
  --r-2: 11px;     /* campos, botones, celdas */
  --r-3: 14px;     /* tarjetas y paneles */
  --r-4: 18px;     /* diálogos */
  --r-full: 999px; /* lo que tiene que leerse como redondo del todo */

}

/* Acento por rubro. Antes vivia como --c1/--c2 duplicado en 13 archivos.
   Se aplica con <html data-rubro="..."> */
[data-rubro="pymes"]{ --rubro-1:#059669; --rubro-2:#03251C; }
[data-rubro="comercios"]{ --rubro-1:#1F6FEB; --rubro-2:#03251C; }
[data-rubro="supermercados"]{ --rubro-1:#059669; --rubro-2:#065F46; }
[data-rubro="bodegas"]{ --rubro-1:#B8860B; --rubro-2:#03251C; }
[data-rubro="kioscos"]{ --rubro-1:#E2574C; --rubro-2:#7F1D1D; }
[data-rubro="tiendas-de-ropa"]{ --rubro-1:#7C3AED; --rubro-2:#03251C; }
[data-rubro="restaurantes"]{ --rubro-1:#059669; --rubro-2:#03251C; }
[data-rubro="panaderias"]{ --rubro-1:#B8860B; --rubro-2:#78350F; }
[data-rubro="licorerias"]{ --rubro-1:#7C3AED; --rubro-2:#4C1D95; }
[data-rubro="barberias"]{ --rubro-1:#1F6FEB; --rubro-2:#03251C; }
[data-rubro="peluquerias"]{ --rubro-1:#E2574C; --rubro-2:#831843; }
[data-rubro="farmacias"]{ --rubro-1:#059669; --rubro-2:#064E3B; }
[data-rubro="ferreterias"]{ --rubro-1:#B8860B; --rubro-2:#03251C; }

/* Compatibilidad: el CSS de rubro heredado sigue usando --c1/--c2 */
[data-rubro]{ --c1:var(--rubro-1); --c2:var(--rubro-2); }

/* Paleta editorial darkroom (contasuma-editorial.html).
   Se declara aparte porque esa pagina es una landing de campana con
   su propio sistema de color. */
[data-theme="darkroom"]{
  --walnut:#04100B;
  --cream:#EAFFF4;
  --bark:#0C2B1E;
  --cork:#1D4032;
  --drift:#5F8B77;
  --menta:#2EF2A6;
  --oro:#FFD34D;
  --ember:#FF6A1A;
}

/* ---- base.css ---- */
/* contasuma - base: reset, tipografia y layout
   Generado en FASE 1 desde el CSS embebido. No editar a mano sin
   revisar las 17 paginas: este archivo es compartido. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 44px;opacity:.5;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 75%,transparent);pointer-events:none}
.hero h1 em{
  font-style:normal;position:relative;
  /* El resaltado ambar va de fondo, no como ::after absoluto: asi acompana
     cada fragmento cuando el <em> salta de linea. */
  background-image:linear-gradient(to top, transparent 4px, var(--amber) 4px, var(--amber) calc(4px + .42em), transparent calc(4px + .42em));
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  border-radius:3px;
  padding-inline:2px;
  margin-inline:-2px;
}

/* Utilidades de accesibilidad (FASE 3) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-64px;z-index:99;background:var(--emerald-dark);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;font-size:.9rem;transition:top .18s ease}
.skip-link:focus{top:12px}

/* Foco visible en todo lo interactivo (FASE 3). Las reglas mas especificas
   de components.css lo afinan por componente. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--emerald);outline-offset:3px;border-radius:4px;
}

/* ---- components.css ---- */
/* contasuma - componentes compartidos: nav, botones, footer
   Generado en FASE 1 desde el CSS embebido. No editar a mano sin
   revisar las 17 paginas: este archivo es compartido. */

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:10px;font-weight:600;font-size:1rem;transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer;border:none;font-family:'Inter'}
.btn:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
/* Fondo --emerald-dark, no --emerald: blanco sobre #059669 da 3.77:1 y
   reprueba AA para texto. Con #047857 sube a 5.23:1. El hex de marca no
   cambia; cambia donde se usa. */
.btn-primary{background:var(--emerald-dark);color:#fff}
.btn-primary:hover{background:var(--emerald-deep);transform:translateY(-1px)}
.btn-ghost{color:var(--ink);border:1.5px solid var(--line);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(14,27,44,.25)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:700;font-size:1.25rem}
.logo-mark{display:grid;place-items:center}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);font-weight:500;font-size:.95rem;color:var(--ink-soft);white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-bottom:2px solid var(--emerald);padding-bottom:2px}
.nav-cta{display:flex;gap:10px;align-items:center;white-space:nowrap}
.nav-cta .btn{padding:10px 16px;font-size:.92rem}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-note{margin-top:18px;font-size:.85rem;color:var(--ink-soft)}
/* ── footer ── */
footer{border-top:1px solid var(--line);padding:56px 0 32px;background:#EDF5F0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
/* Las columnas son 1fr, que es minmax(auto,1fr): sin esto el contenido
   marca el minimo y la rejilla se desborda en pantallas estrechas. */
.foot-grid > *{min-width:0}
.foot-grid h3,.foot-grid h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;font-family:'Sora'}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--ink-soft)}
.foot-grid ul a:hover{color:var(--ink)}
.foot-desc{color:var(--ink-soft);font-size:.92rem;margin-top:12px;max-width:280px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:24px}

/* ── Nav: desplegable de rubros y menu movil (FASE 3) ── */
.nav-menu{display:flex;align-items:center;justify-content:flex-end;flex:1;gap:clamp(16px,2vw,32px);margin-left:24px}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-8px;
  background:transparent;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.nav-burger,.nav-burger::before,.nav-burger::after{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.nav-burger{position:relative}
.nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0}
.nav-burger::before{top:-6px}
.nav-burger::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-burger{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-burger::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-burger::after{transform:translateY(-6px) rotate(-45deg)}

.nav-drop{position:relative}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter';font-weight:500;font-size:.95rem;color:var(--ink-soft);
  background:none;border:none;padding:0;cursor:pointer;
}
.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"],.nav-drop-btn.esta-activo{color:var(--ink)}
.nav-drop-btn.esta-activo{border-bottom:2px solid var(--emerald);padding-bottom:2px}
.nav-drop-btn:focus-visible{outline:3px solid var(--emerald);outline-offset:3px;border-radius:4px}
.nav-chevron{transition:transform .18s ease}
.nav-drop-btn[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}

.nav-drop-panel{
  position:absolute;top:calc(100% + 16px);left:-16px;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;min-width:392px;padding:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 20px 44px rgba(3,37,28,.14);
}
.nav-drop-panel[hidden]{display:none}
.nav-drop-panel a{
  padding:9px 10px;border-radius:9px;font-size:.92rem;color:var(--ink-soft);white-space:nowrap;
}
.nav-drop-panel a:hover{background:var(--emerald-soft);color:var(--ink)}
.nav-drop-panel a:focus-visible{outline:3px solid var(--emerald);outline-offset:-1px}
.nav-drop-panel a[aria-current="page"]{background:var(--emerald-soft);color:var(--ink);font-weight:600}

.nav-links a:focus-visible{outline:3px solid var(--emerald);outline-offset:3px;border-radius:4px}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--emerald);padding-bottom:2px}

@media(max-width:1120px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;margin:0;padding:4px 24px 20px;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px rgba(3,37,28,.10);
    max-height:calc(100dvh - 64px);overflow-y:auto;
  }
  .nav-menu.abierto{display:flex}
  .nav-links{flex-direction:column;gap:0;font-size:1rem;width:100%}
  .nav-links > a,.nav-drop-btn{
    width:100%;padding:14px 2px;border-bottom:1px solid var(--line);font-size:1rem;
  }
  .nav-drop-btn{justify-content:space-between}
  .nav-drop{width:100%}
  .nav-drop-panel{
    position:static;min-width:0;padding:6px 0 14px;
    background:transparent;border:none;box-shadow:none;
  }
  .nav-cta{margin-top:18px;flex-direction:column;align-items:stretch;gap:10px}
  .nav-cta .btn{width:100%}
  body.nav-bloqueado{overflow:hidden}
}

@media(max-width:420px){
  .nav-drop-panel{grid-template-columns:1fr}
}

/* El pie es compartido: su responsive vive aqui. Estaba duplicado en cuatro
   hojas de pagina con puntos de corte distintos, y las que no bajaban a una
   sola columna desbordaban a 360px. */
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:24px}

  /* En movil los CTA ocupan la linea entera: area de toque mas grande y
     dos botones del mismo ancho en vez de dos anchos distintos. */
  .cta-btns,.hero-btns{flex-direction:column;align-items:stretch;gap:10px}
  .cta-btns .btn,.hero-btns .btn{width:100%}
}

/* --- responsive compartido --- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* Botón fantasma sobre una banda oscura. Estaba resuelto con un style= en
   línea en una sola página; vive aquí para que la próxima banda oscura no
   vuelva a inventarlo. */
.btn-ghost.btn-sobre-oscuro{color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost.btn-sobre-oscuro:hover{border-color:#fff;background:rgba(255,255,255,.08)}