:root{

    --rojo:#C62828;
    --rojoOscuro:#8E0000;
    --blanco:#FFFFFF;
    --grisClaro:#F4F4F4;
    --gris:#666666;
    --negro:#222222;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:Georgia, serif;
    background:var(--grisClaro);
    color:var(--negro);
    line-height:1.6;

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

.pagina{

    width:100%;
    display:flex;
    flex-direction:column;

}

.encabezado{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

    background:var(--rojoOscuro);

    padding:1rem 5%;

}

.logo{

    display:flex;
    align-items:center;
    gap:1rem;

}

.logo-marca{

    width:60px;
    height:60px;

    border-radius:50%;

    background:var(--blanco);

    color:var(--rojoOscuro);

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:1.6rem;
    font-weight:bold;

}

.logo-texto h1{

    color:white;
    font-size:1.7rem;

}

.logo-texto p{

    color:#f2d7d5;
    font-size:.85rem;
    letter-spacing:2px;

}

.menu{

    display:flex;
    flex-wrap:wrap;
    gap:.5rem;

}

.menu a{

    color:white;

    padding:.8rem 1.2rem;

    border-radius:6px;

    transition:.3s;

    font-family:Verdana,sans-serif;

}

.menu a:hover{

    background:white;
    color:var(--rojoOscuro);

}

.menu .activo{

    background:white;
    color:var(--rojoOscuro);
    font-weight:bold;

}

.contenido{

    display:flex;
    flex-direction:column;
    gap:3rem;

    padding:3rem 0;

}

.franja{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:2rem;

    padding:2rem 6%;

}

.franja-clara{

    background:white;

}

.franja-crema{

    background:#f8f8f8;

}

.franja-oscura{

    background:var(--rojoOscuro);
    color:white;

}

.titulo-seccion{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:.8rem;

    text-align:center;

}

.titulo-seccion h2{

    font-size:2rem;

    color:var(--rojoOscuro);

}

.franja-oscura .titulo-seccion h2{

    color:white;

}

.linea{

    width:90px;
    height:4px;

    background:var(--rojo);

    border-radius:5px;

}

.heroe{

    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;

    gap:2rem;

    padding:3rem 6%;

    background:linear-gradient(to right,#b71c1c,#d32f2f);

    color:white;

}

.heroe-texto{

    width:48%;
    min-width:18rem;

    display:flex;
    flex-direction:column;

    gap:1.2rem;

}

.heroe-texto h1{

    font-size:2.6rem;
    line-height:1.2;

}

.heroe-texto b{

    color:#FFD54F;

}

.heroe-texto p{

    text-align:justify;
    font-size:1rem;

}

.heroe-imagen{

    width:46%;
    min-width:18rem;

}

.heroe-imagen img{

    border-radius:10px;
    border:4px solid white;

}


.boton{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    width:max-content;

    padding:.9rem 1.7rem;

    background:white;

    color:var(--rojoOscuro);

    border-radius:8px;

    font-weight:bold;

    transition:.3s;

}

.boton:hover{

    background:#FFD54F;
    color:black;

}


.fila-tarjetas{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:2rem;

}

.tarjeta{

    width:30%;
    min-width:16rem;

    display:flex;

    flex-direction:column;

    gap:1rem;

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 0 12px rgba(0,0,0,.15);

    transition:.3s;

}

.tarjeta:hover{

    transform:translateY(-8px);

}

.tarjeta img{

    height:220px;

    object-fit:cover;

}

.tarjeta h3{

    color:var(--rojoOscuro);

    text-align:center;

    font-size:1.3rem;

}

.tarjeta p{

    padding:0 1rem 1.2rem;

    text-align:justify;

}


.dos-columnas{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

}

.columna{

    width:48%;
    min-width:18rem;

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.columna img{

    border-radius:10px;

    border:3px solid white;

}

.columna h2{

    color:#FFD54F;

}

.columna p{

    text-align:justify;

}


.galeria-flex{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1.5rem;

}

.galeria-item{

    width:22%;
    min-width:13rem;

    display:flex;

    flex-direction:column;

    gap:.6rem;

}

.galeria-item img{

    height:190px;

    object-fit:cover;

    border-radius:8px;

    border:3px solid var(--rojo);

}

.galeria-item p{

    text-align:center;

    color:var(--rojoOscuro);

    font-weight:bold;

}

.tabla-contenedor{

    width:100%;

    overflow-x:auto;

}

table{

    width:100%;

    border-collapse:collapse;

    background:white;

}

th{

    background:var(--rojoOscuro);

    color:white;

    padding:1rem;

    text-align:center;

}

td{

    padding:1rem;

    text-align:center;

    border:1px solid #dcdcdc;

}

tr:nth-child(even){

    background:#f5f5f5;

}


.video-caja{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1.5rem;

}

.video-caja video{

    width:75%;

    border-radius:12px;

    border:4px solid var(--rojoOscuro);

}

.video-caja p{

    width:75%;

    text-align:center;

    font-size:1rem;

}

.pie{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    gap:2rem;

    padding:2rem 6%;

    background:var(--rojoOscuro);

    color:white;

}

.pie-columna{

    width:22%;

    min-width:12rem;

    display:flex;

    flex-direction:column;

    gap:.6rem;

}

.pie-columna h3{

    color:#FFD54F;

    margin-bottom:.5rem;

}

.pie-columna a{

    color:white;

    transition:.3s;

}

.pie-columna a:hover{

    color:#FFD54F;

}


img{

    transition:.4s;

}

img:hover{

    transform:scale(1.03);

}

.tarjeta:hover img{

    transform:scale(1.08);

}


@media(max-width:900px){

.heroe-texto,
.heroe-imagen,
.columna,
.tarjeta,
.galeria-item,
.pie-columna{

    width:100%;

}

.video-caja video{

    width:100%;

}

.video-caja p{

    width:100%;

}

.menu{

    justify-content:center;

}

.encabezado{

    justify-content:center;

    gap:1.5rem;

}

}

@media(max-width:600px){

.logo{

    flex-direction:column;

    text-align:center;

}

.logo-texto h1{

    font-size:1.5rem;

}

.heroe{

    padding:2rem;

}

.heroe-texto h1{

    font-size:2rem;

}

.titulo-seccion h2{

    font-size:1.6rem;

}

.menu a{

    width:100%;

    text-align:center;

}

}