/*!
Theme Name:  Mr Offroad Experience — Premium Offroad
Theme URI:   https://mroffroadexperience.com
Author:      Mr Offroad Experience
Author URI:  https://mroffroadexperience.com
Description: Tema custom premium para Mr Offroad Experience, tours en buggy offroad por la Costa Brava, Girona. Diseño minimalista de alta conversión con animaciones GSAP, sistema de reservas Booknetic y soporte multi-idioma (ES/EN/FR/DE).
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License:     Proprietary
License URI: https://mrbuggy.es/licencia
Text Domain: mrbuggy
Domain Path: /languages
Tags:        tourism, offroad, premium, booking, multilingual
*/

/* ============================================================
   MODERN CSS RESET
   Basado en Andy Bell Modern Reset + Josh Comeau CSS Reset
   ============================================================ */

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

* {
    margin: 0;
}

html {
    hanging-punctuation: first last;
    color-scheme: dark;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;            /* impide desbordamiento horizontal en toda la web
                                    sin romper la cabecera sticky (clip, no hidden) */
    max-width: 100%;
}

body {
    min-height: 100svh;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/* Evita imágenes deformadas en móvil cuando se limitan por ancho (preserva ratio). */
img, picture { height: auto; }

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p, li, figcaption {
    text-wrap: pretty;
}

ol, ul {
    list-style: none;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

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

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   CUSTOM PROPERTIES — DESIGN TOKENS
   ============================================================ */

:root {
    /* ---- Fondos ---- */
    --color-bg-primary:    #0A0A0A;
    --color-bg-secondary:  #141414;
    --color-bg-tertiary:   #1C1C1C;

    /* ---- Acentos dorado/naranja premium ---- */
    --color-accent:        #E8A33D;
    --color-accent-hover:  #F5B547;
    --color-accent-dark:   #B8821F;
    --color-accent-glow:   rgba(232, 163, 61, 0.40);
    --color-accent-subtle: rgba(232, 163, 61, 0.08);

    /* ---- Textos ---- */
    --color-text-primary:   #F5F5F0;
    --color-text-secondary: #A0A0A0;
    --color-text-muted:     #6B6B6B;

    /* ---- Bordes ---- */
    --color-border:        rgba(232, 163, 61, 0.15);
    --color-border-strong: rgba(232, 163, 61, 0.35);

    /* ---- Utilidad ---- */
    --color-success: #4ADE80;
    --color-error:   #EF4444;
    --color-warning: #F59E0B;

    /* ---- Tipografía ---- */
    --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-accent:  'Fraunces', Georgia, serif;

    /* ---- Escala tipográfica fluida (clamp) ---- */
    --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);
    --text-sm:   clamp(0.80rem, 1.8vw, 0.875rem);
    --text-base: clamp(0.90rem, 2vw,   1rem);
    --text-lg:   clamp(1.00rem, 2.2vw, 1.125rem);
    --text-xl:   clamp(1.10rem, 2.5vw, 1.25rem);
    --text-2xl:  clamp(1.25rem, 3vw,   1.5rem);
    --text-3xl:  clamp(1.50rem, 4vw,   1.875rem);
    --text-4xl:  clamp(1.80rem, 5vw,   2.25rem);
    --text-5xl:  clamp(2.20rem, 6vw,   3rem);
    --text-6xl:  clamp(2.80rem, 8vw,   4rem);
    --text-7xl:  clamp(3.50rem, 10vw,  5.5rem);
    --text-hero: clamp(4.00rem, 13vw,  9rem);

    /* ---- Espaciado (escala 4px) ---- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;

    /* ---- Layout ---- */
    --container-max:  1280px;
    --container-lg:   1100px;
    --container-md:   768px;
    --gutter:         clamp(1rem, 5vw, 2.5rem);
    --section-pad:    clamp(4rem, 10vw, 8rem);

    /* ---- Bordes/Radios ---- */
    --radius-sm: 2px;
    --radius:    4px;
    --radius-lg: 8px;
    --radius-xl: 16px;
    --radius-2xl:24px;
    --radius-full: 999px;

    /* ---- Espaciado extra ---- */
    --space-7:  28px;
    --space-14: 56px;

    /* ---- Transiciones ---- */
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-slow:    400ms ease;
    --ease-premium:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart:  cubic-bezier(0.76, 0, 0.24, 1);

    /* ---- Sombras ---- */
    --shadow-glow:   0 0 40px var(--color-accent-glow);
    --shadow-glow-sm:0 0 20px rgba(232, 163, 61, 0.25);
    --shadow-card:   0 8px 32px rgba(0, 0, 0, 0.60);
    --shadow-card-lg:0 16px 64px rgba(0, 0, 0, 0.80);
    --shadow-btn:    0 4px 20px rgba(232, 163, 61, 0.25);
    --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* ---- Z-index ---- */
    --z-below:    -1;
    --z-base:      0;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-cursor:    999;
}