/* =====================================================================
   ECATEL Perú — hoja de estilos principal
   Orden: tokens · base · utilidades · cabecera · componentes ·
          páginas · pie · terceros
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --c-brand: #009bdb;
  --c-brand-dark: #0066cc;
  --c-ink: #333537;
  --c-ink-soft: #4a4d50;
  --c-panel: #dfe4e6;
  --c-panel-2: #eef2f3;
  --c-text: #444;
  --c-text-soft: #666;
  --c-heading: #333;
  --c-line: #d8d9de;
  --c-white: #fff;

  --ff-base: "Segoe UI", Verdana, Geneva, Tahoma, sans-serif;
  --ff-head: "Segoe UI", Verdana, Geneva, Tahoma, sans-serif;
  --ff-serif: Georgia, "Times New Roman", Times, serif;

  --maxw: 1120px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 6px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --header-h: 64px;
  --grad-brand: linear-gradient(var(--c-brand), var(--c-brand-dark));
}

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

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

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-white);
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: var(--c-brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--ff-head); color: var(--c-heading); line-height: 1.25; }

ul, ol { padding-left: 1.25rem; }

table { border-collapse: collapse; }

:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }

/* ---------- Utilidades ---------- */
.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 999;
  background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--panel { background: var(--c-panel); }
.section--tint { background: var(--c-panel-2); }

.section__title {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  margin: 0 0 1.5rem;
}
.page-title {
  color: #fff;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.prose { color: var(--c-text-soft); text-align: justify; }
.prose h2, .prose h3 { color: var(--c-heading); }
.btn-more { display: inline-block; margin-top: 0.5rem; font-weight: 700; color: var(--c-text-soft); }

/* Banda decorativa detrás de la cabecera (equivale a los "fondo*.jpg" del sitio antiguo) */
.page-hero {
    /* background-image: linear-gradient(rgba(20, 30, 45, 0.55), rgba(20, 30, 45, 0.55)), var(--page-bg, none); */
    background-repeat: no-repeat, repeat-x;
    background-position: center, top center;
    background-size: cover, auto;
    background-color: var(--c-heading);
    padding: 10px 0;
}
.page-hero .page-title { margin: 0; }

/* ---------- Cabecera / navegación ---------- */
.site-header { background: #fff; box-shadow: var(--shadow); position: relative; z-index: 20; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.6rem;
}
.site-header__logo img {
    width: clamp(150px, 40vw, 240px);
    height: auto;
}
.nav-toggle {
  --bar: #333;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--c-line);
  border-radius: var(--radius); background: #fff; cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--bar);
  transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -7px; }
.nav-toggle__bar::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

.nav { position: absolute; inset: 100% 0 auto 0; background: var(--grad-brand); display: none; }
.nav.is-open { display: block; }
.nav__list { list-style: none; margin: 0; padding: 0.5rem 0; }
.nav__item { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.nav__link {
  display: block; padding: 0.85rem 1.25rem; color: #eee; font-weight: 700;
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: #fff; text-decoration: none; background: rgba(0, 0, 0, 0.12); }

.sub-toggle {
  position: absolute; right: 0.5rem; top: 0.35rem;
  width: 40px; height: 40px; background: transparent; border: 0; cursor: pointer;
}
.sub-toggle::after {
  content: ""; display: block; margin: auto;
  width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); transition: transform 0.2s;
}
.sub-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }

.subnav { list-style: none; margin: 0; padding: 0; display: none; background: rgba(0, 0, 0, 0.15); }
.subnav.is-open { display: block; }
.subnav a { display: block; padding: 0.7rem 1.25rem 0.7rem 2rem; color: #eee; font-weight: 400; }
.subnav a:hover,
.subnav a[aria-current="page"] { color: #fff; text-decoration: none; }

/* ---------- Patrón: caja con proporción que contiene un swiper o imagen ---------- */
.ratio-box { position: relative; overflow: hidden; }
.ratio-box > img,
.ratio-box > .swiper {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.ratio-box .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero (portada) ---------- */
.hero { padding-top: clamp(1rem, 3vw, 1.75rem); }
.hero .ratio-box {
  width: 100%; height: clamp(200px, 34vw, 420px);
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--c-ink);
}
.hero .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero .swiper-pagination-bullet { background: #fff; opacity: 0.5; }
.hero .swiper-pagination-bullet-active { opacity: 1; }

/* ---------- Portada: columnas de servicios ---------- */
.feature-cols {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
.feature-col { text-align: center; }
.feature-col__media {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.feature-col__media > img,
.feature-col__media > .swiper { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-col__media > img { object-fit: cover; }
.feature-col__media .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.feature-col h3 { margin: 1rem 0 0.5rem; font-size: 1.15rem; color: var(--c-heading); }
.feature-col ul { text-align: left; color: var(--c-text-soft); }

/* ---------- Portada: bienvenida ---------- */
.welcome { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: start; }
.welcome__media img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Portada: clientes ---------- */
.clientes-strip { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: center; }
.clientes-strip > * { min-width: 0; }
.clientes-strip__label { font-weight: 700; color: var(--c-heading); font-size: 1.05rem; }
.clientes-slider { min-width: 0; width: 100%; overflow: hidden; }
.clientes-slider .swiper-wrapper { align-items: center; }
.clientes-slider .swiper-slide {
  display: flex; align-items: center; justify-content: center;
  height: 90px;
}
.clientes-slider .swiper-slide img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }

/* ---------- Tarjetas (misión/visión/historia, etc.) ---------- */
.card-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.card {
    background: #fff;
    overflow: hidden;
}
.card__head {
  background: var(--c-ink); color: #fff; padding: 0.6rem 1rem; font-size: 0.95rem; font-weight: 700;
}
.card__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.card__body { padding: 1rem; color: var(--c-text-soft); text-align: justify; }

.bio {
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--gap); box-shadow: var(--shadow); margin-bottom: var(--gap);
}
.bio__media img { border-radius: var(--radius); }
.bio h3 { margin-top: 0; color: var(--c-text-soft); font-size: 1.3rem; }
.bio p { color: var(--c-text-soft); text-align: justify; }

/* ---------- Servicios ---------- */
.servicio-item {
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
  padding-block: clamp(1.25rem, 4vw, 2rem);
  border-bottom: 1px solid var(--c-line);
}
.servicio-item:last-child { border-bottom: 0; }
.servicio-item__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.servicio-item h3 { margin: 0 0 0.5rem; color: var(--c-heading); font-size: 1.15rem; }
.servicio-item__body { color: var(--c-text-soft); text-align: justify; }

/* ---------- Ventas ---------- */
.ventas-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); margin-top: var(--gap); }
.ventas-grid figure { margin: 0; text-align: center; }
.ventas-grid img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ventas-grid figcaption { font-size: 0.8rem; color: var(--c-text-soft); margin-top: 0.5rem; }

/* ---------- Capacitaciones ---------- */
.cursos { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.curso {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--gap); box-shadow: var(--shadow); color: var(--c-text-soft);
}
.curso h3 { margin-top: 0; text-align: center; color: var(--c-heading); }
.curso__meta { font-weight: 700; color: var(--c-ink); }

.afiche { text-align: center; }
.afiche img { display: inline-block; border-radius: var(--radius); box-shadow: var(--shadow); max-height: 420px; width: auto; }

/* Calendario inline (reemplaza al datepicker de jQuery UI) */
.calendario {
  background: var(--c-ink); color: #cfcfcf; border-radius: var(--radius);
  padding: 1rem; max-width: 320px; font-size: 0.85rem;
}
.calendario__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.calendario__title { text-transform: uppercase; letter-spacing: 0.03em; color: #fff; font-weight: 700; }
.calendario__nav { background: transparent; border: 1px solid #555; color: #fff; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; }
.calendario table { width: 100%; text-align: center; }
.calendario th { padding: 6px 0; color: #9aa0a3; font-weight: 400; }
.calendario td { padding: 5px 0; }
.calendario td.is-today { background: var(--c-brand); color: #fff; border-radius: 4px; }
.calendario td.is-empty { color: transparent; }

/* ---------- Clientes (grilla) ---------- */
.logo-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.logo-grid figure {
  margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; padding: 1rem; aspect-ratio: 16 / 9;
}
.logo-grid img { max-height: 100%; width: auto; object-fit: contain; }

/* ---------- Fotos (galería) ---------- */
.galeria {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}
.galeria a {
  display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
}
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.galeria a:hover img { transform: scale(1.05); }

/* ---------- Contacto ---------- */
.mapas { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.mapas iframe { width: 100%; aspect-ratio: 3 / 2; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

.contacto-cols { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.contacto-info {
  background: var(--c-ink); color: #ddd; border-radius: var(--radius); padding: var(--gap);
}
.contacto-info img { margin-bottom: 1rem; }
.contacto-info a { color: #9ad4ff; }

.form {
  background: var(--c-panel); border-radius: var(--radius); padding: var(--gap);
}
.form__row { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
.form label { display: block; font-weight: 700; color: var(--c-heading); margin-bottom: 0.35rem; }
.form input,
.form textarea {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid #bcc3c4; border-radius: 4px;
  font: inherit; background: #fff;
}
.form textarea { min-height: 130px; resize: vertical; }
.form__actions { text-align: center; }
.btn {
  display: inline-block; padding: 0.7rem 1.6rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--grad-brand); color: #fff; font: inherit; font-weight: 700;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.form__note { margin-top: 1rem; font-size: 0.85rem; color: var(--c-text-soft); }
.form__status { margin-top: 1rem; font-weight: 700; color: var(--c-brand-dark); }

/* ---------- Buscador (equipos / personal) ---------- */
.buscador-form {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.buscador-form input[type="text"] {
  padding: 0.55rem 0.7rem; border: 1px solid #bcc3c4; border-radius: 4px; font: inherit; min-width: 220px;
}
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-datos { width: 100%; min-width: 720px; background: #fff; font-size: 0.85rem; }
.tabla-datos th,
.tabla-datos td { border: 1px solid var(--c-line); padding: 0.6rem 0.75rem; text-align: left; }
.tabla-datos thead th { background: var(--c-ink); color: #fff; }
.tabla-datos td[colspan] { text-align: center; color: var(--c-text-soft); }
.aviso {
  background: #fff8e1; border: 1px solid #f0d98c; border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-bottom: 1.5rem; font-size: 0.88rem; color: #6b5900;
}

/* ---------- Pie ---------- */
.site-footer { background: var(--c-ink); color: #ccc; }
.site-footer__grid {
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.site-footer__grid > * { min-width: 0; }
.site-footer__title { color: #fff; font-size: 1.1rem; margin: 0 0 0.75rem; }
.site-footer__links { font-size: 0.85rem; }
.site-footer__links a { white-space: nowrap; }
.site-footer__col p { font-size: 0.85rem; line-height: 1.7; text-align: justify; }
.site-footer__col a { color: #9ad4ff; }
.site-footer__slider .ratio-box { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.site-footer__slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.colophon { background: #2a2c2e; }
.colophon__inner {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding-block: 1.25rem; font-size: 0.78rem;
}
.colophon__iso { width: 70px; flex: none; }
.colophon__copy { margin: 0; line-height: 1.6; flex: 1 1 200px; }
.colophon__copy strong { color: #fff; }
.colophon__credit { margin: 0; }
.colophon__credit a { color: #ccc; }

/* =====================================================================
   Tablet
   ===================================================================== */
@media (min-width: 700px) {
  body { font-size: 16px; }

  .welcome { grid-template-columns: 240px 1fr; }
  .clientes-strip { grid-template-columns: auto 1fr; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .bio { grid-template-columns: 240px 1fr; align-items: center; }
  .servicio-item { grid-template-columns: 320px 1fr; align-items: center; }
  .servicio-item:nth-child(even) { grid-template-columns: 1fr 320px; }
  .servicio-item:nth-child(even) .servicio-item__media { order: 2; }
  .ventas-grid { grid-template-columns: repeat(5, 1fr); }
  .cursos { grid-template-columns: repeat(2, 1fr); }
  .mapas { grid-template-columns: 1fr 1fr; }
  .contacto-cols { grid-template-columns: 300px 1fr; }
  .form__row.form__row--2 { grid-template-columns: 1fr 220px; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .feature-cols { grid-template-columns: repeat(3, 1fr); }
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .colophon__inner { flex-wrap: nowrap; }
}

/* =====================================================================
   Escritorio — navegación horizontal con submenú
   ===================================================================== */
@media (min-width: 960px) {
  .nav-toggle { display: none; }

  .nav {
    position: static; display: block; background: transparent;
  }
  .nav__list {
    display: flex; justify-content: flex-end; flex-wrap: wrap;
    background: var(--grad-brand); border-radius: var(--radius); padding: 0;
    overflow: visible;
  }
  .nav__item { border-top: 0; }
  .nav__item + .nav__item { border-left: 1px solid rgba(0, 0, 0, 0.25); }
  .nav__link { padding: 0.9rem 1.1rem; font-size: 0.9rem; }

  .sub-toggle { display: none; }

  .subnav {
    position: absolute; top: 100%; left: 0; min-width: 190px;
    background: var(--grad-brand); border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg); display: none; z-index: 30;
  }
  .nav__item.has-sub:hover .subnav,
  .nav__item.has-sub:focus-within .subnav { display: block; }
  .subnav a { padding: 0.7rem 1.1rem; }

  .galeria { grid-template-columns: repeat(4, 1fr); }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   Preferencias del usuario
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   Integración WordPress
   ===================================================================== */
/* Contact Form 7 dentro de .form (página Contáctanos) */
.form .wpcf7 { margin: 0; }
.form .wpcf7-form p { margin: 0 0 1rem; }
.form .wpcf7-form label { display: block; font-weight: 700; color: var(--c-heading); margin-bottom: 0.35rem; }
.form .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.form .wpcf7-form textarea,
.form .wpcf7-form select {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid #bcc3c4; border-radius: 4px;
  font: inherit; background: #fff;
}
.form .wpcf7-form textarea { min-height: 130px; resize: vertical; }
.form .wpcf7-form input[type="submit"] {
  display: inline-block; padding: 0.7rem 1.6rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--grad-brand); color: #fff; font: inherit; font-weight: 700;
}
.form .wpcf7-form input[type="submit"]:hover { filter: brightness(1.05); }
.form .wpcf7 .wpcf7-response-output { margin: 1rem 0 0; border-radius: 4px; font-size: 0.9rem; }

/* Formulario de búsqueda por defecto de WordPress en la página 404 */
.error-404 .search-form,
.section .search-form { display: flex; gap: 0.5rem; }
.section .search-form .search-field {
  flex: 1; padding: 0.55rem 0.7rem; border: 1px solid #bcc3c4; border-radius: 4px; font: inherit;
}
.section .search-form .search-submit {
  padding: 0.55rem 1.1rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--grad-brand); color: #fff; font: inherit; font-weight: 700;
}

/* ---------- Nosotros: gerencias + valores ---------- */
.gerencias .card__body { text-align: left; }
.gerencias .gerencia__nombre {
  display: block; color: var(--c-heading); font-size: 1.05rem; font-weight: 700;
}
.gerencias .gerencia__cargo {
    display: block;
    color: var(--c-brand);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    margin: 0 0 0.6rem;
}
.gerencias .card__body p { margin: 0; }
.valores-block {
  display: grid; gap: var(--gap); align-items: start; grid-template-columns: 1fr;
}
.valores-block__media img {
  border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
@media (min-width: 700px) {
  .valores-block { grid-template-columns: 280px 1fr; }
}
.valores {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.valores li {
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 0.45rem 1rem; font-weight: 700; color: var(--c-heading);
  font-size: 0.9rem; box-shadow: var(--shadow);
}

/* ---------- Ventas: bloques de productos ---------- */
.ventas-grupo + .ventas-grupo { margin-top: 2.25rem; }
.ventas-grupo h3 { margin: 0 0 0.25rem; color: var(--c-heading); font-size: 1.1rem; }
.ventas-grupo__desc { margin: 0 0 1rem; color: var(--c-text-soft); }
.ventas-galeria {
  display: grid; gap: var(--gap); margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.ventas-galeria figure { margin: 0; }
.ventas-galeria img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.75rem;
}
.ventas-galeria--foto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 1.5rem; }
.ventas-galeria--foto img {
  aspect-ratio: 3 / 2; object-fit: cover; padding: 0; border: 0;
}

/* ---------- Lista de servicios / capacitaciones ---------- */
.lista-servicios {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 0.85rem 1.75rem; grid-template-columns: 1fr;
}
.lista-servicios li {
  position: relative; padding-left: 1.6rem; color: var(--c-text-soft);
}
.lista-servicios li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-right: 2px solid var(--c-brand);
  border-bottom: 2px solid var(--c-brand); transform: rotate(45deg);
}
@media (min-width: 700px) {
  .lista-servicios { grid-template-columns: 1fr 1fr; }
}