/* ==========================================================================
   MODO — Cursor
   El puntero es el isotipo oficial: los dos círculos fusionados.
   Solo se activa en dispositivos con puntero fino y si el JS cargó bien
   (la clase la agrega js/cursor.js). Si algo falla, vuelve el cursor
   nativo del sistema y no se rompe nada.
   ========================================================================== */

.cursor-modo,
.cursor-modo a,
.cursor-modo button,
.cursor-modo label,
.cursor-modo input,
.cursor-modo select,
.cursor-modo textarea,
.cursor-modo [role='button'] {
  cursor: none;
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-soft);
  will-change: transform;
  /* Da definición sobre cualquier fondo, incluso sobre la propia lima
     de los botones y las etiquetas. */
  filter: drop-shadow(0 1px 2px rgba(0, 20, 51, 0.55))
          drop-shadow(0 0 1px rgba(0, 20, 51, 0.45));
}
.cursor.esta-visible { opacity: 1; }

/* --- Forma por defecto: el isotipo --- */
.cursor__iso {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  aspect-ratio: 373 / 222;
  transform: translate(-50%, -50%) scale(1);
  height: auto;
  color: var(--lima);
  transition:
    transform 420ms var(--ease),
    color 320ms var(--ease-soft),
    opacity 220ms var(--ease-soft);
}

/* --- Sobre algo clickeable: crece y cambia de color --- */
.cursor.esta-activo .cursor__iso {
  transform: translate(-50%, -50%) scale(1.75);
  color: var(--azul-electrico);
}

/* --- Sobre campos de texto: el iso se retira y aparece el cursor de escritura --- */
.cursor__texto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 26px;
  margin: -13px 0 0 -1px;
  background-color: var(--lima);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 200ms var(--ease-soft), transform 260ms var(--ease);
}
/* Remates lima arriba y abajo, como una serifa del sistema */
.cursor__texto::before,
.cursor__texto::after {
  content: '';
  position: absolute;
  left: -3px;
  width: 8px;
  height: 2px;
  background-color: var(--azul-electrico);
}
.cursor__texto::before { top: 0; }
.cursor__texto::after  { bottom: 0; }

.cursor.esta-escribiendo .cursor__iso { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.cursor.esta-escribiendo .cursor__texto { opacity: 1; transform: scaleY(1); }

/* --- Al presionar --- */
.cursor.esta-presionado .cursor__iso { transform: translate(-50%, -50%) scale(1.2); }

/* Nunca en pantallas táctiles ni con movimiento reducido */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .cursor-modo,
  .cursor-modo a,
  .cursor-modo button,
  .cursor-modo label,
  .cursor-modo input,
  .cursor-modo select,
  .cursor-modo textarea,
  .cursor-modo [role='button'] { cursor: auto; }
  .cursor-modo a,
  .cursor-modo button,
  .cursor-modo label,
  .cursor-modo [role='button'] { cursor: pointer; }
  .cursor-modo input,
  .cursor-modo textarea { cursor: text; }
}

/* ==========================================================================
   Marca de sección
   Etiqueta chica en el margen izquierdo, como los pies de página del
   manual de marca. Solo aparece cuando hay margen suficiente.
   ========================================================================== */
.seccion-marca {
  position: absolute;
  left: clamp(6px, 1.1vw, 20px);
  top: clamp(4.5rem, 9vw, 8rem);
  z-index: 2;
  display: none;
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gris);
  opacity: 0.62;
  pointer-events: none;
  user-select: none;
}

/* Sobre fondo claro el gris del manual no llega a leerse */
[data-tono='claro'] .seccion-marca { color: var(--gris-oscuro); opacity: 0.42; }

@media (min-width: 1024px) {
  .seccion-marca { display: block; }
}