/* SportBite. Mundo: vendaje y cinta deportiva.
   Azul de la marca como tela, cinta blanca rasgada para los controles, tinta de marcador para las notas. */

@font-face { font-family: "Saira"; src: url("/fonts/saira.woff2?v=8285675ae5") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Saira Display"; src: url("/fonts/saira-display.woff2?v=b0281d427c") format("woff2"); font-weight: 600 900; font-stretch: 50% 75%; font-style: italic; font-display: swap; }
@font-face { font-family: "Marcador"; src: url("/fonts/marcador.woff2?v=4884fec2c7") format("woff2"); font-display: swap; }

:root {
  --azul: oklch(0.4777 0.1394 255.33);
  --azul-hondo: oklch(0.3698 0.1136 256.81);
  --azul-vivo: oklch(0.5596 0.1561 255.33);
  --tinte: oklch(0.9513 0.0165 253);
  --tinte-2: oklch(0.8958 0.0334 253);
  --blanco: oklch(0.9914 0.0024 247);
  --cinta: oklch(0.9778 0.0036 247);
  --tinta: oklch(0.1793 0.0129 265);
  --tinta-2: oklch(0.3829 0.0261 260);
  --sobre-azul: oklch(0.9406 0.0204 253);
  --linea: oklch(0.8778 0.0163 253);
  --error: oklch(0.5125 0.1838 27);
  --foco: oklch(0.8519 0.1742 92);

  --gutter: clamp(16px, 4vw, 56px);
  --ancho: 1320px;
  --seccion: clamp(56px, 8vw, 116px);

  --z-fondo: 0;
  --z-contenido: 1;
  --z-escena: 2;
  --z-cabecera: 30;
  --z-aviso: 40;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mov: cubic-bezier(0.77, 0, 0.175, 1);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-t3: clamp(1.75rem, 3vw, 2.5rem);
  --fs-t2: clamp(2.5rem, 5.6vw, 4.5rem);
  --fs-t1: clamp(3rem, 7.2vw, 6rem);

  /* extremos rasgados de la cinta: máscaras alfa generadas en tools/texturas.mjs */
  --rasgado-a: url("data:image/webp;base64,UklGRrYBAABXRUJQVlA4TKkBAAAvI8AbEAoJjSRJksQftd3XrU5HkLfZ//7DgWTbtPVsftu2bds2YtsIbdu2nRmRbWQ29wTsMzQDycbB1y8emSTWZUHEBaCusNILxq+gtkALBHBeweIUEl5y9Dk4ntpdW/f5KxMB9jf4ZOsCPkBAwgXEgQK2xPJPrOTEuk+syjFkXCSoMuZge+hZZmKFzECj4iJKgRZTDrztTbwUlFh/BWwXIHeFNZEwW5B+AwgEqbMTKkmRTvNg4tl0QMV9/crhBUhdYdf+FDoJBjyEaZz6N4uEs4Kbm7N/378xXFB6AVJX+CnYBEPIVPn6AsP7T9mJv2UmHjUklBc833eYxGlzECJBribw8b/+dnTfv7GQkFzQd4W1XLAGChQSNqdQyLEXpumm/rZcIHcFawk9BUagsL4KlK6w0hMLmdh1kNj1llhziaWSWGkJZQUbF0C5graEgwCp+/wNws0h3eQDkZuDveF/sE3sOkrsrtbELuzcf+zEqDHjKlSMmZFnAwWNV1h3CbMFXldY/wXJFyAPCmu9QPMK+1NAuAFUAhQYcBAgXLpCjRMvsSY8JGR9AwA=") left center / auto 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 18px) 100% no-repeat, url("data:image/webp;base64,UklGRqABAABXRUJQVlA4TJMBAAAvI8AbEHVIiCTJkaTlT9pP/1TYA6gXZRYBBQAAwtHN3tu2bdtWsm3btm0n27ZtRtuaAP/PS9gfDtwdKzqksCMFmoLZr0e0buHwJowlHCSQJQQV7G3h5BXkbgF9AqRgYwsHVlD1AgrwBbMbMLoF0QUrWzjnCf0JsgkECfqJo5vYguHEyUwcVAJV4q8G2cI5MyaPGznQgKsX8MOBO/XyxPJhTZ8cXjQTLF7A9xOHs6ByCxITQhMUE0wShzthSiINqLk/++2IjoJrpqQxQYzd//12RH4Cc8JWQgV/9kyoEsWGDGyE2X474jhBKKE74TNhO8EgcZgKWrfAMWEtcWAFKRvw9AIK6AqkN+BnA4Y2IGrnUOyvPuMugS1hOXEG5fOghn7K6/7qM1YSd1I4UEQ7p3B//pTLxHFOuEkc9cRp/G2QCTDfHz+le+fM7a8+c9gSn/8XeG1BS4Jign3ioBJnNXGiEsedNWNqJPFiQDwjer+eOaV0yeJDDz911Pbz1EEV6G3BbUJGwr0IBpjmIPbzFLME5S8AAA==") right center / auto 100% no-repeat;
  --rasgado-b: url("data:image/webp;base64,UklGRrIBAABXRUJQVlA4TKUBAAAvI8AbEBbakSQpsi39pfYLC6dDgrrMzO/VR//7DwcAAAJNrtm2bdu2bdu2bdy2bdu2bdsTMLei9f/gFwDhYiBMjSUfaWeuckr4PQEPKxnGvCUp0LEPPwOCGCcFZnwl/9F+5KqpLfgpIN0C2QK3LSAvONnC2wThhI7EaCwAbWEsnoKMhQrX32pPXfacEJkYuYlxk1BzDDIyXP8xlH/qouLEiEnMn8RYSIyvAt0NQGxBaMDVPvhTwBip8vqwJ58afHv4wshIDCA2RmLP3ayqQH0L4zWAah/yPlMJZQVvG1C3ASMbwLkBB3vO/h68gVMCZmKYJDwlRmli3iT0JsZyYkwmRm4B4RZ8Jjgmnn5TgLoFm+fA9mHvkVr4sYXXCZUFihvAvAFWG6C9BYUFqltwmDB4Bgrin4Qofeco4MxVpIkZbUegvkeHizhlBmx4OjlxI+rESEpQTcw4TQyWxIycgr8NuN2C64SlAvkt8EpwT4yShNmC0y08S2ArkNwCSEL3AWjoSTB89leRbiv74HMr5ISGM1+Q/CREkYHOPXPRw55ztkevjL0jAA==") left center / auto 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 18px) 100% no-repeat, url("data:image/webp;base64,UklGRr4BAABXRUJQVlA4TLIBAAAvI8AbEHVIiiRJkqTmT1pn9sjONATxCZEIOAAAkG1SzLZt27Zt27Zt27Zt2/aVa7atCfB/G2SOr+hSJlkAG5rEMMEHebHy5ts7/9RWwD3vIM/5JZ9TWF6JXWnCuDGlShQrUqhPFjiHD3atJjAlMCcWZcHxByi4Tay4hEoZwrgwpogf3RvXH+Dfbwwn1ktirRdYTQFeweMERM47YXN4TdQc39E2397xmFiNCd96VEgRwJYmUYxwX6yEOb+1yydhN7FrP7G7sBK0C+anYChhtcB1CqgKaKewUBK7+qRzIInwFd359wPGc/gAdwE4BXgJ6wkr6kQyxgvjkQVlvCki/wD/vYZxjm/JmAKkAuF5p/IDfH1lV3vib34Jzgn+CXsJJwmzCVIJyQlXCYQJu/oUCGREBOkj7XP4AHrB+RQWckHXFBQk6Cf4JHwm7BhVJ0MgKyp4kUN4sWjm8B7TKZBMKEzY0C6VCyWMEB5pndN7WBKkCsqmIKKgbgrLqEB+Atym4DOxjhK7zBJ/O0wsrYSAgvEpLKOEqgTFgskpLJcCcAqLvSB3CiY0yRHGkTZR9G/8fIB/Aw==") right center / auto 100% no-repeat;
  --rasgado-c: url("data:image/webp;base64,UklGRpoBAABXRUJQVlA4TI0BAAAvI8AbEHVIiiRJkqThT1r3qpIKQxCfkI2AAgAAIedtG7Nt27Zt27Zt21az2ay2RdvtJmDfugN8vrsg1MUacn2jP6B/k5tBIEiFOS+xCjT7HtlH/QnpiV0zCQmJVTiFSI2vElNORyDQCFGgx5a3SOkjz7YTphLraAQShywDzsJkqgGMPMpO6E9cQnSB1BW8FLhegXZCTWK9D8BiEaPCiL0AiYrs3+C+9JzgkNh1mdglXWB4c6ru8zcYgMIu/gL7G5Nzk0+rqcDyCsQSy7Wg6gq0EsCJdT0CgUuBKS/xSnTdyDNuAk9B9BV2eSaefRbkXEF8glmCY4LzHDR+amz8j/3tuMDhCrITa7GgFFDQH3B8n76SfZ+/MpQQlDCdgE+ITKzCAuMrrJOE2YSuhNEE4YSyBGpiwRNrrUDxChCJVZigkxBX+H8jGGQY8RCnRJeFmWeZCYcFdVdYhwk3BVJX0FCwcgXbBSlXwJuQmGCbYJpAS9BLaC0wvcJKKOC9wiqbI8ZZgdm5XZgrrNvE6voMAA==") left center / auto 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 18px) 100% no-repeat, url("data:image/webp;base64,UklGRrgBAABXRUJQVlA4TKsBAAAvI8AbEJVIjCRJkaTTX2m/e+jpSgnyGeohAo4AAASUs21k27Zt27Zt23ZNTbZtG5PrBeYE+L/Op6fXfEkSzIUpNeI4YEdWf0/v4YwQn2CnCTIiREeolv2dN2tapHDBjdh7ARzfMt8ELwk+mrBKIggG+FPIixL8mOQ+veG1z284NqJLqUQ+zCnjg53YXfF9eGl3DUS8bzNCbITABDPCebNnRI0kXtQJ7f34hMAA2z29ZrVz+PvwCpU+vmIxQmOE0ohVHSE9AiyCV8SyiHAdsWgRHCOWWMSSiOAesZIiFjDCZQSNBG1N+B6xOBPcyxXLjz19CgT+g05Q6eE9402wFmE0Yv8k0GmCM32yuFFCmlr8PRwAS9ChQqZInixpkcIFP7F/enjPfRPWWMSPCFYRZiOYRSiPcBOx4BH/IuhGsIlgG+EtYjUnmGqCmz+i2VPGmlrS/egIUIDgHg4oTVDXAPKd49OHl3ZdRXzYUwSzBC2dU9mP32PY03v7M2J3VUdQGZLT81vOI5ZsBO8EJk1Y2ARpDXDbhP2egNaEzxHkEoSwoUUSG2oKtU+vIPYxAA==") right center / auto 100% no-repeat;
  --rasgado-d: url("data:image/webp;base64,UklGRpgBAABXRUJQVlA4TIwBAAAvI8AbEDVIaCRJkqThT9rumZnddATREXBo2zbtfCO2bdu2bdu2bduobNu20bKyky4jZwL2ERVL5Q7Ar79BhZcCY+6i5B69J5lgmPAQ0AMOv3B6RwzcvnH9FJheUWPCWaB4cP1CvPVdoP8URiAx9wWmoDCyCYOJ2U2YKTh/CibvUNEWo9PV2f+KEmYTAgvMQGEsCwTAFRrCNNkL9Xf11mhCR4JXQlVifhJ2CgafS+S4yDHiJkqeJoNWL16IzzoTKhP+C5hBgUxiUgvYnsK0XCCgxUGYHA3G7BSDyxfis4SEogSbgnxQsFiQBwr4C2xBYZwSHhIiClSfguiE9oTCBHRiVBI6E+OdGIPEvCZMJCYysTFNzExiGBO+jrBS4ewK/PYHXM/pB5sJzwmrCZSJ0UvAJeYnQSWAgThdKXfbYG/gMBGlwYqveEU+TrZhpStUnUVw9T+ZxPQVUIDC1CVkJsY0AZkYt4Lf50jOc/pBQGJDmXCQmPOE6MT0JVQlxjixuU9Md0JGgnKCf0LM7wA=") left center / auto 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 18px) 100% no-repeat, url("data:image/webp;base64,UklGRrQBAABXRUJQVlA4TKcBAAAvI8AbEJVQjCTZtRXhv9OJvO+csmDQYmA3Ag4EAASUt21/tm3bto3Ntt1k2zZXa7Nt19Y1Af4P25rnR3yb16VKilAOtIkh3liN8+qZ3cbiJHYXLrHrMrEqEiL4cWZBlxLxS6zmo1eczievaE8YTKAWOE1BccDZPD1mbwrG/2dBjyppguhwIBcUz/NDWBPwOgXHCd0JTYm1kpBRcDgFu4kVK4AtLeIogJeW+Dw/43dePWM9YTmxHBJfC2onoG8K4hNkClqmsBCJ3TWb+NBpQnrCcsJMwecESE/g1wTE8GRAAv6SyHn1DL/E/kss08R6SOxqTXyUfoJcgejckzqfvOB2Hp4yO89PyJnXT6yEgrEp7NeCQ9liBHFmQpUoGviNNTEvH9GaEJ3QkVgGCdWJBU8AJRgkPCZ2l0Fid/0lpAtiRvrXtRXIjRV9yiRwEa+oeQP45BWiBeNTcJtALWidAvuE2oKBKcgTJ4QrU6rE0MCviJqnx+xPYQELFibgYgr7jw9l6Gvu5/kp3YmFK2icgqfE7gIlPiSd8JgwX5A3BWsF11PYz4Vv80kA") right center / auto 100% no-repeat;
  --rasgado-e: url("data:image/webp;base64,UklGRqIBAABXRUJQVlA4TJYBAAAvI8AbEHVIiCTJkST+qP3F7t50IMgX/R8BBQAAQs7b9s+2bdu2bdvemu1m27Zts7Et3QTsPUnAwV+M+clUa8juPbuNtCAtzs5tI5+YlgLqLUxZglJi/hKOE/NfYHwL85uYxQLhWxiPAstb4JQwVNB0C76P4CBFmy0/CQrV2jiy1yZuASXhMiG8QPQWJqfA6hawE/uXcFcQfwv/E7QSBBPzcAw3PYFKdB/7WUBiPhNcElwTdBMjdgYMFT9ZOqx4CNd25D3XxBgnpiwBndjmM2D0PvwCAS85BhwFGwY8/uK1r4SMBM/ENCRcJyY7MZwJIonRTcAWEG9hPgqwtzAXBca3AJUY7gRGAjVhNcE1Qf0QOhkmfKQo12nxzEvC99mvzGeANODhz8jcc0Lu859MdWJzlvjZeEDjffQD/ffgNmTi9LiKVWLm0GvMxLglYBKznnBxBgEXCaqMOfIXe+a9o8R0JIaWmNMjkGj4SNNgwpGfmCPvHSacJuwWTN5zeO7Tn+EssL0BubdgOSEnITsxfQl1CVsJz88B") left center / auto 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 18px) 100% no-repeat, url("data:image/webp;base64,UklGRqABAABXRUJQVlA4TJMBAAAvI8AbEHVIbBtJkqT232ne21MlnAF5T+IioAAAYEias30Rb9u2bdv2J9v/yWq2bdu2bUROgP/Tfuf1sZWR0M2PJWV8KLfEz9tzghLLuSBsCsoSS6DgbgrrNqEh4TuhmhFlwpiItxbjAT+/4ThhPbGrMrGrSrZwtlRw3fE7Pz4lVzhr8pggD7hEet6fWrDEmkhwT2hL2E0oS4gueJ2Cx8TiSthIEEpwKuibgqzESi9ImYL4gusprMAEeMHAAwq0EpwCJoSxo04A5dYymw8PreHEKkvsrtHE7koskHvAHQLz/pCJKSzRAqsJKJiAIKYk0O+t8vn0zO46SvxUaMHdFOQkFmdB/wQETEEiT9p4Ya7hmh9fwTeB/xMQMwXaCb4JzglfCVuJXdyJlZdY6omVIYobYwp4L8mfH17hOz+9IikBXxA1BZ8F7hMwNwErWv4JZkwY7pK4eX0Kfe4xmE/P0EyYSThL7DpNSE7AJv4VLE3BjhHVckVxpEEA+QrWfHiG2xSEFjAeUFCcWH6/jJWdWJaJhXkHAA==") right center / auto 100% no-repeat;
  --rasgado-f: url("data:image/webp;base64,UklGRpIBAABXRUJQVlA4TIYBAAAvI8AbEA5IjSRJkvijttmrt9MR5C/7338oAAAYks62bd/btm3btp2U7Lbx/dFGs+3/yPZpJmAfcwLefra74mbQaTiLkKtJn9mZ39lcYdUOwGBTseYlUoZybYaAgYeqE/YL5EBBckJFwnmB1xX0FZhcYZ0UlF9BfmL9ByDv/SdLl2CZYEis24IioLDyE54SrhKMM8hEDBz5i5OjembR6HhIUKkHZGnmd/QraEpQFARe4QLEFyC9gIoL8L2CzsS6SNAn1lpilSSIE7vrM7FGE7uyE2syobtADRRkFPjcnIV7+4mIe/8vvTf517pOqE6oS6z8KUQ8GtY85BiwOfM3i8SujgRygeEK6yPhoODtCmu1cC//hyDBNqFxCo+NcMU6gamfhAlQwkGB5gqyEi4TQgqqrqAwYaLA5gJUV1hFifVX4H2F9TXHKFWvrbldk1cQmliLBVlAgVUCOqEh4ThBPYfCXQVobncFF8RfQUFCzQgaDRdR8rUaNOlw5E+IKxAnVlRB4RXcjwA=") left center / auto 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 18px) 100% no-repeat, url("data:image/webp;base64,UklGRqwBAABXRUJQVlA4TJ8BAAAvI8AbEJVIbiTJkaTVX2k72lPlEuRxkvuIgAMBANkoudpu37Zt27Zt27Y95m3bnIzNxqTNnAD/5z3Mwwuf+0rYM6dTjXRBbK+4mq/eAM4tHW/A81O74Alric85JJgUzE6Be4JeArqAZwLKp8CqwG3ueWVJEv7e2pvHx3ZZJ1ZbYlUmdhfxniwx/Dkypkoc1/sJ9m/A6ydYJCgn7CWYJtQlnCdsJLQkdCUWmAAlllaCQUJ0QljCtWyu5OGvLcy8eGipJzgkUBO7xBO7jhKLPfB7Hp4CzfMTDt+A108sZEJ3YjXzp48feG09zIuHdtkkdld1wdEU8BX0vAEFyQEm8/zU0k4YTSzjgqEJ0J97JObVM0oTu2tTu0op/FlSeYe/4m8eH1vUBIMEuYSBhMAEswSHhJfE0ilYVSpVKFemVIliQd1YzHl4zsQUll3iZ0JWglXB0xSWWoJAwewUPCbWSWLBCtinQL5gZQoKCyYn8HPu2WJNGTfELYnz8hGnieWW4JfgWrA8BVBirWmVw5sWrltM59Uzq1ezArG8mFMhiPwlAA==") right center / auto 100% no-repeat;
  --fin-rasgado: linear-gradient(#000, #000) left center / calc(100% - 16px) 100% no-repeat, url("data:image/webp;base64,UklGRrQBAABXRUJQVlA4TKcBAAAvI8AbEJVQjCTZtRXhv9OJvO+csmDQYmA3Ag4EAASUt21/tm3bto3Ntt1k2zZXa7Nt19Y1Af4P25rnR3yb16VKilAOtIkh3liN8+qZ3cbiJHYXLrHrMrEqEiL4cWZBlxLxS6zmo1eczievaE8YTKAWOE1BccDZPD1mbwrG/2dBjyppguhwIBcUz/NDWBPwOgXHCd0JTYm1kpBRcDgFu4kVK4AtLeIogJeW+Dw/43dePWM9YTmxHBJfC2onoG8K4hNkClqmsBCJ3TWb+NBpQnrCcsJMwecESE/g1wTE8GRAAv6SyHn1DL/E/kss08R6SOxqTXyUfoJcgejckzqfvOB2Hp4yO89PyJnXT6yEgrEp7NeCQ9liBHFmQpUoGviNNTEvH9GaEJ3QkVgGCdWJBU8AJRgkPCZ2l0Fid/0lpAtiRvrXtRXIjRV9yiRwEa+oeQP45BWiBeNTcJtALWidAvuE2oKBKcgTJ4QrU6rE0MCviJqnx+xPYQELFibgYgr7jw9l6Gvu5/kp3YmFK2icgqfE7gIlPiSd8JgwX5A3BWsF11PYz4Vv80kA") right center / auto 100% no-repeat;
  --orilla: url("data:image/webp;base64,UklGRugGAABXRUJQVlA4TNwGAAAvR8MGECZL17adth39/1/9NOY3vznntxAnb2y17LRs29rjtGLbtm1bLdtm2bZts2nbtm3btm3bttGyq2LbSauMe9SIrVbZ3CPOcf/7DwEBAIJN83bbz7b/bNtGtm3bzLaNbCMzW9n+BFgN/q+GppSqwlNolUz6r3JJzMUVRYyQ40RWJCnGRwmFSXJhCVQEyVESRn7QZjiCVHEhIoSZUdx0HIcPeUHk4REWRRAEIrvsCIcksgxARsUVxY5wjbxFMaQ+PQakDg1K0MwElJvU8oCIkuAhxnxDKkpPQD7SYXDyDEWVBYxgCEdoHrKuAgHhaBJQgcTlA8g5MmkgAviIzYf0yEB0qlG3SmaUv0OrOUZEGSkJJyJOGb5GilKQiNBzieBwHTsD4Tvw04KZacbjCRoqJiTZkDg8PiTUGLHLSaqCe+FBCMoqbPPIXhQuUeVYi78Wk5lQRPkw2TxsBVMuvi8ysaqdUjFkISyHBAC0J5e9XKguoj8bNowm5NCtdP9SPtL641SlCCSmeJx6jmB691OI34yh4FBDAplqHfSh/YNxa1ppChBLgcHnBklIAzPDA+xBKvyMytSkxkUelkxdmeklRvTnTk8GYamobkA5V1ohonrg7GZIdHX1A2iudp3oouzLrqdkkQSHSflSTB3eDcKSu5rVpqQVUhFvg4AIHIRQu/Wp1I7LpCMPQLe6xnkz/HVJdFOzr6QiGmsI1Zotpl5idbycgwhGAFvLVrM4v7CDjU/Ca5gdG8WioDM+6uedmo19JTPDj7Dwkrk2SPFVXzplXhNGl8Omhl3H5wmb0tCdtkSLvGNM3jS+sunSr7yi76ZilSsYWiVWD+dPQma4XgN6kqwJ+z/6/M+bfPTrIKYkBM3jKVJTGNETHp3kX/e7kvTGHP5RWWkEQDshrTLxG2QCX1HF1wNyzuEj/ftEpPMOnOGgUoCHiPYRpvwkdZK9ruSNmSm8eWnai7ww4GYPwVvnky8Q+f7Fm/Fa7DVNRFb5YYLxO68b3yFJfLORiX+a7kF5CY4NGtbNblq+ytfj2p45UZ+vwEzUyQSbeHrSnv4qMnYc/+x5RzxvAX6XHg7xyUspk9+B5CfV2MSu63zi9KR58X+lcINNFxCeCfy+p5WkJ3Wi2iY6sQdm1uKqcaR09p+3Hvmc5B/1/Ufg3yMZPspje5x6G1BW65qWXHMkagj3yGVCObB24p/jUksmjzAztbqY1Mzu4QAzQVclVmvhxBsJPkGYm95HB0Dt+B1AqsvAIwDXPPOMeBN1Asso8MCdgIZ+bPavHSI7aJzQ1ePzsP8QP598f/2iA7/0H+DgA866is9DADMiUhn+uFQekF0k3cwDjky2ywxuF3wV6HSPS6RzBUfbb5l++tIjn/Diq77qb/pilbh3OLZPYwdlDolz9G5/+PP0bqIj0v8QZhIm/aWSiF+jAI8AuEWSFbb/CJL59sQNDY//9C36XBSomNYNrvYaad+iR6BsSVl9E/r6c9X8nD3KX3RcfO/FMffoeY+yo7Pqga07Pne33r9uthKe2poxhANPirdeN32WmZEJZn8hfjkzPPBd8zYXXt/nx4lkFnlTx17f9dGKWc8EvpNXxl/gHSclxUd8DHS3yEfIxVVjSo5O+o3NPv61VvptY895Tv8AuxgDU7lrQr4c7m0jtxjyFn5YRbvEn0hYstRfGpKruMxwkMIeJPxbq0KyOT7CtElUTbb7VCTLtwzsNTze20c0Yc868dXMrH1SP2rkCSMyZWWcB99tYNfGcZL66UnJ56VH1kDnUwPo7Cv4T+j34+X6jaz7Oa/fkfzIx5w9Kwnh+5VFPLTr5Vz/lI76S5FfjDBXP2OdN9hB3KxbRhZlSeqBzUPwpa5fZpePjxr5AgG/gNw9afv7XQp4lZmIa5717DGckZRfdYNk27r2IMUJAZpr6HCPiUcnt//TSFzXJDzrgaf8LjMCr5trJzKcvOcl6ibhVxdBURuOzbrXMfv6pkrsmkL9IY9HtQvcbMYrlMLFxzez533pXT2/5W+kfJnWUznzIi2aXZAGSfqqV11qnz9A76R59I2/Oub7AI5qZg8r2ZYsb+JDDs439pUqH7AbVxi58DCxWc0U1vN+CGCfH7qyvE/M5lvWLEIzw3Etsiz9iJk9iJ+SB68Wk3/X7J6CvrprSv3gv+pDjk7G96v7Y9+f8RbvGtjncOAaTZGr75q9QbJ+Q+TYAy/Ge3KhoNfeLgX69F0aH8mENVeS1pUwaQBU3uFBkS6vQsYVNTUhefK4/e7S5U2+mYcK/jyRy5Cz7zn9hA3ucWAz5Y+/Onm/7GlPvBNVqg5PiP0Tf68nnZ4qfc//ifXvRw3+ry5j");

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Página plana, como pidió Diego: sin zoom, sin movimiento a los lados. Si el navegador deja ver algo detrás, es azul de marca, no blanco. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--azul); overflow-x: hidden; width: 100%; touch-action: pan-x pan-y; overscroll-behavior-x: none; }
body { margin: 0; width: 100%; max-width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--blanco); color: var(--tinta); font-family: "Saira", system-ui, sans-serif; font-size: var(--fs-base); line-height: 1.55; font-weight: 400; overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-x pan-y; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; min-width: 0; }
.pie { flex: none; }
img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 0; box-shadow: 0 0 0 6px var(--tinta); border-radius: 3px; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -80px; z-index: var(--z-aviso); background: var(--blanco); padding: 10px 16px; border-radius: 8px; }
.saltar:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.ico-caja { display: inline-flex; flex: none; }
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }

/* Títulos: Saira condensada e itálica, como el lema del logo */
.t1, .t2, .t3 { font-family: "Saira Display", "Saira", sans-serif; font-style: italic; font-stretch: 58%; font-weight: 800; line-height: 0.98; letter-spacing: -0.012em; text-wrap: balance; text-transform: uppercase; }
.t1 { font-size: var(--fs-t1); }
.t2 { font-size: var(--fs-t2); }
.t3 { font-size: var(--fs-t3); line-height: 1.02; }
.parrafo { max-width: 62ch; text-wrap: pretty; }

/* Tela: campos de color de marca con trama real */
.tela, .tela-honda { background-blend-mode: soft-light, normal; background-size: 1200px auto, 135px; color: var(--blanco); }
.tela { background-color: var(--azul); background-image: url("/img/textura/pliegues.webp?v=c9b6404cdc"), url("/img/textura/tela-azul.webp?v=e6d572b22d"); }
.tela-honda { background-color: var(--azul-hondo); background-image: url("/img/textura/pliegues.webp?v=c9b6404cdc"), url("/img/textura/tela-honda.webp?v=e2e2ef9d21"); }
.tela-negra { background: var(--tinta) url("/img/textura/tela-negra.webp?v=40f9b1271a") 0 0 / 135px; color: var(--blanco); }

/* Orilla: la tela no termina en línea recta, termina deshilachada sobre lo que sigue */
.orilla-arriba::before, .orilla-abajo::after { content: ""; position: absolute; left: 0; right: 0; height: 15px; z-index: 4; pointer-events: none; background: inherit; background-blend-mode: inherit; background-position: 0 100%; -webkit-mask: var(--orilla) repeat-x 0 0 / 420px 100%; mask: var(--orilla) repeat-x 0 0 / 420px 100%; }
.orilla-arriba::before { top: -14px; }
.orilla-abajo::after { bottom: -14px; scale: 1 -1; }

/* Cinta deportiva: botones, campos y rótulos. El borde rasgado va en el ::before para que el foco no se recorte. */
.cinta {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0.55em 1.5em; font-family: "Saira Display", "Saira", sans-serif; font-style: italic; font-stretch: 62%; font-weight: 800; font-size: 1.375rem;
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--tinta); cursor: pointer;
  transition: transform 160ms var(--ease-out); filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.22)) drop-shadow(0 7px 12px oklch(0 0 0 / 0.2));
}
.cinta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); }
.cinta:nth-of-type(2n)::before { -webkit-mask: var(--rasgado-d); mask: var(--rasgado-d); }
.cabecera .cinta::before { -webkit-mask: var(--rasgado-e); mask: var(--rasgado-e); }
.cabecera.solida .cinta { color: var(--blanco); }
.cabecera.solida .cinta::before { background: var(--azul) url("/img/textura/tela-azul.webp?v=e6d572b22d") 0 0 / 135px; }
.cinta:active { transform: scale(0.97); }
.cinta[disabled], .cinta[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.cinta-negra { color: var(--blanco); }
.cinta-negra::before { background: var(--tinta) url("/img/textura/cinta-negra.webp?v=3070132992") 0 0 / 80px; }
.cinta-azul { color: var(--blanco); }
.cinta-azul::before { background: var(--azul) url("/img/textura/tela-azul.webp?v=e6d572b22d") 0 0 / 135px; }
.cinta-ancha { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .cinta { transition: transform 160ms var(--ease-out), filter 160ms ease; }
  .cinta:hover { transform: translateY(-2px); filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.22)) drop-shadow(0 11px 16px oklch(0 0 0 / 0.26)); }
  .cinta:active { transform: scale(0.97); }
}

/* Rótulo: trozo de cinta con nota a marcador */
.rotulo { position: relative; isolation: isolate; display: inline-block; padding: 0.42em 1em 0.36em; font-family: "Marcador", "Saira", cursive; font-size: 1.0625rem; line-height: 1.1; color: var(--tinta); transform: rotate(-1.4deg); filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.22)); }
.rotulo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); }

/* Enlaces de texto: subrayado de marcador */
.enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-underline-offset 160ms var(--ease-out); }
p .enlace { display: inline; min-height: 0; }
@media (hover: hover) and (pointer: fine) { .enlace:hover { text-underline-offset: 0.34em; } }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-weight: 600; text-decoration: none; }
.enlace-flecha .ico { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .enlace-flecha:hover .ico { transform: translateX(4px); } }
.enlace-accion { display: inline-flex; align-items: center; gap: 0.4em; min-height: 36px; font-size: var(--fs-sm); font-weight: 600; color: var(--azul); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; cursor: pointer; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.marca-sb { width: 42px; height: auto; }
.marca-palabras { display: flex; gap: 3px; align-items: center; }
.marca-sport { width: 66px; height: auto; }
.marca-bite { width: 52px; height: auto; color: var(--azul); }
.sobre-azul .marca-bite, .cabecera:not(.solida) .marca-bite { color: inherit; }

/* Cabecera */
.cabecera { position: fixed; inset: 0 0 auto; z-index: var(--z-cabecera); color: var(--blanco); transition: transform 240ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.cabecera-fila { display: flex; align-items: center; gap: 22px; min-height: 66px; width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.cabecera.solida { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 0 var(--linea), 0 8px 20px oklch(0.25 0.06 255 / 0.08); }
.cabecera.escondida { transform: translateY(-100%); }
.cabecera:focus-within { transform: none; }
.cabecera.solida .marca-bite { color: var(--azul); }
.nav { display: none; margin-left: auto; gap: 4px; align-items: center; }
.nav a { padding: 8px 12px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; border-radius: 6px; transition: background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: oklch(0.5 0.1 255 / 0.16); } }
.cabecera-acciones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (max-width: 359px) {
  .cabecera-fila { gap: 8px; }
  .marca { gap: 7px; }
  .marca-sb { width: 36px; }
  .marca-sport { width: 54px; }
  .marca-bite { width: 43px; }
  .cabecera-acciones { gap: 0; }
}
.cabecera .cinta { font-size: 1.125rem; min-height: 42px; padding: 0.4em 1.15em; display: none; }
.icono-boton { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 44px; min-height: 44px; border-radius: 10px; color: inherit; transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.icono-boton:active { transform: scale(0.94); }
.icono-boton[disabled] { opacity: 0.35; cursor: default; }
.icono-boton .ico { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .icono-boton:not([disabled]):hover { background: oklch(0.5 0.1 255 / 0.14); } }
.bolsa-cuenta { position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding-inline: 5px; border-radius: 10px; background: var(--tinta); color: var(--blanco); font-size: 0.75rem; font-weight: 700; line-height: 19px; text-align: center; }
.cabecera:not(.solida) .bolsa-cuenta { background: var(--blanco); color: var(--tinta); }
@media (min-width: 980px) {
  .nav ~ .cabecera-acciones { margin-left: 0; }
  .nav { display: flex; }
  .cabecera .cinta { display: inline-flex; }
  #abrir-menu { display: none; }
}

/* Hojas: bolsa y menú */
html:has(dialog[open]) { overflow: hidden; }
dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: oklch(0.15 0.03 255 / 0.55); }
.hoja { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(100vw, 480px); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--blanco); color: var(--tinta); box-shadow: -18px 0 40px oklch(0 0 0 / 0.2); }
.hoja[open] { display: flex; flex-direction: column; animation: entrar-lado 240ms var(--ease-out); }
@keyframes entrar-lado { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--linea); }
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 8px 20px 20px; overscroll-behavior: contain; }
.hoja-pie { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); display: grid; gap: 12px; }
.hoja-pie:empty { display: none; }
.bolsa-precio { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); color: var(--tinta-2); }
.bolsa-precio strong { color: var(--tinta); }
.bolsa-vacia { display: grid; gap: 18px; justify-items: start; padding-block: 24px; }
.filas { display: grid; }
.fila { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--linea); }
.fila:last-child { border-bottom: 0; }
.fila-mini { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--tinte); display: flex; align-items: center; justify-content: center; color: var(--azul); }
.fila-mini-vacia .ico { width: 26px; height: 26px; }
.fila-datos h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.fila-colores { font-size: var(--fs-sm); color: var(--tinta-2); }
.fila-detalle { font-size: var(--fs-xs); color: var(--tinta-2); margin-top: 2px; overflow-wrap: anywhere; }
.fila-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 10px; }
.contador .icono-boton { min-width: 40px; min-height: 40px; }
.contador output { min-width: 26px; text-align: center; font-weight: 600; }
.fila-impresion { margin-top: 12px; padding: 12px; background: var(--tinte); border-radius: 10px; display: grid; gap: 6px; }
.fila-impresion legend { float: left; width: 100%; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.3; min-height: 32px; cursor: pointer; }
.opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--azul); margin: 1px 0 0; }
.sugerencias { display: grid; gap: 8px; padding-top: 12px; }
.sugerencia { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1.5px dashed var(--tinte-2); border-radius: 10px; font-weight: 600; font-size: var(--fs-sm); color: var(--azul); transition: border-color 150ms ease, transform 160ms var(--ease-out); }
.sugerencia:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .sugerencia:hover { border-color: var(--azul); } }

.menu { position: fixed; inset: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; color: var(--blanco); }
.menu[open] { display: flex; flex-direction: column; animation: entrar-fundido 180ms var(--ease-out); }
@keyframes entrar-fundido { from { opacity: 0; } to { opacity: 1; } }
.menu-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 11px var(--gutter); }
.menu-lista { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px var(--gutter); }
.menu-lista a { font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 58%; font-weight: 800; font-size: clamp(2.4rem, 12vw, 3.6rem); line-height: 1.1; text-transform: uppercase; text-decoration: none; }
.menu-lista small { display: block; font-family: "Saira", sans-serif; font-style: normal; font-stretch: 100%; font-weight: 400; font-size: var(--fs-sm); text-transform: none; line-height: 1.3; color: var(--sobre-azul); margin-bottom: 10px; }
.menu-pie { padding: 12px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }

/* Escenarios 3D */
.escenario { position: relative; user-select: none; -webkit-user-select: none; }
.escenario-poster { position: absolute; inset: 0; transition: opacity 280ms ease; }
.escenario-poster img { width: 100%; height: 100%; object-fit: contain; }
.escenario-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 280ms ease; }
.escenario.en-vivo .escenario-lienzo { opacity: 1; }
.escenario.en-vivo .escenario-poster { opacity: 0; }
[data-arrastrar] { cursor: grab; }
.arrastrando { cursor: grabbing; }

/* Portada */
.portada { position: relative; overflow: clip; }
.portada-fija { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: 66px; overflow: clip; }
.portada-sb { position: absolute; z-index: var(--z-fondo); right: -7vw; top: 50%; width: min(96vw, 1180px); translate: 0 -46%; color: oklch(0.3693 0.1092 253.5 / 0.42); pointer-events: none; }
.venda { position: absolute; z-index: var(--z-fondo); left: -20vw; width: 140vw; height: clamp(52px, 8vw, 118px); pointer-events: none; }
.venda-a, .venda-c { background: url("/img/textura/venda-blanca.webp?v=7ffe0c65d6") 0 0 / auto 100% repeat-x; box-shadow: 0 16px 20px -6px oklch(0.15 0.06 255 / 0.5); }
.venda-a { top: 58%; rotate: -11deg; }
.venda-c { top: 67%; rotate: -5.5deg; }
.venda-b { top: 34%; rotate: 9deg; background: url("/img/textura/venda-honda.webp?v=a9c28740f7") 0 0 / auto 100% repeat-x; box-shadow: 0 18px 22px -6px oklch(0.12 0.06 255 / 0.6); }
.portada-escena { position: relative; z-index: var(--z-escena); flex: 1 1 auto; min-height: 220px; width: 100%; }
.portada-texto { position: relative; z-index: calc(var(--z-escena) + 1); padding-inline: var(--gutter); pointer-events: none; }
.portada-texto a { pointer-events: auto; }
.portada-texto .t1 span { display: block; }
.portada-sub { margin-top: 10px; font-size: var(--fs-base); line-height: 1.4; max-width: 34ch; color: var(--sobre-azul); }
.portada-accion { position: relative; z-index: calc(var(--z-escena) + 1); padding: 8px var(--gutter) calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.portada-form { display: grid; gap: 10px; }
.campo-cinta { position: relative; isolation: isolate; display: block; filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.22)) drop-shadow(0 7px 12px oklch(0 0 0 / 0.2)); }
.campo-cinta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); }
.campo-cinta input { width: 100%; min-height: 56px; padding: 8px 22px; border: 0; background: transparent; font-family: "Marcador", "Saira", cursive; font-size: 1.5rem; line-height: 1.1; color: var(--tinta); text-transform: uppercase; outline-offset: -5px; }
.campo-cinta input::placeholder { color: oklch(0.45 0.03 255); text-transform: none; opacity: 1; font-size: 1.25rem; }
.portada-enlace { justify-self: start; color: var(--blanco); min-height: 40px; display: inline-flex; align-items: center; }
.portada-nota { position: absolute; z-index: calc(var(--z-escena) + 1); pointer-events: none; }
.nota-giro { right: var(--gutter); bottom: 6px; transition: opacity 180ms ease; }
.nota-giro.usada { opacity: 0; }
.nota-escena { opacity: 0; }
.nota-1 { left: var(--gutter); bottom: 12%; }
.nota-2 { right: var(--gutter); top: 8%; }
.no-mov .nota-escena { display: none; }

@media (min-width: 900px) {
  .portada-fija { min-height: 100svh; padding-top: 66px; }
  .portada-escena { position: absolute; inset: 0 1vw 0 25vw; width: auto; }
  .portada-texto { padding-top: clamp(28px, 9vh, 104px); max-width: 720px; padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); }
  .portada-sub { font-size: var(--fs-lg); margin-top: 20px; max-width: 30ch; }
  .portada-accion { position: absolute; left: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); bottom: clamp(24px, 6vh, 64px); padding: 0; width: min(640px, 46vw); }
  .portada-form { grid-template-columns: 1fr auto; align-items: stretch; }
  .nota-giro { right: clamp(32px, 6vw, 96px); bottom: clamp(30px, 8vh, 80px); }
  .nota-1 { left: 12%; bottom: 16%; }
  .nota-2 { right: 10%; top: 18%; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .t1 { font-size: clamp(3rem, 6vw, 4.6rem); }
  .portada-texto { padding-top: 16px; }
}
.mov .portada { height: 132svh; }
@media (min-width: 900px) { .mov .portada { height: 170svh; } }
.mov .portada-fija { position: sticky; top: 0; height: 100svh; min-height: 0; }

/* Banda de marca: venda blanca que amarra la portada con lo que sigue */
.banda-caja { position: relative; z-index: 3; overflow-x: clip; margin-block: -22px; }
.banda-marca { width: 106vw; margin-left: -3vw; rotate: -1deg; background: url("/img/textura/venda-blanca.webp?v=7ffe0c65d6") 0 0 / auto 100% repeat-x; color: var(--tinta); box-shadow: 0 12px 16px -6px oklch(0.15 0.06 255 / 0.36); }
.banda-marca-texto { rotate: 1deg; width: min(100vw - 2 * var(--gutter), var(--ancho)); margin-inline: auto; padding-block: clamp(14px, 2.2vw, 26px); font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 62%; font-weight: 800; font-size: clamp(1.25rem, 2.5vw, 2.125rem); line-height: 1.12; text-transform: uppercase; text-wrap: balance; }

/* Selector */
.selector { padding-block: calc(var(--seccion) + 8px) var(--seccion); background: var(--blanco); }
.selector-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.selector-intro { margin-top: 12px; }
#selector-form { display: grid; gap: 22px; margin-top: 24px; }
.pregunta legend { font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; margin-bottom: 10px; padding: 0; }
.opciones { display: grid; gap: 8px; }
.opcion-cinta { position: relative; display: block; cursor: pointer; }
.opcion-cinta input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion-cinta span { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 52px; padding: 10px 20px; font-weight: 600; line-height: 1.25; transition: color 140ms ease, transform 160ms var(--ease-out); }
.opcion-cinta span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinte) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; background-blend-mode: multiply; -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); transition: background-color 140ms ease; }
.opcion-cinta:nth-child(2) span::before { -webkit-mask: var(--rasgado-e); mask: var(--rasgado-e); }
.opcion-cinta:nth-child(3) span::before { -webkit-mask: var(--rasgado-f); mask: var(--rasgado-f); }
.opcion-cinta input:checked + span { color: var(--blanco); }
.opcion-cinta input:checked + span::before { background: var(--azul); }
.opcion-cinta input:active + span { transform: scale(0.985); }
.opcion-cinta input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 0; box-shadow: 0 0 0 6px var(--tinta); }
@media (hover: hover) and (pointer: fine) { .opcion-cinta:hover input:not(:checked) + span::before { background: var(--tinte-2); } }

.resultado { position: relative; color: var(--blanco); padding: clamp(18px, 3vw, 32px); display: grid; gap: 8px; filter: drop-shadow(0 12px 18px oklch(0.2 0.06 255 / 0.22)); }
.resultado::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--azul); background-image: url("/img/textura/pliegues.webp?v=c9b6404cdc"), url("/img/textura/tela-azul.webp?v=e6d572b22d"); background-blend-mode: soft-light, normal; background-size: 1200px auto, 135px; }
.resultado { isolation: isolate; }
.resultado-sello { position: absolute; top: 12px; left: 14px; z-index: 2; }
.resultado-foto { height: clamp(170px, 26vw, 300px); position: relative; }
.resultado-foto picture, .resultado-foto img { width: 100%; height: 100%; object-fit: contain; }
.resultado .t2 { font-size: clamp(2.6rem, 5vw, 4rem); }
.resultado-linea { font-weight: 600; color: var(--sobre-azul); }
.resultado-razon { max-width: 46ch; }
.resultado-kit { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.resultado-acciones { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
@media (min-width: 900px) {
  .selector-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 76px); }
  .opciones { grid-template-columns: 1fr; }
}

.comparar { margin-top: clamp(40px, 6vw, 84px); }
.comparar .t3 { margin-bottom: 18px; }
.tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabla th, .tabla td { padding: 12px 10px; text-align: left; vertical-align: top; }
.tabla thead th { vertical-align: bottom; border-bottom: 3px solid var(--tinta); padding-bottom: 12px; }
.tabla-cabeza { display: grid; gap: 4px; text-decoration: none; }
.tabla-cabeza img { width: 100%; max-width: 220px; height: auto; aspect-ratio: 10 / 7; object-fit: contain; }
.tabla-nombre { font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 58%; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.25em; }
.tabla tbody th { font-weight: 600; font-size: var(--fs-sm); color: var(--tinta-2); }
.tabla tbody tr { border-bottom: 1px solid var(--linea); }
.tabla td { font-size: var(--fs-sm); line-height: 1.35; }
.tabla td strong { font-weight: 700; }
.tabla .destacada { background: var(--tinte); }
.tabla-rotulo { display: inline-block; font-size: 0.8125rem; margin-bottom: 6px; }
@media (max-width: 699px) {
  .tabla-rotulo { font-size: 0.75rem; padding-inline: 0.6em; }
  .tabla tr[data-fila="para"], .tabla tr[data-fila="ajuste"] { display: none; }
  .tabla, .tabla thead, .tabla tbody { display: block; }
  .tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .tabla thead th:first-child { display: none; }
  .tabla thead th { padding: 4px 4px 10px; }
  .tabla tbody th { grid-column: 1 / -1; padding: 12px 4px 2px; }
  .tabla tbody td { padding: 2px 4px 12px; }
  .tabla td { font-size: 0.875rem; }
}
@media (min-width: 700px) { .tabla thead th:first-child { width: 19%; } }

/* Flex */
.flex-sec { position: relative; overflow-x: clip; }
.flex-fija { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: var(--seccion) 24px; width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.flex-escena { height: clamp(250px, 66vw, 460px); margin-inline: calc(-1 * var(--gutter)); }
.flex-datos { display: grid; gap: 6px; margin-top: 16px; }
.flex-datos li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.flex-datos .ico { margin-top: 0.28em; color: var(--sobre-azul); }
.flex-texto .parrafo { margin-top: 14px; color: var(--sobre-azul); }
.flex-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.flex-colores h3 { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; }
.flex-colores h3 span { font-weight: 400; color: var(--sobre-azul); }
.cintas-color { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--gutter) 10px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
.cintas-color::-webkit-scrollbar { display: none; }
.cinta-color { position: relative; isolation: isolate; flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 14px; color: var(--tinta); font-weight: 600; font-size: var(--fs-sm); transition: transform 160ms var(--ease-out); }
.cinta-color::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); transition: background-color 140ms ease; }
.cinta-color:nth-child(3n)::before { -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); }
.cinta-color:nth-child(3n + 1)::before { -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); }
.cinta-color:active { transform: scale(0.96); }
.cinta-color i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.18); flex: none; }
.cinta-color i.vidrio { background: linear-gradient(135deg, oklch(1 0 0), oklch(0.86 0.02 240) 55%, oklch(0.97 0.01 240)); }
.cinta-color[aria-pressed="true"] { color: var(--blanco); }
.cinta-color[aria-pressed="true"]::before { background: var(--tinta) url("/img/textura/cinta-negra.webp?v=3070132992") 0 0 / 80px; }
.flex-fotos { position: relative; margin-top: 4px; padding-block: 22px 26px; background: url("/img/textura/venda-blanca.webp?v=7ffe0c65d6") 0 0 / auto 100% repeat-x; color: var(--tinta); rotate: -1.2deg; width: 106vw; margin-left: -3vw; box-shadow: 0 14px 18px -6px oklch(0.15 0.06 255 / 0.4); z-index: var(--z-contenido); }
.flex-fotos-lista { display: flex; gap: clamp(12px, 3vw, 44px); overflow-x: auto; scroll-snap-type: x proximity; padding-inline: calc(3vw + var(--gutter)); scrollbar-width: none; rotate: 1.2deg; }
.flex-fotos-lista::-webkit-scrollbar { display: none; }
.flex-foto { flex: 0 0 min(62vw, 300px); scroll-snap-align: center; }
.flex-foto img { width: 100%; aspect-ratio: 5 / 3; object-fit: contain; }
.flex-foto figcaption { font-size: var(--fs-sm); font-weight: 600; margin-top: 6px; }
.flex-fin { height: clamp(36px, 6vw, 72px); }
@media (min-width: 900px) {
  .flex-fija { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.46fr); align-items: center; gap: clamp(16px, 2.4vw, 40px); }
  .flex-escena { height: min(66svh, 640px); margin-inline: 0; }
  .flex-colores { align-self: center; }
  .cintas-color { display: grid; gap: 6px; overflow: visible; padding: 0; margin: 0; }
  .cinta-color { justify-content: flex-start; width: 100%; }
  .mov .flex-pista { height: 320svh; }
  .mov .flex-fija { position: sticky; top: 0; height: 100svh; padding-block: 72px 24px; }
}

/* Capas */
.capas-sec { position: relative; overflow-x: clip; }
.capas-fija { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; padding-block: var(--seccion); gap: 16px; align-content: start; }
.capas-escena { position: relative; z-index: 1; height: clamp(280px, 78vw, 520px); margin-inline: calc(-1 * var(--gutter)); }
.capas-pasos, .capas-nota { position: relative; z-index: 1; }
.capas-fija { position: relative; }
.venda-capas { z-index: 0; top: 22%; left: -30vw; width: 160vw; height: clamp(58px, 9vw, 130px); rotate: -5deg; background: url("/img/textura/venda-blanca.webp?v=7ffe0c65d6") 0 0 / auto 100% repeat-x; box-shadow: 0 20px 26px -6px oklch(0 0 0 / 0.7); opacity: 0.94; }
.venda-frente { z-index: 2; opacity: 1; width: 62vw; transform-origin: 80vw 50%; background: none; box-shadow: none; filter: drop-shadow(0 8px 8px oklch(0 0 0 / 0.55)); }
.venda-frente::before, .venda-ficha::before { content: ""; position: absolute; inset: 0; background: url("/img/textura/venda-blanca.webp?v=7ffe0c65d6") 0 0 / auto 100% repeat-x; -webkit-mask: var(--fin-rasgado); mask: var(--fin-rasgado); }
@media (min-width: 900px) {
  .venda-capas { top: 71%; rotate: 7deg; }
  .venda-frente { width: 50vw; }
}
.capas-pasos { display: grid; gap: 40px; }
.paso-capa .parrafo { margin-top: 12px; color: oklch(0.86 0.01 255); }
.paso-capa .enlace-flecha { margin-top: 10px; }
.capas-reales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 24px var(--seccion); }
.capas-real img { width: 100%; max-width: 460px; max-height: 360px; object-fit: contain; object-position: left center; }
.capas-real figcaption { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.35; color: oklch(0.86 0.01 255); max-width: 40ch; }
.capas-nota { font-size: var(--fs-xs); color: oklch(0.78 0.01 255); }
.combos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip-claro { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; font-weight: 600; font-size: var(--fs-sm); color: var(--blanco); transition: color 140ms ease, transform 160ms var(--ease-out); }
.chip-claro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: oklch(0.34 0.012 262); -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); transition: background-color 140ms ease; }
.chip-claro:nth-child(2)::before { -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); }
.chip-claro:nth-child(3)::before { -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); }
.chip-claro:active { transform: scale(0.96); }
.chip-claro i { display: flex; }
.chip-claro i b { width: 14px; height: 20px; background: var(--c); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.25); }
.chip-claro[aria-pressed="true"] { color: var(--tinta); }
.chip-claro[aria-pressed="true"]::before { background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; }
.capa-rotulo { position: absolute; top: 0; left: 0; z-index: calc(var(--z-escena) + 1); pointer-events: none; font-size: 0.9375rem; white-space: nowrap; opacity: 0; will-change: transform; transition: opacity 180ms ease; }
.capa-rotulo.visible { opacity: 1; }
@media (min-width: 900px) {
  .capas-fija { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
  .capas-escena { height: min(74svh, 700px); margin-inline: 0; }
  .capas-nota { grid-column: 1 / -1; }
  .capas-reales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mov .capas-pista { height: 210svh; }
.mov .capas-fija { position: sticky; top: 0; height: 100svh; padding-block: 62px 12px; align-content: stretch; grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; }
.mov .capas-pasos { display: grid; gap: 0; }
.mov .paso-capa { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 200ms; }
.mov .paso-capa.activo { visibility: visible; opacity: 1; }
.mov .capas-escena { height: auto; min-height: 0; }
@media (min-width: 900px) {
  .mov .capas-pista { height: 300svh; }
  .mov .capas-fija { grid-template-rows: minmax(0, 1fr) auto; padding-block: 72px 16px; align-items: center; }
  .mov .capas-escena { height: min(78svh, 720px); }
}

/* Personalizador en la portada */
.estudio { position: relative; background: var(--blanco); overflow: clip; }
.estudio-fija { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; padding-block: var(--seccion); align-content: start; }
.estudio-escena { height: clamp(220px, 58vw, 460px); margin-inline: calc(-1 * var(--gutter)); }
.estudio-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.estudio-item { position: relative; isolation: isolate; padding: 10px 14px; transition: color 160ms ease; }
.estudio-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinte) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; background-blend-mode: multiply; -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); transition: background-color 160ms ease; }
.estudio-item:nth-child(2n)::before { -webkit-mask: var(--rasgado-d); mask: var(--rasgado-d); }
.estudio-item:nth-child(3)::before { -webkit-mask: var(--rasgado-f); mask: var(--rasgado-f); }
.estudio-item strong { display: block; font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 60%; font-weight: 800; font-size: var(--fs-lg); line-height: 1.1; text-transform: uppercase; }
.estudio-item span { display: block; font-size: var(--fs-xs); line-height: 1.3; margin-top: 2px; }
.estudio-item.activo { color: var(--blanco); }
.estudio-item.activo::before { background: var(--azul); }
.estudio-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.estudio-nota { font-size: var(--fs-xs); color: var(--tinta-2); max-width: 54ch; }
@media (min-width: 900px) {
  .estudio-fija { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 18px clamp(24px, 4vw, 64px); align-items: center; }
  .estudio-titulo { grid-column: 1; }
  .estudio-escena { grid-column: 2; grid-row: 1 / span 3; height: min(72svh, 660px); margin-inline: -10vw calc(-1 * var(--gutter)); z-index: 0; }
  .estudio-titulo, .estudio-lista, .estudio-cta { position: relative; z-index: var(--z-escena); }
  .estudio-lista { grid-column: 1; }
  .estudio-cta { grid-column: 1; }
  .estudio-item span { font-size: var(--fs-sm); }
}
.mov .estudio { height: 165svh; }
@media (min-width: 900px) { .mov .estudio { height: 240svh; } }
.mov .estudio-fija { position: sticky; top: 0; height: 100svh; padding-block: 70px 18px; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.mov .estudio-escena { height: auto; min-height: 0; }
@media (min-width: 900px) {
  .mov .estudio-fija { grid-template-rows: none; align-content: center; }
  .mov .estudio-escena { height: min(72svh, 660px); }
}

/* Galería */
.galeria { position: relative; padding-block: var(--seccion); background: var(--tinte); }
.galeria-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: clamp(20px, 3vw, 36px); }
.mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 8px; grid-auto-flow: dense; padding-top: 8px; }
.pieza { position: relative; min-width: 0; border-radius: 2px; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2vw, 28px); box-shadow: 0 8px 18px oklch(0.2 0.06 255 / 0.16); }
.pieza::before, .idea::before, .otra::before, .pedido-caja::before { content: ""; position: absolute; left: 50%; top: -11px; width: 84px; height: 24px; translate: -50% 0; rotate: -2deg; z-index: 3; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); pointer-events: none; }
.pieza:nth-child(2n)::before, .idea:nth-child(2n)::before, .otra:nth-child(2n)::before { rotate: 2.5deg; left: 42%; -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); }
.pieza:nth-child(3n)::before, .idea:nth-child(3n)::before, .otra:nth-child(3n)::before { rotate: -3.5deg; left: 58%; -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); }
.pieza picture { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pieza img { width: 100%; height: 100%; object-fit: contain; transition: transform 280ms var(--ease-out); }
.pieza .rotulo { position: absolute; left: 10px; bottom: 10px; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) { .pieza:hover img { transform: scale(1.03); } }
.pieza-tinta { background: var(--tinta) url("/img/textura/tela-negra.webp?v=40f9b1271a") 0 0 / 135px; }
.pieza-azul { background: var(--azul) url("/img/textura/tela-azul.webp?v=e6d572b22d") 0 0 / 135px; }
.pieza-blanca { background: var(--blanco) url("/img/textura/tela-blanca.webp?v=a76eb65850") 0 0 / 135px; }
.pieza-gris { background: oklch(0.8978 0.0072 250) url("/img/textura/tela-blanca.webp?v=a76eb65850") 0 0 / 135px; background-blend-mode: multiply; }
.p-6 { grid-column: span 6; aspect-ratio: 16 / 10; }
.p-3 { grid-column: span 3; aspect-ratio: 1 / 1; }
.p-2 { grid-column: span 3; aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 10px; }
  .p-a { grid-column: span 7; grid-row: span 2; aspect-ratio: auto; }
  .p-b { grid-column: span 5; aspect-ratio: auto; }
  .p-c { grid-column: span 5; aspect-ratio: auto; }
  .p-d { grid-column: span 4; aspect-ratio: auto; }
  .p-e { grid-column: span 4; aspect-ratio: auto; }
  .p-f { grid-column: span 4; aspect-ratio: auto; }
}
/* mosaicos de ficha, por cantidad de fotos: nunca queda un hueco */
.mosaico-2 .pieza:nth-child(1), .mosaico-4 .pieza:nth-child(1), .mosaico-5 .pieza:nth-child(1) { grid-column: span 6; aspect-ratio: 16 / 10; }
.mosaico-2 .pieza:nth-child(2) { grid-column: span 6; aspect-ratio: 16 / 10; }
.mosaico-4 .pieza:nth-child(n + 2):nth-child(-n + 3), .mosaico-5 .pieza:nth-child(n + 2) { grid-column: span 3; aspect-ratio: 1 / 1; }
.mosaico-4 .pieza:nth-child(4) { grid-column: span 6; aspect-ratio: 16 / 9; }
.mosaico-6 .pieza:nth-child(1), .mosaico-6 .pieza:nth-child(6) { grid-column: span 6; aspect-ratio: 16 / 10; }
.mosaico-6 .pieza:nth-child(n + 2):nth-child(-n + 5) { grid-column: span 3; aspect-ratio: 1 / 1; }
.mosaico-7 .pieza:nth-child(1) { grid-column: span 6; aspect-ratio: 16 / 10; }
.mosaico-7 .pieza:nth-child(n + 2) { grid-column: span 3; aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .mosaico-2 .pieza:nth-child(1) { grid-column: span 7; grid-row: span 2; aspect-ratio: auto; }
  .mosaico-2 .pieza:nth-child(2) { grid-column: span 5; grid-row: span 2; aspect-ratio: auto; }
  .mosaico-4 .pieza:nth-child(1) { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; }
  .mosaico-4 .pieza:nth-child(2) { grid-column: span 6; aspect-ratio: auto; }
  .mosaico-4 .pieza:nth-child(3), .mosaico-4 .pieza:nth-child(4) { grid-column: span 3; aspect-ratio: auto; }
  .mosaico-5 .pieza:nth-child(1) { grid-column: span 7; grid-row: span 2; aspect-ratio: auto; }
  .mosaico-5 .pieza:nth-child(2), .mosaico-5 .pieza:nth-child(3) { grid-column: span 5; aspect-ratio: auto; }
  .mosaico-5 .pieza:nth-child(4), .mosaico-5 .pieza:nth-child(5) { grid-column: span 6; aspect-ratio: auto; }
  .mosaico-6 .pieza:nth-child(1) { grid-column: span 7; grid-row: span 2; aspect-ratio: auto; }
  .mosaico-6 .pieza:nth-child(2), .mosaico-6 .pieza:nth-child(3) { grid-column: span 5; aspect-ratio: auto; }
  .mosaico-6 .pieza:nth-child(n + 4) { grid-column: span 4; aspect-ratio: auto; }
  .mosaico-7 .pieza:nth-child(1) { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; }
  .mosaico-7 .pieza:nth-child(2), .mosaico-7 .pieza:nth-child(3) { grid-column: span 6; aspect-ratio: auto; }
  .mosaico-7 .pieza:nth-child(n + 4) { grid-column: span 3; aspect-ratio: auto; }
}
.ideas { margin-top: clamp(32px, 5vw, 60px); }
.ideas .t3 { margin-bottom: 4px; }
.ideas-intro { margin-bottom: 14px; }
.ideas-carril { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 18px var(--gutter) 20px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
.ideas-carril::-webkit-scrollbar { display: none; }
.idea { position: relative; flex: 0 0 min(68vw, 300px); scroll-snap-align: center; background: var(--azul) url("/img/textura/tela-azul.webp?v=e6d572b22d") 0 0 / 135px; color: var(--blanco); border-radius: 2px; padding: 10px 14px 14px; text-decoration: none; display: grid; gap: 2px; transition: transform 200ms var(--ease-out); box-shadow: 0 8px 18px oklch(0.2 0.06 255 / 0.18); }
.idea img { width: 100%; aspect-ratio: 7 / 5; object-fit: contain; }
.idea strong { font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 60%; font-weight: 800; font-size: var(--fs-xl); line-height: 1; text-transform: uppercase; }
.idea span { font-size: var(--fs-sm); color: var(--sobre-azul); }
.idea:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .idea:hover { transform: translateY(-4px); } }
.ideas-nota { font-size: var(--fs-xs); color: var(--tinta-2); }

/* Kit y estuche */
.kit { position: relative; padding-block: var(--seccion) 0; overflow-x: clip; }
.kit-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.kit-texto .parrafo { margin-top: 14px; color: var(--sobre-azul); }
.kit-incluye { margin-top: 20px; display: grid; gap: 6px; }
.kit-incluye h3 { font-weight: 700; font-size: var(--fs-lg); }
.kit-incluye li { display: flex; gap: 10px; align-items: flex-start; }
.kit-incluye .ico { margin-top: 0.3em; color: var(--sobre-azul); }
.kit-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.kit-importante { margin-top: 18px; padding: 14px 16px; background: oklch(0.3 0.09 255 / 0.5); border-radius: 10px; font-size: var(--fs-sm); line-height: 1.45; max-width: 58ch; }
.kit-importante strong { color: var(--blanco); }
.pasos-kit-caja { position: relative; }
.pasos-kit { display: grid; gap: 18px; padding-left: 58px; }
.pasos-linea { position: absolute; left: 20px; top: 12px; bottom: 16px; width: 12px; background: oklch(0.3 0.09 255 / 0.45); border-radius: 2px; }
.pasos-linea i { display: block; height: 100%; background: oklch(0.9414 0.0112 250) url("/img/textura/tela-blanca.webp?v=a76eb65850") 0 0 / 135px; transform-origin: top; border-radius: 2px; }
.paso-kit { position: relative; font-size: var(--fs-lg); line-height: 1.3; font-weight: 500; }
.paso-kit b { position: absolute; left: -58px; top: -6px; width: 52px; height: 42px; display: grid; place-items: center; font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 60%; font-weight: 800; font-size: 1.5rem; color: var(--tinta); isolation: isolate; }
.paso-kit b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); }
@media (min-width: 900px) {
  .kit-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
}
.estuche { position: relative; margin-top: clamp(44px, 6vw, 84px); background: var(--blanco); color: var(--tinta); }
.estuche-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 28px; align-items: center; }
.estuche-foto { position: relative; border-radius: 2px; box-shadow: 0 8px 18px oklch(0.2 0.06 255 / 0.16); }
.estuche-foto::before { content: ""; position: absolute; left: 12%; top: -11px; width: 92px; height: 24px; rotate: -3deg; z-index: 2; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); filter: brightness(0.97); }
.estuche-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) {
  .estuche-fila { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; padding-block: 22px; }
  .estuche-foto img { aspect-ratio: 1 / 1; }
  .estuche-texto .parrafo { font-size: var(--fs-sm); line-height: 1.4; }
  .estuche-texto .kit-cta { gap: 2px 12px; }
  .estuche-texto .cinta { font-size: 1.125rem; min-height: 44px; padding-inline: 1em; }
  .mosaico .pieza { padding: 8px; }
}
.estuche-texto .parrafo { margin-top: 10px; }
.estuche-texto .kit-cta { margin-top: 14px; }
@media (min-width: 900px) { .estuche-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding-block: 40px; } }

/* Pedir y preguntas */
.pedir { padding-block: var(--seccion); background: var(--blanco); }
.pedir-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); }
.pedir-pasos { display: grid; gap: 14px; margin-top: 18px; }
@media (max-width: 899px) {
  .pedir-pasos { gap: 10px; margin-top: 12px; }
  .pedir-paso { align-items: center; }
}
.pedir-paso { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.pedir-paso b { display: grid; place-items: center; width: 44px; height: 38px; background: var(--azul) url("/img/textura/tela-azul.webp?v=e6d572b22d") 0 0 / 135px; color: var(--blanco); font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 60%; font-weight: 800; font-size: 1.375rem; -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); }
.pedir-paso h3 { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; }
.pedir-paso p { font-size: var(--fs-sm); line-height: 1.45; color: var(--tinta-2); }
.preguntas { display: grid; margin-top: 16px; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 58px; padding-block: 10px; font-weight: 600; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .ico { transition: transform 180ms var(--ease-out); flex: none; }
.preguntas details[open] summary .ico { transform: rotate(180deg); }
.preguntas details p { padding-bottom: 16px; max-width: 62ch; color: var(--tinta-2); font-size: var(--fs-sm); line-height: 1.5; }
@media (min-width: 900px) { .pedir-rejilla { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

/* Cierre */
.cierre { position: relative; overflow-x: clip; padding-block: var(--seccion); }
.cierre-sb { position: absolute; left: -6vw; top: 50%; width: min(90vw, 1000px); translate: 0 -50%; color: oklch(0.2529 0.0642 255 / 0.5); pointer-events: none; z-index: 0; }
.cierre-fila { position: relative; z-index: 1; }
.cierre-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
.cierre .parrafo { margin-top: 12px; color: oklch(0.86 0.01 255); }
.cierre-cta { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 22px; }
.cierre-foto img { width: 100%; max-width: 620px; margin-inline: auto; }
@media (min-width: 900px) { .cierre-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Pie */
.pie { background: var(--tinta); color: var(--blanco); padding-block: 40px calc(28px + env(safe-area-inset-bottom)); }
.pie-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.pie-rejilla > :first-child, .pie-rejilla > :last-child { grid-column: 1 / -1; }
.pie .marca-bite { color: var(--azul-vivo); }
.pie .marca { margin-left: -2px; }
.pie-lema { margin-top: 8px; color: oklch(0.82 0.01 255); font-size: var(--fs-sm); max-width: 32ch; }
.pie-col { display: grid; gap: 2px; align-content: start; }
.pie-col h3 { font-size: var(--fs-sm); font-weight: 600; color: oklch(0.82 0.01 255); margin-bottom: 4px; }
.pie-col a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .pie-col a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.pie-legal { margin-top: 26px; padding-top: 16px; border-top: 1px solid oklch(1 0 0 / 0.14); font-size: var(--fs-xs); color: oklch(0.82 0.01 255); display: grid; gap: 4px; }
@media (min-width: 700px) {
  .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .pie-rejilla > :first-child, .pie-rejilla > :last-child { grid-column: auto; }
}

/* Fichas de producto */
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); padding-block: 8px; color: var(--sobre-azul); }
.migas a { color: inherit; }
.ficha-portada { position: relative; overflow-x: clip; padding-top: 70px; }
.ficha-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: clamp(28px, 4vw, 56px); }
.ficha-escena { height: clamp(250px, 70vw, 560px); margin-inline: calc(-1 * var(--gutter)); position: relative; }
.ficha-foto { height: clamp(250px, 70vw, 520px); display: flex; align-items: center; justify-content: center; }
.ficha-foto picture, .ficha-foto img { width: 100%; height: 100%; object-fit: contain; }
.ficha-foto { position: relative; }
.ficha-pie { justify-self: start; margin-top: 6px; font-size: 0.875rem; max-width: 100%; }
.venda-ficha { position: absolute; z-index: 0; left: -60vw; right: 1%; top: 56%; height: clamp(46px, 7vw, 92px); rotate: -6deg; filter: drop-shadow(0 10px 12px oklch(0.15 0.06 255 / 0.42)); pointer-events: none; }
.ficha-escena .escenario-poster, .ficha-escena .escenario-lienzo, .ficha-foto picture { z-index: 1; }
.ficha-foto picture { position: relative; }
.ficha-texto .t1 { font-size: clamp(2.8rem, 6.4vw, 5.25rem); }
.ficha-linea { font-weight: 600; margin-top: 8px; color: var(--sobre-azul); }
.ficha-texto .parrafo { margin-top: 12px; color: var(--sobre-azul); }
.ficha-colores { margin-top: 18px; }
.ficha-colores h2 { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; }
.ficha-colores h2 span { font-weight: 400; color: var(--sobre-azul); }
.ficha-colores h3 { font-size: var(--fs-xs); font-weight: 600; color: var(--sobre-azul); margin-bottom: 4px; }
.ficha-colores .cintas-color { flex-wrap: wrap; overflow: visible; padding: 2px 0 8px; margin: 0; display: flex; gap: 6px; }
.ficha-colores .cinta-color { width: auto; min-height: 44px; padding-block: 4px; }
.ficha-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.ficha-nota { margin-top: 10px; font-size: var(--fs-sm); color: var(--sobre-azul); }
@media (min-width: 900px) {
  .ficha-rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 56px); align-items: center; min-height: calc(100svh - 80px); }
  .ficha-escena, .ficha-foto { height: min(76svh, 720px); margin-inline: 0; }
}
.ficha-info { padding-block: var(--seccion); background: var(--blanco); }
.ficha-info .kit-incluye .ico { color: var(--azul); }
.ficha-info-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
.datos { display: grid; margin-top: 12px; border-top: 3px solid var(--tinta); }
.datos div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--linea); }
.datos dt { font-weight: 600; font-size: var(--fs-sm); color: var(--tinta-2); }
.datos dd { font-size: var(--fs-sm); line-height: 1.4; font-weight: 500; }
@media (min-width: 900px) { .ficha-info-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ficha-fotos { padding-block: 0 var(--seccion); background: var(--blanco); }
.ficha-relleno { padding-block: var(--seccion); background: var(--tinte); }
.otras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; margin-top: 22px; }
.otra { position: relative; background: var(--blanco); border-radius: 2px; padding: 14px 12px 12px; text-decoration: none; display: grid; gap: 4px; transition: transform 200ms var(--ease-out); align-content: start; box-shadow: 0 8px 18px oklch(0.2 0.06 255 / 0.12); }
.otra img { width: 100%; aspect-ratio: 7 / 5; object-fit: contain; }
.otra strong { font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 60%; font-weight: 800; font-size: var(--fs-xl); line-height: 1; text-transform: uppercase; }
.otra span { font-size: var(--fs-sm); line-height: 1.3; color: var(--tinta-2); }
.otra:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .otra:hover { transform: translateY(-3px); } }
@media (min-width: 700px) { .otras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }

/* Pedido */
.pagina-simple { padding-top: 66px; }
.pedido { padding-block: clamp(24px, 4vw, 56px) var(--seccion); background: var(--tinte); }
.pedido-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 18px; }
.pedido-caja { position: relative; background: var(--blanco) url("/img/textura/tela-blanca.webp?v=a76eb65850") 0 0 / 135px; border-radius: 2px; padding: clamp(18px, 2.4vw, 26px); box-shadow: 0 8px 18px oklch(0.2 0.06 255 / 0.12); }
.formulario { display: grid; gap: 14px; }
.campo-grupo { display: grid; gap: 4px; }
.campo-grupo label { font-weight: 600; font-size: var(--fs-sm); }
.campo-tira { position: relative; isolation: isolate; display: block; filter: drop-shadow(1px 1px 0 oklch(0.52 0.03 255)) drop-shadow(-1px -1px 0 oklch(0.52 0.03 255)) drop-shadow(0 4px 7px oklch(0.2 0.06 255 / 0.14)); }
.campo-tira::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinta) url("/img/textura/cinta.webp?v=df38448713") 0 0 / 80px; -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); transition: background-color 140ms ease; }
.campo-grupo:nth-child(2n) .campo-tira::before { -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); }
.campo { display: block; width: 100%; min-height: 50px; padding: 10px 20px; background: transparent; border: 0; font-size: 1rem; }
.campo::placeholder { color: oklch(0.45 0.03 255); opacity: 1; }
.campo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
textarea.campo { min-height: 96px; resize: vertical; }
.campo-tira:has(.campo[aria-invalid="true"])::before { background: oklch(0.9 0.05 27); }
.campo[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: -2px; border-radius: 2px; }
.campo-error { color: var(--error); font-size: var(--fs-sm); font-weight: 500; }
.aviso-caja { padding: 12px 14px; border-radius: 10px; background: var(--blanco); border: 1.5px solid var(--tinte-2); font-size: var(--fs-sm); line-height: 1.45; }
.estado-ok { padding: 12px 14px; border-radius: 10px; background: var(--azul); color: var(--blanco); font-size: var(--fs-sm); line-height: 1.45; }
@media (min-width: 900px) { .pedido-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* Entradas: empiezan visibles y solo se animan cuando el JS las marca */
.entradas [data-entrada] { transition: clip-path 620ms var(--ease-mov), opacity 300ms ease, translate 480ms var(--ease-out); }
.entradas [data-entrada="cinta"] { clip-path: inset(-14% -4% -14% -2%); }
.entradas [data-entrada="cinta"]:not(.visto) { clip-path: inset(-14% 100% -14% -2%); }
.entradas [data-entrada="subir"]:not(.visto) { translate: 0 22px; opacity: 0; }
.entradas [data-entrada="foto"] { clip-path: inset(-16px -8px -24px -8px); }
.entradas [data-entrada="foto"]:not(.visto) { clip-path: inset(100% -8px -24px -8px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}