/* =============================================================
   BASE — reset mínimo, fondo y estructura general
   ============================================================= */

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

html, body {
  height: 100%;
  /* Sin esto, arrastrar el dedo hacia abajo estando arriba de todo dispara
     el "tirar para recargar" del navegador: el visitante quería volver a la
     sección anterior y se le recargaba la página. Como cada sección mide
     exactamente una pantalla, ese gesto siempre cae en el borde. */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  background-color: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Capa de fondo: siempre cubre toda la pantalla, no scrollea */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--negro);
  background-image: var(--fondo-img);
  background-size: cover;
  background-position: center;
}

/* Mientras se muestra el loader no se puede scrollear */
body.esta-cargando { overflow: hidden; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

svg { display: block; }

/* Contenedor que el router intercambia entre páginas */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* el alto que se ve de verdad en el celular */
  display: flex;
  flex-direction: column;
}

/* Sólo visible para lectores de pantalla */
.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;
}

/* =============================================================
   LOGO — SVG en curvas (assets/svg/logo-karp.svg), en línea.
   Dentro del SVG hay dos grupos: .logo__mark (el isologo K) y
   .logo__texto, que el loader usa para su animación de entrada.
   ============================================================= */

.logo {
  display: block;
  width: var(--logo-ancho);
  color: var(--blanco);
}

.logo svg {
  width: 100%;
  height: auto;
}

/* Accesibilidad: sin animaciones si el sistema las tiene desactivadas */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* -------------------------------------------------------------
   PÁGINA CONTINUA (celular)
   Con todas las secciones en una sola página, los enlaces del menú
   son anclas: el desplazamiento hasta la sección va suave.
   ------------------------------------------------------------- */

/* Sólo en la página continua (celular): el salto a un ancla va suave.
   En el resto de las versiones el scroll queda como estaba, para no
   tocar cómo se acomoda la página al cambiar de sección. */
@media (max-width: 760px) {
  html:has(body.esta-continua) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Marca el final de la página larga: es dónde se pide la sección
   siguiente, no se ve. */
.continua__centinela {
  height: 1px;
  pointer-events: none;
}


/* -------------------------------------------------------------
   BOTÓN DE WHATSAPP
   Flotante, abajo a la derecha, en todas las secciones. Lo arma
   assets/js/whatsapp.js con el mismo número e ícono que el home.
   ------------------------------------------------------------- */

.whatsapp {
  position: fixed;
  right: var(--whatsapp-x, clamp(16px, 2.2vw, 40px));
  bottom: var(--whatsapp-y, clamp(16px, 2.2vw, 40px));
  z-index: 70;
  display: block;
  width: var(--whatsapp-tamano, clamp(55px, 4.3vw, 74px));   /* un 20% más grande */
  /* el mismo ícono del home: círculo negro y el dibujo en blanco */
  color: var(--negro);
  /* un halo claro lo despega de los fondos oscuros, y la sombra de los claros */
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-suave),
    transform 0.5s var(--ease-suave),
    visibility 0.5s var(--ease-suave);
}

.whatsapp svg { width: 100%; height: auto; display: block; }

.whatsapp.esta-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.whatsapp:hover { transform: translateY(-2px) scale(1.04); }

/* Con una foto, un video o un formulario abierto, se aparta */
body.galeria-abierta .whatsapp,
body.ventana-abierta .whatsapp {
  opacity: 0;
  pointer-events: none;
}

/* En celular no va: ahí el enlace está en el home, como siempre */
@media (max-width: 760px) {
  .whatsapp { display: none; }
}