/* fdn.mx — sistema "pizarra": Archivo + IBM Plex Mono, verde FDN sobre papel.
   Mismo lenguaje que la lista de precios; este archivo es la única fuente de estilo. */
:root{
  --tinta:#141a15; --papel:#f2f4f0; --carta:#ffffff;
  --verde:#1b9e48; --verde-2:#158238; --bosque:#0c3b20;
  --linea:#e2e6e1; --gris:#68716a; --ambar:#8a6d1e; --rojo:#9d3b30;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{margin:0;background:var(--papel);color:var(--tinta);font:400 15.5px/1.6 "Archivo",system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{text-wrap:balance}

/* ── Masthead compacto ── */
.masthead{position:sticky;top:0;z-index:40;background:var(--carta);border-bottom:1px solid var(--linea)}
.masthead .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.masthead .logo img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{font-size:13.5px;font-weight:600;text-decoration:none;color:#3c433d;padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover{background:var(--papel);color:var(--bosque)}
.nav a.activo{color:var(--verde-2)}
.nav a.cta{background:var(--verde);color:#fff;margin-left:6px;padding:9px 14px}
.nav a.cta:hover{background:var(--verde-2)}
.menu-btn{display:none;margin-left:auto;border:1.5px solid var(--linea);background:var(--carta);border-radius:8px;padding:8px 10px;font:600 13px "Archivo";cursor:pointer}
#menu-toggle{display:none}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carta);border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;padding:8px 16px 14px;gap:2px;margin-left:0}
  .nav a{padding:11px 10px;font-size:15px}
  .nav a.cta{text-align:center;margin:8px 0 0}
  .nav .idioma{justify-content:center;margin:8px 0 0}
  #menu-toggle:checked ~ .nav{display:flex}
}

/* ── Hero con foto real ── */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--bosque)}
.hero .fondo{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .velo{position:absolute;inset:0;background:linear-gradient(75deg, rgba(7,32,17,.88) 0%, rgba(7,32,17,.62) 46%, rgba(7,32,17,.18) 100%)}
.hero .wrap{position:relative;padding-top:88px;padding-bottom:92px}
.eyebrow{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.22em;color:#8fd3a6;text-transform:uppercase;margin:0 0 14px}
.hero h1{font-weight:900;font-size:clamp(34px,5.2vw,56px);line-height:1.02;letter-spacing:-.015em;margin:0 0 16px;text-transform:uppercase;max-width:640px}
.hero p.lede{font-size:17px;line-height:1.55;color:#dcefe2;max-width:520px;margin:0 0 26px}
.botones{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;text-decoration:none;border-radius:9px;padding:13px 22px;transition:background .15s,border-color .15s}
.btn.solido{background:var(--verde);color:#fff}
.btn.solido:hover{background:var(--verde-2)}
.btn.borde{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn.borde:hover{border-color:#fff}
.btn.bosque{background:var(--bosque);color:#fff}
.btn.bosque:hover{background:#0f4527}

/* ── Franja de credibilidad ── */
.credibilidad{background:var(--carta);border-bottom:1px solid var(--linea)}
.credibilidad .wrap{display:grid;grid-template-columns:auto repeat(6,1fr);align-items:start;gap:16px;padding-top:16px;padding-bottom:16px}
.credibilidad img{height:56px;width:auto;justify-self:center;align-self:center}
.cred{padding-left:16px;padding-right:6px;border-left:1px solid var(--linea);align-self:start}
.cred strong{display:block;font-weight:800;color:var(--bosque);font-size:14.5px;line-height:1.25;letter-spacing:-.005em}
.cred span{display:block;font-size:12.5px;color:var(--gris);line-height:1.4;margin-top:3px}

/* ── Secciones ── */
section.bloque{padding:58px 0 8px}
.bloque h2{font-size:clamp(24px,3vw,32px);font-weight:900;letter-spacing:-.01em;margin:0 0 6px;text-transform:uppercase}
.bloque .sub{color:var(--gris);margin:0 0 30px;max-width:640px}
.bloque.oscuro{background:var(--bosque);color:#fff;padding-bottom:58px;margin-top:50px}
.bloque.oscuro .sub{color:#b8d8c3}

/* ── Tarjetas de materiales (foto) ── */
.materiales{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.materiales{grid-template-columns:1fr}}
.mat-card{position:relative;display:block;border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;min-height:340px;background:var(--bosque)}
.mat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mat-card:hover img{transform:scale(1.04)}
.mat-card .capa{position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,32,17,0) 30%, rgba(7,32,17,.9) 100%)}
.mat-card .texto{position:absolute;left:0;right:0;bottom:0;padding:20px 22px}
.mat-card h3{margin:0 0 6px;font-size:21px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.mat-card p{margin:0 0 10px;font-size:13.5px;color:#d5e9dc;line-height:1.5}
.mat-card .liga{font:600 12.5px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#8fd3a6;text-transform:uppercase}

/* ── Vista previa de precios ── */
.tabla-precios{background:var(--carta);color:var(--tinta);border-radius:14px;overflow:hidden;max-width:680px}
.tabla-precios .th{display:flex;align-items:baseline;justify-content:space-between;background:rgba(255,255,255,.08);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);padding:0}
.tabla-precios ul{list-style:none;margin:0;padding:8px 20px 14px}
.tabla-precios li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea)}
.tabla-precios li:last-child{border-bottom:none}
.tabla-precios .mat{font-size:14px;font-weight:600}
.tabla-precios .puntos{flex:1;border-bottom:2px dotted #d3d9d2;transform:translateY(-4px)}
.tabla-precios .precio{font:600 15px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-precios .precio small{font-weight:500;color:var(--gris);font-size:11px}
.precios-flex{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap}
.sello{display:inline-block;transform:rotate(-1.5deg);margin-bottom:16px}
.sello .caja{border:2px dashed rgba(255,255,255,.55);border-radius:8px;padding:11px 17px;font:600 12px/1.6 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.sello .caja strong{display:block;font-size:16px;letter-spacing:.03em;color:#fff}
.sello .caja span{color:#9fd8b3}

/* ── Servicios ── */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.servicios{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.servicios{grid-template-columns:1fr}}
.srv{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px;text-decoration:none;color:var(--tinta);display:block;transition:border-color .15s}
.srv:hover{border-color:var(--verde)}
.srv .icono{font-size:24px;margin-bottom:12px}
.srv h3{margin:0 0 8px;font-size:16px;font-weight:800}
.srv p{margin:0 0 12px;font-size:13.5px;color:var(--gris);line-height:1.55}
.srv .liga{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--verde-2);text-transform:uppercase}

/* ── Confianza / stats ── */
.confianza{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:18px}
.dato{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px}
.dato .num{font:600 30px/1 "IBM Plex Mono",monospace;color:var(--bosque);margin-bottom:8px}
.dato p{margin:0;font-size:14px;color:#3c433d;line-height:1.55}

/* ── Contacto ── */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.contacto-grid{grid-template-columns:1fr}}
.tarjeta-c{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px}
.tarjeta-c .rol{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 8px}
.tarjeta-c .dato-g{margin:0 0 4px;font-size:17px;font-weight:800}
.tarjeta-c p{margin:0 0 4px;font-size:14px;color:#3c433d}
.tarjeta-c .btn{margin-top:14px}
.wa-mini{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:#fff;text-decoration:none;font-weight:600;font-size:14px;border-radius:8px;padding:10px 16px}
.wa-mini:hover{background:var(--verde-2)}

/* ── WhatsApp flotante ── */
.wa-flotante{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:9px;background:var(--verde);color:#fff;text-decoration:none;font-weight:600;font-size:14px;border-radius:99px;padding:12px 18px;box-shadow:0 6px 22px rgba(12,59,32,.35)}
.wa-flotante:hover{background:var(--verde-2)}
.wa-flotante svg{flex:0 0 auto}

/* ── Footer ── */
footer{background:var(--bosque);color:#bcd9c6;font-size:13.5px;margin-top:60px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;padding-top:34px;padding-bottom:14px}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}
footer h4{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fd3a6}
footer p{margin:0 0 6px;line-height:1.6}
footer a{color:#d5e9dc;text-decoration:none}
footer a:hover{color:#fff}
footer .logo-f{height:40px;width:auto;margin-bottom:12px;background:#fff;border-radius:8px;padding:6px 10px}
footer .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:8px}
footer .legal .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:14px;padding-bottom:18px;font-size:12.5px;color:#9ec3ab}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

/* ── Carrusel del hero (3 fotos reales, crossfade CSS) ── */
.hero .fondo{opacity:0;animation:heroCiclo 48s infinite}
.hero .fondo.f1{animation-delay:0s}
.hero .fondo.f2{animation-delay:6s}
.hero .fondo.f3{animation-delay:12s}
.hero .fondo.f4{animation-delay:18s}
.hero .fondo.f5{animation-delay:24s}
.hero .fondo.f6{animation-delay:30s}
.hero .fondo.f7{animation-delay:36s}
.hero .fondo.f8{animation-delay:42s}
@keyframes heroCiclo{0%{opacity:0}2%{opacity:1}12.5%{opacity:1}16.5%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.hero .fondo{animation:none}.hero .fondo.f1{opacity:1}}

/* ── Proceso (rediseño de la infografía) ── */
.proceso{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1050px){.proceso{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.proceso{grid-template-columns:1fr 1fr}}
.paso{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:16px 16px 14px}
.paso .n{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font:600 14px "IBM Plex Mono",monospace;color:#fff;background:var(--verde);margin-bottom:10px}
.paso:nth-child(even) .n{background:var(--bosque)}
.paso p{margin:0;font-size:13px;line-height:1.45;color:#2e352f;font-weight:600}
.proceso-final{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.proceso-final .chip{display:inline-block;background:var(--verde);color:#fff;border-radius:99px;padding:10px 20px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.proceso-final span.igual{font:600 22px "IBM Plex Mono",monospace;color:var(--bosque)}

/* ── Metales especiales ── */
.especiales{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;background:var(--carta);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
@media (max-width:860px){.especiales{grid-template-columns:1fr}}
.especiales img{width:100%;height:100%;object-fit:cover;min-height:280px}
.especiales .contenido{padding:28px}
.especiales h3{margin:0 0 10px;font-size:22px;font-weight:900;text-transform:uppercase}
.especiales p{margin:0 0 16px;font-size:14.5px;color:#3c433d;line-height:1.6;max-width:48ch}
.etq-mat{display:inline-block;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;border:1.5px solid var(--linea);background:var(--papel);border-radius:6px;padding:6px 10px;margin:0 6px 8px 0;color:var(--bosque)}

/* ── Redes sociales ── */
.redes{display:flex;gap:10px;margin-top:12px}
.redes a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff}
.redes a:hover{background:var(--verde)}
.redes.claro a{background:var(--papel);color:var(--bosque);border:1px solid var(--linea)}
.redes.claro a:hover{background:var(--verde);color:#fff;border-color:var(--verde)}

/* ── Hero chico (páginas interiores) ── */
/* Interiores: UNA foto fija — el ciclo de desvanecido es solo del carrusel de portada
   (sin esto, la única foto se desvanecía y quedaba el fondo verde) */
.hero.chico .fondo{animation:none;opacity:1}
.hero.chico .wrap{padding-top:80px;padding-bottom:76px}
.hero.chico h1{font-size:clamp(28px,4.2vw,44px)}
.hero.chico p.lede{margin-bottom:0}
@media (max-width:640px){.hero.chico .wrap{padding-top:56px;padding-bottom:52px}}

/* ── Listas de materiales (interiores) ── */
.lista-mat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;list-style:none;margin:0 0 8px;padding:0}
@media (max-width:860px){.lista-mat{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lista-mat{grid-template-columns:1fr}}
.lista-mat li{background:var(--carta);border:1px solid var(--linea);border-radius:9px;padding:11px 14px;font-size:14px;font-weight:600;color:#2e352f}
.nota-lista{font-size:13.5px;color:var(--gris);margin:14px 0 0;max-width:70ch}

/* ── Detalle de servicio (foto + texto alternado) ── */
.srv-det{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;background:var(--carta);border:1px solid var(--linea);border-radius:14px;overflow:hidden;margin-bottom:26px;scroll-margin-top:76px}
@media (max-width:860px){.srv-det{grid-template-columns:1fr}}
.srv-det img{width:100%;height:100%;object-fit:cover;min-height:260px}
.srv-det .contenido{padding:26px}
.srv-det h3{margin:0 0 10px;font-size:20px;font-weight:900;text-transform:uppercase}
.srv-det p{margin:0 0 12px;font-size:14.5px;color:#3c433d;line-height:1.6}
.srv-det ul{margin:0 0 14px;padding-left:0;list-style:none}
.srv-det ul li{padding-left:18px;position:relative;margin:7px 0;font-size:14px;color:#2e352f}
.srv-det ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--verde)}
.srv-det.invertido .contenido{order:-1}
@media (max-width:860px){.srv-det.invertido .contenido{order:0}}

/* ── Sí / No recibimos ── */
.si-no{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.si-no{grid-template-columns:1fr}}
.caja-si,.caja-no{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px}
.caja-si h3{color:var(--verde-2);margin:0 0 12px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.caja-no h3{color:var(--rojo);margin:0 0 12px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.caja-si p,.caja-no p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#2e352f}
.caja-si p strong{color:var(--bosque)}

/* ── Galería ── */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.galeria{grid-template-columns:1fr}}
.galeria img{border-radius:12px;width:100%;height:240px;object-fit:cover}

/* ── Mapa ── */
.mapa{border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.mapa iframe{display:block;width:100%;height:380px;border:0}

/* ── Aviso legal ── */
.legalidad{max-width:76ch}
.legalidad h3{font-size:16px;font-weight:800;margin:26px 0 8px}
.legalidad p,.legalidad li{font-size:14.5px;line-height:1.7;color:#2e352f}

/* ── Certificaciones ── */
.certs{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.certs img{height:64px;width:auto;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:8px 12px}
.credibilidad img.cert-mini{height:52px;background:#fff;border-radius:8px;padding:4px 8px;border:1px solid var(--linea)}

/* ── Móvil (iPhone / Android) ── */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .masthead .logo img{height:38px}
  .hero .wrap{padding-top:52px;padding-bottom:56px}
  .hero h1{font-size:31px}
  .hero p.lede{font-size:15.5px}
  .botones .btn{width:100%;justify-content:center}
  /* En celular solo carga la primera foto del carrusel (ahorra ~450KB de datos) */
  .hero .fondo{display:none;animation:none}
  .hero .fondo.f1{display:block;opacity:1}
  .credibilidad .wrap{grid-template-columns:1fr 1fr;gap:12px 0}
  .credibilidad img{height:46px;grid-column:1 / -1;margin-bottom:2px}
  .cred{padding-left:14px;padding-right:8px;border-left-width:0}
  .cred:nth-of-type(odd){border-left-width:0;padding-left:0}
  .cred:nth-of-type(even){border-left-width:1px}
  .cred strong{font-size:13px}
  .cred span{font-size:11.5px}
  section.bloque{padding:42px 0 6px}
  .bloque.oscuro{padding-bottom:42px;margin-top:36px}
  .mat-card{min-height:260px}
  .proceso-final .btn{margin-left:0!important;width:100%;justify-content:center}
  .especiales .contenido,.srv-det .contenido{padding:20px}
  .galeria img{height:180px}
  .mapa iframe{height:300px}
  .tabla-precios li{padding:8px 0}
  .wa-flotante{padding:11px 15px;font-size:13.5px;right:14px;bottom:14px}
  footer .wrap{gap:20px}
}
/* Pantallas muy chicas */
@media (max-width:380px){
  .hero h1{font-size:27px}
  .certs img{height:52px}
}

/* ── Switcher de idioma ── */
.nav .idioma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  padding: 6px 13px 6px 9px;
  color: var(--bosque);
  margin-left: 6px;
}
.nav .idioma .bandera { display: block; border-radius: 2px; flex: 0 0 auto }
.nav .idioma:hover { border-color: var(--verde); color: var(--verde-2); background: #f4faf5 }

/* ── Formulario de contacto ── */
.forma { max-width: 720px; margin-top: 8px; }
.forma label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bosque);
  margin-bottom: 14px;
}
.forma .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.forma input, .forma textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 11px 12px;
  /* 16px mínimo: con menos, Safari de iPhone hace zoom al tocar el campo */
  font: 16px 'Archivo', sans-serif;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  /* Sin estilos nativos de iOS (esquinas/sombras raras en iPhone) */
  -webkit-appearance: none;
  appearance: none;
}
.forma input:focus, .forma textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(27, 158, 72, .15);
}
.forma button { margin-top: 4px; cursor: pointer; border: none; }
.forma-msg { font-size: 14px; font-weight: 600; margin-top: 12px; min-height: 20px; }
.forma-msg.ok { color: var(--verde-2); }
.forma-msg.error { color: #b3261e; }

@media (max-width: 640px) {
  .forma .campos { grid-template-columns: 1fr; }
}

/* ── Texto justificado en párrafos largos ── */
.bloque .sub, .srv-det .contenido p, .especiales .contenido p, .dato p,
.srv p, .mat-card p, .caja-si p, .caja-no p, .hero p.lede, footer p.lema,
.legalidad p, .legalidad li {
  text-align: justify;
}
/* Los rotulitos (eyebrow) llevan letter-spacing: justificarlos abre huecos feos */
p.eyebrow { text-align: left; hyphens: none }

/* ── Aviso de privacidad limpio ── */
.legalidad{max-width:78ch;margin:0 auto;background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:34px 38px 30px}
.legalidad h3{margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--linea);color:var(--bosque)}
.legalidad h3:first-child{margin-top:0}
.legalidad p{margin:0 0 12px}
.legalidad ul{margin:0 0 14px;padding-left:22px}
.legalidad li{margin-bottom:5px}
@media (max-width:640px){
  .legalidad{padding:20px 18px}
  .credibilidad .cred{min-width:0}
}

/* Tablet: franja de credibilidad en 2 columnas x 3 filas con sello a la izquierda */
@media (max-width:980px) and (min-width:641px){
  .credibilidad .wrap{grid-template-columns:auto 1fr 1fr;gap:14px 20px}
  .credibilidad img{grid-row:span 3}
}

/* ── Chips de categorías del catálogo (sección oscura de portada) ── */
.cat-lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; max-width: 760px }
.cat-lista span {
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #dcefe2;
  border-radius: 999px;
  padding: 8px 16px;
  font: 600 13px 'Archivo', sans-serif;
  letter-spacing: .02em;
}
@media (max-width: 640px) {
  .cat-lista { gap: 8px }
  .cat-lista span { padding: 7px 13px; font-size: 12px }
}