/**
 * REMOTION Theme - Main Styles (basado en el HTML compilado)
 *
 * @package REMOTION
 */

/* ================================
   CSS Variables / Design Tokens
   ================================ */
:root {
    /* Colors - Dark theme (sync con React) */
    --background: 0 0% 2%;
    --foreground: 0 0% 95%;
    --card: 0 0% 7%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 95%;
    --primary: 176 75% 51%;
    --primary-foreground: 0 0% 2%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 95%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 71%;
    --accent: 176 75% 51%;
    --accent-foreground: 0 0% 2%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 12%;
    --input: 0 0% 12%;
    --ring: 176 75% 51%;
    
    /* Typography */
    --font-heading: 'Jura', system-ui, sans-serif;
    --font-body: 'Quicksand', system-ui, sans-serif;
    
    /* Spacing */
    --container-max: 1280px;
    --container-padding: 1rem;
    
    /* Radius */
    --radius: 1.125rem;
}

/* ================================
   Base Styles
   ================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: hsl(var(--background));
    background: radial-gradient(circle at top, hsl(0 0% 7%) 0%, hsl(0 0% 2%) 45%, hsl(0 0% 0%) 100%);
    color: hsl(var(--foreground));
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================
   Typography
   ================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
}

a {
    color: hsl(var(--primary));
    text-decoration: none;
    transition: color 0.2s ease;
}

/* ================================
   Layout
   ================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

.min-h-screen {
    min-height: 100vh;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* ================================
   Header / Navigation
   ================================ */
.glass-header {
    background: hsl(var(--background) / 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.border-b {
    border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.border-border\/30 {
    border-color: hsl(var(--border) / 0.3);
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.skip-link:focus {
    left: 0;
}

.primary-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.primary-menu a {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    transition: color 0.2s ease;
}

.primary-menu a:hover {
    color: hsl(var(--primary));
}

.link-animated {
    position: relative;
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: hsl(var(--primary));
    transition: width 0.3s ease;
}

.link-animated:hover::after {
    width: 100%;
}

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

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        color: hsl(var(--foreground));
    }

    .primary-menu {
        display: none;
    }

    .mobile-menu {
        display: none;
    }

    .mobile-menu.is-open {
        display: block;
    }

    .mobile-menu ul {
        list-style: none;
        padding: 1rem;
    }

    .mobile-menu a {
        display: block;
        padding: 0.75rem 1rem;
        color: hsl(var(--muted-foreground));
        border-radius: var(--radius);
    }

    .mobile-menu a:hover {
        background: hsl(var(--secondary) / 0.5);
        color: hsl(var(--primary));
    }
}

/* ================================
   Eyebrow / Labels
   ================================ */
.eyebrow {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: hsl(var(--primary));
}

/* ================================
   Cards
   ================================ */
.bg-card {
    background-color: hsl(var(--card));
}

.border-border {
    border: 1px solid hsl(var(--border));
}

.rounded-lg {
    border-radius: var(--radius);
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Company/Product cards */
.company-card,
.product-card {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid hsl(var(--border));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.company-card:hover,
.product-card:hover {
    transform: translateY(-4px);
}

/* ================================
   Bullets
   ================================ */
.bullet-glow {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: hsl(var(--primary));
    box-shadow: 0 0 10px hsl(var(--primary) / 0.5);
    flex-shrink: 0;
}

/* ================================
   Buttons
   ================================ */
.bg-primary {
    background-color: hsl(var(--primary));
}

.text-primary {
    color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.accent-glow {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.4);
}

.accent-glow:hover {
    box-shadow: 0 0 30px hsl(var(--primary) / 0.6);
}

a.inline-flex,
button.inline-flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ================================
   Contact Section
   ================================ */
.contact-card {
    background-color: hsl(var(--primary));
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 26px 70px hsl(0 0% 0% / 0.9);
}

@media (min-width: 768px) {
    .contact-card {
        padding: 2.5rem;
        border-radius: 1.5rem;
    }
}

.mail-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid hsl(var(--primary) / 0.4);
    border-radius: 9999px;
    color: hsl(var(--primary-foreground));
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mail-pill:hover {
    background: #ffffff;
    transform: scale(1.05);
    color: hsl(var(--primary-foreground));
}

.dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(142 76% 36%);
    box-shadow: 0 0 10px hsl(142 76% 36% / 0.9);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ================================
   Footer
   ================================ */
.site-footer {
    border-top: 1px solid hsl(var(--muted-foreground) / 0.3);
    padding: 1.5rem 0;
}

.footer-logos img {
    height: 2rem;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
}

@media (min-width: 768px) {
    .footer-logos img {
        height: 2.5rem;
    }
}

.legal-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .legal-menu {
        gap: 1.5rem;
    }
}

.legal-menu a {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.legal-menu a:hover {
    color: hsl(var(--primary));
}

/* ================================
   Grid Layouts
   ================================ */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ================================
   Spacing Utilities
   ================================ */
.py-4 { padding-top: 1rem!important; padding-bottom: 1rem!important; }
.py-6 { padding-top: 1.5rem!important; padding-bottom: 1.5rem!important; }
.py-16 { padding-top: 4rem!important; padding-bottom: 4rem!important; }

@media (min-width: 768px) {
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}

.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }

/* ================================
   Text Utilities
   ================================ */
.text-center { text-align: center; }

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

@media (min-width: 768px) {
    .md\:text-3xl { font-size: 1.875rem; }
    .md\:text-4xl { font-size: 2.25rem; }
    .md\:text-5xl { font-size: 3rem; }
}

@media (min-width: 1024px) {
    .lg\:text-6xl { font-size: 3.75rem; }
}

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.leading-tight { line-height: 1.15; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ================================
   Display Utilities
   ================================ */
.hidden { display: none; }
.block { display: block; }

@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
    .md\:block { display: block; }
}

@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
}

/* ================================
   Flex Utilities
   ================================ */
.flex-wrap { flex-wrap: wrap; }

@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-row-reverse { flex-direction: row-reverse; }
    .lg\:gap-16 { gap: 4rem; }
}

/* ================================
   Image Utilities
   ================================ */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }

.drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ================================
   Aspect Ratio
   ================================ */
.aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
}

/* ================================
   Overflow
   ================================ */
.overflow-hidden { overflow: hidden; }

/* ================================
   Position
   ================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* ================================
   Width/Height
   ================================ */
.w-full { width: 100%; }
.h-7 { height: 1.75rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.w-auto { width: auto; }
.max-h-full { max-height: 100%; }

/* ================================
   Opacity
   ================================ */
.opacity-70 { opacity: 0.7; }

/* ================================
   Transitions
   ================================ */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.transition-all {
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.transition-transform {
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.duration-200 { transition-duration: 200ms; }

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* ================================
   Prose (para contenido legal)
   ================================ */
.prose {
    max-width: 65ch;
    color: hsl(var(--muted-foreground));
}

.prose-invert {
    color: hsl(var(--muted-foreground));
}

.prose h2 {
    color: hsl(var(--foreground));
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h3 {
    color: hsl(var(--foreground));
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose strong {
    color: hsl(var(--foreground));
}

.prose-lg {
    font-size: 1.125rem;
}

.max-w-none {
    max-width: none;
}

.space-y-8 > * + * {
    margin-top: 2rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-16 > * + * {
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .md\:space-y-24 > * + * {
        margin-top: 6rem;
    }
}

/* ================================
   Blur Effects
   ================================ */
.blur-\[80px\] { filter: blur(80px); }
.blur-\[100px\] { filter: blur(100px); }
.blur-\[120px\] { filter: blur(120px); }

.pointer-events-none { pointer-events: none; }
.inset-0 { inset: 0; }

/* ================================
   Additional Layout Utilities
   ================================ */
.min-h-\[85vh\] {
    min-height: 85vh;
}

.w-\[600px\] { width: 600px; }
.w-\[400px\] { width: 400px; }
.w-\[300px\] { width: 300px; }
.h-\[600px\] { height: 600px; }
.h-\[400px\] { height: 400px; }
.h-\[300px\] { height: 300px; }

.top-1\/4 { top: 25%; }
.top-1\/2 { top: 50%; }
.bottom-1\/4 { bottom: 25%; }
.right-0 { right: 0; }
.right-1\/4 { right: 25%; }
.right-1\/3 { right: 33.333333%; }

.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }

/* ================================
   Padding Utilities (Extended)
   ================================ */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

@media (min-width: 768px) {
    .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ================================
   Border Utilities
   ================================ */
.border { border: 1px solid hsl(var(--border)); }

/* ================================
   Background Utilities
   ================================ */
.bg-background { background-color: hsl(var(--background)); }
.bg-secondary { background-color: hsl(var(--secondary)); }

/* ================================
   Animation Keyframes
   ================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* ================================
   Hover Effects
   ================================ */
.hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.hover\:text-primary\/80:hover {
    color: hsl(var(--primary) / 0.8);
}

.hover\:text-primary:hover {
    color: hsl(var(--primary));
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* CTA Button Hover */
.bg-primary.accent-glow {
    transition: all 0.2s ease;
}

.bg-primary.accent-glow:hover {
    background-color: hsl(var(--primary) / 0.9);
    transform: scale(1.05);
    box-shadow: 0 0 30px hsl(var(--primary) / 0.6);
}

/* ================================
   Focus States (Accessibility)
   ================================ */
.focus\:outline-none:focus {
    outline: none;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.focus-visible\:ring-2:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

/* ================================
   Screen Reader Only
   ================================ */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================
   Group Hover
   ================================ */
.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

.group:hover .group-hover\:text-primary {
    color: hsl(var(--primary));
}

/* ================================
   Font Heading (para categorías)
   ================================ */
.font-heading {
    font-family: var(--font-heading);
}

/* ================================
   Tracking (letter-spacing)
   ================================ */
.tracking-\[0\.14em\] {
    letter-spacing: 0.14em;
}

/* ================================
   Flex Shrink
   ================================ */
.flex-shrink-0,
.shrink-0 {
    flex-shrink: 0;
}

/* ================================
   WordPress Core Overrides
   ================================ */
.wp-block {
    max-width: none;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Quitar márgenes de WordPress */
.wp-site-blocks > * + * {
    margin-top: 0;
}

.entry-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ================================
   ACF Block Styles
   ================================ */
.acf-block-preview {
    background-color: hsl(var(--background));
}

/* Hero min-height fix */
.remotion-hero {
    min-height: 85vh;
    display: inline;
}

.remotion-legal {
    margin-top: 0!important;
}

/* Products detail section */
.remotion-products-detail .product-item:nth-child(even) .flex {
    flex-direction: row-reverse;
}

@media (max-width: 1023px) {
    .remotion-products-detail .product-item:nth-child(even) .flex {
        flex-direction: column;
    }
}

/* ================================
   List Styles Reset
   ================================ */
ul, ol {
    list-style: none;
}

ul.primary-menu,
ul.legal-menu,
.space-y-3 {
    list-style: none;
    padding-left: 0;
}

/* ================================
   Image Styles
   ================================ */
img {
    max-width: 100%;
    height: auto;
}

.drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

/* ================================
   Card Shadow (Dark Theme)
   ================================ */
.company-card,
.product-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* ================================
   Inline Flex Gap
   ================================ */
.gap-1 { gap: 0.25rem; }

/* ================================
   Sizing
   ================================ */
.h-8 { height: 2rem; }
.h-6 { height: 1.5rem; }
.max-h-7 { max-height: 1.75rem; }
.max-h-full { max-height: 100%; }

/* ================================
   Responsive Flex
   ================================ */
@media (min-width: 1024px) {
    .lg\:w-1\/2 { width: 50%; }
    .lg\:items-center { align-items: center; }
}

/* ================================
   Product Detail Image Aspect
   ================================ */
.aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
}

/* ================================
   Additional Text Sizes
   ================================ */
.text-xs { font-size: 0.75rem; line-height: 1rem; }

/* ================================
   Additional Margins
   ================================ */
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: 0.5rem; }

/* ================================
   Selection Color
   ================================ */
::selection {
    background-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
}

/* ================================
   Scrollbar Styling (Dark Theme)
   ================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

/* ================================
   SVG Logo Colors (Dark Theme)
   ================================ */
.company-card img,
.product-card img,
.site-branding img {
    color: hsl(var(--foreground));
}

/* SVGs with currentColor need this */
.company-card svg,
.product-card svg {
    color: hsl(var(--foreground));
}

/* Invert logos that are dark on transparent bg */
.company-card img[src$=".svg"],
.product-card img[src$=".svg"] {
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3));
}

/* ================================
   Container MX Auto
   ================================ */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.container.mx-auto {
    max-width: var(--container-max);
}

/* ================================
   Primary/Foreground Opacity
   ================================ */
.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-primary-foreground\/80 {
    color: hsl(var(--primary-foreground) / 0.8);
}

/* ================================
   ACF Block Spacing Fix
   ================================ */
.remotion-hero + .remotion-companies,
.remotion-companies + .remotion-products,
.remotion-products + .remotion-contact,
.remotion-contact + .remotion-cta {
    margin-top: 0;
}

/* ================================
   Main Content Full Width
   ================================ */
.site-main {
    width: 100%;
}

.site-main > * {
    max-width: none;
}

/* Remove WP Block Editor margins */
.wp-block-post-content,
.entry-content {
    margin: 0;
    padding: 0;
}

.wp-block-post-content > *,
.entry-content > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ================================
   Align Wide/Full Support
   ================================ */
.alignwide {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ================================
   Hero Height & Alignment Fix
   ================================ */
.remotion-hero {
    min-height: 85vh;
    display: inline;
}

.remotion-hero > .container {
    position: relative;
    z-index: 10;
}

/* ================================
   Responsive Fixes
   ================================ */
@media (max-width: 767px) {
    .grid.lg\:grid-cols-5 {
        grid-template-columns: 1fr;
    }
    
    .company-card,
    .product-card {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid.lg\:grid-cols-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}