/* =========================================================
   HASSE — Sistema de diseño compartido
   Este archivo se usa en TODAS las páginas del sitio.
   Cambiar un token aquí actualiza el sitio completo.
   ========================================================= */

/* ===================== 1. TOKENS ===================== */
:root {
  /* Colores corporativos */
  --azul: #00398e;
  --azul-claro: #1559be;
  --azul-suave: #c5ddfa;
  --azul-profundo: #002a6b;
  --naranja: #fc6b22;
  --naranja-claro: #fca663;
  --naranja-suave: #fff3ec;

  /* Color propio del producto QRPOS. Solo se usa en su página. */
  --violeta: #5b00e3;
  --violeta-claro: #cbb8ff;
  --violeta-suave: #f3edff;

  /* Neutros */
  --texto: #1f2733;
  --texto-suave: #5a6472;
  --borde: #e2e8f0;
  --fondo-suave: #f6f9fc;
  --blanco: #ffffff;

  /* Forma */
  --radio: 14px;
  --radio-sm: 10px;
  --radio-lg: 22px;
  --sombra-sm: 0 2px 8px rgba(0, 57, 142, 0.06);
  --sombra: 0 10px 30px rgba(0, 57, 142, 0.1);
  --sombra-lg: 0 20px 50px rgba(0, 57, 142, 0.16);

  /* Tipografía */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo vertical */
  --seccion-y: clamp(64px, 8vw, 104px);
}

/* ===================== 2. RESET / BASE ===================== */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* evita que el header fijo tape los anclajes */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  background: var(--blanco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

ul, ol { list-style: none; }

button { font-family: inherit; }

strong { font-weight: 700; color: var(--azul); }

/* Accesibilidad: foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 999;
  background: var(--naranja);
  color: var(--blanco);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  transition: top 0.15s ease;
}

.skip-link:focus { top: 0; }

.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;
}

/* ===================== 3. LAYOUT ===================== */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow { max-width: 820px; }

.section { padding: var(--seccion-y) 0; }
.section--muted { background: var(--fondo-suave); }
.section--tight { padding-top: clamp(40px, 5vw, 64px); }

.text-center { text-align: center; }

/* ===================== 4. TIPOGRAFÍA ===================== */
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--azul);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(30px, 4.6vw, 46px); }
h2 { font-size: clamp(25px, 3.2vw, 36px); }
h3 { font-size: clamp(18px, 1.5vw, 20px); }
h4 { font-size: 16px; }

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

.lead {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--texto-suave);
}

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 12px;
}

.eyebrow--center { text-align: center; }
.eyebrow--light { color: var(--naranja-claro); }

.tag {
  display: inline-block;
  background: var(--naranja-suave);
  color: #c94a0c;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 100px;
}

/* Encabezado de sección reutilizable */
.section-head { margin-bottom: clamp(36px, 4vw, 56px); }
.section-head h2 { margin-bottom: 14px; }

.section-head--center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-head--center .eyebrow { text-align: center; }

/* Slogan oficial de HASSE */
.slogan {
  font-weight: 700;
  color: var(--naranja);
  font-size: clamp(16px, 1.6vw, 19px);
}

.slogan--light { color: var(--naranja-claro); }

/* ===================== 5. BOTONES ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  min-height: 50px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--naranja);
  color: var(--blanco);
  box-shadow: 0 8px 20px rgba(252, 107, 34, 0.32);
}

.btn--primary:hover { background: #e35a15; transform: translateY(-2px); }

/* Secundario sobre fondo claro */
.btn--secondary {
  background: var(--blanco);
  color: var(--azul);
  border-color: var(--azul-suave);
}

.btn--secondary:hover { border-color: var(--azul-claro); color: var(--azul-claro); transform: translateY(-2px); }

/* Secundario sobre fondo oscuro */
.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--blanco); transform: translateY(-2px); }

.btn--lg { padding: 18px 32px; font-size: 16px; min-height: 58px; }
.btn--block { display: flex; width: 100%; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-group--center { justify-content: center; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--azul-claro);
}

.link-arrow::after {
  content: "→";
  transition: transform 0.15s ease;
}

.link-arrow:hover { color: var(--naranja); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ===================== 6. HEADER ===================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 20px;
}

.header__logo { flex-shrink: 0; }
.header__logo img { height: 38px; width: auto; }

/* Contenedor de navegación + botón destacado.
   En escritorio es una fila; en móvil se convierte en el menú desplegable. */
.header__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  justify-content: flex-end;
}

.header__nav {
  display: flex;
  gap: 26px;
  flex: 1;
  justify-content: center;
}

.header__nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--azul);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.header__nav a:hover { color: var(--naranja); }

/* Página actual: se marca con aria-current="page" */
.header__nav a[aria-current="page"] {
  color: var(--naranja);
  border-bottom-color: var(--naranja);
}

.header__cta { flex-shrink: 0; padding: 12px 24px; min-height: 44px; font-size: 14.5px; }

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 6px;
}

.header__burger span {
  display: block;
  height: 2px;
  background: var(--azul);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header.nav-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.nav-open .header__burger span:nth-child(2) { opacity: 0; }
.header.nav-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== 7. HERO ===================== */
.hero {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%);
  padding: clamp(56px, 7vw, 92px) 0;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.hero .tag { background: rgba(255, 255, 255, 0.14); color: var(--naranja-claro); }

.hero__title { color: var(--blanco); margin-bottom: 20px; }

.hero__subtitle {
  color: var(--azul-suave);
  font-size: clamp(16px, 1.5vw, 18px);
  margin-bottom: 22px;
  max-width: 560px;
}

.hero__slogan { margin-bottom: 30px; }

.hero--interior { padding: clamp(48px, 6vw, 76px) 0; }

.hero--interior .hero__inner { grid-template-columns: 1fr; }

.hero--interior .hero__content { max-width: 780px; }

/* Ilustración del hero */
.hero-illustration { width: 100%; height: auto; overflow: visible; }

.node-pulse {
  animation: pulse 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.chip-float {
  animation: float 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.chip-float--2 { animation-delay: 1.4s; }
.chip-float--3 { animation-delay: 2.6s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===================== 8. SOLUCIONES (selector de servicios) ===================== */
.soluciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.solucion {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 34px 30px;
  box-shadow: var(--sombra-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.solucion:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--azul-suave);
}

.solucion__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--azul-suave);
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

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

/* Logo de producto en lugar de icono. Ocupa la misma altura que el cuadro del
   icono para que las tres tarjetas mantengan el mismo ritmo vertical. */
.solucion__logo {
  height: 54px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.solucion__logo img {
  height: 40px;
  width: auto;
  max-width: 100%;
}

.solucion h3 { margin-bottom: 12px; }

.solucion > p { color: var(--texto-suave); font-size: 15.5px; margin-bottom: 20px; }

.solucion__cta { margin-top: auto; }

/* Tarjeta destacada: ocupa el ancho completo y tiene más peso visual */
.solucion--destacada {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  border: 2px solid var(--naranja);
  background: linear-gradient(180deg, var(--naranja-suave) 0%, var(--blanco) 45%);
  box-shadow: var(--sombra);
  padding: clamp(30px, 3.5vw, 44px);
}

.solucion--destacada:hover { border-color: #e35a15; }

.solucion--destacada .solucion__icon { background: var(--naranja); color: var(--blanco); }

.solucion--destacada h3 { font-size: clamp(21px, 2.2vw, 27px); }

.solucion__badge {
  position: absolute;
  top: -13px;
  left: clamp(30px, 3.5vw, 44px);
  background: var(--naranja);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
}

.solucion__panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 24px;
}

.solucion__panel h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

.solucion__nota {
  display: inline-block;
  background: var(--azul-suave);
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--radio-sm);
  margin-bottom: 20px;
}

/* Listas con check */
.checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--texto);
}

.checklist li:last-child { margin-bottom: 0; }

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--naranja);
  border-bottom: 2.5px solid var(--naranja);
  transform: rotate(-45deg);
}

.checklist--compact li { font-size: 14.5px; margin-bottom: 10px; }

/* Lista de ejemplos en formato etiqueta */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.pill-list li {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 100px;
}

/* ===================== 9. PROBLEMAS ===================== */
.problemas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.problema {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 22px;
}

.problema__mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--naranja-suave);
  color: var(--naranja);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.problema p { font-size: 15px; font-weight: 600; color: var(--texto); }

.cierre-texto {
  margin-top: 36px;
  text-align: center;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  color: var(--azul);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================== 10. BENEFICIOS ===================== */
.beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 32px;
}

.beneficio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--borde);
}

.beneficio__num {
  flex-shrink: 0;
  color: var(--naranja);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.7;
}

.beneficio h3 { font-size: 16px; margin-bottom: 4px; }
.beneficio p { font-size: 14.5px; color: var(--texto-suave); }

.nota-legal {
  margin-top: 32px;
  font-size: 13.5px;
  color: var(--texto-suave);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================== 11. TARJETAS GENÉRICAS ===================== */
.cards { display: grid; gap: 26px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul-suave);
  color: var(--azul);
  border-radius: 12px;
  margin-bottom: 16px;
}

.card__icon svg { width: 24px; height: 24px; }

.card p { color: var(--texto-suave); font-size: 15px; }

/* Separa la lista del título cuando la tarjeta lleva ambos */
.card > .checklist,
.card > .lista-no { margin-top: 16px; }

/* ===================== 12. CONFIANZA / EXPERIENCIA ===================== */
.confianza {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

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

.confianza__acciones { margin-top: 26px; }

.hechos {
  display: grid;
  gap: 14px;
}

.hecho {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--naranja);
  border-radius: var(--radio-sm);
  padding: 18px 20px;
  box-shadow: var(--sombra-sm);
}

.hecho__dato {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--azul);
  line-height: 1.1;
  flex-shrink: 0;
}

.hecho__label { font-size: 14px; color: var(--texto-suave); font-weight: 600; }

/* ===================== 13. CASO DESTACADO (SIRCO) ===================== */
.caso {
  background: var(--azul);
  padding: var(--seccion-y) 0;
  color: var(--blanco);
}

.caso__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

.caso h2 { color: var(--blanco); margin-bottom: 6px; }

/* Logo de la plataforma sobre panel claro, para que la marca naranja
   se lea con claridad sobre el fondo azul de la sección. */
.caso__marca {
  display: inline-block;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 16px 22px;
  margin: 4px 0 20px;
  box-shadow: 0 8px 22px rgba(0, 20, 55, 0.28);
}

.caso__marca img {
  width: 280px;
  max-width: 100%;
  height: auto;
}

.caso__subtitulo {
  color: var(--naranja-claro);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 18px;
}

.caso p { color: var(--azul-suave); margin-bottom: 16px; }

.caso__cierre {
  font-size: 15px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.cifras { display: grid; gap: 18px; }

.cifra {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radio);
  padding: 26px 24px;
  text-align: center;
}

.cifra__numero {
  display: block;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  color: var(--blanco);
  line-height: 1;
  margin-bottom: 8px;
}

.cifra__label { font-size: 14px; color: var(--azul-suave); font-weight: 600; }

/* ===================== 14. STATS (páginas interiores) ===================== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat {
  text-align: center;
  background: var(--azul-suave);
  border-radius: var(--radio);
  padding: 28px 16px;
}

.stat__number {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: var(--azul);
  line-height: 1.1;
}

.stat__label { font-size: 13px; color: var(--azul-claro); font-weight: 600; }

/* ===================== 15. BANDA DE AYUDA ===================== */
.ayuda {
  background: var(--naranja-suave);
  border-top: 1px solid #ffe0cd;
  border-bottom: 1px solid #ffe0cd;
  padding: clamp(48px, 6vw, 72px) 0;
}

.ayuda__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.ayuda h2 { margin-bottom: 14px; }
.ayuda p { color: var(--texto-suave); margin-bottom: 28px; }

/* ===================== 16. CTA FINAL ===================== */
.cta-final {
  background: var(--azul);
  padding: var(--seccion-y) 0;
  text-align: center;
}

.cta-final h2 { color: var(--blanco); margin-bottom: 14px; }

.cta-final__text {
  color: var(--azul-suave);
  max-width: 620px;
  margin: 0 auto 18px;
  font-size: clamp(15px, 1.4vw, 17px);
}

.cta-final .slogan { margin-bottom: 30px; }

/* ===================== 17. ACORDEÓN ===================== */
.accordion__item { border-bottom: 1px solid var(--borde); }

.accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--azul);
  padding: 20px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.accordion__trigger:hover { color: var(--naranja); }

.accordion__plus {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.accordion__plus::before,
.accordion__plus::after {
  content: "";
  position: absolute;
  background: var(--naranja);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.accordion__plus::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.accordion__plus::after { top: 2px; left: 9px; width: 2px; height: 16px; }

.accordion__item.is-open .accordion__plus::after { transform: rotate(90deg); opacity: 0; }

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.accordion__panel p {
  padding: 0 4px 20px;
  color: var(--texto-suave);
  font-size: 15px;
}

/* ===================== 18. PASOS ===================== */
.steps { display: flex; flex-direction: column; gap: 20px; }

.steps li { display: flex; align-items: flex-start; gap: 18px; }

.steps__num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps li p { padding-top: 6px; color: var(--texto); }

/* ===================== 19. GALERÍA / PLACEHOLDERS ===================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery__item {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery__item:hover img { transform: scale(1.04); }

.founder-photo {
  aspect-ratio: 1;
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.founder-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Retrato vertical, para la página Nosotros */
.founder-photo--retrato {
  aspect-ratio: 4 / 5;
  max-width: 380px;
}

.founder-photo__pie {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--texto-suave);
  text-align: center;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Foto de producto sobre panel claro ===== */
.foto-producto {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  justify-content: center;
}

.foto-producto img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* ===== Imagen de apoyo dentro de un bloque de texto ===== */
.figura {
  max-width: 620px;
  margin: 34px auto 0;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.figura img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ===== Panel claro para el logo de un producto ===== */
.logo-panel {
  display: inline-block;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 16px 22px;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px rgba(0, 20, 55, 0.28);
}

.logo-panel img {
  width: 200px;
  max-width: 100%;
  height: auto;
}

/* ===== Lista de exclusión (para quién NO es) ===== */
.lista-no li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--texto-suave);
}

.lista-no li:last-child { margin-bottom: 0; }

.lista-no li::before {
  content: "×";
  position: absolute;
  left: 7px;
  top: -1px;
  color: var(--gris-oscuro, #8a94a3);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
}

/* =========================================================
   TEMA QRPOS
   QRPOS es un producto con identidad propia. En su página los
   elementos decorativos usan su violeta, mientras los botones
   conservan el naranja de HASSE para que la acción se vea igual
   en todo el sitio.
   ========================================================= */
.tema-qrpos .eyebrow { color: var(--violeta); }
.tema-qrpos .eyebrow--light { color: var(--violeta-claro); }

.tema-qrpos .checklist li::before { border-color: var(--violeta); }

.tema-qrpos .card__icon,
.tema-qrpos .problema__mark {
  background: var(--violeta-suave);
  color: var(--violeta);
}

.tema-qrpos .beneficio__num { color: var(--violeta); }

.tema-qrpos .hero .tag {
  background: rgba(255, 255, 255, 0.15);
  color: var(--violeta-claro);
}

.tema-qrpos .destacado {
  background: var(--violeta-suave);
  color: #3d0099;
}

.tema-qrpos .destacado strong { color: #2d0072; }

.tema-qrpos .link-arrow { color: var(--violeta); }
.tema-qrpos .link-arrow:hover { color: var(--naranja); }

.tema-qrpos .cierre-texto { color: var(--violeta); }

/* Panel del estándar GS1 */
.gs1-panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--violeta);
  border-radius: var(--radio);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--sombra-sm);
}

.gs1-panel h3 { margin-bottom: 12px; }
.gs1-panel p { color: var(--texto-suave); margin-bottom: 14px; }
.gs1-panel p:last-child { margin-bottom: 0; }

/* Comparación 1D contra 2D */
.comparativa {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 26px 0 0;
}

.comparativa__item {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 20px 22px;
}

.comparativa__item h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-suave);
  margin-bottom: 8px;
}

.comparativa__item p { font-size: 14.5px; color: var(--texto); margin: 0; }

.comparativa__item--destacado {
  background: var(--violeta-suave);
  border-color: #d9c9ff;
}

@media (max-width: 620px) {
  .comparativa { grid-template-columns: 1fr; }
}

/* ===== Valores ===== */
.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.valor {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 17px 20px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--azul);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.valor:hover { border-color: var(--naranja-claro); transform: translateY(-2px); }

.valor::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--naranja);
  transform: rotate(45deg);
}

.placeholder-box {
  background: var(--blanco);
  border: 2px dashed var(--azul-suave);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
  min-height: 140px;
}

/* ===================== 20. FOOTER ===================== */
.footer {
  background: var(--azul-profundo);
  color: var(--azul-suave);
  padding: clamp(48px, 6vw, 68px) 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px 32px;
  padding-bottom: 40px;
}

.footer__logo { height: 34px; margin-bottom: 16px; filter: brightness(0) invert(1); }

.footer__marca p { color: var(--azul-suave); font-size: 14.5px; }

.footer__marca .slogan { font-size: 15px; margin-top: 10px; }

.footer h3 {
  color: var(--blanco);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 16px;
}

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

.footer__links a,
.footer__contacto a {
  color: var(--azul-suave);
  font-size: 14.5px;
}

.footer__links a:hover,
.footer__contacto a:hover { color: var(--naranja-claro); }

.footer__contacto li { margin-bottom: 10px; font-size: 14.5px; }

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

.footer__redes a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
}

.footer__redes a:hover { background: var(--naranja); }
.footer__redes svg { width: 18px; height: 18px; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
}

.footer__bottom p { color: var(--azul-suave); opacity: 0.8; }

.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a { color: var(--azul-suave); opacity: 0.8; }
.footer__legal a:hover { color: var(--naranja-claro); opacity: 1; }

/* ===================== 21. WHATSAPP FLOTANTE ===================== */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
}

.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }

/* ===================== 22. BANDA DE MENSAJE ===================== */
/* Bloque centrado de fondo azul para destacar una promesa o un cierre. */
.banda {
  background: var(--azul);
  padding: clamp(56px, 6.5vw, 84px) 0;
  text-align: center;
}

.banda__inner {
  max-width: 760px;
  margin: 0 auto;
}

.banda h2 { color: var(--blanco); margin-bottom: 16px; }

.banda p {
  color: var(--azul-suave);
  font-size: clamp(16px, 1.5vw, 18px);
  margin-bottom: 16px;
}

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

/* Variante naranja, para hablar directamente al lector */
.banda--naranja {
  background: linear-gradient(135deg, var(--naranja) 0%, #ff8a50 100%);
}

.banda--naranja p { color: #fff2ea; }

/* Línea de urgencia / disponibilidad */
.urgencia {
  font-size: 14px;
  font-weight: 600;
  color: var(--naranja-claro);
  margin-top: 18px;
}

/* Lista de respaldo con viñeta naranja */
.lista-respaldo {
  max-width: 760px;
  margin: 0 auto;
}

.lista-respaldo li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 15px;
  color: var(--texto-suave);
  font-size: 15.5px;
}

.lista-respaldo li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja);
}

/* Bloque de dos columnas: texto + tarjeta o imagen */
.duo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.duo--arriba { align-items: start; }

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

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

/* Dato destacado dentro de un bloque de texto */
.destacado {
  color: var(--azul);
  font-weight: 600;
  background: var(--azul-suave);
  padding: 14px 18px;
  border-radius: var(--radio-sm);
  display: inline-block;
  margin-top: 6px;
}

/* Tarjeta de oferta con lista y botón */
.panel-oferta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--sombra);
}

.panel-oferta h3 { margin-bottom: 18px; }

.panel-oferta .checklist { margin-bottom: 26px; }

.panel-oferta p { color: var(--texto-suave); font-size: 15px; }

.panel-oferta + .panel-oferta { margin-top: 22px; }

/* Lista de datos de contacto */
.datos-contacto li {
  padding: 13px 0;
  border-bottom: 1px solid var(--borde);
}

.datos-contacto li:first-child { padding-top: 0; }
.datos-contacto li:last-child { border-bottom: none; padding-bottom: 0; }

.datos-contacto__etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

.datos-contacto__valor {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--azul);
}

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

/* Redes sociales sobre fondo claro */
.redes {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.redes a {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.redes a:hover {
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--blanco);
}

.redes svg { width: 19px; height: 19px; }

/* ===================== 23. LISTAS EN VARIAS COLUMNAS ===================== */
.checklist--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 32px;
}

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

.checklist--grid li,
.checklist--grid-2 li { margin-bottom: 14px; }

.checklist--grid-2 li { font-size: 15px; }

.checklist--grid-2 strong { display: block; }

/* ===================== 24. FORMULARIO ===================== */
.form-wrap {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(26px, 3.5vw, 44px);
  box-shadow: var(--sombra);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.campo { display: flex; flex-direction: column; }

.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: 14px;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 7px;
}

.campo__opcional {
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: none;
}

.campo input,
.campo select,
.campo textarea {
  font-family: var(--font);
  font-size: 15px;
  color: var(--texto);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 13px 15px;
  min-height: 50px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo textarea { min-height: 132px; resize: vertical; }

.campo select { cursor: pointer; }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #c4d0e0; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(21, 89, 190, 0.16);
}

/* Estado de error accesible */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #c62828; }

.campo input[aria-invalid="true"]:focus,
.campo select[aria-invalid="true"]:focus,
.campo textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.16);
}

.campo__error {
  display: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #c62828;
  margin-top: 6px;
}

.campo__error.is-visible { display: block; }

/* Casilla de privacidad */
.campo--check {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.campo--check input {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--naranja);
  cursor: pointer;
}

.campo--check label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 0;
  cursor: pointer;
}

.campo--check a { color: var(--azul-claro); text-decoration: underline; font-weight: 700; }
.campo--check a:hover { color: var(--naranja); }

.campo--check .campo__error { margin-top: 4px; }

.form__nota {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-top: -6px;
}

.form__acciones { grid-column: 1 / -1; margin-top: 4px; }

/* Campo trampa contra spam: invisible para personas, visible para bots */
.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensajes de resultado */
.form__mensaje {
  display: none;
  border-radius: var(--radio);
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.form__mensaje.is-visible { display: block; }

.form__mensaje--exito {
  background: #e8f6ee;
  border: 1.5px solid #7cc79b;
  color: #1c6b3f;
}

.form__mensaje--error {
  background: #fdecec;
  border: 1.5px solid #e8a0a0;
  color: #a52020;
}

.form__mensaje a { text-decoration: underline; font-weight: 700; color: inherit; }

@media (max-width: 900px) {
  .checklist--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .checklist--grid,
  .checklist--grid-2,
  .form-grid { grid-template-columns: 1fr; }
}

/* ===================== 25. PÁGINAS LEGALES ===================== */
/* Texto corrido para Aviso de Privacidad y Términos y Condiciones. */
.prosa {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

.prosa > h2 {
  font-size: clamp(20px, 1.9vw, 25px);
  margin-top: 46px;
  margin-bottom: 14px;
  scroll-margin-top: 100px;
}

.prosa > h2:first-child { margin-top: 0; }

.prosa h3 {
  font-size: 17px;
  margin-top: 26px;
  margin-bottom: 10px;
}

.prosa p { margin-bottom: 16px; }

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

/* Las listas legales sí llevan viñeta y numeración */
.prosa ul,
.prosa ol {
  margin: 0 0 20px 24px;
}

.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }

.prosa li {
  margin-bottom: 9px;
  padding-left: 4px;
}

.prosa li::marker { color: var(--naranja); }

.prosa ul ul { margin-top: 9px; margin-bottom: 0; list-style: circle; }

.prosa a {
  color: var(--azul-claro);
  text-decoration: underline;
  font-weight: 600;
}

.prosa a:hover { color: var(--naranja); }

/* Fecha de última actualización */
.prosa__fecha {
  display: inline-block;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 36px;
}

/* Índice de contenido */
.indice {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 30px;
  margin-bottom: 44px;
}

.indice h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin: 0 0 16px;
}

.indice ol {
  list-style: decimal;
  margin: 0 0 0 20px;
  columns: 2;
  column-gap: 32px;
}

.indice li {
  margin-bottom: 9px;
  break-inside: avoid;
}

.indice a {
  color: var(--azul);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.indice a:hover { color: var(--naranja); text-decoration: underline; }

@media (max-width: 620px) {
  .indice ol { columns: 1; }
  .indice { padding: 22px 24px; }
}

/* ===================== 26. MARCADOR DE DATO PENDIENTE ===================== */
/* Resalta los datos que HASSE debe completar antes de publicar.
   Al terminar, borra esta regla junto con los <span class="pendiente">. */
.pendiente {
  background: #fff3b0;
  color: #7a5c00;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ===================== 27. RESPONSIVE ===================== */
@media (max-width: 980px) {
  .solucion--destacada { grid-template-columns: 1fr; }
  .confianza,
  .duo,
  .caso__inner { grid-template-columns: 1fr; }
  .problemas,
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Navegación móvil: el menú completo se despliega bajo el header */
  .header__menu { display: none; }

  .header__burger { display: flex; }

  .header.nav-open .header__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--blanco);
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }

  .header__nav {
    flex-direction: column;
    gap: 0;
  }

  .header__nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 16px;
  }

  .header__cta {
    margin-top: 18px;
    width: 100%;
  }

  /* En móvil el mensaje principal va primero; la ilustración queda debajo
     para que el título y los botones se vean sin desplazarse. */
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 420px; margin: 8px auto 0; }
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .soluciones,
  .problemas,
  .beneficios,
  .cards--4 { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { justify-content: flex-start; }
  .btn { width: 100%; }
  .btn-group { flex-direction: column; }
  .hecho { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ===================== 28. MOVIMIENTO REDUCIDO ===================== */
@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;
  }
}

/* ===================== 29. IMPRESIÓN ===================== */
@media print {
  .header, .wa-float, .btn { display: none !important; }
  body { color: #000; }
}