/* =========================================================================
   MI8 SEGURIDAD PRIVADA — HOJA DE ESTILOS
   -------------------------------------------------------------------------
   Este archivo está organizado por secciones (busca los títulos en
   mayúsculas con "====" para saltar rápido a la sección que quieras editar).

   1. VARIABLES (colores, fuentes) — edítalas aquí y cambian en todo el sitio
   2. FUENTES (@font-face)
   3. BASE / RESET
   4. UTILIDADES (contenedor, botones, etiquetas "eyebrow")
   5. HEADER / MENÚ
   6. HERO
   7. BANDA DE CERTIFICACIONES (marquee)
   8. CINCO PILARES (tarjetas)
   9. COMPROMISO INSTITUCIONAL
   10. NUESTRA POSTURA
   11. SERVICIOS POR SEGMENTO
   12. DIAGNÓSTICO GRATUITO
   13. CÓMO TRABAJAMOS (timeline)
   14. POSTÚLATE CON NOSOTROS
   15. CLIENTES
   16. PREGUNTAS FRECUENTES
   17. CTA FINAL
   18. CONTACTO
   19. FOOTER
   20. PÁGINAS LEGALES (aviso de privacidad / cookies)
   21. PÁGINA DE GRACIAS
   22. RESPONSIVE (móvil / tablet)
   ========================================================================= */


/* =========================================================================
   1. VARIABLES — cambia estos valores y se actualiza todo el sitio
   ========================================================================= */
:root {
  /* Colores de marca */
  --color-teal: #00a79a;
  --color-teal-dark: #0b3b39;
  --color-navy: #0a2e42;
  --color-mint: #8fefe3;

  /* Degradado oscuro usado en varias secciones */
  --gradient-dark: linear-gradient(138.69deg, #0b3b39 0%, #0a2e42 100%);

  /* Texto */
  --color-text-dark: #131313;
  --color-text-body: #35383d;
  --color-text-muted: #8c8f96;

  /* Fondos y bordes */
  --color-border: #e5e7eb;
  --color-bg-light: #f5f6f7;
  --color-white: #ffffff;
  --color-footer-bg: #17181b;

  /* Fuentes */
  --font-principal: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-display: "Space Grotesk", sans-serif;

  /* Tamaño máximo del contenido */
  --max-width: 1284px;

  /* Bordes redondeados */
  --radio-tarjeta: 16px;
  --radio-grande: 32px;
}

/* =========================================================================
   2. FUENTES — alojadas localmente en /fonts, sin depender de internet
   ========================================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-bold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-bold.woff2") format("woff2");
}

/* =========================================================================
   3. BASE / RESET
   ========================================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-principal);
  color: var(--color-text-dark);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

section[id] {
  scroll-margin-top: 124px; /* evita que el menú fijo tape el inicio de la sección */
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* =========================================================================
   4. UTILIDADES
   ========================================================================= */
.contenedor {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .contenedor { padding: 0 24px; }
}
@media (min-width: 1024px) {
  .contenedor { padding: 0 32px; }
}

.etiqueta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.etiqueta__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-teal-dark);
  flex-shrink: 0;
}
.etiqueta__texto {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: var(--color-text-dark);
}
.etiqueta--clara .etiqueta__punto {
  background: var(--color-mint);
  box-shadow: 0 0 0 3px rgba(143, 239, 227, 0.35);
}
.etiqueta--clara .etiqueta__texto {
  color: var(--color-mint);
}
.etiqueta--centrada {
  justify-content: center;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.boton--primario {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}
.boton--primario:hover {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
}
.boton--secundario {
  background: transparent;
  border-color: var(--color-text-dark);
  color: var(--color-text-dark);
}
.boton--secundario:hover {
  background: var(--color-bg-light);
}
.boton--sobre-oscuro {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.boton--sobre-oscuro:hover {
  background: var(--color-white);
  color: var(--color-teal-dark);
}
.boton--ancho-completo {
  width: 100%;
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.grupo-botones--centrado {
  justify-content: center;
}

/* Patrón decorativo de arcos — usado en fondos claros */
.patron-ondas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Patrón decorativo de círculos — usado en fondos oscuros */
.patron-orbes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.seccion {
  padding: 96px 0;
}
.seccion--oscura {
  background: var(--gradient-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.seccion--relativa {
  position: relative;
  overflow: hidden;
}


/* =========================================================================
   5. HEADER / MENÚ
   ========================================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108px;
  padding: 0 34px; /* más aire en móvil que el resto de las secciones */
}
.header__logo img {
  height: 58px;
  width: auto;
}
@media (min-width: 640px) {
  .header__contenido { padding: 0 24px; } /* vuelve a coincidir con .contenedor a partir de aquí */
  .header__logo img { height: 76px; }
}
@media (min-width: 1024px) {
  .header__contenido { padding: 0 32px; }
}
.header__links {
  display: none;
  align-items: center;
  gap: 32px;
}
.header__links a {
  font-size: 14px;
  color: var(--color-text-body);
  transition: color 0.2s ease;
}
.header__links a:hover {
  color: var(--color-teal);
}
.header__cta {
  display: none;
}
.header__toggle {
  display: flex;
  background: none;
  border: none;
  padding: 8px;
  color: var(--color-text-body);
}
.header__toggle svg {
  width: 24px;
  height: 24px;
}
.header__toggle .icono-cerrar {
  display: none;
}

/* Menú móvil: se muestra al marcar el checkbox oculto (sin necesidad de JS) */
#menu-movil-check {
  display: none;
}
.header__menu-movil {
  display: none;
  flex-direction: column;
  gap: 16px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 20px;
}
.header__menu-movil a {
  font-size: 15px;
  color: var(--color-text-body);
}
#menu-movil-check:checked ~ .header__menu-movil {
  display: flex;
}
#menu-movil-check:checked ~ .header__contenido .icono-menu {
  display: none;
}
#menu-movil-check:checked ~ .header__contenido .icono-cerrar {
  display: block;
}

/* =========================================================================
   6. HERO
   ========================================================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 108px;
}
.hero__fondo {
  position: absolute;
  inset: 0;
}
.hero__fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__degradado {
  position: absolute;
  inset: 0;
  background: linear-gradient(253deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.97) 77%);
}
.hero__contenido {
  position: relative;
  width: 100%;
  padding: 96px 20px;
}
@media (min-width: 640px) {
  .hero__contenido { padding: 96px 24px; }
}
@media (min-width: 1024px) {
  .hero__contenido { padding: 96px 32px; }
}
.hero__texto {
  max-width: 580px;
}
.hero__titulo {
  font-size: clamp(40px, 5vw, 62px);
  color: #000;
  margin-bottom: 24px;
}
.hero__titulo span {
  color: var(--color-teal);
}
.hero__parrafo {
  font-size: 18px;
  color: #202226;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 500px;
}
.hero__acciones {
  margin-bottom: 40px;
}
.hero__confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.hero__confianza-item {
  font-size: 13px;
  color: #202226;
}
.hero__confianza-item strong {
  font-weight: 700;
}

/* =========================================================================
   7. BANDA DE CERTIFICACIONES (marquee animado)
   ========================================================================= */
.banda {
  background: linear-gradient(to right, var(--color-teal-dark), #1ea19c);
  overflow: hidden;
  padding: 28px 0;
}
.banda__pista {
  display: flex;
  width: max-content;
  animation: desplazar-izquierda 32s linear infinite;
}
.banda__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 48px;
}
.banda__item img {
  width: 15px;
  height: 15px;
  margin-right: 12px;
}
.banda__item span {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
}

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


/* =========================================================================
   8. CINCO PILARES (tarjetas)
   ========================================================================= */
.pilares__encabezado {
  max-width: 720px;
  margin-bottom: 56px;
}
.pilares__encabezado h2 {
  font-size: clamp(28px, 3.5vw, 43px);
  margin-bottom: 16px;
}
.pilares__encabezado p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.65;
}
.pilares__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}
.tarjeta-pilar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-tarjeta);
  padding: 28px;
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.04);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.tarjeta-pilar:hover {
  background: var(--color-teal);
  border-color: var(--color-teal);
}
/* Los checks son de color teal por defecto; al pasar el mouse (fondo teal)
   se vuelven blancos para que se sigan viendo bien */
.tarjeta-pilar:hover .tarjeta-pilar__lista img {
  filter: brightness(0) invert(1);
}
.tarjeta-pilar__marca {
  width: 10px;
  height: 10px;
  background: var(--color-teal);
  border-radius: 2px;
  margin-bottom: 20px;
}
.tarjeta-pilar__numero {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.75px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.tarjeta-pilar__titulo {
  font-size: 20px;
  margin-bottom: 12px;
}
.tarjeta-pilar__desc {
  font-size: 14.5px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tarjeta-pilar__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tarjeta-pilar__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.tarjeta-pilar__lista img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: filter 0.25s ease;
}

/* =========================================================================
   9. COMPROMISO INSTITUCIONAL
   ========================================================================= */
.compromiso {
  padding: 112px 0;
  text-align: center;
}
.compromiso__comillas {
  position: absolute;
  top: 16px;
  right: 25%;
  font-family: var(--font-display);
  font-size: 240px;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.compromiso__contenido {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
}
.compromiso__frase {
  font-size: clamp(28px, 4vw, 48px);
  color: var(--color-white);
  line-height: 1.35;
  margin: 32px 0 40px;
}
.compromiso__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}
.compromiso__tags span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dffcf8;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.93px;
}
.compromiso__tags span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint);
  flex-shrink: 0;
}

/* =========================================================================
   10. NUESTRA POSTURA
   ========================================================================= */
.postura__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
.postura__foto {
  border-radius: 50px 10px 50px 10px;
  overflow: hidden;
  height: 360px;
  background: var(--color-teal-dark);
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}
.postura__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* --- Carrusel de "Nuestra postura" (5 fotos) --- */
.carrusel-postura {
  position: relative;
}
.carrusel-postura__slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.carrusel-postura__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.carrusel-postura__slide.es-activa {
  opacity: 1;
  pointer-events: auto;
}
.carrusel-postura__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.carrusel-postura__flecha:hover {
  background: var(--color-white);
}
.carrusel-postura__flecha svg {
  width: 18px;
  height: 18px;
}
.carrusel-postura__flecha--prev { left: 14px; }
.carrusel-postura__flecha--next { right: 14px; }
.carrusel-postura__puntos {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carrusel-postura__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.carrusel-postura__punto.es-activo {
  background: var(--color-white);
  transform: scale(1.3);
}

.postura__titulo {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 16px;
  line-height: 1.2;
}
.postura__intro {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.65;
  margin-bottom: 32px;
}
.postura__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.postura__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.postura__item:last-child {
  border-bottom: none;
}
.postura__marca {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.postura__marca::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-teal);
  border-radius: 50%;
}
.postura__item h4 {
  font-size: 16px;
  margin-bottom: 4px;
}
.postura__item p {
  font-size: 14.5px;
  color: var(--color-text-body);
}


/* =========================================================================
   11. SERVICIOS POR SEGMENTO
   -------------------------------------------------------------------------
   2 columnas fijas: el texto de la izquierda nunca cambia; a la derecha
   vive el acordeón completo (los 5 sectores). Cada sector es un bloque
   autocontenido (radio + encabezado + panel) que se expande EN SU MISMO
   LUGAR dentro de esa columna — un acordeón real, sin JavaScript.
   ========================================================================= */
.sectores__tarjeta {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  padding: 56px 24px;
  background: var(--gradient-dark);
  color: var(--color-white);
}
.sectores__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.sectores__intro h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  margin: 0 0 20px;
}
.sectores__intro p {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  max-width: 480px;
}

/* Columna derecha: el acordeón completo */
.sectores__acordeon {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cada sector es una "tarjeta" blanca autocontenida (encabezado + panel) */
.acordeon-item {
  position: relative;
  background: var(--color-white);
  border-radius: 24px;
  overflow: hidden;
  color: var(--color-text-dark);
}
.acordeon-item__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.acordeon-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
}
.acordeon-item__chevron {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

/* Panel: oculto por defecto; se muestra y anima al marcar su radio */
@keyframes panel-aparece {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.acordeon-item__panel {
  display: none;
  padding: 0 28px 28px;
}
.acordeon-item__radio:checked ~ .acordeon-item__panel {
  display: block;
  animation: panel-aparece 0.35s ease;
}
.acordeon-item__radio:checked ~ .acordeon-item__header .acordeon-item__chevron {
  transform: rotate(180deg);
}

.acordeon-item__titulo2 {
  font-size: 21px;
  margin-bottom: 10px;
}
.acordeon-item__desc {
  font-size: 14.5px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 16px;
}
.acordeon-item__detalle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.acordeon-item__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acordeon-item__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.acordeon-item__lista img {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.acordeon-item__foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px 4px 16px 4px;
}

/* =========================================================================
   12. DIAGNÓSTICO GRATUITO
   ========================================================================= */
.diagnostico__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.diagnostico__foto {
  border-radius: 40px 10px 40px 10px;
  overflow: hidden;
  height: 320px;
  background: rgba(0, 0, 0, 0.3);
}
.diagnostico__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diagnostico__titulo {
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 20px;
  line-height: 1.2;
}
.diagnostico__parrafo {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin-bottom: 40px;
}
.diagnostico__pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.diagnostico__paso-numero {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-mint);
  margin-bottom: 8px;
}
.diagnostico__paso h4 {
  font-size: 15.5px;
  margin-bottom: 6px;
}
.diagnostico__paso p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}
.diagnostico__pie {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.diagnostico__pie p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 420px;
}


/* =========================================================================
   13. CÓMO TRABAJAMOS (timeline)
   ========================================================================= */
.proceso__encabezado {
  max-width: 900px;
  margin: 0 auto 64px;
  text-align: center;
}
.proceso__icono {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.proceso__encabezado h2 {
  font-size: clamp(28px, 3.5vw, 43px);
  margin-bottom: 16px;
}
.proceso__encabezado p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.65;
}
.proceso__timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.paso-proceso {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
.paso-proceso__tarjeta {
  border-radius: 16px;
  padding: 20px 24px;
  color: var(--color-white);
  background: var(--gradient-dark);
}
.paso-proceso__tarjeta h4 {
  font-size: 15.5px;
  margin-bottom: 4px;
}
.paso-proceso__tarjeta p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.paso-proceso__foto {
  display: none; /* las miniaturas circulares solo se muestran desde tablet */
}
.proceso__pie {
  max-width: 900px;
  margin: 64px auto 0;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}
.proceso__pie p {
  font-size: 15px;
  color: var(--color-text-body);
  margin-bottom: 24px;
}

/* =========================================================================
   14. POSTÚLATE CON NOSOTROS
   ========================================================================= */
.postulacion__tarjeta {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 48px 24px;
  background: var(--gradient-dark);
  color: var(--color-white);
}
.postulacion__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.postulacion__intro h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 16px;
  line-height: 1.15;
}
.postulacion__intro p {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}
.postulacion__foto {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 24px;
}

/* Formularios (compartido por postulación y contacto) */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.formulario__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.formulario__campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}
.formulario__campo input,
.formulario__campo textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: var(--color-white);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-dark);
  outline: none;
  transition: box-shadow 0.2s ease;
  resize: none;
}
.formulario__campo input:focus,
.formulario__campo textarea:focus {
  box-shadow: 0 0 0 3px var(--color-teal);
}
.formulario__campo input::placeholder,
.formulario__campo textarea::placeholder {
  color: var(--color-text-muted);
}
.formulario__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.formulario__checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-teal);
}
.formulario__checkbox span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
}
.formulario__enviar {
  display: flex;
  justify-content: flex-end;
}
.formulario__nota {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 4px;
}

/* =========================================================================
   15. CLIENTES
   ========================================================================= */
.clientes__encabezado {
  text-align: center;
  margin-bottom: 48px;
}
.clientes__encabezado h2 {
  font-size: clamp(28px, 3.5vw, 43px);
}
.clientes__encabezado h2 span {
  color: var(--color-teal);
}
.clientes__pista-contenedor {
  overflow: hidden;
}
.clientes__pista {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: desplazar-izquierda 42s linear infinite;
}
.logo-cliente {
  flex-shrink: 0;
  width: 168px;
  height: 96px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.logo-cliente img {
  max-height: 60px;
  max-width: 132px;
  object-fit: contain;
}

/* =========================================================================
   16. PREGUNTAS FRECUENTES
   También con <details>/<summary>: sin JavaScript.
   ========================================================================= */
.faq__encabezado {
  max-width: 885px;
  margin-bottom: 48px;
}
.faq__encabezado h2 {
  font-size: clamp(28px, 3.5vw, 43px);
  line-height: 1.15;
}
.faq__lista {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item {
  background: var(--color-white);
  color: var(--color-text-dark);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .icono-mas,
.faq-item summary .icono-menos {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.faq-item summary .icono-menos {
  display: none;
}
.faq-item[open] summary .icono-mas {
  display: none;
}
.faq-item[open] summary .icono-menos {
  display: block;
}
.faq-item__respuesta {
  padding: 0 28px 24px;
  font-size: 14.5px;
  color: #202226;
  line-height: 1.6;
}


/* =========================================================================
   17. CTA FINAL (con foto de fondo)
   ========================================================================= */
.cta-final {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
}
.cta-final__fondo {
  position: absolute;
  inset: 0;
}
.cta-final__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-final__oscurecer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.cta-final__contenido {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.cta-final__contenido h2 {
  font-size: clamp(28px, 3.5vw, 43px);
  color: var(--color-white);
  line-height: 1.2;
  margin: 20px 0;
}
.cta-final__contenido > p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 36px;
}

/* =========================================================================
   18. CONTACTO
   ========================================================================= */
.contacto__intro {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}
.contacto__intro h2 {
  font-size: clamp(28px, 3.5vw, 43px);
  color: var(--color-teal-dark);
  margin-bottom: 16px;
}
.contacto__intro p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.65;
  margin-bottom: 24px;
}
.contacto__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  font-size: 14px;
  color: var(--color-text-body);
}
.contacto__datos a {
  transition: color 0.2s ease;
}
.contacto__datos a:hover {
  color: var(--color-teal);
}
.contacto__tarjeta {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 24px;
  background: var(--gradient-dark);
}
.formulario__campo--ancho label {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
}

/* =========================================================================
   19. FOOTER
   ========================================================================= */
.footer {
  background: var(--color-footer-bg);
  border-top: 1px solid #35383d;
}
.footer__contenido {
  padding: 56px 20px 32px;
}
@media (min-width: 640px) {
  .footer__contenido { padding: 56px 24px 32px; }
}
@media (min-width: 1024px) {
  .footer__contenido { padding: 56px 32px 32px; }
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer__marca img {
  height: 42px;
  margin-bottom: 16px;
}
.footer__marca p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Redes sociales */
.footer__social {
  display: flex;
  gap: 12px;
}
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #35383d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
}
.footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: #f5f6f7;
  margin-bottom: 16px;
}
.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.footer__col a:hover {
  color: var(--color-teal);
}
.footer__inferior {
  border-top: 1px solid #35383d;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__inferior p {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* =========================================================================
   20. PÁGINAS LEGALES (aviso de privacidad / política de cookies)
   ========================================================================= */
.legal {
  padding: 160px 0 96px;
  min-height: 60vh;
}
.legal__contenido {
  max-width: 820px;
  margin: 0 auto;
}
.legal__contenido h1 {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-teal-dark);
  margin-bottom: 12px;
}
.legal__fecha {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: 40px;
}
.legal__contenido h2 {
  font-size: 22px;
  color: var(--color-text-dark);
  margin: 36px 0 12px;
}
.legal__contenido p,
.legal__contenido li {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 1.7;
}
.legal__contenido ul,
.legal__contenido ol {
  padding-left: 22px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal__contenido p {
  margin-bottom: 12px;
}
.legal__marcador {
  background: var(--color-bg-light);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 20px 0;
}

/* =========================================================================
   21. PÁGINA DE GRACIAS (confirmación tras enviar un formulario)
   ========================================================================= */
.gracias {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.gracias__icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.gracias__icono svg {
  width: 28px;
  height: 28px;
  stroke: white;
}
.gracias h1 {
  font-size: clamp(26px, 4vw, 36px);
  color: var(--color-teal-dark);
  margin-bottom: 12px;
}
.gracias p {
  font-size: 16px;
  color: var(--color-text-body);
  margin-bottom: 32px;
}


/* =========================================================================
   22. RESPONSIVE — a partir de aquí se adapta a tablet y escritorio
   ========================================================================= */

/* --- Tablet (≥640px) --- */
@media (min-width: 640px) {
  .pilares__grid { grid-template-columns: repeat(2, 1fr); }
  .diagnostico__pasos { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .formulario__fila { grid-template-columns: repeat(2, 1fr); }
  .acordeon-item__detalle { grid-template-columns: 1fr 140px; }
  .paso-proceso { grid-template-columns: 1fr 1fr; gap: 40px; }
  .paso-proceso__foto {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid var(--color-white);
    box-shadow: 0 0 0 1px var(--color-border);
    overflow: hidden;
    z-index: 2;
  }
  .paso-proceso__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .paso-proceso:nth-child(odd) .paso-proceso__tarjeta { grid-column: 1; padding-right: 80px; }
  .paso-proceso:nth-child(even) .paso-proceso__tarjeta { grid-column: 2; padding-left: 80px; }
  .proceso__timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
    transform: translateX(-50%);
  }
}

/* --- Escritorio pequeño (≥1024px) --- */
@media (min-width: 1024px) {
  .header__links { display: flex; }
  .header__cta { display: inline-flex; }
  .header__toggle { display: none; }

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

  .postura__grid { grid-template-columns: 1fr 1fr; }
  .postura__foto { height: 550px; margin: 0; }

  .sectores__tarjeta { padding: 80px 56px; }
  .sectores__grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }

  .diagnostico__grid { grid-template-columns: 0.85fr 1.15fr; }
  .diagnostico__foto { height: 420px; }

  .postulacion__tarjeta { padding: 64px 56px; }
  .postulacion__grid { grid-template-columns: 1fr 1fr; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__inferior { flex-direction: row; align-items: center; justify-content: space-between; }
}



/* =========================================================================
   23. BOTÓN FLOTANTE DE WHATSAPP
   Aparece fijo en la esquina inferior derecha en todas las páginas.
   ========================================================================= */
.boton-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.boton-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
}
.boton-whatsapp svg {
  width: 30px;
  height: 30px;
}
@media (max-width: 640px) {
  .boton-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
  .boton-whatsapp svg {
    width: 27px;
    height: 27px;
  }
}