*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: black;
    font-family: "helvetica-lt-pro", sans-serif;
}

html{
    scroll-behavior: smooth;
}

html, body{
    width: 100%;
    -webkit-text-size-adjust: 100%; /* evita reescalado automático en iOS/Chrome */
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden; /* evita scroll horizontal si algo sobresale */
}

hr{
    margin-bottom: 30px;
}

/*TIPOGRAFIAS*/
.titulo{
    color: white;
    padding: 0;
    font-size: 120px;
    justify-content: left;
    text-align: left;
    margin-top: 25px;
}

.titulo-plantilla{
    color: #E30613;
    padding: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    justify-content: left;
    text-align: left;
    margin-top: 25px;
    margin-bottom: 25px;
}

.fecha-plantilla{
    color: white;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    justify-content: left;
    text-align: left;
    margin-top: 30px;
}

.subtitulo-idioma-plantilla{
    margin-bottom: 25px;
    font-size: 22px;
}

.home-button:hover, #val:hover, #es:hover, #en:hover{
    color: #E30613;
}

.subtitulo{
    color: #E30613;
    padding: 30 30px;
    font-size: 90px;
    font-weight: normal;
    justify-content: left;
    text-align: left;
    margin-top: 25px;
}

.fecha{
    color: white;
    font-size: 35px;
    font-weight: normal;
    justify-content: left;
    text-align: left;
    margin-top: 30px;
}

.lugar{
    color: white;
    font-size: 35px;
    font-weight: normal;
    justify-content: left;
    text-align: left;
    margin-top: 30px;
}

h2{
    color: white;
    font-size: 35px;
    font-weight: bold;

}

h3{
    color: white;
    font-size: 27px;
    font-weight: bold;
}

h4{
    color: white;
    font-size: 25px;
    font-weight: bold;
}

p{
    color:white;
    font-size: 22px;
    text-align: left;
    line-height: 1.5;
}

.dedicatoria, .arxiu{
    margin-top: 30px;
}

.page-title-main{
    padding-left: 50px;
    margin: 0; 
}

.page-subtitle{
    padding-left: 50px;
    margin: 0; 
}

.page-title-plantilla{
    padding-left: 50px;
    margin: 0; 
}

/* HEADER  */
header{
    height: 80px;
    background-color: black;
    padding: 0 30px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: right;
    text-align: center;
    width: 100%;
    position: relative; /* asegurar que el header esté encima */
    z-index: 1000;
}
 
.menu a, #es, #val, span{
    color: white;
    text-decoration: none;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 20px;
    
}

.opcion{
    padding: 0 10px;
}

.mostrar-menu, .esconder-menu{
    cursor: pointer;
    display: none; /* se muestra en móvil en la media query */
    padding: 8px 12px;
    position: relative;
    z-index: 1010;
    user-select: none;
}

/* separar comportamiento: ocultar hamburguesa cuando el menú está abierto */
#check:checked ~ .mostrar-menu {
    display: none;
}

/* por defecto la X no se muestra; solo la mostramos cuando el menú está abierto */
.esconder-menu {
    display: none;
}

/* cuando el checkbox está chequeado, mostramos la X dentro del menú */
#check:checked ~ .menu .esconder-menu {
    display: block;
}

.mostrar-menu{
    order:1;
}


#check{
    display: none;
}

/*CUERPO*/

/* IMAGEN PANTALLA MÓVIL */
.parallax {
    display: none;             /* oculto por defecto (escritorio) */
    height: 0;
    min-height: 0;
    overflow: hidden;
    background: none;
    position: relative;
}

/* imagen inyectada/absoluta (por defecto oculta) */
.parallax .parallax-img {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

/* contenido que vaya encima */
.parallax .parallax-content {
    position: relative;
    z-index: 2;
}

/* CUERPO WEB sin parallax*/

.presentacion{
    display: flex;
    flex-direction: column; /* imagen arriba, texto debajo */
    align-items: center;    /* centra horizontalmente */
    margin: 100px 0px 25px;
    padding: 0 50px;
}

.presentacion img{
    border-radius: 8px;
    display: block;
    width: 100%;
    object-fit: cover;  
    margin-bottom: 30px;
}

.presentacion p{
    margin-bottom: 30px;
}

.secciones {
    margin: 50px 0px 25px;
    padding: 0 50px;
}

section{
    margin-bottom: 50px;
}

section a{
    color: white;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* adaptable */
  gap: 30px;
  margin-top: 20px
}

.card {
  background-color: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(255, 255, 255, 0.1);
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 16px 20px;
}

.card-content h3 {
  margin-bottom: 8px;
}

.card-content p {
  font-size: 20px;
  color: #ccc;
  line-height: 1.4;
}

/* INTENTOS DE carrusel */
.slider-box{
    width: 100%;
    max-width: 1280px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #000;
}

.slides{
    display: flex;
    transition: transform 600ms ease;
    will-change: transform;
    width: 100%;
}

.slide{
    min-width: 100%;
    flex: 0 0 100%;
    list-style: none;
    position: relative;
}

.slide img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.slider-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.slider-btn.prev{ left: 12px; }
.slider-btn.next{ right: 12px; }

.slider-dots{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    gap: 8px;
    z-index: 6;
}
.slider-dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 0;
}
.slider-dot.active{ background: #fff; }

/* FOOTER */
footer{
    width: 100%;
    margin-top: 100px;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
}

.footer-container{
    margin: 4% 0;
    padding: 0 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "left-apartado right-apartado"
        "left-contenido right-contenido";
    gap: 24px 40px;
    justify-items: center; /* centra horizontalmente cada celda */
    align-items: start;    /* alinea los items por el inicio de la fila: títulos a la misma altura */
}

/* asignar áreas a los elementos existentes */
.col .apartado{ grid-area: left-apartado; }
.col .contenido{ grid-area: left-contenido; }

.col2 .apartado{ grid-area: right-apartado; }
.upv{ grid-area: right-contenido; }

/* estilo de títulos (misma altura visual, ajustar si quieres altura fija) */
.col .apartado, .col2 .apartado{
    font-size: 25px;
    margin: 0;
    padding-bottom: 8px;
    text-align: center;
    align-self: start;
}

/* contenido debajo del título */
.contenido{
    grid-area: left-contenido;
    font-size: 18px;
    text-align: center;
    align-self: start;
}

/* centrar y espaciar iconos de redes */
.redes{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    margin-right: 0;
    margin-left: 0;
}

.redes img{
    width: 28px;
    height: 28px;
}

/* centrar logo UPV */
.upv{
    width: 150px;
    display: block;
    margin: 0 auto;
}


/*Móvil*/
@media (max-width: 768px) {
    /* TIPOGRAFÍAS */

    .lugar, .dedicatoria, .arxiu{
        font-size: 20px;
        justify-content: center;
        text-align: center;
    }

    /* MENÚ */
    .mostrar-menu, .esconder-menu{
        display: block;
        text-align: right;
        margin-right: 4%;
    }

    .menu{
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: black;
        right: -100%; /* oculto fuera del viewport */
        text-align: center;
        top: 0;
        padding: 100px 0;
        z-index: 100;
        transition: right 0.35s ease;
        pointer-events: none; /* cuando esté fuera no debe recibir clicks */
    }

    .menu a, .menu span{
        display: block;
        color: white;
        padding: 20px;
        text-decoration: none;
    }

    /* cuando el checkbox esté chequeado, muestra el menú */
    #check:checked ~ .menu{
        right: 0;
        pointer-events: auto;
    }

    /* asegurar que la X queda encima y clicable */
    #check:checked ~ .menu .esconder-menu {
        position: absolute;
        top: 18px;
        right: 18px;
        font-size: 30px;
        cursor: pointer;
        z-index: 1020;
    }

    /* posicionar el icono hamburguesa en la esquina */
    .mostrar-menu{
        font-size: 30px;
        position: absolute;
        top: 24px;
        right: 12px;
    }

    /* ocultar la barra entre VA y ES */
    .lang-switch .sep {
        display: none;
    }

    /* asegurar que la hamburguesa se muestre solo cuando no esté abierto */
    #check:not(:checked) ~ .mostrar-menu {
        display: block;
    }

    .esconder-menu{
        position: absolute;
        top: 24px;
        right: 20px;
        color: white;
        font-size: 30px;
    }

    /*CUERPO*/
    .parallax {
        display: block;
        min-height: 100vh;     /* ocupar pantalla móvil */
        height: 100vh;
        overflow: hidden;
        background: none !important; /* asegurar que no haya background que interfiera */
    }
    .parallax .parallax-img {
        display: block;
    }

    /* si tienes versión desktop del título, ocultarla en móvil para evitar duplicados */
    .page-title-main { display: none; }

    /* ajustar header y contenido para que no tapen la hero */
    header { z-index: 1000; position: relative;}

    .page-title,
    .page-title-main,
    .page-title-mobile {
        padding-top: 84px; /* = header height (72) + 12px de separación; ajusta si modificas header */
    }

    .page-title-plantilla{ 
        padding-left: 18px; 
        padding-right: 18px; 
    }

    .page-subtitle{
        padding-left: 18px; 
        padding-right: 18px; 
    }
    .presentacion{ 
        padding: 0 18px; 
        margin: 70px 0 20px; 
    }
    .secciones{ 
        padding: 0 18px; 
        margin: 30px 0; 
    }
    footer .footer-container{ 
        padding: 0 18px; 
    }
    header{ 
        padding: 0 12px; 
        height: 0; 
    }


    /*FOOTER*/

    .footer-container{
        grid-template-columns: 1fr;
        grid-template-areas:
            "left-apartado"
            "left-contenido"
            "right-apartado"
            "right-contenido";
        padding: 20px;
    }
    .upv{ width: 150px; }
}