/* Grupo Dos sobre la tienda de la base (D68 de ecommerce-2): lo de la base, igual a todas; acá sólo la fuente y lo
   que hace que su header, portada, listado y ficha se vean como grupodos.com.uy. */
@font-face{font-family:'TiendaPropia';font-style:normal;font-weight:100 900;font-stretch:62% 100%;font-display:swap;src:url('/recursos/fuentes/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'TiendaPropia';font-style:normal;font-weight:100 900;font-stretch:62% 100%;font-display:swap;src:url('/recursos/fuentes/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Los colores de grupodos.com.uy (styles/gd-sistema.css de su Next: «gris cálido»), sobre la paleta que la base arma
   con el acento. En `[data-tienda]` (el <body>): le gana a la paleta del <style> del tema, que va en :root, porque la
   declaración del elemento manda sobre lo heredado, sin depender del orden. */
[data-tienda]{
  --color-text:#141414;--color-text-muted:#5f5d58;--color-border:#e7e5df;--color-border-strong:#8c8a84;
  --color-focus:#141414;--color-success-text:#007372;--color-danger-text:#d3404f;--color-success-subtle:#dcf2f1;
  --gd-naranja:#fe7757;--gd-verde:#00a09f;--gd-rojo:#d3404f;--gd-tinta-3:#8c8a84;--gd-niebla:#f4f3ef;
}
[data-tienda]{--tienda-crema:#f4f3ef}

/* ── Portada (agente portada) ── valores de grupodos.com.uy: hero.css, seccion-productos.css, seguinos-instagram.css,
   local.css y gd-sistema.css de su Next. */
/* La rayita de los títulos de sección y del local, en el naranja de la marca (el destacado #C2421F queda para los correos). */
[data-tienda] .seccion-col__titulo::after, [data-tienda] .local-ref__titulo::after { background: var(--gd-naranja, #fe7757); }
/* Las flechas del hero y de las secciones: el panel esmerilado con la flecha azul grisácea que se oscurece al pasar el mouse. */
[data-tienda] .hero-tarjeta__flecha { border-color: rgba(20, 48, 95, .12); background: rgba(255, 255, 255, .66); color: #5b6b85; box-shadow: 0 6px 16px -8px rgba(20, 48, 95, .3); }
[data-tienda] .hero-tarjeta__flecha:hover { background: rgba(255, 255, 255, .92); color: #14305f; box-shadow: 0 8px 20px -8px rgba(20, 48, 95, .4); }
/* Mientras cargan: el hero en crema, las piezas sin fondo, Instagram en crema. */
[data-tienda] .hero-tarjeta .hero-tarjeta__slide { background: var(--gd-niebla, #f4f3ef); }
[data-tienda] .bloque-puzzle .bloque-puzzle__pieza, [data-tienda] .bloque-dos-ref .bloque-puzzle__pieza { background: transparent; }
[data-tienda] .redes-col__tipo { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* ── Cabecera, pie, carrito y buscador (agente cabecera) ── valores de grupodos.com.uy: gd-sistema.css, footer.css,
   paneles.css, panel-carrito.tsx, buscador.css y whatsapp-float de su Next. */
/* El resalte que piden la cabecera `dos_lineas`, el pie `referencia` y el menú lateral; los rellenos en el crema. */
[data-tienda]{
  --tienda-resalte:#fe7757;--tienda-sobre-resalte:#141414;--tienda-resalte-texto:#c2421f;--tienda-resalte-suave:#ffe7df;
  --tienda-franja:linear-gradient(90deg,#fe7757 0 33.333%,#00a09f 33.333% 66.666%,#d3404f 66.666%);
  --tienda-icono-promo:#00a09f;--color-sunken:#f4f3ef;--color-surface-2:#f4f3ef;
}
/* El botón de WhatsApp: 56 a 20 del borde en todos los anchos, con el ícono de 28 (la base lo agranda a 60 desde 768). */
@media (min-width:768px) {
  [data-tienda] .whatsapp-flotante.whatsapp-flotante { right:calc(20px * var(--e)); bottom:calc(20px * var(--e)); width:calc(56px * var(--e)); height:calc(56px * var(--e)); }
}
[data-tienda] .whatsapp-flotante .whatsapp-flotante__icono.whatsapp-flotante__icono { width:calc(28px * var(--e)); height:calc(28px * var(--e)); }
[data-tienda]:where(html[data-pie-visible] > *) .whatsapp-flotante.whatsapp-flotante { bottom:calc(var(--pie-abajo-alto, 0px) / var(--tienda-zoom, 1) + 12px * var(--e)); }

/* ── Listado, marcas y Envío Flash (agente listado) ── valores de grupodos.com.uy: tienda.css, marcas-indice.css,
   flash.css y gd-sistema.css de su Next. Doble clase: le gana a la base sin depender del orden de las hojas. */
/* La rayita de los títulos en el naranja de la marca (el destacado #c2421f queda para los textos y los correos). */
[data-tienda] .lref__titulo.lref__titulo::after, [data-tienda] .marcas-listado.marcas-listado h1::after { background:#fe7757; }
/* Envío: el círculo en verde suave, la tarjeta elegida con borde y fondo verdes, el interruptor en el verde de la marca. */
[data-tienda] .lref__envio-icono.lref__envio-icono { background:#dcf2f1; color:#007372; }
[data-tienda] .lref__envio.lref__envio[aria-checked="true"] { border-color:#00a09f; background:color-mix(in srgb, #dcf2f1 45%, #fff); }
[data-tienda] .lref__envio[aria-checked="true"] .lref__interruptor.lref__interruptor { background:#00a09f; }
/* «Ver N resultados»: verde del encabezado, y al pasar el mouse el naranja con el texto oscuro. */
[data-tienda] .lref__boton--primario.lref__boton--primario { border-color:#083b39; background:#083b39; color:#fff; }
[data-tienda] .lref__boton--primario.lref__boton--primario:hover { border-color:#fe7757; background:#fe7757; color:#141414; }
/* El índice de marcas: título 23/28, la cantidad en 18, las migas de 16 con enlaces de 32 que cambian de color sin subrayar,
   la tarjeta con el hover de la tienda (borde gris, sombra) y el recuadro sin logo en letra angosta sobre el crema. */
[data-tienda] .marcas-listado.marcas-listado { padding-bottom:56px; }
[data-tienda] .marcas-listado .migas-tienda.migas-tienda { padding-top:16px; line-height:16px; }
[data-tienda] .marcas-listado .migas-tienda.migas-tienda a { display:inline-flex; align-items:center; min-height:32px; transition:color 160ms ease; }
[data-tienda] .marcas-listado .migas-tienda.migas-tienda a:hover { color:#141414; text-decoration:none; }
[data-tienda] .marcas-listado.marcas-listado h1 { font-size:calc(23px * var(--tienda-escala)); line-height:28px; }
[data-tienda] .marcas-listado .marcas-listado__cabecera.marcas-listado__cabecera p { line-height:18px; }
[data-tienda] .marcas-listado .marcas-listado__marca.marcas-listado__marca { border-color:#e7e5df; transition:border-color 160ms ease, box-shadow 160ms ease; }
[data-tienda] .marcas-listado .marcas-listado__marca.marcas-listado__marca:hover { border-color:#8c8a84; box-shadow:0 1px 2px rgba(20,20,20,.06), 0 12px 28px -14px rgba(20,20,20,.22); }
[data-tienda] .marcas-listado .marcas-listado__marca.marcas-listado__marca:focus-visible { outline:2px solid #141414; outline-offset:2px; }
[data-tienda] .marcas-listado .marcas-listado__logo--nombre.marcas-listado__logo--nombre { background:#f4f3ef; font-size:17px; line-height:20px; font-stretch:78%; }
[data-tienda] .marcas-listado .marcas-listado__nombre.marcas-listado__nombre { font-size:13px; }
@media (min-width:1024px), (hover:hover) and (pointer:fine) and (min-width:820px) {
  [data-tienda] .marcas-listado.marcas-listado { padding-bottom:80px; }
  [data-tienda] .marcas-listado .migas-tienda.migas-tienda { padding-top:20px; }
}

/* ficha: los tres colores de la marca para la franja de la ficha (anillo del color elegido, contorno de «Comprar ahora»,
   rasgos, franja de «Opciones de envío») y el punto verde de «Disponible», como grupodos.com.uy (gd-sistema.css). */
[data-tienda]{--franja-1:#fe7757;--franja-2:#00a09f;--franja-3:#d3404f}