:root {
    --primary-blue: #003366;
    /* Deep Royal Blue */
    --accent-red: #CC0000;
    --text-dark: #1a1a1a;
    --text-light: #f5f5f5;
    --white: #ffffff;
    --gray-light: #f4f6f9;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn-primary,
.btn-cta {
    background-color: var(--accent-red);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    /* Prevent text wrapping */
}

/* ... existing code ... */

.btn-primary:hover,
.btn-cta:hover {
    background-color: #a30000;
    transform: translateY(-2px);
}

/* Navbar */
.navbar {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    /* Higher z-index to be absolutely safe */
    padding: 1rem 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    text-decoration: none;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-logo {
    height: 50px;
    width: auto;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.logo-sub {
    font-size: 0.8rem;
    color: #666;
    font-weight: 400;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: var(--transition);
}

/* Validation Styles */
.required-field::after {
    content: " *";
    color: var(--accent-red);
    font-weight: bold;
}

.form-group input.error,
.form-group select.error {
    border-color: var(--accent-red);
    background-color: #fff8f8;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.1);
}

.error-msg {
    color: var(--accent-red);
    font-size: 0.85rem;
    margin-top: -0.3rem;
    /* Tweak spacing */
    min-height: 1.2em;
    display: block;
}

/* Toast Notification */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

.toast {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    border-left: 5px solid var(--primary-blue);
    min-width: 300px;
    opacity: 0;
    transform: translateX(50px);
    animation: toastSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.toast.success {
    border-left-color: #28a745;
}

.toast.error {
    border-left-color: var(--accent-red);
}

.toast i {
    font-size: 1.5rem;
}

.toast.success i {
    color: #28a745;
}

.toast.error i {
    color: var(--accent-red);
}

.toast-content h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
}

.toast-content p {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #666;
}

@keyframes toastSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}


.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-blue);
}

.nav-links .btn-primary,
.nav-links .btn-primary:visited,
.nav-links .btn-primary:hover,
.nav-links .btn-primary:active,
.nav-links .btn-primary:focus,
.nav-links .btn-primary.active {
    color: var(--white) !important;
}

.mobile-toggle {
    display: none;
    color: var(--primary-blue);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    margin-top: 70px;
    background-color: #000;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('hero.png');
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    /* Darken for text readability */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 51, 102, 0.8) 0%, rgba(0, 51, 102, 0.4) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 800px;
}

.badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    display: inline-block;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    width: fit-content;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item i {
    font-size: 1.5rem;
    color: var(--accent-red);
}

.stat-item div {
    display: flex;
    flex-direction: column;
}

.stat-item strong {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-item span {
    font-size: 0.9rem;
}

.social-icons-hero {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.2rem;
    transition: var(--transition);
    text-decoration: none;
    border: none;
    /* Remove border for solid branding */
}

.social-icon:hover {
    background-color: var(--white);
    transform: translateY(-3px);
}

/* Brand Colors - Solid Backgrounds */
.social-icon[aria-label="Instagram"] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-icon[aria-label="Instagram"] i {
    color: white;
}

.social-icon[aria-label="TikTok"] {
    background-color: #000000;
}

.social-icon[aria-label="TikTok"] i {
    color: white;
}

.social-icon[aria-label="Facebook"] {
    background-color: #1877F2;
}

.social-icon[aria-label="Facebook"] i {
    color: white;
}

/* Hover Effects - Lift and Opacity */
.social-icon:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

.social-icon:hover i {
    color: white;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: -50px;
    position: relative;
    z-index: 10;
    margin-bottom: 4rem;
}

.info-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border-top: 4px solid var(--primary-blue);
}

.info-card:hover {
    transform: translateY(-5px);
}

.icon-box {
    width: 50px;
    height: 50px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--primary-blue);
    font-size: 1.2rem;
}

.info-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-blue);
}

/* Sections */
section {
    padding: 4rem 0;
}

.section-light {
    background-color: var(--gray-light);
}

.section-white {
    background-color: var(--white);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

/* Requirements */
.requirements-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.req-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
}

.req-item i {
    color: #28a745;
    /* Success Green */
}

.req-item.full-width {
    grid-column: 1 / -1;
    background: #e9f7ef;
    padding: 1rem;
    border-radius: 5px;
    color: #155724;
}

.req-item.full-width i {
    color: #155724;
}

/* Pricing */
.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-btn {
    padding: 0.8rem 2rem;
    border: 2px solid var(--primary-blue);
    background: transparent;
    color: var(--primary-blue);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--primary-blue);
    color: var(--white);
}

.pricing-content,
.req-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.pricing-content.active,
.req-content.active {
    display: block;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.price-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    /* Prepare for hover to prevent jump, was 1px solid #eee */
    text-align: center;
    position: relative;
    transition: var(--transition);
}

.price-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
    /* Keep the lift from original or scale? Featured scales. Let's do both to match user request "como esta permanente" */
    box-shadow: var(--shadow-md);
}

/* Featured card tweak: Remove permanent highlight, only keep badge logic */
.price-card.featured {
    /* border, transform, box-shadow removed to match others by default */
    border: 2px solid transparent;
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Ensure hover state still works for featured cards by explicitly handling it */
.price-card.featured:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Hover state is handled by the generic .price-card:hover block above */

/* Specific hover for featured to ensure it behaves same or slightly "more" if desired? 
   User said "quito el contorno azul solo que le aparezca cuando le pase el click".
   So it should behave just like others on hover.
*/

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-red);
    color: var(--white);
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
    /* Ensure above border */
}

/* Notice Boxes */
.notice-box {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    text-align: left;
}

.notice-box i {
    font-size: 1.2rem;
}

.notice-box.info {
    background-color: #e3f2fd;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.notice-box.info i {
    color: #17a2b8;
}

.notice-box.success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.notice-box.success i {
    color: #28a745;
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-red);
    color: var(--white);
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-title {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #666;
}

.price-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.currency {
    font-size: 1.2rem;
    font-weight: 500;
}

.price-features {
    list-style: none;
    text-align: left;
    margin-top: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.price-features li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.price-features li::before {
    content: "•";
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Footer */
footer {
    background: #0a1118;
    color: #ccc;
    padding-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h3 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-col p {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
    /* Force white as requested */
}

/* Prevent blue links on mobile for phone numbers */
.footer-col p a,
a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

.footer-bottom {
    background: #05080c;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        padding: 2rem;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        gap: 1.5rem;
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links a {
        width: 100%;
        padding: 1rem 0;
        /* More area for touch */
        font-size: 1.2rem;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        /* Text above backdrop */
        transition: color 0.4s ease;
    }

    .nav-links a {
        width: 100%;
        padding: 1rem 0;
        /* More area for touch */
        font-size: 1.2rem;
        border-radius: 8px;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background-color: rgba(0, 51, 102, 0.05);
        /* Simple highlight */
        color: var(--primary-blue) !important;
        font-weight: 600;
        box-shadow: none;
    }

    .mobile-toggle {
        display: block;
    }

    .price-card.featured {
        transform: scale(1);
    }

    .info-grid {
        margin-top: 2rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
}



/* Subir Informes Section */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--primary-blue);
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.form-group input,
.form-group select {
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
    background-color: #f9f9f9;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

/* Custom File Input */
.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-input-wrapper input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.file-custom-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background-color: #f0f4f8;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.5rem;
    color: #64748b;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
}

.file-input-wrapper:hover .file-custom-label {
    background-color: #e2e8f0;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.file-name-display {
    font-size: 0.9rem;
    color: var(--primary-blue);
    margin-top: 0.5rem;
    font-weight: 500;
}

.btn-submit {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.btn-submit:hover {
    background-color: #002244;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.form-message {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    display: none;
}

.form-message.success {
    background-color: #d1e7dd;
    color: #0f5132;
    display: block;
}

.form-message.error {
    background-color: #f8d7da;
    color: #842029;
    display: block;
}

/* Responsive tweaks for form */
@media (max-width: 600px) {
    .form-container {
        padding: 1.5rem;
    }
}

#proceso-view,
#precios-view {
    padding: 8rem 0 6rem;
    /* Top padding (8rem) to clear fixed navbar ~70-80px */
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Stay below navbar (z-index: 1000) */
}

#proceso-view {
    background: #f8f9fa;
}

#precios-view {
    background: var(--white);
}

.process-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Vertical Line */
.process-timeline::before {
    content: '';
    position: absolute;
    left: 48px;
    /* Center of the number circle (100/2 - 2/2) roughly */
    top: 0;
    bottom: 0;
    width: 4px;
    /* Thicker line */
    background: #e0e6ed;
    z-index: 1;
}

.timeline-item {
    display: flex;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth easing */
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.timeline-number {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    background: white;
    border: 3px solid var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-right: 2.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    z-index: 3;
    /* Above the line */
}

.timeline-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    flex-grow: 1;
    border-left: 5px solid transparent;
    transition: all 0.3s;
    position: relative;
    top: 10px;
    /* Align slightly with circle center visually */
}

.timeline-content:hover {
    border-left: 5px solid var(--primary-blue);
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    /* Lift effect */
}

.timeline-content h3 {
    color: var(--dark-text);
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.timeline-content p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

/* Staggered Delay for items */
.timeline-item:nth-child(1) {
    transition-delay: 0.1s;
}

.timeline-item:nth-child(2) {
    transition-delay: 0.2s;
}

.timeline-item:nth-child(3) {
    transition-delay: 0.3s;
}

.timeline-item:nth-child(4) {
    transition-delay: 0.4s;
}

@media (max-width: 768px) {
    .process-timeline::before {
        left: 28px;
    }

    .timeline-number {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
        margin-right: 1.5rem;
        border-width: 2px;
    }

    .timeline-content {
        padding: 1.5rem;
    }
}

/* Social Media Buttons */
.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    /* Matched to .btn-cta */
    border-radius: 6px;
    /* Keeping border radius as is or prefer to match defaults? .btn-primary usually has different radius but user said "same size". */
    color: white !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    /* Matched to .btn-cta */
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    line-height: normal;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: white !important;
}

.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.btn-whatsapp {
    background-color: #25D366;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
}

@media (max-width: 992px) {
    .btn-social {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

/* Location Link in Hero */
a.location-link,
a.location-link:visited {
    text-decoration: none;
    color: white !important;
    /* Force white to prevent purple visited link */
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0.5rem;
    margin: -0.5rem;
    display: flex;
    /* Ensure smooth layout */
}

a.location-link:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    cursor: pointer;
    color: white !important;
}

/* Sobre Nosotros Section */
.about-grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

.about-row {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.about-row.reverse {
    flex-direction: row-reverse;
}

.about-text {
    flex: 1;
}

.about-text h3 {
    font-size: 2rem;
    color: var(--dark-text, #333);
    margin-bottom: 1rem;
    font-weight: 700;
}

.about-text p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 1rem;
    text-align: justify;
}

.divider-left {
    width: 60px;
    height: 4px;
    background-color: var(--primary-blue);
    margin-bottom: 1.5rem;
}

.about-icon {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, var(--primary-blue), #0056b3);
    /* Vibrant Blue Gradient */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 8px solid rgba(255, 255, 255, 0.2);
    /* Semi-transparent border */
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.3);
    /* Colored shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 51, 102, 0.4);
}

.icon-circle i {
    font-size: 6rem;
    color: white;
}

/* Values List */
.values-list {
    list-style: none;
    padding: 0;
}

.values-list li {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    /* Ensure icon stays at top */
}

.values-list li i {
    color: var(--primary-blue);
    margin-top: 5px;
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

.value-text {
    text-align: justify;
    flex: 1;
    /* Take remaining width */
}

@media (max-width: 768px) {

    .about-row,
    .about-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .divider-left {
        margin: 10px auto;
    }

    .about-text p {
        text-align: center;
    }

    .icon-circle {
        width: 180px;
        height: 180px;
    }
}

/* Animation Utilities */
@keyframes fadeInBlur {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.animate-blur {
    animation: fadeInBlur 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.4s ease;

    /* Always visible */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

.whatsapp-float.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.whatsapp-float.visible:hover {
    transform: translateY(0) scale(1.1);
}

/* Helper to hide static hero button */
.hero-whatsapp-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: all 0.4s ease;
}

/* Mobile responsiveness for floating button */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        font-size: 28px;
    }
}

/* Instagram Feed */
.insta-feed-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.insta-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
    aspect-ratio: 1/1;
    /* Square posts */
    position: relative;
    cursor: pointer;
}

.insta-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.insta-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f0f0f0;
    /* Placeholder color */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: #ccc;
    position: relative;
}

/* Overlay for text if using placeholders */
.insta-placeholder-text {
    position: absolute;
    font-size: 1rem;
    color: #999;
}

.insta-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    max-height: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}


.insta-item:hover .insta-caption {
    transform: translateY(0);
}

/* Update: Add padding to dynamic views to prevent Navbar overlap */
#nosotros-view,
#precios-view,
#preguntas-view,
#subir-informes-view {
    padding-top: 120px;
    min-height: 100vh;
}

/* Vaccine Table Styles */
.vaccine-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.vaccine-title {
    text-align: center;
    color: var(--primary-blue);
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

.vaccine-table-container {
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
    border-radius: 8px;
    background: white;
}

.vaccine-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
    /* Ensure specific width on mobile */
}

.vaccine-table th,
.vaccine-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.vaccine-table th {
    background-color: var(--primary-blue);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.vaccine-table tr:hover {
    background-color: #f8f9fa;
}

.vaccine-table td {
    color: #555;
    font-size: 0.95rem;
}

.price-divider {
    width: 60px;
    height: 4px;
    background: var(--primary-blue);
    margin: 1.5rem auto 0;
    border-radius: 2px;
}

/* Fix for Pricing Tabs on Mobile */
@media (max-width: 768px) {
    .pricing-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        padding-left: 20px;
        /* Align with container padding */
        padding-right: 20px;
        margin-left: -20px;
        /* Pull out to edge */
        margin-right: -20px;
    }

    .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Video Section */
.video-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    background: #000;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}