/* =====================================================================
   Plantilla "moderna" - pagina publica
   =====================================================================
   Se carga ademas de main.css solo cuando PaginaInicio.plantilla = 'moderna'.
   Las licencias con plantilla 'clasica' no la reciben, asi que su pagina no
   cambia en nada.

   No hay colores de marca quemados aqui. Los cuatro tokens de abajo son solo
   valores de arranque: la vista los sobreescribe con lo que cada licencia tenga
   guardado en PaginaInicio (color_primario, color_acento, color_titulo y
   color_boton), asi que la misma hoja sirve para todas las licencias.
   ===================================================================== */

:root {
  /* Franjas oscuras y boton principal */
  --tpl-primario: #002160;
  /* Segunda linea del titular, iconos y enlaces */
  --tpl-acento: #1d4f9c;
  /* Titulares y cifras destacadas */
  --tpl-titulo: #12326f;
  /* Boton de conversion */
  --tpl-cta: #009b5a;

  /* La cabecera de esta plantilla es mas baja que la clasica (90px). Se
     redefine aqui, en :root, porque main.css la usa tanto para el alto del
     header como para el margen superior del contenido: si solo se cambiara en
     el header quedaria una franja blanca debajo. */
  --header-height: 76px;

  /* La plantilla base define su propio acento (#1acc8d, verde) y lo usa en
     enlaces, foco, hovers y botones. Se remapea a la paleta de la licencia para
     que no quede ni un verde suelto en medio del diseno. */
  --accent-color: var(--tpl-acento);
  --heading-color: var(--tpl-titulo);
  --nav-hover-color: var(--tpl-acento);
  --nav-dropdown-hover-color: var(--tpl-acento);

  /* Grises de la pagina. No son neutros puros: llevan una pizca del color
     principal, para que el fondo y los filetes acompanen a la marca en vez de
     tirar siempre a azul. La primera linea es el respaldo para navegadores
     que no entienden color-mix. */
  --tpl-page: #f2f6fc;
  --tpl-page: color-mix(in srgb, var(--tpl-primario) 4%, #fff);
  --tpl-border: #dde5f1;
  --tpl-border: color-mix(in srgb, var(--tpl-primario) 15%, #fff);
  --tpl-suave: #dfe9f6;
  --tpl-suave: color-mix(in srgb, var(--tpl-acento) 18%, #fff);
  --tpl-medio: #9fb4d8;
  --tpl-medio: color-mix(in srgb, var(--tpl-primario) 38%, #fff);
  --tpl-body: #5a6478;
  --tpl-muted: #8a94a8;
}

/* ---------------------------------------------------------------------
   Cabecera
   ---------------------------------------------------------------------
   Fondo blanco, menu a la derecha y el boton de ingreso en el color primario
   de la licencia. Se estila por la clase .header-tpl, asi que la cabecera de
   la plantilla clasica no se entera de nada de esto. */
.header-tpl {
  background: #fff;
  border-bottom: 1px solid var(--tpl-border);
  box-shadow: 0 1px 10px rgba(9, 30, 66, 0.05);
}

.header-tpl .logo img {
  max-height: 42px;
  width: auto;
}

.header-tpl .navmenu ul a,
.header-tpl .navmenu ul a:focus {
  color: var(--tpl-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  transition: color 0.25s ease;
}

.header-tpl .navmenu ul a:hover {
  color: var(--tpl-acento);
}

/* La pagina actual se marca con el color de acento y la linea inferior. Esa
   linea ya la dibuja main.css con un pseudo-elemento: aqui solo se le cambia el
   color y se le da el ancho del texto, en vez de agregar un segundo subrayado. */
.header-tpl .navmenu ul a.active,
.header-tpl .navmenu ul li:hover > a {
  color: var(--tpl-acento);
}

.header-tpl .navmenu > ul > li > a:before {
  background-color: var(--tpl-acento);
  bottom: -4px;
}

.header-tpl .navmenu a:hover:before,
.header-tpl .navmenu li:hover > a:before,
.header-tpl .navmenu .active:before {
  width: calc(100% - 28px);
}

.header-tpl .navmenu .dropdown ul {
  border-radius: 10px;
  border: 1px solid var(--tpl-border);
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.14);
  padding: 8px 0;
}

.header-tpl .navmenu .dropdown ul a {
  border-bottom: none;
  padding: 9px 18px;
  font-size: 13.5px;
  white-space: nowrap;
}

.header-tpl .navmenu .dropdown ul a:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--tpl-acento);
}

.header-tpl .navmenu .dropdown > a .bi-chevron-down {
  font-size: 11px;
  margin-left: 4px;
}

/* Boton de ingreso: hereda el color primario de la licencia */
.header-tpl .btn-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tpl-primario);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.header-tpl .btn-login:hover {
  color: #fff;
  filter: brightness(1.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.header-tpl .btn-login i {
  font-size: 16px;
}

.header-tpl .mobile-nav-toggle {
  color: var(--tpl-titulo);
}

/* ---------------------------------------------------------------------
   Ficha de servicio
   ---------------------------------------------------------------------
   Una sola hoja para las fichas de todos los servicios: encabezado con foto en
   diagonal, tarjetas con vinetas, mosaico de iconos y franja de cifras con el
   llamado a la accion. Lo que cambia entre un servicio y otro es el contenido
   que cargue la licencia, no el estilo. */
.ficha-tpl {
  background: #fbfcfe;
  /* main.css le da "padding: 60px 0" a todo <section>. Aqui se anula el de
     arriba, que dejaba una franja vacia entre la cabecera y las migas; el
     espacio lo reparten las piezas de adentro. */
  padding: 0 0 40px;
}

.ficha-tpl-crumb {
  padding: 12px 0 0;
  font-size: 11.5px;
  color: var(--tpl-muted);
}

.ficha-tpl-crumb a {
  color: var(--tpl-muted);
  text-decoration: none;
}

.ficha-tpl-crumb a:hover {
  color: var(--tpl-acento);
}

.ficha-tpl-crumb span {
  margin: 0 5px;
}

.ficha-tpl-crumb b {
  color: var(--tpl-acento);
  font-weight: 600;
}

.ficha-tpl-head {
  display: grid;
  /* La columna del texto se ajusta a lo que ocupa el titular, sin pasar del 46%
     del ancho; la foto se queda con lo que sobre. Asi la imagen se ensancha o se
     angosta segun el largo del titulo del servicio, sin proporciones fijas. */
  grid-template-columns: fit-content(46%) 1fr;
  align-items: stretch;
  gap: 26px;
  margin-top: 6px;
}

/* El texto se centra verticalmente contra la foto, en vez de quedar pegado
   arriba mientras la imagen ocupa todo el alto. */
.ficha-tpl-head .copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 0;
}

.ficha-tpl-head .kicker {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--tpl-titulo);
}

.ficha-tpl-head h1 {
  margin: 2px 0 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--tpl-titulo);
}

.ficha-tpl-head .lead {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 420px;
  color: var(--tpl-body);
}

.ficha-tpl-head .rule {
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--tpl-acento), var(--tpl-cta));
}

.ficha-tpl-head .foto {
  min-height: 210px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.ficha-tpl-head .foto-vacia {
  background: linear-gradient(135deg, var(--tpl-primario), var(--tpl-acento));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ficha-tpl-head .foto-vacia i {
  font-size: 54px;
  color: rgba(255, 255, 255, 0.5);
}

/* Tarjetas con vinetas */
.ficha-tpl-bloques {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 18px 0 0;
}

/* Las tarjetas de una misma fila terminan a la misma altura: la rejilla estira
   y la lista de vinetas se lleva el alto sobrante, asi el borde superior de las
   vinetas queda alineado entre tarjetas vecinas. */
.ficha-tpl .bloque {
  display: flex;
  flex-direction: column;
}

.ficha-tpl .bloque ul {
  margin-top: auto;
}

.ficha-tpl .bloque {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 33, 96, 0.06);
}

.ficha-tpl .bh {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.ficha-tpl .bh .ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.6px solid var(--tpl-acento);
  color: var(--tpl-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ficha-tpl .bh .ico i {
  font-size: 16px;
}

.ficha-tpl .bh .tt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.25;
}

/* La segunda linea del titulo va en el color de acento, como en el diseno */
.ficha-tpl .bh .tt span {
  display: block;
  color: var(--tpl-acento);
}

.ficha-tpl .bloque .bl {
  margin: 0 0 9px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tpl-body);
}

.ficha-tpl .bloque ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--tpl-border);
}

.ficha-tpl .bloque li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 10.5px;
  line-height: 1.4;
  margin-bottom: 5px;
  color: var(--tpl-body);
}

.ficha-tpl .bloque li i {
  font-size: 12px;
  color: var(--tpl-cta);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Mosaico de iconos */
.ficha-tpl-mosaico {
  background: var(--tpl-primario);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 20px;
}

.ficha-tpl-mosaico .h {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.ficha-tpl-mosaico .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 14px;
}

.ficha-tpl-mosaico .tile {
  text-align: center;
}

/* Cada equipo va en un circulo con anillo claro, como en el diseno: si el bloque
   tiene fotografia se ve la foto; si no, el icono sobre un fondo claro. */
.ficha-tpl-mosaico .foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 9px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* El equipo sin foto se tiñe con la marca, no con un azul fijo. El color plano
   de respaldo es para los navegadores que no entienden color-mix. */
.ficha-tpl-mosaico .foto.sin-foto {
  background: #eef3fb;
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--tpl-acento) 12%, #fff),
      color-mix(in srgb, var(--tpl-primario) 24%, #fff));
}

.ficha-tpl-mosaico .foto.sin-foto i {
  font-size: 26px;
  color: var(--tpl-primario);
}

.ficha-tpl-mosaico .tile .l {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

/* Proceso numerado
   Los pasos se reparten en una fila con flechas entre ellos; en pantallas
   angostas se apilan y las flechas desaparecen. */
.ficha-tpl-proceso {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 20px;
}

.ficha-tpl-proceso .h,
.ficha-tpl-chips .h,
.ficha-tpl-checks .h {
  font-size: 12px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.ficha-tpl-proceso .pasos {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

.ficha-tpl-proceso .paso {
  flex: 1 1 160px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ficha-tpl-proceso .n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tpl-acento);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ficha-tpl-proceso .t {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.25;
  margin-bottom: 3px;
}

.ficha-tpl-proceso .d {
  display: block;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--tpl-body);
}

.ficha-tpl-proceso .flecha {
  display: flex;
  align-items: center;
  color: var(--tpl-muted);
  font-size: 13px;
}

/* Columnas de vinetas */
.ficha-tpl-listas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.ficha-tpl-listas[data-items="1"] { grid-template-columns: 1fr; }
.ficha-tpl-listas[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.ficha-tpl-listas[data-items="4"] { grid-template-columns: repeat(4, 1fr); }

.ficha-tpl .lista {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 12px;
  padding: 16px 18px;
}

.ficha-tpl .lh {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.ficha-tpl .lh i {
  font-size: 17px;
  color: var(--tpl-acento);
}

.ficha-tpl .lh span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tpl-titulo);
  line-height: 1.3;
}

.ficha-tpl .lista ul {
  margin: 0;
  padding-left: 17px;
}

.ficha-tpl .lista li {
  font-size: 11.5px;
  line-height: 1.6;
  margin-bottom: 3px;
  color: var(--tpl-body);
}

/* Etiquetas */
.ficha-tpl-chips {
  background: var(--tpl-primario);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 20px;
}

.ficha-tpl-chips .h {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 13px;
}

.ficha-tpl-chips .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ficha-tpl-chips .chip {
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 500;
}

/* Ventajas con palomita */
.ficha-tpl-checks {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 20px;
}

.ficha-tpl-checks .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 18px;
}

.ficha-tpl-checks .ck {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tpl-body);
}

.ficha-tpl-checks .ck i {
  font-size: 14px;
  color: var(--tpl-cta);
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 767.98px) {
  .ficha-tpl-listas,
  .ficha-tpl-listas[data-items="2"],
  .ficha-tpl-listas[data-items="4"] {
    grid-template-columns: 1fr;
  }

  .ficha-tpl-proceso .flecha {
    display: none;
  }

  .ficha-tpl-proceso .paso {
    flex: 1 1 100%;
  }
}

/* Franja de cifras y llamado a la accion */
.ficha-tpl-banda {
  background: var(--tpl-primario);
  border-radius: 14px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  overflow: hidden;
}

.ficha-tpl-banda.sin-cta {
  grid-template-columns: 1fr;
}

.ficha-tpl-banda .cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px 8px 20px 20px;
}

.ficha-tpl-banda .cifras[data-items="1"] { grid-template-columns: 1fr; }
.ficha-tpl-banda .cifras[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.ficha-tpl-banda .cifras[data-items="3"] { grid-template-columns: repeat(3, 1fr); }

.ficha-tpl-banda .cifra {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.ficha-tpl-banda .cifra:last-child {
  border-right: none;
}

.ficha-tpl-banda .cifra i {
  font-size: 23px;
  color: #fff;
  opacity: 0.9;
}

.ficha-tpl-banda .cifra .v {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.ficha-tpl-banda .cifra .l {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 3px;
  line-height: 1.25;
}

.ficha-tpl-banda .cta {
  padding: 20px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.ficha-tpl-banda .cta h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}

.ficha-tpl-banda .cta p {
  margin: 7px 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tpl-cta);
  filter: brightness(1.5);
}

.ficha-tpl .tpl-btn-cta .circ {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--tpl-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.ficha-tpl-vacia {
  background: #fff;
  border: 1px dashed var(--tpl-border);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--tpl-muted);
  margin-top: 24px;
}

@media (max-width: 1199.98px) {
  .ficha-tpl-bloques {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991.98px) {
  .ficha-tpl-head {
    grid-template-columns: 1fr;
  }

  .ficha-tpl-head .copy {
    padding: 10px 0 18px;
  }

  .ficha-tpl-head .foto {
    -webkit-clip-path: none;
    clip-path: none;
    order: -1;
  }

  .ficha-tpl-bloques {
    grid-template-columns: repeat(2, 1fr);
  }

  .ficha-tpl-banda,
  .ficha-tpl-banda .cifras {
    grid-template-columns: 1fr;
  }

  .ficha-tpl-banda .cifras {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 0;
  }

  .ficha-tpl-banda .cta {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}

@media (max-width: 575.98px) {
  .ficha-tpl-bloques,
  .ficha-tpl-banda .cifras {
    grid-template-columns: 1fr;
  }

  .ficha-tpl-banda .cifra {
    border-right: none;
  }
}

/* ---------------------------------------------------------------------
   Conoce nuestros servicios
   ---------------------------------------------------------------------
   Rejilla de tarjetas con foto a sangre, insignia con anillo blanco montada
   sobre el borde de la foto, y una reticula hexagonal de fondo que se
   desvanece hacia abajo. */
.services-tpl {
  background: var(--tpl-page);
  padding: 44px 0 48px;
  position: relative;
  overflow: hidden;
}

.services-tpl .container {
  position: relative;
  z-index: 1;
}

.services-tpl-head .kick {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--tpl-acento);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.services-tpl-head .kick i {
  width: 38px;
  height: 2px;
  background: var(--tpl-medio);
  display: inline-block;
}

.services-tpl-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--tpl-titulo);
}

.services-tpl-head h2 span {
  color: var(--tpl-acento);
}

.services-tpl-head .lead {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 640px;
  color: var(--tpl-body);
}

.services-tpl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 26px;
}

/* La rejilla se acomoda a cuantos servicios publique la licencia */
.services-tpl-grid[data-items="1"] { grid-template-columns: repeat(2, 1fr); }
.services-tpl-grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.services-tpl-grid[data-items="3"] { grid-template-columns: repeat(3, 1fr); }
.services-tpl-grid[data-items="4"] { grid-template-columns: repeat(4, 1fr); }
.services-tpl-grid[data-items="6"] { grid-template-columns: repeat(3, 1fr); }
.services-tpl-grid[data-items="7"] { grid-template-columns: repeat(4, 1fr); }
.services-tpl-grid[data-items="8"] { grid-template-columns: repeat(4, 1fr); }
.services-tpl-grid[data-items="9"] { grid-template-columns: repeat(3, 1fr); }

.services-tpl .sc {
  background: #fff;
  border-radius: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 18px rgba(9, 30, 66, 0.09);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.services-tpl .sc:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(9, 30, 66, 0.16);
}

/* Foto a sangre: ocupa todo el ancho de la tarjeta, sin margen interior */
.services-tpl .sc-photo {
  height: 110px;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
  background-size: cover;
  background-position: center;
}

.services-tpl .sc-photo-vacia {
  background: linear-gradient(135deg, var(--tpl-primario), var(--tpl-acento));
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-tpl .sc-photo-vacia i {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.65);
}

/* Insignia con anillo blanco, a caballo sobre el borde inferior de la foto */
.services-tpl .sc-badge {
  position: absolute;
  left: 17px;
  top: 110px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tpl-primario);
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.services-tpl .sc-badge i {
  font-size: 16px;
  color: #fff;
}

.services-tpl .sc-body {
  padding: 26px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.services-tpl .sc h3 {
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--tpl-titulo);
}

/* El numero va en el mismo tono del titulo, no en el color de acento */
.services-tpl .sc h3 span {
  color: var(--tpl-titulo);
}

.services-tpl .sc p {
  margin: 0 0 11px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--tpl-body);
}

.services-tpl .sc-more {
  /* Anclado al fondo: con textos de distinto largo los enlaces quedan a la
     misma altura en toda la fila. */
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tpl-acento);
  text-decoration: none;
}

.services-tpl .sc-more svg {
  width: 26px;
  height: 11px;
}

@media (max-width: 1199.98px) {
  .services-tpl-grid,
  .services-tpl-grid[data-items="7"],
  .services-tpl-grid[data-items="8"],
  .services-tpl-grid[data-items="9"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767.98px) {
  .services-tpl-grid,
  .services-tpl-grid[data-items="3"],
  .services-tpl-grid[data-items="4"],
  .services-tpl-grid[data-items="6"],
  .services-tpl-grid[data-items="7"],
  .services-tpl-grid[data-items="8"],
  .services-tpl-grid[data-items="9"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479.98px) {
  .services-tpl-grid,
  .services-tpl-grid[data-items="2"],
  .services-tpl-grid[data-items="3"],
  .services-tpl-grid[data-items="4"] {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Quienes somos
   ---------------------------------------------------------------------
   Fondo en el color primario de la licencia, con el contenido en tarjetas
   blancas encima. */
/* El fondo lo pone el sistema de secciones (fondo-1 / fondo-2), no la seccion:
   antes se lo imponia a si misma y quedaba oscura mientras las demas seguian
   la paleta. */
.about-tpl {
  padding: 46px 0 40px;
}

.about-tpl-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}

.about-tpl-photo {
  position: relative;
  padding: 20px;
}

.about-tpl-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  /* El recorte redondeado de la esquina superior derecha es el gesto que
     distingue esta seccion; se mantiene en todos los tamanos. */
  border-radius: 18px 90px 18px 18px;
}

/* Tarjeta destacada sobre la foto: sale del campo "Contamos con" */
.about-tpl-badge {
  position: absolute;
  left: 34px;
  right: 52px;
  bottom: 34px;
  background: var(--tpl-primario);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.about-tpl-badge i {
  font-size: 20px;
  color: var(--tpl-cta);
  line-height: 1.2;
}

.about-tpl-badge .t {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.about-tpl-badge .d {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.about-tpl-copy {
  padding: 30px 34px 26px 10px;
}

.about-tpl-copy h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--tpl-titulo);
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}

.about-tpl-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--tpl-body);
}

.about-tpl-text p {
  margin: 0 0 11px;
}

.about-tpl-seals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tpl-border);
}

.about-tpl-seals .seal {
  display: flex;
  gap: 8px;
  align-items: center;
  border-right: 1px solid var(--tpl-border);
  padding-right: 8px;
}

.about-tpl-seals .seal:last-child {
  border-right: none;
}

.about-tpl-seals .seal i {
  font-size: 19px;
  color: var(--tpl-acento);
}

.about-tpl-seals .l1 {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.about-tpl-seals .l2 {
  display: block;
  font-size: 10.5px;
  color: var(--tpl-muted);
  line-height: 1.2;
}

/* Mision y vision, al mismo nivel */
.about-tpl-mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.about-tpl-mv .mv {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.about-tpl-mv .mv-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.about-tpl-mv .mv-h i {
  font-size: 18px;
  color: var(--tpl-acento);
}

.about-tpl-mv .mv-h span {
  font-size: 13px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.about-tpl-mv p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--tpl-body);
}

/* Panel de servicios */
.about-tpl-services {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 20px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.about-tpl-services h3 {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tpl-titulo);
  margin: 0 0 18px;
}

.about-tpl-services .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* Con menos de seis servicios el panel reparte el ancho que haya */
.about-tpl-services .grid[data-items="1"] { grid-template-columns: 1fr; }
.about-tpl-services .grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.about-tpl-services .grid[data-items="3"] { grid-template-columns: repeat(3, 1fr); }
.about-tpl-services .grid[data-items="4"] { grid-template-columns: repeat(4, 1fr); }
.about-tpl-services .grid[data-items="5"] { grid-template-columns: repeat(5, 1fr); }

.about-tpl-services .item {
  border-right: 1px solid var(--tpl-border);
  padding-right: 12px;
  text-decoration: none;
  display: block;
}

.about-tpl-services .item:last-child {
  border-right: none;
}

.about-tpl-services .item i {
  font-size: 21px;
  color: var(--tpl-acento);
  display: block;
  margin-bottom: 7px;
}

.about-tpl-services .item .t {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.about-tpl-services .item .d {
  display: block;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--tpl-body);
}

.about-tpl-services .item:hover .t {
  color: var(--tpl-acento);
}

/* Desplazamiento continuo del panel de servicios
   ---------------------------------------------------------------------
   Aparece solo cuando hay mas servicios de los que caben. La lista va dos veces
   en el HTML y la animacion recorre justo la mitad del carril, asi que al
   terminar el segundo juego queda donde arranco el primero: el bucle no tiene
   salto ni salto de vuelta atras. */
.about-tpl-marquee {
  position: relative;
  overflow: hidden;
  /* Los bordes se difuminan para que las tarjetas no aparezcan y desaparezcan
     de golpe contra el filo del panel. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.about-tpl-marquee .track {
  display: flex;
  width: max-content;
  animation-name: tplMarquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* La duracion la pone la vista segun cuantos servicios haya */
}

.about-tpl-marquee:hover .track {
  animation-play-state: paused;
}

.about-tpl-marquee .item {
  width: 230px;
  flex: 0 0 230px;
  border-right: 1px solid var(--tpl-border);
  padding-right: 14px;
  margin-right: 14px;
}

@keyframes tplMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Quien prefiera menos movimiento ve la lista quieta */
@media (prefers-reduced-motion: reduce) {
  .about-tpl-marquee .track {
    animation: none;
  }
}

/* Franja "a quienes acompanamos": cierra la seccion sobre el fondo oscuro */
.about-tpl-who {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 22px 4px 0;
  color: #fff;
}

.about-tpl-who i {
  font-size: 21px;
  color: var(--tpl-cta);
  line-height: 1.3;
}

.about-tpl-who .t {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.about-tpl-who .d {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 991.98px) {
  .about-tpl-card {
    grid-template-columns: 1fr;
  }

  .about-tpl-copy {
    padding: 4px 22px 24px;
  }

  .about-tpl-seals,
  .about-tpl-mv,
  .about-tpl-services .grid,
  .about-tpl-services .grid[data-items="4"],
  .about-tpl-services .grid[data-items="5"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-tpl-seals .seal:nth-child(2n),
  .about-tpl-services .item:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 575.98px) {
  .about-tpl-seals,
  .about-tpl-mv,
  .about-tpl-services .grid,
  .about-tpl-services .grid[data-items="4"],
  .about-tpl-services .grid[data-items="5"] {
    grid-template-columns: 1fr;
  }

  .about-tpl-seals .seal,
  .about-tpl-services .item {
    border-right: none;
  }

  .about-tpl-badge {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
}

/* ---------------------------------------------------------------------
   Banner principal
   --------------------------------------------------------------------- */
.hero-tpl {
  background: linear-gradient(105deg, #f7fafd 0%, #eef4fb 46%, #dfe9f6 100%);
  background: linear-gradient(105deg,
      color-mix(in srgb, var(--tpl-acento) 3%, #fff) 0%,
      color-mix(in srgb, var(--tpl-acento) 8%, #fff) 46%,
      color-mix(in srgb, var(--tpl-acento) 17%, #fff) 100%);
  position: relative;
  overflow: hidden;
  /* main.css solo le da margen superior al contenido en contacto, servicios y
     productos: en el home el <main> arranca en cero y la cabecera fija se monta
     encima. Por eso el banner reserva el alto de la cabecera aqui. */
  padding: var(--header-height) 0 0;
}

.hero-tpl .hero-slide {
  display: grid;
  /* El texto se queda con el ancho que necesita —con un tope, porque una linea
     larguisima no se lee— y la foto o el video ocupan todo lo que sobra. En
     pantallas anchas eso da mucho mas sitio a la imagen que un reparto fijo. */
  grid-template-columns: clamp(560px, 46vw, 700px) 1fr;
  min-height: 480px;
}

.hero-tpl .hero-copy {
  padding: 48px 20px 168px 6vw;
  position: relative;
  z-index: 2;
}

.hero-tpl h1 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: -0.4px;
  color: var(--tpl-titulo);
}

/* La parte resaltada del titular va en su propia linea y en el color de acento */
.hero-tpl h1 .hero-ac {
  display: block;
  color: var(--tpl-acento);
}

.hero-tpl .hero-rule {
  display: block;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--tpl-acento);
  margin: 16px 0 18px;
}

.hero-tpl .hero-lead {
  font-size: 15px;
  line-height: 1.65;
  max-width: 440px;
  color: var(--tpl-body);
  margin: 0 0 24px;
}

/* Sellos de confianza: columnas separadas por una linea fina */
.hero-tpl .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.hero-tpl .hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--tpl-border);
}

.hero-tpl .hero-trust-item:last-child {
  border-right: none;
  padding-right: 0;
}

.hero-tpl .hero-trust-item i {
  font-size: 20px;
  color: var(--tpl-acento);
  line-height: 1;
}

.hero-tpl .hero-trust-item .l1 {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.hero-tpl .hero-trust-item .l2 {
  display: block;
  font-size: 11px;
  color: var(--tpl-muted);
  line-height: 1.2;
}

/* Botones del banner */
.hero-tpl .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-tpl .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.25s ease;
}

.hero-tpl .hero-btn-solid {
  background: var(--tpl-primario);
  color: #fff;
}

.hero-tpl .hero-btn-solid:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.hero-tpl .hero-btn-ghost {
  background: transparent;
  border-color: var(--tpl-primario);
  color: var(--tpl-primario);
}

.hero-tpl .hero-btn-ghost:hover {
  background: var(--tpl-primario);
  color: #fff;
  transform: translateY(-1px);
}

/* La foto entra en diagonal desde la derecha. La cuña se mide en píxeles y no
   en porcentaje: así la inclinación es la misma en cualquier pantalla y no se
   come un trozo cada vez más grande de la imagen cuanto más ancho el monitor. */
.hero-tpl .hero-photo {
  background-size: cover;
  background-position: center;
  overflow: hidden;
  -webkit-clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%);
}

/* Cuando el fondo es un video ocupa el mismo hueco que la foto y se recorta
   igual, para que el banner se vea idéntico con una u otro. */
/* Diapositiva sin foto ni video: en vez de un hueco vacío se pinta con los
   colores que la licencia tenga guardados, igual que el resto de la página. */
.hero-tpl .hero-vacia {
  background: linear-gradient(135deg, var(--tpl-primario), var(--tpl-acento));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-tpl .hero-vacia i {
  font-size: 54px;
  color: rgba(255, 255, 255, 0.45);
}

.hero-tpl .hero-video {
  position: relative;
  overflow: hidden;
  /* Sirve de referencia de medida para el reproductor de abajo */
  container-type: size;
}

.hero-tpl .hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El reproductor de YouTube o Vimeo siempre es 16:9, así que se le deja crecer
   lo justo para tapar el hueco —nunca más— y se centra: se recorta el sobrante
   en vez de dejar franjas negras. Las dos medidas mínimas más la proporción
   dan el tamaño exacto, sin depender del ancho de la ventana.
   No recibe pulsaciones porque es un fondo, no un video para ver. */
.hero-tpl .hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;

  /* Si el navegador no entiende las medidas del contenedor (cq*), el video
     llena el hueco y a lo sumo deja franjas: nunca se desborda. */
  width: 100%;
  height: 100%;

  /* Crece lo justo para tapar el hueco: se toma la mayor entre el ancho del
     hueco y el que exige su altura en 16:9. El sobrante se recorta. */
  width: max(100cqw, 177.7778cqh);
  height: max(100cqh, 56.25cqw);
}

/* ---------------------------------------------------------------------
   Franja de servicios destacados
   --------------------------------------------------------------------- */
.hero-tpl .hero-band {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 42px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--tpl-primario);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* Con menos de cuatro destacados la franja reparte el ancho que haya, para que
   no queden columnas vacias. */
.hero-tpl .hero-band[data-items="1"] { grid-template-columns: 1fr; }
.hero-tpl .hero-band[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.hero-tpl .hero-band[data-items="3"] { grid-template-columns: repeat(3, 1fr); }

.hero-tpl .hero-band-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: background 0.25s ease;
}

.hero-tpl .hero-band-item:last-child {
  border-right: none;
}

.hero-tpl .hero-band-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.hero-tpl .hero-band-item i {
  font-size: 26px;
  color: #fff;
  opacity: 0.95;
  line-height: 1;
}

.hero-tpl .hero-band-item .t {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.hero-tpl .hero-band-item .d {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

/* Puntos del carrusel, debajo de la franja */
.hero-tpl .hero-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 4;
}

.hero-tpl .hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tpl-medio);
  border: none;
  opacity: 1;
  margin: 0 4px;
}

.hero-tpl .hero-dots button.active {
  width: 11px;
  height: 11px;
  background: var(--tpl-acento);
}

/* Boton de conversion, el unico que usa el color de llamado a la accion */
.hero-tpl .btn-cta,
.tpl-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--tpl-cta);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 11px 13px 11px 22px;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Adaptacion a pantallas pequeñas
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .hero-tpl .hero-slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-tpl .hero-copy {
    padding: 34px 22px 26px;
  }

  .hero-tpl .hero-photo {
    min-height: 220px;
    -webkit-clip-path: none;
    clip-path: none;
    order: -1;
  }

  /* En movil la franja deja de flotar sobre la foto: pasa a ser una seccion
     mas, porque encima del hero tapaba el titular. */
  .hero-tpl .hero-band {
    position: static;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 16px 16px;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .hero-tpl .hero-dots {
    position: static;
    padding: 4px 0 16px;
  }
}

@media (max-width: 575.98px) {
  .hero-tpl .hero-band,
  .hero-tpl .hero-band[data-items="2"],
  .hero-tpl .hero-band[data-items="3"] {
    grid-template-columns: 1fr;
  }

  .hero-tpl .hero-band-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .hero-tpl .hero-band-item:last-child {
    border-bottom: none;
  }

  .hero-tpl .hero-trust-item {
    border-right: none;
  }
}

/* ---------------------------------------------------------------------
   Valores de la empresa (home)
   ---------------------------------------------------------------------
   Mismas tarjetas que los bloques de la ficha de servicio: icono en cuadro
   redondeado con el trazo de acento, titulo en mayusculas y descripcion. Asi la
   pagina usa una sola forma de tarjeta de punta a punta, en vez de una lista con
   linea al costado que no se parecia a nada. */
.valores-tpl {
  background: var(--tpl-page);
  padding: 44px 0 48px;
}

.valores-tpl .cab {
  margin-bottom: 22px;
}

.valores-tpl .kick {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--tpl-acento);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.valores-tpl .kick i {
  width: 38px;
  height: 2px;
  background: var(--tpl-medio);
  display: inline-block;
}

.valores-tpl h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.4px;
  line-height: 1.05;
  color: var(--tpl-titulo);
}

.valores-tpl .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* La rejilla se acomoda a cuantos valores cargue la licencia */
.valores-tpl .grid[data-items="1"] { grid-template-columns: 1fr; }
.valores-tpl .grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.valores-tpl .grid[data-items="4"] { grid-template-columns: repeat(4, 1fr); }
.valores-tpl .grid[data-items="5"] { grid-template-columns: repeat(5, 1fr); }
.valores-tpl .grid[data-items="7"],
.valores-tpl .grid[data-items="8"] { grid-template-columns: repeat(4, 1fr); }

.valores-tpl .valor {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(0, 33, 96, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.valores-tpl .valor:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(9, 30, 66, 0.14);
}

.valores-tpl .ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.6px solid var(--tpl-acento);
  color: var(--tpl-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
}

.valores-tpl .ico i {
  font-size: 18px;
}

.valores-tpl h3 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.valores-tpl p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tpl-body);
}

@media (max-width: 991.98px) {
  .valores-tpl .grid,
  .valores-tpl .grid[data-items="4"],
  .valores-tpl .grid[data-items="5"],
  .valores-tpl .grid[data-items="7"],
  .valores-tpl .grid[data-items="8"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .valores-tpl .grid,
  .valores-tpl .grid[data-items="2"],
  .valores-tpl .grid[data-items="4"] {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Pie de pagina
   --------------------------------------------------------------------- */
.footer-tpl {
  background: var(--tpl-primario) !important;
  color: rgba(255, 255, 255, 0.8);
}

.footer-tpl h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-tpl a {
  color: rgba(255, 255, 255, 0.8);
}

.footer-tpl a:hover {
  color: #fff;
}

.footer-tpl .social-links a {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.footer-tpl .social-links a:hover {
  background: var(--tpl-cta);
  border-color: var(--tpl-cta);
  color: #fff;
}

.footer-tpl .logo img {
  max-height: 46px;
  width: auto;
}

@media (max-width: 991.98px) {
  .valores-tpl .grid,
  .valores-tpl .grid[data-items="3"],
  .valores-tpl .grid[data-items="5"],
  .valores-tpl .grid[data-items="6"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .valores-tpl .grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Paginas que conservan el marcado de la plantilla clasica
   ---------------------------------------------------------------------
   Contacto, productos, equipo y preguntas frecuentes siguen usando las vistas
   de siempre. En lugar de reescribirlas, se adaptan con estilo: asi heredan la
   paleta de la licencia y el mismo lenguaje que el resto, sin tocar su HTML ni
   arriesgar las licencias con plantilla clasica. */

/* Titulos de seccion */
.section-title h2 {
  color: var(--tpl-acento) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.section-title div,
.section-title p {
  color: var(--tpl-titulo);
}

.section-title .description-title {
  color: var(--tpl-acento);
}

/* Contacto: datos y formulario */
.contact .info-item {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(9, 30, 66, 0.06);
}

.contact .info-item i {
  color: var(--tpl-acento) !important;
  background: rgba(29, 79, 156, 0.08) !important;
  border-radius: 10px;
}

.contact .info-item h3 {
  color: var(--tpl-titulo);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact .php-email-form {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 22px rgba(9, 30, 66, 0.08);
}

.contact .php-email-form .form-control {
  border-radius: 8px;
  border: 1px solid var(--tpl-border);
  font-size: 14px;
  padding: 11px 13px;
}

.contact .php-email-form .form-control:focus {
  border-color: var(--tpl-acento);
  box-shadow: none;
}

.contact .php-email-form button[type="submit"],
.products-section .btn-primary,
.product-detail .btn-primary {
  background: var(--tpl-primario) !important;
  border-color: var(--tpl-primario) !important;
  border-radius: 8px;
  font-weight: 600;
  padding: 11px 26px;
}

.contact .php-email-form button[type="submit"]:hover {
  filter: brightness(1.18);
}

/* Productos */
.products-section .card,
.product-item {
  border: 1px solid var(--tpl-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 18px rgba(9, 30, 66, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.products-section .card:hover,
.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(9, 30, 66, 0.16);
}

.products-section .card-title,
.product-item h3 {
  color: var(--tpl-titulo);
  font-weight: 700;
}

.products-section .page-link {
  color: var(--tpl-acento);
  border-radius: 8px;
  margin: 0 2px;
}

.products-section .page-item.active .page-link {
  background: var(--tpl-primario);
  border-color: var(--tpl-primario);
}

/* Equipo */
.team .team-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--tpl-border);
  box-shadow: 0 5px 18px rgba(9, 30, 66, 0.08);
}

.team .team-content h4 {
  color: var(--tpl-titulo);
  font-weight: 700;
}

.team .team-content span {
  color: var(--tpl-acento);
}

/* Preguntas frecuentes */
.faq .faq-item {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 14px 18px;
}

.faq .faq-item h3 {
  color: var(--tpl-titulo);
  font-size: 14px;
  font-weight: 700;
}

.faq .faq-item .faq-icon,
.faq .faq-item .faq-toggle {
  color: var(--tpl-acento);
}

.faq .faq-active h3 {
  color: var(--tpl-acento);
}

/* ---------------------------------------------------------------------
   Clientes
   ---------------------------------------------------------------------
   Los logos van en escala de grises y toman color al pasar el mouse: asi una
   fila con logos de colores muy distintos no compite con el resto de la pagina. */
.clientes-tpl {
  background: #fff;
  padding: 34px 0;
  border-bottom: 1px solid var(--tpl-border);
}

.clientes-tpl .h {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tpl-muted);
  margin-bottom: 20px;
}

.clientes-tpl .logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  align-items: center;
}

.clientes-tpl .logo {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--tpl-border);
  border-radius: 10px;
  background: #fff;
}

.clientes-tpl .logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.clientes-tpl .logo:hover img {
  filter: none;
  opacity: 1;
}

.clientes-tpl .logo span {
  font-size: 12px;
  font-weight: 700;
  color: var(--tpl-titulo);
  text-align: center;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------
   Pieza promocional del catalogo
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .promo-tpl {
    margin: 0 14px 18px;
  }
}

/* ---------------------------------------------------------------------
   Foco de teclado
   ---------------------------------------------------------------------
   Un solo estilo para todo el sitio: contorno en el color de acento con halo,
   que se ve sobre fondo claro y sobre las franjas oscuras. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--tpl-acento);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(29, 79, 156, 0.18);
  border-radius: 6px;
}

.footer-tpl-nuevo a:focus-visible,
.hero-tpl .hero-band-item:focus-visible,
.ficha-tpl-banda a:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

/* ---------------------------------------------------------------------
   Pie de pagina de la plantilla
   ---------------------------------------------------------------------
   Degradado de la marca con la reticula hexagonal al fondo, una franja de
   contacto arriba y los datos en piezas con icono. La reticula es la misma del
   encabezado de servicios, para que el pie se sienta parte del mismo sistema. */
.footer-tpl-nuevo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--tpl-primario) 0%,
      color-mix(in srgb, var(--tpl-primario) 72%, #000) 100%);
  color: rgba(255, 255, 255, 0.78);
  padding: 40px 0 0;
  font-size: 13px;
}

.footer-tpl-nuevo .malla {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.055;
  pointer-events: none;
}

.footer-tpl-nuevo .container {
  position: relative;
  z-index: 1;
}

/* Franja de contacto: se monta sobre el borde superior del pie */
.footer-tpl-nuevo .franja {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 22px 26px;
  /* Dentro del pie, no montada sobre la seccion de arriba: el pie recorta su
     contenido para contener la reticula, y el saliente quedaba cortado. */
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.footer-tpl-nuevo .franja .k {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tpl-cta);
  filter: brightness(1.5);
  margin-bottom: 5px;
}

.footer-tpl-nuevo .franja h3 {
  margin: 0;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.footer-tpl-nuevo .acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-tpl-nuevo .btn-wa,
.footer-tpl-nuevo .btn-borde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 22px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-tpl-nuevo .btn-wa {
  background: var(--tpl-cta);
  color: #fff;
}

.footer-tpl-nuevo .btn-wa:hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.footer-tpl-nuevo .btn-borde {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.footer-tpl-nuevo .btn-borde:hover {
  background: #fff;
  color: var(--tpl-primario);
  transform: translateY(-2px);
}

/* Columnas */
.footer-tpl-nuevo .cuerpo {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1fr 0.8fr;
  gap: 34px;
  padding-bottom: 34px;
}

.footer-tpl-nuevo .marca img {
  max-height: 56px;
  width: auto;
  margin-bottom: 16px;
  /* El logo de la licencia puede venir en cualquier color: sobre el fondo
     oscuro se normaliza a blanco para que siempre se lea. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.footer-tpl-nuevo .marca p {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.75;
  max-width: 330px;
  color: rgba(255, 255, 255, 0.66);
}

.footer-tpl-nuevo .redes {
  display: flex;
  gap: 9px;
}

.footer-tpl-nuevo .redes a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-tpl-nuevo .redes a:hover {
  background: var(--tpl-cta);
  border-color: var(--tpl-cta);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.footer-tpl-nuevo h4 {
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 6px 0 16px;
  position: relative;
  padding-bottom: 11px;
}

/* Subrayado corto en el color de conversion, en vez de una linea de lado a lado */
.footer-tpl-nuevo h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--tpl-cta);
}

.footer-tpl-nuevo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Datos de contacto: cada uno con su icono en circulo */
.footer-tpl-nuevo .datos li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 13px;
  line-height: 1.6;
  font-size: 12.5px;
}

.footer-tpl-nuevo .datos .ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tpl-cta);
  filter: brightness(1.35);
  font-size: 13px;
}

.footer-tpl-nuevo .enlaces li {
  margin-bottom: 10px;
}

.footer-tpl-nuevo .enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-tpl-nuevo .enlaces a i {
  font-size: 10px;
  color: var(--tpl-cta);
  filter: brightness(1.35);
  transition: transform 0.2s ease;
}

.footer-tpl-nuevo a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 12.5px;
}

.footer-tpl-nuevo .enlaces a:hover,
.footer-tpl-nuevo .datos a:hover {
  color: #fff;
}

.footer-tpl-nuevo .enlaces a:hover i {
  transform: translateX(3px);
}

.footer-tpl-nuevo .enlaces .mas {
  color: var(--tpl-cta);
  font-weight: 700;
  filter: brightness(1.4);
}

.footer-tpl-nuevo .cierre {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-tpl-nuevo .creditos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.footer-tpl-nuevo .creditos img {
  height: 16px;
  width: auto;
}

@media (max-width: 991.98px) {
  .footer-tpl-nuevo .cuerpo {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  .footer-tpl-nuevo .franja {
    margin-bottom: 26px;
  }
}

@media (max-width: 575.98px) {
  .footer-tpl-nuevo .cuerpo {
    grid-template-columns: 1fr;
  }

  .footer-tpl-nuevo .franja {
    padding: 18px 20px;
  }

  .footer-tpl-nuevo .cierre {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   Video, equipo y preguntas frecuentes del inicio

   Estas tres secciones venian de la plantilla anterior y desentonaban: el
   video salia diminuto y las tarjetas no seguian el mismo ritmo que el resto.
   Comparten encabezado y espaciado con "Nuestros valores".
   --------------------------------------------------------------------- */
.video-tpl,
.equipo-tpl,
.faq-tpl {
  padding: 44px 0 48px;
}

.video-tpl { background: #fff; }
.equipo-tpl { background: var(--tpl-page); }
.faq-tpl { background: #fff; }

.video-tpl .cab,
.equipo-tpl .cab,
.faq-tpl .cab {
  margin-bottom: 22px;
}

.video-tpl .kick,
.equipo-tpl .kick,
.faq-tpl .kick {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--tpl-acento);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.video-tpl .kick i,
.equipo-tpl .kick i,
.faq-tpl .kick i {
  width: 38px;
  height: 2px;
  background: var(--tpl-medio);
  display: inline-block;
}

.video-tpl h2,
.equipo-tpl h2,
.faq-tpl h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.4px;
  line-height: 1.05;
  color: var(--tpl-titulo);
}

/* --- Video: uno grande; si hay varios, en rejilla --- */
.video-tpl .grid {
  display: grid;
  gap: 20px;
}

.video-tpl .grid[data-items="1"] { grid-template-columns: minmax(0, 900px); justify-content: center; }
.video-tpl .grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.video-tpl .grid { grid-template-columns: repeat(3, 1fr); }
.video-tpl .grid[data-items="1"] { grid-template-columns: minmax(0, 900px); }
.video-tpl .grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }

.video-tpl .pieza { margin: 0; }

.video-tpl .marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tpl-primario);
  box-shadow: 0 18px 40px rgba(1, 20, 60, 0.16);
}

.video-tpl .marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-tpl figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tpl-titulo);
}

/* --- Equipo de trabajo --- */
.equipo-tpl .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.equipo-tpl .grid[data-items="1"] { grid-template-columns: minmax(0, 320px); }
.equipo-tpl .grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.equipo-tpl .grid[data-items="3"] { grid-template-columns: repeat(3, 1fr); }
.equipo-tpl .grid[data-items="5"],
.equipo-tpl .grid[data-items="6"] { grid-template-columns: repeat(3, 1fr); }

.equipo-tpl .persona {
  background: #fff;
  border: 1px solid var(--tpl-border);
  border-radius: 14px;
  padding: 22px 20px 24px;
  text-align: center;
  transition: 0.18s ease;
}

.equipo-tpl .persona:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(1, 20, 60, 0.1);
}

.equipo-tpl .foto {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--tpl-page) center/cover no-repeat;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--tpl-border);
}

.equipo-tpl .foto.sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tpl-primario), var(--tpl-acento));
}

.equipo-tpl .foto.sin-foto span {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1px;
}

.equipo-tpl h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tpl-titulo);
}

.equipo-tpl .cargo {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tpl-acento);
}

.equipo-tpl .persona p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tpl-body);
}

/* --- Preguntas frecuentes --- */
.faq-tpl .accordion-item {
  border: 1px solid var(--tpl-border);
  border-radius: 12px !important;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-tpl .accordion-button {
  font-size: 15px;
  font-weight: 700;
  color: var(--tpl-titulo);
  background: #fff;
  padding: 18px 20px;
}

.faq-tpl .accordion-button:not(.collapsed) {
  color: #fff;
  background: var(--tpl-primario);
  box-shadow: none;
}

.faq-tpl .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.faq-tpl .accordion-button:focus {
  box-shadow: none;
  border-color: var(--tpl-border);
}

.faq-tpl .accordion-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tpl-body);
  padding: 18px 20px 22px;
}

@media (max-width: 992px) {
  .video-tpl .grid,
  .equipo-tpl .grid,
  .video-tpl .grid[data-items="2"],
  .equipo-tpl .grid[data-items="2"],
  .equipo-tpl .grid[data-items="3"] {
    grid-template-columns: 1fr;
  }
}

/* Descripción opcional debajo del título de una sección */
.video-tpl .cab .descripcion,
.equipo-tpl .cab .descripcion,
.faq-tpl .cab .descripcion,
.valores-tpl .cab .descripcion {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tpl-body);
}

/* Misión y visión, ahora en su propia sección. Las tarjetas conservan los
   estilos de .about-tpl-mv, que no dependían de la sección que las contenía. */
.mv-tpl {
  background: #fff;
  padding: 44px 0 48px;
}

.mv-tpl .cab { margin-bottom: 22px; }

.mv-tpl .kick {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--tpl-acento);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mv-tpl .kick i {
  width: 38px;
  height: 2px;
  background: var(--tpl-medio);
  display: inline-block;
}

.mv-tpl h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.4px;
  line-height: 1.05;
  color: var(--tpl-titulo);
}

.mv-tpl .cab .descripcion {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tpl-body);
}

/* El panel de servicios salió de "Quiénes somos" y ahora es sección propia.
   Las piezas de dentro conservan sus estilos (.about-tpl-services), que no
   dependían de la sección que las contenía. */
.panel-tpl {
  background: var(--tpl-page);
  padding: 44px 0 48px;
}

.panel-tpl .cab { margin-bottom: 22px; }

.panel-tpl .kick {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--tpl-acento);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.panel-tpl .kick i {
  width: 38px;
  height: 2px;
  background: var(--tpl-medio);
  display: inline-block;
}

.panel-tpl h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.4px;
  line-height: 1.05;
  color: var(--tpl-titulo);
}

.panel-tpl .cab .descripcion {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tpl-body);
}

/* ---------------------------------------------------------------------
   Fondo de cada sección

   Solo hay dos, y los dos salen de la paleta de la licencia: si cambia la
   marca, cambian con ella. Sin elección propia se van alternando, que es lo
   que hace que una sección se distinga de la siguiente.
   --------------------------------------------------------------------- */
/* El 1 lleva el tono de la marca y el 2 es el blanco de siempre. Al alternar,
   la primera seccion abre con color y la siguiente descansa en blanco. */
section.fondo-1 {
  background: #f2f6fc;
  background: color-mix(in srgb, var(--tpl-acento) 9%, #fff);
}

section.fondo-2 {
  background: #fff;
}

/* Sección sin margen: se pega a la de arriba y a la de abajo. Con el mismo
   fondo en las dos, se leen como una sola franja. */
section.sin-margen {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* La caja de "Quiénes somos" llevaba una sombra muy marcada porque nacía sobre
   un fondo oscuro. Ahora el fondo lo elige la licencia, así que se suaviza. */
.about-tpl-card {
  box-shadow: 0 14px 40px rgba(1, 20, 60, 0.10);
}

/* Al fusionar dos secciones, las cajas de dentro no deben flotar: la sombra y
   el aire delatan el corte que justamente se quiere disimular. */
section.sin-margen .about-tpl-card,
section.sin-margen .mv,
section.sin-margen .valor,
section.sin-margen .persona,
section.sin-margen .accordion-item,
section.sin-margen + section .about-tpl-card,
section.sin-margen + section .mv,
section.sin-margen + section .valor,
section.sin-margen + section .persona {
  box-shadow: none;
}

/* Fusionar es cosa de dos: si una sección va sin margen, la de abajo también
   tiene que subir, o queda el hueco de su propio margen superior. */
section.sin-margen + section {
  padding-top: 10px;
}

/* El aire debajo del banner lo pone la primera sección, no el banner: así se
   quita marcando esa sección como "sin margen", igual que entre dos secciones
   cualesquiera. La franja de servicios flota sobre el borde inferior del
   banner, por eso necesita algo más de sitio que un margen normal. */
.hero-tpl + section {
  padding-top: 62px;
}

.hero-tpl + section.sin-margen {
  padding-top: 10px;
}

/* La franja de "a quiénes acompañamos" nació dentro de una sección oscura y su
   texto era blanco. Ahora vive en el panel de servicios, sobre fondo claro, así
   que pasa a ser una tira con los colores de la marca. */
.about-tpl-who {
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--tpl-border);
  background: #fff;
  background: color-mix(in srgb, var(--tpl-acento) 4%, #fff);
  color: var(--tpl-body);
}

.about-tpl-who i {
  font-size: 22px;
  color: var(--tpl-acento);
}

.about-tpl-who .t {
  color: var(--tpl-titulo);
  letter-spacing: 1.2px;
}

.about-tpl-who .d {
  color: var(--tpl-body);
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 1;
}

/* Producto sin fotografía: marcador con los colores de la licencia en vez de
   la imagen rota del navegador. */
.producto-sin-foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef2f9;
  background: linear-gradient(140deg,
      color-mix(in srgb, var(--tpl-acento) 8%, #fff),
      color-mix(in srgb, var(--tpl-primario) 16%, #fff));
}

.product-image .producto-sin-foto {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.producto-sin-foto i {
  font-size: 40px;
  color: var(--tpl-primario);
  opacity: .55;
}

/* Con una sola diapositiva no hay puntos debajo, asi que la franja baja a
   ocupar ese espacio. Con dos o mas vuelve a subir para no taparlos. */
.hero-tpl.hero-sin-puntos .hero-band {
  bottom: 20px;
}

/* Sin franja no hay que reservarle sitio: el texto deja de tener ese hueco
   debajo y el banner se cierra a la altura que necesita. */
.hero-tpl.hero-sin-franja .hero-copy {
  padding-bottom: 56px;
}

.hero-tpl.hero-sin-franja {
  margin-bottom: 0;
}

/* La pieza promocional del catalogo se presenta como el encabezado de una ficha
   de servicio: mismo antetitulo, mismo titular y misma foto al lado. */

/* ---------------------------------------------------------------------
   Pieza promocional del catalogo

   Usa el mismo encabezado que la ficha de un servicio: fondo claro, el texto a
   la izquierda y la foto entrando en diagonal hasta el borde.
   --------------------------------------------------------------------- */
.promo-tpl {
  background: #fbfcfe;
  padding: 0 0 12px;
  margin-bottom: 22px;
}

.promo-tpl .ficha-tpl-head {
  margin-top: 0;
}

/* Va a todo el ancho, asi que el texto necesita su propio margen: en la ficha
   se lo daba el contenedor de la pagina. */
.promo-tpl .ficha-tpl-head .copy {
  padding-left: clamp(20px, 6vw, 130px);
}

@media (max-width: 767.98px) {
  .promo-tpl .ficha-tpl-head {
    grid-template-columns: 1fr;
  }
}