/* Estilos generales */

 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --negro: #000000;
    --blanco: #FFFFFF;
    --hueso: #F5F5DC;
    --dorado: #feb422;
    --gris-oscuro: #333333;
    font-size: 15px;
    --transition: all 0.3s ease;

    --color-fondo-principal: var(--hueso);
    --color-texto-principal: var(--negro);
    --color-titulos: var(--negro);

    /* Industrial palette */
    --font-body: 'Outfit', sans-serif;
    --off-black: #141412;
    --zinc-mid: #898680;
    --linea: #D8D3C9;
    --section-dark: oklch(9% 0.007 80);
    --section-light: oklch(97% 0.005 80);
    --easing-premium: cubic-bezier(0.32, 0.72, 0, 1);
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}

.btn, .btn-promo, .btn-rubro {
    transition: var(--transition);
    /* otros estilos comunes */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-principal);
    margin: 0;
    position: relative;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===================================== Fondo con SVG personalizado ======================================= */

:root {
    --negro: #000000;
    --blanco: #FFFFFF;
    --hueso: #F5F5DC;
    --dorado: #feb422;
    --gris-oscuro: #333333;
    font-size: 15px;
    --transition: all 0.3s ease;

    --color-fondo-principal: var(--hueso);
    --color-texto-principal: var(--negro);
    --color-titulos: var(--negro);

    /* Industrial palette */
    --font-body: 'Outfit', sans-serif;
    --off-black: #141412;
    --zinc-mid: #898680;
    --linea: #D8D3C9;
    --section-dark: oklch(9% 0.007 80);
    --section-light: oklch(97% 0.005 80);
    --easing-premium: cubic-bezier(0.32, 0.72, 0, 1);
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}

.btn, .btn-promo, .btn-rubro {
    transition: var(--transition);
    /* otros estilos comunes */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-principal);
    margin: 0;
    position: relative;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===================================== Fondo con SVG personalizado ======================================= */
/* ===================================== Fondo con SVG personalizado ======================================= */
/* ===================================== Fondo con SVG personalizado ======================================= */
/* ===================================== Fondo con SVG personalizado ======================================= */

/* SVG 1 - Primer patrón — UNUSED, kept for reference */
.pattern-svg-1-unused {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='300.000000pt' height='225.000000pt' viewBox='0 0 300.000000 225.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,225.000000) scale(0.050000,-0.050000)' fill='%23D4AF37' stroke='none'%3E%3Cpath d='M2944 4376 c-65 -65 35 -175 105 -116 57 47 24 140 -49 140 -18 0 -43 -11 -56 -24z'/%3E%3Cpath d='M2572 4354 c-52 -38 -35 -122 27 -131 83 -12 123 94 52 142 -29 20 -38 19 -79 -11z'/%3E%3Cpath d='M3320 4320 c-43 -81 52 -160 116 -96 34 34 30 110 -8 124 -55 21 -86 13 -108 -28z'/%3E%3Cpath d='M2191 4249 c-34 -35 -37 -50 -19 -97 23 -61 148 -26 148 41 0 28 -54 87 -80 87 -9 0 -31 -14 -49 -31z'/%3E%3Cpath d='M3868 4108 c-17 -65 30 -118 88 -99 87 27 65 151 -26 151 -36 0 -53 -14 -62 -52z'/%3E%3Cpath d='M1828 4071 c-20 -51 1 -120 38 -127 49 -10 94 32 94 86 0 66 -110 100 -132 41z'/%3E%3Cpath d='M4211 3933 c-59 -43 -27 -133 47 -133 80 0 108 71 51 129 -39 38 -51 38 -98 4z'/%3E%3Cpath d='M1531 3849 c-48 -49 -16 -149 47 -149 9 0 31 16 49 37 70 77 -22 185 -96 112z'/%3E%3Cpath d='M2087 3791 c-204 -89 -450 -462 -597 -906 -30 -91 -64 -171 -76 -178 -13 -9 -16 0 -7 23 8 21 20 119 26 219 46 719 -481 582 -781 -202 -135 -354 -177 -396 -101 -102 88 337 23 594 -165 656 -90 30 -100 16 -43 -61 92 -125 66 -404 -113 -1170 -186 -803 -199 -1167 -47 -1340 71 -82 131 -96 105 -25 -47 123 -7 528 84 845 307 1081 554 1610 752 1610 173 0 164 -238 -44 -1080 -207 -839 -211 -1353 -12 -1459 65 -34 83 -19 50 42 -92 168 98 1098 388 1897 256 706 497 1071 614 929 31 -37 14 -307 -28 -459 -32 -112 -43 -152 -200 -727 -249 -914 -186 -1423 182 -1458 172 -16 424 147 457 297 19 89 1 91 -93 11 -188 -161 -370 -163 -439 -4 -104 239 -50 633 190 1387 204 642 234 1076 85 1239 -47 51 -96 55 -187 16z'/%3E%3Cpath d='M4481 3651 c-53 -64 25 -162 94 -119 69 44 45 148 -35 148 -19 0 -46 -13 -59 -29z'/%3E%3Cpath d='M1259 3548 c-19 -23 -21 -41 -6 -65 51 -80 172 -28 128 56 -27 49 -86 53 -122 9z'/%3E%3Cpath d='M4220 3560 c-37 -24 -521 -187 -526 -177 -2 4 -22 43 -44 87 -62 123 -97 114 -151 -39 l-46 -130 -199 -65 c-201 -65 -354 -183 -354 -271 0 -34 -12 -36 268 64 237 86 222 95 153 -99 -31 -88 -85 -285 -120 -438 -66 -290 -121 -422 -305 -727 -94 -157 -121 -185 -144 -149 -11 18 118 414 186 571 55 125 53 139 -20 222 -75 85 -93 88 -109 16 -118 -525 -287 -974 -378 -997 -196 -49 -61 472 214 822 74 94 78 106 66 198 -29 215 -71 221 -216 27 -353 -470 -425 -1135 -123 -1135 98 0 138 27 199 130 61 104 84 112 93 35 17 -147 199 -2 344 274 93 177 102 176 102 -8 1 -173 22 -210 99 -175 57 26 210 225 287 374 l52 100 17 -90 c45 -228 114 -276 229 -155 113 119 340 526 436 780 42 112 56 117 91 32 14 -34 49 -90 77 -123 48 -57 49 -61 14 -82 -329 -193 -437 -396 -296 -554 137 -153 497 -44 617 187 45 88 39 282 -12 368 -53 89 -52 99 14 157 77 68 85 63 72 -47 -43 -361 238 -500 398 -196 41 77 44 80 51 33 35 -230 236 -38 490 470 135 270 217 469 202 493 -31 51 -78 -15 -232 -328 -364 -740 -473 -745 -174 -7 61 151 55 194 -40 281 -60 53 -63 46 -171 -349 -112 -414 -204 -628 -282 -664 -208 -95 -74 453 200 814 50 65 91 134 91 151 0 62 -64 219 -90 219 -63 0 -271 -296 -361 -514 -54 -131 -228 -347 -278 -345 -44 1 -191 232 -191 300 0 11 26 19 59 19 66 0 120 62 159 182 33 102 13 138 -77 138 -150 0 -265 -133 -329 -380 -60 -231 -432 -940 -493 -940 -69 0 35 448 180 777 100 229 102 215 -24 242 -91 20 -107 18 -129 -11 -54 -74 -186 -474 -186 -565 0 -81 -296 -603 -342 -603 -63 0 155 801 329 1214 64 152 64 146 4 146 -75 0 -79 35 -6 50 119 24 584 155 622 174 36 19 112 161 113 211 0 30 -38 32 -80 5z m362 -1300 c64 -212 -180 -470 -306 -325 -109 124 -88 198 101 358 145 124 159 122 205 -33z'/%3E%3Cpath d='M4703 3326 c-28 -52 8 -106 69 -106 27 0 55 15 62 33 29 77 -92 145 -131 73z'/%3E%3Cpath d='M3884 3168 c-14 -7 -43 -48 -66 -92 l-41 -80 61 14 c40 8 84 2 124 -18 76 -38 88 -32 119 60 31 96 -86 165 -197 116z'/%3E%3Cpath d='M4919 1819 c-19 -37 -16 -51 19 -86 55 -55 112 -25 112 59 0 77 -94 96 -131 27z'/%3E%3Cpath d='M4620 1731 c-49 -15 -378 -97 -730 -181 -1284 -310 -1260 -304 -1266 -338 -10 -47 3 -45 661 116 558 136 1324 320 1430 343 28 6 45 25 45 49 0 46 -16 47 -140 11z'/%3E%3Cpath d='M4811 1469 c-57 -58 -23 -129 63 -129 54 0 84 84 46 130 -32 39 -69 38 -109 -1z'/%3E%3Cpath d='M4620 1130 c-38 -46 -8 -130 46 -130 86 0 120 71 63 129 -40 39 -77 40 -109 1z'/%3E%3Cpath d='M1292 1034 c-55 -40 -35 -122 32 -130 72 -9 107 52 64 113 -35 50 -48 52 -96 17z'/%3E%3Cpath d='M4371 829 c-38 -39 -38 -51 -5 -97 37 -51 122 -35 131 24 12 89 -65 133 -126 73z'/%3E%3Cpath d='M1551 749 c-57 -57 -30 -129 49 -129 50 0 80 30 80 80 0 22 -58 80 -80 80 -9 0 -31 -14 -49 -31z'/%3E%3Cpath d='M4072 577 c-43 -61 -8 -122 64 -113 67 8 87 90 32 130 -48 35 -61 33 -96 -17z'/%3E%3Cpath d='M1848 488 c-17 -65 30 -118 88 -99 87 27 65 151 -26 151 -36 0 -53 -14 -62 -52z'/%3E%3Cpath d='M3719 378 c-18 -33 -15 -49 13 -80 63 -70 143 -22 120 72 -16 64 -100 69 -133 8z'/%3E%3Cpath d='M2201 341 c-50 -93 71 -165 127 -76 16 25 16 45 0 70 -33 52 -101 55 -127 6z'/%3E%3Cpath d='M3353 287 c-27 -28 -12 -106 26 -126 74 -40 140 26 100 100 -20 38 -98 53 -126 26z'/%3E%3Cpath d='M2584 256 c-65 -65 35 -175 105 -116 57 47 24 140 -49 140 -18 0 -43 -11 -56 -24z'/%3E%3Cpath d='M2981 231 c-45 -54 -18 -121 49 -121 51 0 61 8 67 58 9 83 -66 124 -116 63z'/%3E%3C/g%3E%3C/svg%3E");
    width: 180px;
    height: 135px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* SVG 2 - Segundo patrón */
.pattern-svg-2 {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='900.000000pt' height='900.000000pt' viewBox='0 0 900.000000 900.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,900.000000) scale(0.100000,-0.100000)' fill='%23D4AF37' stroke='none'%3E%3Cpath d='M6090 5026 c-151 -38 -255 -144 -306 -316 -11 -34 -19 -103 -21 -179 -4 -121 -4 -125 26 -188 17 -35 31 -68 31 -72 0 -5 19 -31 43 -57 24 -27 53 -62 66 -79 12 -16 37 -46 55 -65 54 -59 116 -141 132 -174 8 -17 24 -46 35 -63 32 -50 49 -129 49 -225 0 -74 -4 -94 -25 -135 -33 -62 -49 -73 -108 -73 -93 0 -127 70 -127 259 0 74 -4 102 -14 111 -21 17 -266 17 -294 -1 -17 -11 -22 -27 -28 -88 -10 -108 1 -279 20 -316 9 -16 16 -36 16 -43 0 -58 119 -188 198 -215 154 -53 405 -38 523 33 74 44 148 136 168 210 44 158 38 418 -14 535 -63 144 -69 152 -261 379 -108 128 -149 209 -149 296 0 41 7 83 19 114 16 40 27 51 63 67 36 15 48 16 71 7 60 -26 84 -70 82 -146 -2 -32 -3 -82 -4 -112 l-1 -55 144 -3 c82 -1 149 2 154 7 5 5 15 48 22 95 13 84 7 193 -13 277 -14 57 -66 124 -131 167 -51 34 -73 42 -142 51 -101 14 -219 12 -279 -3z'/%3E%3Cpath d='M1207 5013 c-12 -22 -39 -166 -58 -303 -12 -85 -24 -159 -27 -165 -3 -5 -12 -48 -20 -95 -19 -115 -27 -164 -40 -235 -6 -33 -18 -105 -27 -160 -9 -55 -23 -131 -30 -170 -8 -38 -16 -101 -20 -140 -3 -38 -12 -101 -20 -140 -7 -38 -21 -117 -30 -175 -9 -58 -20 -109 -25 -115 -7 -8 -15 -146 -11 -193 1 -10 38 -12 169 -10 l167 3 12 48 c6 27 17 92 23 145 6 53 15 115 20 137 6 22 15 78 20 125 6 47 17 137 25 200 8 63 20 167 26 230 12 115 20 140 45 140 18 0 22 -20 34 -165 5 -66 17 -158 25 -205 8 -47 21 -128 29 -180 21 -142 33 -179 62 -190 14 -6 63 -10 108 -10 68 0 86 3 99 18 10 10 17 24 17 31 0 7 7 25 14 39 8 15 37 72 64 127 27 55 53 109 59 120 6 11 23 47 38 80 69 156 141 294 153 295 19 0 15 -73 -9 -181 -20 -86 -33 -164 -59 -338 -5 -35 -14 -77 -19 -95 -13 -42 -30 -132 -47 -250 -11 -74 -11 -102 -3 -112 9 -11 47 -14 168 -14 86 0 161 4 166 8 11 7 31 107 45 227 5 39 13 81 18 95 5 14 12 54 16 90 4 35 13 89 21 120 15 66 29 146 55 337 11 79 24 153 29 165 4 13 11 53 15 91 4 37 11 80 17 95 6 15 14 54 19 87 8 53 28 161 44 235 3 14 17 94 31 178 20 119 23 157 14 168 -9 11 -44 14 -163 14 -173 0 -149 14 -218 -123 -23 -45 -52 -96 -65 -114 -12 -17 -23 -35 -23 -40 0 -12 -117 -237 -150 -288 -23 -36 -46 -79 -89 -165 -18 -36 -42 -83 -54 -105 -11 -22 -42 -80 -68 -130 -33 -63 -53 -91 -67 -93 -24 -4 -30 11 -42 105 -5 37 -16 115 -25 173 -9 58 -22 150 -30 205 -38 290 -47 353 -55 385 -6 19 -10 57 -10 83 0 26 -7 61 -15 77 l-16 30 -164 0 c-90 0 -166 -3 -168 -7z'/%3E%3Cpath d='M3287 4996 c-17 -26 -58 -116 -152 -331 -7 -16 -27 -59 -43 -95 -16 -36 -46 -105 -66 -155 -21 -49 -41 -98 -47 -107 -5 -10 -9 -23 -9 -29 0 -11 -6 -25 -59 -143 -17 -37 -31 -78 -31 -90 0 -11 -6 -33 -14 -47 -7 -15 -24 -55 -36 -90 -12 -35 -25 -68 -29 -74 -4 -5 -16 -32 -25 -60 -10 -27 -24 -59 -31 -70 -6 -11 -15 -33 -19 -50 -4 -16 -25 -67 -47 -113 -21 -46 -39 -88 -39 -94 0 -5 -6 -22 -14 -36 -7 -15 -24 -52 -36 -82 -12 -30 -33 -78 -46 -106 -14 -28 -26 -64 -27 -80 l-2 -29 188 -3 187 -2 17 37 c43 99 53 123 85 188 l33 70 140 0 c193 -1 184 7 187 -158 l3 -132 174 -3 174 -2 -7 187 c-4 104 -9 289 -12 413 -19 854 -39 1267 -61 1292 -13 15 -36 17 -169 16 -144 -1 -155 -2 -167 -22z m71 -930 c3 -337 6 -326 -98 -326 -71 0 -115 13 -124 36 -3 7 8 50 23 96 16 46 39 117 51 158 13 41 27 82 31 90 8 17 63 171 74 208 4 14 13 22 23 20 15 -3 17 -31 20 -282z'/%3E%3Cpath d='M4015 5003 c-30 -73 -69 -312 -54 -328 6 -5 72 -12 147 -14 89 -2 140 -7 144 -15 11 -16 10 -75 -2 -116 -6 -19 -17 -75 -25 -125 -27 -170 -36 -218 -44 -234 -5 -9 -12 -46 -16 -84 -4 -37 -11 -70 -16 -73 -5 -3 -9 -22 -9 -42 -1 -20 -7 -55 -15 -77 -8 -22 -15 -53 -15 -69 0 -17 -6 -57 -14 -90 -31 -135 -38 -174 -46 -236 -11 -100 -31 -210 -47 -266 -20 -70 -15 -117 15 -124 12 -3 89 -3 169 0 l147 5 12 45 c16 65 41 186 52 255 6 33 19 100 31 149 12 50 21 106 21 125 0 20 6 48 14 62 7 14 16 62 20 107 4 45 12 97 17 114 16 54 59 258 69 328 5 36 14 81 19 100 12 42 38 160 46 212 7 47 19 51 167 50 65 0 121 4 124 10 3 5 16 72 29 149 14 77 27 144 30 149 3 5 1 19 -5 30 -11 20 -19 20 -484 20 -442 0 -474 -1 -481 -17z'/%3E%3Cpath d='M5244 5008 c-33 -16 -50 -67 -84 -258 -17 -96 -38 -215 -47 -264 -8 -48 -19 -118 -24 -155 -5 -36 -16 -97 -25 -136 -8 -38 -20 -104 -25 -145 -15 -121 -30 -213 -41 -245 -5 -16 -13 -68 -19 -114 -5 -47 -14 -90 -19 -96 -5 -6 -13 -44 -19 -85 -5 -41 -19 -118 -30 -170 -11 -52 -22 -123 -26 -157 -7 -59 -6 -62 17 -68 12 -3 97 -4 188 -3 l164 3 14 65 c12 60 20 107 50 305 6 39 16 84 21 100 5 17 12 66 16 110 3 44 10 94 15 110 9 30 54 259 72 370 6 33 19 107 30 165 11 58 24 133 29 168 4 34 15 96 24 137 8 41 15 87 15 103 0 15 4 32 9 38 5 5 15 53 21 107 9 76 9 101 0 113 -10 11 -43 14 -159 13 -80 0 -156 -5 -167 -11z'/%3E%3Cpath d='M7392 5006 c-14 -19 -132 -271 -132 -281 0 -4 -11 -30 -24 -58 -13 -29 -33 -74 -46 -102 -12 -27 -34 -77 -50 -110 -16 -33 -38 -89 -50 -125 -12 -36 -32 -87 -46 -113 -13 -27 -24 -56 -24 -66 0 -9 -6 -25 -14 -36 -7 -11 -17 -36 -21 -55 -4 -19 -18 -57 -30 -85 -13 -27 -27 -63 -31 -78 -3 -16 -17 -51 -30 -78 -13 -27 -24 -55 -24 -62 0 -7 -6 -21 -14 -32 -7 -11 -23 -47 -34 -81 -11 -33 -32 -82 -46 -109 -14 -26 -26 -52 -26 -57 0 -10 -7 -26 -59 -142 -17 -37 -31 -73 -31 -80 0 -6 -12 -33 -25 -61 -29 -59 -30 -71 -9 -79 9 -3 94 -6 190 -6 l175 0 20 47 c37 86 51 117 70 159 10 23 19 46 19 51 0 5 8 17 18 26 30 28 291 21 320 -8 4 -4 9 -66 12 -138 l5 -132 169 -3 c93 -1 173 1 177 5 4 5 3 91 -2 193 -5 102 -13 343 -19 535 -24 838 -37 1131 -51 1152 -12 21 -21 22 -171 21 -103 -1 -161 -5 -166 -12z m73 -673 c3 -10 3 -137 -1 -283 -8 -318 -5 -310 -103 -310 -76 0 -115 16 -119 48 -2 13 10 61 27 108 17 47 31 95 31 107 0 12 7 34 14 49 8 16 25 58 37 95 12 38 26 73 30 78 3 6 10 26 14 45 14 67 54 104 70 63z'/%3E%3Cpath d='M8094 3478 c-69 -39 -83 -53 -114 -114 -32 -64 -37 -107 -17 -169 42 -137 177 -213 314 -176 44 12 113 70 148 126 26 40 28 165 3 215 -33 66 -98 122 -155 134 -48 11 -49 -10 0 -22 45 -12 101 -57 132 -107 14 -22 19 -50 19 -106 1 -71 -1 -80 -34 -128 -19 -28 -38 -51 -42 -51 -4 0 -13 -6 -20 -14 -8 -7 -40 -21 -71 -30 -53 -15 -60 -15 -109 0 -71 23 -119 63 -151 124 -27 53 -38 142 -18 155 5 3 12 19 16 35 10 43 95 117 146 125 29 5 38 10 28 16 -21 13 -30 11 -75 -13z'/%3E%3Cpath d='M8131 3258 c1 -93 3 -106 10 -73 5 22 17 46 26 53 16 11 16 12 0 12 -21 0 -33 44 -21 79 7 21 17 27 46 29 29 2 41 -2 62 -25 28 -30 32 -27 14 12 -10 23 -16 25 -75 25 l-63 0 1 -112z'/%3E%3Cpath d='M8257 3274 c-10 -13 -27 -24 -37 -24 -25 0 -25 -15 -1 -39 10 -10 22 -28 26 -40 3 -12 11 -21 16 -21 13 0 11 8 -7 39 -15 25 -15 29 6 65 24 44 23 55 -3 20z'/%3E%3C/g%3E%3C/svg%3E");
    width: 220px;
    height: 220px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* SVG 3 - Tercer patrón (versión simplificada del primero) */
.pattern-svg-3 {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='300.000000pt' height='225.000000pt' viewBox='0 0 300.000000 225.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,225.000000) scale(0.050000,-0.050000)' fill='%23D4AF37' stroke='none'%3E%3Cpath d='M2944 4376 c-65 -65 35 -175 105 -116 57 47 24 140 -49 140 -18 0 -43 -11 -56 -24z'/%3E%3Cpath d='M2572 4354 c-52 -38 -35 -122 27 -131 83 -12 123 94 52 142 -29 20 -38 19 -79 -11z'/%3E%3Cpath d='M3320 4320 c-43 -81 52 -160 116 -96 34 34 30 110 -8 124 -55 21 -86 13 -108 -28z'/%3E%3Cpath d='M2191 4249 c-34 -35 -37 -50 -19 -97 23 -61 148 -26 148 41 0 28 -54 87 -80 87 -9 0 -31 -14 -49 -31z'/%3E%3Cpath d='M3868 4108 c-17 -65 30 -118 88 -99 87 27 65 151 -26 151 -36 0 -53 -14 -62 -52z'/%3E%3Cpath d='M1828 4071 c-20 -51 1 -120 38 -127 49 -10 94 32 94 86 0 66 -110 100 -132 41z'/%3E%3Cpath d='M4211 3933 c-59 -43 -27 -133 47 -133 80 0 108 71 51 129 -39 38 -51 38 -98 4z'/%3E%3Cpath d='M1531 3849 c-48 -49 -16 -149 47 -149 9 0 31 16 49 37 70 77 -22 185 -96 112z'/%3E%3Cpath d='M2087 3791 c-204 -89 -450 -462 -597 -906 -30 -91 -64 -171 -76 -178 -13 -9 -16 0 -7 23 8 21 20 119 26 219 46 719 -481 582 -781 -202 -135 -354 -177 -396 -101 -102 88 337 23 594 -165 656 -90 30 -100 16 -43 -61 92 -125 66 -404 -113 -1170 -186 -803 -199 -1167 -47 -1340 71 -82 131 -96 105 -25 -47 123 -7 528 84 845 307 1081 554 1610 752 1610 173 0 164 -238 -44 -1080 -207 -839 -211 -1353 -12 -1459 65 -34 83 -19 50 42 -92 168 98 1098 388 1897 256 706 497 1071 614 929 31 -37 14 -307 -28 -459 -32 -112 -43 -152 -200 -727 -249 -914 -186 -1423 182 -1458 172 -16 424 147 457 297 19 89 1 91 -93 11 -188 -161 -370 -163 -439 -4 -104 239 -50 633 190 1387 204 642 234 1076 85 1239 -47 51 -96 55 -187 16z'/%3E%3Cpath d='M4481 3651 c-53 -64 25 -162 94 -119 69 44 45 148 -35 148 -19 0 -46 -13 -59 -29z'/%3E%3Cpath d='M1259 3548 c-19 -23 -21 -41 -6 -65 51 -80 172 -28 128 56 -27 49 -86 53 -122 9z'/%3E%3Cpath d='M4220 3560 c-37 -24 -521 -187 -526 -177 -2 4 -22 43 -44 87 -62 123 -97 114 -151 -39 l-46 -130 -199 -65 c-201 -65 -354 -183 -354 -271 0 -34 -12 -36 268 64 237 86 222 95 153 -99 -31 -88 -85 -285 -120 -438 -66 -290 -121 -422 -305 -727 -94 -157 -121 -185 -144 -149 -11 18 118 414 186 571 55 125 53 139 -20 222 -75 85 -93 88 -109 16 -118 -525 -287 -974 -378 -997 -196 -49 -61 472 214 822 74 94 78 106 66 198 -29 215 -71 221 -216 27 -353 -470 -425 -1135 -123 -1135 98 0 138 27 199 130 61 104 84 112 93 35 17 -147 199 -2 344 274 93 177 102 176 102 -8 1 -173 22 -210 99 -175 57 26 210 225 287 374 l52 100 17 -90 c45 -228 114 -276 229 -155 113 119 340 526 436 780 42 112 56 117 91 32 14 -34 49 -90 77 -123 48 -57 49 -61 14 -82 -329 -193 -437 -396 -296 -554 137 -153 497 -44 617 187 45 88 39 282 -12 368 -53 89 -52 99 14 157 77 68 85 63 72 -47 -43 -361 238 -500 398 -196 41 77 44 80 51 33 35 -230 236 -38 490 470 135 270 217 469 202 493 -31 51 -78 -15 -232 -328 -364 -740 -473 -745 -174 -7 61 151 55 194 -40 281 -60 53 -63 46 -171 -349 -112 -414 -204 -628 -282 -664 -208 -95 -74 453 200 814 50 65 91 134 91 151 0 62 -64 219 -90 219 -63 0 -271 -296 -361 -514 -54 -131 -228 -347 -278 -345 -44 1 -191 232 -191 300 0 11 26 19 59 19 66 0 120 62 159 182 33 102 13 138 -77 138 -150 0 -265 -133 -329 -380 -60 -231 -432 -940 -493 -940 -69 0 35 448 180 777 100 229 102 215 -24 242 -91 20 -107 18 -129 -11 -54 -74 -186 -474 -186 -565 0 -81 -296 -603 -342 -603 -63 0 155 801 329 1214 64 152 64 146 4 146 -75 0 -79 35 -6 50 119 24 584 155 622 174 36 19 112 161 113 211 0 30 -38 32 -80 5z m362 -1300 c64 -212 -180 -470 -306 -325 -109 124 -88 198 101 358 145 124 159 122 205 -33z'/%3E%3Cpath d='M4703 3326 c-28 -52 8 -106 69 -106 27 0 55 15 62 33 29 77 -92 145 -131 73z'/%3E%3Cpath d='M3884 3168 c-14 -7 -43 -48 -66 -92 l-41 -80 61 14 c40 8 84 2 124 -18 76 -38 88 -32 119 60 31 96 -86 165 -197 116z'/%3E%3Cpath d='M4919 1819 c-19 -37 -16 -51 19 -86 55 -55 112 -25 112 59 0 77 -94 96 -131 27z'/%3E%3Cpath d='M4620 1731 c-49 -15 -378 -97 -730 -181 -1284 -310 -1260 -304 -1266 -338 -10 -47 3 -45 661 116 558 136 1324 320 1430 343 28 6 45 25 45 49 0 46 -16 47 -140 11z'/%3E%3Cpath d='M4811 1469 c-57 -58 -23 -129 63 -129 54 0 84 84 46 130 -32 39 -69 38 -109 -1z'/%3E%3Cpath d='M4620 1130 c-38 -46 -8 -130 46 -130 86 0 120 71 63 129 -40 39 -77 40 -109 1z'/%3E%3Cpath d='M1292 1034 c-55 -40 -35 -122 32 -130 72 -9 107 52 64 113 -35 50 -48 52 -96 17z'/%3E%3Cpath d='M4371 829 c-38 -39 -38 -51 -5 -97 37 -51 122 -35 131 24 12 89 -65 133 -126 73z'/%3E%3Cpath d='M1551 749 c-57 -57 -30 -129 49 -129 50 0 80 30 80 80 0 22 -58 80 -80 80 -9 0 -31 -14 -49 -31z'/%3E%3Cpath d='M4072 577 c-43 -61 -8 -122 64 -113 67 8 87 90 32 130 -48 35 -61 33 -96 -17z'/%3E%3Cpath d='M1848 488 c-17 -65 30 -118 88 -99 87 27 65 151 -26 151 -36 0 -53 -14 -62 -52z'/%3E%3Cpath d='M3719 378 c-18 -33 -15 -49 13 -80 63 -70 143 -22 120 72 -16 64 -100 69 -133 8z'/%3E%3Cpath d='M2201 341 c-50 -93 71 -165 127 -76 16 25 16 45 0 70 -33 52 -101 55 -127 6z'/%3E%3Cpath d='M3353 287 c-27 -28 -12 -106 26 -126 74 -40 140 26 100 100 -20 38 -98 53 -126 26z'/%3E%3Cpath d='M2584 256 c-65 -65 35 -175 105 -116 57 47 24 140 -49 140 -18 0 -43 -11 -56 -24z'/%3E%3Cpath d='M2981 231 c-45 -54 -18 -121 49 -121 51 0 61 8 67 58 9 83 -66 124 -116 63z'/%3E%3C/g%3E%3C/svg%3E");
    width: 160px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Animación para mover las filas */
@keyframes moveRow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

/* Efecto hover sutil */
.pattern-item:hover {
    opacity: 0.06;
}

/* Responsive */
@media (max-width: 768px) {
    .pattern-row {
        padding: 40px 0; /* Menos espacio en móviles */
    }
    
    .pattern-svg-1 {
        width: 120px;
        height: 90px;
    }
    
    .pattern-svg-2 {
        width: 150px;
        height: 150px;
    }
    
    .pattern-svg-3 {
        width: 100px;
        height: 75px;
    }
}

/* ========================================================== Estilos Globales ======================================================== */
/* ========================================================== Estilos Globales ======================================================== */
        
        h1, h2, h3, h4, .logo {
            font-weight: 700;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 8px 16px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 25px;
            background-color: var(--negro);
            color: var(--blanco);
            text-decoration: none;
            border-radius: 0;
            font-weight: bold;
            transition: all 0.3s ease;
            border: 1px solid var(--negro);
        }
        
        .btn:hover {
            background-color: var(--hueso);
            color: var(--negro);
        }
        
        .btn-secondary {
            background-color: transparent;
            color: var(--negro);
            border-color: var(--negro);
        }
        
        .btn-secondary:hover {
            background-color: var(--negro);
            color: var(--hueso);
        }
        
        h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--color-titulos);
            text-align: center;
            position: relative;
            letter-spacing: 1px;
        }
        
        h2::after {
            content: "";
            display: block;
            width: 100px;
            height: 2px;
            background-color: var(--color-titulos);
            margin: 20px auto;
        }
        
/* ========================================================== Header  ======================================================== */
/* ========================================================== Header  ======================================================== */
/* ========================================================== Header  ======================================================== */
/* ========================================================== Header  ======================================================== */
/* ==================== HEADER DESKTOP MODERNO ==================== */
        .header-desktop {
            background-color: var(--negro);
            color: var(--hueso);
            position: sticky;
            top: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
            height: 100%;
        }

        /* CSS para el enlace del logo */
        .logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: inherit;
            transition: opacity 0.2s ease;
        }

        .logo-link:hover {
            opacity: 0.8;
        }

        .logo-link:visited {
            color: inherit;
        }
        
        .logo-brand-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .header-logo {
            height: 50px;
            width: auto;
            transition: transform 0.3s ease;
        }
        
        .brand-text {
            display: flex;
            flex-direction: column;
        }
        
        .brand-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--hueso);
            line-height: 1;
        }
        
        .brand-tagline {
            font-family: 'Outfit', sans-serif;
            font-size: 0.8rem;
            color: var(--dorado);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-top: 2px;
        }
        
        /* Navegación moderna */
        .nav-desktop {
            height: 100%;
            position: relative;
            z-index: 100;       
        }
        
        .nav-list {
            display: flex;
            justify-content: center;
            list-style: none;
            height: 100%;
        }
        
        .nav-list > li {
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 15px;
            height: 100%;
        }
        
        .nav-list > li > a {
            color: var(--hueso);
            text-decoration: none;
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 4px;
        }
        
        .nav-list > li > a:hover {
            color: var(--dorado);
            background-color: rgba(212, 175, 55, 0.1);
        }
        
        .nav-list > li.highlighted > a {
            color: var(--dorado);
            font-weight: 600;
            background-color: rgba(212, 175, 55, 0.15);
        }

        /* Contenedor principal para posicionamiento */
        .whatsapp-dropdown-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
            margin-left: 15px;
            z-index: 1000; 
        }

        /* Estilo del Botón (Heredado y ajustado) */
        .header-whatsapp-btn {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: var(--blanco) !important;
            text-decoration: none;
            padding: 10px 16px;
            border-radius: 25px;
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.3s ease;
            gap: 8px;
            box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3);
        }

        .header-whatsapp-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
            background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
        }

        .header-whatsapp-btn .whatsapp-icon {
            font-size: 1.4rem;
            animation: pulse 2s infinite;
        }

        .header-whatsapp-btn .whatsapp-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1.2;
        }

        .header-whatsapp-btn .whatsapp-main {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .header-whatsapp-btn .whatsapp-sub {
            font-size: 0.7rem;
            opacity: 0.9;
            font-weight: 400;
        }

        /* --- MENÚ DESPLEGABLE --- */
        .whatsapp-dropdown-menu {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 100%; 
            right: 0;
            background-color: white;
            min-width: 220px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
            border-radius: 12px;
            padding: 10px 0;
            margin-top: 10px;
            transform: translateY(10px);
            transition: all 0.3s ease;
            border: 1px solid #eee;
        }

        /* Triangulito decorativo arriba del menú */
        .whatsapp-dropdown-menu::before {
            content: '';
            position: absolute;
            top: -6px;
            right: 20px;
            width: 12px;
            height: 12px;
            background: white;
            transform: rotate(45deg);
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
        }

        /* Mostrar menú al pasar el mouse */
        .whatsapp-dropdown-container:hover .whatsapp-dropdown-menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }

        /* Ítems del menú */
        .wa-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            transition: background 0.2s;
            border-bottom: 1px solid #f5f5f5;
        }

        .wa-item:last-child {
            border-bottom: none;
        }

        .wa-item:hover {
            background-color: #f0fdf4; /* Un verde muy clarito */
            color: #128C7E;
        }

        .wa-item i {
            margin-right: 10px;
            color: #25D366;
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        /* Botón de contacto destacado original */
        .contact-btn a {
            background-color: var(--dorado);
            color: var(--negro) !important;
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .contact-btn a:hover {
            background-color: #c19b2c;
            transform: translateY(-2px);
        }

        /* Contenedor para los botones de acción */
        .header-actions {
            display: flex;
            align-items: center;
        }
        
        /* ==================== HEADER MOBILE ==================== */
        .header-mobile {
            display: none;
            background-color: var(--negro);
            position: sticky;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 12px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .header-container-mobile {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-right-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .mobile-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .mobile-logo {
            height: 40px;
        }
        
        .mobile-brand-text {
            display: flex;
            flex-direction: column;
        }
        
        .mobile-brand-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--hueso);
            line-height: 1;
        }
        
        .mobile-brand-tagline {
            font-family: 'Outfit', sans-serif;
            font-size: 0.7rem;
            color: var(--dorado);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Contenedor relativo */
        .mobile-wa-wrapper {
            position: relative;
            display: inline-block;
        }

        /* Estilo del botón redondo móvil (Manteniendo tu estilo base) */
        .mobile-whatsapp-btn {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: white;
            border: none;
            width: 40px; /* Tamaño del botón */
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
            cursor: pointer;
            transition: transform 0.2s;
            outline: none; /* Quitar borde azul al tocar */
        }

        .mobile-whatsapp-btn:active {
            transform: scale(0.95);
        }

        /* El menú desplegable (oculto por defecto) */
        .mobile-wa-dropdown {
            display: none; /* Oculto */
            position: absolute;
            top: 50px; /* Debajo del botón */
            right: 0;  /* Alineado a la derecha */
            background: white;
            width: 180px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            z-index: 9999;
            border: 1px solid #eee;
            overflow: hidden;
            animation: slideDown 0.2s ease-out;
        }

        /* Clase para mostrar el menú con JS */
        .mobile-wa-dropdown.show {
            display: block;
        }

        /* Título pequeño dentro del menú */
        .dropdown-header {
            background: #f8f9fa;
            padding: 8px 12px;
            font-size: 0.75rem;
            color: #666;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 1px solid #eee;
        }

        /* Ítems del menú */
        .m-wa-item {
            display: flex;
            align-items: center;
            padding: 12px;
            color: #333;
            text-decoration: none;
            font-size: 0.9rem;
            border-bottom: 1px solid #f0f0f0;
            font-family: 'Outfit', sans-serif;
        }

        .m-wa-item:last-child { border-bottom: none; }

        .m-wa-item i {
            margin-right: 10px;
            color: #25D366;
            width: 15px;
            text-align: center;
        }

        .m-wa-item:active {
            background-color: #f0fdf4;
        }

        /* Triangulito decorativo */
        .mobile-wa-dropdown::after {
            content: '';
            position: absolute;
            top: -6px;
            right: 12px;
            width: 12px;
            height: 12px;
            background: white;
            transform: rotate(45deg);
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Botón Hamburguesa moderno */
        .hamburger-btn {
            background: none;
            border: none;
            width: 26px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            z-index: 1001;
            padding: 0;
        }
        
        .hamburger-bar {
            display: block;
            width: 100%;
            height: 2px;
            background-color: var(--color-fondo-principal);
            transition: all 0.3s ease;
            border-radius: 1px;
        }
        
        .hamburger-btn.active .hamburger-bar:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }
        
        .hamburger-btn.active .hamburger-bar:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger-btn.active .hamburger-bar:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        
        /* Menú Mobile moderno */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: -100%;
            width: 85%;
            max-width: 320px;
            height: 100vh;
            background-color: var(--negro);
            transition: left 0.4s ease;
            padding-top: 80px;
            overflow-y: auto;
            z-index: 999;
            box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        }
        
        .mobile-menu.active {
            left: 0;
        }
        
        .mobile-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .mobile-menu-list > li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .mobile-menu-list > li > a {
            display: block;
            padding: 16px 25px;
            text-decoration: none;
            color: var(--hueso);
            font-family: 'Outfit', sans-serif;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        
        .mobile-menu-list > li.highlighted > a {
            color: var(--dorado);
            font-weight: 600;
            background-color: rgba(212, 175, 55, 0.1);
        }
        
        .mobile-menu-list > li.contact-btn > a {
            background-color: var(--dorado);
            color: var(--negro) !important;
            font-weight: 600;
            margin: 15px 25px;
            border-radius: 4px;
            text-align: center;
        }
        
        .mobile-menu-list > li > a:hover {
            background-color: rgba(212, 175, 55, 0.1);
            padding-left: 30px;
        }
        
        /* Logo en menú mobile */
        .mobile-menu-logo {
            padding: 30px 25px;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            margin-top: 20px;
        }
        
        .mobile-menu-logo img {
            max-width: 100px;
            height: auto;
            margin-bottom: 10px;
        }
        
        .mobile-menu-logo p {
            color: var(--hueso);
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            margin: 5px 0 0;
            opacity: 0.8;
        }
        
        /* Overlay para fondo cuando el menú está abierto */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            z-index: 998;
            display: none;
        }
        
        .menu-overlay.active {
            display: block;
        }

        /* ESTILOS DEL DROPDOWN MENU */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            min-width: 220px;
            z-index: 1001;
            border: 1px solid #e0e0e0;
            animation-duration: 0.3s;
            animation-fill-mode: both;
        }

        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            animation-name: dropdownFadeIn;
        }

        @keyframes dropdownFadeIn {
            from {
                opacity: 0;
                transform: translateY(-15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Flecha del dropdown */
        .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 20px;
            width: 12px;
            height: 12px;
            background: white;
            border: 1px solid #e0e0e0;
            border-bottom: none;
            border-right: none;
            transform: rotate(45deg);
        }

        .dropdown-item {
            display: block;
            padding: 12px 20px;
            color: var(--azul-principal, #2C3E50);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            border-bottom: 1px solid #f0f0f0;
        }

        .dropdown-item:last-child {
            border-bottom: none;
            border-radius: 0 0 8px 8px;
        }

        .dropdown-item:first-child {
            border-radius: 8px 8px 0 0;
        }

        .dropdown-item:hover {
            background: var(--gris-claro, #f8f9fa);
            color: var(--dorado, #c0392b);
            padding-left: 25px;
        }

        .dropdown-item i {
            margin-right: 10px;
            width: 16px;
            text-align: center;
        }
        
        /* ==================== RESPONSIVE ==================== */
        @media (max-width: 992px) {
            .header-desktop {
                display: none;
            }
            
            .header-mobile {
                display: block;
            }
        }

        @media (max-width: 1200px) {
            .header-whatsapp-btn .whatsapp-text {
                display: none;
            }
            
            .header-whatsapp-btn {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                padding: 0;
                justify-content: center;
            }
            
            .header-whatsapp-btn .whatsapp-icon {
                font-size: 1.3rem;
            }
        }
        
        @media (max-width: 480px) {
            .mobile-brand-name {
                font-size: 1.1rem;
            }
            
            .mobile-brand-tagline {
                font-size: 0.65rem;
            }
            
            .mobile-menu {
                width: 90%;
            }

            .mobile-whatsapp-btn {
                width: 40px;
                height: 40px;
                font-size: 1.1rem;
            }
        }

        /* Demo styles */
        body {
            margin: 0;
            font-family: 'Outfit', sans-serif;
            background: var(--hueso);
            padding-top: 0;
        }

        .demo-content {
            padding: 40px 20px;
            text-align: center;
            color: var(--negro);
        }

/* ====================================================== Whatsapp ===================================================================== */
/* ====================================================== Whatsapp ===================================================================== */
/* ====================================================== WhatsApp ===================================================================== */
/* ====================================================== WhatsApp ===================================================================== */
/* ====================================================== WhatsApp ===================================================================== */

        .whatsapp-float {
            position: fixed;
            width: 65px;
            height: 65px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 32px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: var(--transicion);
        }

        .whatsapp-float:hover {
            background-color: #128C7E;
            transform: scale(1.1);
            box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
        }
        
/* ====================================================== Hero ===================================================================== */
/* ====================================================== Hero ===================================================================== */
/* ====================================================== Hero ===================================================================== */
/* ====================================================== Hero ===================================================================== */
/* ====================================================== Hero ===================================================================== */

.hero {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--negro, #000000);
}

/* Fondo con efecto de difuminado */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/frente.jpg);
    background-size: cover;
    background-position: center;
    z-index: 1;
    animation: fadeIn 1.5s ease-in-out;
    /* Efecto de difuminado en los bordes */
    mask-image: radial-gradient(
        ellipse at center,
        white 0%,
        white 70%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        white 0%,
        white 70%,
        transparent 100%
    );
}

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

/* Overlay direccional: oscuro a la izquierda, imagen visible a la derecha */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.97) 0%,
        rgba(0, 0, 0, 0.90) 30%,
        rgba(0, 0, 0, 0.60) 58%,
        rgba(0, 0, 0, 0.15) 80%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 2;
}

/* Contenedor principal — alineado a la izquierda */
.hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 6% 80px;
    text-align: left;
    min-height: 100dvh;
}

/* Contenido principal */
.hero-content {
    max-width: 680px;
    margin-bottom: 40px;
    display: block;
}

.hero-badge {
    background-color: var(--dorado, #c0392b);
    color: var(--negro, #000000);
    padding: 7px 18px;
    display: inline-block;
    margin-bottom: 24px;
    font-family: 'Bebas Neue', cursive;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 4px;
    border-radius: 0;
}

.hero-title {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(3.8rem, 7.5vw, 8rem);
    margin-bottom: 24px;
    color: var(--blanco, #FFFFFF);
    line-height: 0.92;
    letter-spacing: 1px;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
    max-width: 480px;
}

/* Propuesta de valor */
.value-proposition {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 40px;
    max-width: 800px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-top: 3px solid var(--dorado, #c0392b);
}

.value-proposition h3 {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 4px;
    margin-bottom: 20px;
    color: var(--dorado, #c0392b);
    text-align: center;
}

.proposition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    text-align: left;
}

.proposition-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.proposition-icon {
    font-family: 'Bebas Neue', cursive;
    color: var(--dorado, #c0392b);
    font-size: 2rem;
    min-width: 2.4rem;
    flex-shrink: 0;
    line-height: 1.1;
}

.proposition-text {
    color: var(--blanco, #FFFFFF);
    margin: 0; /* Elimina márgenes por defecto de p */
}

/* Botones de acción */
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all 0.35s var(--easing-premium);
    border: 1.5px solid transparent;
}

.btn-primary {
    background-color: var(--dorado, #c0392b);
    color: var(--negro, #000000);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--dorado, #c0392b);
    border-color: var(--dorado, #c0392b);
    transform: translateY(-3px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--blanco, #FFFFFF);
    border-color: var(--blanco, #FFFFFF);
}

.btn-secondary:hover {
    background-color: var(--blanco, #FFFFFF);
    color: var(--negro, #000000);
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 968px) {
    .proposition-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .value-proposition {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 100dvh;
    }

    .hero-container {
        padding: 80px 5% 60px;
        text-align: left;
        align-items: flex-start;
    }

    .hero-title {
        font-size: clamp(4rem, 17vw, 5.6rem);
    }

    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.94) 0%,
            rgba(0,0,0,0.78) 60%,
            rgba(0,0,0,0.55) 100%
        );
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 100%;
    }

    .hero-actions {
        justify-content: flex-start;
    }
    
    .value-proposition {
        padding: 20px;
        margin: 0 15px 40px;
    }

    .proposition-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .proposition-item {
        flex-direction: row; /* Fuerza dirección horizontal */
        text-align: left; /* Alineación izquierda */
        gap: 12px;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }
    
    .hero-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .value-proposition h3 {
        font-size: 1.3rem;
    }
    
    .proposition-item {
        flex-direction: row; /* Mantiene horizontal en móviles pequeños */
        text-align: left;
        gap: 10px;
    }
    
    .proposition-icon {
        font-size: 1.3rem;
        min-width: 25px;
    }
    
    .proposition-text {
        font-size: 0.9rem;
    }
}

/* ===================================== Estilos para Sección Empresas y Proyectos ======================================= */
/* ===================================== Estilos para Sección Empresas y Proyectos ======================================= */
/* ===================================== Estilos para Sección Empresas y Proyectos ======================================= */
/* ===================================== Estilos para Sección Empresas y Proyectos ======================================= */
/* ===================================== Estilos para Sección Empresas y Proyectos ======================================= */

.bron-empresas {
            padding: 100px 0;
            background: oklch(9% 0.007 80);
            position: relative;
            z-index: 1;
            overflow: hidden;
            border-bottom: 1px solid oklch(19% 0.007 80);
        }
        
        .bron-empresas-container {
            display: flex;
            flex-direction: column;
            gap: 60px;
            align-items: stretch;
            position: relative;
            z-index: 1;
        }
        
        .bron-empresas-content {
            width: 100%;
        }
        
        .bron-empresas-header {
            margin-bottom: 40px;
        }
        
        .bron-empresas-badge {
            display: inline-block;
            background-color: transparent;
            color: var(--dorado);
            font-family: var(--font-body);
            font-size: 0.72rem;
            font-weight: 600;
            padding: 5px 12px;
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 2px;
            margin-bottom: 20px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        
        .bron-empresas-title {
            font-family: 'Bebas Neue', cursive;
            font-size: 2.8rem;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 1.15;
            color: oklch(93% 0.01 80);
            margin-bottom: 20px;
        }

        .bron-empresas-subtitle {
            font-size: 1.1rem;
            color: oklch(68% 0.007 80);
            max-width: 90%;
            line-height: 1.6;
        }
        
        .bron-empresas-beneficios {
            counter-reset: beneficio;
            display: flex;
            flex-direction: column;
            margin-top: 32px;
            gap: 0;
        }

        .bron-beneficio-item {
            counter-increment: beneficio;
            background: transparent;
            border-radius: 0;
            padding: 20px 0;
            border-top: 1px solid oklch(22% 0.007 80);
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: padding-left 0.2s var(--easing-premium);
        }

        .bron-beneficio-item:last-child {
            border-bottom: 1px solid oklch(22% 0.007 80);
        }

        .bron-beneficio-item:hover {
            padding-left: 8px;
        }

        .bron-beneficio-item::before {
            content: counter(beneficio, decimal-leading-zero);
            font-family: 'Bebas Neue', cursive;
            font-size: 1.8rem;
            color: var(--dorado, #c0392b);
            flex-shrink: 0;
            width: 44px;
            line-height: 1;
            padding-top: 1px;
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }

        .bron-beneficio-item:hover::before {
            opacity: 1;
        }

        .bron-beneficio-icono {
            display: none;
        }

        .bron-beneficio-texto h4 {
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: oklch(93% 0.01 80);
            margin-bottom: 6px;
        }

        .bron-beneficio-texto p {
            font-size: 0.88rem;
            color: oklch(60% 0.007 80);
            line-height: 1.55;
            margin: 0;
        }
        
        .bron-empresas-card-container {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        
        .bron-empresas-card {
            background: linear-gradient(135deg, var(--negro) 0%, var(--gris-oscuro) 100%);
            border-radius: 16px;
            position: relative;
            padding: 40px;
            color: var(--blanco);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            max-width: 800px;
            width: 100%;
        }
        
        .bron-empresas-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(181, 154, 93, 0.1), transparent);
            transform: rotate(-45deg);
            z-index: 0;
        }
        
        .bron-card-content {
            position: relative;
            z-index: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Contenedor de botones - Corregido para desktop y mobile */
        .bron-card-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
            max-width: 100%;
        }
        
        .bron-empresas-card h3 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.3;
        }
        
        .bron-empresas-card p {
            font-size: 1.05rem;
            margin-bottom: 30px;
            line-height: 1.6;
            color: var(--gris-claro);
            max-width: 80%;
        }
        
        .bron-empresas-btn.primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 32px;
            background-color: var(--dorado);
            color: #000;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 700;
            transition: transform 0.1s ease-out, background-color 0.15s ease-out;
            text-align: center;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            min-width: 280px;
            font-size: 1rem;
            font-family: inherit;
        }

        .bron-empresas-btn.primary:hover {
            background-color: oklch(74% 0.16 80);
        }

        .bron-empresas-btn.primary:active {
            transform: scale(0.97);
        }

        .bron-empresas-btn.secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 28px;
            background-color: transparent;
            color: oklch(93% 0.01 80);
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: transform 0.1s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
            text-align: center;
            border: 1px solid oklch(32% 0.01 80);
            font-size: 0.95rem;
            white-space: nowrap;
            min-width: 250px;
        }

        .bron-empresas-btn.secondary:hover {
            background-color: oklch(17% 0.007 80);
            border-color: oklch(46% 0.005 80);
        }

        .bron-empresas-btn.secondary:active {
            transform: scale(0.96);
        }

        .bron-empresas-btn i {
            margin-left: 10px;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .bron-empresas-title {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .bron-empresas {
                padding: 80px 0;
            }
            
            .bron-empresas-title {
                font-size: 2rem;
            }
            
            .bron-empresas-beneficios {
                grid-template-columns: 1fr;
            }

            .bron-beneficio-item:first-child {
                grid-row: span 1;
                flex-direction: row;
                padding: 20px;
                gap: 15px;
                align-items: flex-start;
            }

            .bron-beneficio-item:first-child .bron-beneficio-icono {
                font-size: 2.2rem;
            }

            .bron-beneficio-item:first-child .bron-beneficio-texto h4 {
                font-size: 1.2rem;
            }

            .bron-beneficio-item:first-child .bron-beneficio-texto p {
                font-size: 0.95rem;
            }

            .bron-beneficio-item:last-child {
                grid-column: span 1;
            }
            
            .bron-empresas-subtitle {
                max-width: 100%;
            }
            
            .bron-empresas-card {
                padding: 30px;
            }
            
            .bron-empresas-card p {
                max-width: 100%;
            }

            /* Botones en mobile - mantener disposición vertical y alargados */
            .bron-card-buttons {
                flex-direction: column;
                gap: 15px;
                max-width: 100%;
            }
            
            .bron-empresas-btn {
                width: 100%;
                min-width: unset;
                padding: 16px 24px;
                font-size: 0.95rem;
            }
            
            .bron-empresas-btn.secondary {
                padding: 14px 24px;
                font-size: 0.9rem;
            }
            
            /* Estilos específicos para móvil - mantener disposición horizontal */
            .bron-beneficio-item {
                flex-direction: row;
                text-align: left;
                padding: 20px;
            }
            
            .bron-beneficio-icono {
                margin: 0 15px 0 0;
                font-size: 1.8rem;
            }
        }
        
        @media (max-width: 480px) {
            .bron-empresas-title {
                font-size: 1.8rem;
            }
            
            .bron-empresas-card {
                padding: 25px;
            }
            
            .bron-empresas-card h3 {
                font-size: 1.5rem;
            }
            
            .bron-beneficio-item {
                padding: 20px;
            }
            
            /* Ajustes adicionales para móviles muy pequeños */
            .bron-beneficio-item {
                flex-direction: row;
                align-items: center;
            }
            
            .bron-beneficio-icono {
                font-size: 1.5rem;
                padding: 8px;
            }
            
            .bron-beneficio-texto h4 {
                font-size: 1.1rem;
            }
            
            .bron-beneficio-texto p {
                font-size: 0.9rem;
            }

            /* Botones en móviles muy pequeños */
            .bron-empresas-btn {
                padding: 14px 20px;
                font-size: 0.9rem;
            }
            
            .bron-empresas-btn.secondary {
                padding: 12px 20px;
                font-size: 0.85rem;
            }
        }

/* ===================================== Estilos para Sección Shop ======================================= */
/* ===================================== Estilos para Sección Shop ======================================= */
/* ===================================== Estilos para Sección Shop ======================================= */
/* ===================================== Estilos para Sección Shop ======================================= */

.shop-banner-section {
    padding: 80px 0;
    background: oklch(80% 0.12 80);
    position: relative;
    z-index: 1;
}

.shop-banner-section::before,
.shop-banner-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: repeating-linear-gradient(
        -45deg,
        oklch(6% 0.006 80) 0px,
        oklch(6% 0.006 80) 7px,
        oklch(80% 0.12 80) 7px,
        oklch(80% 0.12 80) 14px
    );
    pointer-events: none;
    z-index: 4;
}

.shop-banner-section::before { top: 0; }
.shop-banner-section::after { bottom: 0; }

.shop-banner-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
}

.shop-copy-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
}

.shop-main-title {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(4.5rem, 7vw, 7rem);
    line-height: 0.86;
    color: oklch(6% 0.006 80);
    margin: 0 0 16px;
    letter-spacing: 1px;
}

.shop-main-title::after { display: none !important; }

.shop-main-sub {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    letter-spacing: 3.5px;
    color: oklch(14% 0.006 80);
    margin: 0 0 28px;
}

.shop-main-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: oklch(22% 0.006 80);
    margin: 0 0 44px;
    max-width: 280px;
}

.shop-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: oklch(6% 0.006 80);
    color: oklch(80% 0.12 80);
    font-family: 'Bebas Neue', cursive;
    font-size: 1rem;
    letter-spacing: 2.5px;
    padding: 20px 40px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.18s ease, transform 0.15s ease;
}

.shop-cta-btn span {
    display: inline-block;
    transition: transform 0.18s ease;
}

.shop-cta-btn:hover {
    background: oklch(18% 0.006 80);
    transform: translateY(-2px);
}

.shop-cta-btn:hover span {
    transform: translateX(5px);
}

.shop-visual-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}

.visual-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    overflow: visible !important;
}

.img-center {
    max-width: 60%; /* Tamaño ideal para que las marcas tengan aire */
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5));
    animation: float 4s ease-in-out infinite;
}

/* Etiquetas de Marcas (Pequeñas Burbujas) */
.brand-tag {
    position: absolute;
    border-radius: 12px;
    z-index: 10;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 60px;  /* Tamaño fijo para uniformidad */
    height: 45px;
    animation: float-small 4s ease-in-out infinite;
}

.brand-tag img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mantiene la proporción del logo */
    filter: brightness(1.1); /* Ligero realce */
}

.brand-tag:hover {
    transform: scale(1.1) translateY(-5px);
    border-color: var(--dorado);
    background: rgba(255, 255, 255, 0.15);
}

.tag-bosch { top: 5%; left: 10%; }
.tag-peirano { top: 5%; right: 10%; }
.tag-sola { top: 45%; left: 0%; }
.tag-milwaukee { top: 45%; right: 0%; } /* Cambié el nombre de la clase a tag-milwaukee */
.tag-cat { bottom: 5%; left: 10%; }
.tag-einhell { bottom: 5%; right: 10%; }

.tag-peirano, .tag-milwaukee, .tag-einhell { animation-delay: 2s; }


@keyframes float-small {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Contenedor del rotador */
.gif-rotator {
    position: relative;
    width: 50%; 
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.gif-item {
    position: absolute;
    max-width: 100%;
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
    animation: rotateGifs 21s infinite;
}

/* Tiempos de animación para cada GIF */
.gif-item:nth-child(1) {
    animation-delay: 0s;
}

.gif-item:nth-child(2) {
    animation-delay: 7s;
}

.gif-item:nth-child(3) {
    animation-delay: 14s;
}

/* Lógica de la transición suave */
@keyframes rotateGifs {
    0% { opacity: 0; }
    5% { opacity: 1; }     /* Aparece rápido al inicio de su turno */
    28% { opacity: 1; }    /* Se mantiene visible (aprox 7s) */
    33% { opacity: 0; }    /* Desaparece suavemente */
    100% { opacity: 0; }
}

/* Animación de Flotado */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ===================================== Promo Marquee (medios de pago) ======================================= */
/* Banda deslizable reutilizable — se usa en index.php (shop-banner-section) y tienda.php */
.promo-marquee {
    background: oklch(6% 0.006 80);
    overflow: hidden;
    white-space: nowrap;
}

.promo-marquee-track {
    display: inline-flex;
    align-items: center;
    width: max-content;
    animation: promo-marquee-scroll 26s linear infinite;
}

.promo-marquee:hover .promo-marquee-track { animation-play-state: paused; }

.promo-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    font-family: 'Bebas Neue', cursive;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: oklch(80% 0.12 80);
    white-space: nowrap;
}

.promo-marquee-item i { font-size: 0.85rem; }

.promo-marquee-sep {
    color: oklch(80% 0.12 80);
    opacity: 0.4;
}

@keyframes promo-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .promo-marquee-track { animation: none; }
}

@media (max-width: 600px) {
    .promo-marquee-item { font-size: 0.82rem; padding: 11px 16px; letter-spacing: 1px; }
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .shop-banner-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .shop-visual-col {
        min-height: 320px;
        order: -1;
    }
    .shop-copy-col {
        align-items: center;
        text-align: center;
        padding: 40px 20px 60px;
    }
    .shop-main-text { max-width: 100%; }
}

@media (max-width: 480px) {
    .shop-main-title { font-size: 3.8rem; }
    .shop-copy-col { padding: 32px 16px 48px; }
    .brand-tag { width: 44px; height: 34px; }
    .tag-sola, .tag-cat { display: none; }
}

/* ===================================== Estilos para Productos y Servicios ======================================= */
/* ===================================== Estilos para Productos y Servicios ======================================= */
/* ===================================== Estilos para Rubros ======================================= */

        .productos-servicios {
            padding: 100px 0;
            background: oklch(10% 0.008 80);
            position: relative;
            z-index: 1;
        }


        .section-header {
            text-align: left;
            margin-bottom: 64px;
        }

        .section-header h2 {
            font-family: 'Bebas Neue', cursive;
            font-size: clamp(3rem, 6vw, 5.5rem);
            font-weight: 400;
            letter-spacing: 4px;
            color: oklch(93% 0.01 80);
            margin-bottom: 0;
            position: relative;
            display: block;
            line-height: 1;
        }

        .section-header h2::after {
            content: '';
            display: block;
            position: static;
            width: 80px;
            height: 3px;
            background: var(--dorado, #c0392b);
            margin-top: 18px;
            border-radius: 0;
        }

        .section-subtitle {
            font-size: 1rem;
            color: oklch(60% 0.007 80);
            max-width: 560px;
            margin: 20px 0 0;
        }

        /* List layout */
        .rubros-list {
            display: flex;
            flex-direction: column;
        }

        @keyframes rubro-reveal {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .rubro-row {
            display: grid;
            grid-template-columns: 72px 1fr auto auto;
            align-items: center;
            gap: 32px;
            padding: 28px 0;
            border-bottom: 1px solid oklch(18% 0.006 80);
            text-decoration: none;
            background-color: transparent;
            transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
            animation: rubro-reveal 500ms cubic-bezier(0.23, 1, 0.32, 1) both;
            animation-delay: calc(var(--i, 0) * 70ms);
        }

        .rubro-row:first-child {
            border-top: 1px solid oklch(18% 0.006 80);
        }

        .rubro-row:hover {
            background-color: oklch(14% 0.008 80);
        }

        .rubro-num {
            font-family: 'Bebas Neue', cursive;
            font-size: 2.6rem;
            color: var(--dorado, #c0392b);
            line-height: 1;
            letter-spacing: 0;
            flex-shrink: 0;
            opacity: 0.6;
            transition: opacity 200ms ease-out;
        }

        .rubro-row:hover .rubro-num {
            opacity: 1;
        }

        .rubro-main {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .rubro-icon {
            font-size: 1.3rem;
            color: oklch(52% 0.007 80);
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border: 1px solid oklch(22% 0.007 80);
            border-radius: 4px;
            flex-shrink: 0;
            transition: color 200ms ease-out, border-color 200ms ease-out;
        }

        .rubro-row:hover .rubro-icon {
            color: var(--dorado, #c0392b);
            border-color: oklch(36% 0.1 80);
        }

        .rubro-main h3 {
            font-family: 'Bebas Neue', cursive;
            font-size: 1.9rem;
            font-weight: 400;
            letter-spacing: 2px;
            color: oklch(93% 0.01 80);
            margin: 0;
            line-height: 1;
        }

        .rubro-brands {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .rubro-brands img {
            height: 20px;
            width: auto;
            max-width: 72px;
            object-fit: contain;
            filter: grayscale(1) brightness(1.8) opacity(0.35);
            transition: filter 280ms cubic-bezier(0.23, 1, 0.32, 1);
        }

        .rubro-brands img:nth-child(2) { transition-delay: 40ms; }
        .rubro-brands img:nth-child(3) { transition-delay: 80ms; }
        .rubro-brands img:nth-child(4) { transition-delay: 120ms; }

        .rubro-row:hover .rubro-brands img {
            filter: grayscale(0) brightness(1) opacity(1);
        }

        .rubro-link {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Bebas Neue', cursive;
            font-size: 1rem;
            letter-spacing: 2px;
            color: oklch(40% 0.006 80);
            text-decoration: none;
            white-space: nowrap;
            flex-shrink: 0;
            transition: color 200ms ease-out;
        }

        .rubro-link i {
            transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
        }

        .rubro-row:hover .rubro-link {
            color: var(--dorado, #c0392b);
        }

        .rubro-row:hover .rubro-link i {
            transform: translateX(5px);
        }

        @media (prefers-reduced-motion: reduce) {
            .rubro-row {
                animation: none;
            }
        }

        @media (max-width: 900px) {
            .rubro-row {
                grid-template-columns: 60px 1fr auto;
                gap: 20px;
            }
            .rubro-brands { display: none; }
            .rubro-main h3 { font-size: 1.5rem; }
        }

        @media (max-width: 600px) {
            .productos-servicios { padding: 64px 0; }
            .rubro-row {
                grid-template-columns: 48px 1fr;
                gap: 16px;
                padding: 22px 0;
            }
            .rubro-link { display: none; }
            .rubro-num { font-size: 2rem; }
            .rubro-main h3 { font-size: 1.3rem; }
        }

        /* Modal mejorado para catálogo de marcas */
        .catalogo-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            padding: 20px;
        }

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

        .catalogo-container {
            background-color: var(--blanco);
            border-radius: 16px;
            width: 95%;
            max-width: 1100px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            transform: translateY(30px) scale(0.95);
            transition: transform 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        .catalogo-overlay.active .catalogo-container {
            transform: translateY(0) scale(1);
        }

        .catalogo-header {
            padding: 20px 25px;
            border-bottom: 1px solid var(--gris-medio);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to right, #f8f9fa, #ffffff);
        }

        .catalogo-header h3 {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--negro);
            text-align: center;
            flex: 1;
        }

        .close-catalogo {
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: #999;
            transition: color 0.2s;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .close-catalogo:hover {
            color: var(--acento);
            background-color: rgba(0, 0, 0, 0.05);
        }

        .catalogo-body {
            padding: 25px;
            overflow-y: auto;
            max-height: calc(90vh - 80px);
        }

        .categoria-container {
            margin-bottom: 35px;
        }

        .categoria-titulo {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--acento);
            color: var(--negro);
            text-align: center;
            position: relative;
        }

        .categoria-titulo::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: var(--acento);
            border-radius: 3px;
        }

        .marcas-lista {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 20px;
            margin-bottom: 10px;
        }

        .item-marca {
            text-align: center;
            padding: 15px 10px;
            border-radius: 12px;
            background: var(--gris-claro);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .item-marca:hover {
            transform: translateY(-5px);
            box-shadow: var(--sombra-hover);
            background: var(--blanco);
        }

        .logo-marca {
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }

        .logo-marca img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .item-marca:hover .logo-marca img {
            transform: scale(1.05);
        }

        .nombre-marca {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--negro);
            line-height: 1.3;
            margin-top: auto;
        }

        /* Estilos para móviles con scroll horizontal */
        @media (max-width: 768px) {
            .marcas-lista {
                grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
                gap: 15px;
            }
            
            .catalogo-container {
                width: 100%;
                border-radius: 12px;
            }
            
            .catalogo-header {
                padding: 15px 20px;
            }
            
            .catalogo-header h3 {
                font-size: 1.4rem;
            }
            
            .catalogo-body {
                padding: 20px 15px;
            }
            
            .categoria-titulo {
                font-size: 1.2rem;
            }
            
            .item-marca {
                padding: 12px 8px;
            }
            
            .logo-marca {
                height: 50px;
            }
        }

        @media (max-width: 576px) {
            .catalogo-overlay {
                padding: 10px;
            }
            
            .marcas-lista {
                display: flex;
                overflow-x: auto;
                padding-bottom: 15px;
                scroll-snap-type: x mandatory;
                scrollbar-width: thin;
                -ms-overflow-style: none;
                grid-template-columns: unset;
                gap: 15px;
                margin-right: -15px;
                margin-left: -15px;
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .marcas-lista::-webkit-scrollbar {
                height: 5px;
            }
            
            .marcas-lista::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 10px;
            }
            
            .item-marca {
                min-width: 110px;
                scroll-snap-align: start;
                flex-shrink: 0;
            }
            
            .categoria-titulo {
                text-align: left;
                padding-left: 15px;
            }
            
            .categoria-titulo::after {
                left: 15px;
                transform: none;
            }
        }

        /* Animación de carga para imágenes */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .item-marca {
            animation: fadeIn 0.4s ease forwards;
        }

        .item-marca:nth-child(2) { animation-delay: 0.05s; }
        .item-marca:nth-child(3) { animation-delay: 0.1s; }
        .item-marca:nth-child(4) { animation-delay: 0.15s; }
        .item-marca:nth-child(5) { animation-delay: 0.2s; }
        .item-marca:nth-child(6) { animation-delay: 0.25s; }

        /* Distribuidores exclusivos (dentro de rubros) */

        .rubros-exclusivas {
            margin-top: 60px;
            padding-top: 48px;
            border-top: 1px solid oklch(22% 0.007 80);
        }

        .exclusivas-label {
            font-family: 'Bebas Neue', cursive;
            font-size: 1.1rem;
            letter-spacing: 4px;
            color: oklch(46% 0.005 80);
            margin-bottom: 28px;
        }

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

        .marca-destacada {
            border-radius: 8px;
            padding: 28px 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            min-height: 160px;
            transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
                        box-shadow 300ms cubic-bezier(0.23, 1, 0.32, 1);
        }

        .marca-destacada:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
        }

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

        .marca-logo-container img {
            max-width: 110px;
            max-height: 80px;
            width: auto;
            height: auto;
        }

        .marca-info {
            flex: 1;
        }

        .marca-info h3 {
            font-family: 'Bebas Neue', cursive;
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .marca-info p {
            margin-bottom: 14px;
            font-size: 0.85rem;
            line-height: 1.5;
            font-family: 'Outfit', sans-serif;
        }

        .marca-cta {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            font-family: 'Outfit', sans-serif;
            transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
                        background 200ms cubic-bezier(0.23, 1, 0.32, 1);
        }

        .marca-cta:hover {
            transform: translateY(-2px);
        }

        /* Brand panels — full background, no border-left */
        .marca-rowa {
            background: #b80a00;
        }

        .marca-multlock {
            background: #0c3d8a;
        }

        .marca-dogo {
            background: #FFD500;
        }

        /* Contenedor para dos logos (ROWA) */
        .dual-logos {
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            width: 120px;
        }

        .dual-logos img {
            max-height: 48px;
            width: auto;
        }

        .logo-rowa {
            background: transparent !important;
            padding: 3px;
        }

        /* Text per brand */
        .marca-rowa .marca-info h3,
        .marca-multlock .marca-info h3 {
            color: white;
        }

        .marca-rowa .marca-info p,
        .marca-multlock .marca-info p {
            color: rgba(255, 255, 255, 0.75);
        }

        .marca-dogo .marca-info h3 {
            color: oklch(10% 0.005 80);
        }

        .marca-dogo .marca-info p {
            color: oklch(22% 0.005 80);
        }

        /* CTAs per brand */
        .marca-rowa .marca-cta {
            background: white;
            color: #b80a00;
        }

        .marca-rowa .marca-cta:hover {
            background: #ffd5d3;
        }

        .marca-multlock .marca-cta {
            background: white;
            color: #0c3d8a;
        }

        .marca-multlock .marca-cta:hover {
            background: #d0e0ff;
        }

        .marca-dogo .marca-cta {
            background: oklch(10% 0.005 80);
            color: #FFD500;
        }

        .marca-dogo .marca-cta:hover {
            background: oklch(18% 0.005 80);
        }

        /* Responsive — exclusive brand cards */
        @media (max-width: 992px) {
            .destacadas-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .marca-destacada { flex-direction: column; text-align: center; gap: 16px; }
            .dual-logos { flex-direction: row; gap: 15px; width: auto; }
        }

        @media (max-width: 576px) {
            .marca-info h3 { font-size: 1.3rem; }
            .marca-info p { font-size: 0.8rem; }
            .dual-logos { flex-direction: column; gap: 8px; }
        }

/* ======================================================= Novedades ================================================================ */
/* ======================================================= Novedades ================================================================ */
/* ======================================================= Novedades ================================================================ */
/* ======================================================= Novedades ================================================================ */
/* ======================================================= Novedades ================================================================ */

.novedades-section {
    padding: 96px 0 80px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: var(--section-dark);
}

.novedades-section .section-header {
    padding: 0 var(--container-px, 20px);
    max-width: 1260px;
    margin: 0 auto 48px;
}

.novedades-section h2 {
    text-align: left;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    color: oklch(93% 0.01 80);
    margin-bottom: 0;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 4px;
    line-height: 1;
}

.novedades-section h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: var(--dorado, #c0392b);
    margin-top: 18px;
}

/* =======================================================
   ESTILOS BASE (Móvil First)
   Carrusel horizontal — el click navega directo (<a> real)
======================================================== */
.novedades-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 15px 20px 15px;
    gap: 16px;
    scrollbar-width: none;
}
.novedades-container::-webkit-scrollbar { display: none; }

/* Cuando hay una sola novedad, que no quede perdida como si fuera un slider a medio llenar */
.novedades-container:has(.novedad-card:only-child) {
    justify-content: center;
}
.novedad-card:only-child {
    flex: 0 0 min(360px, 90%);
    max-width: min(360px, 90%);
}

.novedad-card {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 240px;
    scroll-snap-align: center;
    background-color: oklch(13% 0.008 80);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid oklch(20% 0.007 80);
    border-top: 3px solid var(--dorado, #c0392b);
    transition: border-top-color 0.2s ease-out, background-color 0.2s ease-out;
}

.novedad-card:hover {
    background-color: oklch(15% 0.008 80);
    border-top-color: oklch(90% 0.15 85);
}

.novedad-card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.novedad-card-link:focus-visible {
    outline: 2px solid var(--dorado, #feb422);
    outline-offset: -2px;
}

.novedad-card-media {
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    background-color: #f4f4f4;
}

.novedad-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Variante sin foto: para tarjetas "conceptuales" (ej. Últimos Ingresos) cuyo
   contenido cambia solo, así que no hay una única imagen que las represente. */
.novedad-card-media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, oklch(20% 0.01 80), oklch(11% 0.008 80));
}

.novedad-card-media--icon i {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    color: var(--dorado, #feb422);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.novedad-card-titulo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    padding: 14px 16px;
    text-align: left;
    line-height: 1.15;
    background-color: oklch(9% 0.007 80);
    color: oklch(93% 0.01 80);
    margin: 0;
    letter-spacing: 1.5px;
    border-top: 1px solid oklch(20% 0.007 80);
    min-height: 60px;
    display: flex;
    align-items: center;
}

/* El detalle vive fuera del flujo hasta que JS lo mueve al modal */
.novedad-detalle {
    display: none;
}

/* =======================================================
   ESTILOS DESKTOP (Slider + Modal expandible)
   Media Query >= 769px
======================================================== */
@media (min-width: 769px) {

    /* Contenedor Principal Desktop */
    .novedades-container {
        gap: 20px;
        padding: 0 0 16px 0;
        max-width: 1200px;
        margin: 0 auto;

        scrollbar-width: thin;
        scrollbar-color: var(--dorado, #c0392b) #f0f0f0;
    }

    /* Webkit Scrollbar */
    .novedades-container::-webkit-scrollbar { height: 4px; }
    .novedades-container::-webkit-scrollbar-track { background: oklch(15% 0.007 80); }
    .novedades-container::-webkit-scrollbar-thumb { background-color: var(--dorado, #c0392b); border-radius: 4px; }

    /* Tarjeta Base Desktop: entran ~4.3 tarjetas, se ve que hay más para deslizar */
    .novedad-card {
        flex: 0 0 calc(23% - 15px);
        min-width: 240px;
        max-width: calc(23% - 15px);
        scroll-snap-align: start;
        cursor: pointer;
        transition: transform 0.2s var(--easing-premium, ease), border-top-color 0.2s ease-out, background-color 0.2s ease-out;
    }

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

    .novedad-card-media { aspect-ratio: 3 / 4; }

    .novedad-card-titulo { font-size: 1.2rem; min-height: 68px; }

    .novedad-card:only-child {
        flex: 0 0 420px;
        max-width: 420px;
    }
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .novedad-card:hover .novedad-card-media img {
        transform: scale(1.08);
    }
    .novedad-card:hover .novedad-card-media--icon i {
        transform: scale(1.08);
    }
}

/* =======================================================
   MODAL DE DETALLE (Desktop)
   El contenido de .novedad-detalle se mueve acá con JS
======================================================== */
.novedad-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-out, visibility 0s 0.25s;
    padding: 20px;
}

.novedad-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease-out, visibility 0s 0s;
}

.novedad-modal-content {
    background: var(--blanco, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 960px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    padding: 32px;
    transform: translateY(24px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.novedad-modal-overlay.active .novedad-modal-content {
    transform: translateY(0);
}

.novedad-modal-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(96% 0.005 80);
    border: none;
    border-radius: 50%;
    color: #333;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 5;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.novedad-modal-cerrar:hover {
    background: var(--dorado, #feb422);
    color: #000;
}

.novedad-modal-body .novedad-detalle {
    display: block;
}

/* --- ESTILOS ESPECÍFICOS DE CONTENIDOS DENTRO DEL MODAL --- */

.novedad-detalle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 2px solid var(--dorado, #c0392b);
    margin-bottom: 20px;
    padding-bottom: 12px;
    padding-right: 50px;
}

.novedad-detalle-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #222;
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: max-content;
    gap: 15px;
}

.novedad-detalle-imagen img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 8px;
    background: #f9f9f9;
}

    /* Mini Tarjeta Producto */
    .producto-card-mini {
        background: white;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 10px;
        transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.15s ease-out;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

/* Imagen más chica */
.producto-card-mini .producto-imagen img {
    width: 100%;
    height: 100px; /* Altura fija pequeña */
    object-fit: contain;
    margin-bottom: 8px;
}

/* Info del producto */
.producto-card-mini .producto-info {
    text-align: center;
}

/* Nombre del producto (Punto 2) */
.producto-card-mini .producto-info h3 {
    font-size: 0.85rem; /* Texto chico pero legible */
    font-weight: 600;
    color: #333;
    margin: 5px 0;
    line-height: 1.3;
    
    /* Cortar texto si es muy largo (opcional) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-card-mini .producto-marca {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.producto-card-mini .producto-precio {
    font-size: 0.95rem;
    font-weight: bold;
    color: #e6c458; /* Color dorado de la marca */
    margin-top: auto;
}

.producto-card-mini .producto-precio-original {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
}

.producto-card-mini .producto-precio-transferencia {
    display: block;
    color: #28a745;
}

@media (hover: hover) and (pointer: fine) {
    .producto-card-mini:hover {
        transform: translateY(-3px);
        border-color: #e6c458;
    }
}

/* =======================================================
   SKELETON + ERROR STATES — P1 fix
======================================================== */
.producto-card-mini.skeleton {
    background: linear-gradient(
        90deg,
        oklch(95% 0.005 80) 25%,
        oklch(90% 0.005 80) 50%,
        oklch(95% 0.005 80) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 4px;
    min-height: 160px;
    cursor: default;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.grid-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 20px;
}

.grid-error p {
    color: oklch(55% 0.004 80);
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.btn-reintentar {
    background: transparent;
    border: 1px solid oklch(80% 0.12 80);
    color: oklch(80% 0.12 80);
    font-family: 'Bebas Neue', cursive;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.btn-reintentar:hover {
    background: oklch(80% 0.12 80);
    color: oklch(6% 0.006 80);
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    color: oklch(60% 0.004 80);
    padding: 24px;
    font-size: 0.9rem;
}

/* =======================================================
   REDUCED MOTION — novedades
======================================================== */
@media (prefers-reduced-motion: reduce) {
    .novedad-card,
    .novedad-card:hover {
        transition: background-color 0.25s ease-out, border-top-color 0.15s ease-out;
        transform: none;
    }
    .novedad-card-media img {
        transition: none;
    }
    .producto-card-mini {
        transition: border-color 0.15s ease-out;
    }
    .novedad-modal-overlay,
    .novedad-modal-overlay.active {
        transition: opacity 0.2s ease-out, visibility 0s 0s;
    }
    .novedad-modal-content,
    .novedad-modal-overlay.active .novedad-modal-content {
        transition: none;
        transform: none;
    }
}

/* =======================================================
   BOTONES UNIFICADOS
======================================================== */
.btn-novedad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background-color: var(--dorado, #c0392b);
    color: #000;
    text-decoration: none;
    border-radius: 2px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.28s var(--easing-premium);
}

.btn-novedad:hover {
    background-color: oklch(93% 0.01 80);
    color: #000;
    transform: translateY(-1px);
}

.btn-novedad.secondary {
    background-color: transparent;
    color: oklch(70% 0.01 80);
    border: 1px solid oklch(30% 0.007 80);
}

.btn-novedad.secondary:hover {
    background-color: oklch(20% 0.008 80);
    color: oklch(90% 0.01 80);
    border-color: oklch(40% 0.007 80);
}

.novedad-grid-footer {
    text-align: center;
    padding-top: 20px;
}

/* ======================================================= Contacto ================================================================ */
/* ======================================================= Contacto ================================================================ */
/* ======================================================= Contacto ================================================================ */
/* ======================================================= Contacto ================================================================ */
/* ======================================================= Contacto ================================================================ */

.contacto-destacado {
    padding: 80px 20px;
    background: oklch(95% 0.006 80);
    border-top: 1px solid oklch(86% 0.006 80);
}

.contacto-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.contacto-header {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-destacado {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: 4px;
    color: oklch(14% 0.008 80);
    line-height: 1;
    padding-bottom: 16px;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
}

.titulo-destacado::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--dorado);
}

.subtitulo {
    color: oklch(40% 0.006 80);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.formulario-flotante {
    background: oklch(99% 0.004 80);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 24px oklch(14% 0.008 80 / 0.08);
    border: 1px solid oklch(88% 0.006 80);
}

.formulario-elegante {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group.duo-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group {
    position: relative;
    height: 60px;
}

.input-group.textarea-group {
    height: auto;
}

.formulario-elegante input,
.formulario-elegante select,
.formulario-elegante textarea {
    width: 100%;
    padding: 20px 15px 10px;
    background: transparent;
    border: none;
    border-bottom: 1px solid oklch(78% 0.006 80);
    color: oklch(14% 0.008 80);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.formulario-elegante textarea {
    height: 120px;
    resize: none;
    padding-top: 25px;
}

.formulario-elegante input:focus,
.formulario-elegante select:focus,
.formulario-elegante textarea:focus {
    outline: none;
    border-bottom-color: var(--dorado);
}

/* checkout.css también se carga en esta página y su regla .form-group
   input[type=...] (más específica) pinta nombre/email/teléfono con fondo
   oscuro, distinto del resto de los campos. Se refuerza acá para que los
   5 campos del formulario luzcan igual. */
#contactForm .input-group input,
#contactForm .input-group input:focus {
    background: transparent;
    color: oklch(14% 0.008 80);
}

.input-group label {
    position: absolute;
    top: 20px;
    left: 15px;
    color: oklch(45% 0.006 80);
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

/* checkout.css (.form-group label) también pisa esta etiqueta con un tono
   pensado para su fondo oscuro (blanco hueso al 56% de opacidad), casi
   invisible sobre la tarjeta clara de este formulario. Se refuerza acá. */
#contactForm .input-group label {
    color: oklch(35% 0.006 80);
}

.input-group input:focus ~ label,
.input-group input:valid ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:valid ~ label,
.input-group select:focus ~ label,
.input-group select:valid ~ label {
    top: 5px;
    font-size: 0.8rem;
    color: var(--dorado);
}

.focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--dorado);
    transition: width 0.3s ease;
}

.input-group input:focus ~ .focus-border,
.input-group textarea:focus ~ .focus-border,
.input-group select:focus ~ .focus-border {
    width: 100%;
}

/* Estilo personalizado para el select */
.input-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23898680'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}

.btn-enviar {
    background: linear-gradient(90deg, var(--dorado) 0%, #c9a66b 100%);
    color: var(--negro);
    border: none;
    padding: 16px 30px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(210, 180, 140, 0.3);
}

.btn-enviar:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(210, 180, 140, 0.4);
}

.btn-enviar i {
    transition: transform 0.3s ease;
}

.btn-enviar:hover i {
    transform: translateX(3px);
}

/* Estilos para el loader del botón */
.btn-loader {
    color: var(--negro);
    font-size: 16px;
}

.btn-enviar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Estilos para el modal */
.modal-contacto {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-contenido {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-logo {
    max-width: 150px;
    margin-bottom: 20px;
}

.modal-header h3 {
    color: var(--negro);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.modal-body p {
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}

.modal-info {
    background: var(--hueso, #F5F5DC);
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 15px;
}

.modal-info span {
    font-weight: bold;
    color: var(--dorado);
}

.modal-cerrar {
    background-color: var(--dorado);
    color: var(--negro);
    border: none;
    padding: 10px 25px;
    margin-top: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.modal-cerrar:hover {
    background-color: var(--negro);
    color: white;
}

/* Validación de campos */
.input-group input:required:invalid,
.input-group select:required:invalid,
.input-group textarea:required:invalid {
    box-shadow: none;
}

.input-group input:required:valid,
.input-group select:required:valid,
.input-group textarea:required:valid {
    border-bottom-color: #28a745;
}

/* Responsive */
@media (max-width: 768px) {
    .contacto-destacado {
        padding: 60px 20px;
    }
    
    .titulo-destacado {
        font-size: 2rem;
    }
    
    .form-group.duo-inputs {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .formulario-flotante {
        padding: 30px;
    }
}

/* =========================================
   ESTILOS PARA MODALES EMERGENTES
   ========================================= */

/* 1. El fondo oscuro que cubre toda la pantalla */
.modal-overlay {
    position: fixed; /* Se queda fijo aunque hagas scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Negro al 60% de opacidad */
    z-index: 9999; /* Asegura que esté por encima de TODO (menús, fotos, etc) */
    
    /* Flexbox para centrar el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Estado inicial: oculto pero listo para animar */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    padding: 20px; /* Para que no se pegue a los bordes en móviles */
}

/* Cuando JS agrega la clase 'active', se muestra */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. La cajita blanca del contenido */
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 450px; /* Ancho máximo elegante */
    width: 100%;
    position: relative; /* Necesario si alguna vez agregamos una 'X' absoluta */
    
    /* Animación de entrada: empieza un poco más abajo y sube */
    transform: translateY(30px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Cuando el overlay está activo, la cajita sube a su posición */
.modal-overlay.active .modal-content {
    transform: translateY(0);
}

/* 3. Estilos específicos del Modal de Éxito */
.success-modal {
    text-align: center;
}

.success-icon {
    font-size: 4rem;
    color: #28a745; /* Verde éxito */
    margin-bottom: 20px;
    animation: bounceIn 0.6s ease; /* Pequeño rebote al aparecer */
}

.success-modal h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
}

.success-modal p {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* 4. El botón "Entendido" */
.success-modal .btn-primary {
    background-color: var(--dorado, #c0392b); /* Usa tu variable de dorado si existe, sino el fallback */
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 30px; /* Bordes redondeados modernos */
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.success-modal .btn-primary:hover {
    transform: translateY(-2px); /* Se levanta un poquito al pasar el mouse */
    filter: brightness(1.1);
}

/* Animación opcional para el icono */
@keyframes bounceIn {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/*============================================================ SOBRE NOSOTROS ============================================================= */
/*============================================================ SOBRE NOSOTROS ============================================================= */
/*============================================================ SOBRE NOSOTROS ============================================================= */
/*============================================================ SOBRE NOSOTROS ============================================================= */
/*============================================================ SOBRE NOSOTROS ============================================================= */

/* Estilos para la sección de historia */
.historia-section {
    position: relative;
    z-index: 1;
    padding: 96px 0;
    background: oklch(97% 0.005 80);
    overflow: hidden;
}

.historia-header {
    text-align: left;
    margin-bottom: 56px;
    position: relative;
    padding-bottom: 20px;
}

.historia-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: none;
    width: 60px;
    height: 3px;
    background: var(--dorado, #c0392b);
}

.historia-titulo {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: 4px;
    color: oklch(14% 0.008 80);
    margin: 0;
    line-height: 1;
}

/* Two-column layout */
.valores-mision {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.mision-box,
.valores-box {
    background: oklch(99% 0.004 80);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Photo leads each panel */
.foto-actual {
    width: 100%;
    margin: 0;
}

.foto-actual img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.pie-foto {
    font-size: 0.78rem;
    color: oklch(52% 0.006 80);
    padding: 10px 24px;
    background: oklch(96% 0.005 80);
    border-bottom: 1px solid oklch(90% 0.005 80);
    font-style: italic;
    margin: 0;
}

.panel-content {
    padding: 24px;
}

.mision-box h3,
.valores-box h3 {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: oklch(14% 0.008 80);
    margin: 0 0 14px;
}

.mision-box p {
    font-size: 1rem;
    line-height: 1.75;
    color: oklch(34% 0.006 80);
    margin: 0;
    max-width: 60ch;
}

.valores-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.valores-lista li {
    padding: 14px 0;
    border-bottom: 1px solid oklch(92% 0.005 80);
    line-height: 1.5;
    font-size: 0.95rem;
    color: oklch(34% 0.006 80);
}

.valores-lista li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.valores-lista li strong {
    display: block;
    font-family: 'Bebas Neue', cursive;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--dorado, #c0392b);
    margin-bottom: 3px;
}

/* Responsive */
@media (max-width: 900px) {
    .valores-mision {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .historia-section { padding: 60px 0; }
    .historia-titulo { font-size: 2.5rem; }
    .foto-actual img { height: 180px; }
}

@media (max-width: 480px) {
    .historia-titulo { font-size: 2rem; }
    .historia-header { margin-bottom: 40px; }
}


/* ======================================================= Locales ================================================================ */
/* ======================================================= Locales ================================================================ */
/* ======================================================= Locales ================================================================ */
/* ======================================================= Locales ================================================================ */
/* ======================================================= Locales ================================================================ */

/* ===== LOCALES ===== */
.locales-section {
    padding: 80px 0 0;
    border-bottom: 1px solid var(--negro);
    background: oklch(95% 0.006 80);
}

.locales-section h2 {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: 4px;
    color: oklch(14% 0.008 80);
    line-height: 1;
    padding-bottom: 16px;
    margin-bottom: 48px;
    position: relative;
    display: inline-block;
}

.locales-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--dorado);
}

.loc-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 420px;
}

.loc-panel {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.loc-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 520ms cubic-bezier(0.23, 1, 0.32, 1);
}

.loc-panel:hover img {
    transform: scale(1.05);
}

.loc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        oklch(8% 0.007 80 / 0.93) 0%,
        oklch(8% 0.007 80 / 0.42) 52%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 28px 32px;
    gap: 3px;
}

.loc-super {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dorado);
    margin-bottom: 2px;
}

.loc-name {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(2rem, 2.8vw, 2.6rem);
    letter-spacing: 2px;
    color: oklch(98% 0.004 80);
    line-height: 1;
    margin-bottom: 6px;
}

.loc-address {
    font-size: 0.88rem;
    font-weight: 500;
    color: oklch(88% 0.007 80);
    line-height: 1.3;
}

.loc-hours {
    font-size: 0.77rem;
    color: oklch(72% 0.006 80);
    margin-bottom: 14px;
}

.loc-cta {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--dorado);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 200ms ease;
}

.loc-panel:hover .loc-cta {
    gap: 9px;
}

.loc-panel + .loc-panel {
    border-left: 1px solid oklch(100% 0 0 / 0.08);
}

@media (max-width: 768px) {
    .locales-section {
        padding: 60px 0 0;
    }

    .loc-panels {
        grid-template-columns: repeat(3, 80vw);
        height: 340px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .loc-panel {
        scroll-snap-align: start;
    }

    .loc-panel + .loc-panel {
        border-left: none;
    }

    .loc-overlay {
        padding: 20px 20px 26px;
    }

    .loc-name {
        font-size: 2rem;
    }
}

/* ======================================================= Footer ==================================================================== */
/* ======================================================= Footer ==================================================================== */
/* ======================================================= Footer ==================================================================== */
/* ======================================================= Footer ==================================================================== */
/* ======================================================= Footer ==================================================================== */
    footer {
        background: var(--section-dark);
        color: var(--hueso);
        border-top: 2px solid var(--dorado);
        padding: 22px 0 14px;
    }

    .footer-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 32px;
    }

    .footer-top {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        padding-bottom: 16px;
    }

    .footer-logo-img {
        height: 26px;
        width: auto;
        display: block;
        flex-shrink: 0;
    }

    .footer-links {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
        margin-right: auto;
    }

    .footer-links a {
        color: var(--hueso);
        text-decoration: none;
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 6px 10px;
        position: relative;
        white-space: nowrap;
        transition: color 0.2s;
    }

    .footer-links a::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 10px;
        right: 10px;
        height: 1px;
        background-color: var(--dorado);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }

    .footer-links a:hover { color: var(--dorado); }
    .footer-links a:hover::after { transform: scaleX(1); }

    .social-icons {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-shrink: 0;
    }

    .social-icons a {
        color: var(--hueso);
        font-size: 1.05rem;
        transition: color 0.2s;
    }

    .social-icons a:hover {
        color: var(--dorado);
    }

    .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 14px;
        border-top: 1px solid rgba(245, 245, 220, 0.1);
        font-family: var(--font-body);
        font-size: 0.72rem;
        color: rgba(245, 245, 220, 0.55);
    }

    .footer-legal a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s;
    }
    .footer-legal a:hover { color: var(--dorado); }
    .footer-legal .footer-sep { margin: 0 8px; opacity: 0.5; }

    .copyright { white-space: nowrap; }

    @media (max-width: 768px) {
        .footer-top { justify-content: center; text-align: center; padding-bottom: 14px; }
        .footer-links { margin-right: 0; justify-content: center; }
        .footer-bottom { justify-content: center; text-align: center; }
    }

    .custom-link {
        color: inherit;         /* hereda el color del texto normal */
        text-decoration: underline;
    }

    .custom-link:visited,
    .custom-link:hover,
    .custom-link:active {
        color: inherit; /* mantiene el color del texto normal */
    }
    
    /* Animaciones */
            @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-250px * 25)); /* Mover mitad del ancho total */
        }
    }

    .productos-grid::-webkit-scrollbar { width: 6px; }
.productos-grid::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
.productos-grid::-webkit-scrollbar-track { background: #f9f9f9; }
    
    /* Responsive */
    @media (max-width: 992px) {
        .ventajas-grid,
        .productos-grid,
        .promociones-grid,
        .beneficios,
        .contacto-grid {
            grid-template-columns: 1fr 1fr;
        }
        
        .header-container {
            flex-direction: column;
            text-align: center;
        }
        
        .logo {
            margin-bottom: 15px;
            justify-content: center;
        }
        
        nav ul {
            margin-top: 20px;
            justify-content: center;
        }
        
        nav ul li {
            margin: 0 10px;
        }
    }
    
    @media (max-width: 768px) {
        .ventajas-grid,
        .productos-grid,
        .promociones-grid,
        .beneficios,
        .contacto-grid {
            grid-template-columns: 1fr;
        }
        
        .hero-buttons {
            flex-direction: column;
            align-items: center;
        }
        
        .btn {
            margin-bottom: 15px;
            width: 80%;
        }
    }