/* ==========================================
   TOMARES GOURMET - TARJETAS AUTOMATICAS
   Referencia visual: Elementor 2024
   ========================================== */


/* 1. CONTENEDOR PRINCIPAL */

.tg-tarjetas-grid {
    --tg-color: #44B8A1;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
    width: 100%;
}

.tg-tarjetas-grid,
.tg-tarjetas-grid *,
.tg-tarjetas-grid *::before,
.tg-tarjetas-grid *::after {
    box-sizing: border-box;
}


/* 2. TARJETAS */

.tg-tarjeta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;

    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 15px;

    /* Sombra suave con el color de cada edición */
    box-shadow: 0 5px 18px -10px
        color-mix(in srgb, var(--tg-color) 45%, transparent);

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

.tg-tarjeta:hover {
    transform: translateY(-3px);

    /* Sombra algo más intensa al pasar el cursor */
    box-shadow: 0 8px 20px -9px
        color-mix(in srgb, var(--tg-color) 65%, transparent);
}


/* 3. FOTOGRAFIA */

.tg-tarjeta-imagen {
    width: 100%;
    aspect-ratio: 1.65 / 1;
    background: #f7f7f5;
    overflow: hidden;
}

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


/* 4. CONTENIDO DE LA TARJETA */

.tg-tarjeta-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    padding: 18px 30px 0;
    text-align: center;
}


/* 5. NOMBRE DEL ESTABLECIMIENTO */

.tg-tarjeta-restaurante {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;

    text-transform: uppercase;
    color: var(--tg-color);

    margin: 0 0 6px;
}


/* 6. TITULO DE LA TAPA */

.tg-tarjeta-titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 45px;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: -2.3px;

    color: #020101;
    text-align: center;
    overflow-wrap: break-word;

    margin: 0;
}


/* PALABRAS DESTACADAS */

.tg-tarjeta-destacado {
    color: var(--tg-color);
}


/* 7. DIRECCION */

.tg-tarjeta-direccion {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;

    color: #616161;
    text-align: center;

    margin: 12px 0 20px;
}


/* 8. PIE DE TARJETA */

.tg-tarjeta-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
    width: calc(100% - 60px);
    min-height: 52px;

    margin: 0 30px;
    padding: 18px 0 0;

    border-top: 1px solid #DEDEDE;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}


/* 9. ENLACES INFERIORES */

.tg-tarjeta-pie a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;

    color: #505050;
    text-decoration: none;
    white-space: nowrap;
}

.tg-tarjeta-pie a:hover,
.tg-tarjeta-pie a:focus-visible {
    color: var(--tg-color);
    text-decoration: none;
}


/* ICONO COMO LLEGAR */

.tg-tarjeta-mapa .tg-icono-mapa {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}


/* ICONO VER FICHA */

.tg-tarjeta-enlace > span:last-child {
    font-size: 20px;
    line-height: 1;
}


/* TEXTO EXCLUSIVO MOVIL */

.tg-enlace-mobile {
    display: none;
}


/* ==========================================
   10. TABLETS
   ========================================== */

@media (max-width: 1024px) {

    .tg-tarjetas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .tg-tarjeta-cuerpo {
        padding: 18px 24px 0;
    }

    .tg-tarjeta-titulo {
        font-size: 40px;
        line-height: 48px;
    }

    .tg-tarjeta-pie {
        width: calc(100% - 48px);
        margin: 0 24px;
        gap: 8px;
    }
}


/* ==========================================
   11. MOVILES
   ========================================== */


@media (max-width: 767px) {

    /* Distribucion */

    .tg-tarjetas-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    /* Contenido */

    .tg-tarjeta-cuerpo {
        padding: 18px 24px 0;
    }

    /* Nombre del establecimiento */

    .tg-tarjeta-restaurante {
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
    }

    /* Titulo de la tapa */

    .tg-tarjeta-titulo {
        font-size: 40px;
        font-weight: 400;
        line-height: 48px;
        letter-spacing: -2.3px;
    }

    /* Direccion */

    .tg-tarjeta-direccion {
        font-size: 18px;
        line-height: 28px;
    }

    /* Pie */

    .tg-tarjeta-pie {
        width: calc(100% - 48px);
        margin: 0 24px;
        padding: 16px 0 24px;
        gap: 10px;
    }

    /* Botones movil */

    .tg-tarjeta-pie a {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 1;
        min-width: 0;
        gap: 8px;

        padding: 12px 8px;

        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;

        text-align: center;
        white-space: normal;
        color: #FFFFFF;

        border-radius: 3px;
        text-decoration: none;
    }

    /* Boton como llegar */

    .tg-tarjeta-pie a.tg-tarjeta-mapa {
        background: var(--tg-color);
        color: #FFFFFF;
    }

    /* Boton ver detalles */

    .tg-tarjeta-pie a.tg-tarjeta-enlace {
        background: #1A1A1A;
        color: #FFFFFF;
    }

    /* Interacciones */

    .tg-tarjeta-pie a:hover,
    .tg-tarjeta-pie a:focus-visible {
        color: #FFFFFF;
        opacity: 0.9;
    }

    /* Textos responsive */

    .tg-enlace-desktop {
        display: none;
    }

    .tg-enlace-mobile {
        display: inline;
    }
}


/* ==========================================
   12. ACCESIBILIDAD
   ========================================== */

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

    .tg-tarjeta {
        transition: none;
    }

}


/* ==========================================
   AJUSTES FINALES - ENLACES Y ESPACIADO
   ========================================== */

/* Espacio inferior de las tarjetas */
.tg-tarjetas-grid .tg-tarjeta-pie {
    padding-top: 18px;
    padding-bottom: 24px;
}

/* Eliminar subrayados heredados de Astra y Elementor */
.tg-tarjetas-grid .tg-tarjeta-pie a,
.tg-tarjetas-grid .tg-tarjeta-pie a:link,
.tg-tarjetas-grid .tg-tarjeta-pie a:visited,
.tg-tarjetas-grid .tg-tarjeta-pie a:hover,
.tg-tarjetas-grid .tg-tarjeta-pie a:focus,
.tg-tarjetas-grid .tg-tarjeta-pie a:active {
    text-decoration: none;
    text-decoration-line: none;
    box-shadow: none;
}

/* Evitar subrayados en los textos internos */
.tg-tarjetas-grid .tg-tarjeta-pie a span {
    text-decoration: none;
}

/* Ajustes especificos de movil */
@media (max-width: 767px) {

    .tg-tarjetas-grid .tg-tarjeta-pie {
        padding-top: 16px;
        padding-bottom: 24px;
    }

}