/* --- ESTILOS GENERALES Y FUENTES --- */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Neulis', sans-serif; /* Tipografía base */
  background-color: #fef8ee; /* Color de fondo original */
  position: relative;
}

/* --- GRILLA DE FONDO ANIMADA --- */
.background-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  z-index: 1;
}

/* --- KEYFRAME PARA LA ANIMACIÓN SUTIL Y ORGÁNICA --- */
@keyframes latido-suave {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  40% {
    transform: scale(1.025); /* Expansión lenta */
    opacity: 1;
  }
  60% {
    transform: scale(1.025); /* Mantiene la expansión */
    opacity: 1;
  }
}

/* --- APLICACIÓN DE LA ANIMACIÓN CON RETRASOS VARIADOS Y MÁS FLUIDA --- */
.background-grid div {
  transition: transform 0.5s ease;
}

.background-grid div:nth-child(7n) {
  animation: latido-suave 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 0.5s;
}
.background-grid div:nth-child(5n+2) {
  animation: latido-suave 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 1.2s;
}
.background-grid div:nth-child(8n+4) {
  animation: latido-suave 7.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 2s;
}
.background-grid div:nth-child(11n) {
  animation: latido-suave 10s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 3s;
}
.background-grid div:nth-child(3n+1) {
  animation: latido-suave 8.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 0.8s;
}

/* --- PALETA DE COLORES ORIGINAL --- */
.background-grid div:nth-child(1)  { background-color: #b65230; }
.background-grid div:nth-child(2)  { background-color: #d6bc66; }
.background-grid div:nth-child(3)  { background-color: #dfe299; }
.background-grid div:nth-child(4)  { background-color: #c77b3e; }
.background-grid div:nth-child(5)  { background-color: #bba34d; }
.background-grid div:nth-child(6)  { background-color: #1c4169; }
.background-grid div:nth-child(7)  { background-color: #5a94b1; }
.background-grid div:nth-child(8)  { background-color: #f1e1c2; }
.background-grid div:nth-child(9)  { background-color: #d4a64e; }
.background-grid div:nth-child(10) { background-color: #757c3d; }
.background-grid div:nth-child(11) { background-color: #ba422e; }
.background-grid div:nth-child(12) { background-color: #ecca52; }
.background-grid div:nth-child(13) { background-color: #a3ad65; }
.background-grid div:nth-child(14) { background-color: #e26b2d; }
.background-grid div:nth-child(15) { background-color: #f1e1c2; }
.background-grid div:nth-child(16) { background-color: #c95c3f; }
.background-grid div:nth-child(17) { background-color: #273552; }
.background-grid div:nth-child(18) { background-color: #d2b96b; }
.background-grid div:nth-child(19) { background-color: #df7d2c; }
.background-grid div:nth-child(20) { background-color: #bf9060; }
.background-grid div:nth-child(21) { background-color: #d4a64e; }
.background-grid div:nth-child(22) { background-color: #797f3f; }
.background-grid div:nth-child(23) { background-color: #d9a062; }
.background-grid div:nth-child(24) { background-color: #757c3d; }
.background-grid div:nth-child(25) { background-color: #a3ad65; }
.background-grid div:nth-child(26) { background-color: #ba422e; }
.background-grid div:nth-child(27) { background-color: #d6bc66; }
.background-grid div:nth-child(28) { background-color: #c95c3f; }
.background-grid div:nth-child(29) { background-color: #757c3d; }
.background-grid div:nth-child(30) { background-color: #e26b2d; }
.background-grid div:nth-child(31) { background-color: #2f3853; }
.background-grid div:nth-child(32) { background-color: #c77b3e; }
.background-grid div:nth-child(33) { background-color: #5a94b1; }
.background-grid div:nth-child(34) { background-color: #b12c23; }
.background-grid div:nth-child(35) { background-color: #d2b96b; }
.background-grid div:nth-child(36) { background-color: #bf9060; }
.background-grid div:nth-child(37) { background-color: #24324f; }
.background-grid div:nth-child(38) { background-color: #757c3d; }
.background-grid div:nth-child(39) { background-color: #dfc473; }
.background-grid div:nth-child(40) { background-color: #b63125; }


/* --- CONTENIDO PRINCIPAL --- */
header, .pantalla-intro {
  position: relative;
  z-index: 10;
}

header {
  padding: 24px;
  background-color: rgba(255, 245, 230, 0.95);
}

.logo-titulo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo { height: 56px; }

.titulo-maquina {
  font-family: 'Neulis';
  font-size: 1.4rem;
  font-weight: 400;
  color: #222;
}

.pantalla-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: calc(100vh - 128px); /* Ajustar altura */
}

.contenido {
  background-color: rgba(255, 245, 230, 0.9);
  padding: 40px 60px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.subtitulo {
  font-family: 'Neulis';
  font-size: 1.8rem;
  font-weight: 400;
  color: #111;
  margin: 0 0 12px;
}

.titulo {
  font-family: 'Neulis';
  font-weight: 700;
  font-size: 3.5rem;
  color: #ed5140;
  margin: 0 0 20px;
}

button {
  background-color: #3288e6;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 36px;
  font-family: 'Patrick Hand', cursive; /* Tipografía para botón */
  font-size: 1.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

button:hover {
  background-color: #ff7a26;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px rgba(255, 122, 38, 0.4);
}

button .material-symbols-outlined {
  font-size: 1.4rem;
  transition: transform 0.3s ease;
  font-family: 'Material Symbols Outlined' !important;
}

button:hover .material-symbols-outlined {
  transform: translateX(4px);
}

.titulo-maquina {
    font-size: 1.5rem;
    color: var(--texto-principal);
    font-weight: 900;
    text-decoration: none; 
}

.titulo-maquina:hover {
    text-decoration: none;
}

.paul-inicio {
  width: 160px;
  position: absolute;
  right: 30%;
  bottom: 0;
  animation: flotar 3.5s ease-in-out infinite;
  z-index: 4;
}

.sombra-klee {
    position: absolute;
    bottom: 0px; /* Posicionar en la base de Paul */
    right: 32%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajustar para un centrado perfecto */
    width: 100px; /* Ancho de la sombra */
    height: 15px; /* Altura (más ovalada) */
    border-radius: 50%; /* Hacerla ovalada/circular */
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.4); /* Sombra difuminada */
    z-index: -1;
    animation: flotar 3.5s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@font-face {
  font-family: 'Neulis';
  src: url('../fonts/Neulis-Regular.woff2') format('woff2'),
       url('../fonts/Neulis-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neulis';
  src: url('../fonts/Neulis-Light.woff2') format('woff2'),
       url('../fonts/Neulis-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Neulis';
  src: url('../fonts/Neulis-Bold.woff2') format('woff2'),
       url('../fonts/Neulis-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Patrick Hand';
  src: url('../fonts/PatrickHand-Regular.woff2') format('woff2'),
       url('../fonts/PatrickHand-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('../fonts/MaterialSymbolsOutlined.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* --- ADAPTABILIDAD: FIGURA DE PAUL KLEE EN TABLET HORIZONTAL --- */

@media (min-width: 1100px) and (max-height: 800px) {
    
    .paul-inicio {
        /* ⭐️ Reducción del ancho del contenedor de Paul Klee */
        width: 130px;
    }
    .titulo-maquina {
    font-size: 1.1rem;
    }
    .logo {
    height: 50px;
}
}