/* ════════════════════════════════
   ESTILOS: PÁGINA "EN CONSTRUCCIÓN"
   Web de Alba Sánchez, Psicóloga Online
════════════════════════════════ */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #453a7a;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Textura decorativa de marca, en muy baja opacidad sobre el fondo morado oscuro */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("imagenes/texturalio.png");
  background-size: cover;
  background-position: center;
}

/* Textura de papel sutil sobre todo el fondo, para transmitir calidez */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  mix-blend-mode: overlay;
}

.titular-construccion {
  font-family: 'Bricolage Grotesque', sans-serif;
  /* Móvil (mobile-first): tamaño calculado para caber en una sola línea en un móvil estándar (375–430px) */
  font-size: clamp(1rem, 5vw, 2.25rem);
  white-space: nowrap;
}

.texto-construccion {
  /* Móvil (mobile-first): el texto envuelve con normalidad, el bloque es demasiado largo para caber en 2 líneas en pantallas pequeñas */
  white-space: normal;
  font-size: 1rem;
}

.btn-primario {
  background-color: #ffffff;
  color: #453a7a;
  transition: background-color 0.2s ease;
}

.btn-primario:hover,
.btn-primario:focus-visible {
  background-color: #ded7f6;
}

a:focus-visible {
  outline: 3px solid #9787f4;
  outline-offset: 2px;
}

/* Escritorio: recupera el titular a gran tamaño en una línea y el párrafo forzado a 2 líneas */
@media (min-width: 640px) {
  .titular-construccion {
    font-size: clamp(1.5rem, 6vw, 5rem);
  }

  .texto-construccion {
    white-space: nowrap;
    font-size: clamp(1rem, 2vw, 1.25rem);
  }
}