/* ==========================================================================
   Segmentador · Base y componentes
   Requiere tokens.css
   Ref: SEG-011.T01 a T05
   Reglas: mobile-first · WCAG 2.2 AA · nada depende de JS para verse
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* evita el reescalado de iOS en rotación */
  scroll-behavior: smooth;
  scroll-padding-top: calc(72px + var(--sp-4));
}
/* Movimiento reducido. Las TRANSICIONES ya quedan anuladas en tokens.css, que
   pone `--dur-rapida` y `--dur-media` en 1ms: todas las declaraciones de este
   archivo usan esos tokens, así que no hace falta repetirlo aquí. Lo que este
   bloque cubre es lo que no pasa por un token: el desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* --- Foco visible · SC 2.4.7 ----------------------------------------------
   Nunca `outline: none` sin reemplazo equivalente. Se usa :focus-visible
   para no molestar al puntero, y :focus como respaldo.                      */
:focus-visible {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-offset);
  border-radius: var(--radio-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Enlace de salto · SC 2.4.1 ------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--color-cta-fondo);
  color: var(--color-cta-texto);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radio-md);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-rapida) var(--easing);
}
.skip-link:focus { transform: translateY(0); }

/* --- Tipografía ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  /* Azul Segmentador. El sistema oficial asigna a `brand.blue` el uso
     "Ancla de marca, titulos, navegacion y acciones principales".
     Antes: --color-texto-fuerte (#2B2B2B, 14.16:1). Ahora: 8.24:1 sobre
     blanco y 7.67:1 sobre el fondo alterno. Ambos por encima de AA. */
  color: var(--color-titulo);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-md); line-height: var(--lh-snug); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wide); }

.acento { color: var(--color-titulo); }

p, li { max-width: var(--medida); }
p + p { margin-top: var(--sp-4); }

/* AUD-10 · DEC-028: lectura alineada a la izquierda sin división silábica. */
p, li {
  text-align: left;
  hyphens: none;
  text-wrap: pretty;
}
.meta, .card__pie, .pie__legal, .campo__ayuda, .campo__error,
.centrado p, .centrada p, .btn, .pendiente__etiqueta {
  text-align: left;
  hyphens: none;
}
.centrado p, .centrada p { text-align: center; }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-texto);
}
.meta {
  font-size: var(--fs-xs);
  color: var(--color-texto);   /* NO usar --c-texto-sec: 2.51:1 no cumple */
}

a {
  color: var(--color-enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-enlace-hover); text-decoration-thickness: 2px; }

ul, ol { padding-left: var(--sp-5); }
li + li { margin-top: var(--sp-2); }

/* --- Layout ---------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.seccion { padding-block: var(--sp-seccion); }
.seccion--alt { background: var(--color-fondo-alt); }

.pila > * + * { margin-top: var(--sp-4); }
.pila--holgada > * + * { margin-top: var(--sp-6); }

.rejilla {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --- Botones ---------------------------------------------------------------
   Un solo botón sólido por bloque: la CTA primaria.                          */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--easing),
              border-color var(--dur-rapida) var(--easing),
              color var(--dur-rapida) var(--easing);
}

.btn--primario {
  background: var(--color-cta-fondo);
  color: var(--color-cta-texto);
  border-color: var(--color-cta-fondo);
}
.btn--primario:hover {
  background: var(--color-cta-fondo-hover);
  border-color: var(--color-cta-fondo-hover);
  color: var(--color-cta-texto);
}

.btn--secundario {
  background: transparent;
  color: var(--color-cta-fondo);
  border-color: var(--color-cta-fondo);
}
.btn--secundario:hover {
  background: var(--color-cta-fondo);
  color: var(--color-cta-texto);
}

.btn--discreto {
  background: transparent;
  color: var(--color-enlace);
  border-color: transparent;
  padding-inline: var(--sp-3);
}
.btn--discreto:hover { color: var(--color-enlace-hover); text-decoration: underline; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--bloque { width: 100%; }

/* --- Formularios · SC 1.3.1, 1.3.5, 3.3.1, 3.3.2 --------------------------- */
.campo { margin-bottom: var(--sp-5); }

.campo__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-texto-fuerte);
}
.campo__requerido { color: var(--color-error-texto); font-weight: var(--fw-bold); }

/* Marcador de campo no obligatorio. Desde el 2026-08-25 el formulario se
   agrupa por TEMA y no por obligatoriedad -desaparecio la seccion "Opcional"-,
   asi que cada campo tiene que declarar su condicion en su propia etiqueta.
   Tono normal y peso normal: informa, no compite con la etiqueta. */
.campo__opcional {
  margin-inline-start: var(--sp-2);
  font-weight: var(--fw-normal);
  font-size: var(--fs-xs);
  color: var(--color-texto);
  opacity: .75;
}

.campo__ayuda {
  display: block;
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-texto);
}

.campo__control {
  display: block;
  width: 100%;
  min-height: var(--target-min);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-texto-fuerte);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  transition: border-color var(--dur-rapida) var(--easing);
}
.campo__control:hover { border-color: var(--color-cta-fondo); }
.campo__control::placeholder { color: #6B7684; opacity: 1; }

textarea.campo__control { min-height: 8rem; resize: vertical; }

select.campo__control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7684' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
}

/* Estado de error */
.campo--error .campo__control { border-color: var(--color-error-borde); border-width: 2px; }
.campo__error {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-error-texto);
}
/* Icono decorativo. El error se comunica con texto, no solo con el símbolo.
   El contenido generado no es leído de forma fiable por lectores de pantalla,
   que es justo lo que se busca aquí. */
.campo__error::before { content: "\26A0"; flex: none; }

/* Casilla de consentimiento */
.consentimiento {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: var(--color-fondo-alt);
  border-radius: var(--radio-md);
}
.consentimiento input[type="checkbox"] {
  flex: none;
  /* 24px cumple el minimo de SC 2.5.8. Se sube a 28 y la etiqueta asociada
     amplia el area de activacion, porque es el control del consentimiento. */
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0;
  accent-color: var(--color-cta-fondo);
}
.consentimiento label { font-size: var(--fs-xs); max-width: none; }

/* Región de estado del formulario · se anuncia con aria-live en el HTML */
.form-estado { margin-bottom: var(--sp-5); }
.form-estado:empty { display: none; }

/* --- Alerts ---------------------------------------------------------------- */
.alerta {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--color-fondo-alt);
  font-size: var(--fs-sm);
}
.alerta > * { max-width: none; }
.alerta__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
  color: var(--color-texto-fuerte);
}
.alerta--exito  { border-color: var(--color-exito-borde); background: var(--color-exito-fondo); }
.alerta--error  { border-color: var(--color-error-borde); background: var(--color-error-fondo); color: var(--color-error-texto); }
.alerta--aviso  { border-color: var(--color-aviso-borde); background: var(--color-aviso-fondo); }
.alerta--info   { border-color: var(--color-info-borde);  background: var(--color-info-fondo); }

/* --- Cards ----------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--dur-media) var(--easing);
  height: 100%;
}
.card:hover { box-shadow: var(--sombra-md); }
.card > * { max-width: none; }
.card__titulo { font-size: var(--fs-lg); }
.card__pie { margin-top: auto; padding-top: var(--sp-3); }

/* Card enlazada: el área completa es clicable, pero el nombre accesible
   lo aporta el enlace, no el contenedor. */
.card--enlace { position: relative; }
.card--enlace a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card--enlace:has(a:focus-visible) {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-offset);
}

/* ===========================================================================
   CAPA VISUAL · 2026-08-24

   Objetivo: que el sitio se sienta mas vendible sin salirse del sistema de
   marca. Se respeta lo que el brandbook define y se evita lo que prohibe:
     · mucho espacio en blanco y jerarquia visible;
     · azul como ancla y accion principal;
     · turquesa SOLO como acento de accion e interaccion;
     · legibilidad por encima de decoracion;
     · SIN gradientes, SIN iconografia inventada, SIN saturacion.

   Todo lo que la marca no define -sombras, radios, grosores de acento- son
   decisiones tecnicas y usan tokens --ui-.
   =========================================================================== */

/* Acento de seccion · una regla corta en turquesa sobre cada H2 de seccion.
   Da ritmo visual y jerarquia sin anadir un solo elemento al HTML. */
.seccion > .contenedor > h2::before {
  content: "";
  display: block;
  inline-size: 48px;
  block-size: 4px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radio-full);
  background: var(--c-turquesa);
}

/* El hero no lleva acento: su jerarquia ya la marca el H1. */
.hero .hero__titulo::before { content: none; }

/* Precio · componente de oferta. Sustituye a los estilos en linea que habia
   repetidos en tres paginas. */
.precio {
  margin-top: var(--sp-5);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-titulo);
}
.precio + .meta { margin-top: var(--sp-2); }

/* Tarjetas · mas aire, elevacion al pasar y acento superior en las enlazadas.
   El acento aparece solo al interactuar: en reposo la pagina se mantiene
   tranquila, que es lo que pide el brandbook. */
.card { padding: var(--sp-6); }
.card:hover { box-shadow: var(--ui-sombra-lg); }

.card--enlace { transition: box-shadow var(--dur-media) var(--easing),
                            transform var(--dur-media) var(--easing); }
.card--enlace::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  border-start-start-radius: var(--radio-lg);
  border-start-end-radius: var(--radio-lg);
  background: var(--c-turquesa);
  opacity: 0;
  transition: opacity var(--dur-media) var(--easing);
}
.card--enlace:hover::before,
.card--enlace:has(a:focus-visible)::before { opacity: 1; }
.card--enlace:hover { transform: translateY(-2px); }

/* El movimiento se retira si la persona lo ha pedido. */
@media (prefers-reduced-motion: reduce) {
  .card--enlace,
  .card--enlace:hover { transform: none; transition: none; }
}

/* Botones · algo mas de presencia y una elevacion sutil en el primario. */
.btn { padding-block: var(--sp-4); font-size: var(--fs-md); }
.btn--primario { box-shadow: var(--sombra-sm); }
.btn--primario:hover { box-shadow: var(--sombra-md); }

/* Pasos · el numero pesa mas, para que el metodo se lea de un vistazo. */
.pasos > li::before {
  box-shadow: var(--sombra-sm);
}

/* --- Testimonios ------------------------------------------------------------
   Citas verbatim de recomendaciones publicas de LinkedIn. El texto NUNCA se
   edita ni se traduce: se reproduce tal cual lo escribio la persona. */
.testimonio { display: flex; flex-direction: column; gap: var(--sp-4); }
.testimonio__cita {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-texto-fuerte);
  text-align: left;      /* una cita no se justifica: se respeta su medida */
  hyphens: none;
}
.testimonio__autor { margin: 0; }
.testimonio__nombre {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-titulo);
}
.testimonio--destacado .testimonio__cita {
  font-size: var(--fs-xl);
  padding-inline-start: var(--sp-5);
  border-inline-start: 4px solid var(--c-turquesa);
}

/* --- Logotipo de cabecera ---------------------------------------------------
   El simbolo oficial no lleva wordmark, asi que el nombre va como texto.
   La altura es una decision tecnica: la marca no define tamano minimo ni
   area de proteccion. */
.cabecera__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.cabecera__simbolo {
  block-size: 36px;
  inline-size: auto;
  flex: none;
}
.cabecera__nombre {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--color-titulo);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

/* --- Boton de WhatsApp y redes sociales ------------------------------------- */
.btn--whatsapp {
  background: var(--ui-whatsapp-fondo);
  color: var(--c-blanco);
  border-color: var(--ui-whatsapp-fondo);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background: var(--ui-whatsapp-fondo-hover);
  border-color: var(--ui-whatsapp-fondo-hover);
  color: var(--c-blanco);
}
.btn__icono { flex: none; }

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.redes__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44x44: objetivo tactil comodo, muy por encima del minimo de 24 de SC 2.5.8 */
  inline-size: var(--target-min, 44px);
  block-size: var(--target-min, 44px);
  border-radius: var(--radio-md);
  color: var(--color-titulo);
  text-decoration: none;
}
.redes__enlace:hover { background: var(--color-fondo-alt); color: var(--color-enlace-hover); }

/* --- Header y navegación · SC 2.1.1, 2.4.3, 4.1.2 --------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
}
.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 72px;
}

/* Botón de menú · real <button>, con aria-expanded gestionado por JS.
   Oculto en escritorio.                                                      */
/* Sin JS el botón no funcionaría, así que no se muestra: la navegación
   queda desplegada y usable. Se activa sólo cuando hay JS (.js en <html>). */
.nav-toggle { display: none; }

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  color: var(--color-texto-fuerte);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.nav-toggle__barras {
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
  display: block;
}
.nav-toggle__barras::before,
.nav-toggle__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__barras::before { top: -6px; }
.nav-toggle__barras::after  { top:  6px; }

.nav__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.nav__lista li { margin: 0; max-width: none; }

.nav__enlace {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--sp-2) var(--sp-3);
  color: var(--color-texto-fuerte);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-radius: var(--radio-md);
}
.nav__enlace:hover { background: var(--color-fondo-alt); color: var(--color-enlace-hover); }
.nav__enlace[aria-current="page"],
.nav__enlace[aria-current="location"] {
  color: var(--color-titulo);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 -2px 0 var(--color-titulo);
}

/* Móvil: el menú se oculta con `hidden`, no desplazándolo fuera de pantalla.
   Así no quedan enlaces enfocables invisibles (corrige el defecto A11Y-05).  */
@media (max-width: 79.99em) {
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra-md);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
  }
  .nav[hidden] { display: none; }
  .nav__cta { margin-top: var(--sp-4); }
  .nav__cta .btn { width: 100%; }
}

@media (min-width: 80em) {
  .nav-toggle, .js .nav-toggle { display: none; }

  /* La lista y la CTA van en la misma fila. Se declara también sobre
     .nav[hidden] para neutralizar el atributo que deja el JS al cruzar
     el punto de corte, sin recurrir a !important. */
  .nav,
  .nav[hidden] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
  .cabecera__inner { gap: var(--sp-6); }
  .nav__lista { flex-direction: row; align-items: center; gap: var(--sp-2); }
  .nav__cta { margin-left: 0; }
  .cabecera__logo { flex-shrink: 0; }
  .cabecera__nombre { white-space: nowrap; }
  .nav__lista { gap: var(--sp-1); }
  .nav__enlace { font-size: var(--fs-sm); padding-inline: var(--sp-1); }
}

/* --- Footer ---------------------------------------------------------------- */
.pie {
  background: var(--color-fondo-alt);
  border-top: 1px solid var(--color-borde);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--color-texto);       /* 7.44:1 — corrige el 1.61:1 del sitio actual */
}
.pie__rejilla {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; }
}
.pie__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-texto-fuerte);
  margin-bottom: var(--sp-3);
}
.pie__lista { list-style: none; padding: 0; }
.pie__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);   /* corrige el enlace de 65×15 px */
  padding-block: var(--sp-1);
}
.pie__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-borde);
  font-size: var(--fs-xs);
}

/* --- Utilidades ------------------------------------------------------------ */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.centrado   { text-align: center; }
.sin-margen { margin: 0; }
.ancho-completo { max-width: none; }

/* --- Estados de formulario · SEG-011.T10 (UI únicamente) -------------------
   Normal · focus · error · loading · success · consentimiento pendiente ·
   error de servidor. Sin conexión a HubSpot ni checkout.                    */

/* Loading: el botón anuncia el estado con texto, no solo con el spinner */
.btn--cargando { pointer-events: none; opacity: .85; }
.btn__spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
  flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Es la ÚNICA animación con duración codificada, fuera del sistema de tokens:
   por eso necesita su propia regla. Antes solo se ralentizaba a 3s, que sigue
   siendo movimiento perpetuo. Se detiene del todo. No se pierde información:
   el estado de envío lo comunican el texto del botón («Enviando…») y
   `aria-busy`, no el giro. */
@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation: none; }
}

/* Formulario deshabilitado mientras se envía */
.form--enviando .campo__control,
.form--enviando input { opacity: .7; pointer-events: none; }

/* Consentimiento sin marcar: el error se comunica con texto y borde */
.consentimiento--error {
  border: 2px solid var(--color-error-borde);
  background: var(--color-error-fondo);
}

/* Resumen de errores al principio del formulario · SC 3.3.1 */
.error-resumen {
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--color-error-borde);
  border-radius: var(--radio-md);
  background: var(--color-error-fondo);
  color: var(--color-error-texto);
}
.error-resumen ul { margin-top: var(--sp-2); }
/* Los enlaces del resumen son objetivos reales, no enlaces en linea dentro de
   una frase: no aplica la excepcion de SC 2.5.8 y deben alcanzar 24x24. */
.error-resumen a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: var(--sp-1);
  color: var(--color-error-texto);
  font-weight: var(--fw-semibold);
}

/* --- Hero ------------------------------------------------------------------
   Sin imagen de fondo: el texto nunca depende del contraste de una foto.     */
.hero { padding-block: var(--sp-9) var(--sp-8); }
.hero__titulo { max-width: 20ch; }
.hero__bajada { margin-top: var(--sp-4); max-width: 60ch; }
.hero__acciones { margin-top: var(--sp-6); }
.hero__prueba {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-borde);
}

/* --- Pasos numerados -------------------------------------------------------- */
.pasos { list-style: none; padding: 0; counter-reset: paso; }
.pasos > li {
  counter-increment: paso;
  position: relative;
  padding-left: var(--sp-8);
  margin-top: var(--sp-5);
  max-width: var(--medida);
}
.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: var(--color-cta-fondo);
  color: var(--color-cta-texto);
  border-radius: var(--radio-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* --- Listas de inclusión y exclusión ---------------------------------------- */
.lista-marca { list-style: none; padding: 0; }
.lista-marca > li { position: relative; padding-left: var(--sp-6); }
.lista-marca > li::before {
  position: absolute; left: 0; top: 0;
  font-weight: var(--fw-bold);
}
.lista-marca--si > li::before { content: "\2713"; color: #2F7239; }   /* 5.85:1 */
.lista-marca--no > li::before { content: "\00D7"; color: var(--color-error-texto); }

/* --- Placeholder de contenido pendiente -------------------------------------
   Visible a propósito: obliga a resolverlo antes de publicar.                 */
.pendiente {
  padding: var(--sp-4) var(--sp-5);
  border: 2px dashed var(--color-aviso-borde);
  border-radius: var(--radio-md);
  background: var(--color-aviso-fondo);
  font-size: var(--fs-xs);
}
.pendiente > * { max-width: none; }
.pendiente__etiqueta {
  display: inline-block;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-2xs);
  margin-bottom: var(--sp-1);
}

/* --- Página de error / gracias ----------------------------------------------- */
.centrada { min-height: 55vh; display: grid; place-items: center; text-align: center; }
.centrada .contenedor > * { margin-inline: auto; }

/* H1 largo de la Home V1: el mensaje aprobado tiene 177 caracteres y
   necesita un escalón menos de tamaño y más medida para no ocupar
   toda la primera pantalla en móvil. */
.hero__titulo--largo {
  font-size: var(--fs-xl);
  max-width: 30ch;
  letter-spacing: var(--ls-normal);
}
@media (min-width: 48em) {
  .hero__titulo--largo { font-size: var(--fs-2xl); max-width: 24ch; }
}

/* AUD-02…11 · sistema comercial. Alineación de lectura revisada en DEC-028. */
section[id], h1[id], h2[id], main[id] { scroll-margin-top: var(--sp-4); }

.antetitulo {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-titulo);
  margin-bottom: var(--sp-5);
  line-height: var(--lh-normal);
}
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--target-min);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.enlace-flecha:hover { text-decoration: underline; }
.portada { padding-block: var(--sp-8); }
.portada__rejilla, .editorial, .confianza__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
.portada__contenido { min-width: 0; }
.portada h1 {
  font-size: var(--ui-portada-titulo);
  max-width: 22ch;
  text-wrap: pretty;
}
.portada__bajada {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
.portada__acciones { display: grid; justify-items: start; gap: var(--sp-3); margin-top: var(--sp-6); }
.portada__acciones .btn { text-align: left; }
.portada__nota { margin-top: var(--sp-4); max-width: 44ch; }

.muestra {
  min-width: 0;
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--ui-muestra-sombra);
  background: var(--color-fondo);
}
.muestra__cabecera {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--color-borde);
}
.muestra__marca { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); color: var(--color-titulo); }
.muestra__etiqueta {
  font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
}
.muestra__titulo { font-size: var(--ui-muestra-titulo); font-weight: var(--fw-semibold); color: var(--color-titulo); line-height: var(--lh-tight); margin-top: var(--sp-5); letter-spacing: var(--ls-tight); }
.muestra__subtitulo { font-size: var(--fs-xs); margin-top: var(--sp-3); }
.muestra__areas { margin-top: var(--sp-5); font-size: var(--fs-xs); }
.muestra__areas > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; padding-block: var(--sp-3); border-bottom: 1px solid var(--color-borde); }
.muestra__areas dt { display: flex; gap: var(--sp-3); align-items: center; font-weight: var(--fw-semibold); }
.muestra__areas dd { margin: 0; }
.senal { inline-size: var(--sp-2); block-size: var(--sp-2); border-radius: var(--radio-full); flex: none; background: var(--ui-senal-base); }
.senal--atencion { background: var(--ui-senal-atencion); }
.senal--revision { background: var(--ui-senal-revision); }
.muestra__hallazgo { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--color-fondo-alt); border-inline-start: var(--sp-1) solid var(--c-turquesa); border-radius: var(--radio-sm); }
.muestra__hallazgo .antetitulo { margin-bottom: var(--sp-2); }
.muestra__hallazgo h2 { font-size: var(--fs-md); line-height: var(--lh-snug); }
.muestra__hallazgo > p:not(.antetitulo) { font-size: var(--fs-xs); margin-top: var(--sp-3); }
.muestra__siguiente { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.muestra__pie { font-size: var(--fs-2xs); margin-top: var(--sp-4); }

.confianza { padding-block: var(--sp-8); border-block: 1px solid var(--color-borde); }
.confianza .antetitulo { margin-bottom: var(--sp-3); }
.confianza .enlace-flecha { margin-top: var(--sp-4); }
.confianza .testimonio__cita { font-size: var(--fs-md); line-height: var(--lh-normal); }
.encabezado-seccion > p:not(.antetitulo) { margin-top: var(--sp-5); max-width: 54ch; }
.encabezado-seccion > .enlace-flecha { margin-top: var(--sp-5); }
.encabezado-seccion h2 { max-width: 22ch; }
.motivos { margin-top: var(--sp-8); gap: var(--sp-7); }
.motivo { padding-top: var(--sp-5); border-top: 1px solid var(--color-borde); }
.motivo__numero { display: block; font-size: var(--fs-xs); color: var(--color-titulo); margin-bottom: var(--sp-5); }
.motivo h3 { font-size: var(--fs-lg); max-width: 20ch; }
.motivo p { font-size: var(--fs-sm); margin-top: var(--sp-4); }
.entregables { display: grid; gap: var(--sp-5); }
.entregable { display: flex; align-items: flex-start; gap: var(--sp-5); padding-block: var(--sp-5); border-bottom: 1px solid var(--color-borde); }
.entregable__numero { color: var(--color-titulo); font-weight: var(--fw-semibold); font-size: var(--fs-xs); padding-top: var(--sp-1); }
.entregable h3 { font-size: var(--fs-lg); }
.entregable p { font-size: var(--fs-sm); margin-top: var(--sp-2); }

.inicio-proceso { list-style: none; padding: 0; margin-top: var(--sp-8); display: grid; gap: var(--sp-7); }
.inicio-proceso li { margin: 0; max-width: none; }
.inicio-proceso__numero { display: grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); border: 1px solid var(--color-borde); border-radius: var(--radio-full); color: var(--color-titulo); font-weight: var(--fw-semibold); margin-bottom: var(--sp-5); }
.inicio-proceso h3 { font-size: var(--fs-lg); }
.inicio-proceso p { font-size: var(--fs-sm); margin-top: var(--sp-3); }
.fundadora { border-block: 1px solid var(--color-borde); }
.fundadora__nombre { font-size: var(--ui-fundadora-nombre); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-titulo); letter-spacing: var(--ls-tight); }
.fundadora__punto { color: var(--c-turquesa); }
.fundadora__rol { font-size: var(--fs-xs); margin-top: var(--sp-4); }
.fundadora__sectores { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.fundadora__sectores span { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-borde); border-radius: var(--radio-full); font-size: var(--fs-2xs); }
.preguntas { border-top: 1px solid var(--color-borde); }
.pregunta { border-bottom: 1px solid var(--color-borde); }
.pregunta summary { cursor: pointer; padding-block: var(--sp-5); padding-inline-end: var(--sp-3); font-weight: var(--fw-semibold); color: var(--color-titulo); font-size: var(--fs-sm); min-height: var(--target-min); }
.pregunta > div { padding-bottom: var(--sp-5); font-size: var(--fs-sm); }
.pregunta[open] summary { padding-bottom: var(--sp-3); }
.cierre { background: var(--color-fondo-alt); }
.cierre__contenido > h2 { font-size: var(--ui-cierre-titulo); max-width: 28ch; }
.cierre__contenido > p:not(.antetitulo) { margin-top: var(--sp-5); max-width: 54ch; }
.cierre__acciones { margin-top: var(--sp-6); gap: var(--sp-5); }
.captacion-aviso { margin-top: var(--sp-6); padding: var(--sp-6); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-fondo-alt); }
.captacion-aviso h3 { font-size: var(--fs-lg); }
.captacion-aviso p { margin-top: var(--sp-4); }
.captacion-aviso .cluster { margin-top: var(--sp-5); }
.oferta__acciones { margin-top: var(--sp-5); }

@media (min-width: 48em) {
  .confianza__rejilla { grid-template-columns: 1fr 2fr; gap: var(--sp-9); }
  .inicio-proceso { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .muestra { padding: var(--sp-6); }
}
@media (min-width: 64em) {
  .portada__rejilla { grid-template-columns: var(--ui-portada-columnas); gap: var(--sp-9); }
  .editorial { grid-template-columns: var(--ui-editorial-columnas); gap: var(--sp-10); align-items: start; }
  .muestra { transform: rotate(var(--ui-muestra-inclinacion)); }
}
@media (max-width: 47.99em) {
  .portada { padding-block: var(--sp-8); }
  .portada__acciones { justify-items: stretch; }
  .portada__acciones .btn { width: 100%; justify-content: space-between; }
  .cierre__acciones { align-items: stretch; flex-direction: column; }
  .captacion-aviso .cluster { align-items: stretch; flex-direction: column; }
}

/* Fotografías reales proporcionadas por la propietaria · 2026-10-21. */
.fundadora__retrato { margin: 0 auto; width: min(100%, clamp(15rem, 32vw, 23.5rem)); max-width: 100%; justify-self: center; min-width: 0; }
.fundadora__foto { width: 100%; height: auto; aspect-ratio: var(--ui-retrato-proporcion); object-fit: cover; object-position: var(--ui-retrato-foco); border-radius: var(--radio-lg); }
.fundadora > .editorial, .perfil { align-items: center; }
.fundadora__biografia > .fundadora__rol { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.fundadora__idea { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.capacitacion { margin-top: var(--sp-7); align-items: start; }
.capacitacion figure { margin: 0; min-width: 0; }
.capacitacion img { width: 100%; height: auto; }
.capacitacion figcaption { margin-top: var(--sp-4); }

/* Tarifas de DEC-029: comparación en escritorio, filas apiladas en móvil. */
.precios__subtitulo { margin-top: var(--sp-8); font-size: var(--fs-lg); }
.tabla-precios { width: 100%; margin-top: var(--sp-6); border-collapse: collapse; font-size: var(--fs-sm); }
.tabla-precios th, .tabla-precios td { padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; }
.tabla-precios thead th { font-weight: var(--fw-semibold); color: var(--color-titulo); }
.tabla-precios tbody th { font-weight: var(--fw-medium); }
.tabla-precios td:nth-child(2), .tabla-precios thead th:nth-child(2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-precios td:nth-child(2) { color: var(--color-titulo); font-weight: var(--fw-semibold); }
@media (max-width: 47.99em) {
  .tabla-precios, .tabla-precios tbody, .tabla-precios tr, .tabla-precios th, .tabla-precios td { display: block; }
  .tabla-precios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-precios tr { padding-block: var(--sp-4); border-bottom: 1px solid var(--color-borde); }
  .tabla-precios th, .tabla-precios td { border: 0; padding: var(--sp-2) 0; }
  .tabla-precios td:nth-child(2) { text-align: left; white-space: normal; }
  .tabla-precios td::before { content: attr(data-etiqueta); display: block; font-size: var(--fs-2xs); color: var(--color-texto); font-weight: var(--fw-normal); margin-bottom: var(--sp-1); }
}

/* Consultas contextualizadas; una sola acción por servicio, sin envío automático. */
.tabla-precios__consulta { display: flex; align-items: center; gap: var(--sp-2); width: fit-content; min-height: var(--target-min); margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-underline-offset: var(--sp-1); }
/* La acción de contacto conserva una sola línea cuando hay menú de escritorio. */
.nav__cta { flex-shrink: 0; }
.nav__cta .btn { white-space: nowrap; font-size: var(--fs-sm); }

/* Fotografía con marco proporcionada por la propietaria: composición completa. */
.fundadora__foto--completa { aspect-ratio: auto; object-fit: contain; border-radius: 0; }


/* Ilustraciones proporcionadas por la propietaria, sin recorte ni retoque. */
.ilustracion { object-fit: contain; height: auto; }
.ilustracion--tema { width: 160px; max-width: 100%; margin-bottom: var(--sp-5); }
.ilustracion--detalle { width: 128px; max-width: 100%; margin-bottom: var(--sp-4); }
.formacion-hero { display: grid; align-items: center; gap: var(--sp-8); }
.ilustracion--hero { width: 200px; max-width: 100%; justify-self: center; }
@media (min-width: 48em) {
  .formacion-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .ilustracion--hero { width: 200px; }
}


/* Logos: originales intactos, encuadre óptico y espacio equivalente por marca. */
.cintillo-marcas { padding-block: var(--sp-7); border-block: 1px solid var(--color-borde); }
.cintillo-marcas__titulo { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: center; }
.cintillo-marcas__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); list-style: none; margin-top: var(--sp-6); padding: 0; }
.cintillo-marcas__item { margin: 0; flex: 0 1 184px; width: calc(50% - var(--sp-2)); max-width: calc(50% - var(--sp-2)); min-width: 0; height: 112px; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--c-blanco); }
.cintillo-marcas__ventana { position: relative; overflow: hidden; width: min(144px, calc(76px * var(--logo-ratio))); max-width: 100%; aspect-ratio: var(--logo-ratio); }
.cintillo-marcas__ventana img { position: absolute; top: var(--logo-y); left: var(--logo-x); width: var(--logo-escala); max-width: none; height: auto; }