/* ============================================================
   SECCIÓN NUEVA — barra fija de sitio oficial y sección de validación.
   ============================================================ */

.of-barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #16090D; color: rgba(255, 255, 255, .74);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .78rem; line-height: 1.3;
}
.of-in {
  display: flex; align-items: center; gap: .9rem;
  /* un poco más alta que antes: a 38 px el logo de Servicios Estratégicos
     entraba tan chico que no se leía */
  min-height: 46px; padding-block: .38rem;
}
.of-marca { flex: none; display: block }
/* el logo viene en positivo: sobre la barra oscura va invertido */
.of-marca img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .92 }
.of-marca:hover img { opacity: 1 }

.of-txt { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0 }
.of-centro { color: #fff; font-weight: 600 }
.of-sep { opacity: .4 }
.of-parte b { color: rgba(255, 255, 255, .9); font-weight: 600 }

.of-sellos { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none }
.of-sello {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .24rem .55rem; border-radius: 99px;
  background: rgba(255, 255, 255, .1); color: #fff;
}
.of-sello svg { width: 13px; height: 13px; flex: none }
/* el isotipo viene en negro: se invierte, igual que el resto de los logos */
.of-utn { height: 15px; width: auto; flex: none; filter: brightness(0) invert(1) }
.of-link { background: none; border: 1px solid rgba(255, 255, 255, .28); transition: .16s }
.of-link:hover { background: #fff; color: #16090D; border-color: #fff }

/* el header sticky se apoya debajo de la barra, y los anchors la descuentan */
.hdr { top: var(--barra-oficial, 46px) }
body { padding-top: var(--barra-oficial, 46px) }
[id] { scroll-margin-top: calc(var(--barra-oficial, 46px) + 68px) }

@media (max-width: 860px) {
  /* a este ancho no entra todo en un renglón: se van los sellos, que son lo
     accesorio, y queda el respaldo institucional, que es lo que importa */
  .of-sellos { display: none }
  .of-in { min-height: 42px }
}
@media (max-width: 560px) {
  .of-barra { font-size: .72rem }
  .of-in { gap: .55rem }
  .of-marca img { height: 21px }
  /* "parte de Servicios Estratégicos" es la línea que da el respaldo:
     se queda, y lo que se recorta es el nombre largo del Centro */
  .of-centro { display: none }
  .of-sep { display: none }
}

/* ---------- sección de validación de certificados ---------- */
.val-sec { background: var(--tinta); color: #fff; padding: 3.2rem 0 }
.val-caja { display: grid; gap: 2rem; align-items: center }
@media (min-width: 820px) { .val-caja { grid-template-columns: 1fr 210px; gap: 3rem } }

.val-txt .eyebrow { color: #FFD9A0 }
.val-txt h2 {
  font-size: clamp(1.45rem, 3vw, 2rem); margin: .5rem 0 .7rem;
  color: #fff; letter-spacing: -.02em;
}
/* El separador de arriba del botón lo daba el párrafo descriptivo, que se
   quitó: el título y el botón alcanzan y la sección quedó más directa. */
.val-txt .btn-pri { margin-top: 1.5rem; background: #fff; color: var(--tinta) }
.val-txt .btn-pri:hover { background: #FFD9A0; color: var(--tinta) }

.val-ico { justify-self: center; width: 100%; max-width: 150px }
.val-ico img {
  width: 100%; height: auto; display: block; opacity: .5;
  filter: brightness(0) invert(1);          /* el archivo viene en negro */
}
@media (max-width: 819px) { .val-ico { display: none } }

/* ---------- aviso de cookies (assets/consentimiento.js) ---------- */
.ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .75rem }
.ck-caja {
  max-width: 900px; margin: 0 auto; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(20, 16, 17, .5); border: 1px solid var(--linea);
  padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: 1.2rem;
}
.ck-caja p { font-size: .85rem; color: var(--tinta-2); line-height: 1.55; flex: 1 }
.ck-btns { display: flex; gap: .5rem; flex: none }
.ck-btns .btn { padding: .6rem 1.1rem; font-size: .85rem }

@media (max-width: 700px) {
  .ck-caja { flex-direction: column; align-items: stretch; gap: .85rem; padding: 1rem }
  .ck-btns .btn { flex: 1 }
}

/* ---------- contacto flotante por WhatsApp (assets/whatsapp.js) ---------- */
.wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 85; display: grid; justify-items: end; gap: .7rem }
/* mientras está el aviso de cookies, el botón sube para no quedar debajo.
   --aviso-cookies lo publica consentimiento.js con la altura medida. */
body.ck-visible .wa { bottom: calc(var(--aviso-cookies, 6rem) + 1.5rem) }

.wa-btn {
  /* relative: el ::after del pulso se posiciona contra el botón. Sin esto se
     anclaba al .wa (que es fixed) y el anillo salía del tamaño del widget. */
  position: relative;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: #25D366; color: #fff;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .7), 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .2s, box-shadow .2s;
}
.wa-btn:hover { transform: scale(1.06) }
.wa-btn svg { width: 28px; height: 28px; grid-area: 1 / 1; transition: opacity .18s, transform .18s }
.wa-i { fill: currentColor }
.wa-c { opacity: 0; transform: rotate(-90deg) }
.wa-abierta .wa-i { opacity: 0; transform: rotate(90deg) }
.wa-abierta .wa-c { opacity: 1; transform: none; width: 22px; height: 22px }

/* el pulso llama la atención una vez y para: repetirlo sin fin molesta */
.wa-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: wa-pulso 2.2s ease-out 3;
}
@keyframes wa-pulso {
  0%   { transform: scale(1);   opacity: .8 }
  100% { transform: scale(1.8); opacity: 0 }
}

.wa-panel {
  width: min(320px, calc(100vw - 2rem)); background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(20, 16, 17, .45); border: 1px solid var(--linea);
  overflow: hidden; animation: wa-entra .22s cubic-bezier(.2, .8, .3, 1);
}
.wa-panel[hidden] { display: none }
@keyframes wa-entra { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }

.wa-top { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; background: #075E54; color: #fff }
/* el logo va a la derecha: a la izquierda competía con el nombre del Centro,
   que es lo que primero hay que leer */
.wa-avatar { order: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #25D366; flex: none }
.wa-quien { order: 1 }
.wa-x { order: 3 }
.wa-avatar svg { width: 20px; height: 20px; fill: #fff }
.wa-quien { display: grid; line-height: 1.25; flex: 1; min-width: 0 }
.wa-quien b { font-size: .86rem; font-weight: 700 }
.wa-quien span { font-size: .72rem; color: rgba(255, 255, 255, .7) }
.wa-x { color: rgba(255, 255, 255, .75); font-size: .9rem; cursor: pointer; padding: .2rem .3rem; flex: none }
.wa-x:hover { color: #fff }

.wa-msg { padding: 1rem 1rem .85rem; font-size: .86rem; color: var(--tinta-2); line-height: 1.55 }
.wa-cta {
  display: block; margin: 0 1rem; padding: .72rem; border-radius: 10px;
  background: #25D366; color: #fff; font-weight: 700; font-size: .88rem; text-align: center;
  transition: background .16s;
}
.wa-cta:hover { background: #1fae5c; color: #fff }
.wa-alt { padding: .8rem 1rem 1rem; font-size: .76rem; color: var(--tinta-3); text-align: center; line-height: 1.5 }
.wa-alt a { color: var(--bordo); text-decoration: underline; overflow-wrap: anywhere }

@media (prefers-reduced-motion: reduce) {
  .wa-btn, .wa-btn svg, .wa-panel { transition: none; animation: none }
  .wa-btn::after { animation: none; opacity: 0 }
}