/* ÁBACO Gestión · el sitio comercial (gestion.abaco.software) con el diseño común de la suite ÁBACO.
   Va DESPUÉS de la hoja del sitio (resources/css/abaco-sitio.css), y por eso puede:
     1. encajar los componentes ab- de suite.css, que las reglas genéricas del sitio
        (.sitio a, .sitio p, .sitio h1…) pisaban;
     2. darle al sitio entero los tokens de la suite (colores, letras, radios, sombras)
        sin tocar su hoja —que se compila con Vite— ni sus 32 plantillas;
     3. dar a sus piezas propias (secciones, tarjetas, botones, formularios, cabeceras
        con foto) el aspecto de las mismas piezas en las otras herramientas.
   Lo único propio de ÁBACO Gestión: el héroe de la portada y las cabeceras de las
   páginas interiores llevan la foto de la ciudad bajo el velo marino. */

/* ---------------------------------------------------------------------------
   1. Componentes ab- dentro del sitio
   ------------------------------------------------------------------------ */
.sitio .ab-barra a.ab-barra__suite { color: var(--sobre-oscuro); text-decoration: none; }
.sitio .ab-lanzador__titulo a { color: var(--marino-600); }
.sitio .ab-app { color: inherit; text-decoration: none; }
.sitio .ab-nav a { color: var(--apagado); text-decoration: none; }
.sitio .ab-nav a:hover, .sitio .ab-nav a[aria-current="page"] { color: var(--tinta); }
.sitio a.ab-marca { color: var(--tinta); text-decoration: none; }
.sitio a.ab-boton { color: #fff; text-decoration: none; }
.sitio a.ab-boton--secundario { color: var(--marino-600); }
.sitio a.ab-boton--claro, .sitio a.ab-boton--claro:hover { color: var(--marino-900); }
.sitio a.ab-boton--contorno { color: var(--sobre-oscuro); }
.sitio a.ab-boton--contorno:hover { color: #fff; }
.sitio .ab-pie a { color: var(--sobre-oscuro); text-decoration: none; }
.sitio .ab-pie a:hover { text-decoration: underline; }
.sitio .ab-pie a[aria-current] { color: var(--h); }
.sitio .ab-pie h2 { margin: 0 0 14px; font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado-oscuro); }
.sitio .ab-pie p { margin: 0 0 10px; }
.sitio .ab-pie p a { text-decoration: underline; text-underline-offset: 3px; }

/* El menú del teléfono del sitio (un <details>, sin JavaScript) sustituye a la navegación por debajo de 900 px. */
.ab-cabecera .menu-movil { display: none; }
@media (max-width: 900px) {
  .sitio .ab-nav, .sitio .ab-cuenta { display: none; }
  .ab-cabecera .menu-movil { display: block; margin-left: auto; }
  .sitio .ab-cabecera { position: relative; }
}
.sitio .menu-movil > summary { border-color: var(--borde-control); border-radius: var(--radio-control); color: var(--tinta); }

/* ---------------------------------------------------------------------------
   2. Los tokens de la suite en el sitio
   ------------------------------------------------------------------------ */
body.sitio {
  --s-papel: var(--superficie);
  --s-papel-alt: var(--lienzo);
  --s-tinta: var(--tinta);
  --s-tinta-2: #3f4856;
  --s-tinta-3: var(--apagado);
  --s-borde: var(--borde);
  --s-marca: var(--marino-600);
  --s-marca-osc: var(--marino-900);
  --s-marca-claro: var(--marino-100);
  --s-verde: var(--positivo);
  --s-radio: var(--radio);
  --s-radio-sm: var(--radio-control);
  --s-sombra: var(--sombra-1);
  --s-sombra-alta: var(--sombra-2);
  /* El mismo ancho de contenido que la cabecera de la suite: los bordes coinciden. */
  --s-ancho: calc(var(--contenedor) - 2 * var(--espacio-4));
  --s-titulo: clamp(30px, 1.2rem + 1.6vw, 36px);
  --s-seccion: clamp(20px, 1rem + .5vw, 24px);
  --s-guia: 17px;
  --ab-font-sans: var(--font-letra);
  --ab-font-mono: var(--font-cifras);
  --ab-foco: var(--foco);
  font-family: var(--font-letra);
  font-size: 15px;
  line-height: 24px;
  color: var(--tinta);
  background: var(--lienzo);
}
.sitio :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.env { width: min(100% - 2 * var(--espacio-4), var(--s-ancho)); }

/* Títulos: los de página y los de sección en Newsreader, como en las otras herramientas;
   los de tarjeta y de grupo siguen en Public Sans. La segunda mitad en cursiva va del color
   de la herramienta. */
.sitio h1 { font-family: var(--font-titular); font-weight: 500; letter-spacing: -.015em; }
.sitio h2, .sitio h3 { letter-spacing: -.01em; font-weight: 650; }
.sitio .t-titulo { font-family: var(--font-titular); font-weight: 500; font-size: var(--s-titulo); line-height: 1.17; letter-spacing: -.01em; }
.sitio .t-titulo em, .sitio h1 em { font-style: italic; color: var(--h-tinta); }
.sitio .t-seccion { font-size: var(--s-seccion); line-height: 1.25; }

/* El antetítulo: la misma etiqueta pequeña en mayúsculas de ab-antetitulo, sin la raya. */
.sitio .gorro { font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .08em; color: var(--h-tinta); margin-bottom: 10px; }
.sitio .gorro::before { display: none; }
.sitio .gorro--claro { color: var(--h); }

.sitio .guia { color: var(--apagado); line-height: 27px; }

/* Las secciones: el lienzo de la suite, y las alternas en superficie blanca. */
.sitio .seccion { padding-block: clamp(56px, 2.5rem + 3vw, 88px); }
.sitio .seccion--alt { background: var(--superficie); border-block: 1px solid var(--borde); }
.sitio .seccion--linea { border-top-color: var(--borde); }
.sitio .cabeza-seccion { margin-bottom: clamp(28px, 1rem + 1.6vw, 44px); }

/* ---------------------------------------------------------------------------
   3. Botones: los de ab-boton (40 px, 48 px los grandes, radio 8)
   ------------------------------------------------------------------------ */
.sitio .btn { min-height: var(--control); padding: 0 16px; gap: 8px; border-radius: var(--radio-control); font: 600 14px/1.2 var(--font-letra); box-shadow: none; }
.sitio .btn--grande { min-height: 48px; padding: 0 22px; font-size: 15px; }
.sitio .btn--principal { background: var(--marino-600); color: #fff; }
.sitio .btn--principal:hover { background: var(--marino-700); color: #fff; }
.sitio .btn--fantasma { background: var(--superficie); color: var(--marino-600); border-color: var(--borde-control); }
.sitio .btn--fantasma:hover { background: var(--marino-50); color: var(--marino-700); border-color: var(--borde-control); }
.sitio .btn--claro { background: #fff; color: var(--marino-900); }
.sitio .btn--claro:hover { background: var(--marino-100); color: var(--marino-900); }
.sitio .btn--contorno-claro { background: transparent; color: var(--sobre-oscuro); border-color: rgba(185, 205, 227, .45); }
.sitio .btn--contorno-claro:hover { background: rgba(244, 247, 251, .08); color: #fff; border-color: var(--marino-200); }
.acciones { gap: 12px; margin-top: 28px; }

/* ---------------------------------------------------------------------------
   4. Tarjetas, iconos, insignias y avisos: los de ab-tarjeta, ab-insignia y ab-mensaje
   ------------------------------------------------------------------------ */
.sitio .tarjeta,
.sitio .plan,
.sitio .asistente,
.sitio .tarjeta-formulario,
.sitio .recorrido__paso,
.sitio .actor,
.sitio .garantia {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}
.sitio .tarjeta { padding: var(--espacio-6); }
.sitio .tarjeta:hover, .sitio .actor:hover { border-color: #cdd4de; box-shadow: var(--sombra-2); transform: translateY(-2px); }
.sitio .tarjeta h3 { font-size: 17px; line-height: 24px; margin-bottom: 6px; }
.sitio .tarjeta p { color: var(--apagado); font-size: 15px; line-height: 23px; }

/* El icono de cada módulo, en el color de ÁBACO Gestión (como el logo de cada herramienta). */
.sitio .icono { width: 44px; height: 44px; border-radius: 22%; background: var(--h-suave); color: var(--h-tinta); }
.sitio .icono--exito { background: var(--positivo-suave); color: var(--positivo); }

.sitio .pastilla { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 0; border-radius: var(--radio-pildora); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: middle; white-space: nowrap; }
.sitio .pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sitio .pastilla--construyendo { background: var(--aviso-suave); color: var(--aviso); }
.sitio .pastilla--recomendado { background: var(--h-suave); color: var(--h-tinta); }

.sitio .nota { border-color: #d3deea; border-radius: var(--radio); background: var(--marino-50); color: var(--tinta); font-size: 14px; line-height: 21px; padding: 14px 16px; }
.sitio .nota--aviso, .sitio .nota--enlace { border-color: #f1d9b5; background: var(--aviso-suave); color: var(--aviso); }
.nota--enlace a { color: var(--aviso); }
.nota-construccion { border-color: #f1d9b5; background: var(--aviso-suave); color: var(--aviso); border-radius: var(--radio); }

/* ---------------------------------------------------------------------------
   5. El héroe de la portada: ab-heroe con la foto de la ciudad bajo el velo marino
   ------------------------------------------------------------------------ */
.ab-heroe--foto { isolation: isolate; }
.ab-heroe__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.ab-heroe--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(12, 35, 56, .97) 0%, rgba(12, 35, 56, .88) 45%, rgba(12, 35, 56, .62) 100%); }
/* La hoja del sitio pone a todos los h1 y p sus márgenes y su interlineado; aquí mandan los del héroe. */
.sitio .ab-heroe h1 { font-size: 56px; line-height: 60px; letter-spacing: -.02em; font-weight: 500; margin: 18px 0; color: #fff; }
.sitio .ab-heroe h1 em { color: var(--h); }
.sitio .ab-heroe .ab-heroe__entradilla { margin: 0; }
.sitio .ab-heroe img.ab-heroe__foto { display: block; max-width: none; }
@media (max-width: 960px) { .sitio .ab-heroe h1 { font-size: 40px; line-height: 44px; } }

.heroe-garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(185, 205, 227, .16); font-size: 13px; line-height: 20px; color: var(--apagado-oscuro); }
.heroe-garantias li { display: inline-flex; align-items: center; gap: 8px; }
.heroe-garantias svg { flex: none; color: var(--h); }

/* La maqueta del producto, en el cristal de la derecha (ab-vidrio). */
.maqueta-vidrio .ab-vidrio__fila b { font-family: var(--font-cifras); font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.maqueta-vidrio__barras { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(185, 205, 227, .14); }
.maqueta-vidrio__barras i { flex: 1; display: block; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--h), rgba(112, 192, 255, .28)); }
.maqueta-vidrio__barras .b38 { height: 38%; } .maqueta-vidrio__barras .b47 { height: 47%; } .maqueta-vidrio__barras .b54 { height: 54%; }
.maqueta-vidrio__barras .b62 { height: 62%; } .maqueta-vidrio__barras .b71 { height: 71%; } .maqueta-vidrio__barras .b74 { height: 74%; }
.maqueta-vidrio__barras .b88 { height: 88%; } .maqueta-vidrio__barras .b96 { height: 96%; }
.maqueta-vidrio__filas { display: grid; gap: 6px; margin-top: 14px; }
.maqueta-vidrio__filas div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(185, 205, 227, .14); border-radius: var(--radio-control); font-size: 13px; line-height: 18px; color: var(--apagado-oscuro); }
.maqueta-vidrio__filas b { font-family: var(--font-cifras); font-weight: 500; color: #fff; white-space: nowrap; }
@media (max-width: 960px) { .maqueta-vidrio { max-width: 520px; } }

/* ---------------------------------------------------------------------------
   6. Las cabeceras de las páginas interiores y la banda de cierre: el mismo
      formato del héroe (marino, rejilla fina, Newsreader), también con su foto
   ------------------------------------------------------------------------ */
.sitio .cabecera-pagina, .sitio .banda { background: var(--marino-900); color: var(--sobre-oscuro); }
.sitio .cabecera-pagina::after, .sitio .banda::after { background: linear-gradient(100deg, rgba(12, 35, 56, .97) 0%, rgba(12, 35, 56, .88) 50%, rgba(12, 35, 56, .64) 100%); }
.sitio .cabecera-pagina__foto, .sitio .banda__foto { opacity: .4; }
.sitio .cabecera-pagina::before, .sitio .banda::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(185, 205, 227, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 205, 227, .07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000, transparent 75%); }
.sitio .cabecera-pagina > .env, .sitio .banda > .env { position: relative; z-index: 1; }
.sitio .cabecera-pagina { padding-block: clamp(56px, 2.5rem + 4vw, 96px); }
.sitio .cabecera-pagina h1 { font-size: clamp(36px, 1.4rem + 2.2vw, 48px); line-height: 1.12; letter-spacing: -.02em; color: #fff; max-width: 22em; }
.sitio .cabecera-pagina h1 em, .sitio .banda .t-titulo em { color: var(--h); }
.sitio .cabecera-pagina .guia, .sitio .banda .guia { color: var(--apagado-oscuro); font-size: 18px; line-height: 28px; }
.sitio .banda h2 { color: #fff; }
.sitio .cabecera-pagina .migas, .sitio .cabecera-pagina .migas a { color: var(--apagado-oscuro); }
.sitio .cabecera-pagina .migas a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   7. Piezas de la portada
   ------------------------------------------------------------------------ */
.sitio .mosaico figure { border-radius: var(--radio); background: var(--marino-900); }
.sitio .mosaico figure::after { background: linear-gradient(200deg, rgba(31, 78, 121, .38), rgba(12, 35, 56, .6)); }

.sitio .recorrido { gap: 12px; }
.sitio .recorrido__paso { padding: 20px 18px; }
.sitio .recorrido__paso::before { width: 28px; height: 28px; background: var(--h-suave); color: var(--h-tinta); font-size: 13px; }
.sitio .recorrido__paso h3 { font-size: 15px; line-height: 22px; }
.sitio .recorrido__paso p { color: var(--apagado); font-size: 14px; line-height: 21px; }
.sitio .recorrido__paso--futuro { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--borde-control); }

.sitio .actor { overflow: hidden; }
.sitio .actor__foto::after { background: linear-gradient(180deg, rgba(12, 35, 56, .08), rgba(12, 35, 56, .62)); }
.sitio .actor__sigla { font-family: var(--font-titular); font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.sitio .actor__cuerpo { padding: 18px 20px 20px; }
.sitio .actor__cuerpo p { color: var(--apagado); font-size: 14px; line-height: 21px; }

/* ---------------------------------------------------------------------------
   8. Páginas interiores: módulos, planes, asistente, formularios y cuenta
   ------------------------------------------------------------------------ */
.sitio .grupo-modulos__titulo { border-bottom-color: var(--borde); }
.sitio .modulo { border-bottom-color: var(--borde); }
.sitio .modulo__cabeza h3 { font-size: 17px; line-height: 24px; }
.sitio .modulo__cabeza p, .sitio .dolor p, .sitio .garantia p { color: var(--apagado); }
.sitio .garantia { padding: var(--espacio-6); }

.sitio .plan { padding: var(--espacio-6); }
.sitio .plan--recomendado { border: 2px solid var(--marino-600); box-shadow: var(--sombra-2); padding: calc(var(--espacio-6) - 1px); }
.sitio .plan__nombre { font-family: var(--font-titular); font-weight: 500; font-size: 26px; line-height: 30px; letter-spacing: -.01em; }
.sitio .plan__precio b { font-family: var(--font-cifras); font-weight: 500; font-size: 30px; line-height: 34px; letter-spacing: -.01em; }
.sitio .plan__precio--sin b { font-family: var(--font-letra); font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: 0; color: var(--apagado); }
.sitio .plan__modulos span { border-color: var(--borde); background: var(--lienzo); }
.sitio .conmutador { border-color: var(--borde-control); background: var(--superficie); }
.sitio .conmutador__op--activa { background: var(--marino-600); color: #fff; }

.sitio .asistente__respuesta { background: var(--marino-50); border-top-color: var(--borde); }
.sitio .asistente input,
.sitio .asistente select,
.sitio .campo input,
.sitio .campo select,
.sitio .campo textarea {
  min-height: var(--control);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-control);
  font: 400 15px/1.4 var(--font-letra);
  color: var(--tinta);
  background: var(--superficie);
}
.sitio .campo textarea { padding: 10px 12px; }
.sitio .asistente input:focus-visible, .sitio .asistente select:focus-visible,
.sitio .campo input:focus-visible, .sitio .campo select:focus-visible, .sitio .campo textarea:focus-visible { border-color: var(--marino-600); outline: 3px solid var(--foco); outline-offset: 1px; }
.sitio .campo label { font-size: 14px; font-weight: 600; }
.sitio .campo__pista { color: var(--apagado); }
.sitio .campo__error { color: var(--error); }
.campo:has(.campo__error) input, .campo:has(.campo__error) select { border-color: var(--error); }

.formulario-pagina { background: var(--lienzo); }
.sitio .tarjeta-formulario { padding: clamp(24px, 1rem + 1.6vw, 36px); }
.sitio .tarjeta-formulario h1 { font-size: clamp(28px, 1.2rem + 1vw, 34px); line-height: 1.15; }
.sitio .pasos__paso--actual { border-top-color: var(--marino-600); }
.sitio .pasos__paso--actual .pasos__numero { background: var(--marino-600); }
.sitio .pasos__paso--hecho { border-top-color: var(--positivo); }
.sitio .pasos__paso--hecho .pasos__numero { background: var(--positivo); }
.sitio .cuenta-menu a[aria-current="page"] { color: var(--marino-600); border-color: var(--marino-600); }
.sitio .cuenta-titulo { font-size: 17px; }
.sitio .lista-cruces li::before { color: var(--error); }
.sitio .rastro__mala { color: var(--error); }