/*!
Theme Name: Vlmm Theme
Theme URI: http://underscores.me/
Author: vicmac axes
Author URI: https://www.inkachallengeperu.com/
Description: tema para agencias y tiendas
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vlmm_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

*/

/* ==========================================================================
   TIPOGRAFÍA INSPIRADA EN SALKANTAY TREK OPERATOR
   ========================================================================== */

:root {
    /* Tipografía similar a la referencia (Montserrat para fuerza, Open Sans para lectura) */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    /* Colores de la Referencia */
    --color-title: #1a1a1a;       /* Negro profundo para títulos */
    --color-text: #181c18;        /* Gris oscuro suave para párrafos */
    --color-accent: #D4AF37;      /* Tu Dorado Inca */
    --color-bg-light: #f9f9f9;    /* Fondo de secciones suave */
}

/* 1. Reset y Cuerpo */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8; /* Espaciado generoso para que el viajero no se canse al leer */
    color: var(--color-text);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

/* 2. Jerarquía de Títulos (Headings) */
h1, h2, h3, h4, h5, h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,  {
    font-family: var(--font-heading);
    color: var(--color-title);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

/* Título de Página (Hero) */
h1, .entry-content h1 {
    font-size: 3rem; /* 48px aprox */
    letter-spacing: -1.5px;
}

/* Títulos de Secciones (Clave en Salkantay Trek Operator) */
h2, .entry-content h2  {
    font-size: 2.25rem; /* 36px */
    letter-spacing: -1px;
    position: relative;
    padding-bottom: 15px;
}

/* Títulos de Cards o Subsecciones */
h3, .entry-content h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
}

h4, h5, h6 { font-size: 1.25rem; }

/* 3. Párrafos y Listas (Blocks Content) */
p, .entry-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem; /* Un pelín más grande para facilitar la lectura */
    line-height: 1.85;  /* Espaciado generoso para que el ojo descanse */
    color: #0e0013;     /* Un gris muy oscuro, menos agresivo que el negro puro */
    margin-bottom: 1.7rem;
    text-align: justify; 
    hyphens: auto;      /* Ayuda al justificado en móviles para que no queden huecos blancos */
}

/* Mejora para los párrafos dentro de los itinerarios o pestañas */
.tab-pane p {
    margin-bottom: 1.2rem;
}

/* Resaltado para textos importantes dentro de párrafos */
p strong {
    font-family: 'Montserrat', sans-serif; /* Volvemos a Montserrat solo para negritas */
    font-weight: 700;
    color: var(--color-title);
}

/* Estilo para las listas de itinerarios o servicios (li) */
ul, ol {
    margin-bottom: 1.5rem;
}

li {
    margin-bottom: 0.75rem; /* Más espacio entre puntos para lectura rápida */
}
/* ==========================================================================
   ICONOS "CHECK" PARA LISTAS EN EL CONTENIDO (WordPress Editor)
   ========================================================================== */

.entry-content ul {
    list-style: none; /* Quitamos el punto negro por defecto */
    padding-left: 5px;
    margin-bottom: 1.8rem;
}

.entry-content ul li {
    position: relative;
    padding-left: 35px; /* Espacio para el icono */
    margin-bottom: 12px;
    line-height: 1.6;
    font-family: 'Open Sans', sans-serif; /* Consistencia con tus párrafos */
}

/* El Icono "Cierto / Verdad" */
.entry-content ul li::before {
    content: "\f058"; /* Código Unicode de fa-check-circle en FontAwesome 6 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #D4AF37; /* Tu Dorado Inca */
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* Efecto visual al pasar el mouse por la lista */
.entry-content ul li:hover::before {
    transform: scale(1.2);
    color: #198754; /* Cambia a verde éxito al pasar el mouse para dar feedback positivo */
}

/* Si tienes listas dentro de otras listas (anidadas) */
.entry-content ul li ul {
    margin-top: 10px;
    margin-bottom: 0;
}

.entry-content ul li ul li::before {
    content: "\f105"; /* Una flecha simple para sub-elementos */
    color: #6c757d;
}

/* 4. Enlaces y Botones */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

a:hover {
    color: var(--color-title);
    text-decoration: underline;
}

/* 5. Clases de Soporte para el "Look & Feel" de la referencia */

/* Subtítulos pequeños arriba de los H2 */
.subtitle-top {
    font-family: var(--font-heading);
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

/* Bloques de texto resaltados (Intro de tours) */

.lead-text {
    font-size: 1.15rem;
    color: #666;
    font-weight: 400;
    line-height: 1.6;
}

/* Responsive: Ajustar tamaños para móvil */
@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.85rem; }
    h3 { font-size: 1.35rem; }
    body { font-size: 15px; } /* Texto ligeramente más pequeño en móviles */
}
/* Blockquotes (Citas para testimonios de viajeros) */
blockquote {
    padding: 1rem 2rem;
    margin: 2rem 0;
    border-left: 5px solid var(--color-dorado-inca);
    background-color: #f8f9fa;
    font-style: italic;
    font-size: 1.1rem;
}


/* Estilos para Trekking Programs */
.trek-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
}

.trek-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.trek-image-container {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.trek-img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.trek-card:hover .trek-img {
    transform: scale(1.1);
}

.trek-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
}

.trek-card .card-title a {
    transition: color 0.3s ease;
}

.trek-card:hover .card-title a {
    color: #D4AF37 !important; /* Tu Dorado Inca */
}

/* Ajuste de tipografía para el título principal */
.trekking-programs h2 {
    max-width: 800px;
    margin: 0 auto 20px;
}
/* Estilos para los botones de las Cards */
.trek-card .btn-outline-dark {
    border-width: 2px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.trek-card .btn-primary {
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.trek-card .btn-primary:hover {
    background-color: #b8962d !important; /* Dorado un poco más oscuro al pasar el mouse */
}

/* Efecto en el título e icono */
.trek-card .card-title i {
    transition: transform 0.3s ease;
}

.trek-card:hover .card-title i {
    transform: rotate(10deg) scale(1.2);
}

/* Para asegurar que todas las tarjetas tengan el mismo tamaño de botones */
.card-body {
    min-height: 250px;
}

#footer {
    background-color: #1a1a1a; /* Fondo oscuro profesional */
    color: #ffffff;
}

#footer h3 {
    color: #D4AF37; /* Tu Dorado Inca */
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.footer-list a {
    color: #adb5bd;
    transition: all 0.3s ease;
}

.footer-list a:hover {
    color: #D4AF37;
    padding-left: 5px;
}

.social-icons a {
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.social-icons a:hover {
    transform: translateY(-5px);
    filter: brightness(1.2);
}

.contact-info li {
    font-size: 0.95rem;
}
/* ==========================================================================
   LISTAS DEL FOOTER CON ICONOS (Check / Flecha)
   ========================================================================== */

.footer-list {
    padding-left: 0;
    list-style: none;
}

.footer-list li {
    position: relative;
    padding-left: 25px; /* Espacio para el icono */
    margin-bottom: 12px;
}

/* Insertar el icono de FontAwesome automáticamente */
.footer-list li::before {
    content: "\f00c"; /* Código Unicode del icono 'check' de FontAwesome 6 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Requerido para iconos 'solid' */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-accent); /* Tu Dorado Inca #D4AF37 */
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* Efecto Hover: Que el icono se mueva un poco */
.footer-list li:hover::before {
    transform: scale(1.2);
    color: #fff; /* O el color que prefieras al pasar el mouse */
}

.footer-list a {
    color: #adb5bd;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-list a:hover {
    color: #fff;
    transform: translateX(5px); /* Desplazamiento sutil hacia la derecha */
}