/* ============================================================
   Hoja de estilos de la web pública de Gumber.
   Compartida por las tres páginas (home, /expensas, /delivery): estaba
   inline en el index y con tres páginas se habría copiado tres veces.
   Un archivo aparte además se cachea entre páginas, así que la segunda
   que abre un visitante no vuelve a bajarla.
   ============================================================ */

/* Paleta oficial (manual de identidad Gumber · MANO).

   Gumber es la EMPRESA: navy dominante, sobrio. MANO es el PRODUCTO: mint
   dominante, cercano. Los dos comparten Montserrat y el resto de la paleta.

   Dos reglas del manual que mandan sobre el CSS:
   · Sobre mint el texto va SIEMPRE en navy. "Blanco sobre mint" figura entre
     los usos no permitidos, y con razón: da 1,74:1. Navy da 9,13:1.
   · El mint nunca queda suelto sobre blanco: o lleva la m en navy (el
     isotipo) o es fondo de algo con texto navy encima.

   El verde oscuro (#006338) y el rojo oscuro (#ba372b) no están en la
   paleta del manual: son derivados propios para TEXTO CHICO sobre fondo
   claro, donde el mint y el rojo de marca no llegan a AA. El color de marca
   se queda para superficies e íconos, que con 3:1 cumplen. */
:root {
  --mint: #00E096;
  --mint-oscuro: #00B87D;
  --verde-texto: #006338;
  --navy: #142142;
  --navy-claro: #1e2f5c;
  --charcoal: #373435;
  --gris: #647190;
  /* Solo para las bajadas, que van en Light 300: el mismo gris que el resto
     del cuerpo (4,88:1) con un trazo más fino se lee peor aunque el número
     pase AA. Este da 6,56:1 sobre blanco y 6,07:1 sobre el mint tenue. */
  --gris-bajada: #505d7d;
  --gris-claro: #e6e9ef;
  --fondo-suave: #f6f8fb;
  --mint-tenue: #e6fbf3;
  --rojo: #EF4737;
  /* El rojo del manual da 3,73:1 sobre blanco: el propio manual lo marca
     como "solo texto grande". Para el ✗ de las comparativas, que es texto
     chico, va este derivado (5,72:1). El rojo de marca se queda para íconos
     y superficies, donde 3:1 alcanza. */
  --rojo-texto: #ba372b;
  --rosa: #EB437F;
  --naranja: #FF803B;
  --verde: #5ABA51;
  --blanco: #ffffff;
  /* Sombras en capas, teñidas de navy: una gris pura se ve sucia sobre el
     blanco azulado de las secciones. */
  --sombra-1: 0 1px 2px rgba(20,33,66,.05), 0 2px 8px rgba(20,33,66,.04);
  --sombra-2: 0 2px 4px rgba(20,33,66,.04), 0 12px 32px rgba(20,33,66,.08);
  --sombra-3: 0 4px 10px rgba(20,33,66,.06), 0 28px 64px rgba(20,33,66,.16);
  --radio: 20px;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  /* El archivo trae el eje wght completo (100-900, leído del fvar).
     Declarando 400-800 el navegador recortaba la variación, así que el
     Light 300 que el manual pide para las bajadas nunca se aplicaba. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* `hidden` tiene que ganar siempre. Sin esto, `.boton` y `.wa-flotante`
   (display propio) lo pisan y los accesos a WhatsApp se ven aunque no haya
   número cargado, apuntando al formulario. app.js saca el atributo cuando
   la API devuelve el número. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--charcoal);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--verde-texto); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

.salto { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; }
.salto:focus { left: 12px; top: 12px; }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
/* Navy sobre mint: 9,13:1, medido. Es la regla del manual y además el par
   más legible de los tres que se probaron (charcoal 7,10:1, blanco 1,74:1). */
.boton-primario { background: var(--mint); color: var(--navy); box-shadow: 0 6px 18px rgba(0,224,150,.28); }
.boton-primario:hover { background: var(--mint-oscuro); }
.boton-borde { background: var(--blanco); color: var(--navy); border: 1.5px solid #cdd3df; }
.boton-borde:hover { border-color: var(--navy); }
.boton-oscuro { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(20,33,66,.22); }
/* Botón secundario sobre fondo navy: borde y texto claros. */
.boton-fantasma { background: rgba(255,255,255,.06); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.boton-fantasma:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.boton-fantasma svg { width: 20px; height: 20px; color: var(--mint); }
.boton-oscuro:hover { background: var(--navy-claro); }
.boton-borde svg { width: 20px; height: 20px; color: var(--verde); }
.boton-chico { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.fuente { font-size: 12px; color: var(--gris); }

/* ── Encabezado ── */
header.sitio {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(20,33,66,.07);
}
.header-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
/* 18 y no 26: el contenedor tope en 1120px, así que el nav de las páginas
   de producto (cinco links, uno de ellos el cruzado al otro producto) no
   tiene más aire por más ancha que sea la pantalla — con 26 quedaban 12px
   entre el último link y los botones. El home sí tiene lugar de sobra y se
   queda con los 26 (ver `.gumber` abajo). */
nav.principal { display: none; gap: 18px; }
nav.principal a { color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 600; opacity: .8; }
nav.principal a:hover { opacity: 1; }
.header-acciones { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.header-acciones .boton { white-space: nowrap; }
.header-acciones .boton { min-height: 42px; padding: 8px 14px; font-size: 14px; }
.solo-md { display: none; }
@media (min-width: 900px) { nav.principal { display: flex; } .solo-md { display: inline-flex; } .header-acciones .boton { padding: 10px 18px; } }
/* Los dos escalones del nav, medidos sobre la página más cargada
   (Delivery: marca 209 + nav 589 + acciones 242 + aire 88 = 1128).
   Abajo de 1040 entra el nav pero no el CTA secundario — el hero tiene el
   suyo, bien grande, apenas se baja. Abajo de 1200 se suelta el link
   cruzado al otro producto, que además está en el pie. El corte no es
   1130 sino 1200 a propósito: con 1130 quedaban 12px de aire y cualquier
   link que se sume al nav lo vuelve a romper. */
@media (max-width: 1039px) { .header-fila .solo-md { display: none; } }
@media (max-width: 1199px) { nav.principal a.cruce { display: none; } }
.gumber nav.principal { gap: 26px; }

/* ── Hero ── */
.hero {
  padding: 56px 0 48px; position: relative;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(0,224,150,.16) 0%, rgba(0,224,150,0) 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(20,33,66,.06) 0%, rgba(20,33,66,0) 70%),
    linear-gradient(180deg, #f4fbf8 0%, var(--blanco) 100%);
}
/* Grilla de puntos que se desvanece hacia abajo. Pura decoración. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(20,33,66,.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.hero > .contenedor { position: relative; }
.hero-grilla { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .hero-grilla { grid-template-columns: 1.3fr .7fr; gap: 56px; } .hero { padding: 80px 0 72px; } }
.hero h1 {
  font-size: clamp(32px, 6vw, 56px); line-height: 1.08; color: var(--navy);
  font-weight: 700; letter-spacing: -.03em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--verde-texto); }
.hero .fuente { margin-top: 10px; }
/* Light 300 y nunca por debajo de 18 px: el manual ata las dos cosas, y
   una Light en 16 px sobre gris deja de leerse. */
.hero p.bajada { font-size: clamp(18px, 2.1vw, 20px); font-weight: 300; color: var(--gris-bajada); margin-top: 20px; max-width: 56ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-acciones .boton { flex: 1 1 220px; }
@media (min-width: 560px) { .hero-acciones .boton { flex: 0 0 auto; } }
.hero small { display: block; margin-top: 16px; color: var(--gris); font-size: 14px; }

/* Tarjeta ilustrativa: qué pasa en MANO al cargar un gasto. Solo HTML/CSS. */
.demo { background: var(--blanco); border: 1px solid rgba(20,33,66,.08); border-radius: 24px; padding: 22px; box-shadow: var(--sombra-3); font-size: 14px; }
.demo-cab { display: flex; justify-content: space-between; align-items: center; color: var(--gris); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.demo-cab span:last-child { color: var(--verde-texto); }
.demo-fila { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gris-claro); }
.demo-fila:last-of-type { border-bottom: 0; }
.demo-fila b { color: var(--navy); font-weight: 700; }
.demo-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--verde-texto); font-weight: 700; }
.demo-bloqueo { margin-top: 14px; border: 1.5px solid #f6c3be; background: #fff4f3; border-radius: 12px; padding: 12px 14px; color: #8f1f17; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.demo-bloqueo svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--rojo); margin-top: 1px; }
.demo-bloqueo small { display: block; font-weight: 500; color: #8f1f17; margin-top: 2px; }

/* ── Secciones ── */
section { padding: 56px 0; }
@media (min-width: 720px) { section { padding: 96px 0; } }
section.alterna { background: var(--fondo-suave); }
.encabezado { max-width: 68ch; }
.sobre {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--verde-texto); background: var(--mint-tenue); border: 1px solid rgba(0,99,56,.14);
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
h2 { font-size: clamp(28px, 4vw, 44px); color: var(--navy); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
h2 + p.intro, .encabezado p.intro { color: var(--gris-bajada); margin-top: 12px; font-size: 18px; font-weight: 300; }

.grilla { display: grid; gap: 18px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grilla.tres { grid-template-columns: repeat(3, 1fr); } }

.tarjeta { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra-1); transition: transform .2s ease, box-shadow .2s ease; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.tarjeta h3 { font-size: 18px; color: var(--navy); font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.tarjeta p { color: var(--gris); font-size: 15px; }

/* ── Datos duros ── */
.datos { padding: 36px 0 0; }
.dato { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 16px; padding: 22px 22px 18px; }
.dato .num { font-size: clamp(34px, 4.6vw, 44px); font-weight: 700; color: var(--navy); letter-spacing: -.02em; line-height: 1.05; }
.dato .ctx { color: var(--charcoal); font-size: 15px; margin-top: 8px; }
.dato .fuente { margin-top: 10px; display: block; }

/* Un dato del sector, al lado del argumento que lo usa (diferencia 03,
   Normativa). Mismo tono que las tarjetas de datos que reemplaza. */
.dato-inline { margin-top: 16px; padding: 14px 16px; background: var(--fondo-suave); border-radius: 12px; border-left: 4px solid var(--mint); display: grid; gap: 4px; }
.dato-inline b { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; line-height: 1.15; }
.dato-inline span { font-size: 14px; color: var(--charcoal); }
.dato-inline .fuente { font-size: 12px; color: var(--gris); }
.dato-inline-arriba { margin: 0 0 24px; }

/* ── Diferenciales ── */
.dif { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 760px) { .dif { grid-template-columns: 1fr 1fr; gap: 22px; } }
/* Con un número impar de diferencias, la última ocupa el ancho entero en vez
   de quedar sola en media columna. */
@media (min-width: 760px) { .dif article:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.dif article { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 24px; padding: 28px; box-shadow: var(--sombra-1); display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.dif .icono { width: 48px; height: 48px; border-radius: 12px; background: var(--mint-tenue); color: var(--verde-texto); display: flex; align-items: center; justify-content: center; }
.dif .icono svg { width: 24px; height: 24px; }
.dif h3 { font-size: 19px; color: var(--navy); font-weight: 700; line-height: 1.25; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dif p { color: var(--charcoal); font-size: 15px; margin-top: 8px; }
.dif .num { font-size: 12px; font-weight: 700; color: var(--gris); letter-spacing: .08em; }

/* ── Migración ── */
.migracion { background: radial-gradient(70% 90% at 100% 0%, rgba(0,224,150,.18) 0%, rgba(0,224,150,0) 60%), var(--navy); color: #fff; border-radius: 28px; padding: 34px 26px; display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) { .migracion { grid-template-columns: 1.4fr 1fr; padding: 44px; } }
.migracion h2 { color: #fff; }
.migracion p { color: #c5cad8; margin-top: 12px; font-size: 16px; max-width: 58ch; }
.migracion .acciones { display: grid; gap: 10px; }
.migracion small { color: #9aa3b8; font-size: 13px; }

/* ── Ley 941 ── */
.destacado { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 20px; padding: 28px 22px; }
@media (min-width: 720px) { .destacado { padding: 40px; } }
.lista-check { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
@media (min-width: 760px) { .lista-check { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; color: var(--charcoal); font-size: 15px; }
.lista-check .tilde { color: var(--verde-texto); font-weight: 700; flex-shrink: 0; }
.nuevo { margin-top: 28px; display: grid; gap: 14px; }
@media (min-width: 760px) { .nuevo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .nuevo article:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.nuevo article { background: var(--fondo-suave); border-radius: 14px; padding: 18px 18px 16px; border-left: 4px solid var(--mint); }
.nuevo h3 { font-size: 16px; color: var(--navy); font-weight: 700; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nuevo p { font-size: 14px; color: var(--charcoal); margin-top: 6px; }
.nuevo p.mano { color: var(--verde-texto); font-weight: 600; margin-top: 8px; }
/* Desplegable de las normas, mismo lenguaje que el FAQ (+ / –). */
.normas { margin-top: 24px; border: 1px solid var(--gris-claro); border-radius: 14px; padding: 0 18px; background: var(--blanco); }
.normas summary { cursor: pointer; list-style: none; min-height: 44px; padding: 12px 0; font-weight: 700; color: var(--navy); font-size: 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.normas summary::-webkit-details-marker { display: none; }
.normas summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--verde-texto); flex-shrink: 0; font-weight: 400; }
.normas[open] summary::after { content: "–"; }
.normas .nuevo { margin: 4px 0 18px; }
.cierre { margin-top: 24px; font-size: 18px; font-weight: 700; color: var(--navy); }

/* ── Lista compacta ── */
.funciones { list-style: none; margin-top: 30px; display: grid; gap: 14px 32px; }
@media (min-width: 720px) { .funciones { grid-template-columns: 1fr 1fr; } }
.videos-grilla { display: grid; gap: 22px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .videos-grilla { grid-template-columns: 1fr 1fr; } }
.video { background: #fff; border: 1px solid var(--gris-claro); border-radius: 16px; overflow: hidden; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video .video-texto { padding: 14px 18px 18px; }
.video h3 { font-size: 17px; margin: 0 0 6px; }
.video p { color: var(--gris); font-size: 15px; margin: 0; }
.funciones li { display: flex; gap: 12px; font-size: 15px; color: var(--charcoal); border-bottom: 1px solid var(--gris-claro); padding-bottom: 14px; }
.funciones li b { color: var(--navy); }
.funciones .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex-shrink: 0; margin-top: 8px; }

/* ── Precios ── */
.planes { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 860px) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; box-shadow: var(--sombra-1); }
.plan.destacado-plan { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-tenue), var(--sombra-2); }
.plan h3 { font-size: 20px; color: var(--navy); font-weight: 700; }
/* Descripción del plan (solo Delivery: la carga el Super Admin junto al
   plan, y con los tres planes fijos de expensas no existe). */
.plan-desc { margin-top: 6px; font-size: 14px; color: var(--gris); }
.plan .precio { margin-top: 14px; }
.plan .precio .monto { font-size: 30px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.plan .precio .det { color: var(--gris); font-size: 14px; }
.plan .uf { margin-top: 10px; font-size: 15px; color: var(--charcoal); }
.plan .eq { margin-top: 12px; padding: 10px 12px; background: var(--fondo-suave); border-radius: 10px; font-size: 14px; color: var(--charcoal); }
.plan .eq b { color: var(--navy); }
.plan ul { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--charcoal); flex: 1; }
.plan ul li { display: flex; gap: 8px; }
.plan ul li::before { content: "✓"; color: var(--verde-texto); font-weight: 700; }
.plan .boton { margin-top: 20px; }
.plan small { display: block; margin-top: 10px; color: var(--gris); font-size: 13px; text-align: center; }
.ancla { margin-top: 26px; font-size: 15px; color: var(--charcoal); background: var(--mint-tenue); border-radius: 12px; padding: 14px 16px; }
.ancla b { color: var(--navy); }
.ancla .fuente { display: block; margin-top: 4px; }

/* ── Comparativa ── */
.tabla-wrap { overflow-x: auto; margin-top: 30px; border: 1px solid var(--gris-claro); border-radius: 16px; background: var(--blanco); }
table.comparativa { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.comparativa th, .comparativa td { padding: 13px 12px; text-align: center; border-bottom: 1px solid var(--gris-claro); vertical-align: middle; }
.comparativa th { font-weight: 700; color: var(--navy); background: var(--fondo-suave); font-size: 13px; }
.comparativa th:first-child, .comparativa td:first-child { text-align: left; color: var(--navy); font-weight: 600; min-width: 200px; }
.comparativa tr:last-child td { border-bottom: 0; }
.comparativa .mano { background: var(--mint-tenue); font-weight: 700; }
.comparativa th.mano { background: var(--mint); color: var(--navy); }
.si { color: var(--verde-texto); font-weight: 700; }
.no { color: var(--rojo-texto); font-weight: 700; }
.parcial { color: var(--gris); font-weight: 600; font-size: 13px; }
.comparativa small { display: block; font-weight: 400; color: var(--gris); font-size: 12px; margin-top: 2px; }
.nota-tabla { margin-top: 12px; font-size: 13px; color: var(--gris); }
@media (max-width: 719px) {
  table.comparativa { min-width: 0; }
  .comparativa thead { position: absolute; left: -9999px; }
  .comparativa tbody, .comparativa tr, .comparativa th, .comparativa td { display: block; }
  .comparativa tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 14px 14px 12px; border-bottom: 1px solid var(--gris-claro); }
  .comparativa tr:last-child { border-bottom: 0; }
  .comparativa th[scope="row"] { grid-column: 1 / -1; min-width: 0; padding: 0 0 6px; border: 0; background: transparent; font-size: 15px; }
  .comparativa td { padding: 8px 4px; border: 0; border-radius: 8px; background: var(--fondo-suave); font-size: 13px; }
  .comparativa td::before { content: attr(data-col); display: block; font-size: 10px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
  .comparativa td.mano { background: var(--mint-tenue); }
  .comparativa td.mano::before { color: var(--verde-texto); }
  .comparativa small { font-size: 11px; line-height: 1.3; }
}

/* ── Equipo ── */
.equipo { display: grid; gap: 22px; align-items: center; background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 20px; padding: 26px; }
@media (min-width: 760px) { .equipo { grid-template-columns: 168px 1fr; padding: 34px; } }
.avatar { width: 136px; height: 136px; border-radius: 50%; background: var(--mint-tenue); color: var(--verde-texto); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 4px solid var(--blanco); box-shadow: 0 0 0 2px var(--gris-claro); }
.avatar svg { width: 72px; height: 72px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.equipo h2.nombre { font-size: 22px; color: var(--navy); font-weight: 700; letter-spacing: 0; }
.equipo .rol { color: var(--verde-texto); font-weight: 700; font-size: 14px; margin-top: 2px; }
.equipo p { color: var(--charcoal); margin-top: 10px; font-size: 15px; max-width: 60ch; }
.equipo ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; font-size: 14px; color: var(--charcoal); }
.equipo ul li { display: flex; gap: 8px; }
.equipo ul li::before { content: "✓"; color: var(--verde-texto); font-weight: 700; }

/* ── FAQ ── */
.faq { margin-top: 28px; display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 16px; padding: 0 20px; transition: box-shadow .2s ease, border-color .2s ease; }
.faq details[open] { border-color: rgba(0,99,56,.25); box-shadow: var(--sombra-1); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; color: var(--navy); font-size: 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--verde-texto); flex-shrink: 0; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--charcoal); font-size: 15px; padding: 0 0 18px; max-width: 70ch; }

/* ── Formulario ── */
.form-caja { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 28px; padding: 24px; margin-top: 32px; box-shadow: var(--sombra-2); max-width: 760px; }
@media (min-width: 720px) { .form-caja { padding: 34px; } }
.campos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .campos { grid-template-columns: 1fr 1fr; } }
label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
input, select {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--charcoal);
  min-height: 48px; padding: 11px 13px; border: 1.5px solid #cdd3df; border-radius: 10px;
  background: var(--blanco); transition: border-color .15s;
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23142142' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
input:focus, select:focus { outline: none; border-color: var(--verde-texto); box-shadow: 0 0 0 3px var(--mint-tenue); }
/* Trampa anti-bots: invisible para una persona, tentadora para un script. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { border-radius: 10px; padding: 13px 15px; font-size: 15px; margin-top: 18px; display: none; }
.aviso.ok { display: block; background: var(--mint-tenue); color: #075a40; border: 1px solid #a7e9cf; }
.aviso.error { display: block; background: #fdeceb; color: #a3231a; border: 1px solid #f5b8b3; }
.form-pie { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-pie small { color: var(--gris); font-size: 13px; }

/* ── Pie ── */
footer { background: var(--navy); color: #b7bdcd; padding: 64px 0 96px; font-size: 14px; }
@media (min-width: 900px) { footer { padding-bottom: 48px; } }
.footer-grilla { display: grid; gap: 26px; }
@media (min-width: 760px) { .footer-grilla { grid-template-columns: 1.3fr 1fr 1fr; } }
footer h3 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
footer ul { list-style: none; display: grid; gap: 8px; }
footer a { color: #dfe3ec; text-decoration: none; }
footer a:hover { color: var(--mint); text-decoration: underline; }
.pie-marca .marca { --iso: 30px; }
.footer-legal { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: #9aa3b8; }

/* ── WhatsApp flotante ── */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(20,33,66,.25);
  text-decoration: none;
}
.wa-flotante svg { width: 30px; height: 30px; }
@media (min-width: 900px) { .wa-flotante { display: none; } }

/* ============================================================
   Web pública multiservicio (home de Gumber)
   ============================================================ */

/* ============================================================
   La marca: isotipo en SVG + logotipo en Montserrat
   ============================================================

   Isotipo: viene de un sprite <svg> al principio de cada página y se pinta
   con `color` (el contenedor) y con la variable --m (la m de MANO). Las
   propiedades heredadas y las variables CSS son lo único que atraviesa el
   shadow tree que arma <use>, así que un selector tipo .iso-fondo{fill:…}
   no tendría efecto.

   Logotipo: texto, no imagen. El manual fija Montserrat para la marca, así
   que escribirlo es más fiel que un .webp — y además se lee nítido en
   cualquier tamaño, lo copia quien quiera y lo levanta un lector de
   pantalla.

   Proporciones del lockup horizontal, medidas sobre las láminas 03 y 08:
   en Gumber el logotipo mide 0,75 del alto del isotipo y se separa medio
   isotipo; en MANO mide 0,56 y se separa 0,37 — "MANO" va en versales con
   tracking, así que con la proporción de Gumber pesaría de más. Van en
   función de --iso para que cambiar un solo número mueva el conjunto. */

.marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--navy); }
.marca .iso { width: var(--iso); height: var(--iso); flex-shrink: 0; }
.marca .palabra { font-weight: 700; line-height: 1; white-space: nowrap; }

.marca-gumber { --iso: 32px; gap: calc(var(--iso) * .5); }
.marca-gumber .palabra { font-size: calc(var(--iso) * .75); letter-spacing: -.02em; }

.marca-mano { --iso: 32px; gap: calc(var(--iso) * .37); }
.marca-mano .palabra { font-size: calc(var(--iso) * .56); letter-spacing: .07em; }

/* El isotipo de Gumber es de un solo trazo: toma el color del texto. */
.marca-gumber .iso { color: inherit; }

/* El de MANO tiene dos piezas. Por defecto, la versión principal:
   contenedor mint, m navy. Nunca al revés sobre fondo claro. */
.marca-mano .iso { color: var(--mint); --m: var(--navy); }

/* Sobre navy (pie, sección del motor): el isotipo no se invierte —el mint
   sobre navy da 9,13:1— y lo que cambia es el logotipo, que va en blanco.
   Es la variante "Negativo sobre navy" de la lámina 08. */
.marca-negativa { color: var(--blanco); }

/* El aval. El manual lo pone bajo el logotipo de MANO: dice de quién es el
   producto sin obligar a repetir las dos marcas en el encabezado. */
.aval { display: block; margin-top: 7px; font-size: 13px; font-weight: 400; color: var(--gris); }
.aval b { font-weight: 700; }
.pie-marca .aval { color: #aeb6c8; }
.pie-marca .aval b { color: var(--blanco); }

/* El sprite no puede ir con display:none: así <use> deja de resolver. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Chip del servicio, al lado del logotipo en las páginas de producto. */
/* El encabezado de las páginas de producto lleva tres bloques, y con el
   chip del servicio y el link cruzado al otro producto no entra entero
   hasta ~1130px. Lo que se rompía entre 900 (donde aparece el nav) y esa
   medida: la marca era el único bloque que podía encogerse, así que se
   comprimía a 135px cuando su contenido mide 209 — el chip se salía de su
   caja y se montaba encima del primer link del nav ("DeCómo funciona").
   Y el CTA partía "Probalo gratis" en dos líneas dentro de una barra de
   64px, quedando un botón de 65px de alto.

   La marca y las acciones NO se comprimen: el nav es el único que cede, y
   lo hace soltando piezas en dos escalones, no encimándose. `min-width: 0`
   se va de acá — era lo que habilitaba el aplastado. */
.marca-bloque { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.chip-servicio {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde-texto); background: var(--mint-tenue);
  border: 1px solid rgba(0,99,56,.18); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
/* En un celular el chip se come el ancho del logotipo y el encabezado salta
   a tres filas. El nombre del servicio ya está en el título de la página. */
@media (max-width: 520px) { .chip-servicio { display: none; } }

/* ============================================================
   El home de Gumber (<body class="gumber">)

   El manual reparte los dos colores por rol: Gumber es la EMPRESA y su
   dominante es el navy; MANO es el PRODUCTO y su dominante es el mint. Por
   eso el chrome del home es navy (la portada, el motor) y el mint aparece
   donde se presenta MANO: el énfasis del título, el botón que lleva al
   producto, los íconos del motor y el panel de cierre.

   Las páginas de producto (/expensas, /delivery) no llevan esta clase.
   ============================================================ */

.gumber .sobre { color: var(--navy); background: #eef1f7; border-color: rgba(20,33,66,.1); }
.gumber nav.principal { gap: 26px; }
.gumber .header-acciones .boton-primario { background: var(--navy); color: #fff; box-shadow: none; }
.gumber .header-acciones .boton-primario:hover { background: var(--navy-claro); }
.gumber .pie-marca .marca { --iso: 34px; }

/* ── Portada: un panel navy dentro del contenedor ──
   El panel no va de borde a borde a propósito: con el encabezado blanco
   arriba y aire alrededor se lee como una pieza, no como una franja. */
.hero-portada { padding: 16px 0 8px; background: none; }
.hero-portada::before { display: none; }
@media (min-width: 720px) { .hero-portada { padding: 24px 0 8px; } }
.hero-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; padding: 40px 22px 32px; color: #fff;
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(0,224,150,.22) 0%, rgba(0,224,150,0) 65%),
    radial-gradient(45% 55% at 0% 100%, rgba(73,103,190,.35) 0%, rgba(73,103,190,0) 70%),
    linear-gradient(160deg, #1a2a55 0%, var(--navy) 55%, #0e1832 100%);
  box-shadow: var(--sombra-3);
}
/* Grilla fina sobre el navy, que se apaga hacia la esquina del texto. */
.hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 80% at 80% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 80% at 80% 30%, #000 0%, transparent 75%);
}
@media (min-width: 720px) { .hero-panel { padding: 64px 48px 56px; border-radius: 36px; } }
@media (min-width: 1000px) {
  .hero-panel .hero-grilla { grid-template-columns: 1.08fr .92fr; gap: 48px; }
  .hero-panel { padding: 72px 56px 64px; }
}
.hero-panel h1 { color: #fff; font-size: clamp(32px, 5.4vw, 54px); }
/* Mint sobre navy: 9,13:1. Es el único lugar del home donde el mint es texto. */
.hero-panel h1 em { color: var(--mint); white-space: nowrap; }
.hero-panel p.bajada { color: #c9d0e0; font-size: clamp(17px, 1.9vw, 19px); }
.hero-panel small { color: #aab3c9; }
.hero-panel .hero-acciones .boton-primario:hover { background: #2ff0ab; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  font-size: 13px; font-weight: 600; color: #e4e8f1;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  padding: 6px 14px 6px 10px; border-radius: 999px;
}
.etiqueta-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(0,224,150,.22); flex-shrink: 0; }

/* ── La vista del sistema ──
   Todo en HTML/CSS. Las dos tarjetas flotantes se montan sobre los bordes de
   la ventana; en un celular quedan apiladas debajo, sin superponerse. */
.mockup { position: relative; padding: 8px 0 0; }
.mockup-ventana {
  background: var(--blanco); color: var(--charcoal); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(4,10,28,.45), 0 0 0 1px rgba(255,255,255,.08);
  font-size: 13px;
}
.mockup-barra { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #f2f4f8; border-bottom: 1px solid var(--gris-claro); }
.mockup-puntos { display: inline-flex; gap: 6px; }
.mockup-puntos i { width: 10px; height: 10px; border-radius: 50%; background: #d3d8e3; }
.mockup-puntos i:first-child { background: var(--rojo); }
.mockup-puntos i:nth-child(2) { background: var(--naranja); }
.mockup-puntos i:nth-child(3) { background: var(--verde); }
.mockup-url { font-size: 12px; color: var(--gris); background: var(--blanco); border-radius: 8px; padding: 3px 12px; }
.mockup-cuerpo { padding: 18px 18px 14px; }
.mockup-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mockup-chico { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.mockup-titulo { display: block; margin-top: 2px; font-size: 17px; color: var(--navy); letter-spacing: -.01em; }
.mockup-badge { font-size: 12px; font-weight: 700; color: var(--verde-texto); background: var(--mint-tenue); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.mockup-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mockup-kpi { background: var(--fondo-suave); border-radius: 14px; padding: 12px 14px; }
.mockup-kpi b { display: block; margin-top: 2px; font-size: 24px; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; }
.mockup-sub { font-size: 12px; color: var(--gris); }
.mockup-barra-avance { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: #dfe4ed; overflow: hidden; }
.mockup-barra-avance i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-oscuro), var(--mint)); }
.mockup-lista { list-style: none; margin-top: 12px; display: grid; }
.mockup-lista li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--gris-claro); }
.mockup-lista b { display: block; color: var(--navy); font-size: 13px; }
/* `.hero small` le pone margen a todo <small> de la portada: acá no va. */
.mockup small { margin-top: 0; }
.mockup-lista li > span:nth-child(2) { min-width: 0; }
.mockup-lista small { display: block; color: var(--gris); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--navy); background: #eef1f7; }
.mockup-ico-pago { background: var(--mint); color: var(--navy); font-size: 15px; }
.mockup-monto { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.mockup-monto-entra { color: var(--verde-texto); }

.mockup-flota {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--blanco); color: var(--charcoal); border-radius: 16px; padding: 10px 14px 10px 10px;
  box-shadow: 0 18px 40px rgba(4,10,28,.35); font-size: 13px; width: max-content; max-width: 100%;
}
.mockup-flota b { display: block; color: var(--navy); font-size: 13px; }
.mockup-flota small { display: block; color: var(--gris); font-size: 11.5px; }
.mockup-check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--navy); font-weight: 800; flex-shrink: 0; }
.mockup-qr { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px; flex-shrink: 0; }
.mockup-qr i { background: var(--mint); border-radius: 2px; }
.mockup-qr i:nth-child(4) { background: transparent; border: 2px solid var(--mint); }
@media (min-width: 560px) {
  .mockup { padding: 34px 0 28px; }
  .mockup-flota { position: absolute; margin: 0; }
  .mockup-flota-pago { left: -18px; bottom: -12px; }
  .mockup-flota-qr { right: -14px; top: 0; }
}
/* Un vaivén lento en las tarjetas flotantes. Si el navegador no anima (o la
   persona pidió menos movimiento), quedan quietas en su lugar: nada depende
   de que la animación corra. */
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 560px) {
  .mockup-flota-pago { animation: flotar 6s ease-in-out infinite; }
  .mockup-flota-qr { animation: flotar 7s ease-in-out -2s infinite; }
}

/* ── El servicio: una tarjeta ancha en dos columnas ── */
.ramas { display: grid; gap: 20px; margin-top: 40px; }
.rama {
  position: relative; overflow: hidden; display: grid; gap: 24px;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(0,224,150,.14) 0%, rgba(0,224,150,0) 70%),
    var(--blanco);
  border: 1px solid var(--gris-claro); border-radius: 28px;
  padding: 28px 22px; text-decoration: none; color: inherit; box-shadow: var(--sombra-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 860px) { .rama { grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 44px; align-items: center; } }
.rama:hover, .rama:focus-visible { transform: translateY(-3px); border-color: rgba(0,224,150,.6); box-shadow: var(--sombra-3); }
.rama-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rama-marca { --iso: 40px; }
.rama .para { color: var(--verde-texto); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.rama h3 { font-size: clamp(26px, 3vw, 34px); color: var(--navy); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.rama p { color: var(--gris-bajada); margin-top: 12px; font-size: 17px; max-width: 48ch; }
.rama-pie { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--navy); background: var(--mint); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px; }
.rama-pie svg { width: 17px; height: 17px; transition: transform .15s ease; }
.rama:hover .rama-pie svg { transform: translateX(3px); }
.rama-lista { list-style: none; display: grid; gap: 12px; }
.rama-lista li { display: flex; gap: 14px; align-items: center; background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 16px; padding: 14px 16px; color: var(--navy); font-weight: 600; font-size: 15px; box-shadow: var(--sombra-1); }
.rama-li-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-tenue); color: var(--verde-texto); flex-shrink: 0; }
.rama-li-ico svg { width: 22px; height: 22px; }

/* ── El motor: grilla tipo bento sobre navy ── */
.motor {
  color: #fff;
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(0,224,150,.12) 0%, rgba(0,224,150,0) 70%),
    var(--navy);
}
.motor .sobre { color: var(--mint); background: rgba(0,224,150,.1); border-color: rgba(0,224,150,.28); }
.motor h2 { color: #fff; }
.motor p.intro { color: #c3cbdd; }
.motor .marca-mano { --iso: 44px; display: flex; width: max-content; margin-bottom: 22px; }
.piezas { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .piezas { grid-template-columns: repeat(2, 1fr); } }
/* En tres columnas, la 1ª, la 4ª y la 6ª ocupan dos: las filas quedan
   2+1, 1+2, 1+2 y no sobra ningún hueco. */
@media (min-width: 1000px) { .piezas { grid-template-columns: repeat(3, 1fr); } .pieza-ancha { grid-column: span 2; } }
.pieza {
  background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
  border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 26px;
  transition: border-color .2s ease, background-color .2s ease;
}
.pieza:hover { border-color: rgba(0,224,150,.4); }
.pieza-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(0,224,150,.12); color: var(--mint); margin-bottom: 18px; }
.pieza-ico svg { width: 23px; height: 23px; }
.pieza h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; }
.pieza p { color: #b9c2d6; font-size: 15px; max-width: 60ch; }

/* ── Cómo se empieza ── */
.pasos { list-style: none; display: grid; gap: 16px; margin-top: 40px; counter-reset: paso; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.paso { position: relative; background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra-1); }
.paso-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 18px; }
.paso h3 { font-size: 18px; color: var(--navy); font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.paso p { color: var(--gris); font-size: 15px; }
/* El hilo que une los pasos en escritorio. */
@media (min-width: 860px) {
  .paso:not(:last-child)::after {
    content: ""; position: absolute; top: 46px; right: -21px; width: 22px; height: 2px;
    background: repeating-linear-gradient(90deg, #c4cbd9 0 4px, transparent 4px 8px);
  }
}

/* ── Quiénes somos: título a la izquierda, valores a la derecha ── */
.empresa-grilla { display: grid; gap: 32px; }
@media (min-width: 960px) { .empresa-grilla { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; } .empresa-grilla .encabezado { position: sticky; top: 110px; } }
.valores { display: grid; gap: 14px; }
.valor { display: grid; grid-template-columns: 44px 1fr; gap: 16px; background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra-1); }
.valor-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #eef1f7; color: var(--navy); }
.valor-ico svg { width: 22px; height: 22px; }
.valor h3 { font-size: 17px; color: var(--navy); font-weight: 700; line-height: 1.3; }
.valor p { color: var(--gris); font-size: 15px; margin-top: 6px; }

/* ── Cierre: un panel mint con texto navy (9,13:1) ── */
.franja { padding-top: 0; }
.alterna + .franja { background: var(--fondo-suave); }
.franja-panel {
  border-radius: 28px; padding: 36px 24px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(120deg, var(--mint) 0%, #5cf0bb 100%);
  box-shadow: 0 20px 50px rgba(0,184,125,.25);
}
@media (min-width: 720px) { .franja-panel { padding: 48px 56px; } }
.franja-fila { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.franja h2 { max-width: 24ch; color: var(--navy); }
.franja-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.franja .boton-borde { background: rgba(255,255,255,.6); border-color: rgba(20,33,66,.25); }
.franja .boton-borde:hover { background: #fff; border-color: var(--navy); }

/* El enlace al otro servicio sale de esta página: se distingue del resto
   del menú, que son anclas dentro de la misma. */
nav.principal a.cruce { color: var(--verde-texto); opacity: 1; }
nav.principal a.cruce::after { content: ' ↗'; font-size: 12px; }

/* Delivery tiene un solo abono. Sin esto la tarjeta queda flotando en la
   primera de tres columnas, como si faltaran dos planes por cargar. */
.planes.uno { max-width: 430px; }
@media (min-width: 860px) { .planes.uno { grid-template-columns: 1fr; } }

/* Un ítem del menú no se parte en dos líneas: con `flex-wrap` heredado, uno
   solo que no entra manda TODO el encabezado a dos filas. */
nav.principal a { white-space: nowrap; }

/* ============================================================
   La página de MANO Expensas (<body class="expensas">)

   Es la página del PRODUCTO: el mint manda (botones, íconos, el chip del
   servicio) y el navy queda para los paneles de peso (migración, contacto).
   Todo va bajo `.expensas` para no tocar /delivery, que comparte la hoja.
   ============================================================ */

.expensas .hero { padding: 64px 0 88px; }
@media (min-width: 960px) { .expensas .hero { padding: 88px 0 120px; } .expensas .hero-grilla { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* El visor de la cámara arriba del comprobante: el gasto entra apuntando
   al QR, que es lo distinto del producto. Decorativo (aria-hidden). */
.demo-visor {
  position: relative; height: 168px; margin: -6px -6px 18px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 90% at 50% 40%, #24365f 0%, var(--navy) 70%);
  display: grid; place-items: center;
}
.visor-qr {
  width: 76px; height: 76px; padding: 8px; border-radius: 10px; background: #fff;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
}
.visor-qr i { background: var(--navy); border-radius: 2px; }
.visor-qr i:nth-child(2), .visor-qr i:nth-child(6), .visor-qr i:nth-child(8) { background: transparent; border: 3px solid var(--navy); }
.visor-qr i:nth-child(5) { background: var(--mint-oscuro); }
.visor-esq { position: absolute; width: 26px; height: 26px; border: 3px solid var(--mint); }
.visor-esq-1 { top: 26px; left: calc(50% - 64px); border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.visor-esq-2 { top: 26px; right: calc(50% - 64px); border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.visor-esq-3 { bottom: 34px; left: calc(50% - 64px); border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.visor-esq-4 { bottom: 34px; right: calc(50% - 64px); border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.visor-linea {
  position: absolute; left: calc(50% - 58px); width: 116px; height: 2px; top: 50%;
  background: var(--mint); box-shadow: 0 0 12px 2px rgba(0,224,150,.6);
}
/* La línea barre el QR; si no anima, queda quieta en el medio. */
@keyframes barrer { 0%, 100% { transform: translateY(-34px); } 50% { transform: translateY(26px); } }
.visor-linea { animation: barrer 3.2s ease-in-out infinite; }
.visor-pie { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; color: #c9d0e0; }

/* ── Beneficios: tres tarjetas que se montan sobre el final de la portada ── */
.expensas .beneficios { padding-top: 0; margin-top: -56px; position: relative; }
@media (min-width: 960px) { .expensas .beneficios { margin-top: -72px; } }
.tarjeta-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--mint-tenue); color: var(--verde-texto); margin-bottom: 16px; }
.tarjeta-ico svg { width: 22px; height: 22px; }
.expensas .beneficios .tarjeta { box-shadow: var(--sombra-2); }

/* ── Diferencias ── */
.expensas .dif article { transition: border-color .2s ease, box-shadow .2s ease; }
.expensas .dif article:hover { border-color: rgba(0,184,125,.45); box-shadow: var(--sombra-2); }
.expensas .dif .num { display: inline-block; margin-bottom: 6px; color: var(--verde-texto); background: var(--mint-tenue); border-radius: 999px; padding: 2px 9px; }

/* ── Normativa: país y provincia a la izquierda, Ciudad a la derecha ── */
.normativa-grilla { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 960px) {
  .normativa-grilla { grid-template-columns: 1fr 1.35fr; grid-template-rows: auto 1fr; grid-template-areas: "pais caba" "pba caba"; align-items: start; }
  .norma-pais { grid-area: pais; } .norma-caba { grid-area: caba; } .norma-pba { grid-area: pba; }
}
.normativa-grilla > .nuevo { margin-top: 0; display: block; }
.normativa-grilla > .nuevo > article { background: var(--blanco); border: 1px solid var(--gris-claro); border-left: 1px solid var(--gris-claro); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra-1); }
.normativa-grilla > .norma-caba > article {
  background: radial-gradient(80% 60% at 100% 0%, rgba(0,224,150,.14) 0%, rgba(0,224,150,0) 70%), var(--blanco);
  border-color: rgba(0,184,125,.4);
}
.normativa-grilla .lista-check { grid-template-columns: 1fr; }
.norma-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-tenue); color: var(--verde-texto); margin-bottom: 12px; }
.norma-ico svg { width: 21px; height: 21px; }
.expensas .destacado { border-radius: 28px; box-shadow: var(--sombra-1); }
@media (min-width: 720px) { .expensas .destacado { padding: 48px; } }

/* ── Funciones: tarjetas con ícono ── */
.expensas .funciones { gap: 14px; }
/* Siete funciones en tres columnas: la primera y la última ocupan dos, así
   las filas quedan 2+1, 1+1+1 y 1+2 y no sobra una tarjeta sola. */
@media (min-width: 1000px) {
  .expensas .funciones { grid-template-columns: repeat(3, 1fr); }
  .expensas .funciones li:first-child, .expensas .funciones li:last-child { grid-column: span 2; }
}
.expensas .funciones li {
  flex-direction: column; gap: 12px; border: 1px solid var(--gris-claro); border-radius: var(--radio);
  padding: 22px; background: var(--blanco); box-shadow: var(--sombra-1);
}
.expensas .funciones .punto { width: 40px; height: 40px; border-radius: 12px; margin: 0; display: grid; place-items: center; background: var(--mint-tenue); color: var(--verde-texto); }
.expensas .funciones .punto svg { width: 21px; height: 21px; }
.expensas .funciones li b { display: block; font-size: 16px; margin-bottom: 4px; }

/* ── Precios ── */
.expensas .plan { position: relative; }
.plan-etiqueta {
  position: absolute; top: -13px; left: 26px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--navy); background: var(--mint); border-radius: 999px; padding: 4px 12px;
}
.expensas .plan .precio .monto { font-size: 34px; }
.expensas .plan .boton { width: 100%; }
@media (min-width: 860px) { .expensas .plan.destacado-plan { transform: translateY(-8px); } }

/* ── Comparativa: el ✓ y el ✗ en círculos ── */
.expensas .comparativa .si, .expensas .comparativa .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; }
.expensas .comparativa .si { background: var(--mint-tenue); }
.expensas .comparativa .no { background: #fdeceb; }
.expensas .comparativa td.mano .si { background: var(--mint); color: var(--navy); }
.expensas .tabla-wrap { border-radius: var(--radio); box-shadow: var(--sombra-1); }

/* ── Preguntas y contacto: título a la izquierda, contenido a la derecha ── */
@media (min-width: 960px) {
  .expensas .columnas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
  .expensas .columnas > .encabezado { position: sticky; top: 110px; }
  .expensas .columnas .faq, .expensas .columnas .form-caja { margin-top: 0; max-width: none; }
}

/* El contacto va sobre navy: es el cierre de la página. */
.expensas #contacto {
  color: #fff;
  background: radial-gradient(50% 70% at 100% 0%, rgba(0,224,150,.16) 0%, rgba(0,224,150,0) 70%), var(--navy);
}
.expensas #contacto h2 { color: #fff; }
.expensas #contacto .encabezado p.intro { color: #c3cbdd; }
.expensas #contacto .sobre { color: var(--mint); background: rgba(0,224,150,.1); border-color: rgba(0,224,150,.28); }
.contacto-incluye { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.contacto-incluye li { display: flex; gap: 12px; align-items: flex-start; color: #dfe3ec; font-size: 15px; }
.contacto-incluye li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--navy); font-weight: 800; font-size: 13px; flex-shrink: 0; }
.expensas #contacto .form-caja { box-shadow: 0 30px 70px rgba(4,10,28,.4); }

/* Migración: un archivo que entra a MANO, del lado derecho del panel. */
.migracion-archivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.migracion-doc { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 9px 12px; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.migracion-doc svg { width: 22px; height: 22px; color: var(--mint); }
.migracion-flecha { color: var(--mint); font-size: 20px; font-weight: 700; }
.migracion-doc.mano-doc { background: var(--mint); color: var(--navy); border-color: var(--mint); }
.migracion-doc.mano-doc svg { color: var(--navy); }

/* Contacto y pie son navy los dos: el pie baja un tono para que no se
   lean como una sola franja. */
.expensas footer { background: #0e1730; border-top: 1px solid rgba(255,255,255,.06); }
.demo-cab span:last-child { white-space: nowrap; }