/* ====== ESTILO GENERAL ====== */

body {

margin:0;
padding:0;

font-family: Arial, Helvetica, sans-serif;
line-height:1.6;
color:#333;

background-image:
url("../images/piel-calyptratus-nombre-deg.jpg"),
url("../images/piel-calyptratus-nombre-cla.jpg");

background-repeat:
repeat-y,
repeat;

background-position:
left top,
left top;

background-attachment:
fixed,
fixed;

}

.container{

position:relative;
z-index:1;

max-width:1100px;
margin:auto;

padding:20px;

background:#ffffff;

box-shadow:0 0 20px rgba(0,0,0,0.25);

}


/* ====== TITULOS ====== */

h1{
color:#2b4c2f;
margin-bottom:5px;
}

h2{
color:#2b4c2f;
margin-top:0;
}

h2 a{
text-decoration:none;
color:#2b4c2f;
}

h2 a:hover{
text-decoration:underline;
}


/* ====== NAVEGACION ====== */

nav ul{
list-style:none;
padding:0;
margin:20px 0;
display:flex;
flex-wrap:wrap;
gap:10px;
}

nav li{
margin:0;
}

nav a{
text-decoration:none;
background:#e9efe9;
padding:6px 10px;
border-radius:4px;
color:#2b4c2f;
font-weight:bold;
}

nav a:hover{
background:#d7e2d7;
}


/* ====== SECCIONES ====== */

section{
margin-bottom:40px;
padding-bottom:20px;
border-bottom:1px solid #ddd;

/* ESTA LINEA ES LA QUE SOLUCIONA LA FOTO METIENDOSE EN LA SIGUIENTE SECCION */

overflow:auto;
}


/* ====== FOTO A LA DERECHA ====== */

.foto-apartado {
    float: right;          /* mantén la foto a la derecha en escritorio */
    margin: 0 0 10px 20px; /* espacio entre texto y foto */
    max-width: 220px;      /* no crezca demasiado */
    width: 100%;           /* que en móvil ocupe todo el ancho disponible */
    height: auto;          /* mantener proporción */
    border-radius: 6px;    /* borde redondeado */
    box-shadow: 0 3px 10px rgba(0,0,0,0.9); /* sombra */
}


/* ====== AVISO ====== */

.aviso{
background:#fff7d6;
padding:15px;
border-left:5px solid #e6c200;
}


/* ====== FOOTER ====== */

footer{
margin-top:40px;
font-size:14px;
color:#666;
}


/* ====== MOVIL ====== */

@media (max-width:700px){

.foto-apartado{

float:none;
display:block;

margin:10px auto 15px auto;

max-width:100%;

}

nav ul{
flex-direction:column;
}

}

body::before {

content:"";

position:fixed;

top:0;
left:0;

width:320px;
height:260px;

background:url("../images/calyptratus-cabeza-240sfmej.gif") no-repeat;

background-size:contain;

pointer-events:none;

z-index:0;

}