/* style.css (MODIFICADO con fondo de tile) */

/* --- 0. Importación de Fuentes --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap');


/* --- 1. Definición de la Paleta y Fuentes --- */
:root {
    --hue-green-base: 90;   /* Verde Aloe principal */
    --hue-warm-accent: 25;  /* Naranja/Marrón para acentos de las puntas */
    
    /* Colores principales basados en la imagen de paleta y fondos */
    --color-bg-body: hsl(var(--hue-warm-accent), 15%, 50%); /* Este color base del body se ocultará por la imagen */
    --color-bg-card: hsl(var(--hue-green-base), 100%, 98%);
    
    /* Verdes (basados en las hojas de aloe) */
    --color-green-light: hsl(var(--hue-green-base), 40%, 75%);
    --color-green-medium: hsl(var(--hue-green-base), 55%, 45%);
    --color-green-dark: hsl(var(--hue-green-base), 70%, 30%);
    
    /* Acentos cálidos (basados en las puntas rojizas del aloe) */
    --color-warm-light: hsl(var(--hue-warm-accent), 70%, 70%);
    --color-warm-dark: hsl(var(--hue-warm-accent), 70%, 50%);

    /* Color de texto (Oscuro, pero que combine) */
    --color-text-primary: hsl(var(--hue-green-base), 60%, 15%);
    --color-text-secondary: hsl(var(--hue-warm-accent), 20%, 30%);

    /* --- Variables de Tipografía --- */
    --font-headings: 'Playfair Display', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- 2. Estilos Globales --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    /* --- CAMBIOS PARA EL FONDO DE TILE --- */
    background-image: url('images/tile_fondo_marca.jpg'); /* <- Tu imagen de fondo */
    background-repeat: repeat;                     /* <- Para que se repita */
    background-color: var(--color-bg-body);       /* <- Color de fallback si la imagen no carga */
    background-attachment: fixed;                 /* <- Para que el fondo no se mueva al hacer scroll */
    /* ------------------------------------- */
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* El overflow: hidden se mantiene para la página de inicio con la hierba */
    /* Para las otras páginas, si quieres que se pueda hacer scroll, podrías quitarlo o ponerlo en auto */
    overflow-y: auto; /* Permite scroll vertical en general */
    overflow-x: hidden; /* Evita scroll horizontal no deseado */
}

/* Nota: La página de inicio (index.html) tiene un `overflow: hidden` general. */
/* Si quieres que la página de inicio mantenga esa propiedad, podríamos hacer un override específico para ella, */
/* o podrías dejar `overflow-y: auto;` si no te importa que se pueda hacer scroll ahí también. */
/* Por ahora, lo dejo con `overflow-y: auto;` para las otras páginas, que pueden tener más contenido. */
/* Si la hierba en index.html se ve cortada o se comporta mal, podríamos afinar esto. */


.container {
    text-align: center;
    padding: 2.5rem;
    background-color: var(--color-bg-card);
    border-radius: 15px;
    box-shadow: 0 10px 30px hsla(var(--hue-warm-accent), 10%, 30%, 0.3);
    z-index: 10;
    max-width: 600px;
}

h1, h2 {
    font-family: var(--font-headings);
    color: var(--color-green-dark);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2rem;
}

p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

a {
    color: var(--color-green-medium);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-green-dark);
}

footer {
    background-color: #ffeaee;
    position: absolute;
    bottom: 10px;
    font-size: 0.85rem;
    z-index: 10;
}

footer a {
    color: var(--color-text-secondary);
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra para que se vea sobre fondos claros/oscuros */
}

/* --- 3. Estilos Página 1 (Home - Hierba y Personaje) --- */
/* Se mantiene el overflow: hidden aquí para asegurar el comportamiento de la hierba */
body#home-page { /* Añade id="home-page" al body de index.html */
    overflow: hidden;
}

/* --- ESTILO ESPECÍFICO PARA LA PÁGINA DE PRODUCTO --- */
body#product-page {
  /* Restablecemos el fondo para que JS pueda controlarlo */
  background-image: none; 
  background-color: var(--color-bg-body); /* Color de fallback */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out; /* Transición suave para el cambio de imagen */
}

/* Ajuste del contenedor para que el texto sea legible sobre las fotos */
body#product-page .container {
    background-color: rgba(255, 255, 255, 0.85); /* Fondo semitransparente para el contenedor */
    box-shadow: 0 10px 40px rgba(0,0,0,0.3); /* Sombra más pronunciada */
}

/* Estilo para la imagen del producto dentro de .product-image */
.product-image img {
    max-width: 90%; /* La imagen ocupa el 90% del espacio del div */
    max-height: 90%;
    object-fit: contain; /* Asegura que la imagen se vea completa */
    border-radius: 8px; /* Un poco de borde redondeado */
}


.character {
    transform: scale(0.2);
    display: block;
    width: 100px;
    height: 100px;
    background-color: var(--color-green-light);
    border: 4px solid var(--color-green-medium);
    border-radius: 50%;
    margin: 1rem auto;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    text-decoration: none;
    color: var(--color-text-primary);
}

.character:hover {
    transform: scale(0.4) rotate(360deg);
    box-shadow: 0 5px 15px hsla(var(--hue-green-base), 40%, 50%, 0.4);
}

.grass-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    overflow: hidden; /* Esto es importante para que la hierba no se salga */
    z-index: 5;
}

.grass-svg {
    width: 100%;
    height: 100%;
}

.blade {
    fill: none;
    stroke: var(--color-green-medium);
    stroke-width: 4;
    stroke-linecap: round;
    transition: d 0.1s linear;
}

.blade:nth-child(3n) { stroke: var(--color-green-dark); }
.blade:nth-child(3n+1) { stroke: var(--color-green-light); }
.blade:nth-child(5n+2) { stroke: var(--color-warm-light); stroke-width: 3;}


/* --- 4. Estilos Página 2 (Juego) --- */
.doors-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 2rem;
    perspective: 1000px; 
    
    /* PROPIEDADES DE FONDO QUITADAS DE AQUÍ */
    /* Ya no tiene el 'background-image' por defecto */
    
    border-radius: 15px; 
    padding: 20px; 
    min-height: 400px;
    z-index: 1; 
    
    /* Añadimos una transición para que el fondo aparezca suavemente */
    transition: background-image 0.5s ease-in-out;
}

.door {
    width: 100px; 
    height: 150px;
    background-color: transparent; 
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    
    background-image: url('images/puerta_cerrada.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

.door:hover {
    transform: scale(1.05); 
    box-shadow: 0 0 15px hsla(var(--hue-green-base), 50%, 60%, 0.5); 
}

.door.won {
    background-image: url('images/puerta_abierta.png'); 
    background-color: transparent;
    border: none;
    transform: scale(1.05);
    animation: none; 
    box-shadow: 0 0 20px hsla(var(--hue-green-base), 70%, 40%, 0.8);
}

.door.lost {
    background-image: url('images/puerta_abierta.png'); 
    background-color: transparent;
    border: none;
    transform: scale(0.95);
    opacity: 0.6;
    box-shadow: none;
}

.door.fade-out {
    opacity: 0;
    transform: scale(0.8);
    
    /* Transición: 
    - 0.5s de duración para la opacidad y la transformación.
    - 0.5s de RETRASO (delay) para que dé tiempo a ver la puerta abierta.
   */
    transition: opacity 0.5s ease-out 0.5s, transform 0.5s ease-out 0.5s;
    
    /* Evita que se pueda hacer clic en ellas mientras desaparecen */
    pointer-events: none; 
}

/* --- ESTILOS DE TEXTO Y FONDO AL GANAR --- */
/* (Reemplaza las reglas anteriores de texto del juego por estas) */

/* Por defecto, el texto es el normal (oscuro) */
#game-message, 
#next-page-link {
    z-index: 2;
    position: relative; 
}

/* NUEVO: Cuando el .container tiene la clase .game-won... */

/* 1. Aplicamos el fondo al contenedor de las puertas */
.container.game-won #doors-container {
    background-image: url('images/hombre_con_colonia.jpg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. Cambiamos el color del texto para que contraste */
.container.game-won h2 {
    color: var(--color-warm-light); 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.container.game-won p,
.container.game-won #game-message {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

#game-message {
    margin-top: 1.5rem;
    font-size: 1.15rem;
    font-weight: bold;
    height: 20px;
}

#next-page-link {
    display: none;
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background-color: var(--color-warm-dark);
    color: white;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 1rem;
}

#next-page-link:hover {
    background-color: var(--color-warm-light);
}

@keyframes pulse {
    to { transform: scale(1.1); }
}

/* --- 5. Estilos Página 3 (Producto) --- */
.product-image {
    width: 100%;
    max-width: 300px;
    height: 300px;
    background-color: var(--color-bg-card);
    border: 5px solid var(--color-green-medium);
    border-radius: 10px;
    margin: 1rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--color-green-dark);
}

/* --- 6. Estilos Página 4 (Documentación) --- */
.palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.swatch {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-text-primary);
    padding: 5px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.swatch span {
    font-weight: bold;
    color: black;
    background: rgba(255,255,255,0.7);
    padding: 2px 5px;
    border-radius: 3px;
    margin-bottom: 3px;
}

.swatch:nth-child(1) { background-color: var(--color-bg-body); color: white; }
.swatch:nth-child(2) { background-color: var(--color-bg-card); }
.swatch:nth-child(3) { background-color: var(--color-green-light); }
.swatch:nth-child(4) { background-color: var(--color-green-medium); }
.swatch:nth-child(5) { background-color: var(--color-green-dark); color: white;}
.swatch:nth-child(6) { background-color: var(--color-warm-light); }
.swatch:nth-child(7) { background-color: var(--color-warm-dark); color: white;}
.swatch:nth-child(8) { background-color: var(--color-text-primary); color: white;}
.swatch:nth-child(9) { background-color: var(--color-text-secondary); }

.swatch:nth-child(1) span, .swatch:nth-child(5) span, .swatch:nth-child(7) span, .swatch:nth-child(8) span {
    color: var(--color-text-primary);
    background: rgba(255,255,255,0.9);
}