/* ============================================================
   SENTIDA · el tema de la tienda (la cara de la v6 del sitio).
   Los colores y las fuentes NO van acá: vienen de marca.css, la copia
   de sentida-site/comun/marca.css (flask sincronizar-marca).
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS de maqueta: el ancho, el margen lateral y el alto de la
   cabecera. Los de color y de fuente viven en marca.css.
   ------------------------------------------------------------ */
:root{
  --lateral:clamp(20px,4vw,56px);
  --ancho:1440px;
  --cab:88px;
}

  *,*::before,*::after{box-sizing:border-box}
  [hidden]{display:none!important}
  .js-off{display:none!important}   /* el JS del pedido prende y apaga el contador y la tira */
  html{scroll-padding-top:calc(var(--cab) + 8px); scrollbar-color:var(--beige) var(--blanco); -webkit-text-size-adjust:100%}
  html.mov{scroll-behavior:smooth}
  html,body{margin:0; background:var(--blanco); color:var(--marron); font-family:var(--ui); -webkit-font-smoothing:antialiased; overflow-x:clip}
  body{min-height:100vh; display:flex; flex-direction:column; font-size:16px; line-height:1.5}
  main{flex:1}                       /* la cinta ya deja el lugar de la cabecera fija (margin-top), como en el sitio */
  a{color:var(--marron); text-decoration:none}
  :where(a:hover){color:var(--marron-medio)}
  img{display:block; max-width:100%; height:auto}
  h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
  h1,h2,h3{font-family:var(--display); font-weight:500}
  b,strong{font-weight:600}
  button,input,select,textarea{font:inherit; color:inherit}
  a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:3px}
  [tabindex="-1"]:focus{outline:none}
  ::selection{background:var(--celeste); color:var(--marron)}
  input,textarea{caret-color:var(--marron)}

  .sr,.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
  .saltar{position:fixed; z-index:99; left:16px; top:-6rem; background:var(--marron); color:var(--blanco); padding:12px 16px; border-radius:2px; border:1px solid transparent}
  .saltar:focus{top:16px; color:var(--blanco)}
  .ico{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
  .ico-wa{fill:currentColor; stroke:none}
  .display{font-family:var(--display); font-weight:500}
  .envoltorio{max-width:var(--ancho); margin:0 auto; padding-inline:var(--lateral)}

  /* ---------- botones y enlaces (comun/base.css) ---------- */
  .btn,.enlace,.cab-nav a,.cab-cuenta,.menu summary{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:48px; padding:0 22px; border:1px solid transparent; border-radius:2px;
    font-family:var(--ui); line-height:1.3; text-align:center; cursor:pointer; transition:background-color .2s, color .2s;
  }
  .btn .ico{width:16px; height:16px}
  .btn-1{background:var(--marron); color:var(--blanco)}
  .btn-1:hover{background:var(--marron-medio); color:var(--blanco)}
  .btn-2{background:transparent; color:var(--marron); border-color:var(--marron)}
  .btn-2:hover{background:var(--crema); color:var(--marron)}
  .btn-claro{background:var(--blanco); color:var(--marron)}
  .btn-claro:hover{background:var(--crema); color:var(--marron)}
  .btn[disabled],.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover{background:var(--crema); color:var(--marron-medio); border-color:var(--beige); cursor:not-allowed}
  .botones{display:flex; flex-wrap:wrap; gap:10px}
  .enlace{display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px}
  .enlace .ico{width:14px; height:14px}
  button.enlace{background:none; border:0; padding:0; font-family:var(--ui); color:var(--marron); cursor:pointer}
  button.enlace:hover{color:var(--marron-medio)}
  .volver{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--marron-medio)}
  .volver .ico{width:14px; height:14px}
  .volver:hover{color:var(--marron)}

  /* ---------- textos chicos ---------- */
  /* El rótulo en mayúsculas de 11px (el «.cf-t» y el «.camino-eti» del sitio). */
  .eti{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--marron-medio)}
  .eti.celeste{color:var(--celeste-profundo)}
  /* El filete celeste antes de la etiqueta (comun/base.css): decorativo, nunca
     texto, así que --celeste-filete puede ir acá aunque no vaya en letras. */
  .con-linea::before{content:""; display:inline-block; vertical-align:middle; width:30px; height:2px; margin-right:13px; background:var(--celeste-filete)}
  .ayuda{font-size:14px; line-height:1.55; color:var(--marron-medio); max-width:56ch}
  /* Informativa, no advertencia: crema con el filo celeste profundo. */
  .nota{background:var(--crema); border-left:2px solid var(--celeste-profundo); border-radius:2px; padding:14px 16px; font-size:14px; line-height:1.55; color:var(--marron-medio); max-width:62ch}
  .nota strong{color:var(--marron)}
  .nota a{color:var(--marron); text-decoration:underline; text-underline-offset:3px}
  /* El vacío: una caja crema como la de «Para el Día de la Madre». */
  .vacio{display:flex; flex-direction:column; align-items:flex-start; gap:18px; background:var(--crema); border-radius:2px; padding:clamp(28px,3.5vw,48px)}
  .vacio p{font-size:16px; line-height:1.6; color:var(--marron-medio); max-width:44ch}
  .avisos{max-width:var(--ancho); margin:0 auto; padding:24px var(--lateral) 0; display:grid; gap:8px}
  .avisos .nota{max-width:none}

  /* ---------- encabezados (comun/tienda.css) ---------- */
  .pagina{max-width:var(--ancho); margin:0 auto; padding:clamp(40px,7vh,80px) var(--lateral) clamp(72px,12vh,120px)}
  .pagina.angosta{max-width:calc(760px + 2 * var(--lateral))}
  /* La cabecera de página propia (Tarea 9: carrito, checkout, cuenta,
     contacto): la etiqueta con el filete y el h1, antes del contenido. Va
     fuera de `.pagina`/`.ok` (mismo ancho y margen que `.envoltorio`, para
     que quede alineada con el cuerpo); la sección que sigue no repite el
     padding de arriba, que ya puso `.pagina-cab`. */
  .pagina-cab{padding-block:clamp(40px,7vh,80px) clamp(20px,4vh,36px)}
  .pagina-cab .eti{margin-bottom:18px}
  .pagina-cab h1{font-size:clamp(2.6rem,5vw,4.3rem); line-height:1.05; letter-spacing:-.03em}
  .pagina-cab + .pagina, .pagina-cab + .ok{padding-top:0}
  .tienda-cab{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 40px; margin-bottom:clamp(28px,5vh,48px)}
  .tienda-cab h1{font-size:clamp(3rem,5.4vw,4.75rem); line-height:1; letter-spacing:-.045em; overflow-wrap:anywhere}
  .tienda-cab .eti{margin-bottom:18px}
  .tienda-cab p{font-size:16px; line-height:1.6; color:var(--marron-medio); max-width:44ch}
  /* La barra del catálogo: buscar y ordenar (publico/catalogo.html). */
  .tienda-barra{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(24px,4vh,40px)}
  .tienda-barra input[type=search]{flex:1 1 260px; min-height:44px; padding:10px 12px; font:inherit; font-size:15px; color:var(--marron); background:var(--blanco); border:1px solid var(--linea); border-radius:2px}
  .tienda-barra select{min-height:44px; padding:0 12px; font:inherit; font-size:13px; color:var(--marron); background:var(--blanco); border:1px solid var(--linea); border-radius:2px}
  /* Encabezado de sección, el de «Las de la casa.» */
  .carta-cab{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 40px; margin-bottom:clamp(24px,4vh,40px)}
  .carta-cab h2{font-size:clamp(2.5rem,5vw,4.5rem); line-height:.92; letter-spacing:-.03em}
  .carta-cab .baja{font-size:16px; line-height:1.6; color:var(--marron-medio); max-width:340px}

  /* ---------- formularios (decoradas/decoradas.css y el diálogo del pedido) ---------- */
  /* El campo del ticket (comun/ticket.css): carrito, checkout, cuenta y
     contacto (Tarea 9). El resto de la tienda (ficha, admin) sigue con
     `.campo`, más ancho de padding. */
  .cf{display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; margin:0; padding:0; border:0}
  .cf-t{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--marron-medio)}
  .cf input[type=text],.cf input[type=email],.cf input[type=tel],.cf input[type=password],.cf textarea,.cf select{width:100%; min-height:48px; padding:10px 12px; font-family:var(--ui); font-size:16px; color:var(--marron); background:var(--blanco); border:1px solid var(--marron); border-radius:2px}
  .cf textarea{min-height:110px; line-height:1.5; resize:vertical}
  /* «Obligatorio» / «Opcional» junto al rótulo: se dice con palabras, sin un
     asterisco que haya que descifrar. */
  .cf-marca{margin-left:6px; font-size:12px; font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--marron-medio)}
  /* El error del servidor, al lado de su campo (aria-describedby). Sin rojo:
     la paleta no lo tiene; va en marrón, con peso y el filo. */
  .cf-error{padding-left:10px; border-left:2px solid var(--marron); font-size:14px; font-weight:600; line-height:1.5; color:var(--marron)}
  .cf [aria-invalid="true"]{border-width:2px}
  .campo{display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; margin:0; padding:0; border:0}
  .campo > label,.campo > legend,.campo-t{padding:0; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--marron-medio)}
  .campo input,.campo textarea,.campo select{
    width:100%; min-height:48px; padding:12px 14px; font-family:var(--ui); font-size:16px; color:var(--marron);
    background:var(--blanco); border:1px solid var(--marron); border-radius:2px;
  }
  .campo textarea{min-height:110px; line-height:1.5; resize:vertical}
  .opciones{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; border:0; min-width:0}
  .opcion{position:relative; display:inline-flex}
  .opcion input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
  .opcion > span{
    display:inline-flex; flex-direction:column; justify-content:center; min-height:52px; padding:10px 18px;
    border:1px solid var(--marron); border-radius:2px; background:var(--blanco);
    font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:background-color .2s, color .2s;
  }
  .opcion small{font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--marron-medio); margin-top:2px}
  .opcion:hover > span{background:var(--crema)}
  .opcion input:checked + span{background:var(--marron); color:var(--blanco)}
  .opcion input:checked + span small{color:var(--crema)}
  .opcion input:focus-visible + span{outline:2px solid var(--celeste-profundo); outline-offset:3px}
  .opcion input:disabled{cursor:not-allowed}
  .opcion input:disabled + span{border-color:var(--beige); color:var(--marron-medio); background:var(--crema)}
  .opcion-chica > span{min-height:44px; padding:8px 14px}

  /* El buscador: el campo del sitio, con su botón de limpiar. */
  .buscar{position:relative; display:flex; align-items:center; margin:0}
  .buscar input{
    flex:1; min-width:0; min-height:48px; padding:12px 48px 12px 14px;
    font-family:var(--ui); font-size:16px; color:var(--marron);
    background:var(--blanco); border:1px solid var(--marron); border-radius:2px;
  }
  .buscar input::placeholder{color:var(--marron-medio); opacity:1}
  .js-buscar-limpiar{position:absolute; right:2px; width:44px; height:44px; background:none; border:0; cursor:pointer; color:var(--marron-medio); font-size:20px; line-height:1}
  .js-buscar-limpiar:hover{color:var(--marron)}
  .js-buscar.buscando input{opacity:.7}

  /* ------------------------------------------------------------
     CABECERA (comun/base.css): el logo a la izquierda, la navegación al
     centro, la cuenta, «Mi pedido» y el menú a la derecha.
     ------------------------------------------------------------ */
  .cab{position:fixed; top:0; left:0; right:0; z-index:60; background:var(--blanco); border-bottom:1px solid var(--linea)}
  .cab-in{position:relative; max-width:var(--ancho); margin:0 auto; height:calc(var(--cab) - 1px); padding:0 var(--lateral); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px}
  .cab-nav{display:flex; justify-content:center; gap:0 clamp(18px,2.4vw,36px)}
  .cab-nav a{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap}
  .cab-nav a[aria-current="page"]{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px}
  .cab-nav .solo-ancho{display:none}
  .cab-marca{display:flex; align-items:center; min-height:44px}
  .marca-logo{display:block; width:132px; height:auto}
  .cab-acc{display:flex; justify-content:flex-end; align-items:center; gap:12px}
  .cab-cuenta{display:inline-flex; align-items:center; min-height:44px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
  .cab-cuenta[aria-current="page"]{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px}
  .menu{display:none}
  .menu summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border:1px solid var(--marron); border-radius:2px}
  .menu summary::-webkit-details-marker{display:none}
  .menu-cerrar,.menu-i-cerrar,.menu[open] .menu-abrir,.menu[open] .menu-i-abrir{display:none}
  .menu[open] .menu-cerrar,.menu[open] .menu-i-cerrar{display:inline}
  .menu nav{position:absolute; top:100%; left:0; right:0; background:var(--blanco); border-bottom:1px solid var(--beige); padding:8px var(--lateral) 24px; display:flex; flex-direction:column; max-height:calc(100vh - var(--cab)); max-height:calc(100dvh - var(--cab)); overflow-y:auto; overscroll-behavior:contain}
  .menu nav a{font-family:var(--display); font-size:26px; line-height:1.1; display:flex; align-items:center; min-height:56px; border-bottom:1px solid var(--linea)}
  .menu nav a[aria-current="page"]{color:var(--marron-medio)}
  .menu nav a.chico{font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; min-height:48px}

  /* «Mi pedido» en la cabecera (comun/ticket.css) */
  .mi-pedido{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--marron); white-space:nowrap}
  .mi-pedido .ico{width:20px; height:20px}
  .mi-pedido-n{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--marron); color:var(--blanco); font-size:12px; letter-spacing:0; font-variant-numeric:tabular-nums}

  /* ------------------------------------------------------------
     MARQUESINA (comun/base.css): la cinta celeste con el lema, con pausa.
     Es decorativa (aria-hidden); sin «mov», queda quieta.
     ------------------------------------------------------------ */
  .marquesina{position:relative; margin-top:var(--cab); height:44px; display:flex; align-items:center; overflow:hidden; background:var(--celeste); color:var(--celeste-profundo)}
  .marquesina-pista{display:flex; width:max-content}
  .marquesina-pausa{display:none}
  .mov .marquesina-pausa{
    position:absolute; right:0; top:0; bottom:0; z-index:1; display:grid; place-items:center; width:44px; padding:0;
    border:0; background:var(--celeste); color:var(--celeste-profundo); cursor:pointer;
    box-shadow:-18px 0 14px -4px var(--celeste);
  }
  .marquesina-pausa:hover{color:var(--marron)}
  .marquesina-pausa:focus-visible{outline-offset:-4px}
  .marquesina-pausa .ico{width:16px; height:16px}
  .marquesina-pausa .ico-seguir,.marquesina.pausada .ico-pausar{display:none}
  .marquesina.pausada .ico-seguir{display:block}
  .marquesina-pista span{white-space:nowrap; padding-right:34px; font-size:11px; font-weight:600; letter-spacing:.21em; text-transform:uppercase}
  .marquesina i{display:inline-block; position:relative; font-style:normal; width:10px; height:10px; margin:0 40px; vertical-align:middle; border:1px solid var(--celeste-filete); border-radius:50%}
  .marquesina i::after{content:""; position:absolute; inset:2px; border:1px solid var(--celeste-filete); border-radius:50%}
  .mov .marquesina-pista{animation:marquesina 48s linear infinite}
  .mov .marquesina:hover .marquesina-pista,.mov .marquesina.pausada .marquesina-pista{animation-play-state:paused}
  @keyframes marquesina{to{transform:translateX(-50%)}}

  /* ------------------------------------------------------------
     «Antes de pedir» (comun/base.css): la banda crema arriba del pie. Tres <details>
     (andan sin JavaScript); el «+» está dibujado, no es un carácter.
     ------------------------------------------------------------ */
  .saber{background:var(--crema); color:var(--marron)}
  .saber .acento{color:var(--celeste-profundo)}
  .saber-in{padding-block:clamp(64px,10vh,96px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px clamp(40px,6vw,96px); align-items:start}
  .saber-cab .eti{margin-bottom:20px}
  .saber-cab h2{font-weight:400; font-size:clamp(2.25rem,3.6vw,3.25rem); line-height:1.08; letter-spacing:-.04em; text-wrap:balance}
  .saber-cab > p:not(.eti){margin-top:22px; max-width:380px; font-size:14px; line-height:1.7; color:var(--marron-medio)}
  .saber a:not(.btn){color:var(--marron); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
  .saber a:not(.btn):hover{color:var(--marron-medio)}
  .saber-lista{border-top:1px solid var(--marron)}
  .saber-item{border-bottom:1px solid var(--beige)}
  .saber-item:last-child{border-bottom-color:var(--marron)}
  .saber-item summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr) 38px; align-items:center; gap:12px; min-height:84px; padding:14px 0}
  .saber-item summary::-webkit-details-marker{display:none}
  .saber-n{font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--celeste-profundo); font-variant-numeric:tabular-nums}
  .saber-t{font-family:var(--display); font-weight:400; font-size:clamp(1.375rem,2vw,1.75rem); line-height:1.2; letter-spacing:-.02em}
  .saber-mas{position:relative; width:38px; height:38px; border:1px solid var(--marron); border-radius:50%; transition:background-color .2s, border-color .2s}
  .saber-mas::before,.saber-mas::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--marron); transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .saber-mas::after{transform:rotate(90deg)}
  .saber-item:not([open]) summary:hover .saber-mas{background:var(--blanco)}
  .saber-item[open] .saber-mas{background:var(--marron)}
  .saber-item[open] .saber-mas::before,.saber-item[open] .saber-mas::after{background:var(--crema)}
  .saber-item[open] .saber-mas::after{transform:rotate(0deg)}
  .saber-cuerpo{padding:0 50px 30px 56px; font-size:15px; line-height:1.7; color:var(--marron-medio)}
  .saber-cuerpo ul{list-style:none; padding:0; display:grid; gap:10px}
  .saber-cuerpo li{position:relative; padding-left:22px; max-width:560px}
  /* La viñeta es el aro de la cinta */
  .saber-cuerpo li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border:1px solid var(--celeste-filete); border-radius:50%}
  .saber-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px}
  .saber-sub{margin-bottom:10px; font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.18em; line-height:1.5; text-transform:uppercase; color:var(--celeste-profundo)}
  .mov .saber-item[open] .saber-cuerpo{animation:saber-abrir .35s cubic-bezier(.16,1,.3,1)}
  @keyframes saber-abrir{from{opacity:0; transform:translateY(-6px)}}

  /* ------------------------------------------------------------
     Pie: marca · Explorá · Escribinos · el sello. El borde de arriba
     es el dentado del ticket: la banda crema se corta como el papel.
     ------------------------------------------------------------ */
  .pie{position:relative; background:var(--marron); color:var(--crema)}
  .saber + .pie::before{
    content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--crema);
    -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
            mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
  }
  .pie a{color:var(--crema)}
  .pie a:hover{color:var(--blanco); text-decoration:underline; text-underline-offset:4px}
  .pie :focus-visible{outline-color:var(--crema)}
  .pie-in{padding-block:clamp(64px,10vh,92px); display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr) auto; gap:40px clamp(40px,5vw,80px); align-items:start}
  .pie-logo{display:block; width:150px; height:auto}
  .pie-lema{margin-top:18px; font-size:23px; line-height:1.2; color:var(--crema)}
  .pie-links{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:24px 40px; font-size:13px; line-height:1.5}
  .pie-eti{margin-bottom:10px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--beige)}
  .pie-links ul{list-style:none; padding:0}
  .pie-links a{display:inline-flex; align-items:center; gap:10px; min-height:44px}
  .pie-links .ico,.pie-lugar .ico{width:16px; height:16px; color:var(--beige)}
  .pie-links a:hover .ico{color:var(--blanco)}
  .pie-lugar{display:flex; align-items:flex-start; gap:10px; padding-top:12px; line-height:1.9}
  .pie-lugar .ico{margin-top:.25em}
  .pie-sello{width:164px; height:164px; border-radius:50%; background:var(--blanco); transform:rotate(-8deg)}
  .pie-fin{padding-block:24px; border-top:1px solid var(--marron-medio); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.1em}

  /* ------------------------------------------------------------
     La franja legal del pie (legal/pie.html, la misma del sitio) y las
     páginas de Privacidad y Términos: copiado de comun/base.css.
     ------------------------------------------------------------ */
  .pie-legal{padding-block:20px 24px; border-top:1px solid var(--marron-medio); display:grid; gap:12px; font-size:12px; line-height:1.6}
  .pie-legal-links{display:flex; flex-wrap:wrap; align-items:center; gap:4px 28px; font-size:13px}
  .pie-legal-links a{display:inline-flex; align-items:center; min-height:44px}
  .pie .pie-arrepentimiento{padding:0 16px; border:1px solid var(--crema); border-radius:2px}
  .pie .pie-arrepentimiento:hover{background:var(--crema); color:var(--marron); text-decoration:none}
  .pie-aaip{max-width:120ch; font-size:11px; line-height:1.6; color:var(--beige)}
  .legal-texto{max-width:68ch; font-size:16px; line-height:1.7}
  .legal-texto > * + *{margin-top:16px}
  .legal-texto h2{margin-top:44px; font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.2}
  .legal-texto ul{padding-left:1.2em}
  .legal-texto li + li{margin-top:10px}
  .legal-texto a{text-decoration:underline; text-decoration-color:var(--beige); text-underline-offset:4px}
  .legal-fecha{font-size:13px; color:var(--marron-medio)}
  /* La línea de consentimiento junto a cada envío (Ley 25.326). */
  .acepto{margin-top:10px; font-size:13px; line-height:1.5; color:var(--marron-medio)}
  .acepto a{color:inherit; text-decoration:underline; text-decoration-color:var(--beige); text-underline-offset:4px}

  /* ------------------------------------------------------------
     LA TARJETA DE PRODUCTO (publico/_card.html): la `.producto` de
     comun/tienda.css (tarjeta, meta, «+», .en-pedido y .marcada), calcada de
     `tarjeta()` de herramientas/generar_tienda.py. Lo que el sitio no tiene
     —el precio o «A consultar», la marca de oferta, el agotado— con su
     propio vocabulario.
     ------------------------------------------------------------ */
  .productos{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(32px,5vh,60px) clamp(12px,1.8vw,26px)}
  .productos.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
  .producto{display:flex; flex-direction:column}
  .producto-foto{position:relative; aspect-ratio:4/4.5; overflow:hidden; background:var(--crema); outline:2px solid transparent; outline-offset:4px; transition:outline-color .3s}
  .producto-foto img{width:100%; height:100%; object-fit:cover}
  .producto-foto-link{display:block; width:100%; height:100%}
  .mov .producto-foto img{transition:transform .4s}
  .mov .producto:hover .producto-foto img{transform:scale(1.035)}
  .sin-foto{display:flex; align-items:flex-end; padding:clamp(14px,1.6vw,22px) 70px clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px)}
  .sin-foto span{font-size:clamp(22px,2.2vw,32px); line-height:1.05; letter-spacing:-.02em; color:var(--marron)}
  .producto-agregar{position:absolute; right:14px; bottom:14px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--blanco); color:var(--marron); font-family:var(--ui); font-size:26px; font-weight:300; line-height:1; text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s}
  .producto-agregar:hover{background:var(--marron); color:var(--blanco)}
  .producto-agregar.puesto{background:var(--marron); color:var(--blanco)}
  .producto-agregar .ico{width:22px; height:22px}
  /* Varias fotos en la tarjeta (Tarea 13, comun/tienda.css del sitio): una tira
     que se desliza de a una (sin JavaScript también). Con JavaScript, puntos
     abajo a la izquierda y flechas al pasar o con el teclado. */
  .galeria-tira{display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none}
  .galeria-tira::-webkit-scrollbar{display:none}
  .galeria-tira img{flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always}
  .galeria-tira:focus-visible{outline:2px solid var(--marron); outline-offset:-2px}
  .mov .galeria-tira{scroll-behavior:smooth}
  .mov .producto:hover .producto-foto.galeria img{transform:none}
  .galeria-flecha{position:absolute; top:50%; z-index:1; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--blanco); color:var(--marron); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s, background-color .2s, color .2s}
  .galeria-flecha .ico{width:20px; height:20px}
  .galeria-ant{left:10px}
  .galeria-sig{right:10px}
  .galeria:hover .galeria-flecha,.galeria:focus-within .galeria-flecha{opacity:1; pointer-events:auto}
  .galeria-flecha:hover{background:var(--marron); color:var(--blanco)}
  /* En pantallas táctiles se desliza con el dedo: las flechas solo aparecen con el teclado. */
  @media (hover:none){
    .galeria:hover:not(:focus-within) .galeria-flecha{opacity:0; pointer-events:none}
  }
  .galeria-puntos{position:absolute; left:14px; bottom:26px; height:20px; padding:0 8px; display:flex; align-items:center; gap:6px; background:var(--blanco); border-radius:2px; pointer-events:none}
  .galeria-puntos span{width:6px; height:6px; border-radius:50%; background:var(--beige); transition:background-color .2s, transform .2s}
  .galeria-puntos .actual{background:var(--marron); transform:scale(1.2)}
  .producto-meta{display:flex; justify-content:space-between; gap:12px; margin:18px 0 6px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--celeste-profundo)}
  .producto :is(h2,h3){font-size:clamp(22px,1.9vw,27px); line-height:1.2; letter-spacing:-.03em}
  .producto-nombre{color:var(--marron)}
  .producto-nombre:hover{color:var(--marron-medio)}
  .producto-desc{margin-top:4px; font-size:14px; line-height:1.5; color:var(--marron-medio)}
  .producto-precio{margin-top:6px; font-size:12px; font-weight:600}
  /* El precio anterior, tachado: solo con un ahorro real (models/ofertas.py). */
  .producto-antes{font-weight:400; color:var(--marron-medio)}
  .producto-meta span:last-child{white-space:nowrap}
  .producto.en-pedido .producto-foto{outline-color:var(--beige)}
  .producto.marcada .producto-foto{outline-color:var(--marron)}
  /* La marca de oferta y el agotado: no están en el sitio (que no vende en
     vivo), son de la tienda. */
  .producto-marca{position:absolute; top:10px; left:10px; z-index:1; padding:6px 10px; border-radius:2px; background:var(--marron); color:var(--blanco); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.3}
  .producto.agotado .producto-foto img{opacity:.55}
  .producto-agotado{margin-top:4px; font-size:12px; color:var(--marron-medio)}
  .producto.entrando{animation:aparecer .34s cubic-bezier(.16,1,.3,1) both}
  @keyframes aparecer{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

  /* ------------------------------------------------------------
     EL TICKET de papel (comun/ticket.css): «Tu pedido» al costado del
     catálogo, Mi pedido y el resumen del checkout.
     ------------------------------------------------------------ */
  .ticket{filter:drop-shadow(0 14px 16px var(--sombra))}
  .papel{
    background:var(--blanco); padding:20px 20px 30px; font-variant-numeric:tabular-nums;
    -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
            mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
  }
  .ticket-cab{display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--marron); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--marron-medio)}
  .ticket-t{font-size:24px; margin:12px 0 4px}
  .ticket-lineas > div{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; border-bottom:1px dashed var(--beige); font-size:13px; line-height:1.4}
  .ticket-lineas dt{color:var(--marron-medio); flex:none}
  .ticket-lineas dd{font-weight:600; text-align:right; overflow-wrap:anywhere}
  .ticket-lineas dd.vacio{color:var(--marron-medio); font-weight:400}
  .ticket-fijo{font-size:12px; line-height:1.5; color:var(--marron-medio); margin-top:10px}
  .ticket-fijo strong{color:var(--marron); font-weight:600}
  .ticket-pie{margin-top:12px; padding-top:8px; border-top:1px solid var(--marron); font-size:12px; line-height:1.5; color:var(--marron-medio)}
  .ticket-pie a{text-decoration:underline; text-underline-offset:3px}
  /* El total del ticket: rótulo y número, sobre la línea marrón. */
  .ticket-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--marron)}
  .ticket-total .v{font-family:var(--display); font-weight:500; font-size:22px; line-height:1.15; text-align:right}
  .carrito-lista{list-style:none; margin:6px 0 0; padding:0}
  .carrito-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--beige); font-size:14px; line-height:1.35}
  .carrito-nombre{font-weight:600; overflow-wrap:anywhere}
  .carrito-vacio{padding:10px 0; font-size:14px; line-height:1.5; color:var(--marron-medio)}
  .mov .carrito-item.nueva{animation:imprimir .3s cubic-bezier(.16,1,.3,1)}
  @keyframes imprimir{from{transform:translateY(-6px); opacity:.2}}
  .contador{display:inline-flex; align-items:center; border:1px solid var(--marron); border-radius:2px; background:var(--blanco); color:var(--marron)}
  .contador button{width:44px; height:44px; display:grid; place-items:center; background:none; border:0; border-radius:2px; color:var(--marron); font-family:var(--ui); font-size:20px; line-height:1; cursor:pointer}
  .contador button:hover:not(:disabled){background:var(--crema)}
  .contador button:disabled{color:var(--marron-medio); background:var(--crema); cursor:default}
  .contador button:focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:-2px}
  .contador output,.contador .n{min-width:32px; text-align:center; font-family:var(--ui); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}

  /* La tira del celular (comun/tienda.css): con algo en el pedido, abajo lo muestra y lo abre. */
  .tira-pedido{display:none}

  @media (min-width:1280px){
    .cab-nav .solo-ancho{display:inline-flex}
  }
  /* En el celular (y en la tablet, donde aparece «Menú»): Menú, la cuenta y
     la bolsa a la izquierda, el logo a la derecha. Como en el sitio
     (comun/base.css), decisión de las dueñas del 07/10/2026; en la compu
     queda como estaba. */
  @media (max-width:1099px){
    .cab-in{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"acc . marca"; gap:12px}
    .cab-marca{grid-area:marca}
    .cab-acc{grid-area:acc; justify-content:flex-start}
    .cab-nav{display:none}
    .menu{display:block; order:-1}
    .productos,.productos.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:899px){
    :root{--cab:64px}
    .marca-logo{width:104px}
    .cab-cuenta{display:none}
    /* comun/tienda.css: en dos columnas angostas, la descripción se corta a
       3 líneas y el rótulo de categoría sube un poco (acá no hay un segundo
       span con el contador «01/13» que esconder, la tienda no lo usa). */
    .producto-meta{margin-top:14px}
    .producto-desc{font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
    .marquesina{height:36px}
    .marquesina i{margin:0 24px}
    .saber-in{grid-template-columns:1fr}
    .saber-cuerpo{padding:0 0 26px 56px}
    .pie-in{grid-template-columns:minmax(0,1fr) auto; gap:36px 24px}
    .pie-links{grid-column:1 / -1; grid-row:2}
    .pie-sello{width:118px; height:118px; margin-top:-6px}
    .mi-pedido-t{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
    .tira-pedido{
      position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:55;
      display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 6px 6px 16px;
      background:var(--marron); color:var(--blanco); border-radius:2px; box-shadow:0 10px 24px -10px var(--sombra);
    }
    .tira-pedido:hover{color:var(--blanco)}
    .tira-pedido-t{font-family:var(--display); font-size:18px}
    .tira-pedido-n{flex:1; font-size:13px; font-weight:600; color:var(--crema)}
    .tira-pedido-ver{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:var(--blanco); color:var(--marron); border-radius:2px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
    .tira-pedido:focus-visible{outline-color:var(--marron)}
    html{scroll-padding-bottom:88px}
    body.con-tira{padding-bottom:80px}
  }
  @media (max-width:599px){
    .saber-item summary{grid-template-columns:34px minmax(0,1fr) 38px; min-height:76px}
    .saber-cuerpo{padding-left:46px; font-size:14px}
    .saber-dos{grid-template-columns:1fr}
    .pie-links{grid-auto-flow:row}
    .pie-links div:first-child ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px}
  }
  @media (max-width:380px){
    .btn{padding:0 14px}
  }
  @media (max-width:340px){
    .productos,.productos.cuatro{grid-template-columns:minmax(0,1fr)}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .producto.entrando{animation:none}
    .producto-foto img{transition:none}
    .saber-mas::before,.saber-mas::after{transition:none}
  }