/* 1. TIPOGRAFÍA: Importamos 'Inter', estándar en UI moderna */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  /* PALETA GEMINI / MATERIAL 3 */
  --bg-app: #f0f4f9;          /* Fondo gris-azulado muy suave */
  --bg-surface: #ffffff;      /* Blanco puro para tarjetas */
  
  --primary: #43b7c4;         /* Azul Google (Action Blue) */
  --primary-hover: #ab9f75;   /* Azul un poco más oscuro para hover */
  --primary-active: #063178;  /* Azul profundo para click */

  --text-main: #1f1f1f;       /* Casi negro, alto contraste */
  --text-muted: #444746;      /* Gris medio para textos secundarios */

  /* ACENTO TURQUESA (uso sutil) */
  --accent: #43b7c4;
  --accent-soft: rgba(67, 183, 196, 0.12); /* Versión muy diluida para fondos/sombras */

  /* DIMENSIONES */
  --radius-card: 24px;        /* Bordes redondeados de tarjetas */
  --radius-pill: 9999px;      /* Bordes totalmente redondos (botones) */
}

/* RESET BÁSICO */
* {
  box-sizing: border-box;
}



html, body {
  margin: 0;
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none !important;
}

/* CONTENEDOR PRINCIPAL */
.container {
  max-width: 680px;
  margin: 0 auto;
  min-height: 100dvh; /* Altura completa del viewport */
  padding: 2rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
 
  gap: 1.7rem;          /* Espacio vertical entre elementos */
}

.icon-cafe {
  width: 50px;         /* Tamaño del icono */
  height: 50px;
  vertical-align: middle; /* Lo alinea a la altura del texto */
  margin-left: 0px;   /* Separación del texto */
  
  /* Efecto desmotivador: un poco de transparencia para que no brille mucho */
  opacity: 0.2;
  filter: grayscale(0%); /* Si el SVG tiene color y lo quieres en gris */
}

/* Opcional: un efecto sutil al pasar el ratón por la sección */
.quote:hover .icon-cafe {
  opacity: 1;
  transform: translateY(-2px); /* Un pequeño salto cansado */
  transition: all 0.3s ease;
}

/* CABECERA */
header {
  text-align: center;
}

/* LOGO */
.logo {
  display: block;
  margin: 0 auto 1rem;
  width: clamp(90px, 22vw, 130px);
  height: auto;
}

header h1 {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 300; /* Peso medio, más elegante que bold */
  letter-spacing: -0.5px;
  color: var(--text-main);
   font-family: "Bebas Neue", sans-serif;
}

header p {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.5;

    margin-top: 0px;

}

/* TARJETA DE DESMOTIVACIÓN (QUOTE) */
.quote {
  background-color: var(--bg-surface);
  min-height: 180px;
  padding: 40px;
  
  /* Estética limpia sin bordes duros */
  border-radius: var(--radius-card);
  /* Sombra extremadamente sutil con un leve tinte turquesa */
  box-shadow: 0 4px 16px rgba(67, 183, 196, 0.08); 
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Tipografía del mensaje */
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--text-muted); /* Color placeholder inicial */
  font-weight: 400;

  /* Transiciones suaves */
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), 
              opacity 0.3s ease, 
              color 0.3s ease;
  
  opacity: 0.7; /* Ligeramente transparente cuando está vacío */
}

/* Estado cuando aparece el texto (controlado por JS) */
.quote.visible {
  color: var(--text-main);
  opacity: 1;
  transform: scale(1.01); /* Pequeño "pop" visual */
  box-shadow: 0 6px 22px rgba(67, 183, 196, 0.15); /* La sombra turquesa gana presencia al activarse */
}

/* BOTÓN PRINCIPAL */
button {
  width: fit-content;    /* Se ajusta al contenido */
  min-width: 200px;      /* Pero con un mínimo ancho */
  align-self: center;    /* Centrado en el flex container */
  padding: 16px 32px;
  
  border: none;
  border-radius: var(--radius-pill); /* Forma de píldora */
  
  /* Color sólido plano (Flat Design) */
  background-color: var(--primary);
  color: #ffffff;
  
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0px;
  cursor: pointer;

  /* Sin sombras por defecto */
  box-shadow: none;

  transition: background-color 0.2s ease, transform 0.1s ease;
  
  /* Accesibilidad: evita selección de texto en doble click rápido */
  user-select: none;
}

/* Hover: Cambio de color sutil */
button:hover {
  background-color: var(--primary-hover);
}

/* Active: Efecto de presión */
button:active {
  background-color: var(--primary-active);
  transform: scale(0.97); /* Se encoge ligeramente */
}

#btn-copy {
  margin-top: 0px;      /* Separación del botón de arriba */
  background-color: #fff; /* Un color más discreto */
  color: #555;
  border: 1px solid #ccc;
  font-size: 0.7em;
  padding: 8px 16px;
  cursor: pointer;
  display: block;        /* Para que ocupe su propia línea */
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s;
  max-width: 100px;
      min-width: 30%;
}

#btn-copy:hover {
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

/* Estilo para cuando se copia */
#btn-copy.success {
  background-color: var(--accent);
  color: #ffffff !Important;
  border-color: var(--accent);
}



/* Accesibilidad (Teclado) */
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* RESPONSIVE (Móvil) */
@media (max-width: 600px) {


  #btn-copy {

      min-width: 50%;
}
  .container {
    padding: 2rem;
    gap: 1.5rem;
  }

  header h1 {
    font-size: 2.8rem;
  }
  
  .quote {
    padding: 24px;
    font-size: 1.25rem;
    min-height: 150px;
  }
  
  button {
    width: 70%; /* Botón ancho completo en móvil para facilitar el tap */
    padding: 18px;
  }
}