/* ==========================================
   STYLE.CSS - PORTADA INGLATERRA
   ========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
    font-family:'Poppins',sans-serif;
    background:#f7f7f5;
}

body.loaded{
    animation:fadeIn .8s ease;
}

/* HERO */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    background:url("../img/fondo.jpg") center center/cover no-repeat;
    overflow:hidden;
}

.overlay{

background:linear-gradient(
rgba(0,0,0,.08),
rgba(0, 0, 0, 0.057)
);

}

/* ESCUDO */

.shield{
    position:absolute;
    top:28px;
    left:35px;
    width:120px;
    z-index:200;
    filter:drop-shadow(0 10px 25px rgba(0,0,0,.4));
    transition:.35s;
}

.shield:hover{
    transform:scale(1.08);
}

/* NAV */

.top-nav{
    position:absolute;
    top:25px;
    left:180px;
    right:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:300;
}

.logo-nav{
    font-family:'Anton',sans-serif;
    color:#fff;
    font-size:34px;
    letter-spacing:3px;
}

.menu{
    display:flex;
    gap:40px;
    list-style:none;
}

.menu a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:18px;
    position:relative;
    transition:.3s;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    background:#d40000;
    transition:.3s;
}

.menu a:hover::after{
    width:100%;
}

/* TITULO */

.hero-content{
    position:absolute;
    top:52%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:90%;
    z-index:500;
    text-align:center;
    transition:transform .15s linear;
}

.titulo-img{
    width:min(900px,85vw);
    height:auto;
    display:block;
    filter:drop-shadow(0 18px 35px rgba(0,0,0,.45));
    animation:subir 1s ease;
}

/* BOTON */

.main-btn{

    margin-top:18px;

    padding:18px 60px;

    border-radius:60px;

    text-decoration:none;

    color:white;

    background:#c40000;

    font-size:24px;

    font-weight:700;

    transition:.35s;

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

}

.main-btn:hover{
    transform:translateY(-6px) scale(1.05);
    background:#e00000;
}

.main-btn span{
    margin-left:10px;
    transition:.3s;
}

.main-btn:hover span{
    margin-left:18px;
}

/* BUSCADOR FLOTANTE */

.floating-search{
    position:absolute;
    left:30px;
    bottom:30px;
    display:flex;
    align-items:center;
    gap:14px;
    z-index:600;
}

#searchBtn{
    width:60px;
    height:60px;
    flex-shrink:0;
    border:none;
    border-radius:50%;
    background:#c40000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    transition:.3s;
    font-size:24px;
    animation:pulseSearch 2.4s ease-in-out infinite;
}

#searchBtn:hover{
    transform:scale(1.08);
    animation-play-state:paused;
}

@keyframes pulseSearch{
    0%,100%{ box-shadow:0 10px 25px rgba(0,0,0,.35), 0 0 0 0 rgba(196,0,0,.45); }
    50%{ box-shadow:0 10px 25px rgba(0,0,0,.35), 0 0 0 10px rgba(196,0,0,0); }
}

.search-tooltip{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:14px;
    font-weight:500;
    padding:10px 18px;
    border-radius:30px;
    white-space:nowrap;
    opacity:0;
    transform:translateX(-8px);
    transition:.3s;
    pointer-events:none;
}

.floating-search:hover .search-tooltip{
    opacity:1;
    transform:translateX(0);
}

/*==========================================
   MODAL DE AYUDA — INGLATERRA VS REINO UNIDO
==========================================*/

.info-modal{
    position:fixed;
    inset:0;
    background:rgba(12,15,25,.68);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:10000;
}

.info-modal.active{
    opacity:1;
    visibility:visible;
}

.info-modal-box{
    position:relative;
    width:560px;
    max-width:100%;
    max-height:88vh;
    overflow-y:auto;
    background:#fff;
    border-radius:28px;
    padding:46px 42px;
    box-shadow:0 30px 80px rgba(0,0,0,.3);
    transform:translateY(40px) scale(.96);
    transition:.4s;
}

.info-modal.active .info-modal-box{
    transform:translateY(0) scale(1);
}

.info-modal-close{
    position:absolute;
    right:18px;
    top:18px;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:#f4f4f4;
    color:#222;
    cursor:pointer;
    font-size:18px;
    transition:.3s;
}

.info-modal-close:hover{
    background:#c60022;
    color:#fff;
    transform:rotate(90deg);
}

.info-modal-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#fdecef;
    color:#C8102E;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:18px;
}

.info-modal-eyebrow{
    display:block;
    font-size:.8rem;
    letter-spacing:2px;
    font-weight:700;
    color:#C8102E;
    margin-bottom:10px;
}

.info-modal-box h3{
    font-family:'Anton',sans-serif;
    font-size:30px;
    letter-spacing:.5px;
    color:#111;
    margin-bottom:16px;
    line-height:1.2;
}

.info-modal-lead{
    font-size:16px;
    line-height:1.7;
    color:#555;
    margin-bottom:22px;
}

.info-modal-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.info-modal-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:15px;
    line-height:1.7;
    color:#444;
}

.info-modal-list li i{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f4f4f4;
    color:#C8102E;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    margin-top:2px;
}

.info-modal-list strong{
    color:#111;
}

/* ANIMACIONES */

@keyframes subir{
    from{opacity:0;transform:translateY(40px);}
    to{opacity:1;transform:translateY(0);}
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

/* RESPONSIVE */

@media(max-width:992px){

.top-nav{
    left:20px;
    right:20px;
    flex-direction:column;
    gap:20px;
}

.menu{
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

.logo-nav{
    display:none;
}

.shield{
    width:90px;
}

.titulo-img{
    width:92%;
}

.main-btn{
    font-size:20px;
    padding:16px 45px;
}

}

@media(max-width:600px){

.menu{
    display:none;
}

.hero-content{
    top:52%;
}

}

.flag-bg{

    position:absolute;

    left:0;

    top:30px;

    width:650px;

    height:540px;

    background:url("../img/bandera-bg.png") no-repeat left top;

    background-size:contain;

    opacity:.12;

    pointer-events:none;

    z-index:0;

}

.inicio .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

}

.inicio-texto{

flex:1;

}

.inicio-texto h2{

font-size:52px;

font-weight:700;

margin-bottom:25px;

color:#111;

}

.inicio-texto p{

font-size:20px;

line-height:1.8;

color:#555;

margin-bottom:20px;

}

.inicio-imagen{

flex:1;

text-align:right;

}

.inicio-imagen img{

width:100%;

max-width:620px;

border-radius:20px;

box-shadow:0 25px 50px rgba(0,0,0,.18);

}

.inicio-btn{

    display:inline-block;

    margin-top:20px;

    padding:18px 40px;

    background:#c40000;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.inicio-btn:hover{

transform:translateY(-5px);

background:#e00000;

}

.section{

padding:120px 10%;
min-height:100vh;

opacity:0;
transform:translateY(80px);
transition:1s;

}
.container{

max-width:1300px;

margin:auto;

}

.section h2{

font-size:58px;

margin-bottom:35px;

font-weight:700;

}

.section p{

font-size:20px;

line-height:1.8;



}
.inicio{

background:#F5F6F8;

}

.historia{

background:#ECE8DF;

}
.turismo{

background:#E7F1F8;

}

.cultura{

background:#F4F0E8;

}

.futbol{

background:#FFF3F3;

}

.gastronomia{

background:#F7F3EB;

}


.section.show{

opacity:1;

transform:translateY(0);

}

/*====================================================
                SECCIÓN INICIO
====================================================*/

.inicio{
    position:relative;
    background:#f7f7f5;
    padding:120px 0 170px;
    overflow:hidden;
}

/*==============================
      IMAGEN DE FONDO
==============================*/

.inicio-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:650px;   /* solo la parte superior */
    overflow:hidden;
    z-index:1;
}

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

/*==============================
      DEGRADADO
==============================*/

.inicio-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:650px;
    background:linear-gradient(
        rgba(15,25,45,.80),
        rgba(15,25,45,.45),
        rgba(245,243,239,0)
    );
    z-index:2;
}

.inicio-contenido{

    position:relative;

    z-index:2;

    width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

}

/*==============================
      TEXTO
==============================*/

.inicio-info{

    width:470px;

    padding-top:20px;

}

.inicio-info p{

    width:420px;

    font-size:28px;

    line-height:1.8;

    color:#505050;

}

.mini-titulo{

    display:inline-block;

    color:#B50000;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:18px;

    font-size:15px;

}

.inicio-info h2{

    font-family:'Anton',sans-serif;

    font-size:80px;

    color:#181818;

    margin-bottom:25px;

    letter-spacing:3px;

}



/*==============================
      FOTOGRAFIAS
==============================*/

/*==================================
      GALERÍA DE INICIO
==================================*/

.inicio-fotos{

    position:relative;

    width:570px;

    height:470px;

}

/* Imagen superior */

.foto1{

    top:0;

    left:180px;

    transform:rotate(-4deg);

    z-index:3;

}
/* Las dos inferiores */

.foto2{

    top:165px;

    left:40px;

    transform:rotate(7deg);

    z-index:2;

}

.foto3{

    top:185px;

    left:235px;

    transform:rotate(-5deg);

    z-index:4;

}
/* Tarjetas */

.foto{

    position:absolute;

    width:210px;

    height:270px;

    background:#fff;

    padding:12px;

    border-radius:12px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.18);

    transition:.4s;

}

.foto img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:8px;

}

/* Hover */

.foto:hover{

    transform:scale(1.04) rotate(0deg);

    z-index:20;

}
.foto:hover img{

    transform:scale(1.08);

}

/*====================================================
        CARACTERISTICAS
====================================================*/

.inicio-caracteristicas{

    position:relative;

    z-index:5;

    width:min(1320px,92%);
    
    transform: translateY(88px);

    margin:-70px auto 120px;

    position:relative;

    z-index:20;

    background:white;

    border-radius:22px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    padding:45px;

    box-shadow:

    0 25px 55px rgba(0,0,0,.08);

}

.item{

    display:flex;

    align-items:center;

    gap:18px;

}

.item svg{

    width:42px;

    height:42px;

    color:#C30000;

    flex-shrink:0;

}

.item h4{

    font-size:24px;

    margin-bottom:4px;

    color:#1a1a1a;

}

.item span{

    color:#777;

    font-size:16px;

}

/*====================================================
            DESTINOS
====================================================*/

.destinos{

    position:relative;
    
    z-index:5;

    width:min(1320px,92%);

    margin:170px auto 120px;

}

.destinos-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:60px;

    gap:70px;

}

.destinos-header h3{

    font-size:58px;

    font-weight:700;

    color:#181818;

}

.destinos-header p{

    max-width:470px;

    color:#666;

    line-height:1.8;

}

/*====================================================
              TARJETAS
====================================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.card{

    border:none;

    border-radius:22px;

    overflow:hidden;

    background:white;

    transition:.45s;

    box-shadow:

    0 20px 45px rgba(0,0,0,.10);

}

.card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.18);

}

.card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.card-body{

    padding:28px;

}

.card-body h4{

    font-size:28px;

    margin-bottom:12px;

}

.card-body p{

    color:#666;

    line-height:1.7;

}

/*====================================================
            ANIMACIONES SCROLL
====================================================*/

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:

    opacity 1s ease,

    transform 1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*====================================================
         EFECTOS DE LAS FOTOS
====================================================*/

.foto{

    cursor:pointer;

}

.foto1:hover{

    transform:

    rotate(-3deg)

    translateY(-15px)

    scale(1.04);

}

.foto2:hover{

    transform:

    rotate(5deg)

    translateY(-15px)

    scale(1.04);

}

.foto3:hover{

    transform:

    rotate(-4deg)

    translateY(-15px)

    scale(1.04);

}

/*====================================================
          SOMBRA INTERNA
====================================================*/

.foto::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.12)

    );

    pointer-events:none;

}

/*====================================================
      EFECTO TARJETAS DESTINOS
====================================================*/

.card{

    position:relative;

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

    90deg,

    #c30000,

    #ff2d2d

    );

    transform:scaleX(0);

    transition:.45s;

    transform-origin:left;

}

.card:hover::before{

    transform:scaleX(1);

}

.card-body{

    background:white;

}

/*====================================================
            ICONOS
====================================================*/

.item{

    transition:.4s;

}

.item:hover{

    transform:translateY(-8px);

}

.item svg{

    transition:.4s;

}

.item:hover svg{

    transform:scale(1.15);

    color:#e10000;

}

/*====================================================
              TABLET
====================================================*/

@media(max-width:1100px){

.inicio-contenido{

    flex-direction:column;

    text-align:center;

}

.inicio-info{

    width:100%;

    max-width:800px;

}

.inicio-fotos{

    width:100%;

    max-width:700px;

}

.destinos-header{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.cards{

    grid-template-columns:

    repeat(2,1fr);

}

}

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

@media(max-width:768px){

.inicio{

    padding:90px 0;

}

.inicio-info h2{

    font-size:52px;

}

.inicio-info p{

    font-size:17px;

}

.inicio-fotos{

    height:450px;

}

.foto1{

    width:280px;

    height:180px;

}

.foto2{

    width:170px;

    height:120px;

}

.foto3{

    width:190px;

    height:130px;

}

.inicio-caracteristicas{

    grid-template-columns:1fr 1fr;

}

.destinos-header h3{

    font-size:40px;

}

.cards{

    grid-template-columns:1fr;

}

}

/*====================================================
            MOVIL PEQUEÑO
====================================================*/

@media(max-width:500px){

.inicio-info h2{

    font-size:42px;

}

.inicio-caracteristicas{

    grid-template-columns:1fr;

}

.item{

    justify-content:center;

    text-align:left;

}

.foto1{

    width:230px;

    height:150px;

}

.foto2{

    width:140px;

    height:100px;

}

.foto3{

    width:150px;

    height:110px;

}

}

/*==================================================
                MODAL DESTINOS
==================================================*/

.modal-destino{

    position:fixed;
    inset:0;
    background:rgba(12,15,25,.68);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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

    opacity:0;
    visibility:hidden;

    transition:.45s;

    z-index:9999;

}

.modal-destino.active{

    opacity:1;
    visibility:visible;

}

/*====================*/

.modal-box{

    width:1080px;
    max-width:92%;
    max-height:88vh;

    background:#fff;

    border-radius:30px;

    overflow-y:auto;
    overflow-x:hidden;

    position:relative;

    box-shadow:
    0 30px 80px rgba(0,0,0,.28);

    transform:translateY(60px) scale(.94);

    transition:.45s;

}

.modal-box::-webkit-scrollbar{
    width:8px;
}

.modal-box::-webkit-scrollbar-thumb{
    background:#C8102E;
    border-radius:50px;
}

.modal-destino.active .modal-box{

    transform:translateY(0) scale(1);

}

/*====================*/

.modal-grid{

    display:grid;

    grid-template-columns:47% 53%;

}

/*==================================================
                IMAGEN
==================================================*/

.modal-img{
    position:relative;
    overflow:hidden;
    padding:0;
    height:100%;
}

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

.modal-grid{
    display:grid;
    grid-template-columns:47% 53%;
    align-items:stretch;
}

/*==================================================
                INFORMACION
==================================================*/

.modal-info{

    padding:45px 50px;

}

.modal-subtitulo{

    display:flex;

    align-items:center;

    gap:10px;

    color:#b40018;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.modal-subtitulo i{

    font-size:20px;

}

.modal-info h2{

    font-family:'Anton',sans-serif;

    font-size:72px;

    margin:8px 0 12px;

    color:#111827;

    letter-spacing:2px;

}

.modal-info h2::after{

    content:"";

    display:block;

    width:70px;

    height:5px;

    margin-top:12px;

    background:#b40018;

    border-radius:50px;

}

.modal-info>p{

    font-size:18px;

    color:#5b6470;

    line-height:1.9;

    margin:25px 0;

}

/*==================================================
                GRID
==================================================*/

.info-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:35px;

}

.info-grid div{

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

}


.info-grid i{

    width:58px;
    height:58px;

    border-radius:50%;

    border:2px solid #c60022;

    color:#c60022;

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

    font-size:22px;

    flex-shrink:0;

}

.info-grid h4{

    margin:0;

    font-size:18px;

    color:#111827;

    font-weight:700;

}

.info-grid p{

    margin-top:5px;

    color:#666;

    line-height:1.7;

    font-size:15px;

}

/*==================================================
                LINEA
==================================================*/

.modal-info hr{

    margin:38px 0;

    border:none;

    height:1px;

    background:#ececec;

}

/*==================================================
            LUGARES DESTACADOS
==================================================*/


.modal-destino.show{

    opacity:1;
    visibility:visible;

}
.modal-info ul{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    list-style:none;

    padding:0;

    margin-top:25px;

}

.modal-info li{

    display:flex;

    gap:12px;

    align-items:flex-start;

    font-size:16px;

    color:#555;

    line-height:1.8;

}

.modal-info li i{

    color:#c60022;

    margin-top:6px;

}

/*==================================================
            BOTON CERRAR
==================================================*/

.cerrar-modal{

    position:absolute;

    right:22px;

    top:22px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#222;

    cursor:pointer;

    box-shadow:

    0 8px 25px rgba(0,0,0,.15);

    transition:.3s;

    font-size:22px;

    z-index:20;

}

.cerrar-modal:hover{

    background:#c60022;

    color:#fff;

    transform:rotate(90deg);

}

/*==================================================
        EFECTO ENTRADA
==================================================*/

@keyframes fadeModal{

    from{

        opacity:0;
        transform:translateY(70px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.modal-destino.active .modal-box{

    animation:fadeModal .45s ease;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px){

.modal-grid{

grid-template-columns:1fr;

}

.modal-img{

padding:20px 20px 0;

}

.modal-img img{

height:420px;

}

.modal-info{

padding:35px;

}

.modal-info h2{

font-size:55px;

}

.info-grid{

grid-template-columns:1fr;

}

.modal-info ul{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.modal-info h2{

font-size:42px;

}

.modal-img img{

height:300px;

}

.modal-info{

padding:25px;

}

}

.modal-destino{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);

    z-index:9999;
}

.modal-destino.show{

    opacity:1;
    visibility:visible;

}

/*=========================
OVERLAY DE LAS TARJETAS
=========================*/

.card-img{

    position:relative;
    overflow:hidden;
    border-radius:22px 22px 0 0;

}

.card-img img{

    width:100%;
    height:260px;
    object-fit:cover;
    display:block;

}

/* Degradado */

.card-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:28px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.35),
        rgba(0,0,0,.05)
    );

    color:#fff;

}

/* País */

.card-subtitulo{

    font-size:.82rem;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.9;
    margin-bottom:8px;

}

/* Título */

.card-overlay h2{

    font-family:'Anton',sans-serif;
    font-size:2.5rem;
    line-height:1;
    letter-spacing:2px;
    margin:0;

}

/* Descripción */

.card-overlay p{

    margin-top:10px;
    font-size:1rem;
    color:#f2f2f2;

}


/*======================================
TEXTO SOBRE LA IMAGEN DEL MODAL
======================================*/



/* Oscurece ligeramente la imagen */

.modal-img::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35),
        rgba(0,0,0,.05)
    );

}

/* Texto */

.modal-img-overlay{

    position:absolute;

    left:35px;
    bottom:35px;

    z-index:5;

    color:#fff;

}

.modal-location{

    display:inline-block;

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(255,255,255,.9);

    margin-bottom:10px;

}

.modal-img-overlay h1{

    font-family:'Anton',sans-serif;

    font-size:4rem;

    letter-spacing:3px;

    margin:0;

    line-height:1;

}

.modal-img-overlay p{

    margin-top:10px;

    font-size:1.15rem;

    font-weight:500;

    color:#f1f1f1;

}

/*==================================================
            TIMELINE - HISTORIA DE INGLATERRA
==================================================*/

.timeline-section{
    position:relative;
    width:100%;
    height:126vh;
    min-height:1050px;
    overflow:hidden;
    background:#000;
}

/*==============================
    IMÁGENES DE FONDO
==============================*/

.timeline-background{
    position:absolute;
    inset:0;
    z-index:1;
}

.timeline-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .8s ease;
}

.timeline-bg.active{
    opacity:1;
}

/*==============================
        CAPA OSCURA
==============================*/

.timeline-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.55),
        rgba(0,0,0,.78)
    );
    z-index:2;
}

/*==============================
      CONTENIDO PRINCIPAL
==============================*/

.timeline-content{
    position:relative;
    z-index:5;

    width:min(1100px,90%);
    margin:auto;

    padding-top:110px;

    text-align:center;

    color:#fff;

    transform:translateY(-100px);
}

.timeline-subtitle{
    display:inline-block;

    color:#ffffff;

    letter-spacing:4px;

    font-size:15px;

    font-weight:600;

    margin-bottom:18px;

    text-transform:uppercase;

    opacity:.9;
}

.timeline-content h2{

    font-family:'Anton',sans-serif;

    font-size:72px;

    letter-spacing:3px;

    margin-bottom:12px;

}

.timeline-content h3{

    font-size:30px;

    font-weight:600;

    color:#e8e8e8;

    margin-bottom:30px;

}

.timeline-content p{

    width:min(850px,90%);

    margin:auto;

    font-size:19px;

    line-height:1.9;

    color:#f3f3f3;

}

/*==============================
        BOTONES
==============================*/

.timeline-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

}

.timeline-buttons button{

    width:62px;

    height:62px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.4);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

    color:#fff;

    cursor:pointer;

    transition:.35s;

    font-size:20px;

}

.timeline-buttons button:hover{

    background:#ffffff;

    color:#b40018;

    transform:translateY(-4px);

}


/*==================================================
            TIMELINE - LINEA HORIZONTAL
==================================================*/

.timeline-wrapper{

    position:absolute;

    left:0;
    right:0;
    bottom:55px;
    overflow-x:hidden;
    overflow-y:visible;

    z-index:10;

}

/*=====================================
        SCROLL HORIZONTAL
=====================================*/

.timeline-scroll{

    
    
    padding-top:29px;

    padding-bottom:-150px;

    overflow-x:auto;
    overflow-y:hidden;

    display:flex;
    justify-content:center;

    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;

    -ms-overflow-style:none;
    scrollbar-width:none;
}

.timeline-scroll::-webkit-scrollbar{

    display:none;

}

.timeline-scroll:active{

    cursor:grabbing;

}

/*=====================================
        CONTENEDOR
=====================================*/

.timeline-scroll{

    display:flex;

    justify-content:flex-start;

}

.timeline-scroll::before{

    content:"";

    flex:0 0 120px;

}

.timeline-scroll::after{

    content:"";

    flex:0 0 120px;

}

/*=====================================
            LINEA
=====================================*/

.timeline-progress{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:rgba(255,255,255,.20);
    border-radius:20px;
    overflow:hidden;
}



/*=====================================
        CONTENEDOR ITEMS
=====================================*/

.timeline-scroll{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    position:relative;

}

/*=====================================
            CADA ETAPA
=====================================*/

.timeline-item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

}


/*=====================================
            CIRCULO
=====================================*/

.timeline-dot{

    width:26px;

    height:26px;

    border-radius:50%;

    background:#ffffff;

    border:5px solid #ffffff;

    transition:.35s;

    box-shadow:

        0 0 0 6px rgba(255,255,255,.15);

}

/*=====================================
        ITEM ACTIVO
=====================================*/

.timeline-item.active .timeline-dot{

    width:34px;

    height:34px;

    background:#ffffff;

    box-shadow:

        0 0 0 10px rgba(255,255,255,.25);

}

/*=====================================
            HOVER
=====================================*/

.timeline-item:hover .timeline-dot{

    transform:scale(1.25);

}

/*=====================================
            FECHA
=====================================*/

.timeline-date{

    margin-top:20px;

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*=====================================
            TITULO
=====================================*/

.timeline-item h4{

    margin-top:10px;

    color:#ffffff;

    font-size:15px;

    line-height:1.5;

    text-align:center;

    font-weight:500;

    opacity:.9;

}

/*=====================================
        ITEM ACTIVO
=====================================*/

.timeline-item.active h4{

    color:#ffffff;

    font-weight:700;

}

.timeline-item.active .timeline-date{

    color:#ffffff;

}


/*==================================================
        TIMELINE - EFECTOS PROFESIONALES
==================================================*/

/*------------------------------
    Animación de cambio
------------------------------*/

.timeline-content h2,
.timeline-content h3,
.timeline-content p{

    transition:
        opacity .45s ease,
        transform .45s ease;

}

.timeline-changing h2,
.timeline-changing h3,
.timeline-changing p{

    opacity:0;
    transform:translateY(20px);

}

/*------------------------------
    Fondo con transición
------------------------------*/

.timeline-bg{

    transform:scale(1.08);
    transition:
        opacity .8s ease,
        transform 7s linear;

}

.timeline-bg.active{

    transform:scale(1);

}

/*------------------------------
    Hover de los años
------------------------------*/

.timeline-item{

    transition:
        transform .35s,
        opacity .35s;

}

.timeline-item:hover{

    transform:translateY(-10px);

}

/*------------------------------
    Punto normal
------------------------------*/

.timeline-dot{

    position:relative;

}

.timeline-dot::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.25);

    opacity:0;

    transition:.35s;

}

.timeline-item:hover .timeline-dot::after{

    opacity:1;

}

/*------------------------------
    Punto activo
------------------------------*/

.timeline-item.active .timeline-dot{

    animation:pulseDot 2.2s infinite;

}

@keyframes pulseDot{

    0%{

        box-shadow:
            0 0 0 0 rgba(255,255,255,.55);

    }

    70%{

        box-shadow:
            0 0 0 18px rgba(255,255,255,0);

    }

    100%{

        box-shadow:
            0 0 0 0 rgba(255,255,255,0);

    }

}

/*------------------------------
    Barra de progreso
------------------------------*/

.timeline-progress{

    overflow:hidden;

}

.timeline-progress-bar{

    background:linear-gradient(
        90deg,
        #ffffff,
        #f6f6f6,
        #ffffff
    );

    box-shadow:
        0 0 18px rgba(255,255,255,.7);

}

/*------------------------------
    Desenfoque extremos
------------------------------*/

.timeline-wrapper::before,
.timeline-wrapper::after{

    content:"";

    position:absolute;

    top:0;

    width:160px;

    height:100%;

    pointer-events:none;

    z-index:20;

}

.timeline-wrapper::before{

    left:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.55),
        transparent
    );

}

.timeline-wrapper::after{

    right:0;

    background:linear-gradient(
        to left,
        rgba(0,0,0,.55),
        transparent
    );

}

/*------------------------------
    Scroll suave
------------------------------*/

.timeline-scroll{

    scroll-behavior:smooth;

}

/*------------------------------
    Cursor
------------------------------*/

.timeline-scroll.dragging{

    cursor:grabbing;

    user-select:none;

}

.timeline-scroll.dragging .timeline-item{

    pointer-events:none;

}

/*------------------------------
    Botones
------------------------------*/

.timeline-buttons button{

    position:relative;

    overflow:hidden;

}

.timeline-buttons button::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    left:50%;
    top:50%;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    transform:translate(-50%,-50%);

    transition:.45s;

}

.timeline-buttons button:hover::before{

    width:180px;

    height:180px;

}

.timeline-buttons button i{

    position:relative;

    z-index:5;

}
.timeline-item.end{

    margin-right:0;

}
/*------------------------------
    Responsive
------------------------------*/

@media(max-width:992px){

.timeline-content h2{

    font-size:54px;

}

.timeline-content h3{

    font-size:24px;

}

.timeline-content p{

    font-size:17px;

}

.timeline-scroll{

    gap:90px;

}

}

@media(max-width:768px){

.timeline-wrapper{

    bottom:30px;

}

.timeline-scroll{

    gap:70px;

}

.timeline-item{

    min-width:100px;

}

.timeline-item h4{

    font-size:13px;

}

.timeline-date{

    font-size:12px;

}

.timeline-dot{

    width:22px;
    height:22px;

}

.timeline-item.active .timeline-dot{

    width:30px;
    height:30px;

}

}

/*=========================================
TRACK DEL TIMELINE
=========================================*/

.timeline-scroll{
    width:100%;
    overflow:hidden;
    margin-top:70px;
}

.timeline-track{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    gap:65px;

    padding:0 30px;

}

/* Línea blanca */

.timeline-track::before{

    content:"";

    position:absolute;

    top:22px;

    left:30px;

    right:30px;

    height:4px;

    background:rgba(255,255,255,.28);

    border-radius:50px;

}

/* Barra que avanza */

.timeline-progress{

    position:absolute;

    top:22px;

    left:30px;

    height:4px;

    width:0;

    background:#fff;

    border-radius:50px;

    transition:.6s;

    z-index:2;

}

/* Cada punto */

.timeline-item{

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    cursor:pointer;

    z-index:5;

}

.timeline-section{

    min-height:110vh;

    padding:120px 0;

}

/*==========================
BOTÓN FULLSCREEN
==========================*/

.timeline-fullscreen{

    position:absolute;

    top:25px;

    right:25px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    color:#fff;

    cursor:pointer;

    transition:.35s;

    font-size:22px;

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

    z-index:1000;

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

}

.timeline-fullscreen:hover{

    background:#ffffff;

    color:#111;

    transform:scale(1.08);

}

.timeline-item.active{

    transform:translateY(-12px);

}

.timeline-item.active .timeline-dot{

    transform:scale(1.3);

    background:#fff;

    box-shadow:

    0 0 25px #fff,

    0 0 50px rgba(255,255,255,.45);

}

/*=========================================
        ZOOM DEL FONDO
=========================================*/

.timeline-bg{
    position:absolute;

    top:25px;

    left:25px;

    z-index:500;
    transform:scale(1);
    transition:
        transform .7s ease,
        opacity .5s ease;

}

.timeline-bg.zoom{

    transform:scale(1.08);

}

/*=========================================
    TRANSICIÓN DEL TEXTO
=========================================*/

#timelineTitle,
#timelineYear,
#timelineDescription{

    transition:opacity .25s ease;

}


/*==================================================
            TURISMO DE INGLATERRA
==================================================*/

.turismo{

    position:relative;

    padding:140px 0;

    background:
    linear-gradient(
        180deg,
        #f7f8fa 0%,
        #eef2f7 100%
    );

    overflow:hidden;

}

/*====================================
DECORACIÓN DE FONDO
====================================*/

.turismo::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    top:-220px;
    right:-220px;

    border-radius:50%;

    background:rgba(200,0,0,.05);

}

.turismo::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-180px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(0,45,120,.05);

}

/*====================================
CONTENEDOR
====================================*/

.turismo-container{

    width:min(1400px,92%);

    margin:auto;

    position:relative;

    z-index:5;

}

/*====================================
CABECERA
====================================*/

.turismo-header{

    display:grid;

    grid-template-columns:1fr 550px;

    gap:70px;

    align-items:center;

    margin-bottom:90px;

}

/*====================================
TEXTO
====================================*/
.turismo-texto{

    position:relative;

    z-index:10;

}

.turismo-texto h2{

    font-family:'Anton',sans-serif;

    font-size:72px;

    color:#111;

    letter-spacing:3px;

    margin-bottom:25px;

}

.turismo-texto p{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:25px;

}

/*====================================
ETIQUETA
====================================*/

.turismo-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    background:#ffffff;

    border-left:5px solid #C8102E;

    border-radius:50px;

    margin-bottom:30px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

.turismo-label i{

    color:#C8102E;

    font-size:18px;

}

.turismo-label span{

    font-size:15px;

    letter-spacing:2px;

    font-weight:700;

    color:#444;

}

/*====================================
LISTA
====================================*/

.turismo-lista{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:35px;

}

.turismo-lista div{

    display:flex;

    gap:15px;

    align-items:flex-start;

}

.turismo-lista i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#C8102E;

    color:#fff;

    font-size:16px;

    flex-shrink:0;

}

.turismo-lista span{

    color:#444;

    line-height:1.8;

}

/*====================================
MAPA
====================================*/

.turismo-mapa{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.turismo-mapa img{

    width:100%;

    max-width:520px;

    filter:

    drop-shadow(
        0 25px 50px rgba(0,0,0,.18)
    );

    transition:.45s;

}

.turismo-mapa img:hover{

    transform:

    scale(1.03)

    rotate(-1deg);

}

/*====================================
TÍTULO REGIONES
====================================*/

.regiones-title{

    text-align:center;

    margin-bottom:70px;

}

.regiones-title h3{

    font-family:'Anton',sans-serif;

    font-size:58px;

    letter-spacing:3px;

    color:#111;

}

.regiones-title p{

    width:min(900px,92%);

    margin:25px auto 0;

    color:#666;

    line-height:2;

    font-size:19px;

}

/*==================================================
            GRID DE LAS REGIONES
==================================================*/

.regions-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:40px;

}

/*==================================================
                TARJETA
==================================================*/

.region-card{

    position:relative;

    perspective:1800px;

    height:500px;

}

.region-card-inner{

    position:relative;

    width:100%;

    height:100%;

    transform-style:preserve-3d;

    transition:transform .8s cubic-bezier(.2,.8,.2,1);

}

.region-card.active .region-card-inner{

    transform:rotateY(180deg);

}

/*==================================================
            CARAS
==================================================*/

.region-front,
.region-back{

    position:absolute;

    inset:0;

    border-radius:28px;

    overflow:hidden;

    backface-visibility:hidden;

    box-shadow:

    0 25px 60px rgba(0,0,0,.14);

}

.region-back{

    transform:rotateY(180deg);

    background:#ffffff;

}

/*==================================================
            IMAGEN
==================================================*/

.region-front img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s;

}

.region-card:hover .region-front img{

    transform:scale(1.10);

}

/*==================================================
            OVERLAY
==================================================*/

.region-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:38px;

    background:

    linear-gradient(

        rgba(0,0,0,.05),

        rgba(0,0,0,.35),

        rgba(0,0,0,.88)

    );

}

.region-overlay span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(12px);

    color:#fff;

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:18px;

}

.region-overlay h3{

    font-family:'Anton',sans-serif;

    font-size:52px;

    color:#fff;

    letter-spacing:3px;

    line-height:1;

    margin-bottom:18px;

}

.region-overlay button{

    width:max-content;

    border:none;

    cursor:pointer;

    padding:15px 28px;

    border-radius:50px;

    background:#C8102E;

    color:#fff;

    font-weight:600;

    font-size:16px;

    transition:.35s;

}

.region-overlay button:hover{

    background:#ffffff;

    color:#C8102E;

    transform:translateY(-5px);

}

/*==================================================
            PARTE TRASERA
==================================================*/

.region-back{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:35px;

}

.region-back h3{

    display:flex;

    align-items:center;

    gap:15px;

    color:#C8102E;

    font-size:34px;

    margin-bottom:20px;

}

.region-back p{

    color:#555;

    font-size:17px;

    line-height:1.9;

    margin-bottom:28px;

}

/*==================================================
            INFORMACIÓN
==================================================*/

.region-data{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.region-data div{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px;

    border-radius:16px;

    background:#F8F8F8;

    transition:.35s;

}

.region-data div:hover{

    transform:translateX(8px);

    background:#f2f4f8;

}

.region-data i{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#C8102E;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:18px;

}

.region-data strong{

    display:block;

    color:#111;

    margin-bottom:6px;

}

.region-data span{

    color:#666;

    line-height:1.7;

}

/*==================================================
        EFECTOS PREMIUM
==================================================*/

.region-card{

    cursor:pointer;

}

.region-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    pointer-events:none;

    box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.25);

}

.region-card:hover{

    transform:translateY(-10px);

}

.region-card{

    transition:.4s;

}

/* Brillo */

.region-front::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:45%;

    height:300%;

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.45),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1.1s;

    z-index:5;

}

.region-card:hover .region-front::before{

    left:150%;

}

/*==================================================
            BOTÓN
==================================================*/

.region-overlay button{

    display:flex;

    align-items:center;

    gap:12px;

}

.region-overlay button i{

    transition:.35s;

}

.region-overlay button:hover i{

    transform:translateX(6px);

}

/*==================================================
        APARICIÓN AL HACER SCROLL
==================================================*/

.region-card{

    opacity:0;

    transform:

    translateY(70px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.region-card.show{

    opacity:1;

    transform:none;

}

/*==================================================
            HOVER
==================================================*/

.region-back h3 i{

    color:#1E3A8A;

}

.region-data div:hover i{

    transform:rotate(360deg);

}

.region-data i{

    transition:.6s;

}

/*==================================================
            BOTÓN EXPLORAR REGIÓN
==================================================*/

.region-btn{

    margin-top:30px;

    display:inline-flex;

    align-items:center;

    gap:12px;

    align-self:flex-start;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    background:#C8102E;

    color:#fff;

    font-weight:600;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(200,16,46,.25);

}

.region-btn i{

    transition:.35s;

}

.region-btn:hover{

    background:#163A70;

    transform:translateY(-5px);

}

.region-btn:hover i{

    transform:translateX(6px);

}

/*==================================================
            ESTADÍSTICAS
==================================================*/

.region-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:30px;

}

.region-stat{

    padding:20px;

    border-radius:18px;

    text-align:center;

    background:#F5F7FA;

    border-top:4px solid #C8102E;

    transition:.35s;

}

.region-stat:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 35px rgba(0,0,0,.10);

}

.region-stat h4{

    font-family:'Anton',sans-serif;

    font-size:34px;

    color:#163A70;

    letter-spacing:2px;

    margin-bottom:8px;

}

.region-stat span{

    color:#666;

    font-size:15px;

}

/*==================================================
            EFECTOS
==================================================*/

.region-back{

    overflow:auto;

}

.region-back::-webkit-scrollbar{

    width:6px;

}

.region-back::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:50px;

}

.region-card:hover{

    box-shadow:
    0 35px 80px rgba(0,0,0,.18);

}

.region-card{

    transition:
    transform .45s,
    box-shadow .45s;

}

/*==================================================
            ANIMACIONES
==================================================*/

@keyframes regionFade{

    from{

        opacity:0;
        transform:translateY(70px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

.region-card.show{

    animation:regionFade .9s ease both;

}

/*==================================================
            RESPONSIVE TABLET
==================================================*/

@media(max-width:1200px){

.regions-grid{

    grid-template-columns:repeat(2,1fr);

}

.turismo-header{

    grid-template-columns:1fr;

    text-align:center;

}

.turismo-label{

    margin:auto auto 30px;

}

.turismo-lista{

    margin-top:40px;

}

.turismo-mapa{

    margin-top:60px;

}

}

.turismo{

    position:relative;

    background:#f7f7f7;

    padding:150px 0;

    overflow:hidden;

}


/*==================================================
        CABECERA DE TURISMO
==================================================*/

.turismo-header{

    text-align:center;

    max-width:980px;

    margin:0 auto 140px;

}

.turismo-mini{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 26px;

    background:#fff;

    border-radius:50px;

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

    color:#555;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:35px;

}

.turismo-mini i{

    color:#C8102E;

    font-size:20px;

}

/*==========================
        TITULO
==========================*/

.turismo-header h2{

    font-family:'Anton',sans-serif;

    font-size:78px;

    line-height:1.05;

    letter-spacing:3px;

    color:#111;

    margin-bottom:35px;

}

.turismo-header h2 span{

    color:#C8102E;

}

/*==========================
        PARRAFO
==========================*/

.turismo-header p{

    max-width:980px;

    margin:auto;

    padding:28px 35px;

    font-size:22px;

    line-height:2;

    color:#4d4d4d;

    background:#ffffff;

    border-radius:22px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

    border-left:7px solid #C8102E;

}

/*==================================================
        INTRODUCCIÓN
==================================================*/

.turismo-intro{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:80px;

    align-items:center;

    margin-top:40px;

    margin-bottom:150px;

}

/*==================================================
        MAPA
==================================================*/

.turismo-mapa{

    position:relative;

}

.turismo-mapa img{

    width:100%;

    border-radius:28px;

    background:#fff;

    padding:22px;

    box-shadow:

        0 30px 70px rgba(0,0,0,.14);

    transition:.45s;

}

.turismo-mapa img:hover{

    transform:

        translateY(-10px)

        scale(1.03);

}

/*==================================================
        TARJETA
==================================================*/

.tour-card-info{

    background:#fff;

    padding:48px;

    border-radius:28px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.10);

    border-top:6px solid #C8102E;

    transition:.35s;

}

.tour-card-info:hover{

    transform:translateY(-8px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.14);

}

/*==================================================
        TITULO
==================================================*/

.tour-card-info h3{

    display:flex;

    align-items:center;

    gap:18px;

    font-family:'Anton',sans-serif;

    font-size:40px;

    letter-spacing:2px;

    color:#111;

    margin-bottom:30px;

}

.tour-card-info h3 i{

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#C8102E;

    color:#fff;

    font-size:28px;

}

/*==================================================
        PARRAFOS
==================================================*/

.tour-card-info p{

    position:relative;

    padding-left:28px;

    margin-bottom:24px;

    color:#555;

    font-size:18px;

    line-height:2;

}

.tour-card-info p::before{

    content:"";

    position:absolute;

    left:0;

    top:13px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#C8102E;

}

/*==================================================
        TITULO DE REGIONES
==================================================*/

.regiones-title{

    text-align:center;

    margin-top:70px;

    margin-bottom:95px;

}

.regiones-title h3{

    font-family:'Anton',sans-serif;

    font-size:62px;

    letter-spacing:3px;

    color:#111;

    margin-bottom:28px;

}

.regiones-title p{

    width:min(950px,92%);

    margin:auto;

    font-size:21px;

    line-height:2;

    color:#555;

}



/* ==========================================================
   AÑADIR ESTE BLOQUE AL FINAL DE css/style.css
   Secciones: CULTURA · FÚTBOL · GASTRONOMÍA
   + arreglo icono tarjetas "Destinos Imperdibles"
   Temática: bandera de Inglaterra (blanco / rojo)
   ========================================================== */

/*------------------------------------------------
  0) FIX ícono en tarjetas de Destinos Imperdibles
------------------------------------------------*/

.icono-card{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#C8102E;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:16px;
    box-shadow:0 12px 25px rgba(200,16,46,.25);
    transition:.35s;
}

.card:hover .icono-card{
    transform:scale(1.1) rotate(-6deg);
    background:#111827;
}

/*------------------------------------------------
  1) FIX de visibilidad — secciones nuevas
  (anulan el opacity:0 genérico de .section para
  que no queden invisibles si no reciben .show)
------------------------------------------------*/

.section.cultura,
.section.futbol,
.section.gastronomia{
    opacity:1;
    transform:none;
    position:relative;
    overflow:hidden;
}

/*------------------------------------------------
  2) DECORACIÓN DE FONDO COMPARTIDA
------------------------------------------------*/

.cultura::before,
.futbol::before,
.gastronomia::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    top:-200px;
    right:-200px;
    background:rgba(200,16,46,.05);
    pointer-events:none;
}

.cultura::after,
.futbol::after,
.gastronomia::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    left:-160px;
    bottom:-160px;
    background:rgba(17,24,39,.04);
    pointer-events:none;
}

/*------------------------------------------------
  3) ENCABEZADO DE CONTENIDO (compartido)
------------------------------------------------*/

.content-header{
    text-align:center;
    max-width:900px;
    margin:0 auto 80px;
    position:relative;
    z-index:5;
}

.content-mini{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:11px 24px;
    background:#fff;
    border-radius:50px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    color:#555;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:28px;
    border-left:4px solid #C8102E;
}

.content-mini i{
    color:#C8102E;
    font-size:18px;
}

.content-header h2{
    font-family:'Anton',sans-serif;
    font-size:58px;
    letter-spacing:2px;
    color:#111;
    margin-bottom:22px;
}

.content-header p{
    font-size:19px;
    line-height:1.9;
    color:#555;
}

/*------------------------------------------------
  4) GRID DE TARJETAS (Cultura / Gastronomía)
------------------------------------------------*/

.content-grid{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.content-card{
    background:#fff;
    border-radius:22px;
    padding:42px 34px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    border-top:5px solid #C8102E;
    transition:.4s;

    opacity:0;
    transform:translateY(50px);
}

.content-card.active{
    opacity:1;
    transform:translateY(0);
}

.content-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.14);
}

.content-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    background:#C8102E;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:24px;
    transition:.4s;
}

.content-card:hover .content-icon{
    background:#111827;
    transform:rotate(360deg);
}

.content-card h4{
    font-family:'Anton',sans-serif;
    font-size:24px;
    letter-spacing:1px;
    color:#111;
    margin-bottom:16px;
}

.content-card p{
    color:#5b6470;
    font-size:16px;
    line-height:1.85;
}

/* Gastronomía: 4 columnas en desktop grande */

.food-grid{
    grid-template-columns:repeat(4,1fr);
}

/*------------------------------------------------
  4b) CULTURA — TARJETAS EN ZIGZAG CON PORTADA
------------------------------------------------*/

.culture-zigzag{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:42px;
    max-width:1180px;
    margin:0 auto;
}

.culture-zigzag::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:2px;
    background:repeating-linear-gradient(
        to bottom,
        rgba(200,16,46,.28) 0,
        rgba(200,16,46,.28) 10px,
        transparent 10px,
        transparent 20px
    );
    transform:translateX(-50%);
    z-index:-1;
}

.culture-card{
    position:relative;
    width:74%;
    opacity:0;
    transform:translateY(50px);
    transition:opacity .6s, transform .6s;
}

.culture-card.active{
    opacity:1;
    transform:translateY(0);
}

.culture-card.align-right{ margin-left:auto; }
.culture-card.align-left{ margin-right:auto; }

/* Convergen hacia el centro conforme se avanza */
.culture-card:nth-child(1){ width:76%; }
.culture-card:nth-child(2){ width:70%; }
.culture-card:nth-child(3){ width:64%; }
.culture-card:nth-child(4){ width:58%; }
.culture-card:nth-child(5){ width:53%; }
.culture-card:nth-child(6){ width:48%; }

.culture-cover{
    position:relative;
    height:260px;
    border-radius:24px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 25px 55px rgba(0,0,0,.16);
    transition:.45s;
}

.culture-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s;
}

.culture-cover-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(10,12,20,.88) 0%,
        rgba(10,12,20,.35) 45%,
        rgba(10,12,20,.05) 100%
    );
}

.culture-card:hover .culture-cover{
    transform:translateY(-8px);
    box-shadow:0 32px 65px rgba(0,0,0,.24);
}

.culture-card:hover .culture-cover img{
    transform:scale(1.08);
}

.culture-index{
    position:absolute;
    top:20px;
    left:22px;
    font-family:'Anton',sans-serif;
    font-size:15px;
    letter-spacing:2px;
    color:#fff;
    background:rgba(200,16,46,.9);
    padding:6px 14px;
    border-radius:50px;
    z-index:3;
}

.culture-cover-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:26px 28px;
    z-index:3;
}

.culture-cover-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff;
    color:#C8102E;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:14px;
    transition:.4s;
}

.culture-card:hover .culture-cover-icon{
    background:#C8102E;
    color:#fff;
    transform:rotate(360deg);
}

.culture-cover-content h4{
    font-family:'Anton',sans-serif;
    font-size:26px;
    letter-spacing:1px;
    color:#fff;
    margin-bottom:10px;
}

.culture-ver-mas{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    opacity:.85;
    transition:.35s;
}

.culture-ver-mas i{
    transition:.35s;
}

.culture-card:hover .culture-ver-mas{
    opacity:1;
}

.culture-card:hover .culture-ver-mas i{
    transform:translateX(6px);
}

/*------------------------------------------------
  4b) CULTURA — ESPACIO PARA IMAGEN ADICIONAL
  (foto extra dentro de la tarjeta, distinta a la
  portada. Coloca aquí tu imagen PNG con el nombre
  indicado en el HTML, ej: cultura-literatura-detalle.png)
------------------------------------------------*/

.culture-detail-photo{
    position:absolute;
    top:22px;
    right:24px;
    width:68px;
    height:68px;
    border-radius:18px;
    overflow:hidden;
    border:3px solid #fff;
    box-shadow:0 12px 28px rgba(0,0,0,.28);
    background:#e9e2d3;
    z-index:4;
    transition:.45s;
}

.culture-card:hover .culture-detail-photo{
    transform:scale(1.08) rotate(-2deg);
    box-shadow:0 16px 34px rgba(0,0,0,.34);
}

.culture-detail-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
}

.culture-detail-photo i{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#b9ac8f;
    z-index:1;
}

/*------------------------------------------------
  5) FÚTBOL — CARRUSEL "COVERFLOW" DEL ORIGEN
------------------------------------------------*/

.origin-carousel{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:18px;
    max-width:1300px;
    margin:0 auto 90px;
}

.origin-nav{
    flex-shrink:0;
    width:56px;
    height:56px;
    border-radius:50%;
    border:none;
    background:#fff;
    color:#C8102E;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    transition:.35s;
    z-index:6;
}

.origin-nav:hover{
    background:#C8102E;
    color:#fff;
    transform:scale(1.08);
}

.origin-track{
    position:relative;
    flex:1;
    display:flex;
    align-items:center;
    gap:36px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    padding:50px 34% 40px;
    -ms-overflow-style:none;
    scrollbar-width:none;
}

.origin-track::-webkit-scrollbar{
    display:none;
}

.origin-line{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:2px;
    background:repeating-linear-gradient(
        to right,
        rgba(200,16,46,.3) 0,
        rgba(200,16,46,.3) 10px,
        transparent 10px,
        transparent 20px
    );
    transform:translateY(-50%);
    z-index:0;
}

.origin-card{
    position:relative;
    flex-shrink:0;
    width:340px;
    background:#fff;
    border-radius:26px;
    padding:40px 36px;
    box-shadow:0 20px 45px rgba(0,0,0,.10);
    cursor:default;
    scroll-snap-align:center;
    transform-origin:center center;
    transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
    z-index:1;
}

.origin-card.is-focused{
    box-shadow:0 30px 65px rgba(200,16,46,.24);
    z-index:2;
}

.origin-order{
    position:absolute;
    top:-16px;
    left:34px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#111827;
    color:#fff;
    font-family:'Anton',sans-serif;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px rgba(0,0,0,.2);
    transition:.35s;
}

.origin-card.is-focused .origin-order{
    background:#C8102E;
}

.origin-year{
    display:inline-block;
    font-family:'Anton',sans-serif;
    font-size:15px;
    letter-spacing:2px;
    color:#fff;
    background:#111827;
    padding:8px 18px;
    border-radius:50px;
    margin-bottom:20px;
    width:fit-content;
    transition:.35s;
}

.origin-card.is-focused .origin-year{
    background:#C8102E;
}

.origin-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    border:2px solid #C8102E;
    color:#C8102E;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:16px;
    transition:.4s;
}

.origin-card.is-focused .origin-icon{
    background:#C8102E;
    color:#fff;
}

.origin-card h4{
    font-size:21px;
    font-weight:700;
    color:#111;
    margin-bottom:12px;
    line-height:1.3;
}

.origin-card p{
    color:#5b6470;
    font-size:14.5px;
    line-height:1.7;
}

/*------------------------------------------------
  5b) GASTRONOMÍA — PORTADAS GRANDES
------------------------------------------------*/

.food-grid-new{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.food-card{
    position:relative;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 20px 50px rgba(0,0,0,.09);
    transition:.4s;

    opacity:0;
    transform:translateY(50px);
}

.food-card.active{
    opacity:1;
    transform:translateY(0);
}

.food-card:hover{
    transform:translateY(-10px);
    box-shadow:0 32px 60px rgba(0,0,0,.16);
}

.food-cover{
    position:relative;
    height:230px;
    overflow:hidden;
}

.food-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s;
}

.food-card:hover .food-cover img{
    transform:scale(1.1);
}

.food-cover-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
}

.food-card-footer{
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px 20px;
    border-top:4px solid #C8102E;
}

.food-card-icon{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#C8102E;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    transition:.4s;
}

.food-card:hover .food-card-icon{
    background:#111827;
    transform:rotate(360deg);
}

.food-card-footer h4{
    font-family:'Anton',sans-serif;
    font-size:17px;
    letter-spacing:.5px;
    color:#111;
    margin-bottom:6px;
}

.food-card-footer span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:600;
    color:#C8102E;
    letter-spacing:.3px;
}

.food-card-footer span i{
    transition:.35s;
}

.food-card:hover .food-card-footer span i{
    transform:translateX(5px);
}

/*------------------------------------------------
  5c) GASTRONOMÍA — ESPACIO PARA IMAGEN ADICIONAL
  (foto extra dentro de la tarjeta, distinta a la
  portada. Coloca aquí tu imagen PNG con el nombre
  indicado en el HTML, ej: food-fishchips-detalle.png)
------------------------------------------------*/

.food-detail-photo{
    position:absolute;
    top:16px;
    right:16px;
    width:54px;
    height:54px;
    border-radius:14px;
    overflow:hidden;
    border:3px solid #fff;
    box-shadow:0 10px 22px rgba(0,0,0,.28);
    background:#f0ece0;
    z-index:4;
    transition:.4s;
}

.food-card:hover .food-detail-photo{
    transform:scale(1.1) rotate(3deg);
    box-shadow:0 14px 28px rgba(0,0,0,.32);
}

.food-detail-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
}

.food-detail-photo i{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:#c2b79c;
    z-index:1;
}

/*------------------------------------------------
  6) FÚTBOL HOY — bloque texto + stats
------------------------------------------------*/

.football-today{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:center;
    background:#111827;
    border-radius:28px;
    padding:60px;
    margin-bottom:55px;
    box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.football-today-text h3{
    font-family:'Anton',sans-serif;
    font-size:36px;
    color:#fff;
    letter-spacing:1px;
    margin-bottom:20px;
}

.football-today-text p{
    color:#c9ccd3;
    font-size:17px;
    line-height:1.9;
}

.football-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.football-stat{
    text-align:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:26px 14px;
    transition:.4s;

    opacity:0;
    transform:translateY(30px);
}

.football-stat.active{
    opacity:1;
    transform:translateY(0);
}

.football-stat:hover{
    background:#C8102E;
    border-color:#C8102E;
    transform:translateY(-6px);
}

.football-stat i{
    font-size:26px;
    color:#C8102E;
    margin-bottom:14px;
    display:block;
    transition:.35s;
}

.football-stat:hover i{
    color:#fff;
}

.football-stat h4{
    font-family:'Anton',sans-serif;
    font-size:26px;
    color:#fff;
    letter-spacing:1px;
    margin-bottom:6px;
}

.football-stat span{
    color:#c9ccd3;
    font-size:13px;
    letter-spacing:.5px;
}

/*------------------------------------------------
  7) BOTÓN CTA — ir al Mundial 2026
------------------------------------------------*/

.football-cta{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;

    width:max-content;
    margin:0 auto;

    padding:22px 46px;
    border-radius:60px;

    background:#C8102E;
    color:#fff;
    text-decoration:none;

    font-size:19px;
    font-weight:700;
    letter-spacing:.5px;

    box-shadow:0 20px 45px rgba(200,16,46,.30);
    transition:.4s;
}

.football-cta i{
    transition:.35s;
}

.football-cta:hover{
    background:#111827;
    transform:translateY(-6px);
    box-shadow:0 28px 55px rgba(0,0,0,.28);
}

.football-cta:hover i:last-child{
    transform:translateX(8px);
}

/*------------------------------------------------
  8) RESPONSIVE — TABLET
------------------------------------------------*/

@media(max-width:1100px){

    .content-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .food-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .food-grid-new{
        grid-template-columns:repeat(2,1fr);
    }

    .culture-card,
    .culture-card:nth-child(1),
    .culture-card:nth-child(2),
    .culture-card:nth-child(3),
    .culture-card:nth-child(4),
    .culture-card:nth-child(5),
    .culture-card:nth-child(6){
        width:88%;
    }

    .origin-carousel{
        max-width:100%;
    }

    .origin-card{
        width:300px;
        padding:34px 30px;
    }

    .origin-track{
        padding:50px 20% 40px;
        gap:26px;
    }

    .football-today{
        grid-template-columns:1fr;
        padding:45px;
        text-align:center;
    }

    .football-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .content-header h2{
        font-size:46px;
    }
}

/*------------------------------------------------
  9) RESPONSIVE — MÓVIL
------------------------------------------------*/

@media(max-width:640px){

    .content-grid,
    .food-grid,
    .origin-grid{
        grid-template-columns:1fr;
    }

    .food-grid-new{
        grid-template-columns:1fr;
    }

    .culture-zigzag::before{
        left:24px;
    }

    .culture-card,
    .culture-card.align-right,
    .culture-card.align-left,
    .culture-card:nth-child(1),
    .culture-card:nth-child(2),
    .culture-card:nth-child(3),
    .culture-card:nth-child(4),
    .culture-card:nth-child(5),
    .culture-card:nth-child(6){
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    .culture-cover{
        height:210px;
    }

    .origin-carousel{
        gap:10px;
    }

    .origin-nav{
        width:44px;
        height:44px;
        font-size:15px;
    }

    .origin-track{
        padding:44px 12% 36px;
        gap:18px;
    }

    .origin-card{
        width:250px;
        padding:28px 22px;
    }

    .origin-card h4{
        font-size:18px;
    }

    .football-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .content-header h2{
        font-size:36px;
    }

    .content-header p{
        font-size:16px;
    }

    .content-card,
    .origin-card{
        padding:32px 24px;
    }

    .football-today{
        padding:32px 24px;
    }

    .football-cta{
        width:100%;
        text-align:center;
        padding:20px 24px;
        font-size:16px;
    }
}

/*==================================================
   PIE DE PÁGINA — FOOTER PROFESIONAL
==================================================*/

.site-footer{
    position:relative;
    background:#0c0f16;
    color:#c9ccd3;
    overflow:hidden;
    padding-top:80px;
}

.footer-glow{
    position:absolute;
    top:-180px;
    left:50%;
    transform:translateX(-50%);
    width:700px;
    height:700px;
    background:radial-gradient(circle, rgba(200,16,46,.18) 0%, transparent 70%);
    pointer-events:none;
}

.footer-top{
    position:relative;
    z-index:2;
    max-width:1240px;
    margin:0 auto;
    padding:0 40px 60px;
    display:grid;
    grid-template-columns:1.4fr .8fr .8fr 1.4fr;
    gap:50px;
}

.footer-brand .footer-logo{
    font-family:'Anton',sans-serif;
    font-size:30px;
    letter-spacing:3px;
    color:#fff;
    margin-bottom:18px;
}

.footer-brand .footer-logo::before{
    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    background:#C8102E;
    border-radius:50%;
    margin-right:10px;
}

.footer-brand p{
    font-size:15px;
    line-height:1.85;
    color:#9aa0ad;
    max-width:320px;
    margin-bottom:26px;
}

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.35s;
}

.footer-social a:hover{
    background:#C8102E;
    border-color:#C8102E;
    transform:translateY(-4px);
}

.footer-links h4{
    font-family:'Anton',sans-serif;
    font-size:16px;
    letter-spacing:1.5px;
    color:#fff;
    margin-bottom:22px;
}

.footer-links ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.footer-links a{
    color:#9aa0ad;
    text-decoration:none;
    font-size:15px;
    transition:.3s;
}

.footer-links a:hover{
    color:#fff;
    padding-left:6px;
}

.footer-message{
    position:relative;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-left:4px solid #C8102E;
    border-radius:18px;
    padding:30px 32px;
}

.footer-message i.fa-quote-left{
    color:#C8102E;
    font-size:22px;
    margin-bottom:14px;
    display:block;
}

.footer-message p{
    font-size:15.5px;
    line-height:1.85;
    color:#dfe1e6;
    font-style:italic;
    margin-bottom:14px;
}

.footer-message span{
    font-size:13px;
    color:#9aa0ad;
    letter-spacing:.5px;
}

.footer-bottom{
    position:relative;
    z-index:2;
    border-top:1px solid rgba(255,255,255,.08);
    padding:26px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1240px;
    margin:0 auto;
}

.footer-bottom p{
    font-size:13.5px;
    color:#8b909c;
    margin:0;
}

.footer-bottom p i{
    color:#C8102E;
}

.footer-flag{
    display:flex;
    gap:6px;
}

.footer-flag span{
    width:26px;
    height:8px;
    border-radius:2px;
    background:#163A70;
}

.footer-flag span:nth-child(2){
    background:#fff;
}

.footer-flag span:nth-child(3){
    background:#C8102E;
}

@media(max-width:1000px){

    .footer-top{
        grid-template-columns:1fr 1fr;
    }

    .footer-message{
        grid-column:1 / -1;
    }
}

@media(max-width:640px){

    .footer-top{
        grid-template-columns:1fr;
        padding:0 24px 50px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:14px;
        text-align:center;
        padding:24px 24px;
    }
}

/*==========================================================
   RESPONSIVE FINAL — AJUSTES GENERALES PARA MÓVIL
   (Buscador flotante, modal de ayuda, tarjetas apiladas
   de fútbol y remates generales de toda la página)
==========================================================*/

@media(max-width:992px){

    .floating-search{
        left:20px;
        bottom:20px;
    }

    .info-modal-box{
        padding:38px 30px;
    }

    .info-modal-box h3{
        font-size:26px;
    }

}

@media(max-width:768px){

    .origin-card{
        width:270px;
        padding:28px 22px;
    }

    .origin-card h4{
        font-size:19px;
    }

    .origin-card p{
        font-size:14px;
    }

}

@media(max-width:600px){

    #searchBtn{
        width:52px;
        height:52px;
        font-size:20px;
    }

    .search-tooltip{
        display:none;
    }

    .info-modal{
        padding:14px;
    }

    .info-modal-box{
        padding:32px 22px;
        border-radius:22px;
    }

    .info-modal-box h3{
        font-size:22px;
    }

    .info-modal-lead{
        font-size:14.5px;
    }

    .info-modal-list li{
        font-size:14px;
    }

    .origin-card{
        width:230px;
        padding:26px 20px;
        border-radius:20px;
    }

    .origin-track{
        padding:40px 8% 32px;
    }

}

@media(max-width:480px){

    .section{
        padding:90px 6%;
    }

    .section h2{
        font-size:34px;
    }

    .section p{
        font-size:16px;
    }

    .modal-box{
        border-radius:22px;
        max-height:92vh;
    }

    .modal-info{
        padding:22px !important;
    }

    .modal-info h2{
        font-size:32px !important;
    }

    .cerrar-modal{
        width:42px;
        height:42px;
        right:14px;
        top:14px;
        font-size:18px;
    }

    .origin-nav{
        display:none;
    }

}