/* ==========================================================
   VARIABLES
========================================================== */

:root {
    --color-crema: #f7f1e7;
    --color-crema-claro: #fffaf2;

    --color-rojo: #b94b45;
    --color-rojo-oscuro: #913b36;

    --color-texto: #283831;
    --color-texto-suave: #6e746f;

    --color-azul-actividad: #357d91;
    --color-naranja-comida: #d7833b;
    --color-cafe: #76533e;

    --color-verde: #3e6350;

    --blanco: #ffffff;

    --sombra-suave: 0 8px 30px rgba(32, 42, 37, 0.08);
    --sombra-media: 0 16px 45px rgba(32, 42, 37, 0.12);

    --radio-grande: 32px;
    --radio-medio: 22px;
}


/* ==========================================================
   RESET
========================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background-color: var(--color-crema);
    color: var(--color-texto);

    line-height: 1.45;

    -webkit-font-smoothing: antialiased;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    -webkit-tap-highlight-color: transparent;
}


.oculto {
    display: none !important;
}


/* ==========================================================
   PANTALLA PRINCIPAL
========================================================== */

.pantalla-menu {
    min-height: 100dvh;
    background: var(--color-crema);
}


/* HERO */

.hero-menu {
    position: relative;

    width: 100%;
    height: 48dvh;
    min-height: 360px;
    max-height: 600px;

    overflow: hidden;
}


.hero-menu img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(20, 30, 25, 0.08) 0%,
            rgba(20, 30, 25, 0.02) 40%,
            rgba(20, 30, 25, 0.52) 100%
        );
}


.hero-titulo {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 35px;

    color: white;

    text-align: left;
}


.hero-kicker {
    display: block;

    margin-bottom: 7px;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 3px;
}


.hero-titulo h1 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.9rem, 11vw, 5rem);
    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -2px;
}


.hero-titulo p {
    margin-top: 12px;

    font-size: 0.88rem;
    font-weight: 600;

    opacity: 0.95;
}


/* PANEL PRINCIPAL */

.panel-menu {
    position: relative;

    z-index: 10;

    margin-top: -22px;

    padding:
        34px
        20px
        calc(35px + env(safe-area-inset-bottom));

    background: var(--color-crema);

    border-radius: 28px 28px 0 0;
}


.encabezado-menu {
    width: 100%;
    max-width: 640px;

    margin: 0 auto 25px;
}


.mini-tag {
    display: inline-block;

    margin-bottom: 7px;

    color: var(--color-rojo);

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 2px;
}


.encabezado-menu h2 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 2rem;
    font-weight: 500;
}


.encabezado-menu p {
    margin-top: 6px;

    color: var(--color-texto-suave);

    font-size: 0.9rem;
}


/* LISTA DE DÍAS */

.lista-dias {
    width: 100%;
    max-width: 640px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 12px;
}


.caja-dia-menu {
    width: 100%;

    padding: 17px 18px;

    display: grid;

    grid-template-columns: 42px 1fr 28px;
    align-items: center;

    gap: 13px;

    border: 0;

    border-radius: 20px;

    background: white;

    color: var(--color-texto);

    text-align: left;

    box-shadow: var(--sombra-suave);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.caja-dia-menu:active {
    transform: scale(0.985);
}


.numero-menu {
    color: var(--color-rojo);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.15rem;
    font-weight: 700;
}


.texto-menu {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.texto-menu strong {
    font-size: 0.82rem;
    font-weight: 900;

    letter-spacing: 0.2px;
}


.texto-menu small {
    color: var(--color-texto-suave);

    font-size: 0.76rem;
}


.flecha-menu {
    color: var(--color-rojo);

    font-size: 1.3rem;
    font-weight: 700;

    text-align: center;
}


/* ==========================================================
   PANTALLA DE DETALLE
========================================================== */

.pantalla-itinerario {
    min-height: 100dvh;

    padding-bottom: calc(25px + env(safe-area-inset-bottom));

    background: var(--color-crema);
}


/* BARRA SUPERIOR */

.barra-superior {
    position: sticky;

    top: 0;
    z-index: 500;

    min-height: calc(58px + env(safe-area-inset-top));

    padding:
        calc(10px + env(safe-area-inset-top))
        16px
        10px;

    display: grid;

    grid-template-columns: 40px 1fr 40px;
    align-items: center;

    background: rgba(247, 241, 231, 0.86);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(50, 60, 55, 0.07);
}


.barra-superior > span {
    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 2px;

    text-align: center;
}


.btn-cerrar {
    width: 38px;
    height: 38px;

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

    border: none;

    border-radius: 50%;

    background: white;

    color: var(--color-texto);

    font-size: 1.25rem;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}


.espaciador-barra {
    width: 38px;
}


/* CONTENEDOR */

.contenedor-tarjetas {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding: 12px 14px 30px;
}


.tarjeta-dia {
    overflow: hidden;

    background: white;

    border-radius: var(--radio-grande);

    box-shadow: var(--sombra-media);
}


/* ==========================================================
   CABECERA DEL DÍA
========================================================== */

.cabecera-dia {
    position: relative;

    height: 310px;

    overflow: hidden;
}


.img-dia {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.degradado-dia {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 35%,
            rgba(13, 22, 18, 0.72) 100%
        );
}


.titulo-sobre-imagen {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 23px;

    color: white;
}


.titulo-sobre-imagen span {
    display: block;

    margin-bottom: 5px;

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 2.5px;
}


.titulo-sobre-imagen h2 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 2.25rem;
    font-weight: 500;

    line-height: 1;
}


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

.contenido-dia {
    padding: 28px 20px 24px;
}


.intro-dia {
    margin-bottom: 10px;
}


.dia-tag {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--color-rojo);

    font-size: 0.68rem;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1.4px;
}


.intro-dia h3 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.8rem;
    font-weight: 500;

    line-height: 1.05;

    margin-bottom: 12px;
}


.resumen-dia {
    color: var(--color-texto-suave);

    font-size: 0.92rem;

    line-height: 1.6;
}


/* ==========================================================
   MAPA DEL DÍA
========================================================== */

.btn-mapa-dia {
    width: 100%;

    margin-top: 22px;
    padding: 16px 17px;

    display: grid;

    grid-template-columns: 36px 1fr 20px;
    align-items: center;

    gap: 12px;

    color: white;

    background: var(--color-verde);

    border-radius: 20px;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(62, 99, 80, 0.22);
}


.btn-mapa-dia > span:first-child {
    font-size: 1.4rem;
}


.btn-mapa-dia > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}


.btn-mapa-dia strong {
    font-size: 0.78rem;

    letter-spacing: 1px;
}


.btn-mapa-dia small {
    margin-top: 2px;

    font-size: 0.69rem;

    opacity: 0.8;
}


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

.seccion-itinerario {
    margin-top: 22px;

    padding: 20px;

    background: var(--color-crema-claro);

    border-radius: var(--radio-medio);

    border-left: 5px solid #ddd;
}


.seccion-logistica {
    border-left-color: var(--color-rojo);
}


.seccion-actividad {
    border-left-color: var(--color-azul-actividad);
}


.seccion-gastronomia {
    border-left-color: var(--color-naranja-comida);
}


.seccion-cafes {
    border-left-color: var(--color-cafe);
}


.titulo-interno {
    margin-bottom: 17px;

    color: #9d9e98;

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.sub-tarjeta-limpia,
.item-recomendacion {
    position: relative;

    padding-bottom: 18px;
    margin-bottom: 18px;

    border-bottom: 1px solid rgba(50, 60, 55, 0.08);
}


.sub-tarjeta-limpia:last-child,
.item-recomendacion:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: none;
}


.sub-tarjeta-limpia h4,
.item-recomendacion h4 {
    margin-bottom: 7px;

    color: var(--color-texto);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.35;
}


.sub-tarjeta-limpia p,
.item-recomendacion p {
    margin-top: 3px;

    color: var(--color-texto-suave);

    font-size: 0.84rem;

    line-height: 1.55;
}


.sub-tarjeta-limpia p strong {
    color: #4a514d;
}


.nota {
    margin-top: 7px !important;

    color: var(--color-rojo) !important;

    font-weight: 700;
}


/* OPCIONAL */

.tag-opcional {
    display: inline-block;

    margin-bottom: 8px;
    padding: 5px 9px;

    border-radius: 50px;

    background: rgba(185, 75, 69, 0.11);

    color: var(--color-rojo);

    font-size: 0.59rem;
    font-weight: 900;

    letter-spacing: 1.1px;
}


.tag-opcional-azul {
    background: rgba(53, 125, 145, 0.11);

    color: var(--color-azul-actividad);
}


/* ==========================================================
   ENLACES
========================================================== */

.grupo-enlaces {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 15px;
}


.enlace-accion {
    display: inline-block;

    margin-top: 10px;

    font-size: 0.72rem;
    font-weight: 900;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 0.3px;
}


.link-logistica {
    color: var(--color-rojo);
}


.link-actividad {
    color: var(--color-azul-actividad);
}


.link-gastronomia {
    color: var(--color-naranja-comida);
}


.link-cafes {
    color: var(--color-cafe);
}


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

.footer-dia {
    margin-top: 30px;
}


.btn-volver-footer {
    width: 100%;

    padding: 15px 20px;

    border: 2px solid var(--color-texto);

    border-radius: 50px;

    background: transparent;

    color: var(--color-texto);

    font-size: 0.75rem;
    font-weight: 900;

    letter-spacing: 0.7px;
}


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

@media (min-width: 700px) {

    .hero-menu {
        height: 58vh;
    }


    .hero-titulo {
        left: max(40px, calc((100% - 760px) / 2));
        right: 40px;
        bottom: 55px;
    }


    .panel-menu {
        padding-top: 45px;
    }


    .contenedor-tarjetas {
        padding-top: 25px;
    }


    .cabecera-dia {
        height: 430px;
    }


    .contenido-dia {
        padding: 38px 42px 35px;
    }


    .seccion-itinerario {
        padding: 25px 26px;
    }

}


/* ==========================================================
   PANTALLAS PEQUEÑAS
========================================================== */

@media (max-width: 380px) {

    .hero-menu {
        min-height: 330px;
    }


    .hero-titulo h1 {
        font-size: 2.7rem;
    }


    .panel-menu {
        padding-left: 14px;
        padding-right: 14px;
    }


    .contenedor-tarjetas {
        padding-left: 8px;
        padding-right: 8px;
    }


    .contenido-dia {
        padding-left: 17px;
        padding-right: 17px;
    }


    .seccion-itinerario {
        padding: 17px;
    }

}