/* ==========================================================================
   Base: reinicio, tipografía, foco y utilidades
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--color-brand); }

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

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: #FFFFFF; }

::selection { background: var(--sw-bruma); color: var(--sw-tinta); }

/* El punto final de los titulares principales, en Señal: la firma de la marca.
   Solo uno por página (o por diapositiva del slider), nunca en el texto corrido. */
.punto { color: var(--color-signal); }

/* Utilidades ----------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.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;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--sw-tinta);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Íconos de los canales: WhatsApp, LinkedIn, correo y reunión ---------------- */
/* Son los de la empresa (assets/img/contacto/, PNG blancos). Van como máscara para que
   tomen el color del texto, igual que los íconos SVG del sitio. Miden 18 px salvo
   donde el contexto diga otra cosa (burbuja, tarjetas de contacto, pie). */
.icono {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.icono--whatsapp { -webkit-mask-image: url("/assets/img/contacto/whatsapp.png"); mask-image: url("/assets/img/contacto/whatsapp.png"); }
.icono--linkedin { -webkit-mask-image: url("/assets/img/contacto/linkedin.png"); mask-image: url("/assets/img/contacto/linkedin.png"); }
.icono--correo { -webkit-mask-image: url("/assets/img/contacto/correo.png"); mask-image: url("/assets/img/contacto/correo.png"); }
.icono--reunion { -webkit-mask-image: url("/assets/img/contacto/reunion.png"); mask-image: url("/assets/img/contacto/reunion.png"); }
/* Con colores forzados (alto contraste de Windows), el ícono sigue el color del texto */
@media (forced-colors: active) {
  .icono { forced-color-adjust: none; }
}

/* Botones ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1.0625rem; }

/* Acción principal: una por vista */
.btn--primary { background: var(--color-action); color: var(--color-on-action); }
.btn--primary:hover { color: var(--color-on-action); filter: brightness(1.06); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* Botón redondo con ícono (pausa y flechas de los sliders) */
.icon-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sw-line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-fast) ease;
}
.icon-btn:hover { background: #FFFFFF; }
.icon-btn [data-icon] { display: none; }
[data-slider]:not(.is-paused) .icon-btn [data-icon="pause"],
[data-slider].is-paused .icon-btn [data-icon="play"] { display: block; }

/* Animaciones comunes (portada, banners y páginas interiores) */
@keyframes sw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes sw-draw { to { stroke-dashoffset: 0; } }