/*
  ============================================
  brote.dev — Estilos principales
  Creado: 2026-05-20
  Modificaciones:
    2026-05-20 — Versión inicial: landing con textura pelitos, marca 3D, puntos, modal
  ============================================
*/

/* ============================================
   1. VARIABLES DEL SISTEMA
   Modificar aquí afecta todo el sitio
   ============================================ */
:root {
  /* Colores */
  --color-fondo:          #0a6e4a;
  --color-marca:          #5C2E0E;
  --color-punto:          rgba(255, 255, 255, 0.55);
  --color-modal-overlay:  rgba(0, 0, 0, 0.78);
  --color-modal-panel:    #111111;
  --color-modal-borde:    #2a2a2a;
  --color-modal-texto:    #eeeeee;
  --color-btn:            #5C2E0E;
  --color-btn-hover:      #7a3e1a;

  /* Tipografía */
  --fuente-marca: 'Lora', Georgia, serif;

  /* Tamaño fluido de la marca — escala con el viewport */
  --tam-marca: clamp(4rem, 13vw, 10rem);

  /* Puntos */
  --tam-punto: 8px;

  /* Transición global */
  --transicion: 0.25s ease;
}

/* ============================================
   2. RESET Y BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* sin scroll en ningún eje */
}

/* ============================================
   3. LANDING — pantalla completa
   ============================================ */
.landing {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ============================================
   4. MARCA — la palabra "brote"
   ============================================ */
.landing__marca {
  position: relative;
  z-index: 5;
  font-family: var(--fuente-marca);
  font-size: var(--tam-marca);
  font-weight: 700;
  color: var(--color-marca);
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;

  /* Sombra en capas — simula que la letra sobresale del fondo */
  text-shadow:
    1px  1px 0   #7a4020,
    2px  2px 0   #6e3515,
    3px  3px 0   #622c10,
    4px  4px 0   #56230b,
    5px  5px 0   #4a1a06,
    6px  6px 0   #3e1101,
    7px  8px 8px  rgba(0, 0, 0, 0.45),
    4px  5px 16px rgba(0, 0, 0, 0.30),
    2px  3px 24px rgba(0, 0, 0, 0.20);
}

/* ============================================
   5. PUNTOS — distribuidos alrededor de brote
   ============================================ */
.landing__puntos {
  position: absolute;
  inset: 0;
  pointer-events: none; /* el JS activa pointer-events solo en el trigger */
  z-index: 6;
}

/* Punto base — aspecto idéntico para todos */
.punto {
  position: absolute;
  width: var(--tam-punto);
  height: var(--tam-punto);
  border-radius: 50%;
  background: var(--color-punto);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Trigger — mismo aspecto, acepta interacción */
.punto--trigger {
  pointer-events: all;
  cursor: pointer;
}

/* ============================================
   6. MODAL DE ACCESO
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transicion), visibility var(--transicion);
}

/* Estado activo — visible */
.modal.modal--activo {
  visibility: visible;
  opacity: 1;
}

/* Fondo oscuro — cerrar al clickear */
.modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-modal-overlay);
  cursor: pointer;
}

/* Panel central de auth */
.modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-modal-panel);
  border: 1px solid var(--color-modal-borde);
  border-radius: 4px;
  padding: 40px;
  width: min(320px, 90vw);
}

/* Formulario en columna */
.modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Input de contraseña */
.modal__input {
  width: 100%;
  padding: 12px 16px;
  background: #1a1a1a;
  border: 1px solid var(--color-modal-borde);
  border-radius: 4px;
  color: var(--color-modal-texto);
  font-family: var(--fuente-marca);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transicion);
}

.modal__input:focus {
  border-color: #555555;
}

.modal__input::placeholder {
  color: #444444;
}

/* Botón de acceso */
.modal__btn {
  width: 100%;
  padding: 12px;
  background: var(--color-btn);
  color: #eeeeee;
  border: none;
  border-radius: 4px;
  font-family: var(--fuente-marca);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transicion);
}

.modal__btn:hover {
  background: var(--color-btn-hover);
}

/* Mensaje de error de autenticación */
.modal__error {
  font-size: 0.8rem;
  color: #e53e3e;
  text-align: center;
  min-height: 1rem; /* evita salto de layout */
}

/* ============================================
   7. TABLET — 768px
   La landing no necesita cambios de layout.
   El tamaño de fuente ya es fluido con clamp().
   ============================================ */

/* ============================================
   8. DESKTOP — 1024px
   ============================================ */

/* ============================================
   9. WIDE — 1440px
   ============================================ */

/* ============================================
   10. ANIMACIONES
   (ninguna en esta versión)
   ============================================ */