:root {
  --color-light: #F3F5F6;
  --color-white: #FFFFFF;
  --color-dark: #0C3452;
  --color-blue: #2B8CEF;
  --color-text: #0B1620;
  --color-muted: #586875;
  --color-border: #D9E2E8;
  --color-error: #B42318;
  --shadow-soft: 0 18px 50px rgba(12, 52, 82, 0.14);
  --shadow-card: 0 10px 28px rgba(12, 52, 82, 0.10);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --header-offset: 76px;
  --container: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-light);
  color: var(--color-text);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(43, 140, 239, 0.22); }

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

a { color: inherit; }

button, input { font: inherit; }
button { cursor: pointer; }

.container {
  width: min(100% - 28px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  left: 14px;
  top: 10px;
  z-index: 1000;
  transform: translateY(-160%);
  background: var(--color-blue);
  color: var(--color-white);
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(12, 52, 82, 0.08);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(104px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: var(--header-offset);
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.brand-logo {
  width: clamp(88px, 23vw, 132px);
  height: auto;
}

.language-switcher {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 330px);
  min-width: 0;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px;
}

.language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 999px;
  color: var(--color-dark);
  padding: 6px 9px;
  font-size: clamp(0.72rem, 2.2vw, 0.86rem);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.language-short, .cta-short { display: none; }

.language-option.is-active {
  background: var(--color-dark);
  color: var(--color-white);
  box-shadow: 0 8px 18px rgba(12, 52, 82, 0.16);
}

.header-cta {
  justify-self: end;
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
  font-size: clamp(0.72rem, 2.2vw, 0.88rem);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover, .button:focus-visible { transform: translateY(-1px); }

.button:focus-visible,
.language-option:focus-visible,
.faq-question:focus-visible,
.scale-option:focus-within span,
.text-field input:focus-visible {
  outline: 3px solid rgba(43, 140, 239, 0.38);
  outline-offset: 3px;
}

.button-primary {
  background: var(--color-blue);
  color: var(--color-white);
  box-shadow: 0 12px 26px rgba(43, 140, 239, 0.26);
}

.button-primary:hover, .button-primary:focus-visible { box-shadow: 0 18px 34px rgba(43, 140, 239, 0.34); }

.button-secondary {
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-border);
}

.button-large { min-height: 54px; padding-inline: 26px; }

.slide {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
}

.slide-dark { background: var(--color-dark); color: var(--color-white); }
.slide-light { background: var(--color-light); color: var(--color-text); }
.slide-form { background: var(--color-white); color: var(--color-text); }

.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-offset) + 28px);
  display: grid;
  align-items: center;
}

.hero::before,
.faq-section::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(43, 140, 239, 0.32), transparent 65%);
  top: 8%;
  right: -170px;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 32px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow.dark { color: var(--color-blue); }

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 820px;
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 10.5vw, 4.65rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 7vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

h3 {
  margin-bottom: 8px;
  color: var(--color-dark);
  font-size: 1.13rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hero-lead {
  max-width: 660px;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 2.5vw, 1.22rem);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.microcopy { margin: 0; color: rgba(255,255,255,.72); font-size: .95rem; }

.hero-visual {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.security-illustration { width: min(100%, 560px); margin-inline: auto; }

.section-stack { display: grid; gap: 30px; }
.section-heading { max-width: 790px; }
.section-heading p { color: var(--color-muted); font-size: 1.03rem; }
.section-heading-dark { margin-inline: auto; text-align: center; }
.section-heading-dark p { color: rgba(255,255,255,.76); }
.section-heading-spaced { margin-top: 18px; }

.feature-grid { display: grid; gap: 16px; }

.feature-card {
  min-height: 100%;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid rgba(12, 52, 82, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.feature-card p { margin-bottom: 0; color: var(--color-muted); }

.icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(43, 140, 239, 0.10);
  color: var(--color-blue);
  overflow: hidden;
}

.icon { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.icon-wrap img.icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill;
}

.faq-section { min-height: 80svh; }

.faq-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(100%, 980px);
  margin-inline: auto;
}

.faq-item {
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.faq-heading { margin: 0; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-dark);
  padding: 18px;
  text-align: left;
  font-weight: 850;
  line-height: 1.25;
}

.faq-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(43, 140, 239, 0.12);
  color: var(--color-blue);
  font-size: 1.25rem;
  line-height: 1;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: max-height 240ms ease, opacity 180ms ease, visibility 180ms ease;
}

.faq-answer > p {
  margin: 0;
  color: var(--color-muted);
  padding: 0 18px 18px;
}

.faq-item.is-open .faq-answer { max-height: 260px; visibility: visible; opacity: 1; }

.form-layout { display: grid; gap: 26px; align-items: start; }

.form-intro h2 { margin-bottom: 16px; }

.info-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: var(--color-light);
  border: 1px solid rgba(12, 52, 82, 0.08);
}

.info-highlight {
  margin: 0;
  color: var(--color-dark);
  font-size: 1.08rem;
  font-weight: 900;
}

.info-secondary { margin: 0; color: var(--color-muted); }

.diagnostic-card {
  background: var(--color-light);
  border: 1px solid rgba(12, 52, 82, 0.08);
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

.progress-area {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-white);
  border-radius: 20px;
  border: 1px solid rgba(12, 52, 82, 0.07);
}

.progress-copy { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.progress-copy strong { color: var(--color-blue); font-size: 1.2rem; line-height: 1; }

.progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #DDE6EC;
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue), #7ABEFF);
  transition: width 220ms ease;
}

.form-step[hidden] { display: none; }
.form-step.is-active { display: block; }

.step-heading { margin-bottom: 10px; }
.step-heading span {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--color-blue);
  font-weight: 850;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.step-heading h3 { margin-bottom: 4px; font-size: 1.18rem; }
.final-step-copy { color: var(--color-muted); margin-bottom: 0; font-size: .95rem; }

.question-group {
  margin: 0 0 8px;
  padding: 10px 10px 9px;
  border: 1px solid rgba(12, 52, 82, 0.08);
  border-radius: 18px;
  background: var(--color-white);
}

.question-group legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  color: var(--color-dark);
  font-size: clamp(.82rem, 2.2vw, .95rem);
  font-weight: 850;
  line-height: 1.25;
}
.question-group legend + * { clear: both; }

.scale-row {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) repeat(5, minmax(32px, 42px)) minmax(74px, 1fr);
  align-items: center;
  gap: 6px;
}

.scale-caption {
  color: var(--color-muted);
  font-size: clamp(.64rem, 2vw, .76rem);
  font-weight: 780;
  line-height: 1.12;
}
.scale-caption-right { text-align: right; }

.scale-option { position: relative; min-width: 0; }
.scale-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.scale-option span {
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #FAFBFC;
  color: var(--color-dark);
  font-weight: 900;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.scale-option:hover span { border-color: rgba(43,140,239,.55); }
.scale-option input:checked + span {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  box-shadow: 0 8px 18px rgba(43,140,239,.24);
}

.field-grid { display: grid; gap: 12px; }

.text-field { display: grid; gap: 7px; color: var(--color-dark); font-weight: 820; }
.text-field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-white);
  color: var(--color-text);
  padding: 11px 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.text-field input:focus-visible { border-color: var(--color-blue); }

.form-error { min-height: 22px; margin: 10px 0 0; color: var(--color-error); font-weight: 780; }
.form-actions { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 12px; }
.form-actions .button { width: 100%; }
#submitButton { display: none; }

/* Con una sola frase de confirmación el bloque quedaba alto dentro de la tarjeta:
   el aire extra de arriba baja el icono y el titular para centrar el conjunto. */
.confirmation-panel {
  margin-top: 8px;
  padding: clamp(34px, 5vw, 52px) 22px 26px;
  border-radius: 24px;
  background: var(--color-white);
  border: 1px solid rgba(12, 52, 82, 0.08);
  text-align: center;
}
.confirmation-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(43, 140, 239, 0.12);
  color: var(--color-blue);
  font-size: 1.7rem;
  font-weight: 900;
}
.confirmation-panel p { color: var(--color-muted); }
.confirmation-primary strong { color: var(--color-dark); }
.confirmation-small { font-size: .92rem; }

/* Página de confirmación del enlace del correo (confirmacion.html). Su cabecera solo lleva la
   marca, sin conmutador de idioma ni acciones, así que no reutiliza .header-inner: esa clase
   define una rejilla de tres columnas y un reordenado propio por debajo de 860px. */
.confirmation-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-offset);
  padding-block: 8px;
}
/* El contenido es una sola frase: sin esto la página quedaría corta y el pie flotaría a media
   altura. La columna flexible lo ancla abajo sin provocar scroll. 100svh (y no 100dvh) para que
   el pie caiga en el borde inferior aun con las barras del navegador móvil desplegadas. */
.confirmation-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
/* min-height:0 y los paddings en vh son lo que mantiene el pie a la vista en pantallas bajas
   (móvil apaisado, ventanas reducidas): sin ellos el aire fijo del main no se puede encoger,
   desborda y empuja el pie fuera del viewport. margin-top:auto ancla el pie si el main no crece. */
.confirmation-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--header-offset) + clamp(12px, 4vh, 40px)) 0 clamp(12px, 4vh, 60px);
}
.confirmation-page .site-footer { margin-top: auto; }
.confirmation-standalone {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding-block: clamp(20px, 4vh, 52px);
}
.confirmation-standalone h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw + 0.6rem, 1.85rem);
  line-height: 1.35;
  text-wrap: balance;
}
/* Móvil apaisado y ventanas de poca altura: el alto de la cabecera, el icono y los aires del
   panel son fijos y juntos no caben, así que aquí se compactan para que el pie siga entrando
   en pantalla sin scroll. */
@media (max-height: 620px) {
  .confirmation-page { --header-offset: 56px; }
  .confirmation-standalone { padding-block: 10px; }
  .confirmation-page .confirmation-panel {
    margin-top: 0;
    padding: clamp(16px, 3vh, 26px) 18px clamp(14px, 2.5vh, 22px);
  }
  .confirmation-page .confirmation-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    font-size: 1.2rem;
  }
  .confirmation-page .site-footer { padding: 14px 0; }
}

.site-footer { background: #07263C; color: rgba(255,255,255,.78); padding: 26px 0; }
.footer-inner { display: flex; flex-direction: column; gap: 8px; }
.footer-inner p { margin: 0; }
.footer-inner a { color: var(--color-white); font-weight: 800; text-decoration: none; }

.question-group.is-invalid { border-color: rgba(180,35,24,.55); box-shadow: 0 0 0 3px rgba(180,35,24,.08); }
.text-field.is-invalid input { border-color: rgba(180,35,24,.65); box-shadow: 0 0 0 3px rgba(180,35,24,.08); }

@media (max-width: 620px) {
  .language-full, .cta-full { display: none; }
  .language-short, .cta-short { display: inline; }
}

@media (max-width: 460px) {
  :root { --header-offset: 68px; }
  .container { width: min(100% - 20px, var(--container)); }
  .header-inner { gap: 6px; }
  .language-switcher { padding: 3px; }
  .language-option { min-height: 32px; padding: 5px 7px; }
  .header-cta { min-height: 34px; padding-inline: 9px; }
  .slide { padding: 54px 0; }
  .hero { padding-top: calc(var(--header-offset) + 20px); }
  .hero-visual { border-radius: 24px; padding: 8px; }
  .diagnostic-card { padding: 10px; border-radius: 24px; }
  .progress-area { padding: 10px; border-radius: 18px; }
  .scale-row { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .scale-caption-left { grid-column: 1 / 3; grid-row: 1; }
  .scale-caption-right { grid-column: 4 / 6; grid-row: 1; }
  .scale-option { grid-row: 2; }
  .scale-option-1 { grid-column: 1; }
  .scale-option-2 { grid-column: 2; }
  .scale-option-3 { grid-column: 3; }
  .scale-option-4 { grid-column: 4; }
  .scale-option-5 { grid-column: 5; }
  .scale-option span { min-height: 34px; }
  .question-group { padding: 8px; margin-bottom: 7px; }
  .question-group legend { margin-bottom: 6px; }
}

@media (min-width: 560px) {
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .form-actions { flex-direction: row; justify-content: space-between; }
  .form-actions .button { width: auto; }
}

@media (min-width: 760px) {
  .slide { padding: 92px 0; }
  .feature-grid-three { grid-template-columns: repeat(3, 1fr); }
  .feature-card { padding: 26px; }
}

@media (min-width: 960px) {
  .container { width: min(100% - 56px, var(--container)); }
  .hero { padding-top: var(--header-offset); }
  .hero-grid { grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.82fr); }
  .hero-actions { flex-direction: row; align-items: center; }
  .form-layout { grid-template-columns: minmax(255px, .78fr) minmax(560px, 1.22fr); gap: 44px; }
  .form-intro { position: sticky; top: calc(var(--header-offset) + 24px); }
  .diagnostic-card { padding: 18px; }
}

@media (min-width: 1100px) {
  .faq-grid { width: min(100%, 1120px); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .faq-item { min-height: 92px; }
}

@media (max-height: 720px) and (min-width: 760px) {
  .question-group { padding: 8px 10px; margin-bottom: 7px; }
  .scale-option span { min-height: 32px; }
  .step-heading { margin-bottom: 8px; }
  .form-actions { margin-top: 10px; }
}


/* Targeted production adjustments for the Spanish ACKTION™ landing */
select { font: inherit; }

.header-inner {
  grid-template-columns: minmax(86px, 1fr) auto auto;
  gap: clamp(6px, 1.1vw, 16px);
}

.language-switcher {
  justify-self: end;
  width: clamp(198px, 20vw, 260px);
  max-width: 100%;
}

.language-option {
  min-height: 34px;
  padding: 5px 8px;
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
}

.grouped-content-primary { background: var(--color-light); }
.grouped-content-secondary,
.faq-section { background: var(--color-dark); }

.section-stack-wide {
  gap: clamp(42px, 6vw, 72px);
}

.group-subsection {
  position: relative;
}

.about-card {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  background: var(--color-white);
  border: 1px solid rgba(12, 52, 82, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.about-copy {
  max-width: 760px;
}

.about-copy p {
  color: var(--color-muted);
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
}

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

.about-visual {
  display: grid;
  place-items: center;
  min-height: 180px;
}

.about-icon {
  width: min(100%, 280px);
  height: auto;
}

.capabilities-grid {
  display: grid;
  gap: 18px;
  margin-top: clamp(26px, 4vw, 44px);
}

.capability-card,
.signal-card {
  min-height: 100%;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 44px rgba(3, 24, 41, 0.18);
  color: var(--color-white);
}

.capability-card {
  display: flex;
  flex-direction: column;
}

.capability-card h3,
.signal-card h3 {
  color: var(--color-white);
}

.capability-card p,
.signal-card p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
}

.capability-card .icon-wrap.icon-transparent {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border: 1px solid rgba(132, 190, 255, 0.42);
  border-radius: 20px;
  background: transparent;
  color: #8FC8FF;
}

.capability-card .icon-wrap.icon-transparent .icon {
  width: 33px;
  height: 33px;
  stroke-width: 2.7;
}

.capability-card .icon-wrap.icon-transparent img.icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill;
}

.capability-card-main {
  justify-content: center;
  padding: clamp(26px, 3.2vw, 40px);
  background: linear-gradient(180deg, rgba(43, 140, 239, 0.20), rgba(255, 255, 255, 0.08));
  border-color: rgba(132, 190, 255, 0.36);
}

.capability-card-main .icon-wrap.icon-transparent {
  width: 82px;
  height: 82px;
  margin-bottom: 22px;
  border-radius: 26px;
}

.capability-card-main .icon-wrap.icon-transparent .icon {
  width: 44px;
  height: 44px;
}

.capability-card-main .icon-wrap.icon-transparent img.icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill;
}

.capability-card-main p {
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.55;
}

.capability-list,
.pill-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 18px 0 0;
  padding-left: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  list-style: disc;
}

.capability-list li,
.pill-list li {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 780;
  line-height: 1.35;
}

.signals-subsection {
  padding-top: clamp(22px, 4vw, 46px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.signals-heading {
  max-width: 1040px;
}

.signals-heading h2 {
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.signals-heading p {
  max-width: 1010px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.55;
}

.signals-grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(26px, 4vw, 42px);
}

.signal-card .icon-wrap {
  background: rgba(255, 255, 255, 0.12);
  color: #9FD0FF;
  border: 1px solid rgba(132, 190, 255, 0.30);
}

.signal-card .icon-wrap img.icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill;
}

.signal-cta-panel {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(132, 190, 255, 0.34);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 50px rgba(3, 24, 41, 0.22);
}

.signal-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  font-weight: 750;
  line-height: 1.5;
}

.signal-cta-panel .button {
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.signal-cta-panel .button:hover,
.signal-cta-panel .button:focus-visible {
  box-shadow: 0 18px 38px rgba(43, 140, 239, 0.42);
}

.faq-grid {
  --faq-collapsed-height: 84px;
  --faq-open-height: 260px;
  align-items: start;
  gap: 12px;
}

.faq-item {
  display: flex;
  flex-direction: column;
  height: var(--faq-collapsed-height);
  min-height: 0;
  transition: height 260ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.faq-item.is-open {
  height: var(--faq-open-height);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}

.faq-question {
  min-height: var(--faq-collapsed-height);
  padding: 12px 14px;
  font-size: clamp(0.9rem, 1.5vw, 0.98rem);
}

.faq-answer {
  flex: 1;
  transition: max-height 260ms ease, opacity 200ms ease, visibility 200ms ease;
}

.faq-answer > p,
.faq-answer p {
  padding: 0 14px 14px;
  line-height: 1.42;
}

.faq-item.is-open .faq-answer {
  max-height: calc(var(--faq-open-height) - var(--faq-collapsed-height));
  visibility: visible;
  opacity: 1;
}

.diagnostic-card {
  padding: clamp(12px, 1.6vw, 16px);
}

.progress-area {
  padding: 10px 11px;
  margin-bottom: 7px;
}

.progress-copy {
  margin-bottom: 6px;
}

.step-heading {
  margin: 0 0 8px;
}

.step-heading span {
  margin-bottom: 0;
}

.form-step .question-group:first-of-type {
  margin-top: 0;
}

.question-group {
  margin-bottom: 7px;
}

.final-step-panel {
  padding: 16px;
  border: 1px solid rgba(12, 52, 82, 0.08);
  border-radius: 18px;
  background: var(--color-white);
}

.final-step-panel p {
  margin-bottom: 8px;
}

.final-step-panel p:last-child {
  margin-bottom: 0;
}

.select-field,
.choice-field {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-dark);
  font-weight: 820;
}

.choice-field legend {
  padding: 0;
  color: var(--color-dark);
  font-weight: 820;
}

.select-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-white);
  color: var(--color-text);
  padding: 11px 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.select-field select:focus-visible,
.choice-options label:focus-within span {
  outline: 3px solid rgba(43, 140, 239, 0.38);
  outline-offset: 3px;
}

.choice-options {
  display: grid;
  gap: 8px;
}

.choice-options-inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-options label {
  position: relative;
  min-width: 0;
}

.choice-options input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-options span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 850;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.choice-options input:checked + span {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  box-shadow: 0 8px 18px rgba(43, 140, 239, 0.24);
}

.select-field.is-invalid select,
.choice-field.is-invalid {
  border-color: rgba(180, 35, 24, 0.65);
}

.select-field.is-invalid select,
.choice-field.is-invalid .choice-options span {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

@media (max-width: 1439px) {
  .hero {
    padding-top: calc(var(--header-offset) + 46px);
  }
}

@media (max-width: 620px) {
  .language-switcher {
    width: 118px;
  }

  .header-cta {
    padding-inline: 9px;
  }

  .faq-grid {
    --faq-collapsed-height: 72px;
    --faq-open-height: 232px;
  }

  .faq-question {
    padding: 11px 12px;
  }
}

@media (max-width: 390px) {
  .brand-logo {
    width: 82px;
  }

  .language-switcher {
    width: 110px;
  }

  .header-cta {
    padding-inline: 7px;
  }
}

@media (max-width: 460px) {
  .hero {
    padding-top: calc(var(--header-offset) + 34px);
  }

  .progress-area {
    padding: 9px;
    margin-bottom: 6px;
  }

  .step-heading {
    margin-bottom: 7px;
  }
}

@media (min-width: 560px) {
  .field-grid-final {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-span-2 {
    grid-column: 1 / -1;
  }
}

@media (min-width: 760px) {
  .about-card {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  }

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

  .signal-cta-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 960px) {
  .capabilities-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.94fr) minmax(0, 1fr);
    grid-template-rows: minmax(245px, auto) minmax(245px, auto);
    align-items: stretch;
  }

  .capability-risk {
    grid-column: 1;
    grid-row: 1;
  }

  .capability-maturity {
    grid-column: 3;
    grid-row: 1;
  }

  .capability-plan {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .capability-culture {
    grid-column: 1;
    grid-row: 2;
  }

  .capability-evolve {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (min-width: 1100px) {
  .faq-grid {
    --faq-collapsed-height: 84px;
    --faq-open-height: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Small Spanish-only visual adjustments requested after current ACKTION landing review */
html[lang] .form-intro h2 {
  max-width: 430px;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  line-height: 1.06;
}

html[lang] .form-intro .info-panel {
  margin-top: clamp(8px, 1.1vw, 14px);
}

html[lang] .question-group legend {
  font-weight: 720;
}

html[lang] .capabilities-grid {
  margin-top: clamp(36px, 5vw, 60px);
}

html[lang] .capability-card {
  padding: clamp(18px, 2.2vw, 24px);
}

html[lang] .capability-card h3 {
  margin-bottom: 6px;
  font-size: 1.06rem;
  line-height: 1.18;
}

html[lang] .capability-card p {
  font-size: 0.94rem;
  line-height: 1.42;
}

html[lang] .capability-card .icon-wrap.icon-transparent {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 18px;
}

html[lang] .capability-card .icon-wrap.icon-transparent .icon {
  width: 30px;
  height: 30px;
}

html[lang] .capability-card-main {
  justify-content: center;
  padding: clamp(22px, 2.8vw, 32px);
}

html[lang] .capability-card-main .icon-wrap.icon-transparent {
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  border-radius: 26px;
}

html[lang] .capability-card-main .icon-wrap.icon-transparent .icon {
  width: 46px;
  height: 46px;
}

html[lang] .capability-card-main p {
  font-size: clamp(0.96rem, 1.22vw, 1.03rem);
  line-height: 1.48;
}

html[lang] .capability-list,
html[lang] .pill-list {
  gap: 6px;
  margin-top: 14px;
}

html[lang] .faq-grid {
  --faq-open-height: 288px;
}

@media (min-width: 960px) {
  html[lang] .capabilities-grid {
    grid-template-rows: repeat(2, minmax(232px, 1fr));
  }

  html[lang] .capability-card {
    height: 100%;
    min-height: 0;
  }

  html[lang] .signals-heading {
    max-width: 1140px;
  }

  html[lang] .signals-heading p {
    max-width: 1120px;
    font-size: clamp(1rem, 1.25vw, 1.07rem);
    line-height: 1.52;
    text-wrap: balance;
  }
}

@media (min-width: 1100px) {
  html[lang] .faq-grid {
    --faq-open-height: 306px;
  }
}

@media (max-width: 620px) {
  html[lang] .faq-grid {
    --faq-open-height: 258px;
  }
}

/* Spanish-only microcopy and final visual refinements */
html[lang] #hero-title .hero-title-line,
html[lang] #form-title .form-title-line {
  display: block;
}

html[lang] #hero-title .hero-title-line,
html[lang] #form-title .form-title-line {
  white-space: nowrap;
}

html[lang] #form-title {
  max-width: min(100%, 315px);
  margin-inline: auto;
  margin-bottom: 0;
  font-size: clamp(1.86rem, 3.75vw, 2.72rem);
  line-height: 0.99;
  letter-spacing: -0.055em;
  text-align: center;
}

html[lang] .form-intro .info-panel {
  margin-top: clamp(42px, 5vw, 72px);
}

html[lang] .capability-card-main .capability-list {
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  justify-content: center;
  column-gap: clamp(28px, 3.2vw, 44px);
  row-gap: 8px;
  width: min(100%, 330px);
  margin: 16px auto 0;
  padding-left: 1.2rem;
  list-style-position: outside;
}

@media (min-width: 960px) {
  html[lang] .form-layout {
    gap: clamp(60px, 5.4vw, 82px);
  }
}

@media (max-width: 420px) {
  html[lang] #form-title {
    max-width: min(100%, 285px);
    font-size: clamp(1.55rem, 8.4vw, 1.96rem);
    letter-spacing: -0.045em;
  }

  html[lang] .form-intro .info-panel {
    margin-top: 32px;
  }

  html[lang] .capability-card-main .capability-list {
    width: min(100%, 300px);
    column-gap: 22px;
  }
}

/* Final Spanish-only alignment and visual retouches */
html[lang] .feature-heading-offset {
  padding-left: clamp(10px, 1.6vw, 22px);
}

html[lang] #form-title {
  max-width: min(100%, 350px);
  margin-inline: 0 auto;
  margin-bottom: 0;
  font-size: clamp(2.02rem, 3.55vw, 2.88rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-align: left;
}

html[lang] #form-title .form-title-line {
  display: block;
  white-space: nowrap;
}

html[lang] .capability-card-main {
  justify-content: flex-start;
  padding-top: clamp(24px, 2.6vw, 34px);
}

html[lang] .capability-card-main .icon-wrap.icon-transparent {
  width: clamp(88px, 7.6vw, 104px);
  height: clamp(88px, 7.6vw, 104px);
  margin-bottom: clamp(18px, 2vw, 24px);
}

html[lang] .capability-card-main .icon-wrap.icon-transparent .icon {
  width: clamp(48px, 4.5vw, 58px);
  height: clamp(48px, 4.5vw, 58px);
}

html[lang] .capability-card-main h3 {
  margin-bottom: 10px;
  font-size: clamp(1.14rem, 1.45vw, 1.26rem);
  line-height: 1.18;
}

html[lang] .capability-card-main p {
  font-size: clamp(0.98rem, 1.25vw, 1.07rem);
  line-height: 1.58;
}

html[lang] .capability-card-main .capability-list {
  margin-top: clamp(18px, 2.4vw, 28px);
}

@media (min-width: 960px) {
  html[lang] .form-layout {
    gap: clamp(70px, 6.2vw, 96px);
  }
}

@media (max-width: 760px) {
  html[lang] .feature-heading-offset {
    padding-left: clamp(6px, 3vw, 12px);
  }

  html[lang] #form-title {
    max-width: min(100%, 318px);
    font-size: clamp(1.82rem, 8.6vw, 2.28rem);
    letter-spacing: -0.048em;
  }
}

/* Final requested visual tweaks: centered feature headings and larger/right form title */
html[lang] .feature-heading-offset {
  max-width: 820px;
  margin-inline: auto;
  padding-left: 0;
  text-align: center;
}

html[lang] .feature-heading-offset p {
  max-width: 780px;
  margin-inline: auto;
}

html[lang] #form-title {
  max-width: min(100%, 390px);
  margin-left: clamp(18px, 3vw, 46px);
  margin-right: 0;
  font-size: clamp(2.22rem, 4vw, 3.18rem);
  line-height: 0.96;
  letter-spacing: -0.058em;
  text-align: left;
}

@media (max-width: 760px) {
  html[lang] .feature-heading-offset {
    max-width: 100%;
    padding-left: 0;
    text-align: center;
  }

  html[lang] #form-title {
    max-width: min(100%, 340px);
    margin-left: clamp(10px, 4vw, 24px);
    font-size: clamp(2rem, 8.8vw, 2.46rem);
    line-height: 0.98;
  }
}

@media (max-width: 420px) {
  html[lang] #form-title {
    max-width: min(100%, 316px);
    margin-left: 8px;
    font-size: clamp(1.88rem, 8.4vw, 2.18rem);
  }
}

/* Final correction: align the form title with the grey information block and make it clearly larger */
html[lang] #form-title {
  max-width: min(100%, 470px);
  margin-left: 0;
  margin-right: auto;
  font-size: clamp(2.42rem, 4.05vw, 3.55rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-align: left;
}

html[lang] #form-title .form-title-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 760px) {
  html[lang] #form-title {
    max-width: min(100%, 380px);
    margin-left: 0;
    font-size: clamp(2.18rem, 9.8vw, 2.9rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
  }
}

@media (max-width: 420px) {
  html[lang] #form-title {
    max-width: min(100%, 340px);
    margin-left: 0;
    font-size: clamp(2rem, 9.2vw, 2.42rem);
  }
}


/* Final requested production tweaks: compact assessment blocks up to 1439px */
@media (max-width: 1439px) {
  #autodiagnostico.slide {
    padding-top: 130px;
    padding-bottom: 130px;
  }

  #autodiagnostico .form-layout {
    gap: clamp(18px, 2.8vw, 38px);
  }

  #autodiagnostico .diagnostic-card {
    padding: clamp(10px, 1.2vw, 14px);
  }

  #autodiagnostico .progress-area {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 16px;
  }

  #autodiagnostico .progress-copy {
    margin-bottom: 5px;
  }

  #autodiagnostico .progress-copy strong {
    font-size: 1.04rem;
  }

  #autodiagnostico .progress-track {
    height: 8px;
  }

  #autodiagnostico .step-heading {
    margin-bottom: 6px;
  }

  #diagnosticForm .form-step[data-step="0"] .question-group,
  #diagnosticForm .form-step[data-step="1"] .question-group,
  #diagnosticForm .form-step[data-step="2"] .question-group {
    margin-bottom: 6px;
    padding: 8px 9px;
    border-radius: 15px;
  }

  #diagnosticForm .form-step[data-step="0"] .question-group legend,
  #diagnosticForm .form-step[data-step="1"] .question-group legend,
  #diagnosticForm .form-step[data-step="2"] .question-group legend {
    margin-bottom: 5px;
    font-size: clamp(0.76rem, 1vw, 0.9rem);
    line-height: 1.16;
  }

  #diagnosticForm .form-step[data-step="0"] .scale-row,
  #diagnosticForm .form-step[data-step="1"] .scale-row,
  #diagnosticForm .form-step[data-step="2"] .scale-row {
    gap: 5px;
  }

  #diagnosticForm .form-step[data-step="0"] .scale-caption,
  #diagnosticForm .form-step[data-step="1"] .scale-caption,
  #diagnosticForm .form-step[data-step="2"] .scale-caption {
    font-size: clamp(0.58rem, 0.82vw, 0.7rem);
    line-height: 1.05;
  }

  #diagnosticForm .form-step[data-step="0"] .scale-option span,
  #diagnosticForm .form-step[data-step="1"] .scale-option span,
  #diagnosticForm .form-step[data-step="2"] .scale-option span {
    min-height: 32px;
  }

  #autodiagnostico .form-error {
    min-height: 18px;
    margin-top: 6px;
    font-size: 0.9rem;
  }

  #autodiagnostico .form-actions {
    margin-top: 8px;
  }
}

@media (max-width: 1439px) and (max-height: 760px) and (min-width: 760px) {
  #autodiagnostico.slide {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  #diagnosticForm .form-step[data-step="0"] .question-group,
  #diagnosticForm .form-step[data-step="1"] .question-group,
  #diagnosticForm .form-step[data-step="2"] .question-group {
    padding: 7px 8px;
    margin-bottom: 5px;
  }

  #diagnosticForm .form-step[data-step="0"] .scale-option span,
  #diagnosticForm .form-step[data-step="1"] .scale-option span,
  #diagnosticForm .form-step[data-step="2"] .scale-option span {
    min-height: 30px;
  }
}

/* Google Material Symbols icons used in selected Spanish pictograms */
.material-symbols-rounded.material-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.icon-wrap .material-symbols-rounded.material-icon {
  font-size: 32px;
}

html[lang] .capability-card-main .icon-wrap.icon-transparent .material-symbols-rounded.material-icon {
  font-size: clamp(52px, 4.8vw, 62px);
}

/* Header update: ACKTION by Ackcent + compact language selector + contact CTA */
html[lang] .header-inner {
  grid-template-columns: minmax(230px, 1fr) auto auto;
  gap: clamp(10px, 1.4vw, 18px);
}

html[lang] .brand-combo {
  gap: clamp(5px, 0.7vw, 10px);
  min-width: 0;
  max-width: 440px;
}

html[lang] .brand-acktion-logo {
  width: clamp(128px, 15vw, 205px);
  height: auto;
  flex: 0 1 auto;
}

html[lang] .brand-by {
  color: var(--color-muted);
  font-size: clamp(0.68rem, 0.85vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  transform: translateY(1px);
  white-space: nowrap;
}

html[lang] .brand-ackcent-logo {
  width: clamp(58px, 6.2vw, 86px);
  height: auto;
  flex: 0 0 auto;
  transform: translateX(3px);
}

html[lang] .language-switcher {
  justify-self: end;
  width: 118px;
  padding: 3px;
}

html[lang] .language-option {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.76rem;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.header-contact-cta {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--color-blue);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-blue);
  box-shadow: none;
  white-space: nowrap;
  font-size: clamp(0.72rem, 2.2vw, 0.88rem);
}

.header-contact-cta:hover {
  background: rgba(43, 140, 239, 0.08);
  transform: translateY(-1px);
}

.header-contact-cta:focus-visible {
  outline: 3px solid rgba(43, 140, 239, 0.34);
  outline-offset: 3px;
}

.contact-short { display: none; }

@media (max-width: 860px) {
  html[lang] {
    --header-offset: 96px;
  }

  html[lang] .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "language actions";
    row-gap: 5px;
    padding-block: 8px;
  }

  html[lang] .brand-combo {
    grid-area: brand;
    max-width: 100%;
  }

  html[lang] .language-switcher {
    grid-area: language;
    justify-self: start;
    width: 104px;
  }

  html[lang] .header-actions {
    grid-area: actions;
    flex-direction: column;
    gap: 5px;
  }

  html[lang] .header-actions .button {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.74rem;
  }

  html[lang] .brand-acktion-logo {
    width: clamp(110px, 28vw, 150px);
  }

  html[lang] .brand-ackcent-logo {
    width: clamp(48px, 12vw, 68px);
  }
}

@media (max-width: 520px) {
  html[lang] {
    --header-offset: 104px;
  }

  html[lang] .header-inner {
    gap: 5px 8px;
  }

  html[lang] .brand-combo {
    gap: 4px;
  }

  html[lang] .brand-acktion-logo {
    width: clamp(88px, 28vw, 118px);
  }

  html[lang] .brand-by {
    font-size: 0.62rem;
  }

  html[lang] .brand-ackcent-logo {
    width: clamp(38px, 12vw, 52px);
  }

  html[lang] .language-switcher {
    width: 94px;
  }

  html[lang] .language-option {
    min-height: 28px;
    padding: 3px 6px;
    font-size: 0.7rem;
  }

  html[lang] .header-actions .button {
    min-height: 30px;
    padding: 4px 8px;
  }

  .contact-full { display: none; }
  .contact-short { display: inline; }
}

@media (max-width: 380px) {
  html[lang] .brand-acktion-logo {
    width: 82px;
  }

  html[lang] .brand-ackcent-logo {
    width: 34px;
  }

  html[lang] .header-actions .button {
    padding-inline: 7px;
    font-size: 0.7rem;
  }
}

/* Current Spanish update: hero background, footer legal links, capabilities grid and temporary theme selector */
html[lang] .brand-acktion-link,
html[lang] .brand-ackcent-link {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}

html[lang] .brand-acktion-link:focus-visible,
html[lang] .brand-ackcent-link:focus-visible,
.theme-switcher-temp select:focus-visible {
  outline: 3px solid rgba(43, 140, 239, 0.38);
  outline-offset: 4px;
  border-radius: 10px;
}

html[lang] .brand-acktion-logo {
  background: transparent;
}

.theme-switcher-temp {
  position: fixed;
  top: calc(var(--header-offset) + 10px);
  right: 14px;
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(12, 52, 82, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark);
  box-shadow: 0 12px 30px rgba(12, 52, 82, 0.16);
  backdrop-filter: blur(14px);
}

.theme-switcher-temp label {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.theme-switcher-temp select {
  min-height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark);
  padding: 3px 28px 3px 10px;
  font-size: 0.78rem;
  font-weight: 750;
}

html[lang] .hero-visual {
  min-height: clamp(300px, 42vw, 510px);
  padding: 0;
  background-color: rgba(255, 255, 255, 0.06);
  background-image:
    radial-gradient(circle at 72% 18%, rgba(43, 140, 239, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    url("assets/hero-acktion-background.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover, cover, min(94%, 560px) auto;
}

html[lang] .about-list {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding-left: 1.25rem;
  color: var(--color-muted);
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
}

html[lang] .about-list li::marker {
  color: var(--color-blue);
}

html[lang] .signals-subsection {
  padding-top: 0;
  border-top: 0;
}

html[lang] .capabilities-subsection {
  padding-top: clamp(26px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

html[lang] .capabilities-grid {
  margin-top: 0;
}

html[lang] .capability-title-card {
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(145deg, rgba(43, 140, 239, 0.28), rgba(255, 255, 255, 0.09));
  border-color: rgba(132, 190, 255, 0.44);
}

html[lang] .capability-title-card h2 {
  max-width: 10ch;
  margin: 0;
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

html[lang] .capability-highlight {
  background: linear-gradient(145deg, rgba(43, 140, 239, 0.34), rgba(43, 140, 239, 0.16));
  border-color: rgba(159, 208, 255, 0.62);
  box-shadow: 0 20px 52px rgba(43, 140, 239, 0.16);
}

html[lang] .capability-plan {
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

html[lang] .capability-plan .icon-wrap.icon-transparent .material-symbols-rounded.material-icon {
  font-size: 34px;
}

@media (min-width: 960px) {
  html[lang] .capabilities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(232px, 1fr));
    align-items: stretch;
  }

  html[lang] .capability-title-card {
    grid-column: 2;
    grid-row: 1;
  }

  html[lang] .capability-risk {
    grid-column: 1;
    grid-row: 1;
  }

  html[lang] .capability-maturity {
    grid-column: 3;
    grid-row: 1;
  }

  html[lang] .capability-culture {
    grid-column: 1;
    grid-row: 2;
  }

  html[lang] .capability-plan {
    grid-column: 2;
    grid-row: 2;
  }

  html[lang] .capability-evolve {
    grid-column: 3;
    grid-row: 2;
  }
}

html[lang] .footer-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

html[lang] .footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
}

html[lang] .footer-legal a {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  text-decoration: none;
}

html[lang] .footer-legal a:hover,
html[lang] .footer-legal a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .theme-switcher-temp {
    top: calc(var(--header-offset) + 8px);
    right: 10px;
    padding: 6px 8px;
  }

  .theme-switcher-temp label {
    display: none;
  }
}

@media (max-width: 720px) {
  html[lang] .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  html[lang] .footer-legal {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  html[lang] .hero-visual {
    min-height: 250px;
    background-size: cover, cover, min(98%, 480px) auto;
  }

  .theme-switcher-temp {
    top: calc(var(--header-offset) + 6px);
    right: 8px;
  }

  .theme-switcher-temp select {
    max-width: 114px;
    font-size: 0.72rem;
  }
}

/* Current round: contact CTA below the diagnostic form and temporary three-theme selector. */
html[lang] #autodiagnostico .contact-request-panel {
  grid-column: 1 / -1;
  width: min(100%, var(--container));
  margin: clamp(22px, 4vw, 42px) auto 0;
  display: grid;
  gap: 18px;
  justify-items: center;
}

html[lang] .contact-form-toggle {
  appearance: none;
  border: 1px solid rgba(43, 140, 239, 0.28);
  border-radius: 999px;
  background: rgba(43, 140, 239, 0.10);
  color: var(--color-blue);
  padding: 13px 22px;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
  box-shadow: 0 16px 38px rgba(43, 140, 239, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

html[lang] .contact-form-toggle:hover,
html[lang] .contact-form-toggle:focus-visible {
  transform: translateY(-1px);
  background: rgba(43, 140, 239, 0.16);
  box-shadow: 0 22px 48px rgba(43, 140, 239, 0.20);
}

html[lang] .contact-form-toggle:focus-visible {
  outline: 3px solid rgba(43, 140, 239, 0.38);
  outline-offset: 4px;
}

html[lang] .contact-form-placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 920px);
  min-height: clamp(360px, 58svh, 720px);
  padding: clamp(22px, 5vw, 52px);
  background: #f3f5f6;
  border-radius: 30px;
  color: var(--color-dark);
  text-align: center;
}

html[lang] .contact-form-placeholder[hidden] {
  display: none;
}

html[lang] .contact-form-placeholder p {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

html[lang] .contact-btn-inverse {
  background: var(--color-white) !important;
  color: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html[lang] .contact-btn-inverse:hover,
html[lang] .contact-btn-inverse:focus-visible {
  background: #f5f5f5 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html[lang] .contact-request-panel {
  margin-top: 100px;
}

html[lang] .contact-placeholder-box {
  width: 100%;
  padding: clamp(22px, 5vw, 52px);
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[lang] .contact-placeholder-box p {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: -0.02em;
}

html[lang] .theme-switcher-temp select {
  min-width: 132px;
}

/* ===== Sección desplegable de contacto (justo encima del footer) ===== */
.contact-reveal {
  background: #07263C;                          /* mismo fondo que el footer */
  color: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(159, 208, 255, 0.16);
}

/* La "línea" visible cuando la sección está cerrada (también actúa como toggle) */
.contact-reveal-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(14px, 2vw, 18px) 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.contact-reveal-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(159, 208, 255, 0.9);
  transition: color 180ms ease;
}

.contact-reveal-line:hover .contact-reveal-label,
.contact-reveal-line:focus-visible .contact-reveal-label {
  color: var(--color-white);
}

.contact-reveal-line:focus-visible {
  outline: 3px solid rgba(159, 208, 255, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
}

.contact-reveal-chevron {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 240ms ease;
  opacity: 0.85;
}

.contact-reveal-line[aria-expanded="true"] .contact-reveal-chevron {
  transform: rotate(-135deg);
}

/* Panel colapsable con animación suave */
.contact-reveal-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 380ms ease, opacity 320ms ease;
}

.contact-reveal-panel.is-open {
  max-height: 2600px;                           /* holgura para el formulario completo */
  opacity: 1;
}

/* Rectángulo que aloja el formulario de contacto */
.contact-reveal-box {
  position: relative;
  margin-bottom: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed rgba(159, 208, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.contact-reveal-box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
}

/* ===== Formulario de contacto propio (envía a la API de HubSpot) =====
   Vive sobre el fondo oscuro de .contact-reveal, así que reproduce los colores que antes
   inyectábamos dentro del iframe del embed: etiquetas en blanco, enlaces y asteriscos en
   azul claro, errores en rojo claro. */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  width: 100%;
}

.contact-form .form__row {
  display: grid;
  gap: 7px;
  align-content: start;
}

.contact-form .form__row--full,
.contact-form .form__consent,
.contact-form .form__status,
.contact-form .form__submit {
  grid-column: 1 / -1;
}

.contact-form label {
  color: var(--color-white);
  font-weight: 820;
}

.contact-form .form__required { color: #9FD0FF; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
  padding: 11px 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form textarea { resize: vertical; }

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid rgba(159, 208, 255, 0.5);
  outline-offset: 2px;
}

.contact-form [aria-invalid="true"] { border-color: #FFB4AD; }

/* Honeypot: fuera de pantalla, nunca display:none (los bots lo ignorarían). */
.contact-form .form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-form .form__consent { display: grid; gap: 12px; }

.contact-form .form__checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-weight: 500;
  line-height: 1.5;
}

.contact-form .form__checkbox input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 5px;
  padding: 0;
  accent-color: var(--color-blue);
}

/* .contact-reveal-box p deja los <p> casi transparentes: la nota legal necesita más contraste. */
.contact-reveal-box .contact-form .form__consent-note {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.5;
}

.contact-form a { color: #9FD0FF; }

.contact-reveal-box .contact-form .form__status {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.contact-reveal-box .contact-form .form__status.is-error {
  color: #FFB4AD;
  font-weight: 700;
}

.contact-form .form__submit { justify-self: start; }

.contact-form .form__submit[disabled] {
  opacity: 0.65;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.contact-reveal-box .submitted-message {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 6px solid #9FD0FF;
  border-radius: 18px;
  background: rgba(159, 208, 255, 0.12);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.6;
}

.contact-reveal-box .contact-form__fallback { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 720px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .form__submit { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-reveal-panel { transition: none; }
}

/* ===== Escala de respuestas en pantallas pequeñas (móvil) =====
   - Preguntas (legend) más grandes.
   - Botones de respuesta más pequeños.
   - Leyendas "Totalmente en desacuerdo / de acuerdo" debajo de los números 1 y 5.
   Usa !important a propósito para ganar a las capas de mayor especificidad
   (#diagnosticForm .form-step[data-step] ...) definidas más arriba. */
@media (max-width: 640px) {
  /* Preguntas: un poco más pequeñas en pantallas pequeñas */
  #diagnosticForm .question-group legend {
    font-size: clamp(0.9rem, 3.8vw, 1.02rem) !important;
    line-height: 1.24 !important;
  }

  /* Números en la fila superior, leyendas debajo */
  #diagnosticForm .scale-row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    align-items: start !important;
  }

  #diagnosticForm .scale-option { grid-row: 1 !important; }
  #diagnosticForm .scale-option-1 { grid-column: 1 !important; }
  #diagnosticForm .scale-option-2 { grid-column: 2 !important; }
  #diagnosticForm .scale-option-3 { grid-column: 3 !important; }
  #diagnosticForm .scale-option-4 { grid-column: 4 !important; }
  #diagnosticForm .scale-option-5 { grid-column: 5 !important; }

  /* Botones de respuesta más pequeños */
  #diagnosticForm .scale-option span {
    min-height: 26px !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
  }

  /* Leyendas debajo de los números 1 y 5 */
  #diagnosticForm .scale-caption {
    grid-row: 2 !important;
    margin-top: 4px;
    text-align: center !important;
    font-size: clamp(0.56rem, 2.6vw, 0.68rem) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
  }
  #diagnosticForm .scale-caption-left { grid-column: 1 !important; }
  #diagnosticForm .scale-caption-right { grid-column: 5 !important; }
}

/* Preguntas (legend) un poco más grandes en ordenadores portátiles.
   Gana con !important a la capa @media (max-width: 1439px) que las reduce. */
@media (min-width: 960px) and (max-width: 1439px) {
  #diagnosticForm .question-group legend {
    font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
    line-height: 1.24 !important;
  }
}

/* Botones "Anterior" y "Siguiente" siempre en la misma fila (uno a la izquierda,
   otro a la derecha) en cualquier pantalla, nunca apilados. El id gana a la capa
   del tema capacidades que los pone a width:100% en móvil. */
#diagnosticForm .form-actions {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
}
#diagnosticForm .form-actions .button {
  width: auto !important;
}
#diagnosticForm .form-actions #nextButton,
#diagnosticForm .form-actions #submitButton {
  margin-left: auto !important;
}

/* ===== Páginas legales (privacidad, cookies, condiciones de uso) =====
   Misma cabecera y footer que la landing; contenido minimalista sobre fondo
   básico blanco. Compartido por politica-de-privacidad.html, cookies.html y
   condiciones-de-uso.html. */
.legal-main {
  background: var(--color-white);
  padding-top: calc(var(--header-offset) + clamp(28px, 5vw, 60px));
  padding-bottom: clamp(48px, 8vw, 100px);
}

.legal-content {
  width: min(100% - 40px, 800px);
  margin-inline: auto;
  color: var(--color-dark);
}

.legal-eyebrow {
  margin: 0 0 12px;
  color: var(--color-blue);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-content h1 {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.legal-updated {
  margin: 0 0 clamp(28px, 5vw, 44px);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.legal-lead {
  margin: 0 0 clamp(26px, 5vw, 42px);
  color: var(--color-muted);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  font-weight: 600;
  line-height: 1.5;
}

.legal-content h2 {
  margin: clamp(30px, 5vw, 46px) 0 12px;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.legal-content h3 {
  margin: clamp(22px, 4vw, 34px) 0 8px;
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Subgrupos de la tabla de cookies (una por categoría del panel de consentimiento) */
.legal-content h4 {
  margin: clamp(20px, 3.4vw, 30px) 0 6px;
  color: var(--color-blue);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.legal-table ul {
  margin: 8px 0 0;
  padding-left: 1.1rem;
}
.legal-table li { margin-bottom: 6px; }

/* ===== Personalización del Silktide Consent Manager =====
   Su CSS se carga después de styles.css, por eso usamos !important (y variables
   con !important) para ganar a sus estilos por defecto. */

/* Paleta de marca: acento azul de los CTAs y galleta blanca */
:root {
  --primaryColor: #2B8CEF !important;         /* botones, toggles y acentos */
  --iconColor: #2B8CEF !important;            /* fondo del icono flotante */
  --iconBackgroundColor: #FFFFFF !important;  /* dibujo de la galleta (fill del SVG) */
}

/* Icono flotante de cookies: círculo, mismo tamaño y misma altura EXACTA que el
   botón "volver arriba" (.capacity-back-to-top), pero anclado abajo a la IZQUIERDA.
   Mismos colores que el CTA "Ir a mi autodiagnóstico" (.button-primary):
   fondo azul plano y galleta blanca. */
#stcm-icon {
  left: clamp(16px, 2.2vw, 28px) !important;
  right: auto !important;
  bottom: clamp(16px, 2.2vw, 28px) !important;
  width: clamp(48px, 4.8vw, 58px) !important;
  height: clamp(48px, 4.8vw, 58px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--color-blue) !important;
  box-shadow: 0 12px 26px rgba(43, 140, 239, 0.26) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#stcm-icon:hover,
#stcm-icon:focus-visible {
  box-shadow: 0 18px 34px rgba(43, 140, 239, 0.34) !important;
}
#stcm-icon svg,
#stcm-icon svg path {
  width: 56% !important;
  height: 56% !important;
  fill: #FFFFFF !important;
}

/* Oculta el crédito y el logotipo de Silktide */
.stcm-credit-link,
a.stcm-credit-link,
.stcm-logo,
a.stcm-logo {
  display: none !important;
}

/* Aspecto "liquid glass" (estilo Apple) en todos los cuadros flotantes */
#stcm-banner,
#stcm-modal {
  color: #FFFFFF !important;
  border: 1px solid rgba(159, 208, 255, 0.30) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(18, 62, 95, 0.68), rgba(9, 34, 55, 0.76)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.6) !important;
  backdrop-filter: blur(26px) saturate(1.6) !important;
  box-shadow: 0 24px 70px rgba(3, 16, 28, 0.42) !important;
}

/* Texto claro y legible sobre el cristal */
#stcm-banner h1, #stcm-banner h2, #stcm-banner h3, #stcm-banner p, #stcm-banner span, #stcm-banner label, #stcm-banner li,
#stcm-modal h1, #stcm-modal h2, #stcm-modal h3, #stcm-modal p, #stcm-modal span, #stcm-modal label, #stcm-modal li {
  color: #FFFFFF !important;
}
#stcm-banner a,
#stcm-modal a {
  color: #BFE0FF !important;
}

/* Backdrop del modal, también con desenfoque */
#stcm-backdrop {
  background: rgba(6, 24, 39, 0.55) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* Botones coherentes con los CTAs de la landing */
.stcm-button {
  border-radius: 12px !important;
  font-weight: 800 !important;
}
#stcm-banner .stcm-button-primary,
#stcm-modal .stcm-button-primary {
  background: #2B8CEF !important;
  border-color: #2B8CEF !important;
  color: #FFFFFF !important;
}
#stcm-banner .stcm-button-primary:hover,
#stcm-banner .stcm-button-primary:focus-visible,
#stcm-modal .stcm-button-primary:hover,
#stcm-modal .stcm-button-primary:focus-visible {
  background: #1F7FE0 !important;
  border-color: #1F7FE0 !important;
}
#stcm-banner .stcm-button-secondary,
#stcm-modal .stcm-button-secondary {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(159, 208, 255, 0.45) !important;
  color: #FFFFFF !important;
}
#stcm-banner .stcm-button-secondary:hover,
#stcm-banner .stcm-button-secondary:focus-visible,
#stcm-modal .stcm-button-secondary:hover,
#stcm-modal .stcm-button-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.18) !important;
}
#stcm-banner .stcm-preferences-button,
#stcm-modal .stcm-preferences-button {
  background: transparent !important;
  color: #BFE0FF !important;
}

/* Modal de preferencias (#stcm-modal): fondo gris "liquid glass" estilo Apple,
   con el contenido en blanco y azul como los CTAs de la landing.
   Sobrescribe el estilo compartido banner/modal de más arriba. */
#stcm-modal {
  position: relative !important;
  top: 26px !important; /* un poco más bajo, sin romper el centrado flex */
  color: #0C3452 !important;
  border: 1px solid rgba(255, 255, 255, 0.70) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.60), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 252, 0.78)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  box-shadow: 0 24px 70px rgba(12, 52, 82, 0.20) !important;
}

/* Texto en azul oscuro de marca (legible sobre el cristal gris) */
#stcm-modal h1, #stcm-modal h2, #stcm-modal h3,
#stcm-modal p, #stcm-modal span, #stcm-modal label, #stcm-modal li {
  color: #0C3452 !important;
}
#stcm-modal a {
  color: #2B8CEF !important;
}

/* Botones con la paleta de los CTAs: primario azul + texto blanco,
   secundario blanco + texto azul oscuro */
#stcm-modal .stcm-button-primary {
  background: #2B8CEF !important;
  border-color: #2B8CEF !important;
  color: #FFFFFF !important;
}
#stcm-modal .stcm-button-primary:hover,
#stcm-modal .stcm-button-primary:focus-visible {
  background: #1F7FE0 !important;
  border-color: #1F7FE0 !important;
}
#stcm-modal .stcm-button-secondary {
  background: #FFFFFF !important;
  border-color: rgba(12, 52, 82, 0.18) !important;
  color: #0C3452 !important;
}
#stcm-modal .stcm-button-secondary:hover,
#stcm-modal .stcm-button-secondary:focus-visible {
  background: #F3F5F6 !important;
}
#stcm-modal .stcm-preferences-button {
  background: transparent !important;
  color: #2B8CEF !important;
}

/* Títulos de categoría (Esenciales / Analíticas / Marketing) en azul */
#stcm-modal legend {
  color: #2B8CEF !important;
}

/* Toggle azul solo cuando está "on" (checked); apagado se queda como está */
#stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  background: #2B8CEF !important;
}

/* Botón de cerrar (arriba a la derecha): cuadrado blanco con la cruz azul */
#stcm-modal .stcm-modal-close {
  background: #FFFFFF !important;
  border: 1px solid rgba(12, 52, 82, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(12, 52, 82, 0.12) !important;
}
#stcm-modal .stcm-modal-close:hover,
#stcm-modal .stcm-modal-close:focus-visible {
  background: #F3F5F6 !important;
}
#stcm-modal .stcm-modal-close svg,
#stcm-modal .stcm-modal-close svg path {
  fill: #2B8CEF !important;
}

/* Letra más fina en los botones "Guardar y cerrar" (modal) y
   "Rechazar no esenciales" (banner) */
#stcm-modal .stcm-button,
#stcm-banner .stcm-button-secondary {
  font-weight: 500 !important;
}

/* "Aceptar todas" (lo inyecta cookie-consent.js): es la acción principal del modal,
   así que destaca sobre "Guardar y cerrar" y "Rechazar no esenciales". */
#stcm-modal .stcm-modal-accept-all {
  font-weight: 800 !important;
}

.legal-content p,
.legal-content li {
  color: #33414D;
  font-size: 1rem;
  line-height: 1.75;
}

.legal-content p { margin: 0 0 14px; }

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 1.25rem;
}

.legal-content li { margin-bottom: 6px; }

.legal-content strong { color: var(--color-dark); }

.legal-content a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}
.legal-content a:hover,
.legal-content a:focus-visible { text-decoration: underline; }

.legal-note {
  margin-top: clamp(30px, 5vw, 48px);
  padding: 16px 18px;
  border-left: 3px solid var(--color-blue);
  border-radius: 10px;
  background: var(--color-light);
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }

.legal-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.legal-table th {
  background: var(--color-light);
  color: var(--color-dark);
  font-weight: 700;
}


/* Assessment intro (desktop only): align the title with the top of the
   diagnostic card and lift the info panel with it. The section uses
   overflow: hidden, so the sticky `top` never sticks — it only pushed the
   whole column down by its own offset. */
@media (min-width: 960px) {
  #autodiagnostico .form-intro {
    align-self: start;
    top: 0;
    padding-top: 0;
  }

  #autodiagnostico .form-intro h2 {
    margin-top: 0;
    margin-bottom: 0;
  }

  html[lang] #autodiagnostico .form-intro .info-panel {
    margin-top: clamp(20px, 2.2vw, 32px);
  }

  /* Pantalla de confirmación: la tarjeta se estira hasta igualar la columna
     de la izquierda, del título al final del panel de información. */
  #autodiagnostico .diagnostic-card:has(#confirmationPanel:not([hidden])) {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  #autodiagnostico .diagnostic-card:has(#confirmationPanel:not([hidden])) .confirmation-panel {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
  }
}

/* Keep the three question blocks the same height: reserve a fixed number of
   legend lines so every question card measures the same regardless of wording */
#diagnosticForm .form-step[data-step="0"] .question-group legend,
#diagnosticForm .form-step[data-step="1"] .question-group legend,
#diagnosticForm .form-step[data-step="2"] .question-group legend {
  min-height: 2.5em;
}

@supports (height: 1lh) {
  #diagnosticForm .form-step[data-step="0"] .question-group legend,
  #diagnosticForm .form-step[data-step="1"] .question-group legend,
  #diagnosticForm .form-step[data-step="2"] .question-group legend {
    min-height: 2lh;
  }
}

@media (max-width: 620px) {
  #diagnosticForm .form-step[data-step="0"] .question-group legend,
  #diagnosticForm .form-step[data-step="1"] .question-group legend,
  #diagnosticForm .form-step[data-step="2"] .question-group legend {
    min-height: 3.75em;
  }

  @supports (height: 1lh) {
    #diagnosticForm .form-step[data-step="0"] .question-group legend,
    #diagnosticForm .form-step[data-step="1"] .question-group legend,
    #diagnosticForm .form-step[data-step="2"] .question-group legend {
      min-height: 3lh;
    }
  }
}

/* ---------------------------------------------------------------------------
   Marcas de texto en línea (ACKTION™ destacado y enlaces dentro de párrafos)
   --------------------------------------------------------------------------- */
/* Azul de marca aclarado y grosor algo menor: el ACKTION™ de los párrafos no debe
   pesar tanto como el de los títulos. */
.acktion-mark {
  font-weight: 700;
  color: #1A5C93;
}

.inline-link {
  color: var(--color-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: #0C3452;
}

.about-copy strong { color: var(--color-text); }
.about-copy strong.acktion-mark { color: #1A5C93; }

.footer-inner p a { text-decoration: none; }
.footer-inner p a:hover,
.footer-inner p a:focus-visible { text-decoration: underline; }