.tm-title {
    font-weight: 800;
    font-size: 3rem;
    background: linear-gradient(90deg, #ff2f92, #007a7a);
    -webkit-background-clip: text;
    color: transparent;
}

.nav-link {
    font-weight: 500;
}

footer a {
    text-decoration: none;
    color: #007a7a;
}

@media (max-width: 768px) {
    .tm-title {
        font-size: 2.2rem;
    }

    footer a {
        display: block;
        margin: 10px 0;
    }
}

/* Aplicar Poppins como fuente principal (prueba) */
body {
    font-family: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: #222;
}

h1, .tm-title { font-weight: 700; letter-spacing: -0.3px; }

/* Párrafos intro del index: tamaño aumentado por petición */
.intro-paragraph {
    font-size: 1.25rem; /* ≈20px */
    line-height: 1.6;
    font-weight: 500;
}
@media (min-width: 768px) {
    .intro-paragraph {
        font-size: 1.5rem; /* ≈24px en pantallas mayores */
    }
}

/* Servicios: imágenes más grandes (ajustadas) */
.service-item img {
    max-width: 420px; /* aumentado */
    width: 100%;
    height: auto;
    border-radius: 6px; /* menos redondeado */
}

@media (max-width: 576px) {
    .service-item img {
        max-width: 300px;
        border-radius: 6px;
    }
}

/* Logo: tamaño duplicado según petición */
.navbar-brand .navbar-logo {
    height: 128px; /* duplicado */
    max-height: 128px;
    width: auto;
}

@media (max-width: 768px) {
    .navbar-brand .navbar-logo {
        height: 96px; /* duplicado en móvil */
        max-height: 96px;
    }
}

/* Wrapper to ensure all catalog images have the same visual size (stronger selectors) */
.product-image-wrap {
    width: 100%;
    height: 260px; /* base height aumentado */
    max-height: 260px;
    overflow: hidden;
    display: block;
}

/* Force image to fill the wrapper and crop centrally. Use specific selectors to override other rules. */
.card .product-image-wrap > img.product-image,
.product-image-wrap > img.product-image,
.card-img-top.product-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 6px; /* menos redondeo */
}

@media (max-width: 576px) {
    .product-image-wrap {
        height: 200px; /* smaller on mobile */
        max-height: 200px;
    }
}
/* ==================================================
   CATEGORÍAS - TEXTO SOLO EN HOVER
   (h4 y p ocultos por defecto)
================================================== */

/* Aseguramos contexto */
.categoria-card-bootstrap {
    position: relative;
    overflow: hidden;
}

/* Overlay sin velo blanco; solo oscurece ligeramente en hover */
.categoria-card-bootstrap .overlay-bootstrap {
    background: transparent;
    transition: background 0.3s ease;
}

.categoria-card-bootstrap:hover .overlay-bootstrap {
    background: rgba(0, 0, 0, 0.35);
}

/* 🔴 TEXTO OCULTO POR DEFECTO */
.categoria-card-bootstrap .overlay-bootstrap h4,
.categoria-card-bootstrap .overlay-bootstrap p {
    opacity: 0;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: opacity 0.3s ease;
}

/* Título centrado y justo encima del resumen */
.categoria-card-bootstrap .overlay-bootstrap h4 {
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    margin: 0;
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 0 12px;
}

/* 🟢 TEXTO VISIBLE SOLO EN HOVER */
.categoria-card-bootstrap:hover .overlay-bootstrap h4,
.categoria-card-bootstrap:hover .overlay-bootstrap p {
    opacity: 1;
}
/* ===============================
   BARRA SUPERIOR DE CONTACTO
   Rosa elegante (no llamativo)
================================ */

body .top-contact-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    background-color: #ff347b !important;
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
}

/* Iconos adaptados al tono */
.top-contact-bar .icon-phone,
.top-contact-bar .icon-mail {
    color: #ffffff;           /* blanco para contraste */
    margin-right: 4px;
}

/* Ajustes responsive */
@media (max-width: 576px) {
    .top-contact-bar {
        font-size: 0.85rem;
        padding: 8px 10px;
        gap: 8px;
    }
    
    .top-contact-bar .mx-2 {
        display: none;
    }
}

/* Contenedor de categoría con efecto hover */
.categoria-hover-container {
    position: relative;
    overflow: visible;
}

.categoria-hover-container .card {
    transition: all 0.3s ease;
}

.categoria-hover-container:hover .card {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Link envolvente */
.text-decoration-none .categoria-hover-container {
    cursor: pointer;
}

/* Items que aparecen al hover */
.categoria-items-hover {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ff2f92, #007a7a);
    color: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 500;
    z-index: 2;
    transform: translateY(-50%);
}

.categoria-items-hover p {
    margin: 5px 0;
    font-size: 0.95rem;
}

.categoria-hover-container:hover .categoria-items-hover {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

/* ==================================================
   ESTILOS PARA TARJETAS DE PRODUCTOS
================================================== */

.product-card-hover {
    position: relative;
    transition: all 0.3s ease;
}

.product-card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

.product-card-hover .product-image {
    transition: transform 0.3s ease;
}

.product-card-hover:hover .product-image {
    transform: scale(1.05);
}

.precio-producto {
    color: #ff2f92;
    font-size: 1.2rem;
}

.like-btn {
    transition: all 0.3s ease;
}

.like-btn:hover {
    transform: scale(1.05);
}

/* Botón eliminar (solo admin) */
.admin-delete-form {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

.admin-delete-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    cursor: pointer;
}

.admin-delete-btn:hover {
    background: #dc3545;
    transform: scale(1.05);
}

.admin-price-form .input-group {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
   CONTACTO - CONTENEDORES QR
================================================== */

.contact-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.contact-card-header {
    padding: 12px 16px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    letter-spacing: 0.2px;
}

.contact-card-header.whatsapp {
    background: linear-gradient(135deg, #25d366, #1aa34a);
}

.contact-card-header.mail {
    background: linear-gradient(135deg, #ff2f92, #007a7a);
}

.contact-card-header.info {
    background: linear-gradient(135deg, #5f6bff, #2ea8ff);
}

.contact-qr {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fafafa;
}

.contact-qr img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.contact-qr.placeholder {
    color: #555;
    font-weight: 500;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        #f5f5f5,
        #f5f5f5 10px,
        #f0f0f0 10px,
        #f0f0f0 20px
    );
}

@media (max-width: 576px) {
    .contact-qr {
        height: 220px;
    }
}

/* ==================================================
   NOVEDADES - MODAL
================================================== */

.novedades-modal {
    /* Contenedor del modal con fondo blanco y bordes redondeados */
    position: relative;
    border: 0;
    border-radius: 16px;
    background-color: #ffffff;
    overflow: hidden;
}

.novedades-modal::before {
    /* Capa de imagen de fondo (ajusta la ruta o posicion aqui) */
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/fondo_novedades.png") center/cover no-repeat;
    opacity: 0.45;
    z-index: 0;
}

.novedades-modal::after {
    /* Capa blanca semitransparente para mejorar legibilidad del texto */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 1;
}

.novedades-modal .modal-header,
.novedades-modal .modal-body {
    /* Asegura que el contenido quede por encima de las capas de fondo */
    position: relative;
    z-index: 2;
}

.novedades-modal .modal-header {
    /* Centra el titulo y mantiene el boton de cerrar separado */
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    justify-content: center;
}

.novedades-modal .modal-title {
    /* Titulo centrado en todo el ancho del modal */
    font-weight: 700;
    width: 100%;
    text-align: center;
    padding-right: 2rem;
}

.novedades-modal .btn-close {
    /* Boton de cerrar fijo a la derecha para no mover el titulo */
    position: absolute;
    right: 1rem;
}

.novedades-modal .modal-body {
    /* Texto del cuerpo centrado */
    text-align: center;
}
/* ==================================================
   VISOR DE IMAGENES - PANTALLA COMPLETA
================================================== */

.image-viewer-modal {
    background: #000;
}

.image-viewer-modal .modal-body {
    background: #000;
}

.image-viewer-modal #imageViewerTarget {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}
.novedades-modal .btn-primary {
    /* Color personalizado del boton "Descubrir" */
    background-color: #015d51;
    border-color: #015d51;
}

.novedades-modal .btn-primary:hover,
.novedades-modal .btn-primary:focus {
    /* Ligero aclarado al pasar el mouse para feedback */
    background-color: #027464;
    border-color: #027464;
}