/* ============================================================
   Glow Up - Skin Care & Hair Care
   Hoja de estilos principal
   ISW-512 Diseño de Aplicaciones Web

   METODOLOGIA: Mobile First
   Los estilos base estan pensados para pantallas pequenas y
   las media queries usan min-width para ir agrandando.
   ============================================================ */


/* INICIO Variables de marca */
:root {
    /* Paleta principal: blanco y negro, acorde con el logo */
    --gu-primary: #111111;      /* negro, color de marca y acentos */
    --gu-secondary: #8A8A8A;    /* gris medio, textos secundarios */
    --gu-dark: #000000;         /* negro puro, footer y barra superior */
    --gu-light: #F4F4F4;        /* gris muy claro, fondos alternos */
    --gu-text: #4A4A4A;         /* texto de párrafos */
    --gu-white: #FFFFFF;

    /* Tipografías */
    --gu-font-titulo: "Playfair Display", Georgia, serif;
    --gu-font-texto: "Poppins", "Open Sans", Arial, sans-serif;
}

/* FIN Variables de marca */


/* INICIO Estilos generales */
body {
    font-family: var(--gu-font-texto);
    color: var(--gu-text);
    background-color: var(--gu-white);
    font-size: 15px;
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--gu-font-titulo);
    color: var(--gu-dark);
    font-weight: 600;
}

a {
    color: var(--gu-primary);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--gu-secondary);
}

/* Botón principal de la marca */
.gu-btn {
    display: inline-block;
    background-color: var(--gu-primary);
    color: var(--gu-white);
    border: 1px solid var(--gu-primary);
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.gu-btn:hover {
    background-color: var(--gu-dark);
    border-color: var(--gu-dark);
    color: var(--gu-white);
}

/* Botón secundario (contorno) */
.gu-btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--gu-dark);
    border: 1px solid var(--gu-dark);
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.gu-btn-outline:hover {
    background-color: var(--gu-dark);
    color: var(--gu-white);
}

/* Encabezado de sección reutilizable */
.gu-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.gu-section-header h2 {
    font-size: 26px;
    margin-bottom: 8px;
}

.gu-section-header p {
    color: var(--gu-primary);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* Fondo alterno para separar secciones */
.gu-bg-light {
    background-color: var(--gu-light);
}

/* Espaciado vertical estándar de sección */
.gu-section {
    padding: 45px 0;
}

/* FIN Estilos generales */


/* INICIO Barra de anuncios superior */
#gu-topbar {
    background-color: var(--gu-dark);
    color: var(--gu-white);
    font-size: 12px;
    text-align: center;
    padding: 7px 15px;
    letter-spacing: 0.5px;
}

#gu-topbar a {
    color: var(--gu-secondary);
}

/* FIN Barra de anuncios superior */


/* INICIO Barra de navegación */
#gu-navbar {
    background-color: var(--gu-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 12px 0;
}

/* Logo de texto: se reemplaza por <img> cuando esté el logo real */
#gu-navbar .gu-logo {
    font-family: var(--gu-font-titulo);
    font-size: 24px;
    font-weight: 700;
    color: var(--gu-dark);
    margin: 0;
    letter-spacing: 1px;
}

#gu-navbar .gu-logo span {
    color: var(--gu-primary);
}

#gu-navbar .nav-link {
    color: var(--gu-dark);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
}

/* Efecto interactivo al pasar el mouse (requisito del enunciado) */
#gu-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background-color: var(--gu-primary);
    transition: width 0.3s;
}

#gu-navbar .nav-link:hover::after,
#gu-navbar .nav-link.active::after {
    width: 100%;
}

#gu-navbar .nav-link:hover,
#gu-navbar .nav-link.active {
    color: var(--gu-primary);
}

#gu-navbar .dropdown-menu {
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    font-size: 13px;
}

#gu-navbar .dropdown-item {
    color: var(--gu-dark);
    padding: 8px 20px;
}

#gu-navbar .dropdown-item:hover {
    background-color: var(--gu-light);
    color: var(--gu-primary);
}

#gu-navbar .navbar-toggler {
    border-color: var(--gu-primary);
    padding: 4px 8px;
}

#gu-navbar .navbar-toggler:focus {
    box-shadow: none;
}

/* FIN Barra de navegación */


/* INICIO Encabezado interno de páginas */
#gu-page-header {
    background-color: var(--gu-light);
    padding: 35px 0;
    text-align: center;
}

#gu-page-header h1 {
    font-size: 28px;
    margin-bottom: 5px;
}

#gu-page-header p {
    color: var(--gu-primary);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* FIN Encabezado interno de páginas */


/* INICIO Barra de redes sociales y WhatsApp */
#gu-social {
    background-color: var(--gu-dark);
    color: var(--gu-white);
    padding: 22px 0;
    text-align: center;
}

#gu-social .gu-social-texto {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

#gu-social .gu-social-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: var(--gu-primary);
    color: var(--gu-white);
    font-size: 18px;
    transition: all 0.3s;
}

#gu-social .gu-social-icono:hover {
    background-color: var(--gu-secondary);
    transform: translateY(-3px);
}

/* Botón directo a WhatsApp */
#gu-social .gu-whatsapp {
    background-color: #25D366;
}

#gu-social .gu-whatsapp:hover {
    background-color: #1EAE55;
}

/* FIN Barra de redes sociales y WhatsApp */


/* INICIO Footer */
#gu-footer {
    background-color: var(--gu-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 40px 0 0 0;
    font-size: 14px;
}

#gu-footer h3 {
    font-size: 22px;
    color: var(--gu-white);
    margin-bottom: 14px;
}

#gu-footer h3 span {
    color: var(--gu-primary);
}

#gu-footer h4 {
    font-size: 14px;
    color: var(--gu-white);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

#gu-footer .gu-footer-col {
    margin-bottom: 30px;
}

#gu-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#gu-footer ul li {
    margin-bottom: 9px;
}

#gu-footer a {
    color: rgba(255, 255, 255, 0.7);
}

#gu-footer a:hover {
    color: var(--gu-primary);
}

#gu-footer i {
    color: var(--gu-primary);
    margin-right: 8px;
}

/* Franja inferior con los derechos de autor */
#gu-footer .gu-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 10px;
    padding: 18px 0;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* FIN Footer */


/* ============================================================
   MEDIA QUERIES - Mobile First (se usa min-width)
   ============================================================ */

/* INICIO Tablet: 768px en adelante */
@media (min-width: 768px) {

    body {
        font-size: 16px;
    }

    .gu-section {
        padding: 60px 0;
    }

    .gu-section-header h2 {
        font-size: 32px;
    }

    #gu-page-header {
        padding: 50px 0;
    }

    #gu-page-header h1 {
        font-size: 38px;
    }

    #gu-social {
        text-align: left;
    }

    #gu-social .gu-social-texto {
        margin-bottom: 0;
    }
}

/* FIN Tablet */


/* INICIO Escritorio: 992px en adelante */
@media (min-width: 992px) {

    #gu-navbar .nav-link {
        margin-left: 22px;
    }

    .gu-section {
        padding: 75px 0;
    }

    .gu-section-header h2 {
        font-size: 36px;
    }

    #gu-page-header h1 {
        font-size: 44px;
    }
}

/* FIN Escritorio */


/* ============================================================
   ESTILOS DE LA PAGINA DE INICIO
   ============================================================ */

/* INICIO Carrusel principal */
#gu-carousel .carousel-item {
    height: 380px;
    background-color: var(--gu-light);
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Capa oscura para que el texto se lea sobre la imagen */
#gu-carousel .gu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(43, 35, 32, 0.35);
}

#gu-carousel .carousel-caption {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    right: 8%;
    left: 8%;
    text-align: center;
}

#gu-carousel .carousel-caption h2 {
    color: var(--gu-white);
    font-size: 26px;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#gu-carousel .carousel-caption p {
    color: var(--gu-white);
    font-size: 14px;
    margin-bottom: 18px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* FIN Carrusel principal */


/* INICIO Tira de beneficios */
#gu-beneficios {
    background-color: var(--gu-light);
    padding: 30px 0;
}

#gu-beneficios .gu-beneficio {
    text-align: center;
    padding: 14px 10px;
}

#gu-beneficios .gu-beneficio i {
    font-size: 28px;
    color: var(--gu-primary);
    display: block;
    margin-bottom: 8px;
}

#gu-beneficios .gu-beneficio h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

#gu-beneficios .gu-beneficio p {
    font-size: 13px;
    margin: 0;
}

/* FIN Tira de beneficios */


/* INICIO Panel del clima (API Rest externa) */
#gu-clima .gu-clima-caja {
    background-color: var(--gu-white);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

#gu-clima .gu-clima-dato {
    text-align: center;
}

#gu-clima #gu-clima-temp {
    font-family: var(--gu-font-titulo);
    font-size: 40px;
    color: var(--gu-dark);
    display: block;
    line-height: 1.1;
}

#gu-clima #gu-clima-lugar {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gu-primary);
    display: block;
}

#gu-clima #gu-clima-desc {
    font-size: 13px;
    text-transform: capitalize;
    display: block;
}

#gu-clima .gu-clima-reco {
    border-top: 1px solid #eee;
    margin-top: 18px;
    padding-top: 18px;
}

#gu-clima .gu-clima-reco i {
    font-size: 26px;
    color: var(--gu-secondary);
}

#gu-clima .gu-clima-reco h3 {
    font-size: 18px;
    margin: 6px 0;
}

#gu-clima .gu-clima-reco p {
    font-size: 14px;
    margin: 0;
}

#gu-clima .gu-clima-link {
    font-size: 12px;
    background: none;
    border: none;
    color: var(--gu-primary);
    text-decoration: underline;
    padding: 0;
    margin-top: 12px;
    cursor: pointer;
}

/* FIN Panel del clima */


/* INICIO Tarjetas de producto */
.gu-productos-grid {
    margin-top: 10px;
}

.gu-product-card {
    background-color: var(--gu-white);
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 24px;
}

.gu-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.gu-product-img {
    background-color: var(--gu-light);
}

.gu-product-img img {
    width: 100%;
    height: auto;
    display: block;
}

.gu-product-body {
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gu-product-marca {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gu-secondary);
}

.gu-product-nombre {
    font-size: 15px;
    margin: 6px 0;
}

.gu-product-desc {
    font-size: 13px;
    color: #7a7069;
    flex-grow: 1;
    margin-bottom: 8px;
}

.gu-product-precio {
    font-weight: 600;
    color: var(--gu-primary);
    font-size: 16px;
}

/* FIN Tarjetas de producto */


/* INICIO Paneles de la rutina */
#gu-pasos .gu-paso {
    background-color: var(--gu-white);
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 22px 18px;
    height: 100%;
    text-align: center;
    margin-bottom: 20px;
}

#gu-pasos .gu-paso-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--gu-primary);
    color: var(--gu-white);
    font-family: var(--gu-font-titulo);
    font-size: 18px;
    margin-bottom: 12px;
}

#gu-pasos .gu-paso h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

#gu-pasos .gu-paso p {
    font-size: 14px;
    margin: 0;
}

/* FIN Paneles de la rutina */


/* INICIO Llamado a la accion */
#gu-cta {
    background-color: var(--gu-primary);
    color: var(--gu-white);
    text-align: center;
    padding: 45px 0;
}

#gu-cta h2 {
    color: var(--gu-white);
    font-size: 26px;
    margin-bottom: 10px;
}

#gu-cta p {
    margin-bottom: 20px;
}

#gu-cta .gu-btn-cta {
    display: inline-block;
    background-color: var(--gu-white);
    color: var(--gu-primary);
    padding: 11px 32px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

#gu-cta .gu-btn-cta:hover {
    background-color: var(--gu-dark);
    color: var(--gu-white);
}

/* FIN Llamado a la accion */


/* INICIO Media queries del inicio - Mobile First */
@media (min-width: 768px) {

    #gu-carousel .carousel-item {
        height: 480px;
    }

    #gu-carousel .carousel-caption {
        text-align: left;
        right: 45%;
        left: 8%;
    }

    #gu-carousel .carousel-caption h2 {
        font-size: 40px;
    }

    #gu-carousel .carousel-caption p {
        font-size: 16px;
    }

    #gu-clima .gu-clima-caja {
        padding: 32px 30px;
    }

    #gu-clima .gu-clima-reco {
        border-top: none;
        border-left: 1px solid #eee;
        margin-top: 0;
        padding-top: 0;
        padding-left: 25px;
        text-align: left;
    }

    #gu-cta h2 {
        font-size: 32px;
    }
}

@media (min-width: 992px) {

    #gu-carousel .carousel-item {
        height: 560px;
    }

    #gu-carousel .carousel-caption h2 {
        font-size: 48px;
    }
}

/* FIN Media queries del inicio */


/* INICIO Logo en imagen */
#gu-navbar .gu-logo-img {
    height: 42px;
    width: auto;
    display: block;
}

#gu-footer .gu-logo-footer {
    height: 50px;
    width: auto;
    margin-bottom: 14px;
    border-radius: 6px;
}

@media (min-width: 992px) {
    #gu-navbar .gu-logo-img {
        height: 50px;
    }
}

/* FIN Logo en imagen */


/* INICIO Ajuste del carrusel con imagen de producto */
#gu-carousel .carousel-item {
    background-repeat: no-repeat;
    background-color: var(--gu-light);
    background-size: contain;
    background-position: right center;
}

/* En movil la imagen se centra y el texto queda sobre el degradado */
#gu-carousel .gu-overlay {
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.85) 45%,
            rgba(255, 255, 255, 0.15) 100%);
}

#gu-carousel .carousel-caption h2,
#gu-carousel .carousel-caption p {
    color: var(--gu-dark);
    text-shadow: none;
}

#gu-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--gu-primary);
}

#gu-carousel .carousel-control-prev-icon,
#gu-carousel .carousel-control-next-icon {
    filter: invert(1) grayscale(1);
}

/* FIN Ajuste del carrusel */


/* ============================================================
   ESTILOS DEL CATALOGO DE PRODUCTOS
   ============================================================ */

/* INICIO Barra de filtros */
#gu-filtros .gu-filtro-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

#gu-filtros .gu-filtro-btn {
    background-color: var(--gu-white);
    border: 1px solid var(--gu-dark);
    color: var(--gu-dark);
    padding: 7px 20px;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
}

#gu-filtros .gu-filtro-btn:hover {
    background-color: var(--gu-light);
}

#gu-filtros .gu-filtro-btn.activo {
    background-color: var(--gu-primary);
    border-color: var(--gu-primary);
    color: var(--gu-white);
}

#gu-filtros .form-control,
#gu-filtros .form-select {
    border-radius: 50px;
    border-color: #ddd;
    font-size: 14px;
    padding: 9px 18px;
}

#gu-filtros .form-control:focus,
#gu-filtros .form-select:focus {
    border-color: var(--gu-primary);
    box-shadow: none;
}

#gu-filtros .gu-btn-limpiar {
    background-color: var(--gu-dark);
    color: var(--gu-white);
    border-radius: 50px;
    font-size: 14px;
    padding: 9px 10px;
}

#gu-filtros .gu-btn-limpiar:hover {
    background-color: var(--gu-primary);
    color: var(--gu-white);
}

#gu-filtros .gu-contador {
    text-align: center;
    font-size: 13px;
    color: #8a8078;
    margin: 16px 0 0 0;
    letter-spacing: 0.5px;
}

/* FIN Barra de filtros */


/* INICIO Boton de la tarjeta de producto */
.gu-product-card {
    cursor: pointer;
}

.gu-product-btn {
    background: none;
    border: none;
    color: var(--gu-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0 0 0;
    margin-top: 8px;
    border-top: 1px solid #f0ece8;
    width: 100%;
    transition: color 0.3s;
}

.gu-product-card:hover .gu-product-btn {
    color: var(--gu-primary);
}

/* FIN Boton de la tarjeta de producto */


/* INICIO Ventana de detalle */
#gu-modal-producto .modal-content {
    border: none;
    border-radius: 12px;
}

#gu-modal-producto .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

#gu-modal-producto .gu-modal-img {
    background-color: var(--gu-light);
    border-radius: 10px;
    max-height: 260px;
}

#gu-modal-producto .gu-modal-nombre {
    font-size: 22px;
    margin-bottom: 10px;
}

#gu-modal-producto .gu-modal-precio {
    font-size: 20px;
    font-weight: 600;
    color: var(--gu-primary);
    margin-right: 12px;
}

#gu-modal-producto .gu-modal-tipo {
    font-size: 12px;
    background-color: var(--gu-light);
    color: var(--gu-text);
    padding: 4px 12px;
    border-radius: 50px;
}

#gu-modal-producto .gu-modal-detalle {
    font-size: 14px;
    margin: 14px 0 20px 0;
}

/* FIN Ventana de detalle */


/* ============================================================
   AJUSTES DE LA PALETA BLANCO Y NEGRO
   Al quitar el color, el contraste y la tipografia son los que
   sostienen el diseno, por eso se refuerzan algunos detalles.
   ============================================================ */

/* INICIO Ajustes blanco y negro */

/* Logos con fondo transparente: en el navbar se usa la version
   negra y en el footer la blanca, sin necesidad de filtros. */
#gu-navbar .gu-logo-img {
    height: 52px;
}

#gu-footer .gu-logo-footer {
    height: 90px;
    border-radius: 0;
}

/* Al no haber color, el subrayado del menu se hace mas visible */
#gu-navbar .nav-link::after {
    height: 2px;
    background-color: var(--gu-dark);
}

/* El precio se destaca con peso y espaciado en vez de color */
.gu-product-precio {
    letter-spacing: 0.5px;
}

/* La marca del producto en gris para crear jerarquia */
.gu-product-marca {
    color: var(--gu-secondary);
}

/* Los iconos de beneficios se ven mejor en negro pleno */
#gu-beneficios .gu-beneficio i {
    color: var(--gu-dark);
}

/* Las lineas divisorias se marcan un poco mas */
.gu-product-card {
    border-color: #e4e4e4;
}

/* El boton del llamado a la accion invierte los tonos */
#gu-cta {
    background-color: var(--gu-dark);
}

#gu-cta .gu-btn-cta {
    background-color: var(--gu-white);
    color: var(--gu-dark);
}

#gu-cta .gu-btn-cta:hover {
    background-color: var(--gu-secondary);
    color: var(--gu-white);
}

/* Los circulos de redes sociales pasan a negro sobre el footer */
#gu-social .gu-social-icono {
    background-color: var(--gu-white);
    color: var(--gu-dark);
}

#gu-social .gu-social-icono:hover {
    background-color: var(--gu-secondary);
    color: var(--gu-white);
}

/* Se conserva el verde de WhatsApp por ser un color de marca
   reconocible. Para dejarlo en blanco y negro, borrar este bloque. */
#gu-social .gu-whatsapp {
    background-color: #25D366;
    color: var(--gu-white);
}

#gu-social .gu-whatsapp:hover {
    background-color: #1EAE55;
    color: var(--gu-white);
}

/* FIN Ajustes blanco y negro */


/* INICIO Ajuste final del logo circular */
#gu-navbar {
    padding: 8px 0;
}

@media (min-width: 992px) {
    #gu-navbar .gu-logo-img {
        height: 62px;
    }
}

/* FIN Ajuste final del logo circular */


/* ============================================================
   ESTILOS DE LA PAGINA DE CONTACTO
   ============================================================ */

/* INICIO Datos de contacto */
.gu-contacto-info h2 {
    font-size: 28px;
    margin-bottom: 12px;
}

.gu-contacto-info > p {
    margin-bottom: 24px;
}

.gu-contacto-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gu-contacto-lista li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

.gu-contacto-lista i {
    font-size: 18px;
    color: var(--gu-dark);
    width: 26px;
}

.gu-contacto-lista span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gu-secondary);
    min-width: 90px;
}

.gu-contacto-lista .gu-contacto-dato {
    text-transform: none;
    letter-spacing: 0;
    color: var(--gu-text);
    font-size: 14px;
}

.gu-contacto-lista a {
    color: var(--gu-dark);
    font-size: 14px;
    border-bottom: 1px solid var(--gu-dark);
}

.gu-contacto-lista a:hover {
    color: var(--gu-secondary);
    border-color: var(--gu-secondary);
}

/* FIN Datos de contacto */


/* INICIO Formulario de registro */
.gu-form-caja {
    background-color: var(--gu-light);
    border-radius: 12px;
    padding: 26px 20px;
}

.gu-form-caja h2 {
    font-size: 26px;
    margin-bottom: 6px;
}

.gu-form-intro {
    font-size: 14px;
    color: var(--gu-secondary);
    margin-bottom: 22px;
}

.gu-form-caja .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gu-dark);
    margin-bottom: 5px;
}

.gu-form-caja .form-label small {
    font-weight: 400;
    color: var(--gu-secondary);
}

.gu-form-caja .form-control,
.gu-form-caja .form-select {
    border-color: #ddd;
    border-radius: 8px;
    font-size: 14px;
    padding: 9px 14px;
}

.gu-form-caja .form-control:focus,
.gu-form-caja .form-select:focus {
    border-color: var(--gu-dark);
    box-shadow: none;
}

/* Campo con error de validacion */
.gu-form-caja .gu-campo-error {
    border-color: #C0392B;
    background-color: #FDF3F2;
}

.gu-error {
    display: none;
    font-size: 12px;
    color: #C0392B;
    margin-top: 4px;
}

.gu-edad-texto {
    display: block;
    font-size: 12px;
    color: var(--gu-secondary);
    margin-top: 4px;
}

/* Opciones de genero */
.gu-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 4px;
}

.gu-radio {
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gu-radio input {
    accent-color: var(--gu-dark);
}

/* Marca de error sobre el grupo de radios */
#genero.gu-campo-error {
    border: 1px solid #C0392B;
    border-radius: 8px;
    padding: 8px;
    background-color: #FDF3F2;
}

/* Aviso general del formulario */
#gu-form-aviso {
    font-size: 14px;
    padding: 11px 15px;
    border-radius: 8px;
    margin-bottom: 16px;
}

#gu-form-aviso.gu-aviso-error {
    background-color: #FDF3F2;
    color: #C0392B;
    border: 1px solid #F0C6C1;
}

#gu-form-aviso.gu-aviso-ok {
    background-color: #F1F7F2;
    color: #2E7D4F;
    border: 1px solid #C6E0CE;
}

.gu-form-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gu-form-botones button {
    cursor: pointer;
}

/* FIN Formulario de registro */


/* INICIO Media queries de contacto */
@media (min-width: 768px) {

    .gu-form-caja {
        padding: 34px 32px;
    }

    .gu-contacto-info h2 {
        font-size: 34px;
    }
}

/* FIN Media queries de contacto */


/* ============================================================
   ESTILOS DE LA PAGINA DE UBICACION
   ============================================================ */

/* INICIO Panel lateral del mapa */
.gu-mapa-panel {
    background-color: var(--gu-light);
    border-radius: 12px;
    padding: 24px 20px;
}

.gu-mapa-panel h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.gu-mapa-intro {
    font-size: 14px;
    color: var(--gu-secondary);
    margin-bottom: 18px;
}

.gu-mapa-panel .gu-contacto-lista li {
    padding: 11px 0;
}

/* Botones de medio de transporte */
.gu-modo-grupo {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.gu-modo-btn {
    flex: 1 1 33%;
    background-color: var(--gu-white);
    border: 1px solid #ddd;
    color: var(--gu-text);
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.gu-modo-btn i {
    display: block;
    font-size: 16px;
    margin-bottom: 2px;
}

.gu-modo-btn:hover {
    border-color: var(--gu-dark);
}

.gu-modo-btn.activo {
    background-color: var(--gu-dark);
    border-color: var(--gu-dark);
    color: var(--gu-white);
}

/* Aviso de estado del mapa */
#gu-mapa-aviso {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 14px;
}

#gu-mapa-aviso.gu-aviso-error {
    background-color: #FDF3F2;
    color: #C0392B;
    border: 1px solid #F0C6C1;
}

#gu-mapa-aviso.gu-aviso-ok {
    background-color: #F1F7F2;
    color: #2E7D4F;
    border: 1px solid #C6E0CE;
}

/* Datos de la ruta calculada */
.gu-ruta-datos {
    background-color: var(--gu-white);
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 14px;
}

.gu-ruta-fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

.gu-ruta-fila + .gu-ruta-fila {
    border-top: 1px solid #f0f0f0;
}

.gu-ruta-etiqueta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gu-secondary);
    white-space: nowrap;
}

.gu-ruta-fila strong {
    text-align: right;
    font-weight: 600;
}

.gu-mapa-enlace {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--gu-dark);
    border-bottom: 1px solid var(--gu-dark);
}

.gu-mapa-enlace:hover {
    color: var(--gu-secondary);
    border-color: var(--gu-secondary);
}

/* FIN Panel lateral del mapa */


/* INICIO Contenedor del mapa */
.gu-mapa-caja {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
}

#gu-mapa {
    width: 100%;
    height: 380px;
    background-color: var(--gu-light);
}

.gu-mapa-cargando {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 14px;
    color: var(--gu-secondary);
    z-index: 2;
    margin: 0;
}

/* FIN Contenedor del mapa */


/* INICIO Media queries de ubicacion */
@media (min-width: 768px) {

    .gu-mapa-panel {
        padding: 30px 26px;
    }

    #gu-mapa {
        height: 480px;
    }
}

@media (min-width: 992px) {

    #gu-mapa {
        height: 560px;
    }
}

/* FIN Media queries de ubicacion */


/* ============================================================
   ESTILOS DE LA GALERIA MULTIMEDIA
   ============================================================ */

/* INICIO Video HTML5 */
.gu-video-caja {
    max-width: 900px;
    margin: 0 auto;
}

.gu-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    background-color: var(--gu-dark);
}

.gu-video-pie {
    text-align: center;
    font-size: 13px;
    color: var(--gu-secondary);
    margin-top: 12px;
}

/* FIN Video HTML5 */


/* INICIO Filtros de la galeria */
.gu-galeria-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.gu-galeria-filtro {
    background-color: var(--gu-white);
    border: 1px solid var(--gu-dark);
    color: var(--gu-dark);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.gu-galeria-filtro:hover {
    background-color: #e9e9e9;
}

.gu-galeria-filtro.activo {
    background-color: var(--gu-dark);
    border-color: var(--gu-dark);
    color: var(--gu-white);
}

/* FIN Filtros de la galeria */


/* INICIO Cuadricula de imagenes */
.gu-galeria-grid {
    margin-top: 6px;
}

.gu-galeria-item {
    position: relative;
    margin-bottom: 22px;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--gu-white);
    border: 1px solid #e4e4e4;
    cursor: pointer;
}

.gu-galeria-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s;
}

.gu-galeria-item:hover img {
    transform: scale(1.06);
}

.gu-galeria-item figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid #f0f0f0;
}

.gu-galeria-titulo {
    font-size: 13px;
    color: var(--gu-dark);
}

.gu-galeria-item figcaption i {
    font-size: 13px;
    color: var(--gu-secondary);
}

.gu-galeria-item:hover figcaption i {
    color: var(--gu-dark);
}

/* FIN Cuadricula de imagenes */


/* INICIO Visor ampliado */
#gu-visor .modal-content {
    border: none;
    border-radius: 12px;
}

#gu-visor .modal-header {
    border-bottom: 1px solid #f0f0f0;
}

.gu-visor-titulo {
    font-size: 20px;
    margin: 0;
}

.gu-visor-img {
    max-height: 420px;
    background-color: var(--gu-light);
    border-radius: 10px;
}

.gu-visor-epigrafe {
    font-size: 14px;
    color: var(--gu-text);
    margin: 16px 0 0 0;
}

/* FIN Visor ampliado */


/* ============================================================
   ESTILOS DE LAS PAGINAS DE CONTENIDO
   (rutina, nosotros, acerca y autor)
   ============================================================ */

/* INICIO Bloques de texto largo */
.gu-texto p {
    margin-bottom: 16px;
}

.gu-texto h2 {
    font-size: 28px;
    margin-bottom: 16px;
}

.gu-texto h3 {
    font-size: 21px;
    margin-top: 34px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e4e4;
}

.gu-texto-antetitulo {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gu-secondary);
    margin-bottom: 6px;
}

.gu-lista-fuentes {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.gu-lista-fuentes li {
    padding: 8px 0 8px 22px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    position: relative;
}

.gu-lista-fuentes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 8px;
    height: 1px;
    background-color: var(--gu-dark);
}

.gu-nota {
    background-color: var(--gu-light);
    border-left: 3px solid var(--gu-dark);
    padding: 14px 18px;
    font-size: 14px;
    margin-top: 20px;
}

/* FIN Bloques de texto largo */


/* INICIO Pagina de rutina */
.gu-rutina-intro {
    max-width: 720px;
    margin: 0 auto 26px auto;
    text-align: center;
}

.gu-rutina-controles {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 26px;
}

.gu-rutina-controles button {
    font-size: 13px;
    padding: 7px 18px;
    cursor: pointer;
}

.gu-rutina-lista {
    max-width: 820px;
    margin: 0 auto;
}

.gu-rutina-paso {
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    background-color: var(--gu-white);
}

.gu-rutina-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gu-rutina-cabecera:hover {
    background-color: var(--gu-light);
}

.gu-rutina-num {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--gu-dark);
    color: var(--gu-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gu-font-titulo);
    font-size: 17px;
}

.gu-rutina-titulo {
    flex-grow: 1;
}

.gu-rutina-titulo h3 {
    font-size: 18px;
    margin: 0;
}

.gu-rutina-momento {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gu-secondary);
}

.gu-rutina-flecha {
    color: var(--gu-secondary);
    transition: transform 0.3s;
}

.gu-rutina-paso.abierto .gu-rutina-flecha {
    transform: rotate(180deg);
}

/* El cuerpo se muestra solo cuando el paso esta abierto */
.gu-rutina-cuerpo {
    display: none;
    padding: 0 18px 20px 18px;
    border-top: 1px solid #f0f0f0;
}

.gu-rutina-paso.abierto .gu-rutina-cuerpo {
    display: block;
}

.gu-rutina-cuerpo p {
    font-size: 14px;
    margin-top: 16px;
}

.gu-rutina-consejo {
    background-color: var(--gu-light);
    padding: 12px 15px;
    border-radius: 8px;
}

.gu-rutina-productos {
    margin-top: 16px;
}

.gu-rutina-etiqueta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gu-secondary);
}

.gu-rutina-productos ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.gu-rutina-productos li {
    font-size: 13px;
    border: 1px solid #e4e4e4;
    border-radius: 50px;
    padding: 4px 14px;
}

.gu-rutina-enlace {
    font-size: 13px;
    color: var(--gu-dark);
    border-bottom: 1px solid var(--gu-dark);
}

/* FIN Pagina de rutina */


/* INICIO Pagina de nosotros */
.gu-nosotros-img {
    border-radius: 12px;
    background-color: var(--gu-light);
    padding: 30px;
}

.gu-servicio {
    text-align: center;
    padding: 24px 16px;
    background-color: var(--gu-white);
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    height: 100%;
    margin-bottom: 20px;
}

.gu-servicio i {
    font-size: 26px;
    color: var(--gu-dark);
    display: block;
    margin-bottom: 12px;
}

.gu-servicio h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.gu-servicio p {
    font-size: 14px;
    margin: 0;
}

/* FIN Pagina de nosotros */


/* INICIO Pagina de acerca */
.gu-tec-grid {
    margin-bottom: 10px;
}

.gu-tec {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.gu-tec i {
    font-size: 20px;
    color: var(--gu-dark);
}

/* FIN Pagina de acerca */


/* INICIO Pagina del autor */
.gu-autor-tarjeta {
    background-color: var(--gu-light);
    border-radius: 12px;
    padding: 26px 22px;
}

.gu-autor-foto {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--gu-white);
}

.gu-autor-nombre {
    font-size: 28px;
    margin-bottom: 18px;
}

.gu-autor-datos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gu-autor-datos li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e4e4e4;
    font-size: 14px;
}

.gu-autor-datos li:last-child {
    border-bottom: none;
}

.gu-autor-datos i {
    font-size: 16px;
    color: var(--gu-dark);
    width: 22px;
}

.gu-autor-datos span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gu-secondary);
    min-width: 70px;
}

/* FIN Pagina del autor */


/* INICIO Media queries de contenido */
@media (min-width: 768px) {

    .gu-texto h2 {
        font-size: 34px;
    }

    .gu-autor-tarjeta {
        padding: 34px 32px;
    }

    .gu-autor-foto {
        width: 200px;
        height: 200px;
    }
}

/* FIN Media queries de contenido */


/* INICIO Aviso del catalogo externo */
.gu-catalogo-aviso {
    text-align: center;
    font-size: 13px;
    color: var(--gu-secondary);
    margin: 8px 0 0 0;
}

.gu-catalogo-aviso a {
    color: var(--gu-dark);
    border-bottom: 1px solid var(--gu-dark);
}

.gu-catalogo-aviso a:hover {
    color: var(--gu-secondary);
    border-color: var(--gu-secondary);
}

/* Separacion entre los dos botones del home */
#gu-destacados-grid ~ .text-center .gu-btn-outline,
.text-center .gu-btn-outline + .gu-btn-outline {
    margin-top: 8px;
}

@media (min-width: 576px) {
    .text-center .gu-btn-outline + .gu-btn-outline {
        margin-top: 0;
        margin-left: 8px;
    }
}

/* FIN Aviso del catalogo externo */


/* ============================================================
   AJUSTE DE LA BARRA DE REDES SOCIALES
   Los circulos eran pequenos y el icono se perdia sobre el
   fondo negro. Se agrandan y se refuerza el contraste.
   ============================================================ */

/* INICIO Barra de redes mejorada */
#gu-social {
    padding: 28px 0;
}

/* Los textos guia se ven en blanco pleno, no en gris */
#gu-social .gu-social-texto {
    color: var(--gu-white);
    font-size: 11px;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
    opacity: 0.85;
}

/* Circulo mas grande y con borde para separarlo del fondo */
#gu-social .gu-social-icono {
    width: 46px;
    height: 46px;
    margin: 0 6px 0 0;
    font-size: 21px;
    background-color: var(--gu-white);
    color: #000000;
    border: 2px solid var(--gu-white);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.12);
}

/* Al pasar el mouse se invierte: fondo negro y borde blanco */
#gu-social .gu-social-icono:hover {
    background-color: transparent;
    color: var(--gu-white);
    border-color: var(--gu-white);
    transform: translateY(-3px);
}

/* WhatsApp mantiene su verde de marca, con borde para destacarlo */
#gu-social .gu-whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: var(--gu-white);
}

#gu-social .gu-whatsapp:hover {
    background-color: transparent;
    border-color: #25D366;
    color: #25D366;
}

/* En pantallas grandes los iconos crecen un poco mas */
@media (min-width: 768px) {

    #gu-social {
        padding: 32px 0;
    }

    #gu-social .gu-social-icono {
        width: 50px;
        height: 50px;
        font-size: 23px;
        margin: 0 8px 0 0;
    }

    /* Los de la derecha se alinean al borde */
    #gu-social .text-md-end .gu-social-icono {
        margin: 0 0 0 8px;
    }
}

/* FIN Barra de redes mejorada */


/* ============================================================
   CORRECCION DE CONTRASTE EN EL FOOTER

   Los iconos de la lista de contacto usaban --gu-primary, que
   con la paleta blanco y negro paso a ser negro. Sobre el fondo
   negro del footer quedaban invisibles.
   ============================================================ */

/* INICIO Iconos del footer */
#gu-footer i {
    color: var(--gu-white);
    opacity: 0.85;
    margin-right: 10px;
    font-size: 15px;
    width: 18px;
    display: inline-block;
    text-align: center;
}

/* Al pasar sobre el enlace, el icono acompana el resaltado */
#gu-footer li:hover i {
    opacity: 1;
}

/* Los enlaces del footer tambien ganan contraste */
#gu-footer a {
    color: rgba(255, 255, 255, 0.85);
}

#gu-footer a:hover {
    color: var(--gu-white);
    text-decoration: underline;
}

/* Alinea el icono con el texto cuando la linea se parte en dos */
#gu-footer .gu-footer-col li {
    display: flex;
    align-items: flex-start;
    gap: 0;
    line-height: 1.6;
}

/* FIN Iconos del footer */


/* INICIO Ajuste para varios videos */
.gu-video-grid .gu-video-caja {
    max-width: 100%;
}

.gu-nosotros-video {
    border-radius: 12px;
}

/* El poster se ajusta sin deformarse */
.gu-video {
    object-fit: cover;
    max-height: 460px;
}

/* FIN Ajuste para varios videos */

/* ============================================================
   ESTILOS DE LA PAGINA DEL DESARROLLADOR
   Agregar al final de assets/css/style.css
   ============================================================ */

/* INICIO Tarjeta de perfil */
.gu-perfil {
    background-color: var(--gu-light);
    border-radius: 12px;
    padding: 26px 22px;
}

.gu-perfil-rol {
    font-size: 15px;
    color: var(--gu-secondary);
    margin-bottom: 14px;
}

.gu-perfil-bio {
    font-size: 15px;
    margin-bottom: 20px;
}

.gu-perfil-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gu-perfil-enlaces .gu-btn,
.gu-perfil-enlaces .gu-btn-outline {
    padding: 9px 20px;
    font-size: 13px;
}

/* FIN Tarjeta de perfil */


/* INICIO Encabezado de seccion alineado a la izquierda */
.gu-section-header.text-start {
    text-align: left;
    margin-bottom: 26px;
}

/* FIN Encabezado alineado */


/* INICIO Bloques de tecnologias */
.gu-stack {
    background-color: var(--gu-white);
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 22px 20px;
    height: 100%;
    margin-bottom: 20px;
}

.gu-stack h3 {
    font-size: 17px;
    margin-bottom: 14px;
}

.gu-stack h3 i {
    color: var(--gu-dark);
    margin-right: 6px;
}

.gu-stack ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gu-stack li {
    font-size: 14px;
    padding: 5px 0 5px 16px;
    position: relative;
}

.gu-stack li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 1px;
    background-color: var(--gu-secondary);
}

/* FIN Bloques de tecnologias */


/* INICIO Caso de estudio */
.gu-caso {
    border-left: 2px solid var(--gu-dark);
    padding: 4px 0 4px 18px;
    height: 100%;
    margin-bottom: 24px;
}

.gu-caso-num {
    font-family: var(--gu-font-titulo);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--gu-secondary);
    display: block;
    margin-bottom: 6px;
}

.gu-caso h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.gu-caso p {
    font-size: 14px;
    margin: 0;
}

.gu-caso-subtitulo {
    font-size: 21px;
    margin-top: 34px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e4e4;
}

/* FIN Caso de estudio */


/* INICIO Media queries del desarrollador */
@media (min-width: 768px) {

    .gu-perfil {
        padding: 34px 32px;
    }

    .gu-perfil-rol {
        font-size: 16px;
    }
}

/* FIN Media queries del desarrollador */