/* ==========================================================================
   RISK CONTROL — Hoja de estilos única
   Orden: fuentes › variables › reset › tipografía › utilidades › componentes
          › secciones › responsive
   ========================================================================== */

/* --------------------------------------------------------------- Fuentes */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlowc-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlowc-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlowc-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlowc-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter es fuente variable: un archivo cubre los pesos 400–600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- Variables */
:root {
  --rc-red:        #C8102E;
  --rc-red-dark:   #9B0C23;
  --rc-navy:       #0F1520;
  --rc-navy-soft:  #1A2230;
  --rc-gray-100:   #F4F5F7;
  --rc-gray-200:   #E4E7EB;
  --rc-gray-600:   #5A6472;
  --rc-gray-400:   #9AA4B2;
  --rc-ink:        #14181F;
  --rc-white:      #FFFFFF;

  --font-title: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap:   1180px;
  --radius: 5px;
  --shadow: 0 2px 14px rgba(15, 21, 32, .07);

  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;   --sp-5: 3rem;   --sp-6: 4.5rem;
}

/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--rc-ink);
  background: var(--rc-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--rc-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace de salto para lectores de pantalla y teclado */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rc-red); color: #fff;
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ Tipografía */
/* .h3-like / .h4-like: mismo aspecto que un encabezado, pero en elementos
   no semánticos. Se usan en rótulos visuales (pilares, datos de contacto,
   columnas del footer) que no deben aparecer en el esquema del documento. */
h1, h2, h3, h4, .h3-like, .h4-like {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3, .h3-like { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
h4, .h4-like { font-size: 1rem; letter-spacing: .04em; }

p { text-wrap: pretty; }

/* Antetítulo rojo con línea, patrón repetido en todas las secciones */
.eyebrow {
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rc-red);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: var(--sp-1);
}
.eyebrow::after {
  content: '';
  width: 46px; height: 2px;
  background: var(--rc-red);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: '';
  width: 46px; height: 2px;
  background: var(--rc-red);
}

.lead { color: var(--rc-gray-600); font-size: 1.06rem; }
.section-intro { color: var(--rc-gray-600); margin-top: .35rem; }

/* ------------------------------------------------------------ Utilidades */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sp-6); }
.section--gray { background: var(--rc-gray-100); }
.section--dark { background: var(--rc-navy); color: var(--rc-white); }
.section--tight { padding-block: var(--sp-5); }
.text-center { text-align: center; }
.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;
}

/* ------------------------------------------------------------- Componentes */
/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  font-family: var(--font-title);
  font-size: 1rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .85rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--rc-red); color: #fff; }
.btn--primary:hover { background: var(--rc-red-dark); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--outline { background: transparent; color: var(--rc-ink); border-color: var(--rc-gray-200); }
.btn--outline:hover { border-color: var(--rc-red); color: var(--rc-red); }
.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.btn--block { width: 100%; }

/* Tarjeta base */
.card {
  background: var(--rc-white);
  border: 1px solid var(--rc-gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

/* Ícono circular rojo */
.icon-badge {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 2px solid var(--rc-red);
  border-radius: 50%;
  color: var(--rc-red);
  flex: none;
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge--sq { border-radius: var(--radius); }

/* Lista con check rojo */
.check-list { display: grid; gap: .6rem; }
.check-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  color: var(--rc-gray-600);
}
.check-list svg { width: 18px; height: 18px; color: var(--rc-red); flex: none; margin-top: .3rem; }

/* --------------------------------------------------------- Barra superior */
.topbar {
  background: var(--rc-navy);
  color: var(--rc-gray-400);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar__contact { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.topbar__contact a, .topbar__contact span {
  display: inline-flex; align-items: center; gap: .4rem;
}
.topbar__contact a:hover { color: #fff; }
.topbar__contact svg { width: 14px; height: 14px; color: var(--rc-red); }
.topbar__social { display: flex; gap: .9rem; }
.topbar__social a:hover { color: #fff; }
.topbar__social svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Header */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--rc-white);
  border-bottom: 1px solid var(--rc-gray-200);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  min-height: 72px;
}
.header__logo img { width: 168px; }

.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav__list { display: flex; align-items: center; gap: var(--sp-3); }
.nav__link {
  font-family: var(--font-title);
  font-size: .97rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nav__link:hover, .nav__link[aria-current="page"] {
  color: var(--rc-red);
  border-bottom-color: var(--rc-red);
}

/* Submenú desplegable */
.nav__item--has-sub { position: relative; }
.nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--rc-gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .45rem;
  display: none;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub { display: block; }
.nav__sub a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 3px;
  font-size: .93rem;
  color: var(--rc-gray-600);
}
.nav__sub a:hover { background: var(--rc-gray-100); color: var(--rc-red); }
.nav__caret { width: 11px; height: 11px; }

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: .5rem;
  color: var(--rc-ink);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  background: var(--rc-navy);
  color: var(--rc-white);
  overflow: hidden;
}
/* <picture> es solo un contenedor; quien se posiciona es la <img> interior */
.hero picture { display: contents; }
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
/* Degradado: oscurece la izquierda para que el texto se lea, y deja
   la foto de extintores visible hacia la derecha. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(15,21,32,.95) 0%,
              rgba(15,21,32,.82) 32%,
              rgba(15,21,32,.35) 62%,
              rgba(15,21,32,.10) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
/* El texto ocupa la mitad izquierda: la foto queda visible a la derecha.
   Se limita el contenido, no el contenedor, para que .wrap siga alineando
   el hero con el resto de las secciones. */
.hero__inner > * { max-width: 620px; }
.hero h1 {
  margin-block: .3rem 1.1rem;
  text-wrap: balance;   /* evita cortes como "SOLUCIONES INTEGRALES / EN" */
}
.hero h1 .accent { color: var(--rc-red); display: block; }
.hero__text { color: #D6DAE1; max-width: 52ch; }

.hero__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}
.pillar { display: flex; gap: .7rem; align-items: flex-start; }
.pillar svg { width: 26px; height: 26px; color: var(--rc-red); flex: none; }
.pillar .h3-like { font-size: .96rem; letter-spacing: .07em; margin-bottom: .15rem; }
.pillar p { font-size: .86rem; color: var(--rc-gray-400); line-height: 1.45; }

.hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ------------------------------------------------------- Barra de valores */
.values { background: var(--rc-navy-soft); color: #fff; }
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}
.value { display: flex; gap: .85rem; align-items: flex-start; }
.value svg { width: 30px; height: 30px; color: var(--rc-red); flex: none; }
.value .h3-like { font-size: .95rem; letter-spacing: .09em; margin-bottom: .2rem; }
.value p { font-size: .84rem; color: var(--rc-gray-400); line-height: 1.5; }

/* ---------------------------------------------------------- Quiénes somos */
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-3);
}
.about__text p + p { margin-top: var(--sp-2); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mv-card { text-align: left; }
.mv-card .icon-badge { margin-bottom: .9rem; }
.mv-card h3 { margin-bottom: .45rem; }
.mv-card p { font-size: .93rem; color: var(--rc-gray-600); line-height: 1.55; }

/* -------------------------------------------------------------- Servicios */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.service-card {
  display: flex; flex-direction: column;
  gap: .8rem;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.service-card:hover {
  border-color: var(--rc-red);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.service-card h3 { color: var(--rc-ink); }
.service-card p { font-size: .93rem; color: var(--rc-gray-600); line-height: 1.55; }
.service-card__more {
  margin-top: auto;
  font-family: var(--font-title);
  font-size: .9rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rc-red);
  display: inline-flex; align-items: center; gap: .35rem;
}
.service-card__more svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------- Asesoría SSO */
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--sp-2);
  align-items: stretch;
  margin-top: var(--sp-4);
}
.step { display: flex; flex-direction: column; gap: .9rem; }
.step__head { display: flex; align-items: center; gap: .8rem; }
.step h3 { font-size: 1.1rem; }
.step .check-list li { font-size: .91rem; }
.step-arrow {
  align-self: center;
  color: var(--rc-gray-400);
}
.step-arrow svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------ Capacitación */
.training__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-3);
}
.training__topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem 1.5rem;
  margin-block: var(--sp-3);
}
.training__topics li { font-size: .94rem; }
.training__modes {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rc-gray-200);
}
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--rc-gray-100);
  border: 1px solid var(--rc-gray-200);
  border-radius: 40px;
  padding: .35rem .9rem;
  font-size: .84rem;
  color: var(--rc-gray-600);
}
.tag svg { width: 14px; height: 14px; color: var(--rc-red); }
.training__media img { border-radius: var(--radius); width: 100%; }

/* Marcador para foto pendiente de reemplazo */
.media-placeholder {
  display: grid; place-items: center;
  gap: .5rem;
  aspect-ratio: 4 / 3;
  background: var(--rc-gray-100);
  border: 2px dashed var(--rc-gray-200);
  border-radius: var(--radius);
  color: var(--rc-gray-600);
  text-align: center;
  padding: var(--sp-3);
}
.media-placeholder svg { width: 38px; height: 38px; color: var(--rc-gray-400); }
.media-placeholder strong { font-family: var(--font-title); letter-spacing: .05em; }
.media-placeholder span { font-size: .82rem; }

/* --------------------------------------------------------------- Contacto */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-3);
}
.contact h2 .accent { color: var(--rc-red); }
.contact__text { color: var(--rc-gray-400); margin-bottom: var(--sp-3); }
.contact__items { display: grid; gap: var(--sp-2); }
.contact-item { display: flex; gap: .85rem; align-items: flex-start; }
.contact-item svg { width: 20px; height: 20px; color: var(--rc-red); flex: none; margin-top: .25rem; }
.contact-item .h4-like { color: #fff; letter-spacing: .1em; margin-bottom: .1rem; }
.contact-item p, .contact-item a { color: var(--rc-gray-400); font-size: .95rem; }
.contact-item a:hover { color: #fff; }

/* Formulario */
.form {
  background: var(--rc-navy-soft);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.field { display: grid; gap: .35rem; margin-bottom: var(--sp-2); }
.field label {
  font-family: var(--font-title);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
.field .req { color: var(--rc-red); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  padding: .7rem .85rem;
  color: #fff;
  font-size: .95rem;
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #7A8494; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rc-red);
  background: rgba(255,255,255,.1);
}
.field select option { background: var(--rc-navy); color: #fff; }
.field textarea { resize: vertical; min-height: 108px; }
.field input:user-invalid, .field textarea:user-invalid { border-color: #E4576B; }

/* Honeypot antispam: los bots rellenan este campo, las personas no lo ven.
   display:none lo saca también del orden de tabulación y de los lectores
   de pantalla, que es lo que corresponde para un campo que nadie debe llenar. */
.hp { display: none; }

.form__note { font-size: .8rem; color: var(--rc-gray-400); margin-top: .8rem; text-align: center; }
.form__status {
  margin-top: var(--sp-2);
  padding: .8rem 1rem;
  border-radius: 4px;
  font-size: .9rem;
  display: none;
}
.form__status[data-state="error"] {
  display: block;
  background: rgba(228, 87, 107, .13);
  border: 1px solid rgba(228, 87, 107, .5);
  color: #FFC4CD;
}
.form__status[data-state="ok"] {
  display: block;
  background: rgba(63, 185, 122, .13);
  border: 1px solid rgba(63, 185, 122, .5);
  color: #A9EBC7;
}
.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* ---------------------------------------------------------------- Footer */
.footer { background: var(--rc-navy); color: var(--rc-gray-400); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}
.footer__logo img { width: 176px; margin-bottom: var(--sp-2); }
.footer__brand p { font-size: .89rem; line-height: 1.6; }
.footer .h4-like {
  color: #fff;
  font-size: .92rem; letter-spacing: .12em;
  margin-bottom: var(--sp-2);
}
.footer__links { display: grid; gap: .55rem; font-size: .9rem; }
.footer__links a:hover { color: var(--rc-red); }
.footer__social { display: flex; gap: .8rem; margin-top: .3rem; }
.footer__social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  transition: background-color .15s ease, border-color .15s ease;
}
.footer__social a:hover { background: var(--rc-red); border-color: var(--rc-red); color: #fff; }
.footer__social svg { width: 15px; height: 15px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-2);
  text-align: center;
  font-size: .84rem;
}

/* ----------------------------------------------- Botón flotante WhatsApp */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  border: 3px solid rgba(255,255,255,.9);  /* lo separa de fondos oscuros */
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }

/* -------------------------------------------------- Encabezado de página */
.page-head {
  background: var(--rc-navy);
  color: #fff;
  padding-block: var(--sp-5);
}
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-block: .3rem .6rem; }
.page-head p { color: var(--rc-gray-400); max-width: 62ch; }
.breadcrumb { font-size: .85rem; color: var(--rc-gray-400); margin-bottom: var(--sp-2); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin-inline: .4rem; }

/* Grilla genérica de características (páginas internas) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.feature { display: flex; flex-direction: column; gap: .75rem; }
.feature h3 { font-size: 1.05rem; }
.feature p { font-size: .92rem; color: var(--rc-gray-600); line-height: 1.55; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: center;
}
.split img { border-radius: var(--radius); }

/* Página de agradecimiento / 404 */
.state-page {
  min-height: 62vh;
  display: grid; place-items: center;
  text-align: center;
  padding-block: var(--sp-6);
}
.state-page .icon-badge {
  width: 74px; height: 74px;
  margin: 0 auto var(--sp-3);
}
.state-page .icon-badge svg { width: 38px; height: 38px; }
.state-page h1 { margin-bottom: var(--sp-2); }
.state-page p { color: var(--rc-gray-600); max-width: 52ch; margin: 0 auto var(--sp-3); }
.state-page__actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .values__grid { grid-template-columns: 1fr 1fr; }
  .services__grid,
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); justify-self: center; }
  .about__grid,
  .training__grid,
  .contact__grid,
  .split { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 860px) {
  /* Navegación colapsada */
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(84vw, 340px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--sp-3);
    box-shadow: -6px 0 28px rgba(0,0,0,.16);
    transform: translateX(100%);
    transition: transform .24s ease;
    overflow-y: auto;
    z-index: 110;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rc-gray-200); }
  .nav__link { padding: .95rem 0; justify-content: space-between; border-bottom: 0; }
  .nav__sub {
    position: static; display: block;
    border: 0; box-shadow: none; padding: 0 0 .7rem .9rem;
    min-width: 0;
  }
  .nav__sub a { padding: .45rem 0; }
  .nav .btn { margin-top: var(--sp-3); }
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,21,32,.5);
    z-index: 105;
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
  body[data-nav-open="true"] { overflow: hidden; }

  .topbar__contact { gap: var(--sp-2); font-size: .78rem; }
  .hero__pillars { grid-template-columns: 1fr; gap: var(--sp-2); }
  .mv-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --sp-6: 3.25rem; --sp-5: 2.25rem; }
  .values__grid,
  .services__grid,
  .feature-grid,
  .footer__grid { grid-template-columns: 1fr; }
  .form__row,
  .training__topics { grid-template-columns: 1fr; }
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__social { display: none; }
  .hero__actions .btn { width: 100%; }
  .wa-float { right: 14px; bottom: 14px; }
}

/* ------------------------------------------------------------- Impresión */
@media print {
  .topbar, .nav, .nav-toggle, .wa-float, .form, .hero__actions { display: none !important; }
  .hero::after { background: none; }
  body { color: #000; }
}