:root {--bg-primary:#0a0a0c;
--bg-secondary:#111116;
--bg-card:rgba(17,17,22,0.7);
--accent-orange:#ff6a00;
--accent-orange-hover:#f05a18;
--accent-green:#25d366;
--accent-green-hover:#128c7e;
--text-primary:#ffffff;
--text-secondary:#9ea0a8;
--text-muted:#5e6068;
--border-color:rgba(255,255,255,0.05);
--border-glow:rgba(255,106,0,0.15);
--glass-shadow:0 8px 32px 0 rgba(0,0,0,0.37);
--transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}

* {box-sizing:border-box;
margin:0;
padding:0;
font-family:'Outfit',sans-serif;
-webkit-tap-highlight-color:transparent;
}

body {background-color:var(--bg-primary);
color:var(--text-primary);
min-height:100vh;
overflow-x:hidden;
background-image:radial-gradient(circle at 50% 50%,transparent 30%,var(--bg-primary) 85%),linear-gradient(rgba(255,106,0,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,106,0,0.015) 1px,transparent 1px);
background-size:100% 100%,32px 32px,32px 32px;
padding-bottom:80px;
position:relative;
}

body::before,body::after {content:"";
position:fixed;
width:60vw;
height:60vw;
border-radius:50%;
background:radial-gradient(circle,rgba(255,106,0,0.035) 0%,rgba(255,106,0,0) 70%);
filter:blur(80px);
z-index:-1;
pointer-events:none;
will-change:transform;
transform:translate3d(0,0,0);
}

body::before {top:-15vw;
left:-15vw;
animation:driftFirst 25s infinite alternate ease-in-out;
}

body::after {bottom:-15vw;
right:-15vw;
background:radial-gradient(circle,rgba(255,106,0,0.025) 0%,rgba(255,106,0,0) 70%);
animation:driftSecond 30s infinite alternate ease-in-out;
}

@keyframes driftFirst {0% {transform:translate3d(0,0,0) scale(1);
}

50% {transform:translate3d(8vw,12vw,0) scale(1.1);
}

100% {transform:translate3d(-4vw,6vw,0) scale(0.9);
}

}

@keyframes driftSecond {0% {transform:translate3d(0,0,0) scale(1.1);
}

50% {transform:translate3d(-10vw,-8vw,0) scale(0.95);
}

100% {transform:translate3d(5vw,-12vw,0) scale(1.05);
}

}

::-webkit-scrollbar {width:8px;
height:8px;
}

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

::-webkit-scrollbar-thumb {background:#22222a;
border-radius:4px;
}

::-webkit-scrollbar-thumb:hover {background:var(--accent-orange);
}

@keyframes panHeaderBg {0% {background-position:center center,15% center;
}

50% {background-position:center center,85% center;
}

100% {background-position:center center,15% center;
}

}

.header-wrapper {width:100%;
display:block;
min-height:104px;
}

header {position:fixed;
top:0;
left:0;
right:0;
z-index:100;
background:linear-gradient(to right,rgba(10,10,12,0.88) 35%,rgba(10,10,12,0.5) 100%),url('assets/header_bg.webp') no-repeat center center;
background-size:cover;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border-bottom:1px solid var(--border-color);
padding:16px 24px;
box-shadow:0 4px 30px rgba(0,0,0,0.25);
transition:padding 0.3s cubic-bezier(0.16,1,0.3,1),background-color 0.3s cubic-bezier(0.16,1,0.3,1),backdrop-filter 0.3s cubic-bezier(0.16,1,0.3,1);
animation:panHeaderBg 35s infinite ease-in-out;
}

header.collapsed {padding:10px 16px;
background:linear-gradient(rgba(10,10,12,0.96),rgba(10,10,12,0.96));
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
transition:padding 0.3s cubic-bezier(0.16,1,0.3,1),background-color 0.3s cubic-bezier(0.16,1,0.3,1),backdrop-filter 0.3s cubic-bezier(0.16,1,0.3,1);
}

.header-container {max-width:1200px;
margin:0 auto;
display:flex;
flex-direction:column;
width:100%;
}

.header-top-row {display:flex;
justify-content:space-between;
align-items:center;
width:100%;
gap:24px;
transition:var(--transition);
}

header.collapsed .logo-image {height:44px !important;
width:44px !important;
}

header.collapsed .logo-title {font-size:20px !important;
}

header.collapsed .logo-subtitle,header.collapsed .logo-rif,header.collapsed .social-links-header {display:none !important;
}

.controls-wrapper {
max-width:1200px;
margin:24px auto 0 auto;
padding:0 24px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
width:100%;
box-sizing:border-box;
}

.brand-lockup {display:flex;
align-items:center;
gap:16px;
cursor:pointer;
flex-shrink:0;
text-decoration:none !important;
color:inherit;
}
.brand-lockup, .brand-lockup *, .brand-lockup:hover, .brand-lockup:active, .brand-lockup:focus {
text-decoration:none !important;
}

.logo-container {display:flex;
align-items:center;
justify-content:center;
}

.logo-image {height:72px;
width:72px;
border-radius:50%;
border:2px solid rgba(255,106,0,0.4);
background:rgba(10,10,12,0.85);
box-shadow:0 4px 15px rgba(255,106,0,0.2);
object-fit:cover;
padding:2px;
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s ease,box-shadow 0.3s ease;
}

.brand-lockup:hover .logo-image {transform:scale(1.08) rotate(3deg);
border-color:var(--accent-orange);
box-shadow:0 4px 20px rgba(255,106,0,0.4);
}

.brand-text {display:flex;
flex-direction:column;
align-items:flex-start;
}

.logo-title {font-size:26px;
font-weight:800;
text-transform:uppercase;
letter-spacing:2px;
color:#ffffff;
line-height:1.15;
display:flex;
align-items:center;
gap:6px;
margin:0;
white-space:nowrap;
transition:var(--transition);
}

.logo-title span {color:var(--accent-orange);
background:linear-gradient(135deg,#ffaa00 0%,#ff6a00 50%,#ff3c00 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:900;
position:relative;
}

.logo-title span::after {content:'';
position:absolute;
bottom:-2px;
left:0;
width:100%;
height:2px;
background:linear-gradient(90deg,#ffaa00,#ff6a00);
border-radius:2px;
transform:scaleX(0);
transform-origin:right;
transition:transform 0.3s ease;
}

.brand-lockup:hover .logo-title span::after {transform:scaleX(1);
transform-origin:left;
}

.brand-meta {display:flex;
align-items:center;
gap:10px;
margin-top:5px;
}

.logo-subtitle {font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:1.5px;
color:var(--text-secondary);
}

.logo-rif {font-size:9px;
font-weight:700;
color:var(--text-secondary);
background:rgba(255,255,255,0.05);
padding:1px 6px;
border-radius:4px;
border:1px solid var(--border-color);
}

.search-wrapper {position:relative;
width:100%;
max-width:600px;
}

.search-input {width:100%;
padding:14px 20px 14px 50px;
border-radius:30px;
border:1px solid rgba(255,255,255,0.15);
background-color:rgba(10,10,12,0.9);
color:var(--text-primary);
font-size:15px;
font-weight:500;
outline:none;
transition:var(--transition);
box-shadow:0 4px 15px rgba(0,0,0,0.4);
}

.search-input:focus {border-color:var(--accent-orange);
background-color:rgba(10,10,12,0.95);
box-shadow:0 0 15px var(--border-glow);
}

.search-input::placeholder {color:#d8d9dd;
opacity:1;
}

.search-icon {position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
fill:var(--text-secondary);
width:20px;
height:20px;
pointer-events:none;
transition:var(--transition);
}

.search-input:focus + .search-icon {fill:var(--accent-orange);
}

.categories-container {max-width:1200px;
margin:20px auto 0 auto;
padding:0 24px;
}

.categories-scroll {display:flex;
gap:10px;
overflow-x:auto;
padding:8px 4px 16px 4px;
scrollbar-width:none;
-ms-overflow-style:none;
}

.categories-scroll::-webkit-scrollbar {display:none;
}

.category-pill {white-space:nowrap;
padding:10px 18px;
border-radius:20px;
background:var(--bg-secondary);
border:1px solid var(--border-color);
color:var(--text-secondary);
font-size:13px;
font-weight:600;
cursor:pointer;
transition:var(--transition);
display:flex;
align-items:center;
gap:6px;
}

.category-pill span {background:rgba(255,255,255,0.06);
padding:2px 6px;
border-radius:10px;
font-size:11px;
color:var(--text-muted);
transition:var(--transition);
}

.category-pill:hover {color:var(--text-primary);
border-color:rgba(255,106,0,0.4);
transform:translateY(-1px);
}

.category-pill.active {background:linear-gradient(135deg,#ff8a00,var(--accent-orange));
border-color:transparent;
color:var(--text-primary);
box-shadow:0 4px 15px rgba(255,106,0,0.3);
}

.category-pill.active span {background:rgba(255,255,255,0.2);
color:var(--text-primary);
}

main {max-width:1200px;
margin:0 auto;
padding:0 24px;
min-height:80vh;
}

.grid-container {display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:24px;
margin-top:10px;
}

.product-card {background:var(--bg-card);
border-radius:16px;
border:1px solid var(--border-color);
overflow:hidden;
display:flex;
flex-direction:column;
transition:var(--transition);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
position:relative;
}

.product-card:hover {transform:translateY(-6px);
border-color:var(--accent-orange);
box-shadow:0 10px 25px rgba(255,106,0,0.15);
}

.card-img-wrapper {position:relative;
width:100%;
aspect-ratio:4/5;
background-color:#0d0d12;
overflow:hidden;
cursor:pointer;
}

.product-img {width:100%;
height:100%;
object-fit:contain;
transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.product-card:hover .product-img {transform:scale(1.05);
}

.category-badge {position:absolute;
top:12px;
left:12px;
background:rgba(10,10,12,0.75);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
border:1px solid var(--accent-orange);
color:var(--text-primary);
font-size:10px;
font-weight:700;
text-transform:uppercase;
padding:4px 10px;
border-radius:12px;
letter-spacing:0.5px;
z-index:2;
}

.card-content {padding:16px;
display:flex;
flex-direction:column;
flex-grow:1;
gap:12px;
}

.product-desc {font-size:14px;
font-weight:700;
color:var(--text-primary);
line-height:1.4;
letter-spacing:0.2px;
text-transform:uppercase;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
flex-grow:1;
}

.card-btn {display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
padding:12px;
border-radius:12px;
border:1px solid rgba(37,211,102,0.2);
background:rgba(37,211,102,0.05);
color:var(--accent-green);
font-size:13px;
font-weight:700;
cursor:pointer;
text-decoration:none;
transition:var(--transition);
}

.card-btn:hover {background:var(--accent-green);
color:#ffffff;
box-shadow:0 4px 12px rgba(37,211,102,0.2);
border-color:transparent;
}

.card-btn svg {width:16px;
height:16px;
fill:currentColor;
}

.skeleton-card {background:var(--bg-card);
border-radius:16px;
border:1px solid var(--border-color);
overflow:hidden;
height:420px;
display:flex;
flex-direction:column;
padding:0;
position:relative;
}

.skeleton-img {width:100%;
aspect-ratio:4/5;
background:linear-gradient(90deg,#111116 25%,#1c1c24 50%,#111116 75%);
background-size:200% 100%;
animation:loading-pulse 1.5s infinite;
}

.skeleton-info {padding:16px;
display:flex;
flex-direction:column;
gap:12px;
flex-grow:1;
}

.skeleton-title {height:40px;
background:linear-gradient(90deg,#111116 25%,#1c1c24 50%,#111116 75%);
background-size:200% 100%;
animation:loading-pulse 1.5s infinite;
border-radius:4px;
}

.skeleton-button {height:40px;
background:linear-gradient(90deg,#111116 25%,#1c1c24 50%,#111116 75%);
background-size:200% 100%;
animation:loading-pulse 1.5s infinite;
border-radius:12px;
margin-top:auto;
}

@keyframes loading-pulse {0% {background-position:200% 0;
}

100% {background-position:-200% 0;
}

}

.empty-state {grid-column:1 / -1;
text-align:center;
padding:60px 24px;
display:none;
flex-direction:column;
align-items:center;
gap:16px;
}

.empty-state svg {width:64px;
height:64px;
fill:var(--text-muted);
}

.empty-state h3 {font-size:18px;
color:var(--text-primary);
}

.empty-state p {font-size:14px;
color:var(--text-secondary);
max-width:400px;
}

.lightbox {position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(6,6,8,0.94);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
z-index:1000;
display:none;
opacity:0;
justify-content:center;
overflow-y:auto;
padding:40px 24px;
transition:opacity 0.3s ease;
}

.lightbox.active {display:flex;
opacity:1;
}

.lightbox-close {position:absolute;
top:24px;
right:24px;
width:44px;
height:44px;
border-radius:50%;
background:rgba(10,10,12,0.6);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
color:var(--text-primary);
font-size:24px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:var(--transition);
z-index:1010;
}

.lightbox-close:hover {background:var(--accent-orange);
border-color:transparent;
transform:rotate(90deg) scale(1.05);
}

.lightbox-content {width:100%;
max-width:900px;
margin: auto;
background:rgba(15,15,19,0.85);
border:1px solid rgba(255,106,0,0.2);
border-radius:24px;
overflow:hidden;
display:grid;
grid-template-columns:1.2fr 1fr;
box-shadow:0 24px 60px rgba(0,0,0,0.7),inset 0 0 0 1px rgba(255,106,0,0.15);
transform:scale(0.9);
transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.lightbox.active .lightbox-content {transform:scale(1);
}

.lightbox-img-wrapper {position:relative;
background:radial-gradient(circle,rgba(255,106,0,0.05) 0%,rgba(10,10,12,0.8) 100%);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
aspect-ratio:4/5;
padding:24px;
box-shadow:inset 0 0 20px rgba(0,0,0,0.8);
}

.lightbox-img {max-width:100%;
max-height:100%;
object-fit:contain;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.lightbox-img-wrapper:hover .lightbox-img {transform:scale(1.03);
}

.lightbox-info {padding:40px;
display:flex;
flex-direction:column;
justify-content:center;
gap:24px;
border-left:1px solid rgba(255,255,255,0.03);
}

.lightbox-badge {align-self:flex-start;
background:rgba(255,106,0,0.08);
border:1px solid rgba(255,106,0,0.5);
color:var(--accent-orange);
font-size:11px;
font-weight:700;
text-transform:uppercase;
padding:6px 14px;
border-radius:20px;
letter-spacing:0.8px;
box-shadow:0 0 10px rgba(255,106,0,0.1);
}

.lightbox-desc {font-size:26px;
font-weight:800;
line-height:1.35;
color:var(--text-primary);
text-transform:uppercase;
letter-spacing:0.5px;
text-shadow:0 2px 10px rgba(0,0,0,0.3);
}

.lightbox-actions {display:flex;
gap:12px;
width:100%;
margin-top:10px;
}

.lightbox-action-btn {display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex:1.2;
padding:16px;
border-radius:12px;
border:none;
background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);
color:#ffffff;
font-size:14px;
font-weight:700;
cursor:pointer;
text-decoration:none;
transition:var(--transition);
box-shadow:0 4px 15px rgba(37,211,102,0.3);
}

.lightbox-action-btn:hover {background:linear-gradient(135deg,#2ee070 0%,#179b8d 100%);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(37,211,102,0.4);
}

.lightbox-action-btn svg {width:18px;
height:18px;
fill:#ffffff;
}

.lightbox-btn-add {display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex:0.8;
padding:16px;
border-radius:12px;
border:1px solid rgba(255,106,0,0.4);
background:rgba(255,106,0,0.04);
color:var(--accent-orange);
font-size:14px;
font-weight:700;
cursor:pointer;
transition:var(--transition);
}

.lightbox-btn-add:hover {background:var(--accent-orange);
color:#ffffff;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(255,106,0,0.25);
}

.lightbox-btn-add svg {width:18px;
height:18px;
fill:currentColor;
}

.fab-whatsapp {position:fixed;
bottom:24px;
right:24px;
height:56px;
border-radius:28px;
background:var(--accent-green);
color:#ffffff;
display:flex;
align-items:center;
justify-content:flex-start;
box-shadow:0 6px 20px rgba(37,211,102,0.4);
cursor:pointer;
z-index:90;
transition:max-width 0.4s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.4s ease,background-color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;
text-decoration:none;
max-width:56px;
padding:0 14px;
box-sizing:border-box;
overflow:visible;
white-space:nowrap;
}

.fab-whatsapp:hover {background:var(--accent-green-hover);
transform:scale(1.05) translateY(-3px);
box-shadow:0 8px 25px rgba(37,211,102,0.5);
}

.fab-whatsapp svg {width:28px;
height:28px;
fill:#ffffff;
flex-shrink:0;
}

.fab-whatsapp-text {margin-left:8px;
font-size:13px;
font-weight:700;
opacity:0;
pointer-events:none;
overflow:hidden;
transition:opacity 0.2s ease;
display:inline-block;
vertical-align:middle;
}

.fab-whatsapp.expanded {max-width:280px;
padding:0 20px;
}

.fab-whatsapp.expanded .fab-whatsapp-text {opacity:1;
pointer-events:auto;
transition:opacity 0.3s ease 0.1s;
}

@media (max-width:768px) {
.fab-whatsapp.expanded {max-width:56px;
padding:0 14px;
}
.fab-whatsapp.expanded .fab-whatsapp-text {display:none !important;
opacity:0 !important;
}
}

.vehicle-filter-container {max-width:1200px;
margin:20px auto 0 auto;
padding:0 24px;
transition:margin-top 0.4s cubic-bezier(0.4,0,0.2,1);
}

.vehicle-filter-title {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    position: relative;
}

.vehicle-filter-title::before {
    content: "";
    display: block;
    width: 6px;
    height: 22px;
    background: var(--accent-orange);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 106, 0, 0.4);
}

.vehicle-filter-title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 106, 0, 0.3) 0%, transparent 100%);
}

@media (max-width: 768px) {
    .vehicle-filter-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .vehicle-filter-title::before {
        height: 18px;
    }
}

.vehicle-grid {display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
width:100%;
}

@media (max-width:900px) {.vehicle-grid {display:flex;
overflow-x:auto;
padding-bottom:8px;
scrollbar-width:none;
}

.vehicle-grid::-webkit-scrollbar {display:none;
}

.vehicle-card {flex:0 0 130px;
}

}

.vehicle-card {background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:12px;
padding:8px 12px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:var(--transition);
min-height:56px;
text-decoration:none;
color:var(--text-secondary);
text-align:center;
}

.vehicle-card:hover {border-color:rgba(255,106,0,0.4);
transform:translateY(-2px);
color:var(--text-primary);
background:rgba(255,106,0,0.02);
}

.vehicle-card.active {border-color:var(--accent-orange);
background:rgba(255,106,0,0.08);
color:var(--text-primary);
box-shadow:0 0 15px rgba(255,106,0,0.15);
}

.vehicle-logo {width:100%;
height:40px;
color:currentColor;
display:flex;
align-items:center;
justify-content:center;
transition:var(--transition);
}

.vehicle-logo-img {height:32px;
max-width:95%;
object-fit:contain;
opacity:0.75;
transition:var(--transition);
}

.vehicle-card:hover .vehicle-logo-img {opacity:1;
transform:scale(1.05);
}

.vehicle-card.active .vehicle-logo-img {opacity:1;
transform:scale(1.05);
filter:drop-shadow(0 0 5px rgba(255,106,0,0.45));
}

.vehicle-name {font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
margin-top:4px;
}

@media (max-width:768px) {header {padding:12px 16px;
}

.header-top-row {flex-direction:column;
gap:12px;
align-items:center;
max-height:280px;
}

header.collapsed .header-top-row {max-height:none;
}

header.collapsed .brand-lockup {flex-direction:row;
gap:12px;
align-items:center;
text-align:left;
}

header.collapsed .brand-text {align-items:flex-start;
}


.brand-lockup {flex-direction:column;
gap:8px;
align-items:center;
text-align:center;
}

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

.brand-meta {flex-direction:column;
align-items:center;
gap:4px;
}

.logo-title {font-size:20px;
letter-spacing:1.5px;
justify-content:center;
}

.logo-subtitle {font-size:12px;
letter-spacing:1px;
text-align:center;
}

.logo-rif {font-size:8px;
}

.social-links-header {justify-content:center;
gap:8px;
width:100%;
}

.contact-link {padding:0;
width:40px;
height:40px;
border-radius:50%;
justify-content:center;
align-items:center;
}

.contact-link span {display:none;
}

.contact-link svg {width:20px;
height:20px;
flex-shrink:0;
}

.controls-wrapper {flex-direction:column;
gap:12px;
width:100%;
padding:0 16px;
margin-top:15px;
}

.controls-wrapper .search-wrapper {max-width:100% !important;
width:100%;
}

.controls-wrapper .view-selector {width:100%;
justify-content:center;
}

.categories-container {padding:0 16px;
margin-top:12px;
}

.categories-scroll {padding-bottom:12px;
}

main {padding:0 16px;
}

.grid-container {gap:16px;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}

.product-card {border-radius:12px;
}

.category-badge {font-size:8px;
padding:3px 8px;
top:8px;
left:8px;
}

.card-content {padding:12px;
gap:8px;
}

.product-desc {font-size:11px;
font-weight:700;
-webkit-line-clamp:2;
}

.card-btn {padding:8px;
border-radius:8px;
font-size:11px;
gap:4px;
}

.card-btn span {display:none;
}

.card-btn::after {content:"Consultar";
}

.card-btn svg {width:14px;
height:14px;
}

.lightbox-content {grid-template-columns:1fr;
max-width:420px;
border-radius:20px;
}

.lightbox-img-wrapper {padding:16px;
}

.lightbox-info {padding:24px;
border-left:none;
border-top:1px solid rgba(255,255,255,0.03);
gap:16px;
}

.lightbox-desc {font-size:18px;
}

.lightbox-action-btn {padding:12px;
border-radius:10px;
font-size:13px;
}

.lightbox-btn-add {padding:12px;
border-radius:10px;
font-size:13px;
}

.lightbox-close {top:16px;
right:16px;
width:36px;
height:36px;
font-size:18px;
}

}

.view-selector {display:flex;
background:rgba(255,255,255,0.03);
border:1px solid var(--border-color);
border-radius:30px;
padding:4px;
width:fit-content;
margin:0 auto;
gap:4px;
}

.view-btn {background:transparent;
border:none;
color:var(--text-secondary);
padding:8px 18px;
border-radius:26px;
font-size:13px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
transition:var(--transition);
}

.view-btn svg {width:16px;
height:16px;
fill:currentColor;
}

.view-btn:hover {color:var(--text-primary);
}

.view-btn.active {background:linear-gradient(135deg,#ff8a00,var(--accent-orange));
color:var(--text-primary);
box-shadow:0 4px 15px rgba(255,106,0,0.3);
}

.category-card {position:relative;
border-radius:16px;
overflow:hidden;
display:flex;
align-items:stretch;
justify-content:stretch;
aspect-ratio:16/10;
cursor:pointer;
transition:transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),border-color 0.3s ease,box-shadow 0.3s ease,background 0.3s ease;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 8px 32px rgba(0,0,0,0.4);
background:radial-gradient(circle at 80% 20%,rgba(255,106,0,0.14) 0%,#111115 80%);
}

.category-card-icon {position:absolute;
top:18px;
left:20px;
width:38px;
height:38px;
background:rgba(255,106,0,0.08);
border:1px solid rgba(255,106,0,0.25);
border-radius:8px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
fill:var(--accent-orange);
stroke:var(--accent-orange);
opacity:0.85;
transition:transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),border-color 0.3s ease,background-color 0.3s ease,opacity 0.3s ease,filter 0.3s ease;
z-index:3;
pointer-events:none;
}

.category-card:hover .category-card-icon {opacity:1;
background:rgba(255,106,0,0.15);
border-color:rgba(255,106,0,0.4);
fill:#ff8533;
stroke:#ff8533;
transform:scale(1.05);
filter:drop-shadow(0 0 8px rgba(255,106,0,0.45));
}

.category-card-bg-layer {position:absolute;
inset:0;
z-index:0;
background:transparent;
transition:background 0.3s ease;
}

.category-card::before {content:'';
position:absolute;
left:0;
top:15%;
bottom:15%;
width:3px;
background:linear-gradient(to bottom,var(--accent-orange),rgba(255,106,0,0.2));
z-index:4;
border-radius:0 4px 4px 0;
transition:width 0.3s ease,box-shadow 0.3s ease,top 0.3s ease,bottom 0.3s ease;
}

.category-card::after {content:'';
position:absolute;
inset:0;
border-radius:16px;
padding:1px;
background:linear-gradient(135deg,rgba(255,106,0,0.5),transparent 50%,rgba(255,106,0,0.15));
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
-webkit-mask-composite:exclude;
mask-composite:exclude;
pointer-events:none;
opacity:0;
transition:opacity 0.3s ease;
z-index:5;
}

.category-card:hover {transform:translateY(-5px);
border-color:rgba(255,106,0,0.35);
box-shadow:0 12px 30px rgba(255,106,0,0.12),0 4px 15px rgba(0,0,0,0.4);
background:radial-gradient(circle at 80% 20%,rgba(255,106,0,0.22) 0%,#131318 80%);
}

.category-card:hover::before {width:4px;
top:0;
bottom:0;
box-shadow:0 0 12px rgba(255,106,0,0.8);
}

.category-card:hover::after {opacity:1;
}

.category-card:hover .category-card-bg-layer {background:transparent;
}

.category-card-content {position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
text-align:left;
padding:22px;
width:100%;
height:100%;
box-sizing:border-box;
gap:6px;
}

.category-card-name {font-size:16px;
font-weight:800;
color:var(--text-primary);
text-transform:uppercase;
letter-spacing:0.5px;
line-height:1.2;
text-shadow:0 2px 8px rgba(0,0,0,0.8);
word-break:normal;
overflow-wrap:break-word;
hyphens:none;
transition:text-shadow 0.3s ease,color 0.3s ease;
width:100%;
}

.category-card:hover .category-card-name {color:#ffffff;
text-shadow:0 2px 12px rgba(255,106,0,0.3),0 2px 8px rgba(0,0,0,0.8);
}

.category-card-count-badge {position:absolute;
top:18px;
right:18px;
padding:4px 10px;
background:rgba(255,106,0,0.08);
border:1px solid rgba(255,106,0,0.2);
color:#ffb694;
font-size:11px;
font-weight:700;
border-radius:20px;
letter-spacing:0.5px;
z-index:3;
transition:transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),border-color 0.3s ease,background-color 0.3s ease,color 0.3s ease,box-shadow 0.3s ease;
display:flex;
align-items:center;
justify-content:center;
height:auto;
width:auto;
}

.category-card:hover .category-card-count-badge {background:rgba(255,106,0,0.16);
color:#ffffff;
border-color:rgba(255,106,0,0.35);
box-shadow:0 0 10px rgba(255,106,0,0.2);
transform:scale(1.05);
}

.category-card-subtitle {font-size:11px;
font-weight:700;
color:#5e6068;
text-transform:uppercase;
letter-spacing:1.5px;
transition:color 0.3s ease;
display:flex;
align-items:center;
gap:4px;
}

.category-card-subtitle::after {content:'';
font-size:12px;
color:#ff6a00;
opacity:0;
transform:translateX(-4px);
transition:transform 0.3s ease,opacity 0.3s ease;
}

.category-card:hover .category-card-subtitle {color:#ffb694;
}

.category-card:hover .category-card-subtitle::after {opacity:1;
transform:translateX(0);
}

@media (max-width:768px) {header {padding:12px 16px;
}

.header-container {gap:12px;
}

.logo-image {width:80px;
height:80px;
max-height:80px;
}

.view-selector {width:100%;
}

.view-btn {flex:1;
justify-content:center;
padding:8px 12px;
font-size:12px;
}

.category-card {aspect-ratio:1.4;
}

.category-card-content {padding:12px 14px 14px 14px;
gap:3px;
}

.category-card-name {font-size:12px;
letter-spacing:0.8px;
line-height:1.25;
}

.category-card-icon {top:12px;
left:14px;
width:16px;
height:16px;
}

.category-card-count-badge {width:26px;
height:26px;
font-size:11px;
top:8px;
right:8px;
}

}

.social-links-header {display:flex;
justify-content:flex-end;
gap:6px;
margin-top:0;
flex-wrap:wrap;
overflow:visible;
padding:10px 5px;
}

@media (max-width:768px) {.social-links-header {justify-content:center !important;
gap:8px !important;
flex-wrap:wrap !important;
overflow-x:visible !important;
}

}

.contact-link {display:flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:20px;
font-size:11px;
font-weight:600;
text-decoration:none;
white-space:nowrap;
flex-shrink:0;
transition:var(--transition);
box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.contact-link svg {width:14px;
height:14px;
fill:currentColor;
}

.contact-link:hover {transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.contact-link.home-btn {background:rgba(10,10,12,0.9);
border:1.5px solid rgba(255,106,0,0.7);
color:var(--accent-orange);
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.contact-link.home-btn:hover {background:var(--accent-orange);
border-color:transparent;
color:#ffffff;
box-shadow:0 0 15px rgba(255,106,0,0.5);
}

.contact-link.whatsapp {background:rgba(10,10,12,0.9);
border:1.5px solid rgba(37,211,102,0.7);
color:#25d366;
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.contact-link.whatsapp:hover {background:#25d366;
border-color:transparent;
color:#ffffff;
box-shadow:0 0 15px rgba(37,211,102,0.5);
}

.contact-link.instagram {background:rgba(10,10,12,0.9);
border:1.5px solid rgba(225,48,108,0.7);
color:#ff508e;
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.contact-link.instagram:hover {background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border-color:transparent;
color:#ffffff;
box-shadow:0 0 15px rgba(225,48,108,0.5);
}

.contact-link.facebook {background:rgba(10,10,12,0.9);
border:1.5px solid rgba(24,119,242,0.7);
color:#2d88ff;
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.contact-link.facebook:hover {background:#1877f2;
border-color:transparent;
color:#ffffff;
box-shadow:0 0 15px rgba(24,119,242,0.5);
}

.contact-link.google-maps {background:rgba(10,10,12,0.9);
border:1.5px solid rgba(234,67,53,0.7);
color:#ff6b5b;
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.contact-link.google-maps:hover {background:#ea4335;
border-color:transparent;
color:#ffffff;
box-shadow:0 0 15px rgba(234,67,53,0.5);
}

.contact-link.google-reviews {background:rgba(10,10,12,0.9);
border:1.5px solid rgba(244,180,0,0.7);
color:#ffc83b;
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.contact-link.google-reviews:hover {background:#f4b400;
border-color:transparent;
color:#0c0c0e;
box-shadow:0 0 15px rgba(244,180,0,0.5);
}

.nav-back-container {max-width:1200px;
margin:20px auto 10px auto;
padding:0 24px;
display:flex;
align-items:center;
gap:16px;
}

.nav-back-btn {background:rgba(255,255,255,0.03);
border:1px solid var(--border-color);
color:var(--text-primary);
padding:10px 20px;
border-radius:30px;
font-size:13px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
transition:var(--transition);
}

.nav-back-btn svg {width:18px;
height:18px;
fill:currentColor;
}

.nav-back-btn:hover {background:rgba(255,106,0,0.1);
border-color:var(--accent-orange);
color:var(--accent-orange);
transform:translateX(-4px);
}

.current-view-title {font-size:18px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--text-primary);
}

.search-input:focus-visible,.category-pill:focus-visible,.card-btn:focus-visible,.nav-back-btn:focus-visible,.lightbox-close:focus-visible,.lightbox-action-btn:focus-visible,.fab-whatsapp:focus-visible,.category-card:focus-visible {outline:2px solid var(--accent-orange);
outline-offset:3px;
}

@media (prefers-reduced-motion:reduce) {body::before,body::after {animation:none !important;
transform:none !important;
}

.product-card:hover,.category-card:hover {transform:none !important;
}

* {transition:none !important;
animation-delay:0s !important;
animation-duration:0s !important;
}

}

@media (max-height:520px) and (orientation:landscape) {header {position:relative !important;
padding:10px 16px !important;
}

.header-container {flex-direction:row !important;
justify-content:space-between !important;
align-items:center !important;
gap:16px !important;
flex-wrap:nowrap !important;
}

.header-top-row {flex:0 0 auto !important;
width:auto !important;
}

.header-bottom-row {flex:1 1 auto !important;
width:auto !important;
justify-content:flex-end !important;
}

.brand-lockup {flex-direction:row !important;
align-items:center !important;
gap:8px !important;
}

.logo-image {max-height:38px !important;
width:auto !important;
margin-bottom:0 !important;
}

.logo-title {display:none !important;
}

.logo-subtitle,.logo-rif,.social-links-header {display:none !important;
}

.search-wrapper {max-width:320px !important;
flex:1 1 auto !important;
margin:0 !important;
}

.view-selector {width:auto !important;
flex:0 0 auto !important;
}

.view-btn span {display:none !important;
}

.view-btn {padding:8px 12px !important;
}

}

.card-actions {display:flex;
gap:8px;
width:100%;
margin-top:auto;
}

.card-btn-add {display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:12px;
border-radius:12px;
border:1px solid rgba(255,106,0,0.25);
background:rgba(255,106,0,0.04);
color:var(--accent-orange);
font-size:13px;
font-weight:700;
cursor:pointer;
transition:var(--transition);
flex:1;
}

.card-btn-add:hover {background:var(--accent-orange);
color:#ffffff;
box-shadow:0 4px 12px rgba(255,106,0,0.25);
border-color:transparent;
}

.card-btn-add svg {width:16px;
height:16px;
fill:currentColor;
}

.card-btn {flex:1;
}

.cart-drawer {position:fixed;
top:0;
right:0;
width:420px;
height:100%;
background:rgba(10,10,12,0.75);
backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);
border-left:1px solid var(--border-color);
box-shadow:-10px 0 30px rgba(0,0,0,0.6);
z-index:999;
transform:translateX(100%);
transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
display:flex;
flex-direction:column;
}

.cart-drawer.active {transform:translateX(0);
}

.cart-overlay {position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
z-index:998;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
}

.cart-overlay.active {opacity:1;
pointer-events:auto;
}

.cart-header {padding:24px;
border-bottom:1px solid var(--border-color);
display:flex;
align-items:center;
justify-content:space-between;
}

.cart-header h3 {font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.5px;
color:var(--text-primary);
}

.cart-close {background:transparent;
border:none;
color:var(--text-secondary);
font-size:28px;
cursor:pointer;
line-height:1;
transition:var(--transition);
}

.cart-close:hover {color:var(--accent-orange);
transform:rotate(90deg);
}

.cart-clear-btn {background:rgba(217,83,79,0.1);
border:1px solid rgba(217,83,79,0.3);
color:#d9534f;
padding:4px 10px;
border-radius:12px;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer;
transition:var(--transition);
margin-left:auto;
margin-right:12px;
}

.cart-clear-btn:hover {background:#d9534f;
color:#ffffff;
border-color:transparent;
box-shadow:0 0 8px rgba(217,83,79,0.4);
}

.cart-body {flex-grow:1;
overflow-y:auto;
padding:20px;
display:flex;
flex-direction:column;
gap:16px;
}

.cart-item {display:flex;
gap:12px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border-color);
border-radius:12px;
padding:12px;
align-items:center;
position:relative;
transition:var(--transition);
}

.cart-item:hover {border-color:rgba(255,106,0,0.2);
background:rgba(255,255,255,0.03);
}

.cart-item-img {width:60px;
height:60px;
border-radius:8px;
object-fit:cover;
background:#0d0d12;
border:1px solid var(--border-color);
}

.cart-item-info {flex-grow:1;
display:flex;
flex-direction:column;
gap:4px;
}

.cart-item-title {font-size:12px;
font-weight:700;
text-transform:uppercase;
color:var(--text-primary);
line-height:1.3;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.cart-item-category {font-size:9px;
font-weight:600;
text-transform:uppercase;
color:var(--accent-orange);
letter-spacing:0.5px;
}

.cart-item-controls {display:flex;
align-items:center;
gap:8px;
margin-top:6px;
}

.cart-qty-btn {width:24px;
height:24px;
border-radius:50%;
border:1px solid var(--border-color);
background:rgba(255,255,255,0.03);
color:var(--text-primary);
font-size:14px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:var(--transition);
}

.cart-qty-btn:hover {background:var(--accent-orange);
border-color:transparent;
color:#ffffff;
}

.cart-item-qty {font-size:13px;
font-weight:700;
width:20px;
text-align:center;
}

.cart-item-remove {background:transparent;
border:none;
color:var(--text-muted);
cursor:pointer;
padding:4px;
transition:var(--transition);
display:flex;
align-items:center;
justify-content:center;
margin-left:auto;
}

.cart-item-remove:hover {color:#d9534f;
transform:scale(1.1);
}

.cart-item-remove svg {width:18px;
height:18px;
fill:currentColor;
}

.cart-footer {padding:24px;
border-top:1px solid var(--border-color);
display:flex;
flex-direction:column;
gap:16px;
background:rgba(10,10,12,0.5);
}

.cart-summary {display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
color:var(--text-secondary);
}

.cart-summary strong {font-size:18px;
color:var(--text-primary);
}

.cart-submit-btn {display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
padding:16px;
border-radius:16px;
border:none;
background:var(--accent-green);
color:#ffffff;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:var(--transition);
box-shadow:0 4px 15px rgba(37,211,102,0.3);
}

.cart-submit-btn:hover {background:var(--accent-green-hover);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(37,211,102,0.4);
}

.cart-submit-btn svg {width:20px;
height:20px;
fill:#ffffff;
}

.cart-empty {display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100%;
text-align:center;
gap:12px;
color:var(--text-muted);
padding:40px 20px;
}

.cart-empty svg {width:48px;
height:48px;
fill:var(--text-muted);
opacity:0.5;
}

.cart-empty p {font-size:13px;
}

.fab-cart-badge {position:absolute;
top:-4px;
right:-4px;
background:var(--accent-orange);
color:#ffffff;
font-size:11px;
font-weight:800;
width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:2px solid var(--bg-primary);
box-shadow:0 2px 8px rgba(0,0,0,0.4);
transform:scale(0);
transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.fab-cart-badge.active {transform:scale(1);
}

.img-lazy {opacity:0;
filter:blur(8px);
transition:opacity 0.4s ease-out,filter 0.4s ease-out;
}

.img-lazy.img-loaded {opacity:1;
filter:blur(0);
}

@media (max-width:768px) {.cart-drawer {width:100%;
height:82vh;
top:auto;
bottom:0;
border-left:none;
border-top:1px solid var(--border-color);
border-radius:20px 20px 0 0;
transform:translateY(100%);
}

.cart-drawer.active {transform:translateY(0);
}

.card-btn span {display:none;
}

.card-btn::after {content:"Consultar";
}

.card-btn-add span {display:none;
}

.card-btn-add {padding:10px;
flex:0 0 46px;
border-radius:10px;
}

.card-btn-add svg {width:18px;
height:18px;
}

.card-actions {gap:6px;
}

}

.skeleton-folder-card {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    aspect-ratio:16/10;
    border:1px solid var(--border-color);
    background:var(--bg-card);
}

@media (max-width:768px) {
    .skeleton-folder-card {
        aspect-ratio:1.4;
    }
}

.skeleton-folder-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#111116 25%,#1c1c24 50%,#111116 75%);
    background-size:200% 100%;
    animation:loading-pulse 1.5s infinite;
}

/* Accesibilidad */
.skip-link {
    position: absolute;

    top: -40px;

    left: 0;

    background: #ff6a00;

    color: white;

    padding: 8px;

    z-index: 10000;

    transition: top 0.2s;

}

.skip-link:focus {
    top: 0;

}

.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;

}

/* Información de Venta en el Modal */
.business-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.business-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-left: 3px solid var(--accent-orange);
    padding-left: 10px;
    margin: 0 0 4px 0;
}

.info-item {
    display: flex;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: left;
}

.info-item svg {
    width: 18px;
    height: 18px;
    fill: var(--accent-orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-item strong {
    color: #fff;
}

/* ==========================================
   FEEDBACK & SOCIAL MEDIA FLOATING MODAL
   ========================================== */
.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
    padding: 20px;
}

.feedback-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.feedback-modal-card {
    background: linear-gradient(135deg, rgba(26, 26, 36, 0.95), rgba(18, 18, 24, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.feedback-modal-overlay.active .feedback-modal-card {
    transform: translateY(0) scale(1);
}

.feedback-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.feedback-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: rotate(90deg);
}

.feedback-modal-header {
    padding: 40px 30px 20px;
    text-align: center;
    position: relative;
}

.feedback-modal-icon-container {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-variant-instagram .feedback-modal-icon-container {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aec 90%);
}
.modal-variant-facebook .feedback-modal-icon-container {
    background: #1877f2;
}
.modal-variant-whatsapp .feedback-modal-icon-container {
    background: #25d366;
}
.modal-variant-google .feedback-modal-icon-container {
    background: #fff;
}

.feedback-modal-icon-container svg {
    width: 36px;
    height: 36px;
    fill: #fff;
}

.modal-variant-google .feedback-modal-icon-container svg {
    fill: none; /* Let path inline fills work for colorful Google logo */
}

.feedback-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.feedback-modal-body {
    padding: 0 30px 30px;
    text-align: center;
}

.feedback-modal-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.feedback-stars-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.feedback-star {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.feedback-star.active,
.feedback-star.hovered {
    color: #f4b400;
    transform: scale(1.15);
    text-shadow: 0 0 10px rgba(244, 180, 0, 0.4);
}

.feedback-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.modal-variant-instagram .feedback-btn-primary {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.modal-variant-instagram .feedback-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(220, 39, 67, 0.4);
    transform: translateY(-2px);
}

.modal-variant-facebook .feedback-btn-primary {
    background: #1877f2;
}
.modal-variant-facebook .feedback-btn-primary:hover {
    background: #1565c0;
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
    transform: translateY(-2px);
}

.modal-variant-whatsapp .feedback-btn-primary {
    background: #25d366;
}
.modal-variant-whatsapp .feedback-btn-primary:hover {
    background: #20ba5a;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.modal-variant-google .feedback-btn-primary {
    background: #4285f4;
}
.modal-variant-google .feedback-btn-primary:hover {
    background: #357ae8;
    box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
    transform: translateY(-2px);
}

.feedback-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.feedback-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.feedback-success-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    animation: feedbackFadeIn 0.4s ease forwards;
}

@keyframes feedbackFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.feedback-success-checkmark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.1);
    border: 2px solid #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #25d366;
    font-size: 28px;
    animation: scaleCheckmark 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes scaleCheckmark {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@media (max-width: 480px) {
    .feedback-modal-overlay {
        padding: 15px;
        align-items: flex-end;
    }
    .feedback-modal-card {
        border-radius: 24px 24px 20px 20px;
        transform: translateY(100px) scale(1);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .feedback-modal-overlay.active .feedback-modal-card {
        transform: translateY(0) scale(1);
    }
    .feedback-modal-header {
        padding: 30px 20px 18px;
    }
    .feedback-modal-body {
        padding: 0 20px 24px;
    }
    .feedback-modal-title {
        font-size: 19px;
    }
    .feedback-modal-text {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

/* SECCIÓN DE ENLACES SEO DE VEHÍCULOS */
.vehicle-seo-section {
    margin: 40px auto;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    max-width: 1200px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.seo-section-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 16px;
    border-left: 3px solid var(--accent-orange);
    padding-left: 10px;
}
.seo-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.seo-links-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    text-align: center;
}
.seo-links-grid a:hover {
    border-color: var(--accent-orange);
    color: #ffffff;
    background: rgba(255, 106, 0, 0.05);
    transform: translateY(-2px);
}

/* PIE DE PAGINA (FOOTER) Y ENLACES SEO */
.footer-catalog {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 40px 24px 20px 24px;
    margin-top: 60px;
    font-family: 'Outfit', sans-serif;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 3px solid var(--accent-orange);
    padding-left: 10px;
}

@media (max-width: 768px) {
    .footer-title {
        border-left: none;
        padding-left: 0;
        position: relative;
        display: inline-block;
    }
}

.footer-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 13.5px;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .footer-links a:hover {
        transform: translateY(-2px);
    }
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* Directorio SEO Accordion */
.seo-directory-details {
    max-width: 1200px;
    margin: 20px auto 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.01);
    overflow: hidden;
}

.seo-directory-details summary {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
    outline: none;
    background: rgba(255, 255, 255, 0.02);
}

.seo-directory-details summary:hover {
    color: #ffffff;
    background: rgba(255, 106, 0, 0.05);
}

.seo-directory-details[open] summary {
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-orange);
}

.seo-links-container {
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.seo-links-container a {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.02);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.seo-links-container a:hover {
    color: #ffffff;
    background: rgba(255, 106, 0, 0.1);
    border-color: var(--accent-orange);
}

/* Soporte de altura de cabecera responsiva para CLS */
@media (max-width: 768px) {
    .header-wrapper {
        min-height: 250px;
    }
}