/* ============================================================
   Quality Work — Certificaciones del Pacífico
   Hoja de estilos compartida por las 6 páginas del sitio
   HTML5 + CSS3 puro · Sin frameworks
   ============================================================ */

/* ------------------------------------------------------------
   0. Fuentes locales (self-hosted, sin dependencia externa)
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/montserrat-800.woff2') format('woff2');
}

/* ------------------------------------------------------------
   1. Variables de identidad visual (extraídas del logo oficial)
   ------------------------------------------------------------ */
:root {
  --azul-marino: #123054;
  --azul-marino-oscuro: #032145;  /* hover, fondos oscuros */
  --azul-marino-claro: #193A5D;   /* degradados, overlays */
  --dorado: #CDA12D;              /* CTAs, sellos, acentos premium */
  --dorado-hover: #B1923F;
  --dorado-claro: #EAE3C1;        /* fondos sutiles, no para texto */
  --celeste-ola: #5294B0;         /* acento secundario, liga con "Pacífico" */
  --gris-claro: #F4F6F8;
  --blanco: #FFFFFF;
  --texto-cuerpo: #333333;
  --texto-suave: #5A6A7D;
  --borde-suave: #E3E8EE;
  --sombra: 0 10px 30px rgba(3, 33, 69, 0.10);
  --sombra-fuerte: 0 16px 40px rgba(3, 33, 69, 0.18);
  --radio: 12px;
  --transicion: 0.3s ease;
}

/* ------------------------------------------------------------
   2. Reseteo y base
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  color: var(--texto-cuerpo);
  background-color: var(--blanco);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--azul-marino);
  text-decoration: none;
  transition: color var(--transicion);
}

a:hover {
  color: var(--dorado-hover);
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', 'Inter', Arial, sans-serif;
  font-weight: 800;
  color: var(--azul-marino);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  color: var(--texto-cuerpo);
}

/* Clase para contenido solo accesible a lectores de pantalla */
.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;
}

.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------
   3. Botones
   ------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion), color var(--transicion);
  text-align: center;
}

.boton:hover {
  transform: translateY(-2px);
}

.boton svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Botón principal: dorado sólido con texto azul marino */
.boton--dorado {
  background-color: var(--dorado);
  color: var(--azul-marino-oscuro);
}

.boton--dorado:hover {
  background-color: var(--dorado-hover);
  color: var(--azul-marino-oscuro);
  box-shadow: 0 10px 24px rgba(205, 161, 45, 0.35);
}

/* Botón secundario: contorno blanco (para fondos oscuros) */
.boton--contorno {
  border-color: var(--blanco);
  color: var(--blanco);
  background-color: transparent;
}

.boton--contorno:hover {
  background-color: var(--blanco);
  color: var(--azul-marino-oscuro);
}

/* Botón secundario sobre fondos claros */
.boton--contorno-oscuro {
  border-color: var(--azul-marino);
  color: var(--azul-marino);
  background-color: transparent;
}

.boton--contorno-oscuro:hover {
  background-color: var(--azul-marino);
  color: var(--blanco);
}

.boton--grande {
  padding: 17px 34px;
  font-size: 1.02rem;
}

/* ------------------------------------------------------------
   4. Etiquetas y títulos de sección
   ------------------------------------------------------------ */
.etiqueta {
  display: inline-block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-hover);
  margin-bottom: 14px;
}

.titulo-seccion {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: 18px;
}

.titulo-seccion--centrado {
  text-align: center;
}

.centrado {
  text-align: center;
}

.seccion {
  padding: 90px 0;
}

.seccion--clara {
  background-color: var(--gris-claro);
}

.seccion--oscura {
  background-color: var(--azul-marino-oscuro);
}

.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura p {
  color: var(--blanco);
}

.seccion--oscura .etiqueta {
  color: var(--dorado);
}

.encabezado-seccion {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.encabezado-seccion p {
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------
   5. Barra superior de contacto
   ------------------------------------------------------------ */
.barra-superior {
  background-color: var(--azul-marino-oscuro);
  color: var(--blanco);
  font-size: 0.82rem;
}

.barra-superior__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  flex-wrap: wrap;
  padding-top: 6px;
  padding-bottom: 6px;
}

.barra-superior__mensaje {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dorado-claro);
}

.barra-superior__mensaje svg {
  width: 15px;
  height: 15px;
  color: var(--dorado);
  flex-shrink: 0;
}

.barra-superior__enlaces {
  display: flex;
  align-items: center;
  gap: 22px;
}

.barra-superior__enlaces a {
  color: var(--blanco);
  font-weight: 600;
}

.barra-superior__enlaces a:hover {
  color: var(--dorado);
}

/* ------------------------------------------------------------
   7. Cabecera principal y menú
   ------------------------------------------------------------ */
.cabecera {
  background-color: var(--blanco);
  border-bottom: 1px solid var(--borde-suave);
  position: sticky;
  top: 0;
  z-index: 900;
  transition: box-shadow var(--transicion);
}

.cabecera--sombra {
  box-shadow: 0 6px 24px rgba(3, 33, 69, 0.10);
}

.cabecera__principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}

.logo img {
  width: auto;
  height: 56px;
}

/* Menú de navegación */
.menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu__lista a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--azul-marino);
}

.menu__lista a:hover {
  color: var(--dorado-hover);
  background-color: var(--gris-claro);
}

.menu__lista a[aria-current='page'] {
  color: var(--dorado-hover);
  background-color: rgba(205, 161, 45, 0.10);
}

.boton--cabecera {
  padding: 11px 20px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Botón hamburguesa (solo móvil) */
.menu__boton {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background-color: var(--gris-claro);
  cursor: pointer;
  z-index: 910;
}

.menu__linea {
  display: block;
  height: 2.5px;
  width: 100%;
  background-color: var(--azul-marino);
  border-radius: 3px;
  transition: transform var(--transicion), opacity var(--transicion);
}

.menu__boton[aria-expanded='true'] .menu__linea:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu__boton[aria-expanded='true'] .menu__linea:nth-child(2) {
  opacity: 0;
}

.menu__boton[aria-expanded='true'] .menu__linea:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ------------------------------------------------------------
   8. Hero (solo Inicio) — carga img/inicio/hero-bg.png
   Composición editorial: el bloque de contenido se ancla al
   margen izquierdo (aprox. 40% del ancho) y la fotografía del
   consultor domina el lado derecho (aprox. 60%), con un
   degradado que oscurece solo lo necesario para el texto.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background-color: var(--azul-marino-oscuro); /* respaldo si la imagen tarda */
  background-image:
    linear-gradient(90deg,
      rgba(3, 33, 69, 0.94) 0%,
      rgba(18, 48, 84, 0.82) 32%,
      rgba(18, 48, 84, 0.52) 55%,
      rgba(18, 48, 84, 0.18) 74%,
      rgba(18, 48, 84, 0.32) 100%),
    url('img/inicio/hero-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 640px;
  display: flex;
  align-items: center;
}

.hero__contenido {
  width: 42%;
  max-width: 660px;
  min-width: 340px;
  margin: 0 0 0 clamp(28px, 6vw, 104px); /* margen de seguridad elegante */
  padding: 96px 0 140px; /* espacio inferior para la ola */
}

.hero__sello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 9px 16px;
  border: 1px solid rgba(234, 227, 193, 0.45);
  border-radius: 999px;
  background-color: rgba(3, 33, 69, 0.35);
  color: var(--dorado-claro);
  font-size: 0.85rem;
  font-weight: 600;
}

.hero__sello svg {
  width: 16px;
  height: 16px;
  color: var(--dorado);
}

.hero h1 {
  color: var(--blanco);
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  margin-bottom: 22px;
}

.hero p {
  color: rgba(244, 246, 248, 0.92);
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  max-width: 620px;
  margin-bottom: 36px;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ------------------------------------------------------------
   9. La ola del Pacífico — elemento distintivo de la marca
   Solo se usa entre el hero y la siguiente sección, y en el footer.
   ------------------------------------------------------------ */
.ola {
  line-height: 0;
  overflow: hidden;
  background-color: transparent;
}

.ola__svg {
  display: block;
  width: 100%;
  height: 74px;
}

.ola__capa--trasera {
  fill: var(--celeste-ola);
  opacity: 0.32;
}

.ola__capa--frontal {
  fill: var(--celeste-ola);
  opacity: 0.16;
}

/* Ola invertida (para el footer) */
.ola--invertida .ola__svg {
  transform: scaleY(-1);
}

/* ------------------------------------------------------------
   9b. Animación de la ola — deformación suave de la curva
   Se anima SOLO la forma del trazado de cada capa, nunca la
   posición ni el tamaño de la franja completa.
   Las X se mantienen fijas (0 → 1440) para que la ola ocupe
   siempre el 100% del ancho sin huecos ni scroll horizontal.
   ------------------------------------------------------------ */
@keyframes ola-capa-trasera {
  0%, 100% {
    d: path("M0,40 C240,90 420,0 720,36 C1020,72 1200,10 1440,48 L1440,96 L0,96 Z");
  }
  50% {
    d: path("M0,72 C240,88 420,44 720,64 C1020,80 1200,48 1440,66 L1440,96 L0,96 Z");
  }
}

@keyframes ola-capa-frontal {
  0%, 100% {
    d: path("M0,64 C300,96 480,28 720,56 C960,84 1200,30 1440,64 L1440,96 L0,96 Z");
  }
  50% {
    d: path("M0,86 C300,94 480,58 720,78 C960,90 1200,60 1440,84 L1440,96 L0,96 Z");
  }
}

.ola__capa--trasera {
  animation: ola-capa-trasera 10s ease-in-out infinite;
}

.ola__capa--frontal {
  animation: ola-capa-frontal 13s ease-in-out infinite;
  animation-delay: -3s;
}

@media (prefers-reduced-motion: reduce) {
  .ola__capa--trasera,
  .ola__capa--frontal {
    animation: none;
  }
}

/* ------------------------------------------------------------
   10. Barra de confianza (sellos y normas)
   ------------------------------------------------------------ */
.confianza {
  background-color: var(--blanco);
  border-bottom: 1px solid var(--borde-suave);
}

.confianza__contenido {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 44px;
  padding: 34px 0;
}

.confianza__titulo {
  width: 100%;
  text-align: center;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

.confianza__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8A97A6; /* escala de grises */
  filter: grayscale(1);
  transition: filter var(--transicion), color var(--transicion);
}

.confianza__item:hover {
  filter: grayscale(0);
  color: var(--azul-marino);
}

.confianza__item img {
  height: 42px;
  width: auto;
}

.confianza__item svg {
  width: 26px;
  height: 26px;
}

.confianza__norma {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   11. Tarjetas (beneficios, servicios, etc.)
   ------------------------------------------------------------ */
.tarjeta {
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 34px 28px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
  height: 100%;
}

.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-fuerte);
}

.tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background-color: rgba(18, 48, 84, 0.07);
  color: var(--azul-marino);
  margin-bottom: 20px;
}

.tarjeta__icono svg {
  width: 28px;
  height: 28px;
}

.tarjeta__icono--dorado {
  background-color: rgba(205, 161, 45, 0.14);
  color: var(--dorado-hover);
}

.tarjeta h3 {
  font-size: 1.12rem;
  margin-bottom: 10px;
}

.tarjeta p {
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.tarjeta__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--azul-marino);
}

.tarjeta__enlace:hover {
  color: var(--dorado-hover);
}

.tarjeta__enlace svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transicion);
}

.tarjeta:hover .tarjeta__enlace svg {
  transform: translateX(4px);
}

/* Rejillas base */
.rejilla {
  display: grid;
  gap: 28px;
}

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

.rejilla--3 {
  grid-template-columns: repeat(3, 1fr);
}

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

/* ------------------------------------------------------------
   12. Banner de certificación (sello de prestigio, Inicio y Certificaciones)
   ------------------------------------------------------------ */
.banner-certificacion {
  background-color: var(--azul-marino-oscuro);
  background-image: linear-gradient(100deg, rgba(3, 33, 69, 0.96) 0%, rgba(18, 48, 84, 0.88) 60%, rgba(25, 58, 93, 0.85) 100%);
  color: var(--blanco);
  border-radius: 20px;
  padding: 52px 48px;
  display: flex;
  align-items: center;
  gap: 44px;
  box-shadow: var(--sombra-fuerte);
}

.banner-certificacion__sello {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.banner-certificacion h2 {
  color: var(--blanco);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 14px;
}

.banner-certificacion p {
  color: rgba(244, 246, 248, 0.9);
  margin-bottom: 24px;
}

/* ------------------------------------------------------------
   13. Banners de páginas internas
   (cada página usa su imagen de fondo: nosotros-bg.jpg, etc.)
   ------------------------------------------------------------ */
.banner {
  position: relative;
  background-color: var(--azul-marino-claro); /* respaldo hasta que se suba la imagen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 108px 0 84px;
}

/* Degradado LOCALIZADO solo detrás del texto (izquierda):
   la fotografía del lado derecho se mantiene natural, sin tinte azul. */
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(3, 33, 69, 0.8) 0%, rgba(18, 48, 84, 0.4) 34%, rgba(18, 48, 84, 0) 60%);
}

.banner__contenido {
  position: relative;
  max-width: 780px;
}

/* Contenido del banner alineado a la izquierda (tablet/desktop):
   usa el mismo margen izquierdo del container principal del sitio
   (max-width 1200px centrado + 24px de padding).
   Móvil (<768px) conserva su layout actual. */
@media (min-width: 768px) {
  .banner {
    padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  }
}

@media (min-width: 1024px) {
  .banner__contenido {
    max-width: 580px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* Sección destino del botón "Conócenos más" (Nosotros):
   compensa el header fijo al hacer scroll por ancla. */
#quienes-somos {
  scroll-margin-top: 92px;
}

.banner h1 {
  color: var(--blanco);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 16px;
  text-shadow: 0 1px 3px rgba(3, 33, 69, 0.5);
}

.banner p {
  color: rgba(244, 246, 248, 0.92);
  font-size: 1.08rem;
  max-width: 620px;
  text-shadow: 0 1px 2px rgba(3, 33, 69, 0.45);
}

.banner__contenido .boton {
  margin-top: 28px;
}

/* Eyebrow amarillo del Hero: más grande y visible, sin perder su
   jerarquía secundaria sobre el título blanco.
   Solo aplica al banner de las páginas internas (Inicio no usa .banner). */
.banner__contenido .etiqueta {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}

/* Fondos particulares por página interna */
.banner--nosotros {
  background-image: url('img/nosotros/nosotros-bg.jpg');
}

.banner--servicios {
  background-image: url('img/servicios/servicios-bg.jpg');
}

.banner--certificaciones {
  background-image: url('img/certificaciones/certificaciones-bg.jpg');
}

.banner--capacitaciones {
  background-image: url('img/capacitaciones/capacitaciones-bg.jpg');
}

.banner--contacto {
  background-image: url('img/contacto/contacto-bg.jpg');
}

/* ------------------------------------------------------------
   14. Misión, Visión y Valores (Nosotros)
   ------------------------------------------------------------ */
.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.mvv__tarjeta {
  background-color: var(--blanco);
  border-top: 4px solid var(--dorado);
  border-radius: var(--radio);
  padding: 36px 30px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.mvv__tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-fuerte);
}

.mvv__icono {
  color: var(--dorado-hover);
  margin-bottom: 18px;
}

.mvv__icono svg {
  width: 34px;
  height: 34px;
}

.mvv__tarjeta h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.mvv__tarjeta p {
  color: var(--texto-suave);
  font-size: 0.95rem;
}

/* Valores en chips */
.valores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.valores__chip {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--dorado);
  color: var(--azul-marino);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  background-color: rgba(205, 161, 45, 0.08);
}

/* Lista con viñetas de verificación */
.lista-verificada {
  display: grid;
  gap: 12px;
}

.lista-verificada li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--texto-cuerpo);
  font-size: 0.97rem;
}

.lista-verificada svg {
  width: 20px;
  height: 20px;
  color: var(--dorado-hover);
  flex-shrink: 0;
  margin-top: 3px;
}

.lista-verificada strong {
  color: var(--azul-marino);
}

/* ------------------------------------------------------------
   15. Proceso de certificación en pasos (Certificaciones)
   ------------------------------------------------------------ */
.pasos {
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.paso {
  position: relative;
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 44px 28px 32px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.paso:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-fuerte);
}

.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: -22px;
  left: 28px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dorado);
  color: var(--azul-marino-oscuro);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(205, 161, 45, 0.35);
}

.paso h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.paso p {
  color: var(--texto-suave);
  font-size: 0.94rem;
}

.paso__flecha {
  display: none;
}

/* ------------------------------------------------------------
   16. Secciones de doble columna (texto + imagen/sello)
   ------------------------------------------------------------ */
.dos-columnas {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

.dos-columnas__texto h2 {
  margin-bottom: 18px;
}

.dos-columnas__texto p {
  color: var(--texto-suave);
  margin-bottom: 16px;
}

.dos-columnas__texto p:last-child {
  margin-bottom: 0;
}

.dos-columnas__sello {
  text-align: center;
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 40px 28px;
  box-shadow: var(--sombra);
}

.dos-columnas__sello img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  margin: 0 auto 18px;
}

.dos-columnas__sello p {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  color: var(--azul-marino);
  font-size: 0.92rem;
}

/* ------------------------------------------------------------
   17. Carrusel del catálogo de capacitaciones
   ------------------------------------------------------------ */
.pestanas {
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* --- Carrusel de categorías --- */
.pestanas__carrusel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--borde-suave);
}

.pestanas__lista {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.pestanas__lista::-webkit-scrollbar {
  display: none;
}

.pestanas__flecha {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  color: var(--azul-marino);
  box-shadow: 0 4px 14px rgba(3, 33, 69, 0.08);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion), opacity var(--transicion);
}

.pestanas__flecha svg {
  width: 20px;
  height: 20px;
}

.pestanas__flecha:hover:not(:disabled) {
  color: var(--dorado-hover);
  border-color: var(--dorado);
  box-shadow: 0 6px 18px rgba(3, 33, 69, 0.14);
}

.pestanas__flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

.pestanas__boton {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--borde-suave);
  background-color: var(--blanco);
  border-radius: 999px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--azul-marino);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(3, 33, 69, 0.05);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion), background-color var(--transicion),
    color var(--transicion);
}

.pestanas__boton:hover {
  transform: translateY(-2px);
  border-color: var(--dorado);
  box-shadow: 0 8px 20px rgba(3, 33, 69, 0.12);
}

.pestanas__boton[aria-selected='true'] {
  background-color: var(--azul-marino);
  border-color: var(--azul-marino);
  color: var(--blanco);
  box-shadow: 0 8px 22px rgba(3, 33, 69, 0.28);
}

.pestanas__cuenta {
  display: inline-block;
  min-width: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: rgba(18, 48, 84, 0.09);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: var(--azul-marino);
}

.pestanas__boton[aria-selected='true'] .pestanas__cuenta {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--blanco);
}

.pestanas__boton:focus-visible,
.pestanas__flecha:focus-visible,
.pestanas__ver-todos:focus-visible,
.pestanas__curso:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
}

/* --- Indicador de progreso del carrusel --- */
.pestanas__progreso {
  height: 3px;
  margin: 0 26px 20px;
  border-radius: 999px;
  background-color: rgba(18, 48, 84, 0.08);
  overflow: hidden;
}

.pestanas__progreso-barra {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dorado), var(--dorado-hover));
  transition: width 300ms ease, transform 300ms ease;
}

/* --- Paneles: imagen a la izquierda + cursos destacados --- */
.pestanas__panel {
  display: none;
  padding: 34px;
}

.pestanas__panel.activo {
  display: block;
}

.pestanas__rejilla {
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  gap: 36px;
  align-items: stretch;
}

/* Columna izquierda: imagen reservada + resumen */
.pestanas__principal {
  display: flex;
  flex-direction: column;
}

/* Área de imagen: placeholder corporativo hasta subir las fotos reales */
.pestanas__media {
  border-radius: var(--radio);
  border: 1px solid var(--borde-suave);
  background-color: var(--gris-claro);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
}

/* Etiqueta de la imagen y del tipo de capacitación */
.pestanas__media > span {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background-color: rgba(244, 246, 248, 0.92);
  border-top: 1px solid var(--borde-suave);
  color: var(--azul-marino);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
}

.pestanas__resumen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 20px;
}

.pestanas__eyebrow {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado-hover);
  margin-bottom: 8px;
}

.pestanas__dato {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--azul-marino);
  margin-bottom: 10px;
}

.pestanas__dato .pestanas__badge {
  margin-bottom: 0;
}

.pestanas__descripcion {
  color: var(--texto-suave);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.pestanas__cta {
  margin-top: 0;
}

/* Columna derecha: cursos destacados */
.pestanas__destacados {
  background-color: var(--gris-claro);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}

.pestanas__destacados-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde-suave);
}

.pestanas__destacados-titulo {
  font-size: 1.02rem;
  margin: 0;
}

.pestanas__ver-todos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--azul-marino);
  white-space: nowrap;
  transition: color var(--transicion);
}

.pestanas__ver-todos svg {
  width: 14px;
  height: 14px;
}

.pestanas__ver-todos:hover {
  color: var(--dorado-hover);
}

.pestanas__destacados-lista {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.pestanas__curso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  color: var(--azul-marino);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.pestanas__curso:hover {
  transform: translateY(-2px);
  border-color: var(--dorado);
  box-shadow: 0 6px 16px rgba(3, 33, 69, 0.1);
}

.pestanas__curso-mini {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background-color: var(--gris-claro);
  border: 1px solid var(--borde-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul-marino);
}

.pestanas__curso-mini svg {
  width: 18px;
  height: 18px;
}

.pestanas__curso-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pestanas__curso-info strong {
  font-size: 0.9rem;
  color: var(--azul-marino);
}

.pestanas__curso-info small {
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.pestanas__curso-flecha {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--dorado-hover);
  transition: transform var(--transicion);
}

.pestanas__curso:hover .pestanas__curso-flecha {
  transform: translateX(3px);
}

/* --- Expansor "Ver más (N)" de los cursos destacados --- */
.pestanas__curso-mas {
  display: none;
}

.pestanas__curso-mas.abierto {
  display: block;
}

.pestanas__curso-mas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.pestanas__ver-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2px;
  padding: 12px 14px;
  background-color: transparent;
  border: 1px dashed var(--borde-suave);
  border-radius: 10px;
  color: var(--azul-marino);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion),
    background-color var(--transicion);
}

.pestanas__ver-mas:hover {
  color: var(--dorado-hover);
  border-color: var(--dorado);
  background-color: rgba(18, 48, 84, 0.04);
}

.pestanas__ver-mas:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* --- Franja de beneficios del catálogo --- */
.pestanas__beneficios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 22px;
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.pestanas__beneficio {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
}

.pestanas__beneficio + .pestanas__beneficio {
  border-left: 1px solid var(--borde-suave);
}

.pestanas__beneficio-icono {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: rgba(18, 48, 84, 0.07);
  color: var(--azul-marino);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pestanas__beneficio-icono svg {
  width: 20px;
  height: 20px;
}

.pestanas__beneficio-texto h4 {
  font-size: 0.92rem;
  margin: 0 0 4px;
}

.pestanas__beneficio-texto p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
  line-height: 1.45;
}

/* Imágenes temáticas por bloque (se subirán después) */
.imagen--seguridad-patrimonial {
  background-image: url('img/capacitaciones/seguridad-patrimonial.jpg');
}

.imagen--seguridad-industrial {
  background-image: url('img/capacitaciones/seguridad-industrial.jpg');
}

.imagen--ciberseguridad {
  background-image: url('img/capacitaciones/ciberseguridad.jpg');
}

.imagen--seguridad-vial {
  background-image: url('img/capacitaciones/seguridad-vial.jpg');
}

.imagen--normas-iso {
  background-image: url('img/capacitaciones/normas-iso.jpg');
}

.imagen--matpel {
  background-image: url('img/capacitaciones/matpel.jpg');
}

.imagen--emergencias {
  background-image: url('img/capacitaciones/emergencias.jpg');
}

.imagen--vigilantes {
  background-image: url('img/capacitaciones/vigilantes.jpg');
}

.imagen--supervisores {
  background-image: url('img/capacitaciones/supervisores.jpg');
}

.imagen--sst {
  background-image: url('img/capacitaciones/sst.jpg');
}

.imagen--phsl {
  background-image: url('img/capacitaciones/phsl.jpg');
}

/* ------------------------------------------------------------
   18. Tarjeta de servicio con lista (Servicios)
   ------------------------------------------------------------ */
.servicio {
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 40px 34px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.servicio:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-fuerte);
}

.servicio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-color: rgba(18, 48, 84, 0.07);
  color: var(--azul-marino);
  margin-bottom: 22px;
}

.servicio__icono svg {
  width: 30px;
  height: 30px;
}

.servicio h3 {
  font-size: 1.22rem;
  margin-bottom: 10px;
}

.servicio p {
  color: var(--texto-suave);
  margin-bottom: 18px;
}

.servicio__temas {
  border-top: 1px solid var(--borde-suave);
  padding-top: 16px;
  display: grid;
  gap: 8px;
}

.servicio__temas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--texto-cuerpo);
}

.servicio__temas svg {
  width: 17px;
  height: 17px;
  color: var(--dorado-hover);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ------------------------------------------------------------
   19. Formulario de contacto
   ------------------------------------------------------------ */
.formulario {
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 44px 40px;
}

.formulario__campo {
  margin-bottom: 22px;
}

.formulario__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.formulario__fila .formulario__campo:last-child {
  margin-bottom: 22px;
}

.formulario label {
  display: block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--azul-marino);
  margin-bottom: 8px;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--borde-suave);
  border-radius: 8px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--texto-cuerpo);
  background-color: var(--gris-claro);
  transition: border-color var(--transicion), background-color var(--transicion);
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--dorado);
  background-color: var(--blanco);
  box-shadow: 0 0 0 4px rgba(205, 161, 45, 0.18);
}

.formulario textarea {
  min-height: 150px;
  resize: vertical;
}

.formulario__nota {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: rgba(82, 148, 176, 0.12);
  border-left: 4px solid var(--celeste-ola);
  color: var(--azul-marino);
  font-size: 0.9rem;
}

/* Datos de contacto */
.datos-contacto {
  background-color: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 40px 34px;
  display: grid;
  gap: 26px;
}

.datos-contacto__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.datos-contacto__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: rgba(18, 48, 84, 0.07);
  color: var(--azul-marino);
  flex-shrink: 0;
}

.datos-contacto__icono svg {
  width: 22px;
  height: 22px;
}

.datos-contacto h3 {
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.datos-contacto p,
.datos-contacto a {
  color: var(--texto-suave);
  font-size: 0.94rem;
  word-break: break-word;
}

.datos-contacto a:hover {
  color: var(--dorado-hover);
}

/* ------------------------------------------------------------
   20. CTA final
   ------------------------------------------------------------ */
.cta-final {
  background-color: var(--azul-marino-oscuro);
  position: relative;
  overflow: hidden;
}

.cta-final__contenido {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 90px 24px;
}

.cta-final h2 {
  color: var(--blanco);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: 16px;
}

.cta-final p {
  color: rgba(244, 246, 248, 0.9);
  margin-bottom: 32px;
}

.cta-final__acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ------------------------------------------------------------
   21. Pie de página (idéntico en las 6 páginas)
   ------------------------------------------------------------ */
.pie {
  background-color: var(--azul-marino-oscuro);
  color: rgba(244, 246, 248, 0.85);
}

.pie__contenido {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding: 64px 24px 48px;
}

.pie h3 {
  color: var(--blanco);
  font-size: 0.98rem;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

.pie p {
  color: rgba(244, 246, 248, 0.78);
  font-size: 0.9rem;
}

.pie__logo {
  height: 52px;
  width: auto;
  margin-bottom: 18px;
}

.pie__descripcion {
  margin-bottom: 20px;
}

.pie__sello {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.pie__enlaces li {
  margin-bottom: 10px;
}

.pie__enlaces a {
  color: rgba(244, 246, 248, 0.82);
  font-size: 0.92rem;
}

.pie__enlaces a:hover {
  color: var(--dorado);
}

.pie__contacto li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: rgba(244, 246, 248, 0.82);
}

.pie__contacto svg {
  width: 17px;
  height: 17px;
  color: var(--dorado);
  flex-shrink: 0;
  margin-top: 4px;
}

.pie__contacto a {
  color: rgba(244, 246, 248, 0.82);
}

.pie__contacto a:hover {
  color: var(--dorado);
}

.pie__redes {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(244, 246, 248, 0.25);
  color: var(--blanco);
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.pie__redes a:hover {
  background-color: var(--dorado);
  border-color: var(--dorado);
  color: var(--azul-marino-oscuro);
}

.pie__redes svg {
  width: 18px;
  height: 18px;
}

.pie__legal {
  border-top: 1px solid rgba(244, 246, 248, 0.14);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pie__legal p {
  font-size: 0.82rem;
  color: rgba(244, 246, 248, 0.62);
}

/* ------------------------------------------------------------
   22. Botón flotante de WhatsApp (visible en las 6 páginas)
   ------------------------------------------------------------ */
.whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 800;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.whatsapp-flotante:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
}

.whatsapp-flotante svg {
  width: 30px;
  height: 30px;
  fill: var(--blanco);
}

/* ------------------------------------------------------------
   23. Enlaces con flecha y bloque de descarga
   ------------------------------------------------------------ */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  color: var(--azul-marino);
  transition: color var(--transicion);
}

.enlace-flecha svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transicion);
}

.enlace-flecha:hover {
  color: var(--dorado-hover);
}

.enlace-flecha:hover svg {
  transform: translateX(4px);
}

.descarga {
  display: flex;
  align-items: center;
  gap: 22px;
  background-color: var(--blanco);
  border: 1.5px dashed var(--dorado);
  border-radius: var(--radio);
  padding: 30px 34px;
}

.descarga__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-color: rgba(205, 161, 45, 0.14);
  color: var(--dorado-hover);
  flex-shrink: 0;
}

.descarga__icono svg {
  width: 30px;
  height: 30px;
}

.descarga h3 {
  font-size: 1.08rem;
  margin-bottom: 4px;
}

.descarga p {
  color: var(--texto-suave);
  font-size: 0.92rem;
}

.descarga .boton {
  margin-left: auto;
  white-space: nowrap;
}

/* Tarjeta destacada que invita a Certificaciones */
.tarjeta-destacada {
  background-color: var(--azul-marino-oscuro);
  background-image: linear-gradient(110deg, rgba(3, 33, 69, 0.95), rgba(25, 58, 93, 0.9));
  border-radius: var(--radio);
  padding: 44px 40px;
  display: flex;
  align-items: center;
  gap: 36px;
  box-shadow: var(--sombra-fuerte);
}

.tarjeta-destacada h3 {
  color: var(--blanco);
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.tarjeta-destacada p {
  color: rgba(244, 246, 248, 0.88);
}

.tarjeta-destacada .boton {
  flex-shrink: 0;
  margin-left: auto;
}

/* ------------------------------------------------------------
   24. Accesibilidad: foco visible
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='tab']:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   25. Animaciones AOS — entradas sutiles, nunca llamativas
   ------------------------------------------------------------ */
[data-aos] {
  transition-duration: 800ms;
}

/* ------------------------------------------------------------
   26. Usuarios con "prefers-reduced-motion": sin animaciones
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   27. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .pie__contenido {
    grid-template-columns: 1fr 1fr;
  }

  .tarjeta-destacada,
  .banner-certificacion {
    flex-direction: column;
    text-align: center;
  }

  .tarjeta-destacada .boton {
    margin-left: 0;
  }

  .dos-columnas {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 920px) {
  .boton--cabecera {
    display: none;
  }

  /* Hero en móvil: degradado oscuro completo y texto a ancho completo */
  .hero {
    background-image:
      linear-gradient(115deg, rgba(3, 33, 69, 0.86) 0%, rgba(18, 48, 84, 0.74) 50%, rgba(3, 33, 69, 0.68) 100%),
      url('img/inicio/hero-bg.png');
  }

  .hero__contenido {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 96px 24px 140px;
  }

  .menu__boton {
    display: flex;
  }

  .menu__lista {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    background-color: var(--blanco);
    box-shadow: -12px 0 40px rgba(3, 33, 69, 0.22);
    padding: 96px 22px 32px;
    transform: translateX(105%);
    transition: transform 0.35s ease;
    z-index: 905;
  }

  .menu__lista.abierto {
    transform: translateX(0);
  }

  .menu__lista a {
    padding: 13px 16px;
    font-size: 1rem;
    border-radius: 10px;
  }

  .menu__lista a[aria-current='page'] {
    background-color: rgba(205, 161, 45, 0.12);
  }

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

  .mvv {
    grid-template-columns: 1fr;
  }

  .pasos {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .seccion {
    padding: 64px 0;
  }

  .rejilla--3 {
    grid-template-columns: 1fr;
  }

  .barra-superior__mensaje {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .barra-superior__enlaces {
    width: 100%;
    justify-content: center;
  }

  .formulario__fila {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .formulario {
    padding: 32px 24px;
  }

  .banner-certificacion {
    padding: 40px 26px;
  }

  .pestanas__carrusel {
    gap: 10px;
    padding: 14px 14px 12px;
  }

  .pestanas__flecha {
    width: 42px;
    height: 42px;
  }

  .pestanas__boton {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  .pestanas__progreso {
    margin: 0 16px 16px;
  }

  .pestanas__panel {
    padding: 26px 20px;
  }

  .pestanas__rejilla {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .pestanas__media {
    aspect-ratio: 16 / 9;
  }

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

  .pestanas__beneficio {
    padding: 16px 18px;
  }

  .pestanas__beneficio + .pestanas__beneficio {
    border-left: 0;
  }

  .pestanas__beneficio:nth-child(2n) {
    border-left: 1px solid var(--borde-suave);
  }

  .pestanas__beneficio:nth-child(n + 3) {
    border-top: 1px solid var(--borde-suave);
  }

  .descarga {
    flex-direction: column;
    text-align: center;
  }

  .descarga .boton {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .rejilla--4,
  .rejilla--2 {
    grid-template-columns: 1fr;
  }

  .pie__contenido {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 24px 36px;
  }

  .pie__legal {
    flex-direction: column;
    text-align: center;
  }

  .hero {
    min-height: 560px;
  }

  .hero__acciones .boton {
    width: 100%;
  }

  .logo img {
    height: 46px;
  }

  .cabecera__principal {
    min-height: 72px;
  }

  .cta-final__contenido {
    padding: 64px 24px;
  }

  .servicio {
    padding: 32px 24px;
  }

  .pestanas__beneficios {
    grid-template-columns: 1fr;
  }

  .pestanas__beneficio:nth-child(2n) {
    border-left: 0;
  }

  .pestanas__beneficio + .pestanas__beneficio {
    border-top: 1px solid var(--borde-suave);
  }

  .pestanas__destacados-cabecera {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ------------------------------------------------------------
   NUEVOS COMPONENTES
   ------------------------------------------------------------ */

/* Doble puerta de entrada (solo Inicio) */
.seccion--apretada {
  padding-top: 48px;
  padding-bottom: 56px;
}

.doble-puerta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}

.doble-puerta__tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 36px 34px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.doble-puerta__tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-fuerte);
}

.doble-puerta__icono {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--azul-marino);
  color: var(--dorado);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doble-puerta__icono svg {
  width: 28px;
  height: 28px;
}

.doble-puerta__tarjeta h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--azul-marino-oscuro);
}

.doble-puerta__tarjeta p {
  color: var(--texto-suave);
  font-size: 0.95rem;
  flex: 1;
}

.doble-puerta__enlace {
  color: var(--azul-marino);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doble-puerta__enlace:hover {
  color: var(--dorado-hover);
}

/* CTA dentro de cada bloque de servicio */
.servicio__cta {
  margin-top: 18px;
  align-self: flex-start;
}

/* Enlace cruzado entre secciones */
.nota-cruzada {
  text-align: center;
  margin-top: 34px;
  color: var(--texto-suave);
}

.nota-cruzada a {
  color: var(--azul-marino);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nota-cruzada a:hover {
  color: var(--dorado-hover);
}

/* Badge "Certificado incluido" en el catálogo */
.pestanas__badge {
  display: inline-block;
  background: var(--dorado-claro);
  color: var(--azul-marino-oscuro);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--dorado);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
}

/* Preguntas frecuentes (acordeón nativo) */
.faq {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq__item {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.faq__item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--azul-marino-oscuro);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dorado);
  line-height: 1;
  transition: transform var(--transicion);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item p {
  padding: 0 22px 20px;
  color: var(--texto-suave);
  font-size: 0.93rem;
}

@media (max-width: 920px) {
  .doble-puerta {
    grid-template-columns: 1fr;
  }

  .doble-puerta__tarjeta {
    padding: 30px 24px;
  }
}

/* Enlace Aula Virtual en la cabecera (escritorio) */
.cabecera__aula {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--azul-marino);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transicion), border-color var(--transicion);
}

.cabecera__aula:hover {
  color: var(--dorado-hover);
  border-color: var(--dorado);
}