/* ===================================================================
   PORTAL DE TURISMO MUNICIPAL
   Archivo:
      css/turismo/styles.css

   Tema:
      Progress Child

   Arquitectura
   -------------------------------------------------------------------
   • CSS Shield (#ttm-portal)
   • PC First
   • CSS Grid
   • Flexbox
   • Variables CSS
   • Optimizado para rendimiento
   • Compatible con futuras ampliaciones

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


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

#ttm-portal{

    --ttm-primary:#8E1537;

    --ttm-primary-dark:#6E102A;

    --ttm-secondary:#ffffff;

    --ttm-text:#222;

    --ttm-text-light:#ffffff;

    --ttm-overlay:rgba(0,0,0,.45);

    --ttm-radius:18px;

    --ttm-shadow:
        0 20px 40px rgba(0,0,0,.18);

    --ttm-transition:.35s ease;

    --ttm-container:1400px;

    --ttm-gap:26px;

    --ttm-font:
        "Inter",
        system-ui,
        sans-serif;

}



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

#ttm-portal *,
#ttm-portal *::before,
#ttm-portal *::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



#ttm-portal{

    font-family:var(--ttm-font);

    color:var(--ttm-text);

    background:#fff;

    overflow:hidden;

}



#ttm-portal img{

    display:block;

    width:100%;

    height:auto;

}



#ttm-portal a{

    color:inherit;

    text-decoration:none;

}



#ttm-portal ul{

    list-style:none;

}



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

#ttm-portal .ttm-container{

    width:min(
        100% - 60px,
        var(--ttm-container)
    );

    margin-inline:auto;

}



/*===================================================================
=
= HERO
=
===================================================================*/

#ttm-portal .ttm-hero{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    overflow:hidden;

}



#ttm-portal .ttm-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}



#ttm-portal .ttm-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.70) 0%,

        rgba(0,0,0,.45) 45%,

        rgba(0,0,0,.18) 100%

    );

    z-index:2;

}



#ttm-portal .ttm-hero .ttm-container{

    position:relative;

    z-index:3;

}



#ttm-portal .ttm-hero-content{

    max-width:720px;

    padding:80px 0;

}



/*===================================================================
=
= PRETITLE
=
===================================================================*/

#ttm-portal .ttm-pretitle{

    display:inline-block;

    margin-bottom:18px;

    color:#fff;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.95rem;

    font-weight:700;

}

/*===================================================================
=
= HERO - TITULOS
=
===================================================================*/

#ttm-portal .ttm-hero-content h1{

    color:var(--ttm-text-light);

    font-size:clamp(3rem,5vw,5.6rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:24px;

    text-wrap:balance;

    text-shadow:

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

}



#ttm-portal .ttm-hero-content p{

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

    font-size:1.22rem;

    line-height:1.8;

    max-width:650px;

    margin-bottom:42px;

}



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

#ttm-portal .ttm-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 38px;

    background:var(--ttm-primary);

    color:#fff;

    border-radius:999px;

    font-size:1rem;

    font-weight:700;

    transition:all var(--ttm-transition);

    box-shadow:

        0 15px 35px rgba(142,21,55,.30);

}



#ttm-portal .ttm-button:hover{

    background:var(--ttm-primary-dark);

    transform:translateY(-4px);

    box-shadow:

        0 22px 42px rgba(0,0,0,.25);

}



#ttm-portal .ttm-button:active{

    transform:translateY(-1px);

}



/*===================================================================
=
= HERO DECORACIÓN
=
===================================================================*/

#ttm-portal .ttm-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-1px;

    height:120px;

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,0),

            #ffffff

        );

    z-index:4;

    pointer-events:none;

}



/*===================================================================
=
= MAIN
=
===================================================================*/

#ttm-portal main{

    position:relative;

    margin-top:-50px;

    z-index:20;

}



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

#ttm-portal .ttm-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:var(--ttm-gap);

    padding-bottom:90px;

}



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

#ttm-portal .ttm-pretitle,

#ttm-portal .ttm-hero-content h1,

#ttm-portal .ttm-hero-content p,

#ttm-portal .ttm-button{

    opacity:0;

    transform:translateY(35px);

    animation:

        ttmFadeUp

        .8s

        ease

        forwards;

}



#ttm-portal .ttm-pretitle{

    animation-delay:.10s;

}



#ttm-portal .ttm-hero-content h1{

    animation-delay:.25s;

}



#ttm-portal .ttm-hero-content p{

    animation-delay:.45s;

}



#ttm-portal .ttm-button{

    animation-delay:.65s;

}



/*===================================================================
=
= KEYFRAMES
=
===================================================================*/

@keyframes ttmFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*===================================================================
=
= PERFORMANCE
=
===================================================================*/

#ttm-portal .ttm-hero-image{

    will-change:transform;

    backface-visibility:hidden;

    transform:translateZ(0);

}



#ttm-portal .ttm-button{

    will-change:transform;

}



#ttm-portal .ttm-hero-content{

    contain:layout paint;

}

/*===================================================================
=
= CARD
=
===================================================================*/

#ttm-portal .ttm-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--ttm-radius);

    background:#ffffff;

    box-shadow:var(--ttm-shadow);

    transition:all var(--ttm-transition);

    isolation:isolate;

}



#ttm-portal .ttm-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 60px rgba(0,0,0,.22);

}



#ttm-portal .ttm-card a{

    display:block;

    position:relative;

    height:100%;

}

#ttm-portal .ttm-card-overlay {
    pointer-events: none;
}


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

#ttm-portal .ttm-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:

        transform .7s ease,

        filter .7s ease;

}



#ttm-portal .ttm-card:hover img{

    transform:scale(1.08);

}



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

#ttm-portal .ttm-card-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.82),

            rgba(0,0,0,.15),

            rgba(0,0,0,0)

        );

    z-index:2;

}



/*===================================================================
=
= ICONO
=
===================================================================*/

#ttm-portal .ttm-icon{

    position:absolute;

    top:24px;

    left:24px;

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:1.55rem;

    z-index:5;

    transition:all var(--ttm-transition);

}



#ttm-portal .ttm-card:hover .ttm-icon{

    transform:scale(1.12);

    background:var(--ttm-primary);

}



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

#ttm-portal .ttm-card-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    z-index:5;

}



#ttm-portal .ttm-card-content h2{

    color:#ffffff;

    font-size:1.65rem;

    font-weight:700;

    margin-bottom:12px;

    line-height:1.2;

    text-shadow:

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

}



#ttm-portal .ttm-card-content p{

    color:

        rgba(255,255,255,.90);

    font-size:.98rem;

    line-height:1.6;

}



/*===================================================================
=
= FLECHA
=
===================================================================*/

#ttm-portal .ttm-arrow{

    position:absolute;

    right:24px;

    top:24px;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

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

    color:#fff;

    font-size:1.25rem;

    z-index:5;

    opacity:0;

    transform:

        translateX(15px);

    transition:all .35s ease;

}



#ttm-portal .ttm-card:hover .ttm-arrow{

    opacity:1;

    transform:translateX(0);

}



/*===================================================================
=
= BORDE ANIMADO
=
===================================================================*/

#ttm-portal .ttm-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:2px solid transparent;

    transition:all .35s ease;

    z-index:6;

    pointer-events:none;

}



#ttm-portal .ttm-card:hover::before{

    border-color:

        rgba(255,255,255,.35);

}



/*===================================================================
=
= ANIMACIÓN DE ENTRADA
=
===================================================================*/

#ttm-portal .ttm-card{

    opacity:0;

    transform:

        translateY(45px);

}



#ttm-portal .ttm-card.ttm-visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .65s ease,

        transform .65s ease;

}



/*===================================================================
=
= RENDER
=
===================================================================*/

#ttm-portal .ttm-card,

#ttm-portal .ttm-card img,

#ttm-portal .ttm-icon{

    will-change:

        transform;

}

/*===================================================================
=
= MICROINTERACCIONES
=
===================================================================*/

#ttm-portal .ttm-card:hover .ttm-card-content{

    transform:translateY(-6px);

}

#ttm-portal .ttm-card-content{

    transition:
        transform .35s ease;

}



#ttm-portal .ttm-card:hover .ttm-card-overlay{

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.88),

            rgba(0,0,0,.28),

            rgba(0,0,0,.05)

        );

}



#ttm-portal .ttm-card-overlay{

    transition:
        background .35s ease;

}



/*===================================================================
=
= EFECTO SOBRE EL TITULO
=
===================================================================*/

#ttm-portal .ttm-card h2{

    transition:
        color .35s ease;

}



#ttm-portal .ttm-card:hover h2{

    color:#ffffff;

}



/*===================================================================
=
= EFECTO SOBRE EL TEXTO
=
===================================================================*/

#ttm-portal .ttm-card p{

    transition:
        opacity .35s ease;

}



#ttm-portal .ttm-card:hover p{

    opacity:1;

}



/*===================================================================
=
= ESTADO FOCUS (Accesibilidad)
=
===================================================================*/

#ttm-portal a:focus-visible{

    outline:3px solid var(--ttm-primary);

    outline-offset:6px;

    border-radius:12px;

}



/*===================================================================
=
= SELECCIÓN DE TEXTO
=
===================================================================*/

#ttm-portal ::selection{

    background:var(--ttm-primary);

    color:#ffffff;

}



/*===================================================================
=
= IMÁGENES
=
===================================================================*/

#ttm-portal img{

    user-select:none;

    -webkit-user-drag:none;

}



/*===================================================================
=
= SCROLL SUAVE
=
===================================================================*/

html{

    scroll-behavior:smooth;

}



/*===================================================================
=
= UTILIDADES
=
===================================================================*/

#ttm-portal .ttm-hidden{

    display:none !important;

}



#ttm-portal .ttm-disabled{

    pointer-events:none;

    opacity:.55;

}



#ttm-portal .ttm-loading{

    opacity:.55;

}



/*===================================================================
=
= PLACEHOLDER PARA FUTURAS FUNCIONES
=
===================================================================*/

/*
Estas clases serán utilizadas posteriormente por JavaScript.

Ejemplos:

.ttm-search-active

.ttm-filter-active

.ttm-card-hidden

.ttm-card-visible

.ttm-loading

.ttm-empty

.ttm-highlight

*/



/*===================================================================
=
= REDUCCIÓN DE MOVIMIENTO
=
===================================================================*/

@media (prefers-reduced-motion: reduce){

#ttm-portal *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}



/*===================================================================
=
= OPTIMIZACIÓN DE RENDER
=
===================================================================*/

#ttm-portal .ttm-grid{

    contain:layout;

}



#ttm-portal .ttm-card{

    contain:layout paint;

}



#ttm-portal .ttm-card img{

    backface-visibility:hidden;

    transform:translateZ(0);

}



/*===================================================================
=
= PREPARADO PARA FILTROS
=
===================================================================*/

#ttm-portal .ttm-card.is-hidden{

    display:none;

}



#ttm-portal .ttm-card.is-fade{

    opacity:.25;

}



/*===================================================================
=
= PREPARADO PARA BUSCADOR
=
===================================================================*/

#ttm-portal .ttm-highlight{

    background:#FFF4AE;

    color:#000;

}



/*===================================================================
=
= PREPARADO PARA LAZY LOAD
=
===================================================================*/

#ttm-portal img[data-src]{

    filter:blur(8px);

}



#ttm-portal img.loaded{

    filter:none;

    transition:

        filter .4s ease;

}



/*===================================================================
=
= FIN DEL ARCHIVO (Parte 4)
=
===================================================================*/

/*===================================================================
=
= PORTAL DE TURISMO
= Framework Base
=
===================================================================*/


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

#ttm-portal .ttm-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-weight:600;

    transition:all .30s ease;

}

#ttm-portal .ttm-btn-primary{

    background:var(--ttm-primary);

    color:#FFF;

}

#ttm-portal .ttm-btn-primary:hover{

    background:var(--ttm-primary-dark);

}



/*==============================================================
=
= TITULOS
=
==============================================================*/

#ttm-portal .ttm-section-title{

    font-size:2.5rem;

    font-weight:800;

    margin-bottom:20px;

    color:var(--ttm-primary);

}

#ttm-portal .ttm-section-subtitle{

    color:#666;

    line-height:1.8;

    margin-bottom:50px;

}



/*==============================================================
=
= BADGES
=
==============================================================*/

#ttm-portal .ttm-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:#F5F5F5;

    font-size:.85rem;

    font-weight:600;

}



/*==============================================================
=
= SPINNER
=
==============================================================*/

#ttm-portal .ttm-spinner{

    width:42px;

    height:42px;

    border-radius:50%;

    border:4px solid #DDD;

    border-top-color:var(--ttm-primary);

    animation:ttmRotate .8s linear infinite;

}



@keyframes ttmRotate{

    to{

        transform:rotate(360deg);

    }

}



/*==============================================================
=
= SKELETON
=
==============================================================*/

#ttm-portal .ttm-skeleton{

    position:relative;

    overflow:hidden;

    background:#EFEFEF;

}



#ttm-portal .ttm-skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.65),

            transparent

        );

    animation:ttmSkeleton 1.4s infinite;

}



@keyframes ttmSkeleton{

    100%{

        transform:translateX(100%);

    }

}



/*==============================================================
=
= EMPTY STATE
=
==============================================================*/

#ttm-portal .ttm-empty{

    text-align:center;

    padding:100px 20px;

}



#ttm-portal .ttm-empty i{

    font-size:70px;

    color:#AAA;

    margin-bottom:20px;

}



#ttm-portal .ttm-empty h3{

    font-size:2rem;

    margin-bottom:12px;

}



#ttm-portal .ttm-empty p{

    color:#666;

}



/*==============================================================
=
= MENSAJES
=
==============================================================*/

#ttm-portal .ttm-success{

    color:#0E7A35;

}



#ttm-portal .ttm-warning{

    color:#E6A700;

}



#ttm-portal .ttm-error{

    color:#C62828;

}



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

#ttm-portal .fade-in{

    animation:ttmFade .50s ease forwards;

}



@keyframes ttmFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



#ttm-portal .slide-up{

    animation:ttmSlide .50s ease forwards;

}



@keyframes ttmSlide{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/*==============================================================
=
= MODO OSCURO
=
==============================================================*/

/*

Preparado para futuras versiones.

body.dark-mode #ttm-portal{

    --ttm-primary:#C42C55;

    --ttm-text:#EEE;

    background:#121212;

}

*/



/*==============================================================
=
= SKINS
=
==============================================================*/

/*

Preparado para cambiar la identidad gráfica.

Ejemplo:

.skin-tuxpan

.skin-veracruz

.skin-turismo

.skin-playas

*/



/*==============================================================
=
= FUTURAS FUNCIONES
=
==============================================================*/

/*

Estas clases serán utilizadas por:

- search-logic.js

- filters.js

- pagination.js

- favorites.js

- maps.js

- api.js

No eliminar.

*/



/*==============================================================
=
= FIN DEL ARCHIVO
=
==============================================================*/