/*
Theme Name:        Inka Trails Peru
Theme URI:         https://inkatrailsperu.com
Description:       Tema personalizado para Inka Trails Peru — agencia de viajes especializada en caminatas y aventuras en los Andes peruanos. Desarrollado con diseño moderno, optimizado para conversión y experiencia de usuario premium.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
Author:            Cusco Creativos
Author URI:        https://cuscocreatives.com
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       inka-trails-peru
Tags:              travel, tourism, trekking, woocommerce, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ============================================================
   DESIGN TOKENS — Inka Trails Peru
   Paleta de colores y tipografías: Cusco Creativos
   ============================================================ */

:root {
    /* === COLORES PRIMARIOS (Red Wine / Rojo Vino) === */
    --color-primary:        #930001;
    --color-primary-light:  #B30001;
    --color-primary-dark:   #6B0001;
    --color-primary-50:     rgba(147, 0, 1, 0.05);
    --color-primary-100:    rgba(147, 0, 1, 0.10);
    --color-primary-200:    rgba(147, 0, 1, 0.20);

    /* === COLOR CREMA (Cream) === */
    --color-cream:          #FFFFC2;
    --color-cream-light:    #FFFFD6;
    --color-cream-dark:     #F5F5B0;

    /* === COLORES SECUNDARIOS (Gold / Amber) === */
    --color-secondary:      #C9A96E;
    --color-secondary-light: #D4BA85;
    --color-secondary-dark:  #A8894E;
    --color-secondary-50:   rgba(201, 169, 110, 0.15);

    /* === COLORES TERCIARIOS (Warm Brown) === */
    --color-tertiary:       #7E6B5A;
    --color-tertiary-light: #9A8674;
    --color-tertiary-dark:  #5E4F41;
    --color-tertiary-50:    rgba(126, 107, 90, 0.10);

    /* === NEUTROS (Warm tone) === */
    --color-neutral:        #FAF9F7;
    --color-neutral-100:    #F4F2EF;
    --color-neutral-200:    #E9E6E1;
    --color-neutral-300:    #D5D0C9;
    --color-neutral-400:    #A9A19A;
    --color-neutral-500:    #7C746A;
    --color-neutral-600:    #5C554C;
    --color-neutral-700:    #3E3632;
    --color-neutral-800:    #2B201E;
    --color-neutral-900:    #1C0F0D;

    /* === SEMÁNTICOS === */
    --color-text:           #1C0F0D;
    --color-text-muted:     #7C746A;
    --color-text-light:     #A9A19A;
    --color-text-inverse:   #FAF9F7;
    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F4F2EF;
    --color-border:         #E9E6E1;
    --color-border-dark:    #D5D0C9;

    /* === ESTADO === */
    --color-success:        #2E7D32;
    --color-warning:        #E65100;
    --color-error:          #7A1B1B;
    --color-info:           #5E4F41;

    /* === TIPOGRAFÍA === */
    --font-heading:         'EB Garamond', Georgia, serif;
    --font-body:            'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --font-label:           'Manrope', 'Helvetica Neue', Arial, sans-serif;

    --font-size-xs:         0.75rem;   /* 12px */
    --font-size-sm:         0.875rem;  /* 14px */
    --font-size-base:       1rem;      /* 16px */
    --font-size-md:         1.125rem;  /* 18px */
    --font-size-lg:         1.25rem;   /* 20px */
    --font-size-xl:         1.5rem;    /* 24px */
    --font-size-2xl:        1.875rem;  /* 30px */
    --font-size-3xl:        2.25rem;   /* 36px */
    --font-size-4xl:        3rem;      /* 48px */
    --font-size-5xl:        3.75rem;   /* 60px */
    --font-size-6xl:        4.5rem;    /* 72px */

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold: 800;

    --line-height-tight:    1.2;
    --line-height-snug:     1.375;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.625;
    --line-height-loose:    2;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:  0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* === ESPACIADO === */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;
    --space-40:  10rem;

    /* === BORDES === */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   24px;
    --radius-3xl:   32px;
    --radius-full:  9999px;

    /* === SOMBRAS === */
    --shadow-xs:    0 1px 2px rgba(28, 15, 13, 0.05);
    --shadow-sm:    0 2px 4px rgba(28, 15, 13, 0.08), 0 1px 2px rgba(28, 15, 13, 0.04);
    --shadow-md:    0 4px 12px rgba(28, 15, 13, 0.10), 0 2px 6px rgba(28, 15, 13, 0.05);
    --shadow-lg:    0 8px 24px rgba(28, 15, 13, 0.12), 0 4px 12px rgba(28, 15, 13, 0.06);
    --shadow-xl:    0 16px 40px rgba(28, 15, 13, 0.14), 0 8px 20px rgba(28, 15, 13, 0.08);
    --shadow-2xl:   0 24px 60px rgba(28, 15, 13, 0.18);
    --shadow-primary: 0 4px 20px rgba(122, 27, 27, 0.30);
    --shadow-tertiary: 0 4px 20px rgba(126, 107, 90, 0.30);

    /* === TRANSICIONES === */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === LAYOUT === */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1280px;
    --container-2xl:  1440px;
    --container-full: 100%;

    --header-height:  154px;
    --header-height-mobile: 64px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-800);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    padding-left: var(--space-6);
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
}

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--2xl { max-width: var(--container-2xl); }
.container--full { max-width: var(--container-full); }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-label);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Primary */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-primary);
}

/* Secondary (Outlined) */
.btn--secondary {
    background-color: transparent;
    color: var(--color-neutral-800);
    border-color: var(--color-neutral-800);
}

.btn--secondary:hover {
    background-color: var(--color-neutral-800);
    color: var(--color-text-inverse);
}

/* Inverted */
.btn--inverted {
    background-color: var(--color-neutral-800);
    color: var(--color-text-inverse);
    border-color: var(--color-neutral-800);
}

.btn--inverted:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Outlined */
.btn--outlined {
    background-color: transparent;
    color: var(--color-neutral-700);
    border-color: var(--color-border-dark);
}

.btn--outlined:hover {
    border-color: var(--color-neutral-700);
    background-color: var(--color-neutral-100);
}

/* Tamaños */
.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
}

/* ============================================================
   UTILIDADES BÁSICAS
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.itp-video-modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.itp-video-modal--active {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
}

.text-primary    { color: var(--color-primary); }
.text-secondary  { color: var(--color-secondary); }
.text-tertiary   { color: var(--color-tertiary); }
.text-muted      { color: var(--color-text-muted); }
.text-inverse    { color: var(--color-text-inverse); }

.bg-primary      { background-color: var(--color-primary); }
.bg-secondary    { background-color: var(--color-secondary); }
.bg-tertiary     { background-color: var(--color-tertiary); }
.bg-neutral      { background-color: var(--color-neutral); }
.bg-alt          { background-color: var(--color-bg-alt); }

/* WordPress Alignment */
.alignleft    { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright   { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter  { display: block; margin: var(--space-4) auto; }
.alignwide    { width: calc(100% + var(--space-16)); margin-left: calc(-1 * var(--space-8)); }
.alignfull    { width: 100vw; margin-left: calc(50% - 50vw); }

/* ============================================================
   OCULTAR TOTALMENTE SECCIONES DE COMENTARIOS
   ============================================================ */

.comments-area,
.comments-section,
#comments,
#respond,
.comment-respond,
.comment-form,
.woocommerce-tabs #tab-reviews,
.woocommerce-Reviews {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   BREADCRUMBS / MIGAS DE PAN (DISEÑO EDITORIAL & WOOCOMMERCE)
   ============================================================ */

nav.breadcrumbs,
.breadcrumbs,
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
    padding: var(--space-4) 0;
    margin-bottom: var(--space-2);
}

.breadcrumbs__list,
nav.breadcrumbs ol,
nav.breadcrumbs ul,
.woocommerce-breadcrumb ol,
.wc-block-breadcrumbs ol {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.breadcrumbs__item,
nav.breadcrumbs li,
.woocommerce-breadcrumb li,
.wc-block-breadcrumbs li {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-xs) !important;
    color: var(--color-text-muted) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumbs__item:not(:last-child)::after,
nav.breadcrumbs li:not(:last-child)::after,
.woocommerce-breadcrumb li:not(:last-child)::after,
.wc-block-breadcrumbs li:not(:last-child)::after {
    content: '›' !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    color: var(--color-neutral-400) !important;
    font-size: 13px !important;
    font-weight: normal !important;
}

.breadcrumbs__item--current::after,
.breadcrumbs__item:last-child::after,
nav.breadcrumbs li:last-child::after {
    content: none !important;
}

.breadcrumbs__item a,
nav.breadcrumbs a,
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-medium) !important;
    transition: color 0.2s ease !important;
}

.breadcrumbs__item a:hover,
nav.breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover {
    color: var(--color-neutral-900) !important;
    text-decoration: underline !important;
}

.breadcrumbs__item--current,
.breadcrumbs__item [aria-current="page"],
nav.breadcrumbs [aria-current="page"],
.woocommerce-breadcrumb [aria-current="page"] {
    color: var(--color-neutral-900) !important;
    font-weight: var(--font-weight-semibold) !important;
}