/* Variables visuales centrales. La paleta cambia desde aqui. */
    @font-face {
      font-family: "Chopin Light";
      src: url("../recursos/Chopin-Light.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --color-fondo: #FFFFFF;
      --color-blanco: #FFFFFF;
      --color-tinta: #353434;
      --color-vino: #A99C94;
      --color-rosa-profundo: #353434;
      --color-rosa-suave: #EFDFD5;
      --color-taupe: #CFC0B4;
      --color-acento-hover: #A99C94;
      --color-acento-activo: #353434;
      --color-menu-activo: #353434;
      --color-verde-natural: #6F7A66;
      --color-linea: rgba(53, 52, 52, 0.12);
      --color-sombra: rgba(53, 52, 52, 0.12);
      --rgb-tinta: 53, 52, 52;
      --rgb-acento: 169, 156, 148;
      --rgb-secundario: 53, 52, 52;
      --rgb-suave: 239, 223, 213;
      --rgb-taupe: 207, 192, 180;
      --alto-barra-anuncio: 26px;
      --alto-header: 76px;
      --radio-suave: 8px;
      --radio-control: 999px;
      --fuente-titulos: "Chopin Light", "Didot", "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
      --fuente-texto: "Chopin Light", "Didot", "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
      --cursor-personalizado: url("../recursos/puntero-cursor.png") 1 1, auto;
      --color-puntero: #6F6A65;
      --color-estela-puntero: rgba(111, 106, 101, 0.3);
      --color-marca-agua: #3C3A39;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
    }

    body {
      margin: 0;
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      color: var(--color-tinta);
      background: var(--color-blanco);
      font-family: var(--fuente-texto);
      font-weight: 700;
      overflow-x: clip;
      cursor: var(--cursor-personalizado);
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--rgb-acento), 0.36) rgba(246, 241, 238, 0.72);
    }

    body.barra-anuncio-oculta {
      --alto-barra-anuncio: 0px;
    }

    @supports not (overflow: clip) {
      html,
      body {
        overflow-x: hidden;
      }
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      width: 9px;
      cursor: none;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
      background: rgba(246, 241, 238, 0.72);
      cursor: none;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
      background: rgba(var(--rgb-acento), 0.36);
      border: 2px solid rgba(246, 241, 238, 0.72);
      border-radius: var(--radio-control);
      cursor: none;
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
      background: rgba(var(--rgb-acento), 0.54);
    }

    button,
    a,
    textarea {
      font: inherit;
    }

    strong,
    b {
      font-weight: 700;
    }

    button {
      border: 0;
      cursor: var(--cursor-personalizado);
    }

    a {
      color: inherit;
      cursor: var(--cursor-personalizado);
      text-decoration: none;
    }

    select,
    summary,
    [role="button"] {
      cursor: var(--cursor-personalizado);
    }

    input,
    textarea {
      cursor: text;
    }

    .precargador-sitio {
      position: fixed;
      inset: 0;
      z-index: 15000;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 18px;
      color: var(--color-vino);
      background: var(--color-blanco);
      transition: opacity 420ms ease, visibility 420ms ease;
    }

    .precargador-sitio.precargador-sitio--oculto {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .precargador-sitio__puntero {
      position: relative;
      width: clamp(64px, 13vw, 110px);
      aspect-ratio: 1;
      overflow: hidden;
      background: rgba(var(--rgb-acento), 0.1);
      -webkit-mask: url("../recursos/puntero.png") center / contain no-repeat;
      mask: url("../recursos/puntero.png") center / contain no-repeat;
      filter: drop-shadow(0 18px 30px rgba(var(--rgb-tinta), 0.1));
    }

    .precargador-sitio__puntero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(var(--rgb-acento), 0.16);
    }

    .precargador-sitio__relleno {
      position: absolute;
      left: -18%;
      right: -18%;
      bottom: -12%;
      height: 112%;
      background:
        radial-gradient(ellipse at 22% 8%, rgba(255, 255, 255, 0.42) 0 12%, transparent 13%),
        linear-gradient(180deg, var(--color-acento-hover), var(--color-vino));
      transform: translateY(108%);
      animation: llenar-puntero 1600ms cubic-bezier(0.62, 0, 0.18, 1) infinite;
    }

    .precargador-sitio__relleno::before {
      content: "";
      position: absolute;
      left: -10%;
      right: -10%;
      top: -12px;
      height: 24px;
      background:
        radial-gradient(ellipse at 22% 52%, rgba(255, 255, 255, 0.48) 0 12%, transparent 13%),
        radial-gradient(ellipse at 58% 44%, rgba(255, 255, 255, 0.34) 0 10%, transparent 11%),
        var(--color-acento-hover);
      border-radius: 50%;
      animation: ondular-liquido 900ms ease-in-out infinite alternate;
    }

    .precargador-sitio__texto {
      color: rgba(var(--rgb-tinta), 0.68);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    @keyframes llenar-puntero {
      0% {
        transform: translateY(108%);
      }

      68% {
        transform: translateY(0%);
      }

      100% {
        transform: translateY(0%);
      }
    }

    @keyframes ondular-liquido {
      from {
        transform: translateX(-4%) rotate(-2deg) scaleX(1.04);
      }

      to {
        transform: translateX(4%) rotate(2deg) scaleX(1.08);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .precargador-sitio__relleno,
      .precargador-sitio__relleno::before {
        animation: none;
        transform: translateY(0);
      }
    }

    .puntero-dinamico {
      display: none;
    }

    .barra-anuncio {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 120;
      width: 100%;
      min-height: var(--alto-barra-anuncio);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 4px max(16px, env(safe-area-inset-left, 0px)) 4px max(16px, env(safe-area-inset-right, 0px));
      color: var(--color-blanco);
      background: var(--color-verde-natural);
      box-shadow: 0 10px 24px rgba(var(--rgb-tinta), 0.12);
    }

    .barra-anuncio__texto {
      margin: 0;
      padding-left: 42px;
      color: var(--color-blanco);
      font-size: clamp(0.64rem, 1.1vw, 0.74rem);
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.35;
      text-align: center;
    }

    .barra-anuncio__cerrar {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      color: var(--color-blanco);
      background: transparent;
      border: 0;
      border-radius: 0;
      line-height: 1;
      opacity: 0.82;
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .barra-anuncio__cerrar:hover,
    .barra-anuncio__cerrar:focus-visible {
      opacity: 1;
      transform: translateY(-1px);
    }

    .barra-anuncio__cerrar:active {
      transform: translateY(0) scale(0.94);
    }

    .barra-anuncio__cerrar span {
      display: block;
      transform: translateY(-0.5px);
    }

    @media (pointer: fine) {
      body.cursor-dinamico-activo,
      body.cursor-dinamico-activo * {
        cursor: none !important;
      }

      .puntero-dinamico {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 13000;
        display: block;
        width: 10px;
        height: 32px;
        pointer-events: none;
        opacity: 0;
        background: var(--color-puntero);
        -webkit-mask: url("../recursos/puntero-cursor.png") center / contain no-repeat;
        mask: url("../recursos/puntero-cursor.png") center / contain no-repeat;
        transform-origin: 50% 0%;
        transform: translate3d(-120px, -120px, 0) rotate(0deg);
        transition: opacity 160ms ease;
        will-change: transform, opacity;
      }

    body.cursor-dinamico-visible .puntero-dinamico {
        opacity: 1;
      }

      .estela-puntero {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 12990;
        width: var(--ancho-estela, 110px);
        height: var(--alto-estela, 13px);
        pointer-events: none;
        opacity: 0;
        background:
          radial-gradient(ellipse at 8% 48%, var(--color-estela-puntero) 0 18%, transparent 19%),
          linear-gradient(90deg, var(--color-estela-puntero) 0 34%, rgba(142, 30, 62, 0.2) 62%, transparent 100%);
        border-radius: 72% 18% 28% 64% / 62% 28% 50% 38%;
        clip-path: polygon(0 10%, 24% 0, 58% 14%, 100% 46%, 62% 70%, 28% 100%, 0 82%);
        filter: blur(0.35px) drop-shadow(0 1px 5px rgba(var(--rgb-acento), 0.08));
        transform: translate3d(var(--x-estela, -120px), var(--y-estela, -120px), 0) translate(-8%, -50%) rotate(var(--rotacion-estela, 0deg)) scaleX(0.2);
        transform-origin: left center;
        animation: estelaPuntero 580ms ease-out forwards;
        will-change: transform, opacity;
      }

      .estela-puntero::before,
      .estela-puntero::after {
        content: "";
        position: absolute;
        left: 8%;
        right: 22%;
        height: 1px;
        background: rgba(255, 255, 255, 0.26);
        border-radius: var(--radio-control);
      }

      .estela-puntero::before {
        top: 30%;
        transform: rotate(-5deg);
      }

      .estela-puntero::after {
        bottom: 28%;
        transform: rotate(4deg);
      }
    }

    @keyframes estelaPuntero {
      0% {
        opacity: 0;
        transform: translate3d(var(--x-estela, -120px), var(--y-estela, -120px), 0) translate(-8%, -50%) rotate(var(--rotacion-estela, 0deg)) scaleX(0.18);
      }

      30% {
        opacity: 0.72;
        transform: translate3d(var(--x-estela, -120px), var(--y-estela, -120px), 0) translate(-8%, -50%) rotate(var(--rotacion-estela, 0deg)) scaleX(1);
      }

      72% {
        opacity: 0.34;
        transform: translate3d(var(--x-estela, -120px), var(--y-estela, -120px), 0) translate(-8%, -50%) rotate(var(--rotacion-estela, 0deg)) scaleX(0.92);
      }

      100% {
        opacity: 0;
        transform: translate3d(var(--x-estela, -120px), var(--y-estela, -120px), 0) translate(-8%, -50%) rotate(var(--rotacion-estela, 0deg)) scaleX(0.78);
      }
    }

    /* Marca de agua de desarrollo desactivada. */
    body::before {
      content: none;
    }

    .ayuda-whatsapp-flotante {
      position: fixed;
      right: 18px;
      bottom: 84px;
      z-index: 11990;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--color-blanco);
      transform: translateZ(0);
    }

    .ayuda-whatsapp-flotante__globo {
      position: relative;
      max-width: 150px;
      padding: 9px 14px;
      color: var(--color-tinta);
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(var(--rgb-acento), 0.16);
      border-radius: 999px;
      box-shadow: 0 10px 26px rgba(var(--rgb-tinta), 0.12);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.1;
      white-space: nowrap;
      backdrop-filter: blur(8px);
      transition: color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    }

    .ayuda-whatsapp-flotante--globo-oculto .ayuda-whatsapp-flotante__globo {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(8px);
    }

    .ayuda-whatsapp-flotante__globo::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -6px;
      width: 11px;
      height: 11px;
      background: inherit;
      border-top: 1px solid rgba(var(--rgb-acento), 0.16);
      border-right: 1px solid rgba(var(--rgb-acento), 0.16);
      transform: translateY(-50%) rotate(45deg);
    }

    .ayuda-whatsapp-flotante__icono {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      color: var(--color-blanco);
      background: var(--color-verde-natural);
      border-radius: var(--radio-control);
      box-shadow: 0 8px 20px rgba(var(--rgb-tinta), 0.12);
      transition: background 180ms ease, transform 180ms ease;
    }

    .ayuda-whatsapp-flotante__icono svg {
      width: 25px;
      height: 25px;
      transform: translate(0, -1px);
    }

    .ayuda-whatsapp-flotante:hover .ayuda-whatsapp-flotante__icono,
    .ayuda-whatsapp-flotante:focus-visible .ayuda-whatsapp-flotante__icono {
      background: var(--color-verde-natural);
      transform: translateY(-1px);
    }

    .ayuda-whatsapp-flotante:hover .ayuda-whatsapp-flotante__globo,
    .ayuda-whatsapp-flotante:focus-visible .ayuda-whatsapp-flotante__globo {
      color: var(--color-vino);
      box-shadow: 0 14px 32px rgba(var(--rgb-tinta), 0.14);
      transform: translateX(-2px);
    }

    .ayuda-whatsapp-flotante:active .ayuda-whatsapp-flotante__icono {
      background: var(--color-verde-natural);
      transform: translateY(0) scale(0.96);
    }

    .paleta-flotante {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 12000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-family: var(--fuente-texto);
    }

    .paleta-flotante__panel {
      min-width: 170px;
      margin-bottom: 10px;
      padding: 8px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(var(--rgb-acento), 0.12);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(var(--rgb-tinta), 0.12);
      backdrop-filter: blur(6px);
    }

    .paleta-flotante__boton {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      color: var(--color-blanco);
      background: var(--color-vino);
      border: 0;
      border-radius: var(--radio-control);
      box-shadow: 0 8px 20px rgba(var(--rgb-tinta), 0.12);
      cursor: var(--cursor-personalizado);
      transition: background 180ms ease, transform 180ms ease;
      touch-action: manipulation;
    }

    .paleta-flotante__boton:hover,
    .paleta-flotante__boton:focus-visible {
      background: var(--color-acento-hover);
      transform: translateY(-1px);
    }

    .paleta-flotante__boton svg {
      width: 19px;
      height: 19px;
      stroke-width: 1.8;
    }

    .paleta-flotante__titulo {
      display: block;
      margin: 0 0 6px;
      color: var(--color-tinta);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .paleta-flotante__lista {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .paleta-flotante__grupo + .paleta-flotante__grupo {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(var(--rgb-acento), 0.1);
    }

    .paleta-opcion {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 6px;
      color: var(--color-tinta);
      background: transparent;
      border: 0;
      border-radius: var(--radio-suave);
      cursor: var(--cursor-personalizado);
      text-align: left;
      transition: background 180ms ease, color 180ms ease;
      touch-action: manipulation;
    }

    .paleta-opcion:hover,
    .paleta-opcion:focus-visible,
    .paleta-opcion.activa {
      color: var(--color-vino);
      background: rgba(var(--rgb-acento), 0.08);
    }

    .paleta-opcion__muestra {
      flex: 0 0 auto;
      width: 30px;
      height: 20px;
      border: 1px solid rgba(var(--rgb-tinta), 0.08);
      border-radius: 4px;
    }

    .paleta-opcion__texto {
      font-size: 0.78rem;
    }

    @media (prefers-reduced-motion: reduce) {
      .paleta-flotante__boton,
      .paleta-opcion {
        transition: none;
      }
    }

    .escenario-portada {
      position: relative;
      min-height: 100vh;
      padding: 0;
      background: var(--color-blanco);
      overflow: visible;
    }

    .escenario-portada::before,
    .escenario-portada::after {
      content: "";
      display: none;
      position: absolute;
      width: 0;
      height: 0;
      background: none;
      pointer-events: none;
      z-index: 2;
    }

    .escenario-portada::before {
      left: -120px;
      top: 120px;
    }

    .escenario-portada::after {
      right: -90px;
      bottom: 70px;
    }

    .contenedor-portada {
      position: relative;
      z-index: 1;
      width: min(100%, 1280px);
      min-height: 100vh;
      margin: 0 auto;
      padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) 0;
      background: var(--color-blanco);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .encabezado-sitio {
      position: fixed;
      top: var(--alto-barra-anuncio);
      left: 50%;
      width: min(100%, 1280px);
      padding: 0 clamp(12px, 2vw, 24px);
      z-index: 40;
      height: var(--alto-header);
      background: transparent;
      border-bottom: 0;
      transform: translateX(-50%);
      transition: top 220ms ease, height 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .encabezado-sitio::before {
      content: "";
      position: fixed;
      left: 50%;
      top: 0;
      z-index: -1;
      width: 100vw;
      height: 100%;
      background: rgba(255, 253, 252, 0.92);
      border-bottom: 1px solid rgba(var(--rgb-acento), 0.08);
      box-shadow: 0 10px 30px rgba(var(--rgb-tinta), 0.06);
      backdrop-filter: blur(18px);
      transform: translateX(-50%);
      transition: box-shadow 220ms ease, border-color 220ms ease;
    }

    .encabezado-sitio.encabezado-compacto {
      height: calc(var(--alto-header) - 16px);
    }

    .encabezado-sitio.encabezado-compacto::before {
      border-bottom-color: rgba(var(--rgb-acento), 0.12);
      box-shadow: 0 12px 32px rgba(var(--rgb-tinta), 0.08);
    }

    .barra-encabezado {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 26px;
      transition: gap 220ms ease;
    }

    .encabezado-compacto .barra-encabezado {
      gap: 20px;
    }

    .marca-textual {
      display: inline-flex;
      align-items: center;
      min-width: max-content;
    }

    .marca-textual__logo {
      width: auto;
      height: 54px;
      display: block;
      object-fit: contain;
      transition: height 220ms ease, width 220ms ease;
    }

    .marca-textual__logo--horizontal {
      max-width: min(220px, 28vw);
    }

    .encabezado-compacto .marca-textual__logo {
      height: 42px;
    }

    .navegacion-principal {
      flex: 1 1 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: clamp(12px, 2vw, 28px);
      min-width: 0;
    }

    .enlace-modal {
      position: relative;
      color: rgba(var(--rgb-tinta), 0.74);
      background: transparent;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .enlace-modal::after {
      display: none;
    }

    .enlace-modal:hover,
    .enlace-modal:focus-visible,
    .enlace-modal.activo {
      color: var(--color-vino);
    }

    .acciones-encabezado {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .boton-icono {
      position: relative;
      width: 40px;
      height: 40px;
      display: inline-grid;
      place-items: center;
      color: var(--color-vino);
      background: rgba(255, 253, 252, 0.74);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-control);
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .boton-icono:hover,
    .boton-icono:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(var(--rgb-acento), 0.34);
      background: var(--color-blanco);
    }

    .boton-icono:active {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
      transform: translateY(0) scale(0.96);
    }

    .boton-icono svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.8;
    }

    .boton-menu-movil {
      display: none;
    }

    .boton-whatsapp-movil {
      display: none;
    }

    .boton-whatsapp-movil__globo {
      display: none;
    }

    .boton-menu-movil span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 2px;
      display: block;
      background: currentColor;
      border-radius: var(--radio-control);
      transition: transform 180ms ease, opacity 180ms ease;
    }

    .boton-menu-movil span + span {
      margin-top: 0;
    }

    .boton-menu-movil span:nth-child(1) {
      transform: translate(-50%, -50%) translateY(-6px);
    }

    .boton-menu-movil span:nth-child(2) {
      transform: translate(-50%, -50%);
    }

    .boton-menu-movil span:nth-child(3) {
      transform: translate(-50%, -50%) translateY(6px);
    }

    .menu-movil-abierto .boton-menu-movil span:nth-child(1) {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .menu-movil-abierto .boton-menu-movil span:nth-child(2) {
      opacity: 0;
    }

    .menu-movil-abierto .boton-menu-movil span:nth-child(3) {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .contador-pedido {
      position: absolute;
      top: -6px;
      right: -4px;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      display: grid;
      place-items: center;
      color: var(--color-blanco);
      background: var(--color-vino);
      border: 2px solid var(--color-fondo);
      border-radius: var(--radio-control);
      font-size: 0.68rem;
      font-weight: 700;
    }

    .slideshow-portada {
      position: relative;
      left: 50%;
      width: 100vw;
      height: 450px;
      min-height: 450px;
      max-height: 450px;
      margin-top: calc(var(--alto-barra-anuncio) + var(--alto-header) - clamp(12px, 2vw, 24px));
      margin-left: -50vw;
      overflow: hidden;
      background: var(--color-blanco);
      isolation: isolate;
      touch-action: pan-y;
    }

    .slideshow-portada--oculto {
      display: none;
    }

    .slideshow-portada:not(.slideshow-portada--oculto) + .seccion-muestra {
      margin-top: -100px;
      padding-top: 0;
    }

    .slideshow-portada__pista,
    .slideshow-portada__slide {
      position: absolute;
      inset: 0;
    }

    .slideshow-portada__slide {
      opacity: 0;
      transform: none;
      transition: opacity 520ms ease;
      backface-visibility: hidden;
    }

    .slideshow-portada__slide.activo {
      opacity: 1;
      transform: none;
    }

    .slideshow-portada__slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(var(--rgb-tinta), 0.06), rgba(var(--rgb-tinta), 0.24));
      pointer-events: none;
    }

    .slideshow-portada::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      height: 148px;
      pointer-events: none;
      background: linear-gradient(
        0deg,
        var(--color-blanco) 0%,
        rgba(255, 255, 255, 0.76) 28%,
        rgba(255, 255, 255, 0.2) 62%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    .slideshow-portada__slide picture,
    .slideshow-portada__slide img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slideshow-portada__slide img {
      object-fit: cover;
      object-position: center center;
      image-rendering: auto;
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    .slideshow-portada__marcadores {
      position: absolute;
      left: 50%;
      bottom: 132px;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 6px 9px;
      background: rgba(255, 253, 252, 0.74);
      border: 1px solid rgba(255, 253, 252, 0.54);
      border-radius: var(--radio-control);
      box-shadow: 0 18px 42px rgba(var(--rgb-tinta), 0.16);
      backdrop-filter: blur(14px);
      transform: translateX(-50%);
    }

    .slideshow-portada__flecha {
      position: absolute;
      top: 50%;
      z-index: 4;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      color: var(--color-vino);
      background: rgba(255, 253, 252, 0.74);
      border: 1px solid rgba(255, 253, 252, 0.58);
      border-radius: var(--radio-control);
      box-shadow: 0 16px 36px rgba(var(--rgb-tinta), 0.13);
      backdrop-filter: blur(12px);
      transform: translateY(-50%);
      transition: color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .slideshow-portada__flecha--anterior {
      left: clamp(14px, 3vw, 34px);
    }

    .slideshow-portada__flecha--siguiente {
      right: clamp(14px, 3vw, 34px);
    }

    .slideshow-portada__flecha:hover,
    .slideshow-portada__flecha:focus-visible {
      color: var(--color-blanco);
      background: var(--color-vino);
      transform: translateY(-50%) scale(1.04);
    }

    .slideshow-portada__flecha:active {
      background: var(--color-acento-activo);
      transform: translateY(-50%) scale(0.96);
    }

    .slideshow-portada__flecha svg {
      width: 24px;
      height: 24px;
      stroke-width: 1.6;
    }

    .marcador-slide {
      width: 6px;
      height: 6px;
      padding: 0;
      background: rgba(var(--rgb-acento), 0.28);
      border-radius: var(--radio-control);
      transition: width 220ms ease, background 220ms ease, transform 220ms ease;
    }

    .marcador-slide:hover,
    .marcador-slide:focus-visible {
      background: var(--color-menu-activo);
      transform: scale(1.12);
    }

    .marcador-slide.activo {
      width: 20px;
      background: var(--color-vino);
    }

    .seccion-muestra {
      position: relative;
      min-height: auto;
      width: 100%;
      margin: 0 auto;
      display: grid;
      gap: 0;
      padding: calc(var(--alto-barra-anuncio) + var(--alto-header) + 10px) 0 0;
    }

    .vista-catalogo {
      grid-area: 1 / 1;
      position: absolute;
      inset: 0;
      width: 100%;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transform: translateX(26px);
      transition: opacity 280ms ease, transform 280ms ease;
    }

    .vista-catalogo.vista-activa {
      position: relative;
      inset: auto;
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transform: translateX(0);
    }

    .vista-catalogo.vista-saliendo {
      position: absolute;
      inset: 0;
      width: 100%;
      visibility: visible;
      opacity: 0;
      transform: translateX(-30px);
    }

    .hero-capsula {
      position: relative;
      z-index: 3;
      min-width: 0;
      min-height: clamp(380px, 39vw, 460px);
      display: grid;
      grid-template-columns: minmax(390px, 1.45fr) repeat(3, minmax(136px, 0.72fr));
      grid-template-rows: minmax(148px, 1fr) minmax(148px, 1fr);
      grid-template-areas:
        "geles nail-art nail-art base-color"
        "geles basicos kits-accesorios construccion";
      gap: 10px;
      padding: 0;
      color: var(--color-blanco);
      background: transparent;
      border-radius: clamp(22px, 3vw, 38px);
      overflow: hidden;
    }

    .modulo-hero {
      position: relative;
      min-width: 0;
      min-height: 0;
      display: grid;
      align-content: end;
      gap: 16px;
      padding: clamp(16px, 2.2vw, 28px);
      color: var(--color-blanco);
      background: var(--fondo-categoria, linear-gradient(135deg, var(--color-rosa-profundo), var(--color-vino)));
      background-position: center;
      background-size: cover;
      border-radius: clamp(18px, 2.4vw, 30px);
      overflow: hidden;
      isolation: isolate;
      cursor: var(--cursor-personalizado);
      transition:
        background 260ms ease,
        color 260ms ease,
        box-shadow 260ms ease;
    }

    .panel-paletas {
      min-height: clamp(380px, 39vw, 460px);
      display: grid;
      grid-template-rows: 1fr;
      padding: clamp(24px, 3vw, 42px);
      color: var(--color-tinta);
      background: var(--color-blanco);
      border-radius: clamp(22px, 3vw, 38px);
      overflow: hidden;
      transition: opacity 260ms ease, transform 260ms ease;
    }

    .panel-paletas__encabezado {
      display: grid;
      gap: 8px;
    }

    .panel-paletas__etiqueta {
      color: var(--color-menu-activo);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .panel-paletas h2 {
      scroll-margin-top: calc(var(--alto-header) + 18px);
      margin: 0;
      font-family: var(--fuente-titulos);
      font-size: clamp(2.1rem, 4vw, 4.4rem);
      font-weight: 700;
      line-height: 0.92;
      letter-spacing: 0;
    }

    .tabla-paletas {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 24px);
      min-height: 0;
    }

    .columna-paleta {
      min-width: 0;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
      padding: clamp(18px, 2vw, 26px);
    }

    .columna-paleta h3 {
      margin: 0;
      color: var(--color-vino);
      font-size: clamp(0.76rem, 0.9vw, 0.92rem);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .lista-paleta {
      display: grid;
      align-content: start;
      gap: 10px;
      min-width: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .lista-paleta li {
      min-width: 0;
      min-height: 40px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      color: rgba(var(--rgb-tinta), 0.78);
      background: rgba(255, 253, 252, 0.72);
      border: 1px solid rgba(var(--rgb-acento), 0.1);
      border-radius: var(--radio-control);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .muestra-color {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      background: var(--muestra);
      border: 1px solid rgba(var(--rgb-tinta), 0.12);
      border-radius: 999px;
      box-shadow: 0 6px 16px rgba(var(--rgb-tinta), 0.1);
    }

    .panel-paletas--simple {
      align-content: center;
    }

    .panel-informativo {
      align-content: space-between;
      gap: clamp(22px, 3vw, 38px);
    }

    .panel-informativo__contenido {
      max-width: 980px;
      display: grid;
      gap: clamp(14px, 1.8vw, 22px);
      align-content: end;
      color: rgba(var(--rgb-tinta), 0.72);
      font-size: clamp(1rem, 1.35vw, 1.28rem);
      line-height: 1.62;
    }

    .panel-informativo__contenido p,
    .panel-informativo__preguntas p {
      margin: 0;
    }

    .panel-informativo__contenido--columnas {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: none;
    }

    .panel-informativo__preguntas {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(16px, 2vw, 26px);
      align-items: stretch;
    }

    .panel-informativo__preguntas article {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid rgba(var(--rgb-acento), 0.16);
    }

    .panel-informativo__preguntas h3 {
      margin: 0;
      color: var(--color-vino);
      font-size: clamp(1rem, 1.2vw, 1.2rem);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .panel-informativo__preguntas p {
      color: rgba(var(--rgb-tinta), 0.68);
      font-size: clamp(0.9rem, 1vw, 1.02rem);
      line-height: 1.56;
    }

    .modulo-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: rgba(var(--rgb-tinta), 0.2);
      transition: opacity 260ms ease;
    }

    .modulo-hero::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 0;
      width: min(72%, 560px);
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          rgba(var(--rgb-tinta), 0.56) 0%,
          rgba(var(--rgb-tinta), 0.34) 42%,
          rgba(var(--rgb-tinta), 0) 100%
        );
      opacity: 0.96;
      transition: opacity 260ms ease;
    }

    .modulo-hero:hover::before,
    .modulo-hero:focus-visible::before {
      opacity: 0;
    }

    .modulo-hero:hover::after,
    .modulo-hero:focus-visible::after {
      opacity: 1;
    }

    .modulo-hero:focus-visible {
      outline: 2px solid rgba(var(--rgb-acento), 0.42);
      outline-offset: -6px;
    }

    .modulo-hero--geles {
      grid-area: geles;
      align-content: center;
      padding: clamp(28px, 3.8vw, 50px);
      --fondo-categoria: url("../recursos/POTADA_GELES EXPAND.1.png") center/cover no-repeat;
    }

    .modulo-hero.subcategorias-fondo-claro {
      color: rgba(var(--rgb-tinta), 0.78);
      background: var(--color-blanco);
    }

    .modulo-hero.subcategorias-fondo-claro::before {
      opacity: 0;
    }

    .modulo-hero.subcategorias-fondo-claro::after {
      opacity: 0;
    }

    .modulo-hero--nail-art {
      grid-area: nail-art;
      --fondo-categoria: url("../recursos/PORTADA_NAILARTV1.jpg") center/cover no-repeat;
    }

    .modulo-hero--base-color {
      grid-area: base-color;
      --fondo-categoria: url("../recursos/PORTADA_BASEDECOLOR.jpg") center/cover no-repeat;
    }

    .modulo-hero--basicos {
      grid-area: basicos;
      --fondo-categoria: url("../recursos/PORTADA_Basicos.jpg") center/cover no-repeat;
    }

    .modulo-hero--kits-accesorios {
      grid-area: kits-accesorios;
      --fondo-categoria: url("../recursos/PORTADA_KITS Y ACCESORIOS.jpg") center/cover no-repeat;
    }

    .modulo-hero--construccion {
      grid-area: construccion;
      --fondo-categoria: url("../recursos/PORTADA_CONSTRUCCIÓN.jpg") center/cover no-repeat;
    }

    .modulo-categoria__contenido {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      width: fit-content;
      max-width: min(72%, 300px);
      transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
    }

    .modulo-hero--geles .modulo-categoria__contenido {
      width: min(88%, 520px);
      max-width: min(88%, 520px);
    }

    .modulo-hero--nail-art .modulo-categoria__contenido {
      width: min(62%, 440px);
      max-width: min(62%, 440px);
    }

    .modulo-categoria__texto {
      position: absolute;
      left: 0;
      bottom: calc(100% + 12px);
      width: clamp(260px, 34vw, 520px);
      max-width: 100%;
      margin: 0;
      color: rgba(255, 253, 252, 0.86);
      font-size: clamp(0.68rem, 0.82vw, 0.82rem);
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.04em;
      opacity: 0;
      pointer-events: none;
      text-shadow: 0 1px 12px rgba(var(--rgb-tinta), 0.28);
      transform: translateY(12px);
      transition: opacity 260ms ease, transform 260ms ease;
    }

    .modulo-hero--nail-art .modulo-categoria__texto {
      width: clamp(260px, 30vw, 440px);
    }

    .modulo-hero:hover .modulo-categoria__texto,
    .modulo-hero:focus-visible .modulo-categoria__texto {
      opacity: 1;
      transform: translateY(0);
    }

    .modulo-categoria__titulo {
      margin: 0;
      font-family: var(--fuente-texto);
      font-size: clamp(0.96rem, 1.35vw, 1.34rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 1px 14px rgba(var(--rgb-tinta), 0.34);
    }

    .hero-contenido {
      position: relative;
      z-index: 2;
      min-width: 0;
      display: grid;
      gap: 16px;
      max-width: 500px;
    }

    .seccion-muestra h1 {
      margin: 0;
      font-family: var(--fuente-titulos);
      font-size: clamp(2.35rem, 3.7vw, 3.35rem);
      font-weight: 700;
      line-height: 0.98;
      letter-spacing: 0;
      overflow-wrap: break-word;
    }

    .acciones-hero {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-top: 6px;
    }

    .boton-hero {
      min-height: 42px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: var(--radio-control);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-vino);
      background: var(--color-blanco);
      box-shadow: 0 12px 26px rgba(var(--rgb-tinta), 0.14);
    }

    .panel-subcategorias {
      position: absolute;
      inset: clamp(14px, 2vw, 26px);
      z-index: 3;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(10px, 1.4vw, 16px);
      opacity: 0;
      pointer-events: none;
      transform: translateY(24px);
      color: rgba(var(--rgb-tinta), 0.78);
      transition: opacity 300ms ease, transform 300ms ease;
    }

    .modulo-hero.subcategorias-visibles .modulo-categoria__contenido {
      opacity: 0;
      filter: blur(4px);
      pointer-events: none;
      transform: translateY(-26px);
    }

    .modulo-hero.subcategorias-visibles .panel-subcategorias {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 260ms;
    }

    .panel-subcategorias__cabecera {
      min-width: 0;
    }

    .panel-subcategorias__titulo {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.78);
      font-family: var(--fuente-titulos);
      font-size: clamp(1.12rem, 1.7vw, 2.2rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
    }

    .modulo-hero--geles .panel-subcategorias__titulo {
      font-size: clamp(1.9rem, 3vw, 3rem);
    }

    .lista-subcategorias {
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      gap: 7px;
      min-height: 0;
      overflow: auto;
      padding: 2px 4px 24px 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--rgb-acento), 0.3) transparent;
    }

    .lista-subcategorias::-webkit-scrollbar {
      width: 5px;
      cursor: none;
    }

    .lista-subcategorias::-webkit-scrollbar-thumb {
      background: rgba(var(--rgb-acento), 0.3);
      border-radius: 999px;
      cursor: none;
    }

    .subcategoria-categoria {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      color: rgba(var(--rgb-tinta), 0.78);
      background: rgba(246, 241, 238, 0.76);
      border: 1px solid rgba(var(--rgb-acento), 0.16);
      border-radius: var(--radio-control);
      font-size: clamp(0.62rem, 0.76vw, 0.72rem);
      font-weight: 700;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
      transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .subcategoria-categoria:not(.subcategoria-categoria--ver-todo):hover,
    .subcategoria-categoria:not(.subcategoria-categoria--ver-todo):focus-visible {
      color: var(--color-blanco);
      background: rgba(var(--rgb-tinta), 0.86);
      border-color: rgba(var(--rgb-tinta), 0.86);
    }

    .subcategoria-categoria:active {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
      transform: scale(0.98);
    }

    .subcategoria-categoria--ver-todo {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
      font-weight: 700;
    }

    .seccion-buscador-productos {
      display: grid;
      gap: clamp(18px, 2.4vw, 28px);
      padding: clamp(28px, 4vw, 54px) clamp(4px, 1vw, 10px) 8px;
      background: var(--color-blanco);
    }

    .seccion-buscador-productos--oculta {
      display: none;
    }

    .buscador-productos__cabecera {
      display: block;
    }

    .formulario-buscador-productos {
      display: grid;
      grid-template-columns:
        minmax(180px, 1fr)
        minmax(140px, 0.58fr)
        minmax(150px, 0.62fr)
        minmax(230px, 0.82fr);
      gap: 10px;
      align-items: center;
    }

    .formulario-buscador-productos input,
    .boton-filtro {
      width: 100%;
      min-height: 48px;
      padding: 0 18px;
      color: var(--color-tinta);
      background: rgba(246, 241, 238, 0.62);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-control);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .formulario-buscador-productos input:focus {
      background-color: var(--color-blanco);
      border-color: var(--color-rosa-profundo);
      box-shadow: 0 0 0 4px rgba(var(--rgb-suave), 0.16);
    }

    .selector-nativo {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .selector-personalizado {
      position: relative;
      min-width: 0;
    }

    .campo-selector {
      width: 100%;
      min-height: 48px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 0 16px 0 18px;
      color: var(--color-tinta);
      background: rgba(246, 241, 238, 0.62);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-control);
      font-size: 0.9rem;
      font-weight: 700;
      text-align: left;
      transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .campo-selector:hover {
      background: var(--color-blanco);
      border-color: rgba(var(--rgb-acento), 0.34);
    }

    .campo-selector:active {
      background: rgba(var(--rgb-suave), 0.18);
      transform: scale(0.99);
    }

    .campo-selector::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 1.5px solid var(--color-vino);
      border-bottom: 1.5px solid var(--color-vino);
      transform: rotate(45deg) translateY(-2px);
      transition: transform 180ms ease;
    }

    .selector-personalizado.abierto .campo-selector {
      background: var(--color-blanco);
      border-color: var(--color-rosa-profundo);
      box-shadow: 0 0 0 4px rgba(var(--rgb-suave), 0.16);
    }

    .selector-personalizado.abierto .campo-selector::after {
      transform: rotate(225deg) translate(-2px, -1px);
    }

    .campo-selector__texto {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lista-selector {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      z-index: 80;
      max-height: 260px;
      padding: 8px;
      overflow: auto;
      background: var(--color-blanco);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: 18px;
      box-shadow: 0 18px 42px rgba(var(--rgb-tinta), 0.16);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 170ms ease, transform 170ms ease;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--rgb-acento), 0.3) transparent;
    }

    .selector-personalizado.abierto .lista-selector {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .opcion-selector {
      width: 100%;
      min-height: 36px;
      display: block;
      padding: 8px 12px;
      color: rgba(var(--rgb-tinta), 0.78);
      background: transparent;
      border-radius: 12px;
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.25;
      text-align: left;
    }

    .opcion-selector:hover,
    .opcion-selector:focus-visible,
    .opcion-selector.activa {
      color: var(--color-blanco);
      background: var(--color-vino);
    }

    .boton-filtro {
      border-radius: var(--radio-control);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .boton-filtro--secundario {
      color: var(--color-vino);
      background: transparent;
      border-color: rgba(var(--rgb-acento), 0.22);
    }

    .boton-filtro--principal {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
    }

    .boton-filtro:hover,
    .boton-filtro:focus-visible {
      transform: translateY(-1px);
    }

    .boton-filtro--secundario:hover,
    .boton-filtro--secundario:focus-visible {
      background: rgba(var(--rgb-suave), 0.12);
      border-color: rgba(var(--rgb-acento), 0.34);
    }

    .boton-filtro--principal:hover,
    .boton-filtro--principal:focus-visible {
      background: var(--color-acento-hover);
      border-color: var(--color-acento-hover);
    }

    .boton-filtro:active {
      transform: translateY(0) scale(0.98);
    }

    .boton-filtro--secundario:active {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
    }

    .boton-filtro--principal:active {
      background: var(--color-acento-activo);
      border-color: var(--color-acento-activo);
    }

    .contador-productos-mostrados {
      grid-column: 1 / -1;
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.62);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-align: right;
      text-transform: uppercase;
    }

    .contenido-productos {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
      gap: clamp(18px, 2vw, 28px);
      align-items: start;
    }

    .columna-catalogo-productos {
      position: relative;
      z-index: 1;
      min-width: 0;
      max-width: 100%;
      display: grid;
      gap: clamp(18px, 2.4vw, 28px);
      overflow: visible;
    }

    .rejilla-polaroid {
      width: 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 24px);
      align-items: start;
    }

    .imagen-fija-productos {
      position: sticky;
      top: calc(var(--alto-header) + 20px);
      width: 100%;
      min-width: 0;
      height: calc(80vh - var(--alto-header));
      min-height: 520px;
      max-height: 760px;
      overflow: hidden;
      border-radius: 22px;
      background: rgba(246, 241, 238, 0.72);
    }

    .imagen-fija-productos img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .tarjeta-polaroid {
      position: relative;
      min-width: 0;
      aspect-ratio: 0.78;
      padding: clamp(13px, 1.45vw, 18px) clamp(13px, 1.45vw, 18px) clamp(20px, 2.2vw, 30px);
      color: var(--color-tinta);
      background: #fff;
      border: 1px solid rgba(var(--rgb-acento), 0.12);
      box-shadow: 0 18px 44px rgba(var(--rgb-tinta), 0.12);
      overflow: hidden;
      isolation: isolate;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .tarjeta-polaroid:hover,
    .tarjeta-polaroid:focus-within {
      border-color: rgba(var(--rgb-acento), 0.2);
      box-shadow: 0 24px 54px rgba(var(--rgb-tinta), 0.18);
    }

    .tarjeta-polaroid__frente {
      height: 100%;
      display: grid;
      grid-template-rows: minmax(0, 10%) minmax(0, 70%) minmax(0, 20%);
      gap: 12px;
      transition: opacity 220ms ease;
    }

    .tarjeta-polaroid:hover .tarjeta-polaroid__frente,
    .tarjeta-polaroid:focus-within .tarjeta-polaroid__frente {
      opacity: 0.08;
    }

    .tarjeta-polaroid__linea {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: baseline;
      color: rgba(var(--rgb-tinta), 0.7);
      font-size: clamp(0.64rem, 0.78vw, 0.78rem);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tarjeta-polaroid__linea strong,
    .tarjeta-polaroid__linea span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tarjeta-polaroid__linea--inferior {
      grid-template-columns: minmax(0, 1fr);
      gap: 5px;
      align-content: end;
      align-items: end;
    }

    .tarjeta-polaroid__linea strong {
      color: var(--color-vino);
      font-weight: 700;
    }

    .tarjeta-polaroid__tono {
      color: var(--color-tinta);
      font-size: 1.18em;
      font-weight: 700;
      line-height: 1.05;
    }

    .tarjeta-polaroid__linea .tarjeta-polaroid__tono,
    .tarjeta-polaroid__linea .tarjeta-polaroid__acabado {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }

    .tarjeta-polaroid__acabado {
      color: rgba(var(--rgb-tinta), 0.58);
      font-size: 0.86em;
      line-height: 1.08;
    }

    .tarjeta-polaroid__tono,
    .tarjeta-polaroid__acabado {
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .tarjeta-polaroid__tono {
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }

    .tarjeta-polaroid__acabado {
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }

    .tarjeta-polaroid__tono-secundario,
    .tarjeta-polaroid__texto-secundario {
      display: block;
      margin-top: 2px;
      font-size: 0.78em;
      font-weight: 700;
      line-height: 1.05;
    }

    .tarjeta-polaroid__foto {
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      background: transparent;
      overflow: hidden;
    }

    .tarjeta-polaroid__foto img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
    }

    .imagen-no-disponible {
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: 18px;
      color: rgba(var(--rgb-tinta), 0.52);
      background: transparent;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1.35;
      text-align: center;
      text-transform: uppercase;
    }

    .imagen-no-disponible[hidden] {
      display: none;
    }

    .tarjeta-polaroid__acciones {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      align-content: center;
      gap: 12px;
      padding: clamp(18px, 2vw, 28px);
      color: var(--color-tinta);
      background: rgba(255, 253, 252, 0.94);
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease;
    }

    .tarjeta-polaroid:hover .tarjeta-polaroid__acciones,
    .tarjeta-polaroid:focus-within .tarjeta-polaroid__acciones {
      opacity: 1;
      pointer-events: auto;
    }

    .tarjeta-polaroid__nombre {
      margin: 0 0 2px;
      color: var(--color-vino);
      font-family: var(--fuente-titulos);
      font-size: clamp(1.25rem, 1.8vw, 1.8rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
    }

    .tarjeta-polaroid__precio {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.7);
      font-size: 0.84rem;
    }

    .control-cantidad {
      display: grid;
      gap: 7px;
      color: var(--color-vino);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .selector-cantidad {
      width: 100%;
      min-height: 42px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: center;
      overflow: hidden;
      background: rgba(246, 241, 238, 0.72);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-control);
    }

    .control-cantidad input {
      width: 100%;
      height: 42px;
      padding: 0 6px;
      color: var(--color-tinta);
      background: transparent;
      border: 0;
      font-size: 0.92rem;
      font-weight: 700;
      text-align: center;
      outline: none;
    }

    .control-cantidad input::-webkit-outer-spin-button,
    .control-cantidad input::-webkit-inner-spin-button {
      margin: 0;
      appearance: none;
    }

    .control-cantidad input[type="number"] {
      appearance: textfield;
    }

    .boton-cantidad {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      color: var(--color-vino);
      background: transparent;
      padding: 0;
      font-size: 1.05rem;
      font-weight: 700;
      transition: color 180ms ease, background 180ms ease;
    }

    .boton-cantidad.boton-cantidad--activo {
      color: var(--color-blanco);
      background: var(--color-vino);
    }

    .boton-cantidad:active {
      color: var(--color-blanco);
      background: var(--color-acento-activo);
      transform: scale(0.96);
    }

    .selector-cantidad:hover .boton-cantidad:not(.boton-cantidad--activo) {
      color: var(--color-vino);
      background: transparent;
    }

    .boton-cantidad:focus-visible {
      color: var(--color-vino);
      background: transparent;
      outline: 2px solid rgba(var(--rgb-acento), 0.28);
      outline-offset: -4px;
    }

    .boton-tarjeta {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border-radius: var(--radio-control);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .boton-tarjeta--principal {
      color: var(--color-blanco);
      background: var(--color-vino);
    }

    .boton-tarjeta--principal:hover,
    .boton-tarjeta--principal:focus-visible {
      background: var(--color-acento-hover);
    }

    .boton-tarjeta--secundario {
      color: var(--color-vino);
      background: transparent;
      border: 1px solid rgba(var(--rgb-acento), 0.2);
    }

    .boton-tarjeta--secundario:hover,
    .boton-tarjeta--secundario:focus-visible {
      background: rgba(var(--rgb-suave), 0.12);
      border-color: rgba(var(--rgb-acento), 0.34);
    }

    .boton-tarjeta:active {
      transform: scale(0.98);
    }

    .boton-tarjeta--principal:active,
    .boton-tarjeta--secundario:active {
      color: var(--color-blanco);
      background: var(--color-acento-activo);
      border-color: var(--color-acento-activo);
    }

    .estado-productos {
      grid-column: 1 / -1;
      min-height: 140px;
      display: grid;
      place-items: center;
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.62);
      border: 1px dashed rgba(var(--rgb-acento), 0.18);
      font-size: 0.9rem;
      text-align: center;
    }

    .estado-productos a {
      color: var(--color-vino);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .paginacion-productos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      min-height: 0;
    }

    .paginacion-productos:empty {
      display: none;
    }

    .boton-pagina {
      min-width: 38px;
      min-height: 38px;
      padding: 0 12px;
      color: var(--color-vino);
      background: rgba(246, 241, 238, 0.66);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-control);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .boton-pagina.activa {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
    }

    .boton-pagina:not(:disabled):hover,
    .boton-pagina:not(:disabled):focus-visible {
      color: var(--color-blanco);
      background: var(--color-acento-hover);
      border-color: var(--color-acento-hover);
    }

    .boton-pagina:not(:disabled):active {
      color: var(--color-blanco);
      background: var(--color-acento-activo);
      border-color: var(--color-acento-activo);
      transform: scale(0.96);
    }

    .boton-pagina:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

    .puntos-paginacion {
      min-width: 28px;
      min-height: 38px;
      display: inline-grid;
      place-items: center;
      color: rgba(var(--rgb-tinta), 0.48);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
    }

    .lista-pedido {
      display: grid;
      gap: 10px;
    }

    .item-pedido {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: start;
      padding: 11px 0;
      border-bottom: 1px solid rgba(var(--rgb-acento), 0.1);
      outline: none;
    }

    .item-pedido__contenido {
      position: relative;
      min-height: 42px;
      overflow: hidden;
    }

    .item-pedido__detalle,
    .item-pedido__cantidad {
      transition: opacity 190ms ease, transform 220ms ease;
    }

    .item-pedido__detalle {
      opacity: 1;
      transform: translateY(0);
    }

    .item-pedido strong {
      display: block;
      color: var(--color-tinta);
      font-size: 0.86rem;
      line-height: 1.25;
    }

    .item-pedido span {
      display: block;
      color: rgba(var(--rgb-tinta), 0.58);
      font-size: 0.76rem;
      line-height: 1.45;
    }

    .item-pedido__precio {
      color: var(--color-vino);
      font-weight: 700;
      font-size: 0.86rem;
      white-space: nowrap;
    }

    .item-pedido__cantidad {
      position: absolute;
      top: 1px;
      left: 50%;
      width: 102px;
      display: block;
      align-items: center;
      font-size: 0.56rem;
      line-height: 1;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 9px);
    }

    .item-pedido:hover .item-pedido__detalle,
    .item-pedido:focus-within .item-pedido__detalle {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-9px);
    }

    .item-pedido:hover .item-pedido__cantidad,
    .item-pedido:focus-within .item-pedido__cantidad {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    .item-pedido .selector-cantidad--pedido {
      width: 102px;
      min-height: 0;
      height: 30px;
      display: grid;
      grid-template-columns: 22px minmax(26px, 1fr) 22px;
      background: rgba(246, 241, 238, 0.72);
      border-color: rgba(var(--rgb-acento), 0.16);
      border-radius: var(--radio-control);
    }

    .item-pedido .selector-cantidad--pedido .boton-cantidad,
    .item-pedido .selector-cantidad--pedido input {
      height: 30px;
      min-height: 0;
      font-size: 0.74rem;
      line-height: 30px;
    }

    .item-pedido .selector-cantidad--pedido .boton-cantidad {
      width: 22px;
      font-size: 0.76rem;
    }

    .item-pedido .selector-cantidad--pedido input {
      padding: 0 2px;
    }

    .item-pedido__acciones {
      display: grid;
      justify-items: end;
      align-content: start;
      gap: 8px;
    }

    .boton-eliminar-pedido {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      color: rgba(var(--rgb-acento), 0.72);
      background: rgba(246, 241, 238, 0.72);
      border: 1px solid rgba(var(--rgb-acento), 0.14);
      border-radius: var(--radio-control);
      transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .boton-eliminar-pedido svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.8;
    }

    .boton-eliminar-pedido:hover,
    .boton-eliminar-pedido:focus-visible {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
    }

    .boton-eliminar-pedido:active {
      background: var(--color-acento-activo);
      border-color: var(--color-acento-activo);
      transform: scale(0.94);
    }

    .modal-producto {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 75;
      width: min(calc(100% - 32px), 980px);
      max-height: min(88vh, 760px);
      overflow: hidden;
      background: var(--color-blanco);
      border: 1px solid var(--color-linea);
      border-radius: clamp(18px, 2vw, 28px);
      box-shadow: 0 24px 70px var(--color-sombra);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -46%) scale(0.98);
      transition: opacity 200ms ease, transform 200ms ease;
    }

    .modal-producto.abierto {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }

    .modal-producto__contenido {
      position: relative;
      max-height: min(88vh, 760px);
      display: grid;
      grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1fr);
      gap: clamp(20px, 3vw, 36px);
      align-items: start;
      padding: clamp(22px, 3vw, 36px);
      overflow-y: auto;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--rgb-acento), 0.36) transparent;
    }

    .modal-producto__contenido::-webkit-scrollbar {
      width: 8px;
      cursor: none;
    }

    .modal-producto__contenido::-webkit-scrollbar-track {
      background: transparent;
      cursor: none;
    }

    .modal-producto__contenido::-webkit-scrollbar-thumb {
      background: rgba(var(--rgb-acento), 0.34);
      border-radius: var(--radio-control);
      cursor: none;
    }

    .modal-producto__cerrar {
      position: absolute;
      right: 18px;
      top: 18px;
      z-index: 2;
      background: rgba(255, 253, 252, 0.9);
    }

    .modal-producto__media {
      position: sticky;
      top: 0;
      align-self: start;
      min-height: 360px;
      height: min(620px, calc(88vh - clamp(44px, 6vw, 72px)));
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto auto;
      place-items: stretch;
      background: var(--color-blanco);
      border-radius: clamp(14px, 1.6vw, 22px);
      overflow: hidden;
    }

    .modal-producto__media > img {
      grid-column: 1;
      grid-row: 1;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      align-self: start;
      justify-self: center;
      object-fit: contain;
      object-position: center top;
      display: block;
      transition: opacity 220ms ease;
    }

    .modal-producto__cargando-imagen {
      position: relative;
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      height: 100%;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: rgba(var(--rgb-tinta), 0.82);
      background: var(--color-blanco);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-align: center;
      text-transform: uppercase;
    }

    .modal-producto__media > .imagen-no-disponible {
      grid-column: 1;
      grid-row: 1;
    }

    .modal-producto__cargando-imagen[hidden] {
      display: none;
    }

    .modal-producto__cargando-indicador {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(var(--rgb-acento), 0.18);
      border-top-color: var(--color-acento);
      border-radius: 50%;
      animation: giro-carga-imagen 760ms linear infinite;
    }

    @keyframes giro-carga-imagen {
      to {
        transform: rotate(360deg);
      }
    }

    .modal-producto__nombre-imagen {
      position: relative;
      grid-column: 1;
      grid-row: 2;
      z-index: 2;
      margin: 0;
      padding: 9px 14px 12px;
      color: var(--color-blanco);
      background: var(--color-blanco);
      border-top: 1px solid rgba(var(--rgb-acento), 0.06);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.25;
      text-align: center;
      text-transform: uppercase;
      user-select: text;
    }

    .modal-producto__nombre-imagen::selection {
      color: var(--color-blanco);
      background: var(--color-acento);
    }

    .modal-producto__nombre-imagen::-moz-selection {
      color: var(--color-blanco);
      background: var(--color-acento);
    }

    .modal-producto__nombre-imagen[hidden] {
      display: none;
    }

    .modal-producto__media img.cambiando-imagen {
      opacity: 0;
    }

    .modal-producto__flecha {
      position: absolute;
      top: 50%;
      z-index: 3;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--color-vino);
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid rgba(var(--rgb-acento), 0.16);
      border-radius: var(--radio-control);
      box-shadow: 0 14px 32px rgba(var(--rgb-tinta), 0.12);
      backdrop-filter: blur(12px);
      transform: translateY(-50%);
      transition: color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .modal-producto__flecha:hover,
    .modal-producto__flecha:focus-visible {
      color: var(--color-blanco);
      background: var(--color-vino);
      transform: translateY(-50%) scale(1.04);
    }

    .modal-producto__flecha:active {
      background: var(--color-acento-activo);
      transform: translateY(-50%) scale(0.96);
    }

    .modal-producto__flecha svg {
      width: 19px;
      height: 19px;
      stroke-width: 1.6;
    }

    .modal-producto__flecha--anterior {
      left: 14px;
    }

    .modal-producto__flecha--siguiente {
      right: 14px;
    }

    .modal-producto__indicadores {
      position: absolute;
      left: 50%;
      bottom: 96px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 9px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(var(--rgb-acento), 0.12);
      border-radius: var(--radio-control);
      box-shadow: 0 12px 30px rgba(var(--rgb-tinta), 0.1);
      backdrop-filter: blur(12px);
      transform: translateX(-50%);
    }

    .modal-producto__indicador {
      width: 7px;
      height: 7px;
      padding: 0;
      background: rgba(var(--rgb-acento), 0.32);
      border-radius: var(--radio-control);
      transition: width 180ms ease, background 180ms ease;
    }

    .modal-producto__indicador.activo {
      width: 20px;
      background: var(--color-vino);
    }

    .modal-producto__detalle {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 16px;
      padding-right: 34px;
    }

    .modal-producto__detalle h2 {
      margin: 0;
      color: var(--color-tinta);
      font-family: var(--fuente-titulos);
      font-size: clamp(2rem, 3.6vw, 3.25rem);
      font-weight: 700;
      line-height: 0.98;
      letter-spacing: 0;
    }

    .modal-producto__detalle p,
    .resumen-producto-modal,
    .resumen-producto-modal dt,
    .resumen-producto-modal dd,
    .acordeon-producto summary {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.68);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .resumen-producto-modal {
      display: grid;
      gap: 10px;
      margin: 0;
    }

    .resumen-producto-modal div {
      display: grid;
      grid-template-columns: minmax(86px, 0.32fr) minmax(0, 1fr);
      gap: 14px;
      padding-top: 10px;
      border-top: 1px solid rgba(var(--rgb-acento), 0.1);
    }

    .resumen-producto-modal dt,
    .acordeon-producto summary {
      color: var(--color-vino);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .resumen-producto-modal dd {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.7);
    }

    .modal-producto__acciones {
      display: grid;
      grid-template-columns: minmax(120px, 0.36fr) minmax(180px, 0.64fr);
      gap: 12px;
      align-items: end;
      margin-top: 8px;
    }

    .modal-producto__compartir {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .aviso-tonos-modal {
      position: relative;
      grid-column: 1;
      grid-row: 3;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 14px 14px;
      color: rgba(var(--rgb-tinta), 0.62);
      background: rgba(255, 255, 255, 0.9);
      border-top: 1px solid rgba(var(--rgb-acento), 0.1);
      pointer-events: none;
    }

    .aviso-tonos-modal__iconos {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
    }

    .aviso-tonos-modal__iconos img {
      width: 68px;
      height: 68px;
      display: block;
      object-fit: contain;
    }

    .aviso-tonos-modal p {
      margin: 0;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.25;
    }

    .modal-producto__kit {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(var(--rgb-acento), 0.12);
      border-radius: 18px;
      background: rgba(var(--rgb-suave), 0.34);
    }

    .modal-producto__kit[hidden] {
      display: none;
    }

    .modal-producto__kit-cabecera {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      color: var(--color-blanco);
      background: var(--color-vino);
      border-radius: 14px;
    }

    .modal-producto__kit-cabecera span {
      color: currentColor;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .modal-producto__kit-cabecera p {
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.86rem;
    }

    .modal-producto__kit-lista {
      display: grid;
      gap: 10px;
      max-height: 360px;
      overflow: auto;
      padding-right: 4px;
    }

    .modal-producto__kit-item {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr) minmax(156px, 0.34fr);
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid rgba(var(--rgb-acento), 0.1);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.74);
    }

    .modal-producto__kit-imagen {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 12px;
      background: #fff;
    }

    .modal-producto__kit-imagen-boton {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      padding: 0;
      background: #fff;
      border: 0;
      border-radius: inherit;
      overflow: hidden;
    }

    .modal-producto__kit-imagen img,
    .modal-producto__kit-imagen-boton img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
    }

    .modal-producto__kit-imagen .imagen-no-disponible {
      font-size: 0.48rem;
      letter-spacing: 0.08em;
    }

    .modal-producto__kit-info {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .modal-producto__kit-info h3,
    .modal-producto__kit-info p {
      margin: 0;
    }

    .modal-producto__kit-info h3 {
      color: var(--color-tinta);
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .modal-producto__kit-info p,
    .modal-producto__kit-info small {
      color: rgba(var(--rgb-tinta), 0.68);
      font-size: 0.75rem;
      line-height: 1.32;
    }

    .modal-producto__kit-acciones {
      display: grid;
      gap: 8px;
      align-items: center;
    }

    .modal-producto__kit-acciones .selector-cantidad {
      min-height: 34px;
      grid-template-columns: 34px minmax(0, 1fr) 34px;
    }

    .modal-producto__kit-acciones .control-cantidad input,
    .modal-producto__kit-acciones input {
      height: 34px;
      font-size: 0.8rem;
      text-align: center;
      justify-self: center;
    }

    .modal-producto__kit-acciones .boton-cantidad {
      width: 34px;
      height: 34px;
      min-height: 34px;
    }

    .modal-producto__kit-acciones .boton-tarjeta {
      min-height: 34px;
      font-size: 0.72rem;
    }

    .boton-tarjeta--whatsapp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .boton-tarjeta--whatsapp svg {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
    }

    .acordeon-producto {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(var(--rgb-acento), 0.12);
    }

    .acordeon-producto details {
      border-bottom: 1px solid rgba(var(--rgb-acento), 0.12);
    }

    .acordeon-producto summary {
      min-height: 44px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      cursor: var(--cursor-personalizado);
      list-style: none;
    }

    .acordeon-producto summary::-webkit-details-marker {
      display: none;
    }

    .acordeon-producto summary::after {
      content: "+";
      color: var(--color-vino);
      font-size: 1.1rem;
      line-height: 1;
    }

    .acordeon-producto details[open] summary::after {
      content: "-";
    }

    .lightbox-kit {
      position: fixed;
      inset: 0;
      z-index: 12650;
      display: grid;
      place-items: center;
      padding: clamp(20px, 5vw, 64px);
      background: rgba(var(--rgb-tinta), 0.62);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
    }

    .lightbox-kit.abierto {
      opacity: 1;
      pointer-events: auto;
    }

    .lightbox-kit__cerrar {
      position: absolute;
      top: max(18px, env(safe-area-inset-top, 0px));
      right: max(18px, env(safe-area-inset-right, 0px));
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      color: var(--color-tinta);
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(var(--rgb-acento), 0.16);
      border-radius: 999px;
      box-shadow: 0 12px 28px rgba(var(--rgb-tinta), 0.12);
    }

    .lightbox-kit__figura {
      width: min(86vw, 820px);
      max-height: 86vh;
      display: grid;
      gap: 14px;
      margin: 0;
      padding: clamp(16px, 2.6vw, 26px);
      background: var(--color-blanco);
      border-radius: 20px;
      box-shadow: 0 24px 60px rgba(var(--rgb-tinta), 0.22);
    }

    .lightbox-kit__figura img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: min(70vh, 640px);
      object-fit: contain;
      justify-self: center;
      display: block;
    }

    .lightbox-kit__figura figcaption {
      color: rgba(var(--rgb-tinta), 0.72);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .acordeon-producto details p {
      padding: 0 0 14px;
    }

    .capa-fondo {
      position: fixed;
      inset: 0;
      z-index: 45;
      background: rgba(var(--rgb-tinta), 0.34);
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease;
    }

    .capa-fondo.activa {
      opacity: 1;
      pointer-events: auto;
    }

    .notificacion-sitio {
      position: fixed;
      top: clamp(16px, 3vw, 28px);
      right: clamp(16px, 3vw, 30px);
      z-index: 95;
      width: min(calc(100% - 32px), 390px);
      padding: 14px 18px;
      color: var(--color-blanco);
      background: var(--color-vino);
      border: 1px solid rgba(255, 253, 252, 0.22);
      border-radius: 18px;
      box-shadow: 0 18px 46px rgba(var(--rgb-tinta), 0.24);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.45;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-12px);
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .notificacion-sitio.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .popup-visitante {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(var(--rgb-tinta), 0.34);
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease;
    }

    .popup-visitante.abierto {
      opacity: 1;
      pointer-events: auto;
    }

    .popup-visitante__tarjeta {
      width: min(100%, 420px);
      display: grid;
      gap: 16px;
      padding: clamp(24px, 4vw, 38px);
      color: var(--color-tinta);
      background: var(--color-blanco);
      border: 1px solid var(--color-linea);
      border-radius: clamp(18px, 2vw, 28px);
      box-shadow: 0 24px 70px var(--color-sombra);
      transform: translateY(12px) scale(0.98);
      transition: transform 220ms ease;
    }

    .popup-visitante.abierto .popup-visitante__tarjeta {
      transform: translateY(0) scale(1);
    }

    .popup-visitante h2 {
      margin: 0;
      font-family: var(--fuente-titulos);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      line-height: 1;
    }

    .popup-visitante input {
      width: 100%;
      min-height: 48px;
      padding: 0 16px;
      color: var(--color-tinta);
      background: rgba(var(--rgb-suave), 0.1);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-control);
      outline: none;
    }

    .popup-visitante input:focus {
      border-color: var(--color-rosa-profundo);
      box-shadow: 0 0 0 4px rgba(var(--rgb-suave), 0.16);
    }

    .popup-visitante p {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.62);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .popup-visitante__acciones {
      display: grid;
      grid-template-columns: 1fr 0.72fr;
      gap: 10px;
      align-items: center;
    }

    .panel-pedido {
      position: fixed;
      top: 0;
      right: clamp(0px, 3vw, 34px);
      z-index: 60;
      width: min(100%, 420px);
      max-height: min(90vh, 680px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      background: var(--color-blanco);
      border: 1px solid var(--color-linea);
      box-shadow: 0 24px 70px var(--color-sombra);
      transform: translateY(-110%);
      transition: transform 280ms ease;
    }

    .panel-pedido.abierto {
      transform: translateY(0);
    }

    .panel-pedido__cabecera {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: start;
      padding: 26px 24px 18px;
      border-bottom: 1px solid var(--color-linea);
    }

    .panel-pedido__etiqueta,
    .modal-info__etiqueta,
    .busqueda-flotante__etiqueta {
      color: var(--color-vino);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .modal-info h2 {
      margin: 10px 0 0;
      font-family: var(--fuente-titulos);
      font-size: clamp(2.2rem, 7vw, 3.25rem);
      font-weight: 700;
      line-height: 0.95;
      letter-spacing: 0;
    }

    .panel-pedido h2 {
      margin: 8px 0 0;
      font-family: var(--fuente-titulos);
      font-size: clamp(2rem, 5vw, 2.55rem);
      font-weight: 700;
      line-height: 0.95;
      letter-spacing: 0;
    }

    .boton-cerrar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      color: var(--color-tinta);
      background: transparent;
      border: 1px solid rgba(var(--rgb-acento), 0.16);
      border-radius: var(--radio-control);
    }

    .boton-cerrar:hover,
    .boton-cerrar:focus-visible {
      color: var(--color-vino);
      border-color: rgba(var(--rgb-acento), 0.34);
    }

    .boton-cerrar:active {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
      transform: scale(0.94);
    }

    .panel-pedido__contenido {
      overflow: auto;
      padding: 16px 24px;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--rgb-acento), 0.36) transparent;
    }

    .panel-pedido__contenido::-webkit-scrollbar {
      width: 8px;
      cursor: none;
    }

    .panel-pedido__contenido::-webkit-scrollbar-track {
      background: transparent;
      cursor: none;
    }

    .panel-pedido__contenido::-webkit-scrollbar-thumb {
      background: rgba(var(--rgb-acento), 0.34);
      border-radius: var(--radio-control);
      cursor: none;
    }

    .pedido-vacio {
      min-height: 0;
      padding: 2px 0 0;
      color: rgba(var(--rgb-tinta), 0.74);
      text-align: center;
    }

    .pedido-vacio strong {
      display: block;
      margin-bottom: 5px;
      color: var(--color-tinta);
      font-family: var(--fuente-titulos);
      font-size: 1.08rem;
      font-weight: 700;
    }

    .pedido-vacio span {
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .panel-pedido__pie {
      display: grid;
      gap: 13px;
      padding: 16px 24px 20px;
      border-top: 1px solid var(--color-linea);
    }

    .campo-nota {
      display: grid;
      gap: 8px;
    }

    .campo-nota label {
      color: var(--color-vino);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .campo-nota textarea {
      width: 100%;
      min-height: 78px;
      resize: vertical;
      padding: 12px 14px;
      color: var(--color-tinta);
      background: rgba(246, 241, 238, 0.54);
      border: 1px solid rgba(var(--rgb-acento), 0.18);
      border-radius: var(--radio-suave);
      font-size: 0.9rem;
      line-height: 1.5;
      outline: none;
    }

    .campo-nota textarea:focus {
      border-color: var(--color-rosa-profundo);
      box-shadow: 0 0 0 4px rgba(var(--rgb-suave), 0.16);
    }

    .resumen-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 18px;
      color: rgba(var(--rgb-tinta), 0.72);
      font-size: 0.9rem;
    }

    .resumen-total strong {
      color: var(--color-tinta);
      font-family: var(--fuente-titulos);
      font-size: 1.3rem;
      font-weight: 700;
    }

    .boton-principal,
    .boton-secundario {
      min-height: 42px;
      width: 100%;
      border-radius: var(--radio-control);
      font-size: 0.86rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .boton-principal {
      color: var(--color-blanco);
      background: var(--color-vino);
    }

    .boton-principal:hover,
    .boton-principal:focus-visible {
      background: var(--color-acento-activo);
    }

    .boton-principal:active {
      background: var(--color-tinta);
      transform: scale(0.98);
    }

    .boton-secundario {
      color: var(--color-vino);
      background: transparent;
      border: 1px solid rgba(var(--rgb-acento), 0.22);
    }

    .boton-secundario:hover,
    .boton-secundario:focus-visible {
      background: rgba(var(--rgb-suave), 0.12);
      border-color: rgba(var(--rgb-acento), 0.34);
    }

    .boton-secundario:active {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
      transform: scale(0.98);
    }

    .texto-legal {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.54);
      font-size: 0.74rem;
      line-height: 1.5;
      text-align: center;
    }

    .pie-sitio {
      margin-top: clamp(44px, 7vw, 90px);
      background: var(--color-blanco);
      color: var(--color-tinta);
    }

    .pie-sitio--oculto {
      display: none;
    }

    .pie-sitio__contacto {
      min-height: 170px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 14px;
      padding: 34px 18px 46px;
      text-align: center;
    }

    .pie-sitio__redes {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 18px;
    }

    .pie-sitio__redes a {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      color: var(--color-vino);
      border-radius: var(--radio-control);
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .pie-sitio__redes svg {
      width: 30px;
      height: 30px;
      stroke-width: 1.7;
    }

    .pie-sitio__redes a:hover,
    .pie-sitio__redes a:focus-visible {
      color: var(--color-blanco);
      background: var(--color-vino);
      transform: translateY(-1px);
    }

    .pie-sitio__correo,
    .pie-sitio__whatsapp {
      color: rgba(var(--rgb-tinta), 0.74);
      font-size: clamp(0.92rem, 1.2vw, 1.08rem);
      letter-spacing: 0.02em;
    }

    .pie-sitio__whatsapp {
      color: var(--color-vino);
    }

    .pie-sitio__legal {
      position: relative;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      min-height: 54px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px 12px;
      padding: 16px 18px;
      color: rgba(255, 253, 252, 0.74);
      background: var(--color-tinta);
      font-size: 0.72rem;
      letter-spacing: 0.02em;
      text-align: center;
    }

    .pie-sitio__legal a {
      color: var(--color-blanco);
    }

    .pie-sitio__legal a:hover,
    .pie-sitio__legal a:focus-visible {
      color: var(--color-rosa-suave);
    }

    .modal-info,
    .busqueda-flotante {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 70;
      width: min(calc(100% - 32px), 620px);
      max-height: min(84vh, 680px);
      overflow: auto;
      padding: clamp(28px, 5vw, 42px);
      background: var(--color-blanco);
      border: 1px solid var(--color-linea);
      border-radius: clamp(18px, 2vw, 28px);
      box-shadow: 0 24px 70px var(--color-sombra);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -46%) scale(0.98);
      transition: opacity 200ms ease, transform 200ms ease;
    }

    .modal-info.abierto,
    .busqueda-flotante.abierta {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }

    .modal-horizontal-info {
      position: fixed;
      inset: 0;
      z-index: 82;
      display: grid;
      place-items: center;
      padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(18px);
      transition: opacity 240ms ease, visibility 240ms ease, transform 240ms ease;
    }

    .modal-horizontal-info.abierto {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .modal-horizontal-info__dialogo {
      position: relative;
      width: min(1180px, 92vw);
      height: min(760px, 82vh);
      overflow: hidden;
      color: var(--color-blanco);
      background: var(--color-tinta);
      border-radius: clamp(20px, 2vw, 30px);
      box-shadow: 0 34px 90px rgba(var(--rgb-tinta), 0.28);
    }

    .modal-horizontal-info__ventana {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .modal-horizontal-info__pista {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 620ms cubic-bezier(0.72, 0, 0.18, 1);
      will-change: transform;
    }

    .modal-horizontal-info__panel {
      position: relative;
      flex: 0 0 100%;
      min-width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(220px, 0.88fr) minmax(300px, 0.92fr);
      align-items: center;
      padding: clamp(42px, 7vw, 92px);
      overflow: hidden;
      background:
        linear-gradient(100deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08)),
        var(--fondo-modal-horizontal, linear-gradient(135deg, rgba(var(--rgb-tinta), 0.96), rgba(var(--rgb-acento), 0.76)));
      background-position: center;
      background-size: cover;
      box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.2);
    }

    .modal-horizontal-info__panel::before,
    .modal-horizontal-info__panel::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .modal-horizontal-info__panel::before {
      background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.28));
      clip-path: var(--diagonal-modal-principal, polygon(0 0, 42% 0, 25% 100%, 0 100%));
      opacity: 0.78;
    }

    .modal-horizontal-info__panel::after {
      left: var(--diagonal-modal-secundaria-x, 18%);
      width: var(--diagonal-modal-secundaria-ancho, 28%);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        rgba(0, 0, 0, 0.16);
      clip-path: var(--diagonal-modal-secundaria, polygon(34% 0, 100% 0, 66% 100%, 0 100%));
      backdrop-filter: saturate(1.18);
      opacity: var(--opacidad-diagonal-modal-secundaria, 0.5);
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="quienes-somos"] {
      --fondo-modal-horizontal: url("../recursos/PORTADA QUIENES SOMOS.png");
      --diagonal-modal-principal: polygon(0 0, 43% 0, 24% 100%, 0 100%);
      --diagonal-modal-secundaria-x: 20%;
      --diagonal-modal-secundaria-ancho: 30%;
      --diagonal-modal-secundaria: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
      --opacidad-diagonal-modal-secundaria: 0.42;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="quienes-somos"] .modal-horizontal-info__contenido {
      grid-column: 1;
      justify-self: start;
      margin-right: auto;
      margin-left: 0;
      text-align: left;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="quiero-ser-distribuidor"] {
      --fondo-modal-horizontal: url("../recursos/PEM.jpg.jpeg");
      --diagonal-modal-principal: polygon(0 0, 34% 0, 58% 100%, 0 100%);
      --diagonal-modal-secundaria-x: 54%;
      --diagonal-modal-secundaria-ancho: 34%;
      --diagonal-modal-secundaria: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
      --opacidad-diagonal-modal-secundaria: 0.32;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="politicas-envio"] {
      --fondo-modal-horizontal: url("../recursos/2.png");
      --diagonal-modal-principal: polygon(100% 0, 58% 0, 76% 100%, 100% 100%);
      --diagonal-modal-secundaria-x: 48%;
      --diagonal-modal-secundaria-ancho: 32%;
      --diagonal-modal-secundaria: polygon(0 0, 72% 0, 100% 100%, 28% 100%);
      --opacidad-diagonal-modal-secundaria: 0.28;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="faq"] {
      --fondo-modal-horizontal: url("../recursos/3.png");
      --diagonal-modal-principal: polygon(0 0, 28% 0, 58% 100%, 0 100%);
      --diagonal-modal-secundaria-x: 42%;
      --diagonal-modal-secundaria-ancho: 34%;
      --diagonal-modal-secundaria: polygon(24% 0, 100% 0, 74% 100%, 0 100%);
      --opacidad-diagonal-modal-secundaria: 0.36;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="contacto"] {
      --fondo-modal-horizontal: url("../recursos/ModalSec_P.png");
      --diagonal-modal-principal: polygon(100% 0, 72% 0, 44% 100%, 100% 100%);
      --diagonal-modal-secundaria-x: 14%;
      --diagonal-modal-secundaria-ancho: 36%;
      --diagonal-modal-secundaria: polygon(0 0, 76% 0, 100% 100%, 24% 100%);
      --opacidad-diagonal-modal-secundaria: 0.22;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="faq"] {
      grid-template-columns: 1fr;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="contacto"] {
      grid-template-columns: minmax(300px, 0.9fr) minmax(220px, 0.95fr);
    }

    .modal-horizontal-info__contenido {
      position: relative;
      z-index: 1;
      grid-column: 2;
      width: min(560px, 100%);
      margin-left: auto;
      text-align: right;
      min-height: 0;
    }

    .modal-horizontal-info__panel[data-panel-horizontal-info="faq"] .modal-horizontal-info__contenido {
      grid-column: 1;
      width: min(560px, 48vw);
      margin: 0 auto 0 0;
      text-align: left;
    }

    .modal-horizontal-info__etiqueta {
      display: inline-block;
      margin-bottom: 14px;
      color: rgba(255, 255, 255, 0.84);
      font-size: clamp(0.66rem, 0.9vw, 0.8rem);
      letter-spacing: 0.34em;
      text-transform: uppercase;
    }

    .modal-horizontal-info h2 {
      margin: 0 0 16px;
      color: var(--color-blanco);
      font-size: clamp(2.05rem, 4.8vw, 4.7rem);
      line-height: 0.96;
      font-weight: 700;
      text-transform: none;
    }

    .modal-horizontal-info p {
      margin: 0 0 14px;
      color: rgba(255, 255, 255, 0.88);
      font-size: clamp(0.9rem, 1.2vw, 1.02rem);
      line-height: 1.66;
    }

    .modal-horizontal-info__contenido a {
      color: var(--color-blanco);
      text-underline-offset: 0.22em;
    }

    .modal-horizontal-info__scroll {
      max-height: min(440px, calc(82vh - 220px));
      min-height: 0;
      overflow-y: auto;
      padding-right: 10px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.34) transparent;
    }

    .modal-horizontal-info__scroll::-webkit-scrollbar {
      width: 7px;
    }

    .modal-horizontal-info__scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    .modal-horizontal-info__scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.34);
      border-radius: var(--radio-control);
    }

    .modal-horizontal-info__scroll--texto {
      padding-left: 2px;
    }

    .modal-horizontal-info__acordeones {
      display: grid;
      gap: 10px;
      text-align: left;
    }

    .modal-horizontal-info__acordeones details {
      min-width: 0;
      padding: 13px 15px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 16px;
      backdrop-filter: blur(10px);
    }

    .modal-horizontal-info__acordeones summary {
      position: relative;
      display: block;
      padding-right: 24px;
      color: var(--color-blanco);
      font-size: clamp(0.82rem, 1vw, 0.94rem);
      font-weight: 700;
      line-height: 1.35;
      cursor: var(--cursor-personalizado);
      list-style: none;
    }

    .modal-horizontal-info__acordeones summary::-webkit-details-marker {
      display: none;
    }

    .modal-horizontal-info__acordeones summary::after {
      content: "+";
      position: absolute;
      top: 0;
      right: 0;
      color: rgba(255, 255, 255, 0.84);
    }

    .modal-horizontal-info__acordeones details[open] summary::after {
      content: "-";
    }

    .modal-horizontal-info__acordeones p {
      margin: 10px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: clamp(0.76rem, 0.92vw, 0.88rem);
      line-height: 1.55;
    }

    .modal-horizontal-info__preguntas {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      text-align: left;
    }

    .modal-horizontal-info__scroll--preguntas {
      max-height: min(470px, calc(82vh - 190px));
    }

    .modal-horizontal-info__grupo-preguntas {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 18px;
      backdrop-filter: blur(10px);
    }

    .modal-horizontal-info__grupo-preguntas h3 {
      margin: 0 0 4px;
      color: var(--color-blanco);
      font-size: clamp(0.82rem, 1vw, 0.95rem);
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1.25;
      text-transform: uppercase;
    }

    .modal-horizontal-info__preguntas details {
      min-width: 0;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 14px;
    }

    .modal-horizontal-info__preguntas summary {
      position: relative;
      display: block;
      padding-right: 22px;
      color: var(--color-blanco);
      font-size: clamp(0.78rem, 1vw, 0.92rem);
      line-height: 1.35;
      cursor: var(--cursor-personalizado);
      list-style: none;
    }

    .modal-horizontal-info__preguntas summary::-webkit-details-marker {
      display: none;
    }

    .modal-horizontal-info__preguntas summary::after {
      content: "+";
      position: absolute;
      top: 0;
      right: 0;
      color: rgba(255, 255, 255, 0.84);
    }

    .modal-horizontal-info__preguntas details[open] summary::after {
      content: "-";
    }

    .modal-horizontal-info__preguntas p {
      margin: 10px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: clamp(0.74rem, 0.9vw, 0.86rem);
      line-height: 1.52;
    }

    .modal-horizontal-info__contenido--contacto {
      grid-column: 1;
      justify-self: start;
      margin-right: auto;
      margin-left: 0;
      text-align: left;
    }

    .modal-horizontal-info__contenido--contacto .modal-horizontal-info__contacto {
      justify-items: start;
    }

    .modal-horizontal-info__contacto {
      display: grid;
      justify-items: end;
      gap: 12px;
      margin-top: 24px;
    }

    .modal-horizontal-info__contacto a {
      color: var(--color-blanco);
      border-bottom: 1px solid rgba(255, 255, 255, 0.46);
    }

    .modal-horizontal-info__cerrar {
      position: absolute;
      top: 22px;
      right: 22px;
      z-index: 4;
      color: var(--color-blanco);
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(10px);
    }

    .modal-horizontal-info__cerrar:hover,
    .modal-horizontal-info__cerrar:focus-visible {
      color: var(--color-tinta);
      background: var(--color-blanco);
    }

    .modal-horizontal-info__flecha {
      position: absolute;
      top: 50%;
      z-index: 3;
      width: clamp(44px, 4.8vw, 58px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      color: var(--color-blanco);
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 50%;
      box-shadow: 0 16px 34px rgba(var(--rgb-tinta), 0.18);
      transform: translateY(-50%);
      transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
      backdrop-filter: blur(14px);
    }

    .modal-horizontal-info__flecha:hover,
    .modal-horizontal-info__flecha:focus-visible {
      color: var(--color-tinta);
      background: var(--color-blanco);
      transform: translateY(-50%) scale(1.04);
    }

    .modal-horizontal-info__flecha:disabled {
      opacity: 0;
      pointer-events: none;
    }

    .modal-horizontal-info__flecha svg {
      width: 22px;
      height: 22px;
      stroke-width: 1.7;
    }

    .modal-horizontal-info__flecha--anterior {
      left: 24px;
    }

    .modal-horizontal-info__flecha--siguiente {
      right: 24px;
    }

    .modal-horizontal-info__marcadores {
      position: absolute;
      left: 50%;
      bottom: 22px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: var(--radio-control);
      backdrop-filter: blur(12px);
      transform: translateX(-50%);
    }

    .modal-horizontal-info__marcadores button {
      width: 8px;
      height: 8px;
      padding: 0;
      background: rgba(255, 255, 255, 0.54);
      border-radius: var(--radio-control);
      transition: width 180ms ease, background 180ms ease;
    }

    .modal-horizontal-info__marcadores button.activo {
      width: 28px;
      background: var(--color-blanco);
    }

    .modal-info__cabecera,
    .busqueda-flotante__cabecera {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: start;
      margin-bottom: 22px;
    }

    .modal-info p {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.72);
      line-height: 1.75;
    }

    .modal-info__lista {
      display: grid;
      gap: 12px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .modal-info__lista li {
      padding-left: 18px;
      border-left: 1px solid var(--color-rosa-suave);
      color: rgba(var(--rgb-tinta), 0.74);
      line-height: 1.55;
    }

    .busqueda-flotante__formulario {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    .busqueda-flotante input {
      min-width: 0;
      height: 52px;
      padding: 0 16px;
      color: var(--color-tinta);
      background: rgba(246, 241, 238, 0.74);
      border: 1px solid rgba(var(--rgb-acento), 0.2);
      border-radius: var(--radio-control);
      outline: none;
    }

    .busqueda-flotante input:focus {
      border-color: var(--color-rosa-profundo);
      box-shadow: 0 0 0 4px rgba(var(--rgb-suave), 0.16);
    }

    .boton-buscar {
      min-width: 112px;
      height: 52px;
      color: var(--color-blanco);
      background: var(--color-vino);
      border-radius: var(--radio-control);
      font-weight: 700;
    }

    .boton-buscar:hover,
    .boton-buscar:focus-visible {
      background: var(--color-acento-hover);
    }

    .boton-buscar:active {
      background: var(--color-acento-activo);
      transform: scale(0.98);
    }

    @media (max-width: 920px) {
      .barra-encabezado {
        gap: 16px;
      }

      .modal-horizontal-info {
        padding: 12px;
      }

      .modal-horizontal-info__dialogo {
        width: min(96vw, 720px);
        height: min(86vh, 760px);
        border-radius: 22px;
      }

      .modal-horizontal-info__panel {
        grid-template-columns: 1fr;
        align-items: end;
        padding: 70px 24px 82px;
      }

      .modal-horizontal-info__panel::before {
        clip-path: var(--diagonal-modal-principal, polygon(0 0, 70% 0, 40% 100%, 0 100%));
      }

      .modal-horizontal-info__panel::after {
        left: var(--diagonal-modal-secundaria-x, 26%);
        width: var(--diagonal-modal-secundaria-ancho, 44%);
      }

      .modal-horizontal-info__contenido {
        grid-column: 1;
        margin: 0;
        text-align: left;
      }

      .modal-horizontal-info h2 {
        font-size: clamp(1.9rem, 10vw, 3.3rem);
      }

      .modal-horizontal-info p {
        font-size: 0.9rem;
        line-height: 1.58;
      }

      .modal-horizontal-info__scroll,
      .modal-horizontal-info__scroll--preguntas {
        max-height: min(52vh, 520px);
      }

      .modal-horizontal-info__preguntas {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .modal-horizontal-info__preguntas details {
        padding: 10px 12px;
        border-radius: 14px;
      }

      .modal-horizontal-info__preguntas summary {
        font-size: 0.84rem;
      }

      .modal-horizontal-info__preguntas p {
        font-size: 0.78rem;
      }

      .modal-horizontal-info__acordeones details,
      .modal-horizontal-info__grupo-preguntas {
        border-radius: 14px;
      }

      .modal-horizontal-info__contacto {
        justify-items: start;
      }

      .modal-horizontal-info__contenido--contacto {
        justify-self: start;
        margin-left: 0;
        text-align: left;
      }

      .modal-horizontal-info__flecha {
        top: auto;
        bottom: 22px;
        width: 44px;
        transform: none;
      }

      .modal-horizontal-info__flecha:hover,
      .modal-horizontal-info__flecha:focus-visible {
        transform: scale(1.04);
      }

      .modal-horizontal-info__flecha--anterior {
        left: 20px;
      }

      .modal-horizontal-info__flecha--siguiente {
        right: 20px;
      }

      .navegacion-principal {
        justify-content: flex-start;
        gap: 18px;
        overflow-x: hidden;
        padding: 8px 2px;
        scrollbar-width: none;
      }

      .navegacion-principal::-webkit-scrollbar {
        display: none;
      }

      .hero-capsula {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "geles geles"
          "nail-art nail-art"
          "base-color basicos"
          "kits-accesorios construccion";
      }

      .tabla-paletas {
        grid-template-columns: 1fr;
      }

      .panel-informativo__contenido--columnas,
      .panel-informativo__preguntas {
        grid-template-columns: 1fr;
      }

      .buscador-productos__cabecera {
        display: block;
      }

      .formulario-buscador-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

      .contenido-productos {
        grid-template-columns: 1fr;
      }

      .imagen-fija-productos {
        display: none;
      }

      .modal-producto__contenido {
        grid-template-columns: 1fr;
      }

      .modal-producto__media {
        min-height: 300px;
      }

      .panel-paletas {
        min-height: auto;
      }

      .modulo-hero {
        min-height: 190px;
      }

      .modulo-hero--geles {
        min-height: 320px;
      }

    }

    @media (max-width: 700px) {
      :root {
        --alto-header: 62px;
        --alto-barra-anuncio: 36px;
      }

      .barra-anuncio {
        gap: 8px;
        padding: 5px 10px;
      }

      .barra-anuncio__texto {
        padding-left: 28px;
        font-size: 0.58rem;
        letter-spacing: 0.02em;
        line-height: 1.2;
      }

      .barra-anuncio__cerrar {
        width: 22px;
        height: 22px;
      }

      .paleta-flotante {
        left: 50%;
        right: auto;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        top: auto;
        width: 54px;
        max-width: 54px;
        align-items: center;
        overflow: visible;
        transform: translateX(-50%);
      }

      .paleta-flotante__panel {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        width: min(260px, calc(100vw - 24px));
        width: min(260px, calc(100dvw - 24px));
        max-width: calc(100dvw - 24px);
        margin: 0;
        padding: 10px;
        border-radius: 16px;
        box-shadow: 0 18px 42px rgba(var(--rgb-tinta), 0.16);
        transform: translateX(-50%);
      }

      .paleta-flotante__boton {
        width: 54px;
        height: 54px;
        box-shadow: 0 14px 34px rgba(var(--rgb-secundario), 0.26);
      }

      .paleta-flotante__boton svg {
        width: 22px;
        height: 22px;
      }

      .paleta-opcion {
        min-height: 44px;
        padding: 10px;
      }

      .paleta-opcion__muestra {
        width: 38px;
        height: 24px;
      }

      .ayuda-whatsapp-flotante {
        display: none;
      }

      .escenario-portada {
        padding: 0;
      }

      .contenedor-portada {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        padding: 10px 10px 0;
        border-radius: 0;
      }

      .barra-encabezado {
        position: relative;
        width: 100%;
        gap: 12px;
        padding-top: 0;
        overflow: visible;
      }

      .marca-textual__logo {
        height: 42px;
      }

      .navegacion-principal {
        position: fixed;
        top: calc(var(--alto-barra-anuncio) + var(--alto-header) - 16px);
        left: 10px;
        right: 10px;
        z-index: 80;
        flex: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        width: auto;
        max-height: min(72vh, 360px);
        padding: 10px;
        background: rgba(255, 253, 252, 0.96);
        border: 1px solid rgba(var(--rgb-acento), 0.12);
        border-radius: 18px;
        box-shadow: 0 24px 54px rgba(var(--rgb-tinta), 0.14);
        backdrop-filter: blur(18px);
        opacity: 0;
        pointer-events: none;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateY(-8px);
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .menu-movil-abierto .navegacion-principal,
      body.menu-movil-abierto .navegacion-principal {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .navegacion-principal .enlace-modal {
        width: 100%;
        padding: 13px 14px;
        border-radius: 12px;
        color: rgba(var(--rgb-tinta), 0.74);
      }

      .navegacion-principal .enlace-modal:hover,
      .navegacion-principal .enlace-modal:focus-visible,
      .navegacion-principal .enlace-modal.activo {
        color: var(--color-vino);
        background: rgba(var(--rgb-acento), 0.08);
      }

      .slideshow-portada {
        height: clamp(210px, 56vw, 280px);
        min-height: clamp(210px, 56vw, 280px);
        max-height: 280px;
        margin-top: calc(var(--alto-barra-anuncio) + var(--alto-header) - 10px);
      }

      .slideshow-portada::after {
        height: 92px;
      }

      .slideshow-portada__slide img {
        transform: none;
        backface-visibility: visible;
      }

      .slideshow-portada__marcadores {
        bottom: 66px;
      }

      .slideshow-portada__flecha {
        width: 38px;
        height: 38px;
      }

      .slideshow-portada__flecha {
        top: 42%;
      }

      .slideshow-portada__flecha svg {
        width: 21px;
        height: 21px;
      }

      .acciones-encabezado {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        gap: 5px;
      }

      .encabezado-sitio {
        height: var(--alto-header);
      }

      .enlace-modal {
        font-size: 0.68rem;
      }

      .acciones-encabezado {
        gap: 5px;
      }

      .modal-horizontal-info__dialogo {
        width: calc(100vw - 20px);
        height: min(88vh, 760px);
      }

      .modal-horizontal-info {
        --inicio-modal-horizontal-movil: calc(var(--alto-barra-anuncio) + (var(--alto-header) / 2));
        --reserva-burbuja-horizontal-movil: calc(104px + max(10px, env(safe-area-inset-bottom, 0px)));
        padding:
          var(--inicio-modal-horizontal-movil)
          10px
          var(--reserva-burbuja-horizontal-movil);
        place-items: start center;
      }

      .modal-horizontal-info__dialogo {
        height: calc(100vh - var(--inicio-modal-horizontal-movil) - var(--reserva-burbuja-horizontal-movil));
        height: calc(100dvh - var(--inicio-modal-horizontal-movil) - var(--reserva-burbuja-horizontal-movil));
        max-height: calc(100vh - var(--inicio-modal-horizontal-movil) - var(--reserva-burbuja-horizontal-movil));
        max-height: calc(100dvh - var(--inicio-modal-horizontal-movil) - var(--reserva-burbuja-horizontal-movil));
      }

      .modal-horizontal-info__panel {
        align-items: center;
        padding: 62px 18px 56px;
      }

      .modal-horizontal-info__etiqueta {
        display: none;
      }

      .modal-horizontal-info h2 {
        margin-bottom: 12px;
        font-size: clamp(1.55rem, 8vw, 2.55rem);
      }

      .modal-horizontal-info p {
        font-size: 0.8rem;
        line-height: 1.5;
      }

      .modal-horizontal-info__scroll,
      .modal-horizontal-info__scroll--preguntas {
        max-height: min(50vh, 430px);
        padding-right: 6px;
      }

      .modal-horizontal-info__preguntas {
        grid-template-columns: 1fr;
      }

      .modal-horizontal-info__panel[data-panel-horizontal-info="faq"] {
        align-items: center;
      }

      .modal-horizontal-info__panel[data-panel-horizontal-info="faq"] .modal-horizontal-info__contenido {
        width: min(100%, 560px);
        margin: 0 auto;
        justify-self: center;
        text-align: left;
      }

      .modal-horizontal-info__grupo-preguntas {
        padding: 11px;
      }

      .modal-horizontal-info__acordeones details,
      .modal-horizontal-info__preguntas details {
        padding: 9px 10px;
      }

      .modal-horizontal-info__acordeones summary,
      .modal-horizontal-info__preguntas summary {
        font-size: 0.76rem;
      }

      .modal-horizontal-info__acordeones p,
      .modal-horizontal-info__preguntas p {
        font-size: 0.72rem;
      }

      .modal-horizontal-info__grupo-preguntas h3 {
        font-size: 0.74rem;
      }

      .modal-horizontal-info__flecha {
        bottom: 14px;
        width: 30px;
        min-width: 30px;
      }

      .modal-horizontal-info__flecha svg {
        width: 15px;
        height: 15px;
      }

      .modal-horizontal-info__flecha--anterior {
        left: 14px;
      }

      .modal-horizontal-info__flecha--siguiente {
        right: 14px;
      }

      .modal-horizontal-info__marcadores {
        bottom: 14px;
        gap: 4px;
        padding: 4px 6px;
      }

      .modal-horizontal-info__marcadores button {
        width: 4px;
        height: 4px;
      }

      .modal-horizontal-info__marcadores button.activo {
        width: 14px;
      }

      .boton-menu-movil {
        display: inline-grid;
      }

      .boton-whatsapp-movil {
        display: inline-grid;
        color: var(--color-blanco);
        background: var(--color-verde-natural);
        border-color: transparent;
      }

      .boton-whatsapp-movil svg {
        width: 20px;
        height: 20px;
        transform: translateY(-1px);
      }

      .boton-whatsapp-movil__globo {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 3;
        display: block;
        min-width: max-content;
        padding: 7px 11px;
        color: var(--color-tinta);
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(var(--rgb-acento), 0.16);
        border-radius: var(--radio-control);
        box-shadow: 0 12px 28px rgba(var(--rgb-tinta), 0.13);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 1;
        white-space: nowrap;
        backdrop-filter: blur(8px);
        transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease;
      }

      .boton-whatsapp-movil__globo::before {
        content: "";
        position: absolute;
        top: -5px;
        right: 13px;
        width: 10px;
        height: 10px;
        background: inherit;
        border-top: 1px solid rgba(var(--rgb-acento), 0.16);
        border-left: 1px solid rgba(var(--rgb-acento), 0.16);
        transform: rotate(45deg);
      }

      .boton-whatsapp-movil.boton-whatsapp-movil--globo-oculto .boton-whatsapp-movil__globo {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
      }

      .boton-icono {
        width: 34px;
        height: 34px;
      }

      .seccion-muestra {
        width: 100%;
        padding-top: calc(var(--alto-barra-anuncio) + var(--alto-header) + 8px);
      }

      .slideshow-portada:not(.slideshow-portada--oculto) + .seccion-muestra {
        margin-top: -50px;
      }

      .seccion-muestra h1 {
        max-width: 100%;
        font-size: clamp(2rem, 8.9vw, 2.25rem);
        line-height: 0.98;
      }

      .hero-capsula {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "geles geles"
          "nail-art base-color"
          "basicos kits-accesorios"
          "construccion construccion";
        gap: 10px;
        padding: 0;
        border-radius: 22px;
      }

      .panel-paletas {
        padding: 22px;
        border-radius: 22px;
      }

      .panel-informativo {
        min-height: auto;
        padding: 18px 14px 8px;
      }

      .panel-informativo .panel-paletas__encabezado {
        margin-bottom: 14px;
      }

      .panel-informativo__contenido,
      .panel-informativo__contenido--columnas,
      .panel-informativo__preguntas {
        gap: 14px;
      }

      .vista-catalogo:not([data-vista-contenido="productos"]) + .seccion-buscador-productos,
      .seccion-muestra:has(.vista-catalogo.vista-activa:not([data-vista-contenido="productos"])) + .seccion-buscador-productos {
        padding-top: 50px;
      }

      .panel-paletas h2 {
        font-size: 2.25rem;
      }

      .columna-paleta {
        padding: 16px;
      }

      .lista-paleta li {
        min-height: 38px;
        font-size: 0.72rem;
      }

      .hero-contenido {
        gap: 16px;
      }

      .modulo-hero {
        min-height: 150px;
        padding: 18px;
        border-radius: 18px;
      }

      .modulo-hero--geles {
        min-height: 360px;
        padding: 26px 22px;
      }

      .modulo-categoria__titulo {
        font-size: 1rem;
      }

      .panel-subcategorias {
        inset: 18px;
      }

      .panel-subcategorias__titulo,
      .modulo-hero--geles .panel-subcategorias__titulo {
        font-size: 2rem;
      }

      .lista-subcategorias {
        gap: 7px;
      }

      .subcategoria-categoria {
        min-height: 29px;
        font-size: 0.68rem;
      }

      .seccion-buscador-productos {
        padding-top: 24px;
      }

      .rejilla-polaroid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .formulario-buscador-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .formulario-buscador-productos input,
      .boton-filtro {
        grid-column: 1 / -1;
      }

      .formulario-buscador-productos > .selector-personalizado {
        grid-column: auto;
      }

      .contador-productos-mostrados {
        grid-column: 1 / -1;
      }

      .paginacion-productos {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 4px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
      }

      .paginacion-productos::-webkit-scrollbar {
        display: none;
      }

      .paginacion-productos .boton-pagina {
        min-width: 30px;
        height: 30px;
        padding: 0 8px;
        font-size: 0.62rem;
      }

      .paginacion-productos .boton-pagina:first-child,
      .paginacion-productos .boton-pagina:last-child {
        min-width: 72px;
      }

      .puntos-paginacion {
        min-width: 22px;
        font-size: 0.7rem;
      }

      .tarjeta-polaroid {
        height: clamp(248px, 56vw, 318px);
        min-height: 0;
        aspect-ratio: auto;
        padding: 8px 8px 11px;
      }

      .tarjeta-polaroid__frente {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        gap: 6px;
      }

      .tarjeta-polaroid__foto {
        min-width: 0;
        min-height: 0;
      }

      .tarjeta-polaroid__acciones {
        gap: 6px;
        padding: 9px;
      }

      .tarjeta-polaroid__nombre {
        font-size: clamp(0.86rem, 4vw, 1.06rem);
        line-height: 1.02;
      }

      .tarjeta-polaroid__precio {
        font-size: 0.68rem;
      }

      .control-cantidad {
        gap: 4px;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
      }

      .selector-cantidad {
        min-height: 32px;
        grid-template-columns: 32px minmax(0, 1fr) 32px;
      }

      .control-cantidad input {
        height: 32px;
        font-size: 0.8rem;
      }

      .boton-cantidad {
        min-height: 32px;
      }

      .boton-tarjeta {
        min-height: 32px;
        padding: 0 8px;
        font-size: clamp(0.6rem, 2.9vw, 0.68rem);
        line-height: 1.05;
        text-align: center;
        white-space: normal;
      }

      .modal-producto {
        top: calc(var(--alto-barra-anuncio) + 42px);
        width: calc(100vw - 32px);
        max-height: calc(100vh - var(--alto-barra-anuncio) - 72px);
        max-height: calc(100dvh - var(--alto-barra-anuncio) - 72px);
        transform: translateX(-50%) scale(0.98);
      }

      .modal-producto.abierto {
        transform: translateX(-50%) scale(1);
      }

      .modal-producto__contenido {
        max-height: calc(100vh - var(--alto-barra-anuncio) - 72px);
        max-height: calc(100dvh - var(--alto-barra-anuncio) - 72px);
        padding: 18px;
      }

      .modal-producto__detalle {
        padding-right: 0;
      }

      .modal-producto__media {
        position: static;
        height: auto;
        min-height: 0;
        max-height: none;
        grid-template-rows: 356px auto auto;
        align-content: start;
      }

      .modal-producto__media > img {
        align-self: center;
        justify-self: center;
        width: auto;
        height: auto;
        max-width: 92%;
        max-height: 100%;
        object-fit: contain;
        object-position: center center;
      }

      .modal-producto__cargando-imagen {
        width: 100%;
        height: 100%;
      }

      .modal-producto__nombre-imagen {
        padding: 7px 10px;
        min-height: 0;
        line-height: 1.1;
      }

      .aviso-tonos-modal {
        justify-content: flex-start;
        gap: 8px;
        padding: 0 10px 10px;
      }

      .aviso-tonos-modal__iconos img {
        width: 56px;
        height: 56px;
      }

      .aviso-tonos-modal p {
        font-size: 0.55rem;
        line-height: 1.25;
      }

      .modal-producto__flecha {
        width: 32px;
        height: 32px;
        top: 178px;
      }

      .modal-producto__flecha--anterior {
        left: 10px;
      }

      .modal-producto__flecha--siguiente {
        right: 10px;
      }

      .modal-producto__indicadores {
        top: 316px;
        bottom: auto;
        padding: 6px 8px;
      }

      .resumen-producto-modal div {
        grid-template-columns: 1fr;
        gap: 5px;
      }

      .modal-producto__acciones {
        grid-template-columns: 1fr;
      }

      .modal-producto__kit {
        padding: 12px;
        border-radius: 14px;
      }

      .modal-producto__kit-lista {
        max-height: 320px;
      }

      .modal-producto__kit-item {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 10px;
      }

      .modal-producto__kit-imagen {
        width: 54px;
        height: 54px;
      }

      .modal-producto__kit-acciones {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(118px, 0.72fr);
      }

      .modal-producto__kit-acciones input {
        width: 100%;
        text-align: center;
      }

      .modal-producto__compartir {
        grid-template-columns: 1fr;
      }

      .popup-visitante__acciones {
        grid-template-columns: 1fr;
      }

      .panel-pedido {
        right: 0;
        width: 100%;
        max-height: 100vh;
      }

      .panel-pedido__cabecera,
      .panel-pedido__contenido,
      .panel-pedido__pie {
        padding-left: 18px;
        padding-right: 18px;
      }

      .busqueda-flotante__formulario {
        grid-template-columns: 1fr;
      }

      .boton-buscar {
        width: 100%;
      }
    }

    /* Pedido como modal claro de dos columnas. */
    .panel-pedido {
      position: fixed;
      inset: 0;
      z-index: 84;
      width: auto;
      max-height: none;
      display: grid;
      place-items: center;
      padding:
        calc(var(--alto-barra-anuncio) + (var(--alto-header) / 2) + max(18px, env(safe-area-inset-top, 0px)))
        max(18px, env(safe-area-inset-right, 0px))
        max(18px, env(safe-area-inset-bottom, 0px))
        max(18px, env(safe-area-inset-left, 0px));
      background: transparent;
      border: 0;
      box-shadow: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: none;
      transition: opacity 240ms ease, visibility 240ms ease, transform 240ms ease;
    }

    .panel-pedido.abierto {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
    }

    .panel-pedido__dialogo {
      position: relative;
      width: min(1180px, 92vw);
      height: min(760px, calc(100vh - var(--alto-barra-anuncio) - (var(--alto-header) / 2) - 44px));
      max-height: min(760px, calc(100vh - var(--alto-barra-anuncio) - (var(--alto-header) / 2) - 44px));
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
      overflow: hidden;
      background:
        linear-gradient(135deg, var(--color-blanco), var(--color-blanco)),
        radial-gradient(circle at 8% 0%, rgba(var(--rgb-suave), 0.42), transparent 34%);
      border: 1px solid rgba(var(--rgb-acento), 0.14);
      border-radius: clamp(20px, 2vw, 30px);
      box-shadow: 0 34px 90px rgba(var(--rgb-tinta), 0.2);
    }

    .panel-pedido__dialogo::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(112deg, rgba(var(--rgb-acento), 0.02) 0 26%, transparent 26% 100%),
        linear-gradient(292deg, rgba(var(--rgb-tinta), 0.008) 0 18%, transparent 18% 100%);
      pointer-events: none;
    }

    .panel-pedido__cerrar {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 3;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(10px);
    }

    .panel-pedido__columna {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 0;
      display: grid;
    }

    .panel-pedido__columna--productos {
      grid-template-rows: auto minmax(0, 1fr);
      min-height: 0;
      border-right: 1px solid rgba(var(--rgb-acento), 0.12);
    }

    .panel-pedido__columna--resumen {
      align-content: start;
      gap: 14px;
      padding: clamp(42px, 4vw, 54px) clamp(36px, 4.4vw, 60px) clamp(34px, 4vw, 52px);
      overflow: auto;
    }

    .panel-pedido__cabecera {
      display: block;
      padding: clamp(34px, 4vw, 46px) clamp(34px, 4.4vw, 58px) 16px;
      border-bottom: 1px solid rgba(var(--rgb-acento), 0.1);
    }

    .panel-pedido h2 {
      margin: 0;
      font-size: clamp(1.05rem, 1.55vw, 1.48rem);
      line-height: 1.08;
    }

    .panel-pedido__titulo-resumen {
      margin: 0;
      color: var(--color-tinta);
      font-family: var(--fuente-titulos);
      font-size: clamp(1rem, 1.35vw, 1.34rem);
      line-height: 1.08;
      font-weight: 700;
    }

    .boton-pedido-movil {
      display: none;
    }

    .panel-pedido__contenido {
      min-height: 0;
      overflow: auto;
      scrollbar-gutter: stable;
      padding: 20px clamp(34px, 4.4vw, 58px) clamp(34px, 4.4vw, 54px);
    }

    .pedido-vacio {
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      color: rgba(var(--rgb-tinta), 0.62);
      text-align: center;
      border: 1px dashed rgba(var(--rgb-acento), 0.2);
      border-radius: 18px;
    }

    .pedido-vacio strong {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.72);
      font-size: 1rem;
    }

    .lista-pedido {
      gap: 12px;
    }

    .item-pedido {
      grid-template-columns: 64px minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 14px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.66);
      border: 1px solid rgba(var(--rgb-acento), 0.12);
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(var(--rgb-tinta), 0.05);
      transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .item-pedido:hover,
    .item-pedido:focus-within {
      color: var(--color-blanco);
      background: var(--color-vino);
      border-color: var(--color-vino);
      box-shadow: 0 16px 38px rgba(var(--rgb-acento), 0.22);
    }

    .item-pedido__imagen {
      width: 64px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: var(--color-blanco);
      border-radius: 14px;
    }

    .item-pedido__imagen img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    .item-pedido__imagen span {
      padding: 6px;
      color: rgba(var(--rgb-tinta), 0.5);
      font-size: 0.56rem;
      line-height: 1.15;
      text-align: center;
      text-transform: uppercase;
    }

    .item-pedido__detalle {
      min-width: 0;
    }

    .item-pedido__detalle,
    .item-pedido__cantidad {
      transition: none;
    }

    .item-pedido:hover .item-pedido__detalle,
    .item-pedido:focus-within .item-pedido__detalle,
    .item-pedido:hover .item-pedido__cantidad,
    .item-pedido:focus-within .item-pedido__cantidad {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .item-pedido strong {
      margin-bottom: 4px;
      font-size: 1.02rem;
      font-weight: 700;
    }

    .item-pedido span {
      color: rgba(var(--rgb-tinta), 0.68);
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.42;
    }

    .item-pedido:hover strong,
    .item-pedido:hover span,
    .item-pedido:focus-within strong,
    .item-pedido:focus-within span {
      color: rgba(255, 255, 255, 0.88);
    }

    .item-pedido__precio {
      margin-top: 4px;
      color: var(--color-vino);
      font-weight: 700;
      font-size: 0.96rem;
    }

    .item-pedido:hover .item-pedido__precio,
    .item-pedido:focus-within .item-pedido__precio {
      color: var(--color-blanco);
    }

    .item-pedido__cantidad {
      position: static;
      width: auto;
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .item-pedido .selector-cantidad--pedido {
      width: 118px;
      height: 34px;
      grid-template-columns: 28px minmax(34px, 1fr) 28px;
      background: rgba(255, 255, 255, 0.78);
    }

    .item-pedido .selector-cantidad--pedido .boton-cantidad,
    .item-pedido .selector-cantidad--pedido input {
      height: 34px;
      line-height: 34px;
    }

    .item-pedido .selector-cantidad--pedido .boton-cantidad {
      width: 28px;
    }

    .item-pedido__acciones {
      display: grid;
      place-items: center;
    }

    .panel-pedido__metricas {
      display: grid;
      gap: 8px;
    }

    .panel-pedido__metricas div,
    .resumen-total {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: baseline;
      padding: 12px 0;
      border-bottom: 1px solid rgba(var(--rgb-acento), 0.14);
    }

    .panel-pedido__metricas span,
    .resumen-total span {
      color: rgba(var(--rgb-tinta), 0.62);
      font-size: 0.84rem;
      font-weight: 700;
      line-height: 1.3;
    }

    .panel-pedido__metricas strong,
    .resumen-total strong {
      color: var(--color-tinta);
      font-size: 1.14rem;
      font-weight: 700;
    }

    .panel-pedido__acciones-finales {
      display: grid;
      gap: 12px;
    }

    .panel-pedido .texto-legal {
      margin: 0;
      color: rgba(var(--rgb-tinta), 0.52);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .boton-principal--whatsapp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .boton-principal--whatsapp svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    .notificacion-sitio {
      top: calc(var(--alto-barra-anuncio) + var(--alto-header) + 10px);
      right: clamp(16px, 6vw, 84px);
      transform: translateY(-8px);
    }

    @media (max-width: 920px) {
      .panel-pedido__dialogo {
        grid-template-columns: 1fr;
        height: min(88vh, 820px);
        max-height: min(88vh, 820px);
        overflow: auto;
      }

      .panel-pedido__columna--productos {
        min-height: 360px;
        border-right: 0;
        border-bottom: 1px solid rgba(var(--rgb-acento), 0.12);
      }

      .panel-pedido__columna--resumen {
        padding: 30px 26px 36px;
      }

      .item-pedido {
        grid-template-columns: 56px minmax(0, 1fr);
      }

      .item-pedido__cantidad,
      .item-pedido__acciones {
        grid-column: 2;
      }

      .item-pedido__cantidad {
        justify-self: start;
      }

      .item-pedido__acciones {
        justify-self: end;
        margin-top: -46px;
      }
    }

    @media (max-width: 560px) {
      .panel-pedido {
        padding: 10px;
      }

      .panel-pedido__dialogo {
        width: 100%;
        height: min(90vh, 780px);
        border-radius: 20px;
      }

      .panel-pedido__cabecera {
        padding: 28px 22px 16px;
      }

      .panel-pedido h2 {
        font-size: clamp(1.25rem, 8vw, 1.8rem);
      }

      .panel-pedido__contenido {
        padding: 16px 18px 28px;
      }

      .item-pedido {
        gap: 10px;
        padding: 10px;
      }
    }

    @media (max-width: 700px) {
      .panel-pedido {
        --inicio-modal-pedido-movil: calc(var(--alto-barra-anuncio) + (var(--alto-header) / 2));
        --reserva-burbuja-pedido-movil: calc(104px + max(10px, env(safe-area-inset-bottom, 0px)));
        padding:
          var(--inicio-modal-pedido-movil)
          12px
          var(--reserva-burbuja-pedido-movil);
        place-items: start center;
      }

      .panel-pedido__dialogo {
        width: min(100%, 430px);
        height: calc(100vh - var(--inicio-modal-pedido-movil) - var(--reserva-burbuja-pedido-movil));
        height: calc(100dvh - var(--inicio-modal-pedido-movil) - var(--reserva-burbuja-pedido-movil));
        max-height: calc(100vh - var(--inicio-modal-pedido-movil) - var(--reserva-burbuja-pedido-movil));
        max-height: calc(100dvh - var(--inicio-modal-pedido-movil) - var(--reserva-burbuja-pedido-movil));
        grid-template-columns: 1fr;
        overflow: hidden;
      }

      .panel-pedido__columna {
        min-height: 0;
      }

      .panel-pedido__columna--productos {
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 0;
        height: 100%;
        border-right: 0;
        border-bottom: 0;
      }

      .panel-pedido__columna--resumen {
        height: 100%;
        align-content: start;
        overflow: auto;
        padding: 34px 22px 24px;
      }

      .panel-pedido:not([data-vista-movil="resumen"]) .panel-pedido__columna--resumen,
      .panel-pedido[data-vista-movil="resumen"] .panel-pedido__columna--productos {
        display: none;
      }

      .panel-pedido:not([data-vista-movil="resumen"]) .panel-pedido__columna--productos,
      .panel-pedido[data-vista-movil="resumen"] .panel-pedido__columna--resumen {
        display: grid;
      }

      .panel-pedido__cabecera {
        padding: 28px 22px 14px;
      }

      .panel-pedido h2,
      .panel-pedido__titulo-resumen {
        font-size: clamp(1.28rem, 7vw, 1.7rem);
      }

      .panel-pedido__contenido {
        min-height: 0;
        padding: 14px 18px 16px;
        overflow: auto;
      }

      .boton-pedido-movil {
        width: calc(100% - 36px);
        min-height: 42px;
        margin: 0 18px 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: var(--color-vino);
        color: var(--color-blanco);
        font: inherit;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
      }

      .boton-pedido-movil:hover {
        background: var(--color-acento);
      }

      .boton-pedido-movil:active {
        transform: scale(0.98);
      }

      .boton-pedido-movil--editar {
        width: auto;
        min-height: 34px;
        margin: 0 0 12px;
        justify-self: start;
        padding: 0 16px;
        background: rgba(var(--rgb-acento), 0.12);
        color: var(--color-vino);
      }

      .boton-pedido-movil--editar:hover {
        background: var(--color-vino);
        color: var(--color-blanco);
      }

      .lista-pedido {
        gap: 10px;
      }

      .item-pedido {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px 14px;
      }

      .item-pedido__imagen {
        width: 58px;
        border-radius: 13px;
      }

      .item-pedido strong {
        font-size: 0.94rem;
        line-height: 1.08;
      }

      .item-pedido span {
        font-size: 0.68rem;
        line-height: 1.28;
      }

      .item-pedido__precio {
        font-size: 0.72rem;
        line-height: 1.2;
      }

      .item-pedido__cantidad {
        grid-column: 1 / -1;
        justify-self: stretch;
      }

      .item-pedido__acciones {
        grid-column: 2;
        justify-self: end;
        margin-top: -46px;
      }

      .item-pedido .selector-cantidad--pedido {
        width: min(132px, 100%);
      }
    }

    /* FIX: Polaroid sin recorte de imagen */
    .tarjeta-polaroid {
      box-sizing: border-box;
      overflow: hidden;
    }

    .tarjeta-polaroid *,
    .tarjeta-polaroid *::before,
    .tarjeta-polaroid *::after {
      box-sizing: border-box;
    }

    .tarjeta-polaroid__frente {
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto !important;
      gap: 12px;
    }

    .tarjeta-polaroid__foto {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      display: flex !important;
      align-items: center;
      justify-content: center;
      overflow: visible !important;
      background: transparent;
    }

    .tarjeta-polaroid__foto > a,
    .tarjeta-polaroid__foto > picture {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    .tarjeta-polaroid__foto img,
    .tarjeta-polaroid__foto picture > img {
      position: static !important;
      inset: auto !important;
      transform: none !important;
      width: auto !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      object-position: center center !important;
      display: block !important;
    }

    @media (max-width: 700px) {
      .modal-horizontal-info__preguntas {
        grid-template-columns: 1fr;
      }

      .tarjeta-polaroid {
        height: clamp(248px, 56vw, 318px);
        min-height: 0;
        aspect-ratio: auto;
        padding: 8px 8px 11px;
      }

      .tarjeta-polaroid__frente {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        gap: 6px;
      }
    }