/* style.css */

/* Variables CSS para colores y espaciado */
:root {
    /* Colores */
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-400: #60a5fa;
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-600: #16a34a;
    --color-orange-400: #fb923c;
    --color-orange-100: #fff7ed;
    --color-gray-50: #f9fafb;
    --color-gray-900: #111827;
    --color-gray-800: #1f2937;
    --color-gray-700: #374151;
    --color-gray-600: #4b5563;
    --color-gray-400: #9ca3af;
    --color-gray-300: #d1d5db;
    --color-white: #ffffff;
    --color-yellow-400: #facc15;

    /* Espaciado (basado en rem de Tailwind) */
    --spacing-px-4: 1rem; /* 16px */
    --spacing-py-2: 0.5rem; /* 8px */
    --spacing-py-4: 1rem; /* 16px */
    --spacing-py-6: 1.5rem; /* 24px */
    --spacing-py-8: 2rem; /* 32px */
    --spacing-py-12: 3rem; /* 48px */
    --spacing-py-20: 5rem; /* 80px */
    --spacing-py-32: 8rem; /* 128px */
    --spacing-mb-2: 0.5rem; /* 8px */
    --spacing-mb-3: 0.75rem; /* 12px */
    --spacing-mb-4: 1rem; /* 16px */
    --spacing-mb-6: 1.5rem; /* 24px */
    --spacing-mb-16: 4rem; /* 64px */
    --spacing-mt-2: 0.5rem; /* 8px */
    --spacing-mt-4: 1rem; /* 16px */
    --spacing-mt-6: 1.5rem; /* 24px */
    --spacing-mt-8: 2rem; /* 32px */
    --spacing-mt-12: 3rem; /* 48px */
    --spacing-mr-1: 0.25rem; /* 4px */
    --spacing-mr-2: 0.5rem; /* 8px */
    --spacing-mr-4: 1rem; /* 16px */
    --spacing-ml-2: 0.5rem; /* 8px */
    --spacing-ml-3: 0.75rem; /* 12px */

    /* Tamaños de fuente */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-6xl: 3.75rem; /* 60px */

    /* Border Radius */
    --border-radius-lg: 0.5rem; /* 8px */
    --border-radius-xl: 0.75rem; /* 12px */
    --border-radius-2xl: 1rem; /* 16px */
    --border-radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Base styles */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-gray-700); /* Default text color */
}

.page-container {
    min-height: 100vh;
    background-color: var(--color-white);
}

/* Header */
.header {
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-content {
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-px-4); /* px-4 */
    padding-right: var(--spacing-px-4); /* px-4 */
    height: 4rem; /* h-16 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}

.logo-icon-wrapper {
    position: relative;
}

.logo-icon {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    color: var(--color-blue-600);
}

.logo-dot {
    position: absolute;
    top: -0.25rem; /* -top-1 */
    right: -0.25rem; /* -right-1 */
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    background-color: var(--color-orange-400);
    border-radius: var(--border-radius-full);
}

.logo-text {
    font-size: var(--font-size-2xl);
    font-weight: 700; /* font-bold */
    color: var(--color-gray-800);
}

.nav-desktop {
    display: none; /* hidden by default, shown on md breakpoint */
    align-items: center;
    gap: 2rem; /* space-x-8 */
}

.nav-link {
    color: var(--color-gray-700);
    transition-property: color;
    transition-duration: 150ms; /* transition-colors */
    font-weight: 500; /* font-medium */
}

.nav-link:hover {
    color: var(--color-blue-600);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem; /* space-x-4 */
}

.cta-button-header {
    display: none; /* hidden by default, shown on md breakpoint */
    align-items: center;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: var(--color-blue-600);
    color: var(--color-white);
    border-radius: var(--border-radius-lg);
    transition-property: background-color;
    transition-duration: 150ms; /* transition-colors */
    font-weight: 600; /* font-semibold */
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.cta-button-header:hover {
    background-color: var(--color-blue-700);
}

.icon-button {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    margin-right: 0.5rem; /* mr-2 */
}

.mobile-menu-toggle {
    padding: 0.5rem; /* p-2 */
    border: none;
    background: none;
    cursor: pointer;
}

.icon-menu {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: var(--color-gray-700);
}

.nav-mobile {
    display: none; /* hidden by default, controlled by JS */
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.nav-mobile-content {
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
    padding-top: 0.5rem; /* pt-2 */
    padding-bottom: 0.75rem; /* pb-3 */
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* space-y-1 */
}

.nav-mobile-link {
    display: block;
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: var(--font-size-base);
    font-weight: 500; /* font-medium */
    color: var(--color-gray-700);
    transition-property: background-color, color;
    transition-duration: 150ms;
}

.nav-mobile-link:hover {
    background-color: var(--color-gray-50);
    color: var(--color-blue-600);
}

.cta-button-mobile {
    width: 100%; /* w-full */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: var(--color-blue-600);
    color: var(--color-white);
    border-radius: var(--border-radius-lg);
    transition-property: background-color;
    transition-duration: 150ms;
    font-weight: 600; /* font-semibold */
    margin-top: 0.5rem; /* mt-2 */
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.cta-button-mobile:hover {
    background-color: var(--color-blue-700);
}

/* Hero Section */
.hero-section {
    position: relative;
    background-image: linear-gradient(to bottom right, var(--color-blue-50), var(--color-white), var(--color-green-50));
    padding-top: var(--spacing-py-20); /* py-20 */
    padding-bottom: var(--spacing-py-20); /* py-20 */
}

.hero-content {
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-px-4);
    padding-right: var(--spacing-px-4);
    display: grid; /* lg:grid */
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* lg:gap-8 */
    align-items: center;
}

/* .hero-text-content styles are handled by grid-template-columns in media queries */

.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: 700; /* font-bold */
    color: var(--color-gray-900);
    line-height: 1.25; /* leading-tight */
}

.hero-title-highlight {
    color: var(--color-blue-600);
    display: block;
}

.hero-subtitle {
    margin-top: var(--spacing-mt-6); /* mt-6 */
    font-size: var(--font-size-xl);
    color: var(--color-gray-600);
    line-height: 1.625; /* leading-relaxed */
}

.hero-buttons {
    margin-top: var(--spacing-mt-8); /* mt-8 */
    display: flex;
    flex-direction: column; /* flex-col */
    gap: 1rem; /* gap-4 */
}

.button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem; /* px-8 py-4 */
    background-color: var(--color-blue-600);
    color: var(--color-white);
    border-radius: var(--border-radius-lg);
    transition-property: background-color;
    transition-duration: 150ms;
    font-weight: 600; /* font-semibold */
    font-size: var(--font-size-lg);
    border: none;
    cursor: pointer;
}

.button-primary:hover {
    background-color: var(--color-blue-700);
}

.icon-button-right {
    margin-left: 0.5rem; /* ml-2 */
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}

.button-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem; /* px-8 py-4 */
    background-color: var(--color-white);
    color: var(--color-blue-600);
    border: 2px solid var(--color-blue-600);
    border-radius: var(--border-radius-lg);
    transition-property: background-color, color, border-color;
    transition-duration: 150ms;
    font-weight: 600; /* font-semibold */
    font-size: var(--font-size-lg);
    cursor: pointer;
}

.button-secondary:hover {
    background-color: var(--color-blue-50);
}

.icon-button-left {
    margin-right: 0.5rem; /* mr-2 */
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}

.hero-image-container {
    margin-top: 3rem; /* mt-12 */
    /* lg:col-span-6 handled by grid-template-columns */
}

.relative-wrapper {
    position: relative;
}

.hero-image {
    border-radius: var(--border-radius-2xl);
    box-shadow: var(--shadow-2xl);
    width: 100%; /* w-full */
    height: auto; /* Ensure aspect ratio */
    display: block; /* Remove extra space below image */
}

.image-overlay-card {
    position: absolute;
    bottom: -1.5rem; /* -bottom-6 */
    left: -1.5rem; /* -left-6 */
    background-color: var(--color-white);
    padding: 1rem; /* p-4 */
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
}

.overlay-card-content {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
}

.overlay-icon-wrapper {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    background-color: var(--color-green-100);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-shield {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: var(--color-green-600);
}

.overlay-text-bold {
    font-weight: 600; /* font-semibold */
    color: var(--color-gray-900);
}

.overlay-text-sub {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Cómo Funciona Section */
.how-it-works-section {
    padding-top: var(--spacing-py-20);
    padding-bottom: var(--spacing-py-20);
    background-color: var(--color-white);
}

.section-content {
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-px-4);
    padding-right: var(--spacing-px-4);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-mb-16); /* mb-16 */
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700; /* font-bold */
    color: var(--color-gray-900);
}

.section-subtitle {
    margin-top: var(--spacing-mt-4); /* mt-4 */
    font-size: var(--font-size-xl);
    color: var(--color-gray-600);
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* gap-8 */
}

.step-card {
    text-align: center;
}

.step-icon-wrapper {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    background-color: var(--color-blue-100);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-mb-6); /* mb-6 */
    transition-property: background-color;
    transition-duration: 150ms;
}

.step-card:hover .step-icon-wrapper {
    background-color: var(--color-blue-100); /* Adjusted for hover, original was blue-200 */
}

.step-icon-green {
    background-color: var(--color-green-100);
}

.step-card:hover .step-icon-green {
    background-color: var(--color-green-100); /* Adjusted for hover, original was green-200 */
}

.step-icon-orange {
    background-color: var(--color-orange-100);
}

.step-card:hover .step-icon-orange {
    background-color: var(--color-orange-100); /* Adjusted for hover, original was orange-200 */
}

.step-icon {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    color: var(--color-blue-600); /* Default for blue icon wrapper */
}

.step-icon-green .step-icon {
    color: var(--color-green-600);
}

.step-icon-orange .step-icon {
    color: var(--color-orange-400);
}

.step-title {
    font-size: var(--font-size-xl);
    font-weight: 600; /* font-semibold */
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-mb-4); /* mb-4 */
}

.step-description {
    color: var(--color-gray-600);
    line-height: 1.625; /* leading-relaxed */
}

/* Destinos Destacados Section */
.featured-destinations-section {
    padding-top: var(--spacing-py-20);
    padding-bottom: var(--spacing-py-20);
    background-color: var(--color-gray-50);
}

.destinations-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* gap-8 */
}

.destination-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition-property: box-shadow;
    transition-duration: 150ms;
}

.destination-card:hover {
    box-shadow: var(--shadow-lg);
}

.destination-image {
    width: 100%; /* w-full */
    height: 12rem; /* h-48 */
    object-fit: cover;
    display: block; /* Remove extra space below image */
    background-color: #e0e0e0; /* Placeholder background */
    color: #333333; /* Placeholder text color */
}

.destination-info {
    padding: 1.5rem; /* p-6 */
}

.destination-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-mb-2); /* mb-2 */
}

.destination-title {
    font-size: var(--font-size-lg);
    font-weight: 600; /* font-semibold */
    color: var(--color-gray-900);
}

.verification-status {
    display: flex;
    align-items: center;
}

.icon-accessibility {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    color: var(--color-green-600);
    margin-right: 0.25rem; /* mr-1 */
}

.verification-text {
    font-size: var(--font-size-sm);
    color: var(--color-green-600);
    font-weight: 500; /* font-medium */
}

.star-rating {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-mb-3); /* mb-3 */
}

.star-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    stroke: currentColor; /* For stroke */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.star-icon.filled {
    color: var(--color-yellow-400);
    fill: currentColor;
}

.star-icon.empty {
    color: var(--color-gray-300);
    fill: none;
}

.review-count {
    margin-left: 0.5rem; /* ml-2 */
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.destination-description {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

/* La Comunidad Importa Section */
.community-section {
    padding-top: var(--spacing-py-20);
    padding-bottom: var(--spacing-py-20);
    background-color: var(--color-blue-600);
}

.section-title-white {
    font-size: var(--font-size-3xl);
    font-weight: 700; /* font-bold */
    color: var(--color-white);
}

.section-subtitle-blue {
    margin-top: var(--spacing-mt-4); /* mt-4 */
    font-size: var(--font-size-xl);
    color: var(--color-blue-100);
}

.testimonial-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-2xl);
    padding: 2rem; /* p-8 */
    box-shadow: var(--shadow-2xl);
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-mb-6); /* mb-6 */
}

.testimonial-avatar {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    border-radius: var(--border-radius-full);
    object-fit: cover;
    margin-right: 1rem; /* mr-4 */
    background-color: #e0e0e0; /* Placeholder background */
    color: #333333; /* Placeholder text color */
}

.testimonial-name {
    font-size: var(--font-size-lg);
    font-weight: 600; /* font-semibold */
    color: var(--color-gray-900);
}

.testimonial-role {
    color: var(--color-gray-600);
}

.testimonial-quote {
    font-size: var(--font-size-xl);
    color: var(--color-gray-700);
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: var(--spacing-mb-6); /* mb-6 */
}

.testimonial-verified-text {
    margin-left: 0.75rem; /* ml-3 */
    color: var(--color-gray-600);
}

.star-icon.filled-lg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    color: var(--color-yellow-400);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.community-cta-container {
    text-align: center;
    margin-top: 3rem; /* mt-12 */
}

.button-community-cta {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem; /* px-8 py-4 */
    background-color: var(--color-white);
    color: var(--color-blue-600);
    border-radius: var(--border-radius-lg);
    transition-property: background-color;
    transition-duration: 150ms;
    font-weight: 600; /* font-semibold */
    font-size: var(--font-size-lg);
    border: none;
    cursor: pointer;
}

.button-community-cta:hover {
    background-color: var(--color-blue-50);
}

/* Footer */
.footer {
    background-color: var(--color-gray-900);
    color: var(--color-gray-300);
}

.footer-content {
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-px-4);
    padding-right: var(--spacing-px-4);
    padding-top: var(--spacing-py-12); /* py-12 */
    padding-bottom: var(--spacing-py-12); /* py-12 */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* gap-8 */
}

/* .footer-col-main styles are handled by media queries below */

.logo-group-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
    margin-bottom: 1rem; /* mb-4 */
}

.logo-icon-footer {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    color: var(--color-blue-400);
}

.logo-dot-footer {
    position: absolute;
    top: -0.25rem; /* -top-1 */
    right: -0.25rem; /* -right-1 */
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    background-color: var(--color-orange-400);
    border-radius: var(--border-radius-full);
}

.logo-text-footer {
    font-size: var(--font-size-2xl);
    font-weight: 700; /* font-bold */
    color: var(--color-white);
}

.footer-description {
    color: var(--color-gray-400);
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 1.5rem; /* mb-6 */
}

.social-icons {
    display: flex;
    gap: 1rem; /* space-x-4 */
}

.social-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: var(--color-gray-400);
    cursor: pointer;
    transition-property: color;
    transition-duration: 150ms;
}

.social-icon:hover {
    color: var(--color-blue-400);
}

/* .footer-col is used for layout in grid, no styles needed */

.footer-heading {
    color: var(--color-white);
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

.footer-link {
    color: var(--color-gray-300);
    transition-property: color;
    transition-duration: 150ms;
    text-decoration: none;
}

.footer-link:hover {
    color: var(--color-white);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

.contact-item {
    display: flex;
    align-items: center;
}

.icon-contact {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    margin-right: 0.5rem; /* mr-2 */
}

.footer-bottom {
    border-top: 1px solid var(--color-gray-800);
    margin-top: 2rem; /* mt-8 */
    padding-top: 2rem; /* pt-8 */
    text-align: center;
}

.footer-copyright {
    color: var(--color-gray-400);
}

/* Media Queries for Responsiveness */
@media (min-width: 768px) { /* md breakpoint */
    .nav-desktop {
        display: flex; /* Show desktop nav */
    }

    .cta-button-header {
        display: inline-flex; /* Show desktop CTA */
    }

    .mobile-menu-toggle {
        display: none; /* Hide mobile menu toggle */
    }

    .hero-content {
        grid-template-columns: repeat(12, 1fr); /* lg:grid lg:grid-cols-12 */
        gap: 2rem; /* lg:gap-8 */
    }

    .hero-text-content {
        grid-column: span 6 / span 6; /* lg:col-span-6 */
    }

    .hero-title {
        font-size: var(--font-size-6xl); /* lg:text-6xl */
    }

    .hero-buttons {
        flex-direction: row; /* sm:flex-row */
    }

    .hero-image-container {
        margin-top: 0; /* lg:mt-0 */
        grid-column: span 6 / span 6; /* lg:col-span-6 */
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
    }

    .destinations-grid {
        grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
    }

    .testimonial-card {
        padding: 3rem; /* md:p-12 */
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr); /* md:grid-cols-4 */
    }

    .footer-col-main {
        grid-column: span 2 / span 2; /* col-span-2 */
    }
}