/* ============================================================
   COMPONENTES compartidos por varias secciones
   ============================================================ */

/* Botón CTA (Servicios y Mi Espacio) */
.cta-button {
    background-color: var(--color-cta);
    border-radius: 32px;
    padding: 16px 32px;
    font-family: var(--font-family-outfit);
    font-weight: var(--font-weight-medium);
    font-size: 24px;
    color: #000304;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Bloques plegables "Leer más" (Sobre Mí y Mi Espacio; solo móvil) */
.collapsed-block .collapsed {
  display: none;
}

/* cuando se expande */
.collapsed-block.open .collapsed {
  display: block;
}

/* Es un <button>: se neutraliza el estilo nativo */
.read-more-text {
  color: var(--color-accent);
  cursor: pointer;
  font-family: var(--font-family-poppins);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

/* ----- Botón flotante "volver arriba" -----
   Se superpone al contenido, así que va translúcido y con desenfoque: se
   apoya en el fondo sin taparlo, sea claro (texto) u oscuro (fotos). */
.back-to-top {
  --btt-size: 48px;
  /* var(--color-primary) con alfa; en hex no se puede expresar la
     transparencia, de ahí el rgba con el valor del token */
  --btt-bg: rgba(28, 65, 98, 0.55);
  --btt-bg-active: rgba(28, 65, 98, 0.85);

  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 900; /* bajo el header (1000); los modales van en la capa superior */

  width: var(--btt-size);
  height: var(--btt-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;

  background-color: var(--btt-bg);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(16, 33, 51, 0.18);

  /* Oculto mientras se está arriba; visibility lo saca del orden de tabulación */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
              background-color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--btt-bg-active);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 768px) {

  .read-more-text {
    display: none;
  }

  /* En tablet+ el contenido plegable se muestra siempre */
  .collapsed-block .collapsed {
    display: block !important;
  }

  .back-to-top {
    --btt-size: 52px;
    right: 24px;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1030px) {

  .back-to-top {
    --btt-size: 56px;
    right: 32px;
    bottom: 32px;
  }

  .back-to-top svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .back-to-top {
    transform: none;
    transition: opacity 0.15s ease, visibility 0.15s;
  }
}