/* ===== J.B. FRÓMESTA — hoja de estilos compartida ===== */

body{
    margin:0;
    padding:0;
    background-color:#001a0f;
    background-image:url("fondo.jpg");
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
    color:#cdf2d9;
    font-family:Georgia, serif;
    font-size:18px;
    line-height:1.5;
}

#contenedor{
    width:1000px;
    max-width:96%;
    margin:auto;
    background:rgba(0,15,8,0.85);
    border:3px solid #1f8a4a;
    box-shadow:0 0 25px #0d4d29;
}

header{
    text-align:center;
    padding:30px;
}

h1{
    font-family:'Pirata One', cursive;
    font-size:5em;
    color:#33cc66;
    text-shadow:3px 3px 10px #001a0f, 0 0 20px #1f8a4a;
    margin:0;
}

.subtitulo{
    color:#9fe0b5;
    font-style:italic;
    font-size:1.1em;
}

.marquesina{
    background:#001420;
    padding:8px;
    color:#66b3ff;
    border-top:1px solid #1f8a4a;
    border-bottom:1px solid #1f8a4a;
    font-size:1.05em;
}

nav{
    background:#001a0f;
    text-align:center;
    padding:15px;
    border-top:2px solid #1f8a4a;
    border-bottom:2px solid #1f8a4a;
}

nav a{
    color:#ffffff;
    text-decoration:none;
    margin:0 18px;
    font-family:'Pirata One', cursive;
    font-size:1.5em;
}

nav a:hover{
    color:#33cc66;
}

section{
    padding:25px;
}

h2{
    font-family:'Pirata One', cursive;
    color:#33cc66;
    border-bottom:1px solid #1f8a4a;
    padding-bottom:5px;
    font-size:2em;
}

h3{
    color:#7fdb9a;
    font-family:'Pirata One', cursive;
    font-size:1.7em;
    margin-bottom:4px;
}

a{
    color:#4da6ff;
}

.caja{
    background:rgba(8,25,15,0.8);
    border:1px solid #1f8a4a;
    padding:18px;
    margin-top:15px;
    font-size:1.05em;
}

footer{
    text-align:center;
    padding:20px;
    border-top:2px solid #1f8a4a;
}

.botones img{
    margin:3px;
}

/* ===== Cuadrícula de "Mis libros" ===== */
.rejilla-libros{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    justify-content:center;
}

/* ===== Cuadrícula de "Mis esenciales" — 2 columnas ===== */
.rejilla-esenciales{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.rejilla-esenciales .tarjeta-libro{
    width:auto;
}

@media (max-width:600px){
    .rejilla-esenciales{
        grid-template-columns:1fr;
    }
}

/* ===== Lista de "Libros de cuentos" (sin portada ni enlace) ===== */
.lista-cuentos{
    list-style:none;
    margin:0;
    padding:0;
}

.lista-cuentos li{
    padding:8px 0;
    border-bottom:1px dashed #1f8a4a;
}

.lista-cuentos li:last-child{
    border-bottom:none;
}

.lista-cuentos .autor-cuento{
    color:#7fdb9a;
    font-style:italic;
}

.tarjeta-libro{
    width:260px;
    background:rgba(8,25,15,0.85);
    border:2px solid #1f8a4a;
    text-align:center;
    padding:15px;
    text-decoration:none;
    color:#cdf2d9;
    display:block;
    position:relative;
}

.tarjeta-libro:hover{
    border-color:#33cc66;
    box-shadow:0 0 15px #1f8a4a;
}

.tarjeta-libro img{
    width:100%;
    aspect-ratio:2 / 3;
    height:auto;
    object-fit:cover;
    border:1px solid #1f8a4a;
    background:#001a0f;
}

.tarjeta-libro h3{
    margin-top:10px;
    font-size:1.2em;
}

.cinta-proximamente{
    position:absolute;
    top:10px;
    left:-8px;
    background:#0d4d29;
    color:#c8ffdd;
    border:1px solid #33cc66;
    padding:4px 10px;
    font-family:'Pirata One', cursive;
    font-size:1em;
    transform:rotate(-8deg);
}

/* ===== Página de detalle de un libro ===== */
.detalle-libro{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.detalle-libro img{
    width:280px;
    height:auto;
    border:2px solid #1f8a4a;
}

.detalle-texto{
    flex:1;
    min-width:280px;
}

.lema{
    color:#7fdb9a;
    font-style:italic;
    margin-bottom:10px;
}

/* ===== Enlaces de compra (estilo botón) ===== */
.enlaces-compra{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:15px;
}

.boton-tienda{
    display:inline-block;
    padding:10px 16px;
    text-decoration:none;
    font-family:Georgia, serif;
    font-weight:bold;
    border:2px solid #1f8a4a;
    color:#ffffff;
    background:#00190f;
}

.boton-tienda:hover{
    border-color:#33cc66;
    background:#0d2b1a;
}

.tienda-amazon{ border-color:#e6a817; color:#ffcf6b; }
.tienda-librosCC{ border-color:#33cc66; color:#8fffb0; }
.tienda-casadelLibro{ border-color:#4da6ff; color:#a8d8ff; }

/* ===== Etiqueta animada estilo años 90 (en azul, para llamar la atención) ===== */
@keyframes parpadeo{
    0%, 49%{ opacity:1; }
    50%, 100%{ opacity:0.15; }
}

@keyframes bamboleo{
    0%{ transform:rotate(-4deg); }
    50%{ transform:rotate(4deg); }
    100%{ transform:rotate(-4deg); }
}

.etiqueta-ebook{
    display:inline-block;
    margin:15px 0;
    padding:10px 16px;
    background:#001420;
    border:2px dashed #4da6ff;
    color:#66b3ff;
    font-weight:bold;
    font-family:'Pirata One', cursive;
    font-size:1.4em;
    animation:parpadeo 1s infinite step-end, bamboleo 2.4s infinite ease-in-out;
}

.etiqueta-proximamente{
    display:inline-block;
    margin:10px 0;
    padding:8px 14px;
    background:#001a0f;
    border:2px solid #33cc66;
    color:#7fdb9a;
    font-family:'Pirata One', cursive;
    font-size:1.3em;
}

/* ===== Cartel de contacto ===== */
.cartel-contacto{
    display:inline-block;
    background:#0d4d29;
    color:#c8ffdd;
    border:2px dashed #33cc66;
    padding:10px 18px;
    font-family:'Pirata One', cursive;
    font-size:1.4em;
    transform:rotate(-2deg);
    margin-bottom:15px;
}

.fila-contacto{
    display:flex;
    align-items:center;
    gap:12px;
    margin:12px 0;
    flex-wrap:wrap;
}

.icono-correo{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

.icono-correo svg, .icono-instagram svg{
    width:40px;
    height:40px;
    fill:#66b3ff;
    transition:transform 0.2s, fill 0.2s;
}

.icono-correo:hover svg, .icono-instagram:hover svg{
    transform:scale(1.1);
    fill:#33cc66;
}

/* ===== Plantillas de icono para Contacto ===== */
.iconos-contacto{
    display:flex;
    gap:18px;
    margin:12px 0;
}

.icono-red{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    background:#00190f;
    border:2px solid #1f8a4a;
    transition:border-color 0.2s, transform 0.2s;
}

.icono-red:hover{
    border-color:#4da6ff;
    transform:scale(1.05);
}

.icono-red svg{
    width:32px;
    height:32px;
    fill:#66b3ff;
}

.icono-red img{
    width:36px;
    height:36px;
    object-fit:contain;
}

.texto-correo-visible{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    font-family:Georgia, serif;
    font-size:1.15em;
    color:#cdf2d9;
    margin:10px 0;
}

.texto-correo{
    font-family:Georgia, serif;
    font-size:1.1em;
    color:#cdf2d9;
    background:#00190f;
    border:1px solid #1f8a4a;
    padding:6px 10px;
}

.boton-cassette{
    background:#00190f;
    border:2px solid #1f8a4a;
    color:#cdf2d9;
    font-family:'Pirata One', cursive;
    font-size:1.1em;
    padding:6px 12px;
    cursor:pointer;
}

.boton-cassette:hover{
    border-color:#4da6ff;
    color:#66b3ff;
}

.aviso-copiado{
    color:#4da6ff;
    font-weight:bold;
}

.oculto{
    display:none;
}

/* ===== Cita destacada ===== */
.cita-terror{
    margin:0;
    padding:5px 20px;
    border-left:4px solid #33cc66;
    font-style:italic;
    color:#cdf2d9;
}

.cita-terror p{
    margin:0 0 10px 0;
}

.cita-terror cite{
    display:block;
    text-align:right;
    font-style:normal;
    color:#7fdb9a;
}

.autor-destacado{
    color:#4da6ff;
    font-weight:bold;
    font-style:normal;
    font-size:1.1em;
}

/* ===== Bloque de presentación con foto ===== */
.bloque-presentacion{
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.foto-autor{
    width:180px;
    height:220px;
    object-fit:cover;
    border:2px solid #1f8a4a;
    flex-shrink:0;
}

.texto-presentacion{
    flex:1;
    min-width:220px;
}

.texto-presentacion p{
    margin:0 0 10px 0;
}