/* ==========================================================================
   PORTADA — Bloque "Regala una ruta" (vales regalo de rutas)
   --------------------------------------------------------------------------
   Cargado únicamente en la portada:
     resources/views/frontend/paginas/portada/index.blade.php  (@push('css'))

   Piezas:
     1) .regalo-cinta        cinta dorada fija (sticky) arriba del todo
     2) .regalo-portada      bloque grande con el CTA y el mock del vale
     3) .nav-regalo          enlace "Regala una ruta" del menú (cabecera)

   Colores: los mismos que la marca (main.css) y que el vale PDF
   (#EFE3C6 / #FFFCF6 / #D8B45A) para que web y papel se vean igual.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0) Tipografía del vale (la misma que incrusta el PDF del vale regalo)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Marcellus';
    src: url('/fonts/Marcellus-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   1) CINTA FIJA SUPERIOR
   ========================================================================== */

.regalo-cinta {
    position: sticky;
    top: 0;
    /* CAPA MÁS BAJA DE LA PÁGINA (z-index negativo).
       La cinta se ve al cargar, porque es lo primero del flujo y nada la
       tapa. En cuanto haces scroll, TODO el contenido (logo, teléfonos y el
       vídeo/foto de fondo del hero) pasa POR ENCIMA y la va tapando hasta
       hacerla desaparecer. Al volver arriba vuelve a verse.
       No subir este valor: si la cinta queda por encima del hero pero por
       debajo del logo (como estaba antes, 880 vs 901/902) el efecto es un
       mejunje raro. */
    z-index: -1;
    overflow: hidden;
    color: #2b2418;
    background: linear-gradient(90deg, #b8873c 0%, #dbac6d 22%, #fccc7c 50%, #dbac6d 78%, #b8873c 100%);
    background-size: 220% 100%;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}

.regalo-cinta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.regalo-cinta-texto {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.3;
    margin: 0;
}

.regalo-cinta-texto .fa {
    color: #8a5a17;
    margin-right: 7px;
}

.regalo-cinta-badge {
    font-size: .82rem;
    font-weight: 600;
    opacity: .82;
    white-space: nowrap;
}

.regalo-cinta-badge .fa {
    margin-right: 6px;
}

.regalo-cinta-boton {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 30px;
    background: #1b1710;
    color: #fccc7c;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.regalo-cinta-boton:hover,
.regalo-cinta-boton:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
    text-decoration: none;
}

.regalo-cinta-boton .fa {
    margin-left: 5px;
}

/* Brillo que recorre la cinta: llama la atención sin ser molesto */
.regalo-cinta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    pointer-events: none;
    animation: regalo-cinta-brillo 5.5s ease-in-out infinite;
}

@keyframes regalo-cinta-brillo {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .regalo-cinta::after { animation: none; display: none; }
}


/* ==========================================================================
   2) BLOQUE GRANDE "REGALA UNA RUTA"
   ========================================================================== */

/* Las tiles de rutas (BUGGIES / 4x4) llevaban class="mb-6", que no existe en
   Bootstrap 4 (el máximo es mb-5): quedaban sin margen inferior y el bloque de
   regalo arrancaba justo en el borde de las fotos, como si las recortase.
   Aquí se les devuelve un aire claro para que nada quede "machacado". */
.portada-tiles {
    margin-bottom: 70px;
}

.regalo-portada {
    position: relative;
    overflow: hidden;
    padding: 72px 0 80px;
    border-top: 3px solid #dbac6d;
    color: #f4efe6;
    background:
        radial-gradient(900px 420px at 8% -10%, rgba(219, 172, 109, .26), rgba(219, 172, 109, 0) 62%),
        radial-gradient(700px 400px at 95% 108%, rgba(252, 204, 124, .17), rgba(252, 204, 124, 0) 60%),
        linear-gradient(160deg, #191510 0%, #0f0d0b 55%, #131009 100%);
}

/* Textura de puntos dorados muy sutil */
.regalo-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(252, 204, 124, .18) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .35;
    pointer-events: none;
}

.regalo-portada > .container {
    position: relative;
    z-index: 1;
}

/* --- Antetítulo --- */
.regalo-portada-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    margin-bottom: 22px;
    border: 1px solid rgba(252, 204, 124, .45);
    border-radius: 30px;
    color: #fccc7c;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.regalo-portada-eyebrow .fa {
    font-size: .95rem;
}

/* --- Título --- */
.regalo-portada-titulo {
    font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
    font-size: 3rem;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 400;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 18px;
}

/* --- Texto --- */
.regalo-portada-texto {
    max-width: 640px;
    margin: 0;
    color: #cfc6b8;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* --- Sellos de confianza --- */
.regalo-portada-sellos {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.regalo-portada-sellos li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border: 1px solid rgba(252, 204, 124, .24);
    border-radius: 30px;
    background: rgba(252, 204, 124, .07);
    color: #e7dfd2;
    font-size: .87rem;
    font-weight: 600;
}

.regalo-portada-sellos i {
    color: #fccc7c;
    font-size: .95rem;
}

/* --- Botones --- */
.regalo-portada-botones {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.regalo-portada-botones .btn {
    border-radius: 40px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.regalo-portada-botones .btn i {
    margin-right: 8px;
}

.btn-regalo-comprar {
    background: linear-gradient(135deg, #dbac6d 0%, #fccc7c 100%);
    border: 0;
    color: #241d10;
    padding: 15px 34px;
    font-size: .98rem;
    box-shadow: 0 12px 30px rgba(219, 172, 109, .32);
}

.btn-regalo-comprar:hover,
.btn-regalo-comprar:focus {
    color: #241d10;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(219, 172, 109, .45);
}

.btn-regalo-canjear {
    background: transparent;
    border: 1px solid rgba(252, 204, 124, .55);
    color: #fccc7c;
    padding: 14px 30px;
    font-size: .98rem;
}

.btn-regalo-canjear:hover,
.btn-regalo-canjear:focus {
    background: rgba(252, 204, 124, .12);
    color: #fff;
    border-color: #fccc7c;
    transform: translateY(-2px);
}

/* --- Mock del vale (el mismo diseño que el PDF que recibe el cliente) --- */
.regalo-portada-vale {
    position: relative;
    max-width: 372px;
    margin: 0 auto;
    transform: rotate(-3.5deg);
    border-radius: 18px;
    overflow: hidden;
    background: #FFFCF6;
    transition: transform .35s ease;
}

.regalo-portada-vale:hover {
    transform: rotate(-1.5deg) translateY(-6px);
}

.regalo-portada-vale-foto {
    display: block;
    width: 100%;
    height: 186px;
    object-fit: cover;
}

.regalo-portada-vale-cuerpo {
    padding: 24px 26px 26px;
    text-align: center;
}

.regalo-portada-vale-icono {
    display: block;
    width: 48px;
    height: 48px;
    margin: -48px auto 14px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.regalo-portada-vale-titulo {
    font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 400;
    color: #2b2418;
    margin: 0 0 6px;
}

.regalo-portada-vale-texto {
    color: #6d6152;
    font-size: .9rem;
    margin: 0 0 16px;
}

.regalo-portada-vale-codigo {
    display: inline-block;
    padding: 9px 16px;
    border: 1px dashed #D8B45A;
    border-radius: 8px;
    background: rgba(216, 180, 90, .1);
    color: #8a6a20;
    font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
    font-size: .95rem;
    letter-spacing: 2px;
}

.regalo-portada-vale-marca {
    margin-top: 16px;
    color: #a3937c;
    font-size: .76rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


/* ==========================================================================
   3) ENLACE "REGALA UNA RUTA" DEL MENÚ
   ========================================================================== */

.top-nav .sf-menu > li.nav-regalo > a {
    color: #fccc7c;
    font-weight: 700;
}

.top-nav .sf-menu > li.nav-regalo > a:hover,
.top-nav .sf-menu > li.nav-regalo > a:focus {
    color: #fff;
}

.nav-regalo > a .fa {
    margin-right: 6px;
}


/* ==========================================================================
   4) RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .regalo-portada-texto { max-width: 100%; }
}

@media (max-width: 991.98px) {
    /* Las tiles pasan a apilarse (col-lg-6): necesitan aire entre ellas */
    .portada-tiles [class*="col-"] + [class*="col-"] { margin-top: 24px; }
    .portada-tiles { margin-bottom: 48px; }
    .regalo-portada { padding: 52px 0 60px; }
    .regalo-portada-vale { transform: rotate(-2deg); max-width: 330px; margin-top: 40px; }
    .regalo-portada-vale:hover { transform: rotate(0deg) translateY(-4px); }
}

@media (max-width: 767.98px) {
    .portada-tiles { margin-bottom: 40px; }
    .regalo-cinta-inner { padding: 7px 10px; gap: 6px 10px; }
    .regalo-cinta-texto { font-size: .78rem; text-align: center; }
    .regalo-cinta-texto .fa { margin-right: 5px; }
    .regalo-cinta-boton { padding: 6px 13px; font-size: .7rem; letter-spacing: .6px; }
    .regalo-portada { padding: 44px 0 52px; }
    .regalo-portada-eyebrow { font-size: .72rem; letter-spacing: 1.1px; padding: 6px 14px; }
    .regalo-portada-sellos { gap: 10px 18px; }
    .regalo-portada-sellos li { font-size: .88rem; }
}

@media (max-width: 575.98px) {
    .regalo-portada-botones .btn { width: 100%; }
    .regalo-portada-botones .btn i { margin-right: 6px; }
    .regalo-portada-vale { max-width: 300px; }
    .regalo-portada-vale-foto { height: 160px; }
}