/* Ajustes de Coreli sobre la entrega de BOS · 10/10/2026.
   Fichero aparte a propósito: cuando llegue un ZIP nuevo del producto, estos
   cambios se recuperan volviendo a enlazar este fichero al final del <head>,
   sin tener que bucear en los ficheros de la entrega. Lo que hay aquí y lo que
   se tocó dentro de la entrega está anotado en herramientas/cambios-bos.md. */

/* ───────── Color por familia ─────────
   Siete acentos de una misma gama fría, con un solo cálido (Servicio) para que
   la fila no sea un degradado plano. Se declaran por `data-family`, que siempre
   lleva el nombre en castellano aunque la página esté en inglés o francés: el
   traductor solo toca textos y aria-label, nunca los atributos de datos.
   La misma regla sirve para la ficha del explorador, la fila del catálogo y la
   sección entera (que lleva la familia abierta), así que el color viaja solo. */
/* El valor por defecto va primero a propósito: tiene la misma especificidad
   que las reglas por familia, así que si fuera después las anularía y la
   sección se quedaría siempre azul. */
.explorer-section{--acento:#5b74ff; --acento-tenue:#5b74ff2e; --acento-humo:#5b74ff14}
[data-family="Dirección y finanzas"]  {--acento:#5b74ff; --acento-tenue:#5b74ff2e; --acento-humo:#5b74ff14}
[data-family="Comercial y marketing"] {--acento:#9a6bff; --acento-tenue:#9a6bff2e; --acento-humo:#9a6bff14}
[data-family="Proyectos y producto"]  {--acento:#2bb3ef; --acento-tenue:#2bb3ef2e; --acento-humo:#2bb3ef14}
[data-family="Compras e inventario"]  {--acento:#1fb79e; --acento-tenue:#1fb79e2e; --acento-humo:#1fb79e14}
[data-family="Servicio y calidad"]    {--acento:#f0a53c; --acento-tenue:#f0a53c2e; --acento-humo:#f0a53c14}
[data-family="Personas"]              {--acento:#ef6ba8; --acento-tenue:#ef6ba82e; --acento-humo:#ef6ba814}
[data-family="Administración"]        {--acento:#8d9ab8; --acento-tenue:#8d9ab82e; --acento-humo:#8d9ab814}

/* ───────── Explorador en dos pisos ─────────
   Antes aparecían las 21 áreas de golpe, en una parrilla de siete columnas por
   tres filas: todo junto y sin jerarquía. Arriba las siete familias, debajo
   solo las áreas de la elegida. */
.module-families{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:10px}
.family-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:76px;padding:12px 10px;border:1px solid #363d4b;border-radius:12px;background:linear-gradient(180deg,#242a35,#1c212a);color:#c8cfdd;font-size:.8125rem;font-weight:650;line-height:1.25;text-align:center;transition:transform .18s,border-color .18s,color .18s,box-shadow .18s}
.family-icon{width:22px;height:22px;flex:0 0 auto;color:var(--acento);transition:transform .18s}
.family-tab:hover{color:#fff;border-color:var(--acento);transform:translateY(-2px);box-shadow:0 10px 24px -14px var(--acento)}
.family-tab:hover .family-icon{transform:scale(1.08)}
.family-tab[aria-pressed="true"]{color:#fff;border-color:var(--acento);background:linear-gradient(180deg,#2b3240,#20262f);box-shadow:0 0 0 1px var(--acento-tenue),0 14px 30px -18px var(--acento)}
.family-tab[aria-pressed="true"] .family-icon{color:var(--acento)}
.family-tab:focus-visible{outline:3px solid #bbc5ff;outline-offset:2px}

/* ───────── La demo, como una aplicación ─────────
   Las áreas de la familia dejan de ser una barra y pasan a ser pestañas de
   ventana: la activa es blanca y se funde con la cabecera de la demo que tiene
   justo debajo. */
.module-tabs{grid-template-columns:repeat(auto-fit,minmax(0,205px));justify-content:start;align-items:end;gap:5px;padding:0;background:none;border:0;border-radius:0}
.module-tabs button{min-height:48px;padding:10px 16px;border:1px solid #363d4b;border-bottom:0;border-radius:11px 11px 0 0;background:linear-gradient(180deg,#242a35,#1e232c);color:#c3cad9;font-size:.875rem;font-weight:650;position:relative;top:1px}
.module-tabs button:hover{background:linear-gradient(180deg,#2e3542,#262c36);color:#fff}
.module-tabs button[aria-selected="true"]{background:#fafbfc;color:#171a20;border-color:transparent;min-height:52px}
.module-tabs button[aria-selected="true"]:hover{background:#fff;color:#171a20}
.module-tabs button[aria-selected="true"]::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--acento)}

/* La ventana: esquinas solo abajo (arriba están las pestañas), sombra de
   verdad y un halo del color de la familia. Antes era un rectángulo con borde
   de 1 px y una sombra de opacidad 0,016 que no se veía. */
.product-stage{position:relative;border:0;border-radius:0 0 14px 14px;background:#fafbfc;box-shadow:0 0 0 1px #ffffff14,0 2px 0 0 var(--acento-tenue),0 36px 70px -34px #050a1fcc,0 18px 40px -30px var(--acento-tenue)}
.product-topline{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#fff,#f6f8fa);border-bottom:1px solid #e4e8ee}
/* Tres puntos de ventana; el primero toma el color de la familia. */
.product-topline::before{content:"";flex:0 0 auto;width:40px;height:8px;background:
  radial-gradient(circle 4px at 4px 4px,var(--acento) 98%,transparent 100%),
  radial-gradient(circle 4px at 20px 4px,#cfd6e0 98%,transparent 100%),
  radial-gradient(circle 4px at 36px 4px,#cfd6e0 98%,transparent 100%)}
.module-screen{position:relative}
/* Un resplandor muy suave detrás de la demo: da aire y cambia con la familia. */
.explorer-section{position:relative;isolation:isolate}
.explorer-section::before{content:"";position:absolute;z-index:-1;left:50%;top:30px;width:min(1100px,92%);height:420px;transform:translateX(-50%);
  background:radial-gradient(60% 60% at 50% 0,var(--acento-humo),transparent 72%);pointer-events:none}

/* ───────── El catálogo, con su icono y su color ───────── */
.module-catalog{grid-template-columns:minmax(0,1fr);gap:0}
.catalog-group{display:grid;grid-template-columns:minmax(170px,235px) minmax(0,1fr);gap:4px 36px;align-items:start;padding:22px 0 6px;border-top:2px solid var(--acento-tenue)}
.catalog-group h3{display:flex;align-items:center;gap:9px;margin:0;padding-top:14px;color:#3d4757}
.catalog-group h3 .family-icon{width:19px;height:19px;color:var(--acento)}
.catalog-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:0 32px}
.catalog-group a:hover{color:var(--acento)}

/* ───────── Profundidad donde antes solo había bordes ───────── */
.price-card{box-shadow:0 18px 40px -28px #16213f59;transition:transform .18s,box-shadow .18s}
.price-card:hover{transform:translateY(-3px);box-shadow:0 26px 54px -28px #16213f73}
.price-card.tier-pro{box-shadow:0 22px 50px -26px #0a23fa4d}
.connector-card{box-shadow:0 14px 34px -26px #16213f4d;transition:transform .18s,box-shadow .18s}
.connector-card:hover{transform:translateY(-2px);box-shadow:0 22px 44px -26px #16213f66}
.plan-table{box-shadow:0 18px 44px -32px #16213f4d}

/* Al quitar el bloque de «¿Solo necesitas Dirección?» queda una sola tarjeta
   bajo la comparativa: la rejilla era de dos columnas y se quedaba pegada a la
   izquierda, con medio ancho vacío. Una columna centrada. */
.pricing-custom{grid-template-columns:minmax(0,580px);justify-content:center}

/* El interruptor de forma de pago. Hereda el aspecto del selector de usuarios
   —misma caja, misma píldora blanca al elegir— porque son dos decisiones de la
   misma fila y no deberían parecer dos controles distintos. */
.pricing-controls{flex-wrap:wrap}
.billing-picker{border:0;padding:0;margin:0;min-width:0}
.billing-picker legend{font-size:.875rem;font-weight:700;margin-bottom:12px}
.billing-picker>div{display:flex;flex-wrap:wrap;gap:5px;padding:5px;border:1px solid #d6dce5;background:#e9ecf1;border-radius:10px}
.billing-picker label{position:relative;cursor:pointer;flex:1}
.billing-picker input{position:absolute;width:1px;height:1px;opacity:0}
.billing-picker label>span{display:flex;justify-content:center;align-items:baseline;gap:6px;padding:11px 18px;font-size:.8125rem;border-radius:6px;white-space:nowrap;border:1px solid transparent;color:#4c5665}
.billing-picker input:checked+span{background:#fff;color:var(--blue);border-color:#d9dfe9;box-shadow:0 2px 4px #101c3510}
.billing-picker input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.billing-picker b{font-weight:750;color:#1c6b4a}
.billing-note{margin-left:auto}
/* La otra forma de pagar, debajo del importe: un precio solo no dice si el
   interruptor cambia algo. */
.price-alt-line{margin-top:6px;min-height:1.7em}
.price-alt{font-size:.8125rem;color:#5b6678}

@media(max-width:1000px){
  .module-families{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pricing-controls{gap:18px}
  .billing-note{margin-left:0;flex-basis:100%;text-align:left}
}
@media(max-width:760px){
  /* En el móvil el explorador era un desplegable con las 21 áreas. Con los dos
     pisos ya no hace falta: familias y áreas se tocan, que es más claro. */
  .mobile-module-label{display:none}
  .module-families{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .family-tab{flex-direction:row;justify-content:flex-start;gap:9px;min-height:54px;padding:9px 11px;font-size:.78125rem;text-align:left}
  .family-icon{width:19px;height:19px}
  /* En el móvil las áreas no caben en una fila, y unas pestañas que se parten
     en dos filas se montan sobre la ventana. Aquí dejan de ser pestañas y
     pasan a ser píldoras, con la ventana entera redondeada debajo. */
  .module-tabs{display:flex;flex-wrap:wrap;gap:6px}
  .module-tabs button{flex:1 1 calc(50% - 6px);min-height:46px;top:0;border:1px solid #363d4b;border-radius:10px;font-size:.8125rem}
  .module-tabs button[aria-selected="true"]{min-height:46px;border-color:var(--acento)}
  .module-tabs button[aria-selected="true"]::before{left:12px;right:12px;border-radius:0 0 3px 3px}
  .product-stage{border-radius:14px;margin-top:9px}
  .catalog-group{grid-template-columns:minmax(0,1fr);gap:0;padding-top:18px}
  .catalog-group h3{padding-top:0;margin-bottom:6px}
  .catalog-items{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .family-tab,.family-icon,.price-card,.connector-card{transition:none}
  .family-tab:hover,.price-card:hover,.connector-card:hover{transform:none}
}

/* ───────── El camino de vuelta a Coreli (14/10) ─────────
   Medido: la web de BOS no tenía NI UN enlace que saliera fuera —todos eran
   «#algo» o un fichero—, y el logotipo de Coreli, que sale dos veces, llevaba
   las dos a la portada de BOS. Quien lo pulsaba buscando la empresa se quedaba
   donde estaba. Y coreli.io sí enlaza a BOS: el camino era de ida y no de
   vuelta. Ahora el rótulo BOS va a la portada y el logotipo de Coreli, a
   coreli.io; el lockup pasa de ser un <a> a un <div> con dos enlaces dentro,
   así que `.brand` sigue mandando en la fila (gap, orden y el ⚠️ order:1). */
.brand-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.brand-link:hover{opacity:.82}
.brand-link:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

/* Medido el 14/10 en el móvil: 50 enlaces por debajo de los 24 px de alto
   mínimos, todos de la entrega —enlaces de texto de las demos, de precios y de
   conectores—. Los `.text-link` se arreglan de una vez; los de la tabla de
   planes van dentro de una celda y se dejan como están. */
.text-link,.compare-jump,.updates-links a{display:inline-flex;align-items:center;min-height:24px}