/* =========================================
   MI MUNDO - GRAPT
   Estilos cómic blanco, negro y gris (fanzine)
   ========================================= */

:root {
    --borde-comic: 4px solid #000;
    --sombra-bloque: 8px 8px 0 #000;
}

/* =========================================
   BASE
   ========================================= */
body {
    background-color: #ffffff;
    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    color: #000;
}

/* =========================================
   FONDOS POR PÁGINA
   ========================================= */
body.pagina-inicio {
    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

body.pagina-sobre-mi {
    background: #ffffff;
    background-image:
        linear-gradient(45deg, #e6e6e6 25%, transparent 25%),
        linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
        linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

body.pagina-mi-vida {
    background: #f4f4f4;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
}

body.pagina-filosofia {
    background: #ffffff;
    background-image: radial-gradient(#8c8c8c 2px, transparent 2px);
    background-size: 30px 30px;
}

body.pagina-fotografia {
    background: #e0e0e0;
}

/* =========================================
   HEADER (CUADRÍCULA CÓMIC)
   ========================================= */
header {
    margin: 1rem auto;
    display: grid;
    grid-template-areas:
        "meirl all"
        "blog  all";
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 2fr 1fr;
    box-sizing: border-box;
    max-height: 95vh;
    height: auto;
    max-width: 95%;
    gap: 0.5rem;
    aspect-ratio: 3/2;
}

header > * {
    border: var(--borde-comic);
    overflow: hidden;
    position: relative;
    background: #fff;
}

/* --- Panel 1: Logo --- */
#meirl {
    grid-area: meirl;
    background: repeating-conic-gradient(from 0deg, #ffffff 0deg 15deg, #d3d3d3 15deg 30deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.animacion-flotar {
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: flotar 5s ease-in-out infinite;
}

.logo-principal {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(6px 6px 0px rgba(0,0,0,0.8));
    cursor: pointer;
}

@keyframes flotar {
    0%   { transform: rotate(5deg) translateY(0); }
    50%  { transform: rotate(-5deg) translateY(-15px); }
    100% { transform: rotate(5deg) translateY(0); }
}

/* --- Panel 2: Botón Mi Vida --- */
#blog {
    grid-area: blog;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enlace-blog {
    text-decoration: none;
    transition: transform 0.2s;
}

.enlace-blog:hover {
    transform: rotate(2deg) scale(1.05);
}

.libro-falso {
    background: #ffffff;
    border: var(--borde-comic);
    padding: 1.5rem 2.5rem;
    transform: rotate(-5deg);
    box-shadow: -6px 6px 0 #000, -6px 6px 0 4px #000;
}

.libro-falso span {
    color: #000000;
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* Estado activo: Mi Vida */
.enlace-blog.activo .libro-falso {
    background: #000000;
    box-shadow: -6px 6px 0 #ffffff, -6px 6px 0 4px #000;
}

.enlace-blog.activo .libro-falso span {
    color: #ffffff;
}

/* --- Panel 3: Escena derecha --- */
#all {
    grid-area: all;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-left: var(--borde-comic);
}

#topbar {
    height: 10%;
    min-height: 40px;
    background-color: #000000;
    color: #ffffff;
    border-bottom: var(--borde-comic);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5%;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
}

#scene {
    flex-grow: 1;
    position: relative;
    background-image:
        radial-gradient(circle at 20% 30%, #cccccc 8%, transparent 15%),
        radial-gradient(circle at 80% 60%, #8c8c8c 12%, transparent 22%);
    background-size: 200px 200px;
    animation: viento-nubes 60s linear infinite;
}

@keyframes viento-nubes {
    0%   { background-position: 0 0; }
    100% { background-position: 400px 0; }
}

/* =========================================
   CARTELES DE NAVEGACIÓN
   ========================================= */
.cartel {
    position: absolute;
    text-decoration: none;
    color: #000;
    transition: transform 0.1s ease-out;
    z-index: 3;
}

.cartel:hover {
    transform: scale(1.15) !important;
    z-index: 10;
}

/* 1. Globo de Diálogo */
.comic-globo {
    background: #ffffff;
    border: var(--borde-comic);
    border-radius: 40px;
    padding: 1.2rem 2.5rem;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: var(--sombra-bloque);
    position: relative;
}

.comic-globo::after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 40px;
    border-width: 22px 22px 0 0;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

.comic-globo::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 44px;
    border-width: 15px 15px 0 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    z-index: 2;
}

/* Activo: Sobre mí */
#sign-sobre-mi.cartel.activo .comic-globo {
    background: #000000;
    color: #ffffff;
    box-shadow: 8px 8px 0 #ffffff, 8px 8px 0 4px #000;
}

#sign-sobre-mi.cartel.activo .comic-globo::before {
    border-color: #000000 transparent transparent transparent;
}

/* 2. Caja de Acción */
.comic-accion {
    background: #ffffff;
    border: var(--borde-comic);
    padding: 1.5rem 3rem;
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: skew(-10deg, -5deg);
    box-shadow: 10px 10px 0 #000, 10px 10px 0 4px #000;
}

.comic-accion span {
    display: inline-block;
    transform: skew(10deg, 5deg);
}

/* Activo: Filosofía */
#sign-filosofia.cartel.activo .comic-accion {
    background: #000000;
    color: #ffffff;
    box-shadow: 10px 10px 0 #ffffff, 10px 10px 0 4px #000;
}

/* 3. Bloque de Impacto */
.comic-caja {
    background: #000000;
    color: #ffffff;
    border: var(--borde-comic);
    padding: 1.2rem 2.5rem;
    font-size: 2.6rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: -8px 8px 0 #000, -8px 8px 0 4px #fff;
    letter-spacing: 1px;
}

/* Activo: Foticos */
#sign-fotos.cartel.activo .comic-caja {
    background: #ffffff;
    color: #000000;
    box-shadow: -8px 8px 0 #000, -8px 8px 0 4px #000;
}

/* Posiciones */
#sign-sobre-mi {
    top: 10%;
    left: 5%;
    transform: rotate(-6deg);
}

#sign-filosofia {
    top: 40%;
    right: 5%;
    transform: rotate(5deg);
}

#sign-fotos {
    bottom: 8%;
    left: 15%;
    animation: viento-cartel 3s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes viento-cartel {
    0%   { transform: rotate(-4deg) scale(1); }
    50%  { transform: rotate(4deg) scale(1.02); }
    100% { transform: rotate(-4deg) scale(1); }
}

/* =========================================
   CONTENIDO PRINCIPAL
   ========================================= */
main {
    margin: 3rem auto;
    width: 95%;
    max-width: 800px;
}

.caja-contenido {
    background: #ffffff;
    border: var(--borde-comic);
    padding: 2.5rem;
    margin-bottom: 4rem;
    box-shadow: var(--sombra-bloque);
    position: relative;
    border-radius: 5px;
    font-size: 1.2rem;
}

.caja-azul {
    background-color: #e6e6e6;
}

.titulo-caja {
    background: #000000;
    color: #ffffff;
    border: var(--borde-comic);
    display: inline-block;
    padding: 0.5rem 2rem;
    margin-top: -4.5rem;
    transform: rotate(-3deg);
    box-shadow: 6px 6px 0 #000;
    letter-spacing: 2px;
    font-size: 2rem;
    text-transform: uppercase;
}

.caja-contenido blockquote {
    font-size: 1.3rem;
    font-style: italic;
    border-left: 6px solid #000000;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f2f2f2;
    font-weight: bold;
}

/* =========================================
   MARQUESINA
   ========================================= */
.marquesina-retro {
    background: #000;
    color: #fff;
    border: 3px solid #fff;
    padding: 5px;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    margin-bottom: 2rem;
}

.marquesina-retro span {
    display: inline-block;
    padding-left: 100%;
    animation: desplazamiento 15s linear infinite;
}

@keyframes desplazamiento {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* =========================================
   TEASERS
   ========================================= */
.grid-teasers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.teaser-caja {
    background: #f2f2f2;
    border: 3px solid #000;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    box-shadow: 4px 4px 0 #000;
    cursor: pointer;
    transition: transform 0.1s;
}

.teaser-caja:hover {
    transform: scale(1.05);
}

/* =========================================
   FRASES ALEATORIAS
   ========================================= */
.bloque-frases {
    background: #e6e6e6;
    border-left: 5px solid #000;
    padding: 15px;
    font-family: monospace;
    font-size: 1.1rem;
    margin: 1.5rem 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* =========================================
   PIXEL SECRETO
   ========================================= */
.pixel-secreto {
    width: 30px;
    height: 30px;
    background: #333;
    border: 2px dashed #fff;
    margin: 20px auto;
    cursor: pointer;
    animation: palpitar 2s alternate infinite;
}

@keyframes palpitar {
    0%   { transform: scale(1);   background: #333; }
    100% { transform: scale(1.3); background: #000; }
}

/* =========================================
   GALERÍA DE FOTOS (Formato Grande y Vertical)
   ========================================= */

/* Hacemos que el contenedor principal de las páginas sea más ancho para que luzcan las fotos */
main {
    max-width: 900px !important; /* Amplía el espacio de trabajo de 600px a 900px */
    margin: 20px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.caja-contenido {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 30px;
}

/* Modificamos el Grid para que muestre fotos grandes en fila vertical */
.galeria-grid {
    display: grid;
    /* En pantallas grandes mostrará 2 fotos por fila (grandes), en móviles 1 sola */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 30px; /* Más espacio entre cada foto para que respiren */
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.item-foto {
    background: #fff;
    border: 3px solid #000;
    padding: 15px; /* Más margen interno tipo cuadro de galería */
    box-shadow: 6px 6px 0px #000;
    transition: transform 0.2s;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.item-foto:hover {
    transform: rotate(0.5deg) scale(1.01);
}

.item-foto img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Quitamos la altura fija para que no se corten */
    
    /* Mantiene una proporción rectangular excelente para fotos grandes (3:2) */
    aspect-ratio: 3 / 2 !important; 
    object-fit: cover !important;
    
    border: 2px solid #000;
    box-sizing: border-box;
    display: block;
}

/* Forzamos a que en fotografía se respete el color */
.pagina-fotografia .item-foto img {
    filter: none !important;
}

.pie-foto {
    text-align: center;
    font-weight: bold;
    font-family: monospace;
    margin-top: 15px;
    color: #000;
    font-size: 1.1rem; /* Texto un poco más grande para acompañar la foto */
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

/* Ajuste extra para celulares (pantallas de menos de 500px) */
@media only screen and (max-width: 500px) {
    .galeria-grid {
        grid-template-columns: 1fr; /* Una sola foto por fila obligatoria */
    }
    .item-foto img {
        aspect-ratio: 1 / 1 !important; /* En celular las hace cuadraditas para que no ocupen toda la pantalla */
    }
}

/* =========================================
   RESPONSIVO
   ========================================= */
@media only screen and (max-width: 768px) {
    .comic-globo,
    .comic-accion,
    .comic-caja {
        font-size: 1.5rem;
        padding: 0.8rem 1.5rem;
        border-width: 3px;
    }

    .comic-accion {
        padding: 1rem 2rem;
    }

    #sign-sobre-mi  { top: 5%;  left: 5%; }
    #sign-filosofia { top: 35%; right: 5%; }
    #sign-fotos     { bottom: 5%; left: 10%; }
}

@media only screen and (max-width: 600px) {
    header {
        display: block;
        aspect-ratio: unset;
        max-height: none;
    }

    header > * {
        margin-bottom: 0.5rem;
    }

    #meirl { aspect-ratio: 1/1; }
    #blog  { aspect-ratio: 4/1; padding: 1rem 0; }
    #all   { height: 450px; }

    .titulo-caja {
        font-size: 1.5rem;
        margin-top: -3.5rem;
    }

    .grid-teasers {
        grid-template-columns: 1fr;
    }
}