/* ===== Tipografías alojadas en el propio servidor (sin Google Fonts: Google está bloqueado en China) =====
Archivo (variable: grosor y ancho) para títulos y Outfit (variable) para texto. Subconjunto latin:
cubre español, inglés y portugués. El chino usa fuentes del sistema (ver reglas html[lang="zh"]). */
@font-face{
font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
src:url("../fonts/archivo-wdth-latin.woff2") format("woff2");
}
@font-face{
font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
src:url("../fonts/outfit-latin.woff2") format("woff2");
}
/* ============================================================
VOLT — Design system v3
Paleta OFICIAL: muestreada directamente del logo real entregado por el
cliente (las dos montañas del isotipo + el café de la palabra "VOLT").
verde-oliva #9BC53B (montaña izquierda — color principal 1)
naranja #217139 (montaña derecha — color principal 2)
café marca #2E6B4C (color de la palabra "VOLT" — acento secundario)
espresso #0B2B20 (neutro oscuro, derivado del café de marca)
Regla de aplicación: los dos colores del isotipo (oliva + naranja) son los
dominantes; el café de la palabra se usa como acento secundario puntual.
El espresso es el neutro oscuro (texto, header, footer) — no un cuarto color compitiendo.
Tipografía: Manrope única familia, contraste por peso (800 display / 400-600 texto).
Composición de hero: calcada de Olam Agri (bloque de color + foto en diagonal + texto fantasma).
============================================================ */
:root{
--m-hojas:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 372 357%22 width=%22372%22 height=%22357%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M48.25 179.38C47.31 180.48 46.73 182.17 45.88 183.38C45.02 184.58 44.62 184.33 43.12 186.62C41.62 188.92 38.56 194.06 36.88 197.12C35.19 200.19 34.31 201.92 33.00 205.00C31.69 208.08 30.00 212.48 29.00 215.62C28.00 218.77 27.35 221.83 27.00 223.88C26.65 225.92 27.06 226.46 26.88 227.88C26.69 229.29 26.04 230.15 25.88 232.38C25.71 234.60 25.71 239.21 25.88 241.25C26.04 243.29 26.69 243.25 26.88 244.62C27.06 246.00 26.67 247.69 27.00 249.50C27.33 251.31 28.56 254.15 28.88 255.50C29.19 256.85 28.73 257.08 28.88 257.62C29.02 258.17 29.10 257.10 29.75 258.75C30.40 260.40 31.92 265.54 32.75 267.50C33.58 269.46 33.85 268.81 34.75 270.50C35.65 272.19 36.48 274.83 38.12 277.62C39.77 280.42 42.50 284.44 44.62 287.25C46.75 290.06 49.73 293.06 50.88 294.50C52.02 295.94 49.75 293.92 51.50 295.88C53.25 297.83 57.73 302.77 61.38 306.25C65.02 309.73 70.52 314.44 73.38 316.75C76.23 319.06 77.21 319.10 78.50 320.12C79.79 321.15 79.21 321.44 81.12 322.88C83.04 324.31 87.94 327.54 90.00 328.75C92.06 329.96 91.44 328.98 93.50 330.12C95.56 331.27 99.08 333.83 102.38 335.62C105.67 337.42 107.75 338.65 113.25 340.88C118.75 343.10 131.38 347.65 135.38 349.00C139.38 350.35 136.62 348.83 137.25 349.00C137.88 349.17 138.48 349.83 139.12 350.00C139.77 350.17 140.56 349.85 141.12 350.00C141.69 350.15 141.88 350.69 142.50 350.88C143.12 351.06 144.19 350.94 144.88 351.12C145.56 351.31 145.92 351.85 146.62 352.00C147.33 352.15 148.35 351.83 149.12 352.00C149.90 352.17 150.40 352.83 151.25 353.00C152.10 353.17 153.40 352.83 154.25 353.00C155.10 353.17 155.40 353.83 156.38 354.00C157.35 354.17 159.10 353.83 160.12 354.00C161.15 354.17 161.40 354.83 162.50 355.00C163.60 355.17 165.33 354.85 166.75 355.00C168.17 355.15 165.04 355.73 171.00 355.88C176.96 356.02 196.83 356.00 202.50 355.88C208.17 355.75 203.71 355.27 205.00 355.12C206.29 354.98 209.04 355.17 210.25 355.00C211.46 354.83 211.19 354.31 212.25 354.12C213.31 353.94 215.62 354.06 216.62 353.88C217.62 353.69 217.46 353.17 218.25 353.00C219.04 352.83 220.54 353.04 221.38 352.88C222.21 352.71 222.56 352.15 223.25 352.00C223.94 351.85 224.88 352.15 225.50 352.00C226.12 351.85 226.35 351.27 227.00 351.12C227.65 350.98 228.73 351.29 229.38 351.12C230.02 350.96 229.83 350.50 230.88 350.12C231.92 349.75 234.67 349.23 235.62 348.88C236.58 348.52 236.12 348.15 236.62 348.00C237.12 347.85 237.88 348.17 238.62 348.00C239.38 347.83 240.23 347.46 241.12 347.00C242.02 346.54 243.40 345.71 244.00 345.25C244.60 344.79 244.60 344.69 244.75 344.25C244.90 343.81 245.17 343.21 244.88 342.62C244.58 342.04 243.81 341.19 243.00 340.75C242.19 340.31 241.85 340.12 240.00 340.00C238.15 339.88 234.81 340.50 231.88 340.00C228.94 339.50 224.29 337.52 222.38 337.00C220.46 336.48 222.38 337.54 220.38 336.88C218.38 336.21 212.33 333.67 210.38 333.00C208.42 332.33 209.31 333.19 208.62 332.88C207.94 332.56 207.94 331.96 206.25 331.12C204.56 330.29 200.92 329.06 198.50 327.88C196.08 326.69 194.96 326.23 191.75 324.00C188.54 321.77 181.85 316.58 179.25 314.50C176.65 312.42 176.81 312.35 176.12 311.50C175.44 310.65 176.40 310.85 175.12 309.38C173.85 307.90 170.65 305.08 168.50 302.62C166.35 300.17 164.81 298.50 162.25 294.62C159.69 290.75 155.71 284.00 153.12 279.38C150.54 274.75 148.21 269.54 146.75 266.88C145.29 264.21 144.88 264.33 144.38 263.38C143.88 262.42 144.29 262.10 143.75 261.12C143.21 260.15 142.12 259.21 141.12 257.50C140.12 255.79 139.23 253.19 137.75 250.88C136.27 248.56 134.08 246.29 132.25 243.62C130.42 240.96 128.44 237.06 126.75 234.88C125.06 232.69 123.02 231.46 122.12 230.50C121.23 229.54 123.46 231.21 121.38 229.12C119.29 227.04 111.81 219.94 109.62 218.00C107.44 216.06 108.94 218.02 108.25 217.50C107.56 216.98 106.17 215.35 105.50 214.88C104.83 214.40 104.75 214.96 104.25 214.62C103.75 214.29 103.75 213.79 102.50 212.88C101.25 211.96 99.00 210.44 96.75 209.12C94.50 207.81 91.71 206.23 89.00 205.00C86.29 203.77 82.42 202.58 80.50 201.75C78.58 200.92 78.38 200.31 77.50 200.00C76.62 199.69 76.02 200.06 75.25 199.88C74.48 199.69 73.94 199.08 72.88 198.88C71.81 198.67 69.92 198.60 68.88 198.62C67.83 198.65 67.29 198.69 66.62 199.00C65.96 199.31 65.29 199.73 64.88 200.50C64.46 201.27 64.12 202.65 64.12 203.62C64.12 204.60 64.73 205.12 64.88 206.38C65.02 207.62 64.85 210.10 65.00 211.12C65.15 212.15 65.29 210.15 65.75 212.50C66.21 214.85 66.56 220.38 67.75 225.25C68.94 230.12 72.02 238.73 72.88 241.75C73.73 244.77 72.98 243.06 72.88 243.38C72.77 243.69 73.02 244.58 72.25 243.62C71.48 242.67 69.62 240.15 68.25 237.62C66.88 235.10 65.35 231.96 64.00 228.50C62.65 225.04 61.46 222.00 60.12 216.88C58.79 211.75 56.88 202.52 56.00 197.75C55.12 192.98 55.08 191.48 54.88 188.25C54.67 185.02 54.96 180.23 54.75 178.38C54.54 176.52 54.17 177.40 53.62 177.12C53.08 176.85 52.40 176.38 51.50 176.75C50.60 177.12 49.19 178.27 48.25 179.38ZM363.12 131.00C362.71 130.81 361.96 130.60 361.38 130.88C360.79 131.15 360.40 130.90 359.62 132.62C358.85 134.35 357.44 139.48 356.75 141.25C356.06 143.02 356.00 141.52 355.50 143.25C355.00 144.98 354.40 149.35 353.75 151.62C353.10 153.90 352.46 155.19 351.62 156.88C350.79 158.56 349.27 160.52 348.75 161.75C348.23 162.98 348.69 163.52 348.50 164.25C348.31 164.98 348.04 165.52 347.62 166.12C347.21 166.73 346.52 166.98 346.00 167.88C345.48 168.77 346.27 168.73 344.50 171.50C342.73 174.27 338.19 181.12 335.38 184.50C332.56 187.88 329.48 190.17 327.62 191.75C325.77 193.33 324.98 193.38 324.25 194.00C323.52 194.62 323.90 195.04 323.25 195.50C322.60 195.96 321.75 195.88 320.38 196.75C319.00 197.62 316.54 199.83 315.00 200.75C313.46 201.67 312.35 201.56 311.12 202.25C309.90 202.94 309.69 203.81 307.62 204.88C305.56 205.94 300.69 207.67 298.75 208.62C296.81 209.58 297.52 209.94 296.00 210.62C294.48 211.31 291.06 212.10 289.62 212.75C288.19 213.40 288.48 214.02 287.38 214.50C286.27 214.98 284.19 215.06 283.00 215.62C281.81 216.19 281.15 217.42 280.25 217.88C279.35 218.33 279.23 217.65 277.62 218.38C276.02 219.10 272.58 221.29 270.62 222.25C268.67 223.21 268.33 222.79 265.88 224.12C263.42 225.46 257.85 229.12 255.88 230.25C253.90 231.38 254.77 230.29 254.00 230.88C253.23 231.46 252.42 232.85 251.25 233.75C250.08 234.65 248.69 235.02 247.00 236.25C245.31 237.48 244.00 238.35 241.12 241.12C238.25 243.90 232.56 249.75 229.75 252.88C226.94 256.00 225.40 258.29 224.25 259.88C223.10 261.46 223.40 261.69 222.88 262.38C222.35 263.06 222.56 261.81 221.12 264.00C219.69 266.19 216.08 271.85 214.25 275.50C212.42 279.15 211.10 282.94 210.12 285.88C209.15 288.81 208.40 291.62 208.38 293.12C208.35 294.62 209.27 294.40 210.00 294.88C210.73 295.35 211.46 295.81 212.75 296.00C214.04 296.19 216.29 296.15 217.75 296.00C219.21 295.85 220.02 295.29 221.50 295.12C222.98 294.96 224.10 295.50 226.62 295.00C229.15 294.50 234.48 292.65 236.62 292.12C238.77 291.60 238.17 292.23 239.50 291.88C240.83 291.52 242.73 290.52 244.62 290.00C246.52 289.48 249.44 288.94 250.88 288.75C252.31 288.56 253.62 288.35 253.25 288.88C252.88 289.40 253.21 290.08 248.62 291.88C244.04 293.67 232.71 297.69 225.75 299.62C218.79 301.56 212.58 302.65 206.88 303.50C201.17 304.35 194.21 304.25 191.50 304.75C188.79 305.25 190.44 305.56 190.62 306.50C190.81 307.44 191.60 309.15 192.62 310.38C193.65 311.60 195.10 312.75 196.75 313.88C198.40 315.00 201.25 316.27 202.50 317.12C203.75 317.98 203.44 318.50 204.25 319.00C205.06 319.50 206.00 319.42 207.38 320.12C208.75 320.83 209.71 321.96 212.50 323.25C215.29 324.54 220.77 326.75 224.12 327.88C227.48 329.00 230.40 329.60 232.62 330.00C234.85 330.40 236.04 330.04 237.50 330.25C238.96 330.46 239.71 330.98 241.38 331.25C243.04 331.52 245.40 331.77 247.50 331.88C249.60 331.98 252.38 332.00 254.00 331.88C255.62 331.75 256.08 331.25 257.25 331.12C258.42 331.00 258.73 331.44 261.00 331.12C263.27 330.81 268.06 329.92 270.88 329.25C273.69 328.58 275.75 327.94 277.88 327.12C280.00 326.31 282.21 324.96 283.62 324.38C285.04 323.79 285.60 324.00 286.38 323.62C287.15 323.25 287.50 322.54 288.25 322.12C289.00 321.71 290.04 321.62 290.88 321.12C291.71 320.62 292.21 319.73 293.25 319.12C294.29 318.52 294.90 318.85 297.12 317.50C299.35 316.15 302.19 314.67 306.62 311.00C311.06 307.33 318.58 300.79 323.75 295.50C328.92 290.21 333.46 284.81 337.62 279.25C341.79 273.69 346.48 265.81 348.75 262.12C351.02 258.44 350.62 258.65 351.25 257.12C351.88 255.60 351.79 254.42 352.50 253.00C353.21 251.58 354.85 250.00 355.50 248.62C356.15 247.25 355.62 246.71 356.38 244.75C357.12 242.79 358.42 241.48 360.00 236.88C361.58 232.27 364.81 221.12 365.88 217.12C366.94 213.12 366.10 213.96 366.38 212.88C366.65 211.79 366.85 214.79 367.50 210.62C368.15 206.46 369.75 195.94 370.25 187.88C370.75 179.81 370.88 168.94 370.50 162.25C370.12 155.56 368.88 151.62 368.00 147.75C367.12 143.88 365.94 141.62 365.25 139.00C364.56 136.38 364.23 133.33 363.88 132.00C363.52 130.67 363.54 131.19 363.12 131.00ZM178.50 45.50C176.92 44.06 175.79 43.19 174.00 42.00C172.21 40.81 170.31 39.69 167.75 38.38C165.19 37.06 161.96 35.52 158.62 34.12C155.29 32.73 151.29 31.04 147.75 30.00C144.21 28.96 140.85 28.40 137.38 27.88C133.90 27.35 131.65 26.85 126.88 26.88C122.10 26.90 113.42 27.33 108.75 28.00C104.08 28.67 101.50 30.21 98.88 30.88C96.25 31.54 94.73 31.33 93.00 32.00C91.27 32.67 90.50 33.90 88.50 34.88C86.50 35.85 82.54 37.08 81.00 37.88C79.46 38.67 80.04 39.15 79.25 39.62C78.46 40.10 77.12 40.19 76.25 40.75C75.38 41.31 75.25 42.10 74.00 43.00C72.75 43.90 70.31 45.04 68.75 46.12C67.19 47.21 67.71 46.65 64.62 49.50C61.54 52.35 53.65 59.77 50.25 63.25C46.85 66.73 46.31 67.67 44.25 70.38C42.19 73.08 39.29 77.62 37.88 79.50C36.46 81.38 36.25 80.92 35.75 81.62C35.25 82.33 35.35 83.04 34.88 83.75C34.40 84.46 33.92 84.27 32.88 85.88C31.83 87.48 29.69 91.69 28.62 93.38C27.56 95.06 27.02 95.06 26.50 96.00C25.98 96.94 26.23 97.52 25.50 99.00C24.77 100.48 23.40 102.23 22.12 104.88C20.85 107.52 18.79 112.92 17.88 114.88C16.96 116.83 18.15 112.21 16.62 116.62C15.10 121.04 10.19 136.23 8.75 141.38C7.31 146.52 8.50 145.19 8.00 147.50C7.50 149.81 6.23 152.81 5.75 155.25C5.27 157.69 5.42 160.08 5.12 162.12C4.83 164.17 4.29 164.33 4.00 167.50C3.71 170.67 3.38 175.69 3.38 181.12C3.38 186.56 3.62 195.17 4.00 200.12C4.38 205.08 4.62 206.88 5.62 210.88C6.62 214.88 9.02 221.56 10.00 224.12C10.98 226.69 10.94 225.83 11.50 226.25C12.06 226.67 12.62 227.19 13.38 226.62C14.12 226.06 15.08 224.81 16.00 222.88C16.92 220.94 18.17 217.54 18.88 215.00C19.58 212.46 19.35 210.79 20.25 207.62C21.15 204.46 22.44 199.83 24.25 196.00C26.06 192.17 28.65 188.23 31.12 184.62C33.60 181.02 36.88 176.96 39.12 174.38C41.38 171.79 43.23 170.33 44.62 169.12C46.02 167.92 46.77 167.79 47.50 167.12C48.23 166.46 47.60 166.19 49.00 165.12C50.40 164.06 54.25 161.90 55.88 160.75C57.50 159.60 56.50 159.67 58.75 158.25C61.00 156.83 65.94 154.02 69.38 152.25C72.81 150.48 77.42 148.65 79.38 147.62C81.33 146.60 80.46 146.42 81.12 146.12C81.79 145.83 82.56 146.21 83.38 145.88C84.19 145.54 83.10 145.42 86.00 144.12C88.90 142.83 96.54 139.98 100.75 138.12C104.96 136.27 106.79 135.54 111.25 133.00C115.71 130.46 124.00 125.15 127.50 122.88C131.00 120.60 130.29 121.04 132.25 119.38C134.21 117.71 137.31 114.81 139.25 112.88C141.19 110.94 142.94 108.94 143.88 107.75C144.81 106.56 144.25 106.52 144.88 105.75C145.50 104.98 146.42 104.69 147.62 103.12C148.83 101.56 149.56 100.67 152.12 96.38C154.69 92.08 161.02 81.21 163.00 77.38C164.98 73.54 163.81 74.85 164.00 73.38C164.19 71.90 163.98 69.81 164.12 68.50C164.27 67.19 164.98 66.42 164.88 65.50C164.77 64.58 164.06 63.60 163.50 63.00C162.94 62.40 162.12 62.08 161.50 61.88C160.88 61.67 161.69 61.44 159.75 61.75C157.81 62.06 152.12 63.40 149.88 63.75C147.62 64.10 147.48 63.56 146.25 63.88C145.02 64.19 143.58 65.29 142.50 65.62C141.42 65.96 141.02 65.52 139.75 65.88C138.48 66.23 137.71 67.02 134.88 67.75C132.04 68.48 124.90 69.88 122.75 70.25C120.60 70.62 122.19 70.19 122.00 70.00C121.81 69.81 121.54 69.42 121.62 69.12C121.71 68.83 121.23 68.85 122.50 68.25C123.77 67.65 127.62 66.04 129.25 65.50C130.88 64.96 130.81 65.52 132.25 65.00C133.69 64.48 134.73 63.52 137.88 62.38C141.02 61.23 147.44 59.17 151.12 58.12C154.81 57.08 157.50 56.46 160.00 56.12C162.50 55.79 162.12 56.56 166.12 56.12C170.12 55.69 180.96 54.12 184.00 53.50C187.04 52.88 184.46 52.85 184.38 52.38C184.29 51.90 184.48 51.77 183.50 50.62C182.52 49.48 180.08 46.94 178.50 45.50ZM127.12 14.25C126.65 14.90 126.54 15.15 127.00 15.75C127.46 16.35 129.00 17.50 129.88 17.88C130.75 18.25 131.56 17.83 132.25 18.00C132.94 18.17 132.85 18.56 134.00 18.88C135.15 19.19 137.56 19.69 139.12 19.88C140.69 20.06 142.40 19.83 143.38 20.00C144.35 20.17 144.08 20.69 145.00 20.88C145.92 21.06 147.83 20.94 148.88 21.12C149.92 21.31 150.33 21.85 151.25 22.00C152.17 22.15 153.54 21.85 154.38 22.00C155.21 22.15 155.46 22.71 156.25 22.88C157.04 23.04 158.44 22.83 159.12 23.00C159.81 23.17 159.33 23.54 160.38 23.88C161.42 24.21 164.38 24.67 165.38 25.00C166.38 25.33 165.94 25.69 166.38 25.88C166.81 26.06 166.48 25.52 168.00 26.12C169.52 26.73 173.98 28.69 175.50 29.50C177.02 30.31 176.31 30.54 177.12 31.00C177.94 31.46 178.33 31.08 180.38 32.25C182.42 33.42 186.65 35.96 189.38 38.00C192.10 40.04 193.90 41.60 196.75 44.50C199.60 47.40 204.62 53.02 206.50 55.38C208.38 57.73 207.12 57.31 208.00 58.62C208.88 59.94 209.98 60.62 211.75 63.25C213.52 65.88 217.46 72.33 218.62 74.38C219.79 76.42 217.90 73.92 218.75 75.50C219.60 77.08 222.85 82.21 223.75 83.88C224.65 85.54 223.65 84.56 224.12 85.50C224.60 86.44 225.27 86.85 226.62 89.50C227.98 92.15 229.85 96.90 232.25 101.38C234.65 105.85 238.73 112.85 241.00 116.38C243.27 119.90 244.83 121.04 245.88 122.50C246.92 123.96 245.88 123.38 247.25 125.12C248.62 126.88 251.60 130.38 254.12 133.00C256.65 135.62 259.94 138.81 262.38 140.88C264.81 142.94 266.27 143.85 268.75 145.38C271.23 146.90 275.67 149.06 277.25 150.00C278.83 150.94 274.98 149.50 278.25 151.00C281.52 152.50 293.42 157.65 296.88 159.00C300.33 160.35 298.35 158.96 299.00 159.12C299.65 159.29 299.44 159.83 300.75 160.00C302.06 160.17 305.48 160.42 306.88 160.12C308.27 159.83 308.62 158.92 309.12 158.25C309.62 157.58 309.75 156.83 309.88 156.12C310.00 155.42 310.04 155.06 309.88 154.00C309.71 152.94 309.21 152.06 308.88 149.75C308.54 147.44 308.35 142.62 307.88 140.12C307.40 137.62 306.31 135.92 306.00 134.75C305.69 133.58 306.33 134.19 306.00 133.12C305.67 132.06 304.35 129.65 304.00 128.38C303.65 127.10 304.35 127.35 303.88 125.50C303.40 123.65 301.58 118.81 301.12 117.25C300.67 115.69 301.00 116.35 301.12 116.12C301.25 115.90 301.06 114.79 301.88 115.88C302.69 116.96 304.67 120.21 306.00 122.62C307.33 125.04 308.40 127.04 309.88 130.38C311.35 133.71 314.04 140.33 314.88 142.62C315.71 144.92 314.38 142.35 314.88 144.12C315.38 145.90 317.21 150.81 317.88 153.25C318.54 155.69 318.71 157.23 318.88 158.75C319.04 160.27 318.69 160.85 318.88 162.38C319.06 163.90 319.79 165.02 320.00 167.88C320.21 170.73 320.04 177.50 320.12 179.50C320.21 181.50 320.04 179.85 320.50 179.88C320.96 179.90 321.50 180.65 322.88 179.62C324.25 178.60 326.77 176.10 328.75 173.75C330.73 171.40 333.04 168.12 334.75 165.50C336.46 162.88 337.48 161.10 339.00 158.00C340.52 154.90 342.75 149.75 343.88 146.88C345.00 144.00 345.06 143.71 345.75 140.75C346.44 137.79 347.62 133.27 348.00 129.12C348.38 124.98 348.17 119.15 348.00 115.88C347.83 112.60 347.52 111.98 347.00 109.50C346.48 107.02 345.58 103.42 344.88 101.00C344.17 98.58 343.79 97.48 342.75 95.00C341.71 92.52 340.10 89.02 338.62 86.12C337.15 83.23 335.50 80.27 333.88 77.62C332.25 74.98 331.38 73.58 328.88 70.25C326.38 66.92 323.25 62.33 318.88 57.62C314.50 52.92 308.50 46.77 302.62 42.00C296.75 37.23 288.23 31.98 283.62 29.00C279.02 26.02 277.88 25.62 275.00 24.12C272.12 22.62 268.42 20.88 266.38 20.00C264.33 19.12 263.92 19.40 262.75 18.88C261.58 18.35 260.56 17.38 259.38 16.88C258.19 16.38 257.83 16.71 255.62 15.88C253.42 15.04 249.10 12.88 246.12 11.88C243.15 10.88 239.38 10.38 237.75 9.88C236.12 9.38 236.92 9.04 236.38 8.88C235.83 8.71 235.06 9.02 234.50 8.88C233.94 8.73 233.62 8.17 233.00 8.00C232.38 7.83 231.50 8.06 230.75 7.88C230.00 7.69 230.15 7.21 228.50 6.88C226.85 6.54 222.48 6.19 220.88 5.88C219.27 5.56 219.96 5.17 218.88 5.00C217.79 4.83 215.54 5.04 214.38 4.88C213.21 4.71 212.92 4.15 211.88 4.00C210.83 3.85 209.50 4.17 208.12 4.00C206.75 3.83 206.31 3.19 203.62 3.00C200.94 2.81 194.29 3.02 192.00 2.88C189.71 2.73 193.90 2.10 189.88 2.12C185.85 2.15 171.96 2.71 167.88 3.00C163.79 3.29 166.71 3.71 165.38 3.88C164.04 4.04 161.19 3.83 159.88 4.00C158.56 4.17 158.58 4.71 157.50 4.88C156.42 5.04 154.35 4.83 153.38 5.00C152.40 5.17 153.10 5.56 151.62 5.88C150.15 6.19 145.88 6.56 144.50 6.88C143.12 7.19 144.54 7.40 143.38 7.75C142.21 8.10 138.69 8.65 137.50 9.00C136.31 9.35 136.75 9.71 136.25 9.88C135.75 10.04 135.56 9.67 134.50 10.00C133.44 10.33 131.10 11.17 129.88 11.88C128.65 12.58 127.60 13.60 127.12 14.25Z%22/%3E%3C/svg%3E");
--gold: #9BC53B;
--gold-light: #B5D96A;
--gold-pale: #EAF3D6;
--terracotta: #217139;
--terracotta-dark: #0A5A3A;
--espresso: #0B2B20;
--espresso-soft: #2E6B4C;
--cream: #F8FBF3;
--cream-2: #D3DDC6;
--ink: #0B2B20;
--ink-soft: #55675C;
--line: rgba(11,43,32,.13);
--line-strong: rgba(11,43,32,.24);
--white: #ffffff;
--display: "Archivo", "Segoe UI", sans-serif;
--sans: "Outfit", "Segoe UI", sans-serif;
/* Antes 1600px: en monitores anchos (>1700px) el contenido llegaba casi
al borde de la ventana, con muy poco aire a los costados. 1320px deja
un margen visible y proporcional en escritorio sin afectar tablet/mobile
(ahí el viewport ya es más angosto que esto, así que no cambia nada). */
--container: 1320px;
--radius: 8px;
--ease: cubic-bezier(.22,.8,.28,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
/* .contact-band usa el truco width:100vw para salirse del container y ser
ancho completo real — pero 100vw incluye el ancho de la scrollbar vertical,
así que sin recortar esto esa sección se pasaba unos px del borde derecho y
generaba scroll horizontal en toda la página. Usamos overflow-x:CLIP (no
"hidden"): "hidden" convierte a html/body en un contenedor de scroll propio,
y eso es justo lo que rompía el header "sticky" — a ratos perdía su punto
de referencia y desaparecía por completo al hacer scroll. "clip" recorta
igual mostrando el borde, pero sin crear ese contenedor de scroll. */
body{
margin:0; background:var(--cream); color:var(--ink);
font-family:var(--sans); font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; } /* height:auto: con width/height en las etiquetas , el navegador reserva el espacio por proporción sin deformar; cualquier regla de clase con alto propio lo sustituye */
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 44px; }
section{ position:relative; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
h1,h2,h3{ font-family:var(--display); font-weight:800; color:var(--espresso); margin:0; letter-spacing:-.01em; }
.accent-word{ color:var(--terracotta); }
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:15px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--terracotta-dark);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--terracotta); display:inline-block; }
/* --i (asignado en JS a cada .reveal, 0–7 repitiendo) antes se guardaba pero
nunca se usaba en el CSS — todos los elementos de una fila (las 3 puertas,
los 4 puntos de servicios, etc.) aparecían exactamente al mismo instante,
en bloque, sin cascada — eso se sentía golpeado/espontáneo. Con el delay
escalonado por --i, entran uno tras otro, más fluido.
Bug real encontrado: las puertas, los puntos de servicios y la foto de
servicios NO se animaban en absoluto — cada uno tiene su PROPIA regla
`transition` (para el hover: sombra, esquina, fondo...) que, al venir
después en la hoja de estilos, reemplazaba por completo la `transition` de
`.reveal` sobre el mismo elemento (con el mismo selector no se combinan,
se pisan). Por eso usamos la propiedad `translate` (aparte de `transform`,
que es la que usa cada hover) — así nunca chocan, sin importar qué
elemento sea. */
.reveal{
opacity:0; translate:0 26px;
transition:opacity .6s var(--ease), translate .6s var(--ease);
transition-delay:calc(var(--i, 0) * 55ms);
}
.reveal.in{ opacity:1; translate:none; }
/* Caso especial: Contacto. En vez de desvanecerse desde la nada, se pidió
que se sienta como si "saliera de atrás del pie de página" — se mantiene
siempre visible (sin fade) y solo se desplaza hacia arriba desde abajo. */
.contact-band.reveal{ opacity:1; translate:0 80px; transition:translate .85s var(--ease); }
.contact-band.reveal.in{ translate:none; }
/* Línea/costura tenue reportada entre Contacto y el pie de página SOLO en
mobile: dos bloques del mismo color (espresso) pegados, uno de ellos
animado con `translate` — cuando ese `translate` queda "activo" aunque
sea en 0 0, el navegador lo sigue tratando como una capa aparte y a veces
se nota un filo de 1px en la costura por el antialiasing de esa capa.
`translate:none` evita dejar esa capa prendida en reposo, y este ligero
solape negativo tapa cualquier resto de esa costura sin afectar el hueco
de arriba (que va en el padding, no en el margen). */
.contact-band{ margin-bottom:-1px; }
/* Firma visual del sitio: una sola esquina con radio grande y curvo (suavizada), el resto en escuadra —
el mismo recurso que Olam usa en sus fotos y bloques. Se repite en paneles y fotos del sitio. */
.corner-cut{ border-radius:0 var(--corner,64px) 0 0; }
/* ============ UTILITY BAR ============ */
/* Se encoge a 0 (altura + opacidad) al hacer scroll — así "se desliza y desaparece"
sin necesitar overflow:hidden en el grupo completo (eso recortaba el mega menú). */
.util-bar{
background:var(--espresso); color:rgba(247,251,240,.78); font-size:15.75px;
overflow:hidden; height:52px; transition:height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.header-group.scrolled .util-bar{ height:0; opacity:0; }
.header-group.menu-open .util-bar{ height:0; opacity:0; transition-duration:.25s; }
.util-bar-inner{ display:flex; align-items:center; justify-content:space-between; height:52px; }
.util-links{ display:flex; align-items:center; gap:28px; }
.util-links a, .util-links button{ display:flex; align-items:center; gap:8px; color:inherit; font-size:15.75px; font-weight:600; transition:color .2s; }
.util-links a:hover, .util-links button:hover{ color:var(--gold-light); }
.util-links svg{ width:17px; height:17px; }
.util-right{ display:flex; align-items:center; gap:22px; }
.util-lang{ display:flex; gap:3px; }
.util-lang button{ padding:2px 6px; font-weight:700; color:rgba(247,251,240,.6); font-size:15.3px; }
.util-lang button.active{ color:var(--gold-light); }
.util-lang span{ color:rgba(247,251,240,.3); }
/* Banderas reales (no íconos/stickers genéricos) en vez del texto "/" como
separador — una por idioma, recortadas a proporción bandera (3:2) con una
línea sutil alrededor para que no se pierdan sobre el fondo oscuro del
header cuando la bandera tiene blanco en el borde (ej. la de EN). */
.lang-btn{ display:flex; align-items:center; gap:5px; }
.lang-flag{ width:18px; height:12px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(247,251,240,.25); flex:0 0 auto; }
.util-subscribe{ background:var(--terracotta); color:var(--cream); font-weight:800; font-size:15.3px; padding:10px 20px; display:flex; align-items:center; gap:9px; transition:background .25s; }
.util-subscribe:hover{ background:var(--terracotta-dark); }
.util-subscribe svg{ width:16px; height:16px; }
/* ============ HEADER ============ */
/* La utilidad y el nav viajan juntos en un solo grupo. Al hacer scroll, la barra
utilitaria se encoge a 0 (arriba) y el nav queda ocupando el tope — coreografía real,
no solo un cambio de color. Sin overflow:hidden aquí: el mega menú necesita poder
desbordar hacia abajo del header sin que nada lo recorte. */
/* position:fixed (antes era sticky) a propósito: con sticky, el header sigue
ocupando espacio real en el flujo del documento con SU TAMAÑO ACTUAL — así
que cuando la barra utilitaria se encoge (52px→0px) el propio header-group
se vuelve 52px más bajo, y TODO lo que viene después (el Hero de página
interior, y cualquier contenido debajo) se recorre hacia arriba ese mismo
tanto — un "salto"/rebote visible confirmado con video real, en todas las
páginas interiores (index.html no lo sufría porque su Hero ya es fixed,
fuera del flujo). Con fixed, el header-group sale COMPLETAMENTE del flujo:
ya no importa cuánto cambie su propio alto, nunca empuja ni recorre nada
de lo que sigue. La contraparte: cada página tiene que reservar a mano el
espacio que el header YA NO reserva solo — ver el padding-top fijo en
.page-hero (interior) y .hero-inner (home), ambos ya preparados para esto.
overflow-anchor:none evita el bug real detrás del parpadeo/saltitos: al
encoger la barra utilitaria (52px→0), el navegador (Chrome de forma
automática) intenta "anclar" el scroll para compensar ese movimiento de
layout — pero esa compensación puede cruzar de nuevo el umbral que prende
el estado "scrolled", encogiendo/agrandando el header en loop. Esto le
dice al navegador que no toque el scroll por los cambios de tamaño aquí. */
.header-group{ position:fixed; top:0; left:0; right:0; z-index:100; overflow-anchor:none; }
.site-header{
position:relative;
background:var(--cream);
border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .3s, box-shadow .3s;
}
.site-header.scrolled{ border-color:var(--line); box-shadow:0 6px 24px rgba(11,43,32,.06); }
.site-header .container{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:82px; }
/* ---- Home: header transparente flotando sobre el hero, se vuelve sólido al hacer scroll ---- */
body.home .site-header{
background:transparent; border-bottom:0; box-shadow:none;
}
/* El fondo oscuro ya no es un simple cambio de color: es una capa aparte que
se revela con un barrido de arriba hacia abajo (clip-path inset, borde
inferior animado) — como una cortina que cae — en vez de aparecer/perderse
de golpe. Vive en su propio pseudo-elemento para no interferir con el
mega menú, que necesita poder desbordar por debajo del header.
Ya NO vive dentro de `body.home`: antes este barrido solo pasaba en el
home — en las páginas interiores el header se quedaba siempre en su
versión clara (crema) al hacer scroll, sin el cambio a oscuro. Sacar el
pseudo-elemento de `body.home` lo crea en TODAS las páginas (sigue oculto
por defecto, clip-path:inset(0 0 100% 0)); el barrido en sí solo se activa
con `.scrolled` más abajo, así que en reposo no cambia nada visualmente en
ninguna página. */
.site-header::before{
content:""; position:absolute; inset:0; z-index:0;
background:var(--espresso);
clip-path:inset(0 0 100% 0);
transition:clip-path 1.05s var(--ease);
pointer-events:none;
}
body.home .site-header .brand-word{ color:var(--cream); transition:color .35s var(--ease); }
body.home .site-header .brand-mark{ filter:brightness(0) invert(1); transition:filter .35s var(--ease); }
/* El logo (brand-word/brand-mark) ya era crema/blanco incluso sin scroll —
señal de que esta franja de arriba SIEMPRE cae sobre fondo oscuro (la curva
naranja del hero, no una zona clara), nunca sobre algo parecido al fondo
crema de las páginas interiores. Un intento anterior puso el nav en tonos
oscuros (espresso) ahí mismo, y quedó ilegible sobre el naranja. Mismo
esquema que el estado "scrolled" (que si acierta el contraste): crema
translúcido de base, blanco sólido en hover, dorado para la página activa
y para la barrita que se llena — consistente con el logo de al lado. */
body.home .site-header .main-nav a{ color:rgba(247,251,240,.82); transition:color .35s var(--ease); }
body.home .site-header .main-nav a:hover{ color:var(--cream); }
body.home .site-header .main-nav a[aria-current="page"]{ color:var(--gold-light); }
body.home .site-header .main-nav a::after{ background:var(--gold-light); }
body.home .site-header .btn-ghost{ border-color:var(--cream); color:var(--cream); transition:color .35s var(--ease), border-color .35s var(--ease), background .25s; }
body.home .site-header .btn-ghost:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
body.home .site-header .nav-toggle{ border-color:var(--espresso); color:var(--espresso); }
body.home .site-header.scrolled{ box-shadow:0 10px 30px rgba(6,21,15,.25); }
body.home .site-header.scrolled::before{ clip-path:inset(0 0 0% 0); }
body.home .site-header.scrolled .brand-word{ color:var(--cream); }
body.home .site-header.scrolled .brand-mark{ filter:none; }
body.home .site-header.scrolled .main-nav a{ color:rgba(247,251,240,.82); }
body.home .site-header.scrolled .main-nav a:hover{ color:var(--cream); }
body.home .site-header.scrolled .main-nav a[aria-current="page"]{ color:var(--gold-light); }
body.home .site-header.scrolled .main-nav a::after{ background:var(--gold-light); }
body.home .site-header.scrolled .btn-ghost{ border-color:rgba(247,251,240,.4); color:var(--cream); }
body.home .site-header.scrolled .btn-ghost:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
body.home .site-header.scrolled .nav-toggle{ border-color:rgba(247,251,240,.4); color:var(--cream); }
/* ---- Páginas interiores: mismo barrido a oscuro al hacer scroll, no solo en
home. Antes esto vivía SOLO dentro de `body.home .site-header.scrolled` —
en las páginas interiores el header se quedaba en su versión clara (crema,
texto oscuro) sin importar cuánto se hiciera scroll. Este bloque genérico
(sin `body.home`) repite exactamente los mismos cambios — mismo barrido
(::before), mismos colores crema en el texto — pero aplica en CUALQUIER
página. En home no pasa nada distinto: las reglas de arriba (con
`body.home`, más específicas) siguen ganando ahí, así que esto solo le
suma el efecto a las páginas que no lo tenían. */
.site-header.scrolled::before{ clip-path:inset(0 0 0% 0); }
.site-header.scrolled .brand-word{ color:var(--cream); }
.site-header.scrolled .main-nav a{ color:rgba(247,251,240,.82); }
.site-header.scrolled .main-nav a:hover{ color:var(--cream); }
.site-header.scrolled .main-nav a[aria-current="page"]{ color:var(--gold-light); }
.site-header.scrolled .main-nav a::after{ background:var(--gold-light); }
.site-header.scrolled .btn-ghost{ border-color:rgba(247,251,240,.4); color:var(--cream); }
.site-header.scrolled .btn-ghost:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.site-header.scrolled .nav-toggle{ border-color:rgba(247,251,240,.4); color:var(--cream); }
body.home .hero{ padding-top:82px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:46px; height:31px; flex:0 0 auto; }
.brand-word{ font-family:var(--display); font-weight:800; font-size:21.5px; letter-spacing:-.01em; color:var(--espresso); }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
display:block;
font-size:clamp(12.5px,1.35vw,16px); font-weight:700; letter-spacing:.01em; color:var(--espresso-soft);
padding:10px clamp(8px,1.1vw,16px); border-radius:4px; position:relative; transition:color .25s;
}
.main-nav a::after{
content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px;
background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.main-nav a:hover{ color:var(--espresso); }
.main-nav a:hover::after{ transform:scaleX(1); }
/* Página activa: el link de la sección en la que estás queda marcado con el
mismo subrayado que el hover, pero fijo (no necesita pasar el mouse), y en
terracota para que se distinga de los demás. Vale para las 3 variantes de
color del header (normal, home transparente, home scrolled) y para el
menú de mobile más abajo. */
.main-nav a[aria-current="page"]{ color:var(--terracotta-dark); }
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
/* ---- Mega menú — de regreso a tarjeta clara flotante (la barra oscura de ancho
completo no convenció), columnas de solo texto plano: un pequeño encabezado de
categoría por columna + enlaces, sin iconos ni tarjetas internas. */
.nav-item{ position:relative; }
/* El menú se abre/cierra por :hover en .nav-item, y como .mega-menu es su
descendiente, hover encima de CUALQUIER parte de .mega-menu también cuenta
como hover en .nav-item — en teoría no debería poder "perderse" al bajar el
mouse. El problema real era el `margin-top:14px` de antes: eso deja un
colchón de 14px de página VACÍA entre el link y la tarjeta que no es
territorio de ningún elemento (ni el link, que termina arriba, ni la
tarjeta, que empieza más abajo) — el mouse cruza por ahí, sale de .nav-item
sin haber entrado todavía a .mega-menu, y el navegador cierra el menú antes
de que el cursor llegue a los enlaces. Solución: .mega-menu (el que abre y
cierra) va PEGADO al link (top:100%, sin margen) para que no haya hueco sin
cubrir; el espacio de aire visual se mueve a un padding-top DENTRO de
.mega-menu — sigue viéndose igual de separado, pero ahora ese aire también
es parte de la caja hoverable. La tarjeta blanca (fondo, sombra, columnas)
vive en .mega-menu-inner. */
/* --mega-shift (0px por defecto): corrección horizontal calculada en JS
(main.js) para que el menú no se corte contra el borde del viewport en
anchos angostos de escritorio — .nav-item de Proveedores/Alianzas quedan
cerca del borde izquierdo, y centrado a ciegas bajo el link a veces se
salía de la pantalla. Sin JS (o si no hace falta corregir) --mega-shift
vale 0 y el menú se ve exactamente igual que antes. */
.mega-menu{
position:absolute; top:100%; left:50%; transform:translate(calc(-50% + var(--mega-shift, 0px)),8px);
width:min(640px,90vw); padding-top:14px;
opacity:0; pointer-events:none; transition:opacity .12s ease, transform .18s ease;
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu{
opacity:1; pointer-events:auto; transform:translate(calc(-50% + var(--mega-shift, 0px)),0);
}
.mega-menu-inner{
padding:34px 36px;
background:var(--white); border-radius:var(--radius); box-shadow:0 24px 48px rgba(11,43,32,.18);
display:flex; gap:28px;
}
/* min-width:0 es la parte que faltaba: un hijo flex por default NO se encoge
más allá del ancho de su contenido (min-width:auto), así que una palabra
larga sin espacios ("proveedores", "documentación") empujaba la columna
entera fuera del recuadro blanco en vez de partirse en dos líneas — eso
es lo que se veía como letras "sin fondo blanco atrás". overflow-wrap
es el respaldo por si una palabra sigue sin caber ni partiéndose por
espacio. */
.mega-col{ flex:1; min-width:0; padding:0 18px; border-left:1px solid var(--line); overflow-wrap:break-word; }
.mega-col:first-child{ padding-left:0; border-left:0; }
.mega-col h6{
font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--terracotta-dark); margin-bottom:14px;
}
/* Esta regla base vivía SOLO dentro de `body.home` (ver el bloque de abajo),
así que en cualquier página que no fuera el home, `.mega-col a` nunca la
recibía y cascadeaba hasta `.main-nav a` (16px, bold 700, padding:10px 16px
— pensado para los links horizontales del nav, no para una lista vertical
angosta). Ese texto más grande y con más padding es justo lo que hacía que
palabras largas ("homologación", "proveedores") no cupieran en la columna y
se salieran del recuadro blanco. Puesta aquí, sin `body.home`, aplica en
todas las páginas — y ya gana por especificidad (dos clases) sobre
`.main-nav a` (una clase) sin necesitar el prefijo. */
/* width:fit-content (en vez de ancho completo de columna) es la pieza clave:
sigue siendo `display:block` así que cada link ocupa su propia fila (se
siguen apilando, no se van de lado), pero la CAJA del link ahora mide
exactamente lo que mide su texto — ya no el ancho completo de la columna.
Eso es lo que permite que el ::after (la misma barrita que se "llena" del
nav principal, no el subrayado nativo del navegador) calce con el texto
real en vez de estirarse hasta el borde de la columna o subrayar cada
línea suelta de un texto envuelto en dos renglones. */
.mega-col a{
display:block; width:fit-content; max-width:100%; position:relative;
font-size:14.5px; font-weight:600; color:var(--ink); padding:7px 0;
transition:color .2s;
}
.mega-col a::after{
content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
background:var(--terracotta); transform:scaleX(0); transform-origin:left;
transition:transform .3s var(--ease);
}
.mega-col a:hover{ color:var(--terracotta); }
.mega-col a:hover::after{ transform:scaleX(1); }
/* Especificidad reforzada con !important: el menú vive DENTRO de .main-nav,
y hay varias reglas de color para .main-nav a (home transparente, home
scrolled, interior scrolled, cada una con su propio prefijo "body.home"
o no) — cada una compitiendo por especificidad con esta. Ya hubo dos
rondas de bugs por esto: primero perdía siempre contra la home (letras
invisibles ahí), después, al quitarle el prefijo "body.home" para que
aplicara en todas las páginas, perdió el empate de especificidad contra
la regla general de header oscuro en páginas interiores (mismo número de
clases, pero esa regla tiene además el elemento "body" delante, que
desempata a su favor). En vez de seguir sumando clases para ganar la
carrera, !important corta el problema de raíz: el mega menú SIEMPRE cae
sobre fondo blanco (.mega-menu-inner), así que su texto nunca debe
heredar el color del nav del header, sea cual sea su estado. */
.site-header .main-nav .mega-col a,
.site-header.scrolled .main-nav .mega-col a{ color:var(--ink) !important; }
.site-header .main-nav .mega-col a:hover{ color:var(--terracotta) !important; }
.site-header.scrolled .main-nav .mega-col a:hover{ color:var(--gold-light) !important; }
.site-header.scrolled .main-nav .mega-col a:hover::after{ background:var(--gold-light); }
.header-right{ display:flex; align-items:center; gap:clamp(10px,1.2vw,18px); }
/* El CTA del header ("Contáctanos"/"Fale conosco") comparte fila con el logo
y los 7 links del menú — a un tamaño fijo (heredado de .btn, 16.5px +
padding:11px 20px) era el elemento más ancho sin ceder nada, empujando al
resto a apretarse en pantallas angostas de escritorio (861-1100px aprox).
Responsivo con el mismo criterio que el resto del header. */
.header-right .btn-ghost{ font-size:clamp(12.5px,1.35vw,16.5px); padding:clamp(8px,1.2vw,11px) clamp(12px,2vw,20px); }
.btn{
display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
font-size:16.5px; font-weight:800; letter-spacing:.01em;
padding:17px 30px; border-radius:0; border:1px solid transparent;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s, border-radius .25s var(--ease);
}
/* En reposo, geométrico (esquina recta) — al seleccionar/hover, un toque muy
ligero de la silueta de marca (una esquina se curva un poco), nada más. */
.btn:hover, .btn:focus-visible{ border-radius:0 16px 0 0; }
.btn svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-dark{ background:var(--espresso); color:var(--cream); }
.btn-dark:hover{ background:var(--terracotta); transform:translateY(-2px); box-shadow:0 12px 24px rgba(221,78,12,.3); }
.btn-pill{ background:var(--cream); color:var(--espresso); }
.btn-pill:hover{ background:var(--espresso); color:var(--cream); transform:translateY(-2px); }
.btn-text{ padding:13px 4px; color:var(--espresso); font-weight:800; }
.btn-text:hover{ color:var(--terracotta); }
.btn-text:hover svg{ transform:translateX(3px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--espresso); padding:11px 20px; }
.btn-ghost:hover{ border-color:var(--espresso); background:var(--espresso); color:var(--cream); }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:4px; }
.nav-toggle svg{ width:16px; height:16px; }
/* Solo existe para el menú de mobile/tableta (ver media query) — oculto por
default para que en escritorio no aparezca como un bloque suelto dentro
del nav. */
.mobile-nav-extra{ display:none; }
/* ============ HERO (composición tipo Olam: bloque de color + foto en diagonal) ============ */
/* "Pinned hero": el hero se queda FIJO en el viewport (position:fixed) y el resto
del contenido (.page-content) sube por encima al hacer scroll, tapándolo poco a
poco — y al subir de vuelta, se destapa. .hero-spacer reserva el espacio que el
hero dejó de ocupar en el flujo normal al volverse fixed. Solo en desktop: en
mobile el hero vuelve a comportarse normal (ver media query abajo). */
/* Fondo terracota (no oro) — es el tono de tu marca con luminosidad real de "naranja",
por eso aguanta texto blanco encima, igual que Olam sobre su naranja.
align-items:flex-start (no "center"): con "center", en pantallas de poca
altura (o con el mensaje más largo de los 3, que ocupa más renglones) el
bloque de texto se centraba verticalmente en el 100vh completo, y ese
centrado podía llegar a empujar el título POR ENCIMA del header — se
veía pegado/encimado con la barra de navegación. Con flex-start, la
posición del texto la controla solo el padding-top de .hero-inner (fijo,
pensado para el header más alto posible), así el título siempre arranca en
el mismo punto seguro sin importar la altura de pantalla ni cuántos
renglones tenga cada mensaje. */
.hero{
position:fixed; top:0; left:0; right:0; z-index:0;
height:100vh; min-height:560px; display:flex; align-items:flex-start;
background:var(--terracotta); overflow:hidden; color:var(--cream);
}
.hero-spacer{ height:100vh; min-height:560px; }
.page-content{ position:relative; z-index:1; background:var(--cream); }
/* Curva real tipo "S", calcada de tu boceto (plana arriba, cae fuerte en medio,
plana abajo) — un solo border-radius circular NUNCA puede lograr esa forma
(una elipse gigante siempre sigue curveando, nunca se aplana). Se necesita un
clip-path con una curva bézier real: el con el path está al final
del del HTML (objectBoundingBox, así escala con el tamaño de la caja).
El área que queda VISIBLE (foto) es todo lo que está a la izquierda/abajo de
esa curva — arriba del todo casi no se ve foto, se va abriendo hacia abajo. */
/* top fijo en 134px (el alto del header EXPANDIDO, con la barra de utilidad
arriba) a propósito, ya no usa --header-h. Antes usaba esa variable, que
main.js actualiza en vivo cuando el usuario hace scroll (134px -> 82px al
comprimirse el header) — eso hacía que la foto (y el título, ver
.hero-inner) se movieran/reacomodaran en el momento exacto en que el header
se comprime, un "salto" visible confirmado con video real comparando contra
el sitio de referencia (Olam: ahí el header se comprime SOLO, sin mover el
Hero de abajo para nada). El header ya va encima con position:fixed y más
z-index, así que no hace falta que el Hero reaccione a su alto — con top
fijo en el alto MÁXIMO del header, nunca hay traslape (el caso ya cubierto
antes) y el Hero se queda perfectamente quieto sin importar si el header
está expandido o comprimido. */
/* Ya NO tiene clip-path aquí (ver .hero-photo-mask más abajo para el porqué):
.hero-photo ahora es un rectángulo normal sin recortar, la curva se pinta
con una forma sólida ENCIMA en vez de recortar la foto por debajo. */
.hero-photo{
position:absolute; z-index:0;
left:0; right:0; top:134px; bottom:0;
}
/* Corregido con evidencia de video real, esta vez viendo el momento exacto de la
transición cuadro a cuadro: NO es fundido (nunca hay dos fotos translúcidas
encimadas) y NO es deslizamiento de carrete. Es un WIPE opaco — la foto nueva
entra cubriendo a la vieja desde un lado (izquierda en unos mensajes, derecha
en otros), con un borde limpio que barre hasta cubrir el 100%. Las fotos se
apilan todas en el mismo sitio; la que "entra" sube de z-index y se revela con
un barrido animado; las demás se quedan abiertas y opacas debajo, sin animar.
Antes esto se hacía con clip-path (inset animado), y antes de eso con
translateX (transform). Ambas veces medí con getComputedStyle en el navegador
de pruebas y SÍ interpolaba bien cuadro a cuadro — pero en video real de la
usuaria, en su equipo, seguía viéndose como un corte instantáneo con las dos
versiones. La causa real: .hero-photo-slide vive ANIDADO dentro de
.hero-photo, que tenía su propio clip-path:url(#heroCurve) (un
SVG). Chromium no acelera por GPU ese tipo de clip-path, y ESO también le
quita la aceleración a cualquier transform animado en sus hijos — no importa
qué propiedad se anime por dentro, mientras el padre recorte con un SVG
clip-path, todo el subárbol se pinta por software en cada cuadro. La única
forma real de arreglarlo es sacar el clip-path del padre por completo (ver
.hero-photo-mask): así .hero-photo-slide ya no tiene ningún ancestro
recortado y el navegador sí puede darle su propia capa acelerada. */
.hero-photo-track{ position:absolute; inset:0; overflow:hidden; }
.hero-photo-slide{
position:absolute; inset:0; overflow:hidden; z-index:0;
transform:translateX(-100%);
transition:transform 1.15s cubic-bezier(.65,0,.35,1);
}
.hero-photo-slide.alt{ transform:translateX(100%); }
.hero-photo-slide.active{ transform:translateX(0); }
.hero-photo-track img{
width:100%; height:100%; object-fit:cover;
animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06) translate(-1%,-.6%); } }
/* Matiz leve en una esquina — la foto se queda brillante, a la par del color de fondo. */
.hero-photo::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(200deg, rgba(11,43,32,.16), rgba(11,43,32,0) 45%);
}
/* Capa de primer plano — placeholder. Aquí es donde van tus fotos recortadas (sujeto sin
fondo, PNG con transparencia). Crossfade puro, sincronizado con la foto de fondo —
sin ningún elemento aparte cruzando la pantalla (confirmado: Olam no usa eso). */
.hero-fg{
position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
background:linear-gradient(0deg, rgba(6,21,15,.18), rgba(6,21,15,0) 30%);
transition:opacity 1.4s ease;
}
.hero-fg.active{ opacity:1; }
/* Pinta la curva como forma SÓLIDA encima de la foto, en vez de recortar la
foto por debajo con clip-path (ver nota larga en .hero-photo-track sobre por
qué eso rompía la animación del barrido). Es la silueta INVERSA de la curva
original (el lado naranja/fondo, no el lado de la foto), del mismo color de
fondo del Hero — visualmente es IDÉNTICA al recorte de antes (mismo path,
solo que relleno en vez de usado como máscara), pero como es una forma
estática que nunca cambia, el navegador la pinta una sola vez; no vuelve a
tocarla en cada cuadro de la animación de las fotos de abajo.
width/height:100% explícitos, a propósito: con solo inset:0, un