/* Sistema visual de Pacto Pyme, según el Brand Book v1.0 de Estudio Creativo FAIO
   (sep-2026). Lo usan el home y /horeca. Va sobrio, como el manual: fondos planos,
   tipografía grande, rótulos chicos y fotos rectangulares. Reglas:
   - Solo la paleta de abajo y sus tintes de 20 %. Nada de amarillo ni dorado.
   - Solo Inter. Jerarquía por peso y tamaño.
   - Sobre Greda el texto va Carbón (4,7:1). Harina sobre Greda da 3,2. */

:root{
  --pizarra:#233435; --botella:#385151; --loza:#CED9D9; --greda:#CC6C51;
  --harina:#F1F1F1; --carbon:#181D1A;
  --greda-80:#D68974; --loza-60:#E2E8E8; --loza-40:#EBF0F0;
  --botella-80:#5D7171; --botella-60:#829191;
  --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,80px);
  --ancho:1320px;
}

.m-wrap{max-width:var(--ancho);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Rótulos y números de sección */
.m-rotulo{font-family:var(--font);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0}
.m-num{font-family:var(--font);font-weight:300;font-size:14px;display:block;margin-bottom:20px;opacity:.7}

/* Títulos (escala del manual, base 18px) */
.m-h1{font-family:var(--font);font-weight:500;font-size:clamp(44px,6vw,84px);line-height:1.02;letter-spacing:-.035em;margin:0}
.m-h2{font-family:var(--font);font-weight:500;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance}
.m-h2--light{font-weight:300;font-size:clamp(38px,5.4vw,76px);letter-spacing:-.04em;line-height:1.02}
.m-h3{font-family:var(--font);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
.m-lede{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.6;max-width:52ch;margin:0}

/* Botones: píldora Greda, como en la plantilla */
.m-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:600;font-size:15.5px;line-height:1;
  padding:15px 24px;border-radius:999px;background:var(--greda);color:var(--harina);text-decoration:none;border:1.5px solid var(--greda);
  transition:background .18s ease,border-color .18s ease;cursor:pointer}
/* Texto Harina sobre Greda, pedido por Rene (oct-2026). Ojo: da 3,2:1, bajo AA para texto chico.
   El hover oscurece el botón en vez de aclararlo para no perder más contraste. */
.m-btn:hover{background:#B85F47;border-color:#B85F47}
.m-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.m-btn--linea{background:transparent;color:inherit;border-color:currentColor}
.m-btn--linea:hover{background:transparent;border-color:var(--greda);color:var(--greda)}
.m-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Superficies planas */
.m-oscuro{background:var(--pizarra);color:var(--harina)}
.m-oscuro .m-lede,.m-oscuro p{color:var(--loza)}
.m-claro{background:var(--harina);color:var(--carbon)}
.m-loza{background:var(--loza-60);color:var(--carbon)}
.m-claro .m-lede,.m-loza .m-lede{color:var(--botella)}
.m-sec{padding:clamp(80px,11vw,150px) 0}

/* Tarjetas numeradas (plantilla "Tres cosas") */
.m-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--loza);border:1px solid var(--loza);margin-top:clamp(40px,5vw,64px)}
.m-tarjeta{background:var(--harina);color:var(--carbon);padding:32px 30px 36px;min-height:240px;display:flex;flex-direction:column;text-decoration:none}
.m-tarjeta .n{font-weight:400;font-size:13px;color:var(--botella);margin-bottom:28px}
.m-tarjeta p{color:var(--botella);margin:0;font-size:15.5px;line-height:1.55}
.m-tarjeta .pie{margin-top:auto;padding-top:28px;font-weight:600;font-size:14.5px}

/* Logo por rubro: imagotipo + nombre del rubro en Inter Light, mayúsculas, a la base de "pyme" */
.m-rubro{display:inline-flex;align-items:flex-end;gap:12px;text-decoration:none;color:inherit}
.m-rubro img{height:40px;width:auto;display:block}
.m-rubro span{font-weight:300;font-size:12px;letter-spacing:.24em;text-transform:uppercase;line-height:1;padding-bottom:3px}

/* Fotografía: siempre rectangular, sin bordes ni adornos */
.m-foto{margin:0;overflow:hidden;background:var(--loza)}
.m-foto img{display:block;width:100%;height:100%;object-fit:cover}

.m-aliados{font-size:13px;letter-spacing:.02em}

/* Título a dos tonos, como el diploma de la firma: Pizarra + Greda en la frase clave.
   Greda sobre Harina da 3,2:1, así que solo en títulos grandes. */
.m-h1{color:var(--pizarra)}
.m-h1 em{font-style:normal;color:var(--greda)}

/* Firmantes: dos filas de logos con líneas finas, como el diploma.
   Los logos van con sus colores originales (regla de co-branding). */
.m-firmantes{border-top:1px solid var(--loza);padding-top:28px}
.m-firmantes .fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.m-firmantes .fila+.fila{border-top:1px solid var(--loza);margin-top:22px;padding-top:22px}
.m-firmantes .logo-f{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:66px}
.m-firmantes .logo-f+.logo-f{border-left:1px solid var(--loza)}
.m-firmantes img{display:block;width:auto;max-width:82%;object-fit:contain}
.m-firmantes .f-mineco{height:66px}.m-firmantes .f-abastible{height:34px}.m-firmantes .f-dl{height:38px}
.m-firmantes .f-google{height:31px}.m-firmantes .f-aws{height:38px}.m-firmantes .f-acti{height:25px}.m-firmantes .f-cepal{height:62px}
@media(max-width:560px){.m-firmantes .f-mineco{height:46px}.m-firmantes .f-abastible,.m-firmantes .f-dl{height:24px}
  .m-firmantes .f-google{height:21px}.m-firmantes .f-aws{height:26px}.m-firmantes .f-acti{height:17px}.m-firmantes .f-cepal{height:40px}}

/* La barra es fija: que los saltos a #ancla no queden tapados */
html{scroll-padding-top:110px}

/* ---------- Hero de todas las landings ----------
   m-hero-claro: Harina con brillo difuso de los colores de los degradés del manual
   (menta arriba, durazno-Greda abajo), hecho en CSS para que sea nítido y liviano.
   --brillo-x mueve la mancha menta al lado del texto (8% si el texto va a la izquierda). */
.m-hero-claro{--brillo-x:8%;background:
  radial-gradient(60% 70% at var(--brillo-x) 0%,rgba(206,217,217,.95) 0%,rgba(206,217,217,0) 70%),
  radial-gradient(60% 70% at 58% 108%,rgba(204,108,81,.26) 0%,rgba(204,108,81,0) 70%),
  radial-gradient(40% 50% at 40% 40%,rgba(56,81,81,.05) 0%,rgba(56,81,81,0) 70%),
  var(--harina)}

/* Kicker de sección: trazo corto Greda + rótulo. Da contexto antes del título */
.m-kick{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--font);font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--botella)}
.m-kick::before{content:"";width:28px;height:2px;background:var(--greda);flex:0 0 auto}
.m-oscuro .m-kick{color:var(--loza)}

/* Superficies de acento: Carbón (el negro de la marca) y Greda (el naranjo) */
.m-negro{background:var(--carbon);color:var(--harina)}
.m-negro .m-lede,.m-negro p{color:var(--loza)}
.m-negro .m-kick{color:var(--loza)}
.m-greda{background:var(--greda);color:var(--carbon)}
.m-greda .m-lede,.m-greda p{color:var(--carbon)}
.m-greda .m-kick{color:var(--carbon)}
.m-greda .m-kick::before{background:var(--carbon)}

/* ---------- La mano como guiño de marca ----------
   .m-pill: tarjeta-píldora con la mano, título, bajada y flecha (la de "Becas HORECA").
   .m-mano: la mano chica en línea, para reemplazar puntos y viñetas.
   .m-kick--mano: kicker de sección con la mano en vez del trazo. */
.m-pill{display:inline-flex;align-items:center;gap:14px;width:max-content;max-width:100%;box-sizing:border-box;background:var(--harina);color:var(--carbon);text-decoration:none;
  padding:14px 22px 14px 16px;border-radius:18px;box-shadow:0 18px 40px -18px rgba(24,29,26,.5);white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease}
a.m-pill:hover{transform:translateY(-3px);box-shadow:0 24px 44px -18px rgba(24,29,26,.55)}
.m-pill>img{height:34px;width:auto;flex:0 0 auto}
.m-pill b{display:block;font-weight:600;font-size:16px}
.m-pill small{display:block;font-size:12.5px;color:var(--botella);margin-top:2px}
.m-pill .fl{color:var(--greda);font-weight:700;margin-left:4px;transition:transform .2s ease}
a.m-pill:hover .fl{transform:translateX(3px)}
.m-pill--borde{box-shadow:none;border:1px solid var(--loza)}
.m-mano{display:inline-block;width:.9em;height:1.2em;flex:0 0 auto;vertical-align:-.2em;
  background:url(/assets/pactopyme-faio-isotipo-greda.svg) center/contain no-repeat}
.m-kick--mano::before{width:14px;height:19px;background:url(/assets/pactopyme-faio-isotipo-greda.svg) center/contain no-repeat}
@media(max-width:560px){.m-pill{white-space:normal}}
/* Kicker grande con la mano, a la escala de la pill */
.m-kick--mano{gap:14px;font-size:13px;letter-spacing:.16em;margin-bottom:22px}
.m-kick--mano::before{width:26px;height:34px;flex:0 0 auto}