:root {
  --azul: #14392f;
  --azul-2: #0f7a63;
  --acento: #0b5d4b;
  --verde-wa: #1a8f4c;
  --texto: #1f2a25;
  --suave: #5a6a62;
  --borde: #dbe5df;
  --fondo: #ffffff;
  --fondo-2: #edf6f0;
  --oscuro: #2f3b34;
  --pendiente: #b42318;
  --radio: 12px;
  --ancho: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-2); }
h1, h2, h3 { line-height: 1.2; color: var(--azul); }
h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); margin: 0 0 .6rem; }
h2 { font-size: clamp(1.35rem, 3.5vw, 1.8rem); margin: 0 0 1rem; }

.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.seccion { padding: 40px 0; }
.seccion-gris { background: var(--fondo-2); }
.lead { font-size: 1.1rem; color: var(--suave); max-width: 46rem; }

/* Encabezado */
.header { border-bottom: 1px solid var(--borde); background: var(--fondo); position: sticky; top: 0; z-index: 10; }
.header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.marca { text-decoration: none; color: var(--azul); line-height: 1.1; }
.marca strong { display: block; font-size: 1.4rem; letter-spacing: .06em; }
.marca span { font-size: .7rem; color: var(--suave); letter-spacing: .03em; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.nav a { text-decoration: none; color: var(--texto); font-size: .95rem; padding: 4px 0; }
.nav a[aria-current="page"] { color: var(--azul-2); font-weight: 600; border-bottom: 2px solid var(--acento); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-2) 100%); color: #fff; padding: 48px 0; }
.hero h1 { color: #fff; }
.hero .lead { color: #dbe7f1; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid transparent; font-size: .95rem; text-align: center; }
.btn-primario { background: var(--acento); color: #1d1300; }
.btn-borde { border-color: #fff; color: #fff; }
.btn-wa { background: var(--verde-wa); color: #fff; width: 100%; }
.btn-wa.is-off { background: #c9d1da; color: #4a5563; cursor: not-allowed; }

/* Categorías */
.grid-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); text-decoration: none; color: var(--azul); font-weight: 600; }
.cat svg { width: 32px; height: 32px; stroke: var(--azul-2); }
.cat:hover { border-color: var(--azul-2); }

/* Tarjetas */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); overflow: hidden; }
.card[hidden] { display: none; }
.card-media { aspect-ratio: 4 / 3; background: var(--fondo-2); display: grid; place-items: center; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.card-media-vacia { color: var(--suave); font-size: .9rem; border: 2px dashed var(--borde); padding: 8px 14px; border-radius: 8px; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.card-cat { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.card-title { margin: 0; font-size: 1.1rem; }
.card-modelo, .card-desc { margin: 0; color: var(--suave); font-size: .92rem; }
.card-specs { margin: 4px 0; padding-left: 18px; font-size: .9rem; }
.card-precio { margin: auto 0 0; padding-top: 8px; font-size: 1.3rem; font-weight: 700; color: var(--azul); }
.tag-addi { margin: 0 0 8px; align-self: flex-start; font-size: .8rem; font-weight: 600; color: var(--azul); background: #fff4e3; border: 1px solid #f6d29e; padding: 2px 10px; border-radius: 999px; }
.is-pendiente .card-title, .is-pendiente .card-precio { color: var(--pendiente); }
.card-servicio .btn-wa { margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { font: inherit; font-size: .9rem; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }

.aviso { padding: 14px 16px; border-radius: var(--radio); background: #fff4e3; border: 1px solid #f6d29e; }

/* Espacio reservado para Addi (v2) */
.addi-slot { margin-top: 24px; padding: 16px; border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--fondo); font-size: .95rem; }
.addi-slot strong { color: var(--azul); }

/* Pasos */
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: 12px; }
.pasos li { counter-increment: paso; position: relative; padding: 14px 14px 14px 56px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.pasos li::before { content: counter(paso); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 700; }

/* Datos del comercio */
.datos { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin: 0; }
.datos div { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.datos div:last-child { border-bottom: 0; }
.datos dt { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.datos dd { margin: 2px 0 0; font-weight: 600; }

/* Legales */
.legal { max-width: 48rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal .fecha { color: var(--suave); font-size: .9rem; }
.pendiente { color: var(--pendiente); font-weight: 600; }

/* Pie */
.footer { background: var(--azul); color: #d6e2ec; padding: 32px 0 24px; font-size: .92rem; }
.footer a { color: #fff; }
.footer h2 { color: #fff; font-size: 1rem; margin: 0 0 8px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer p { margin: 0 0 4px; }
.footer .legal-nota { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); font-size: .82rem; }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid-cats { grid-template-columns: repeat(4, 1fr); }
  .datos { grid-template-columns: 1fr 1fr; }
  .datos div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .seccion { padding: 56px 0; }
  .hero { padding: 72px 0; }
}
.footer .pendiente { color: #ffb4a8; }

/* Ficha de producto estilo flyer */
:root { --ficha: #1f6455; --crema: #fdfbed; }
.card-cab { padding: 16px 16px 4px; text-align: center; background: var(--crema); }
.card-marca { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-2); }
.card-linea { margin: 4px 0 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #3d4650; }
.card-modelo-grande { margin: 2px 0 0; font-size: 1.45rem; font-weight: 800; color: #3d4650; }
.card-cab + .card-media { background: var(--crema); }
.card-cab + .card-media img { padding: 4px 16px 12px; }
.card-banda { background: var(--ficha); color: #fff; text-align: center; padding: 10px 12px; line-height: 1.2; }
.card-banda strong { display: block; font-size: 1.15rem; }
.card-banda span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.card-nombre { margin: 0; font-weight: 600; color: var(--azul); }
.card-detalles { border: 1px solid var(--borde); border-radius: 8px; font-size: .88rem; }
.card-detalles summary { cursor: pointer; padding: 8px 12px; font-weight: 600; color: var(--azul-2); }
.card-detalles ul { margin: 0; padding: 0 12px 10px 28px; }
.card-cab ~ .card-body .card-precio { align-self: stretch; text-align: center; background: var(--ficha); color: #fff; border-radius: 12px; padding: 10px; margin-top: auto; }
.card-precio small { display: block; font-size: .72rem; font-weight: 500; opacity: .85; }
.card-credito { margin: 0; padding: 4px 16px 0; font-size: .7rem; line-height: 1.3; background: var(--crema); text-align: center; }
.card-credito a { color: var(--suave); }
.aviso .btn-wa { margin-top: 10px; }
.aviso p { margin: 0; }


/* ---- Estilo inspirado en tiendas de tecnología: encabezado oscuro, hero grande, íconos ---- */
.header { background: #1b2520; border-bottom: 0; }
.marca { color: #fff; }
.marca span { color: #a9bdb2; }
.nav a { color: #e3ece7; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: #3cc99a; }

.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(60, 201, 154, .28), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 48px),
    linear-gradient(135deg, #16211c 0%, #1d3a31 60%, #0f4f40 100%);
  padding: 64px 0 72px;
}
.hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); max-width: 14ch; letter-spacing: -.01em; }
.hero .lead { color: #d3e2da; max-width: 40rem; }
.btn-primario { background: var(--acento); color: #fff; box-shadow: 0 8px 20px rgba(11, 93, 75, .35); }
.hero .btn-primario { font-size: 1.05rem; padding: 12px 26px; }
.btn-borde { border-color: rgba(255,255,255,.7); }
.cat svg { stroke: var(--azul-2); }

/* Servicios con ícono en círculo */
.icono-circulo { width: 52px; height: 52px; border-radius: 50%; background: var(--azul-2); display: grid; place-items: center; flex: none; }
.icono-circulo svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-servicio .card-body { gap: 8px; }
.card-servicio .card-title { text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; }
.grid-compacto .card-servicio { border: 0; background: transparent; }
.grid-compacto .card-servicio .card-body { padding: 8px 0; }

/* Franja "por qué comprar" */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--azul-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dos-col { display: grid; gap: 24px; }

/* Banda oscura con corte diagonal */
.banda-oscura { background: var(--oscuro); color: #dfe8e3; padding: 88px 0 56px; clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); margin-top: -1px; }
.banda-oscura h2 { color: #fff; max-width: 34rem; }
.banda-oscura p { max-width: 40rem; }
.banda-oscura .kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: #8fd9bd; margin: 0 0 8px; }
.banda-oscura .btn-wa { width: auto; }
.footer { background: #1b2520; }

@media (min-width: 640px) {
  .dos-col { grid-template-columns: 1fr 1fr; align-items: center; }
}


/* ---- Colores del logo MAPP ---- */
:root {
  --azul: #0d2c53;      /* azul marino del texto MAPP */
  --azul-2: #084fb1;    /* azul brillante de las barras */
  --acento: #084fb1;
  --gris-mapp: #565656; /* engranaje */
  --teal: #12a0a3;
  --naranja: #ee7015;
  --rojo: #c8251c;
  --amarillo: #eea301;
  --fondo-2: #eef3f9;
  --oscuro: #0d2c53;
  --borde: #dbe3ee;
  --texto: #1d2735;
  --suave: #5b6676;
  --ficha: #0d2c53;
}
.header { background: #fff; border-bottom: 3px solid var(--azul-2); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--azul); }
.marca img { width: 46px; height: auto; }
.marca-txt strong { display: block; font-size: 1.45rem; letter-spacing: .06em; color: var(--azul); }
.marca-txt span { display: block; font-size: .64rem; color: var(--gris-mapp); letter-spacing: .04em; font-weight: 600; }
.nav a { color: var(--azul); }
.nav a[aria-current="page"] { color: var(--azul-2); border-bottom-color: var(--naranja); }
.hero {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(8, 79, 177, .55), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 48px),
    linear-gradient(135deg, #071a33 0%, #0d2c53 55%, #0a3f86 100%);
}
.hero .kicker { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9cc3ff; }
.hero .lead { color: #d5e1f2; }
.btn-primario { background: var(--azul-2); box-shadow: 0 8px 20px rgba(8, 79, 177, .35); }
.hero .btn-primario { background: var(--naranja); box-shadow: 0 8px 20px rgba(238, 112, 21, .35); }
.banda-oscura .kicker { color: #9cc3ff; }
.footer { background: #071a33; }
.checks li::before { background-color: var(--azul-2); }

/* Franja de beneficios bajo el hero */
.beneficios { background: #fff; border-bottom: 1px solid var(--borde); }
.beneficios ul { list-style: none; margin: 0; padding: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.beneficios li { border-left: 3px solid var(--azul-2); padding-left: 10px; line-height: 1.3; }
.beneficios li:nth-child(2) { border-color: var(--teal); }
.beneficios li:nth-child(3) { border-color: var(--naranja); }
.beneficios li:nth-child(4) { border-color: var(--amarillo); }
.beneficios strong { display: block; font-size: .9rem; color: var(--azul); }
.beneficios span { font-size: .78rem; color: var(--suave); }
@media (min-width: 960px) { .beneficios ul { grid-template-columns: repeat(4, 1fr); } }

/* Íconos de servicios con los colores de cada área del logo */
.icono-circulo { background: var(--azul-2); }
.icono-circulo.c-seguridad-electronica { background: var(--azul); }
.icono-circulo.c-deteccion-incendios { background: var(--rojo); }
.icono-circulo.c-electricidad { background: var(--amarillo); }
.icono-circulo.c-mecanicos, .icono-circulo.c-metalmecanicos { background: var(--naranja); }
.icono-circulo.c-software { background: var(--azul-2); }
.icono-circulo.c-redes { background: var(--teal); }
.icono-circulo.c-soporte { background: var(--gris-mapp); }

.logo-grande { width: 180px; height: auto; margin-bottom: 16px; }


/* Medios de pago */
.sub { font-size: 1.05rem; margin: 20px 0 12px; color: var(--azul); }
.pago-grid { display: grid; gap: 14px; }
.pago-card { position: relative; border: 1px solid var(--borde); border-top: 5px solid var(--c); border-radius: var(--radio); padding: 18px 16px 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.pago-card h3 { margin: 0; font-size: 1.15rem; color: var(--c); }
.pago-card p { margin: 0; color: var(--suave); font-size: .92rem; flex: 1; }
.pago-badge { position: absolute; top: 12px; right: 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: #fff4e3; color: #8a4b00; border: 1px solid #f6d29e; padding: 2px 8px; border-radius: 999px; }
.btn-borde-azul { border-color: var(--c); color: var(--c); align-self: flex-start; min-height: 40px; padding: 8px 16px; }
.pago-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pago-chips li { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 14px; font-weight: 600; color: var(--azul); background: #fff; line-height: 1.2; }
.pago-chips small { display: block; font-weight: 500; font-size: .72rem; color: var(--suave); }
.pago-chips li.prox { color: var(--suave); border-style: dashed; }
.pie-pagos { margin: 20px 0 0; font-size: .85rem; }
@media (min-width: 640px) { .pago-grid { grid-template-columns: repeat(3, 1fr); } }
.header { top: env(safe-area-inset-top, 0px); }
.hero h1 { max-width: 20ch; }
.icono-circulo.c-ingenieria { background: var(--azul); }