/* Pantalla del pedido — Insólito.
   La piel es la del sitio (ADR-040). La cabecera, el menú lateral, el pie y sus fuentes salen de
   web/_comun/ y los inyecta scripts/construir_frente.py; aquí solo van los componentes del pedido,
   con las medidas de producción del 2026-09-16 (docs/mediciones/2026-09-16-piel-pide-aqui/).
   Sin construir (la maqueta suelta), no hay cabecera ni pie del sitio y la barra de abajo se queda
   también en escritorio: es el banco de pruebas de los verificadores, no lo que ve el cliente. */
@font-face{font-family:"Plaak Extended";font-weight:700;font-display:swap;src:url(fonts/Plaak-46BoldExtended.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic Antique";font-weight:400;font-display:swap;src:url(fonts/ZenKaku-400.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic Antique";font-weight:500;font-display:swap;src:url(fonts/ZenKaku-500.woff2) format("woff2")}

:root{
  --negro:#0F0F0E;--verde:#42E813;--amarillo:#DAFF00;--rosa:#FF67D1;--gris:#B9B9B9;
  /* EL LIMA DEL PEDIDO (29-sep, como el autoservicio del local, que usa #CAFF00). Es el amarillo de la marca: botones,
     «Listo» y lo elegido. El verde #42E813 se queda en la cabecera y la portada, que no son de esta hoja. Para volver:
     `--lima:var(--lima)`. */
  --lima:var(--amarillo);
  --borde-suave:#CFCFCA;          /* el borde de lo redondeado: bloques del armado, campos y tarjetas de Pagar */
  --radio:12px;
  /* CONTRASTE (WCAG AA, 2026-09-23). El rosa de la marca sobre blanco da 2,6:1: vale de fondo —con texto negro, 7,4:1—
     pero no para escribir. Los precios van en este rosa más hondo, 5,5:1 sobre blanco y 4,9:1 sobre el gris de banda.
     Para volver al de antes: `--rosa-texto:var(--rosa)`. */
  --rosa-texto:#C8008F;
  /* EL ROSA DE FONDO (3-oct). El de la marca al 14 % sobre blanco: un velo, no un cartel. Con texto negro, 17:1. Lo usa
     la invitación a crear cuenta en «Pagar». Para volver al gris: `--rosa-suave:var(--gris-3)`. */
  --rosa-suave:rgba(255,103,209,.14);
  --rosa-filete:rgba(255,103,209,.45);
  --gris-2:#454542;               /* texto secundario: el gris oscuro de la banda de filtros de la carta */
  --gris-3:#F2F2F2;               /* fondo de banda: la de filtros de la carta */
  --linea:rgba(166,166,161,.49);  /* filete entre secciones de la carta */
  --apagado:rgba(15,15,14,.62);   /* el índice inactivo de la ficha de producto. Era .45 (3,1:1); con .62, 5,4:1 */
  --pestana:#5C6B00;              /* pestaña inactiva sobre el amarillo. Era #A0BB00 (1,9:1); este, 5,1:1 */
  --texto:"Zen Kaku Gothic Antique",system-ui,sans-serif;
  --titulo:"Plaak Extended",system-ui,sans-serif;
  --plaak-e:"Plaak Extended",system-ui,sans-serif;
  --plaak-c:"Plaak Condensed","Arial Narrow",system-ui,sans-serif;
  --florent:"Florent",system-ui,sans-serif;
  --florent-c:"Florent Condensed","Arial Narrow",system-ui,sans-serif;
  --barra:64px;
  --cab:72px;                     /* alto de la cabecera del sitio: 72 px en móvil, 88 desde 768 */
  --ancho:1170px;                 /* el contenedor del sitio: 1140 px de contenido y 15 de margen */
}
@media (min-width:768px){:root{--cab:88px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
/* El hueco de abajo es de la barra fija, y del botón fijo del carrito cuando lo hay: sin él, el pie
   del sitio se quedaría debajo de los dos. `con-pie-fijo` lo pone app.js al pintar. */
body{margin:0;font-family:var(--texto);font-size:16px;line-height:1.45;color:var(--negro);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}
body.con-pie-fijo{padding-bottom:calc(var(--barra) + 76px + env(safe-area-inset-bottom))}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;margin:0;touch-action:manipulation}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:700;line-height:1.1}
.t{font-family:var(--plaak-e);font-weight:900}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* FOCO A LA VISTA (2026-09-23). Con el teclado, cada control enseña dónde está con un aro negro separado 2 px, que se lee
   sobre blanco, amarillo, verde y rosa. Los campos siguen con el verde del sitio. Lo que recibe el foco por código —el
   <h1> de cada pantalla, la hoja al abrirse— no lleva aro: no es un control. */
:where(button,a,[role=button],[role=radio],summary):focus-visible{outline:3px solid var(--negro);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
.aviso:not(.aviso-ok) :focus-visible{outline-color:var(--lima)}
/* Dentro de lo que desplaza en horizontal o en vertical (pestañas, filtros, filas, el cuerpo de la hoja) un aro por
   fuera quedaría cortado: va por dentro. Sobre el filtro negro, en blanco. */
:is(.hoja-cuerpo,.pestanas,.chips,.fila-h,.reco-fila) :focus-visible{outline-offset:-5px}
.chip.activa:focus-visible{outline-color:#fff}
/* Saltar al contenido: fuera de la vista hasta que el tabulador llega a él. */
.saltar{position:absolute;left:8px;top:-60px;z-index:200;padding:10px 16px;background:var(--negro);color:#fff;font-family:var(--plaak-e);font-weight:900;font-size:13px;text-transform:uppercase}
.saltar:focus{top:8px;outline:3px solid var(--negro);outline-offset:2px}

/* Cinta de maqueta */
.cinta{background:var(--amarillo);color:var(--negro);font-size:12px;font-weight:500;text-align:center;padding:5px 12px;line-height:1.3}
/* Tienda cerrada: no es un error, es el horario. Negro y no rojo, y con el punto en amarillo para
   que se lea de un golpe sin parecer una avería. Lo enciende app.js con /api/horario. */
.cinta.cerrada{background:var(--negro);color:#fff;font-size:13px;padding:7px 12px}
.cinta.cerrada b{font-weight:500}
.cinta.cerrada .punto{color:var(--amarillo);margin-right:6px}

/* La cabecera del sitio lleva debajo un filete negro en las pantallas de pedido de producción
   (la barra de categorías y el carrito empiezan con él). Solo aquí: las páginas propias no lo tienen. */
body.con-sitio .cab{box-shadow:0 1px 0 var(--negro)}

/* Dónde recibes: con la forma de la banda de filtros de la carta (gris, filete negro, Florent Condensed) */
.entrega{background:var(--gris-3);border-bottom:1px solid var(--negro)}
.entrega-in{max-width:var(--ancho);margin:0 auto;padding:0 15px}
.local-chip{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;text-align:left;font-family:var(--florent-c);font-size:16px;line-height:1.15;text-transform:uppercase;color:var(--negro)}
.local-chip .donde{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.local-chip .cambiar{flex:none;font-family:var(--plaak-e);font-weight:900;font-size:12px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Vista */
.vista{max-width:var(--ancho);margin:0 auto;padding:0 15px 48px}
.seccion{padding:24px 0 8px}
/* Título de pantalla: como «CARRITO» en producción (Plaak Extended 900), con raya negra debajo */
.seccion>h1{font-family:var(--plaak-e);font-weight:900;font-size:26px;line-height:1.05;text-transform:uppercase;padding-bottom:12px;border-bottom:3px solid var(--negro);margin-bottom:16px}
/* Título con una acción al lado (el carrito y su «Seguir pidiendo»): el filete pasa del h1 a la fila. */
.tit-accion{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:3px solid var(--negro);margin-bottom:16px}
.tit-accion>h1{font-family:var(--plaak-e);font-weight:900;font-size:26px;line-height:1.05;text-transform:uppercase}
.tit-accion .btn-linea span{font-size:18px;line-height:1}
.sub{color:var(--gris-2);font-size:14px}
.vacio{padding:40px 16px;text-align:center;color:var(--gris-2)}
.vacio h2,.apagada .vacio h1{font-family:var(--plaak-c);font-weight:700;font-size:26px;text-transform:uppercase;color:var(--negro);margin-bottom:8px}

/* Barra inferior (móvil). Iconos del sitio; activa con la raya negra de las pestañas */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--barra) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--negro);display:grid;grid-template-columns:repeat(4,1fr)}
.barra a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;font-family:var(--plaak-c);font-weight:700;font-size:13px;line-height:1;text-transform:uppercase;color:var(--apagado)}
.barra a .ico{display:block;width:24px;height:24px}
.barra a .ico svg{display:block;width:100%;height:100%}
.barra a[data-tab=carrito] .ico{width:30px;height:30px;margin:-3px 0}
.barra a.activa{color:var(--negro)}
.barra a.activa::before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:3px;background:var(--negro)}
.barra .n{position:absolute;top:4px;left:calc(50% + 9px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--negro);color:#fff;font-family:var(--plaak-e);font-weight:900;font-size:11px;line-height:20px;text-align:center}

/* Carta. Pestañas: la barra de categorías de la carta de producción — amarilla, Plaak Condensed 700
   en mayúsculas, inactiva en #A0BB00, activa en negro con raya de 3 px — de lado a lado. */
.seccion.carta{padding-top:0}
.pestanas{position:sticky;top:var(--cab);z-index:15;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:var(--amarillo);border-bottom:1px solid var(--negro);margin:0 calc(50% - 50vw);padding:0 calc(50vw - 50%)}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:none;position:relative;min-height:52px;padding:0 14px;font-family:var(--plaak-c);font-weight:700;font-size:18px;line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--pestana)}
/* Márgenes automáticos y no `justify-content:center`: centrado, un carril que desborda esconde el principio */
.pestanas button:first-child{margin-left:auto}
.pestanas button:last-child{margin-right:auto}
.pestanas button.activa{color:var(--negro)}
.pestanas button.activa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--negro)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -15px;padding:16px 15px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 14px;border:2px solid var(--negro);background:#fff;font-family:var(--florent-c);font-size:17px;line-height:1;text-transform:uppercase;color:var(--negro)}
.chip.activa{background:var(--negro);color:#fff}
/* Grupos: título en Florent y subtítulo en Zen Kaku en mayúsculas, separados por el filete de la carta */
.grupo{padding-top:24px}
.grupo+.grupo{margin-top:24px;border-top:1px solid var(--linea)}
.grupo h2{font-family:var(--florent);font-weight:400;font-size:26px;line-height:1.1;margin-bottom:14px}
.grupo h2 small{display:block;margin-top:4px;font-family:var(--texto);font-weight:400;font-size:14px;line-height:1.3;text-transform:uppercase;color:var(--negro)}
.cuadricula{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 12px}
/* Ficha: como en la carta de producción, foto cuadrada sin radio ni borde, nombre y precio en rosa.
   El «+» no existe allí: es el toque único de esta pantalla, en el verde del botón de pedir. */
.tarjeta{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%}
.tarjeta .foto{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--gris-3)}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover}
.tarjeta .nombre{order:1;display:block;margin-top:8px;font-family:var(--plaak-c);font-weight:600;font-size:18px;line-height:1.05;color:var(--negro)}
.tarjeta .precio{order:2;display:block;margin-top:2px;font-family:var(--florent-c);font-weight:500;font-size:18px;line-height:1.1;color:var(--rosa-texto)}
.tarjeta .mas{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;background:var(--lima);border:2px solid var(--negro);color:var(--negro);font-family:var(--plaak-e);font-weight:900;font-size:22px;line-height:1}
.tarjeta .etiqueta{position:absolute;left:8px;bottom:8px;background:#fff;border:2px solid var(--negro);padding:5px 7px 4px;font-family:var(--plaak-c);font-weight:700;font-size:14px;line-height:1;text-transform:uppercase}
/* Agotado: la foto se apaga y la chapa lo dice. La tarjeta se sigue pudiendo tocar a propósito
   —al tocarla se explica—, porque una tarjeta muerta se lee igual que una pantalla rota. */
.tarjeta.agotada .foto img{filter:grayscale(1);opacity:.4}
.tarjeta.agotada .precio,.tarjeta.agotada .nombre{color:var(--apagado)}
/* «Tu favorito» (ADR-048): la misma etiqueta que «Ármalo tú», en el rosa de la estrella del carrito */
.tarjeta .etiqueta.tuya{background:var(--rosa)}
.tarjeta .chapa-agotado{position:absolute;left:8px;bottom:8px;background:var(--negro);color:#fff;padding:5px 8px 4px;font-family:var(--plaak-c);font-weight:700;font-size:14px;line-height:1;text-transform:uppercase}
.linea-c.agotada .foto img{filter:grayscale(1);opacity:.4}
/* Con `.linea-c .cuerpo .det` (misma especificidad) hay que ser más específico o gana el gris. */
.linea-c .cuerpo .det.aviso-agotado{color:var(--alerta,#B3261E);font-weight:500}
.fila-h{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -15px;padding:0 15px 6px}
.fila-h::-webkit-scrollbar{display:none}
.repetir{flex:none;width:260px;padding:14px;border:2px solid var(--negro);background:#fff;text-align:left;display:flex;flex-direction:column;gap:8px}
.repetir .l1{font-family:var(--florent-c);font-size:16px;text-transform:uppercase;color:var(--gris-2)}
.repetir .l2{font-size:14px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.repetir .l3{display:flex;justify-content:space-between;align-items:center;font-family:var(--plaak-e);font-weight:900;font-size:14px}
.repetir .l3 span{background:var(--negro);color:#fff;padding:7px 10px 6px;font-size:11px;text-transform:uppercase}

/* Hoja (producto, entrar): recta y con borde negro, por encima de la cabecera del sitio (z 50) y
   por debajo de su menú lateral (z 100). El velo es el del menú. */
.velo{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6)}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:61;background:#fff;border-top:3px solid var(--negro);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden}
.hoja-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 6px 6px 15px;background:#fff;border-bottom:1px solid var(--negro)}
.hoja-cab h2{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--plaak-c);font-weight:700;font-size:24px;line-height:1.1;text-transform:uppercase}
.cerrar{flex:none;width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--negro);background:#fff;color:var(--negro)}
.cerrar svg{width:18px;height:18px}
.hoja-cuerpo{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;padding-bottom:16px}
.hoja-pie{position:sticky;bottom:0;z-index:2;background:#fff;border-top:1px solid var(--negro);padding:10px 15px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center}
.hoja .foto-g{aspect-ratio:16/10;background:var(--gris-3);overflow:hidden}
.hoja .foto-g img{width:100%;height:100%;object-fit:cover}
/* Cabeza del producto: nombre en Plaak Condensed 700 y precio en rosa, como la ficha de producción */
.prod-cab{padding:14px 15px 6px}
.prod-cab .precio{font-family:var(--florent-c);font-weight:500;font-size:23px;line-height:1.1;color:var(--rosa-texto)}
.prod-cab h1{margin:2px 0 4px;font-family:var(--plaak-c);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase}
.prod-cab p{color:var(--gris-2);font-size:15px}

/* Recomendadas */
.reco{margin-top:10px;padding:12px 0 4px 15px;background:var(--gris-3);border-top:1px solid var(--negro);border-bottom:1px solid var(--negro)}
.reco h3{padding-right:15px;font-family:var(--florent);font-weight:400;font-size:22px;line-height:1.1}
.reco .sub{margin:2px 15px 10px 0}
.reco-fila{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 15px 14px 0}
.reco-fila::-webkit-scrollbar{display:none}
.reco-tar{flex:none;position:relative;width:260px;padding:12px;background:#fff;border:2px solid var(--negro);text-align:left;display:flex;flex-direction:column;gap:6px}
.reco-tar.activa{box-shadow:inset 0 0 0 1px var(--negro)}
.reco-tar .l1{padding-right:30px;font-family:var(--plaak-c);font-weight:700;font-size:18px;line-height:1.1;text-transform:uppercase}
.reco-tar .l2{font-size:13px;color:var(--gris-2);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.reco-tar .l3{font-family:var(--florent-c);font-weight:500;font-size:20px;color:var(--rosa-texto)}
.reco-tar .radio{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;border:2px solid var(--negro);background:#fff}
.reco-tar.activa .radio{background:var(--negro);box-shadow:inset 0 0 0 4px #fff}

/* Secciones plegables: título en Florent y la regla en Zen Kaku en mayúsculas, como «Escoge Tu Masa ·
   SELECCIONA 1» en la ficha de producción */
.sec{border-bottom:1px solid var(--linea)}
.sec-cab{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:8px 15px;text-align:left}
.sec-cab .tit{flex:1;min-width:0}
.sec-cab h3{font-family:var(--florent);font-weight:400;font-size:20px;line-height:1.1}
.sec-cab .regla{display:block;margin-top:2px;font-size:13px;line-height:1.3;text-transform:uppercase;color:var(--gris-2)}
.estado{flex:none;padding:5px 8px 4px;border:2px solid var(--negro);background:var(--negro);color:#fff;font-family:var(--plaak-c);font-weight:700;font-size:13px;line-height:1;text-transform:uppercase}
.estado.oblig{background:#fff;color:var(--negro)}
.estado.listo{background:var(--lima);color:var(--negro)}
.flecha{flex:none;width:28px;height:28px;display:grid;place-items:center;color:var(--negro);transition:transform .15s}
.flecha svg{width:14px;height:14px}
.sec.abierta>.sec-cab .flecha{transform:rotate(180deg)}
.sec>.sec-cuerpo{display:none}
.sec.abierta>.sec-cuerpo{display:block}
/* Plegada, una sección con algo elegido sigue enseñando lo elegido: solo se esconde lo que no (Jürgen, 28-sep). En
   Extras plegado, lo mismo con sus subsecciones: se ven las que llevan algo, y de ellas, solo lo elegido. */
.sec.con-sel:not(.abierta)>.sec-cuerpo{display:block}
.sec.con-sel:not(.abierta)>.sec-cuerpo>.opcion:not(.sel){display:none}
.sec.extras:not(.abierta)>.sec-cuerpo>.sub-sec:not(.con-sel){display:none}
.sec.extras:not(.abierta)>.sec-cuerpo>.sub-sec>.sec-cuerpo{display:block}
.sec.extras:not(.abierta)>.sec-cuerpo>.sub-sec>.sec-cuerpo>.opcion:not(.sel){display:none}
.opcion{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 15px;width:100%;text-align:left;border-top:1px solid var(--linea)}
.opcion .nom{flex:1;font-family:var(--plaak-c);font-weight:600;font-size:17px;line-height:1.1;text-transform:uppercase}
.opcion .nom small{display:block;margin-top:1px;font-family:var(--florent-c);font-weight:500;font-size:16px;text-transform:none;color:var(--rosa-texto)}
.opcion .marca{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--negro);background:#fff}
.opcion.sel .marca{background:var(--negro);box-shadow:inset 0 0 0 4px #fff}
.opcion .marca.cuadro{border-radius:0}
.opcion.sel .marca.cuadro{box-shadow:none;background:var(--negro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat}
.opcion.tope{opacity:.4}
.opcion.sel{background:var(--gris-3)}
.cant{flex:none;display:flex;align-items:center;height:48px;border:2px solid var(--negro);background:#fff}
.cant button{width:44px;height:44px;display:grid;place-items:center;font-family:var(--plaak-e);font-weight:900;font-size:18px;line-height:1}
.cant button:disabled{opacity:.35;cursor:default}
.cant b{min-width:22px;text-align:center;font-family:var(--plaak-e);font-weight:900;font-size:15px}
.sec.extras>.sec-cab h3{font-size:20px}
.sec.extras .sub-sec{border-top:1px solid var(--linea)}
.sec.extras .sub-sec .sec-cab{min-height:52px;padding-left:24px}
.sec.extras .sub-sec .sec-cab h3{font-size:18px}
.sec.extras .sub-sec .opcion{padding-left:24px}
.ver-elegido{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 15px;text-align:left;font-family:var(--plaak-c);font-weight:700;font-size:17px;text-transform:uppercase;color:var(--negro)}
.ver-elegido svg{width:12px;height:12px}
.ver-elegido.abierto svg{transform:rotate(180deg)}
.elegido{padding:0 15px 8px}
.elegido div{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;border-top:1px solid var(--linea)}
.elegido div span{flex:1}
.elegido div button{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--negro);background:#fff}
.elegido div button svg{width:12px;height:12px}
.nombralo{padding:14px 15px 4px;border-top:1px solid var(--linea)}
.nombralo label{display:block;margin-bottom:6px;font-family:var(--florent-c);font-size:16px;line-height:1.2;text-transform:uppercase}
.nombralo input{width:100%;min-height:48px;padding:8px 13px;border:2px solid var(--negro);border-radius:2px;font-family:var(--plaak-e);font-weight:700;font-size:16px;text-transform:uppercase}
.nombralo input:focus{outline:3px solid var(--negro);outline-offset:1px}

/* Botones del sitio: rectos, borde negro de 3 px, Plaak Extended 900 en mayúsculas. El principal de
   cada pantalla va en verde y se invierte a negro con letra verde, como PIDE AQUÍ; apagado, con
   opacidad, como «LISTO, AÑADIR» en la ficha de producción. */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-height:52px;padding:10px 12px;border:3px solid var(--negro);border-radius:0;background:var(--lima);color:var(--negro);font-family:var(--plaak-e);font-weight:900;font-size:15px;line-height:1.1;text-align:center;text-transform:uppercase;transition:background .15s,color .15s}
.btn:disabled,.btn.gris{opacity:.45;cursor:default}
.btn.negro{background:var(--negro);color:#fff}
.btn.sec-b{flex:none;background:#fff;color:var(--negro)}
.btn.verde{background:var(--lima);color:var(--negro)}
.btn-linea{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:3px solid var(--negro);border-radius:0;background:#fff;color:var(--negro);font-family:var(--plaak-e);font-weight:900;font-size:13px;line-height:1.1;text-transform:uppercase}
.btn-texto{min-height:44px;padding:0 6px;font-family:var(--plaak-c);font-weight:700;font-size:16px;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (hover:hover){
  .btn:not(:disabled):hover{background:var(--negro);color:var(--lima)}
  .btn.negro:not(:disabled):hover{background:var(--lima);color:var(--negro)}
  .btn-linea:hover,.btn.sec-b:hover{background:var(--negro);color:#fff}
  .btn.google:not(:disabled):hover{background:var(--gris-3);color:var(--negro)}
  .tarjeta .mas:hover,.mini-tar .mas:hover{background:var(--negro);color:var(--lima)}
  .cerrar:hover,.elegido div button:hover{background:var(--negro);color:#fff}
  .chip:not(.activa):hover{background:var(--gris-3)}
  .pestanas button:hover{color:var(--negro)}
  .btn-texto:hover,.local-chip:hover .cambiar{color:var(--gris-2)}
}

/* Entrar: dónde y cómo. La elegida lleva la marca de esquina de «Retiro en local» del pago del sitio */
.entrar{padding:4px 15px 16px}
.modo{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:76px;margin-top:10px;padding:14px;text-align:left;border:2px solid var(--negro);background:#fff}
.modo.sel{box-shadow:inset 0 0 0 1px var(--negro)}
.modo.sel::before{content:"";position:absolute;top:-2px;left:-2px;width:22px;height:22px;background:var(--negro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
.modo:disabled{opacity:.45;cursor:default}
.modo .ico{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--negro)}
.modo .ico svg{width:28px;height:28px}
.modo .tx{flex:1;min-width:0}
.modo .tx b{display:block;font-family:var(--plaak-c);font-weight:700;font-size:20px;line-height:1.1;text-transform:uppercase}
.modo .tx span{display:block;font-size:13px;line-height:1.35;color:var(--gris-2);margin-top:3px}
.modo .tx .abierto{color:#1a7a00;font-weight:500}
.modo .tx .cerrado{color:#b00020;font-weight:500}
/* La puerta de la venta limitada (28-sep): su título es una frase entera, y cortado con «…» no diría nada. */
.hoja-cab .titulo-largo{white-space:normal;font-size:20px;padding:6px 0}
.puerta{padding:14px 15px 4px}
/* Campos: como los de contacto y únete, ya medidos (2 px negros, Plaak Extended 700 en mayúsculas, foco
   verde). Plaak solo tiene mayúsculas —medido: «abcdefg» y «ABCDEFG» miden lo mismo—, así que un
   correo va en Zen Kaku: en Plaak saldría en mayúsculas aunque se quite el `text-transform`. */
.campo{margin-top:14px}
.campo label{display:block;margin-bottom:6px;font-family:var(--florent-c);font-size:16px;line-height:1.2;text-transform:uppercase;color:var(--negro)}
.campo label .sub,fieldset.campo legend .sub{font-family:var(--texto);font-size:13px;text-transform:none}
.campo input,.campo select{display:block;width:100%;min-height:48px;padding:8px 13px;border:2px solid var(--negro);border-radius:2px;background:#fff;font-family:var(--plaak-e);font-weight:700;font-size:16px;line-height:1.3;text-transform:uppercase;color:var(--negro);-webkit-appearance:none;appearance:none}
.campo input[type=email]{font-family:var(--texto);font-weight:500;text-transform:none}
.campo input::placeholder{color:#6E6E6C;opacity:1}
.campo select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F0F0E' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:36px}
.campo select:disabled{opacity:.45}
.campo input:focus,.campo select:focus{outline:3px solid var(--negro);outline-offset:1px}
.campo .nota{font-size:13px;line-height:1.35;color:var(--gris-2);margin-top:6px}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Carrito */
.linea-c{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea)}
.linea-c .foto{flex:none;width:64px;height:64px;overflow:hidden;background:var(--gris-3)}
.linea-c .foto img{width:100%;height:100%;object-fit:cover}
.linea-c .cuerpo{flex:1;min-width:0}
.linea-c .cuerpo .nom{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--plaak-c);font-weight:700;font-size:18px;line-height:1.1;text-transform:uppercase}
.linea-c .cuerpo .nom span:last-child{flex:none;font-family:var(--florent-c);font-weight:500;font-size:19px;text-transform:none}
.linea-c .cuerpo .det{font-size:13px;color:var(--gris-2);line-height:1.35;margin-top:2px}
.linea-c .cuerpo .det.corto{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.linea-c .acc{display:flex;align-items:center;gap:6px;margin-top:10px}
.linea-c .acc .cant{height:40px}
.linea-c .acc .cant button{width:36px;height:36px}
.linea-c .acc .btn-texto{margin-left:auto}
.algo-mas{margin-top:28px}
.algo-mas h2{margin-bottom:14px;font-family:var(--plaak-e);font-weight:700;font-size:22px;line-height:1.1;text-transform:uppercase}
.mini-tar{flex:none;width:136px;text-align:left;display:flex;flex-direction:column;align-items:stretch}
.mini-tar .foto{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--gris-3)}
.mini-tar .foto img{width:100%;height:100%;object-fit:cover}
.mini-tar .mas{position:absolute;top:6px;right:6px;width:36px;height:36px;display:grid;place-items:center;background:var(--lima);border:2px solid var(--negro);color:var(--negro);font-family:var(--plaak-e);font-weight:900;font-size:18px;line-height:1}
.mini-tar .nombre{order:1;display:block;margin-top:8px;font-family:var(--plaak-c);font-weight:600;font-size:16px;line-height:1.1}
.mini-tar .precio{order:2;display:block;font-family:var(--florent-c);font-weight:500;font-size:17px;color:var(--rosa-texto)}
.totales{margin-top:20px;padding-top:12px;border-top:3px solid var(--negro)}
.totales div{display:flex;justify-content:space-between;padding:5px 0;font-size:15px}
.totales div.total{padding-top:10px;font-family:var(--plaak-e);font-weight:900;font-size:18px;text-transform:uppercase}
.pie-fijo{position:fixed;left:0;right:0;bottom:calc(var(--barra) + env(safe-area-inset-bottom));z-index:25;background:#fff;border-top:1px solid var(--negro);padding:10px 15px}
.pie-fijo .in{max-width:var(--ancho);margin:0 auto;display:flex;gap:10px;align-items:center}

/* Pagar */
/* Volver al carrito: arriba, con el peso de los enlaces de texto del sitio, porque abajo lo tapa el pie fijo */
.volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px 0 2px -2px;padding-right:8px;font-family:var(--plaak-c);font-weight:700;font-size:16px;line-height:1;text-transform:uppercase;color:var(--negro)}
.volver svg{width:14px;height:14px;flex:none}
.volver span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.resumen-p{display:flex;gap:12px;align-items:center;margin-bottom:10px;padding:14px;border:2px solid var(--negro)}
.resumen-p .ico{flex:none;width:32px;height:32px;display:grid;place-items:center}
.resumen-p .ico svg{width:28px;height:28px}
.resumen-p .tx b{display:block;font-family:var(--plaak-c);font-weight:700;font-size:19px;line-height:1.1;text-transform:uppercase}
.resumen-p .tx span{display:block;font-size:13px;color:var(--gris-2);margin-top:2px}
.resumen-p .cambiar{margin-left:auto}
.lista-p{font-size:14px;padding:4px 0;border-bottom:1px solid var(--linea);margin-bottom:10px}
.lista-p div{display:flex;justify-content:space-between;gap:10px;padding:6px 0}
.lista-p div span:first-child{flex:1}
.pago-sim{padding:28px 0;text-align:center}
.pago-sim .logo-culqi{display:inline-block;margin-bottom:18px;padding:8px 12px 7px;border:2px solid var(--negro);font-family:var(--plaak-e);font-weight:900;font-size:13px;text-transform:uppercase}
.pago-sim h1{font-family:var(--plaak-e);font-weight:900}
.pago-sim p{color:var(--gris-2);font-size:14px;margin-top:12px}
/* Enviando el pedido. El velo tapa la pantalla entera —cabecera y barra incluidas— para que nada se pueda tocar hasta
   «¡Listo!» o el error, y en el centro gira la estrella rosa del carrito del sitio con su bolsa quieta. Blanco y no
   negro, porque es una espera y no un aviso; y opaco, porque con transparencia el botón y el pie de debajo se leían a
   través del texto (medido en la captura del 16-sep). */
.velo-envio{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;background:#fff;text-align:center}
.envio-ico{position:relative;display:block;width:96px;height:96px;margin-bottom:14px}
.envio-ico svg{position:absolute;inset:0;width:100%;height:100%}
.envio-estrella{animation:envio-gira 2.4s linear infinite}
@keyframes envio-gira{to{transform:rotate(360deg)}}
.velo-envio-t{font-family:var(--plaak-e);font-weight:900;font-size:22px;line-height:1.1;text-transform:uppercase;color:var(--negro)}
.velo-envio-s{font-size:15px;color:var(--gris-2)}
.btn.en-curso:disabled{opacity:1;background:var(--negro);color:#fff}
@media (prefers-reduced-motion:reduce){.envio-estrella{animation-duration:12s}}
.metodos{display:grid;gap:8px;margin:16px 0}
.metodos button{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:2px solid var(--negro);text-align:left;font-size:15px}
.metodos button.sel{box-shadow:inset 0 0 0 1px var(--negro);background:var(--gris-3)}
/* ¿Cómo pagas? (ADR-049): tarjeta o Yape, junto a los datos. Filas del mismo borde que el resto del pago, con un punto
   de radio redondo, que es lo que se reconoce como «elige uno». La elegida lleva el gris de la banda de filtros. */
.metodos-pago{display:grid;gap:8px;margin-top:14px}
.metodos-pago .t-medio{margin:0;font-family:var(--florent-c);font-size:16px;line-height:1.2;text-transform:uppercase;color:var(--negro)}
.metodos-pago .medio{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:2px solid var(--negro);background:#fff;color:var(--negro);text-align:left;font-size:15px}
.metodos-pago .medio .punto{flex:none;display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--negro);border-radius:50%}
.metodos-pago .medio.sel{background:var(--gris-3);box-shadow:inset 0 0 0 1px var(--negro)}
.metodos-pago .medio.sel .punto::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--negro)}
.metodos-pago .medio .tx b{display:block;font-weight:700;line-height:1.2}
.metodos-pago .medio .tx span{display:block;margin-top:2px;font-size:13px;color:var(--gris-2)}
.metodos-pago .medio:disabled{opacity:.45}
.pago-sim .logo-culqi svg{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.pago-sim .pedido-reservado{margin-top:2px;font-weight:700;color:var(--negro)}

/* Confirmación / pedidos */
.confirmado{padding:32px 0 8px;text-align:center}
.confirmado .check{width:64px;height:64px;margin:0 auto 16px;display:grid;place-items:center;background:var(--lima);border:3px solid var(--negro)}
.confirmado .check svg{width:32px;height:32px}
.confirmado h1{font-family:var(--plaak-e);font-weight:900;font-size:24px;text-transform:uppercase}
.confirmado p{color:var(--gris-2);margin:8px 0 0}
.pedido-tar{margin-top:14px;padding:16px;border:2px solid var(--negro)}
.pedido-tar .l1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--plaak-c);font-weight:700;font-size:20px;text-transform:uppercase}
.pedido-tar .l1 span:last-child{font-family:var(--texto);font-weight:400;font-size:13px;text-transform:none;color:var(--gris-2)}
.pedido-tar .l2{font-size:14px;color:var(--gris-2);margin:6px 0 10px;line-height:1.4}
.pedido-tar .l3{display:flex;gap:10px;align-items:center}
.pedido-tar .l3 .t{font-size:15px;text-transform:uppercase}
.pedido-tar .l3 .btn{flex:none;min-height:44px;padding:8px 14px;font-size:13px}
.estado-p{display:inline-block;padding:4px 7px 3px;border:2px solid var(--negro);font-family:var(--plaak-c);font-weight:700;font-size:13px;line-height:1;text-transform:uppercase;color:var(--negro)}
.estado-p.curso{background:var(--amarillo)}

/* Cuenta */
.cuenta-cab{display:flex;align-items:center;gap:14px;padding:4px 0 18px}
.cuenta-cab .av{width:56px;height:56px;display:grid;place-items:center;background:var(--negro);color:#fff;font-family:var(--plaak-e);font-weight:900;font-size:22px}
.cuenta-cab b{display:block;font-family:var(--plaak-c);font-weight:700;font-size:24px;line-height:1.1;text-transform:uppercase}
.cuenta-cab span{font-size:13px;color:var(--gris-2)}
.lista-cta{border-top:1px solid var(--negro)}
.lista-cta .fila{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--linea);width:100%;text-align:left}
.lista-cta .fila .tx{flex:1}
.lista-cta .fila .tx b{display:block;font-family:var(--plaak-c);font-weight:700;font-size:18px;line-height:1.1;text-transform:uppercase}
.lista-cta .fila .tx span{display:block;font-size:13px;color:var(--gris-2);margin-top:2px}
.lista-cta .fila .val{font-size:15px;color:var(--negro)}
.puntos{margin-top:16px;padding:14px;background:var(--gris-3);border:2px solid var(--negro)}
.puntos b{display:block;font-family:var(--plaak-c);font-weight:700;font-size:18px;text-transform:uppercase;margin-bottom:4px}
.puntos p{font-size:13px;color:var(--gris-2)}
.creacion{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--linea)}
.creacion .tx{flex:1}
.creacion .tx b{display:block;font-family:var(--plaak-c);font-weight:700;font-size:18px;text-transform:uppercase}
.creacion .tx span{display:block;font-size:13px;color:var(--gris-2);line-height:1.35}
.codigo{display:flex;gap:8px;margin-top:10px}
.codigo input{text-align:center;font-family:var(--plaak-e);font-weight:900;font-size:24px;letter-spacing:.3em}

/* La cuenta de verdad (ADR-034): Google, el código por correo y «Te faltan unos datos». Solo en el frente. */
.btn.google{flex:none;width:100%;margin-top:14px;background:#fff;color:var(--negro);gap:12px}
.btn.google svg{width:18px;height:18px;flex:none}
.separador{display:flex;align-items:center;gap:12px;margin:22px 0 0;font-family:var(--florent-c);font-size:16px;text-transform:uppercase;color:var(--gris-2)}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--negro)}
.cuenta-aviso{margin:10px 0 14px;padding:12px 14px;background:var(--gris-3);border-left:3px solid var(--negro);font-size:14px}
.cuenta-error{margin:12px 0 0;color:var(--alerta,#B3261E);font-size:14px;font-weight:500}
.acciones-cuenta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0}
.doc-cuenta{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:10px}
fieldset.campo{border:0;padding:0;margin:14px 0 0;min-width:0}
fieldset.campo legend{margin-bottom:6px;padding:0;font-family:var(--florent-c);font-size:16px;line-height:1.2;text-transform:uppercase}
.casillas{margin-top:18px;border-bottom:1px solid var(--linea)}
.casilla{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-top:1px solid var(--linea)}
.casilla input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--negro)}
.casilla label{flex:1;font-size:14px;line-height:1.4;cursor:pointer}
.casilla .leer{flex:none;min-height:24px;padding:0 4px;font-size:15px}
.cuenta-real .lista-cta .fila .val{text-align:right;overflow-wrap:anywhere;max-width:60%}
.texto-legal{padding:12px 15px 16px;font-size:15px;line-height:1.55}
.texto-legal p{margin:0 0 12px}

/* La bienvenida del 15 % y editar la cuenta (ADR-042, ADR-043). Con la piel del sitio: el amarillo de la barra de
   categorías, filete negro de 3 px y el título en Plaak Condensed, como los encabezados de la carta. */
.bienvenida{margin:4px 0 22px;padding:18px 18px 20px;background:var(--amarillo);border:3px solid var(--negro)}
.bienvenida-tit{font-family:var(--plaak-c);font-weight:700;font-size:28px;line-height:1;text-transform:uppercase}
.bienvenida p+p{margin-top:8px;font-size:14px;line-height:1.45}
.bienvenida .btn{display:inline-flex;flex:none;margin-top:14px;min-height:46px;padding:8px 22px}
.totales div.descuento,.lista-p .descuento{font-weight:500}
/* LA INVITACIÓN A CREAR CUENTA (3-oct). Rosa suave y el «crear cuenta» como botón: se leía poco en gris y con un enlace
   chico. Botón negro, no lima: el lima es «Pagar», y los dos no compiten. En móvil el botón ocupa el ancho; desde 768,
   va a la derecha del texto. Vale igual para «¿Primera compra?» y para los pedidos de invitado. */
.invitacion-cuenta{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px;padding:14px 16px 16px;background:var(--rosa-suave);border:1.5px solid var(--rosa-filete);font-size:14px;line-height:1.45}
.invitacion-cuenta .btn{flex:none;min-height:48px;padding:10px 18px;font-size:14px}
@media (min-width:768px){
  .invitacion-cuenta{flex-direction:row;align-items:center;gap:20px}
  .invitacion-cuenta p{flex:1}
  .invitacion-cuenta .btn{min-height:46px;white-space:nowrap}
}
.campo .etiqueta{display:block;margin-bottom:6px;font-family:var(--florent-c);font-size:16px;line-height:1.2;text-transform:uppercase}
.solo-lectura{margin:0;font-family:var(--plaak-e);font-weight:700;font-size:16px}
.lista-cta.fijos{margin-top:18px}
.acciones-editar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:18px}
.acciones-editar .btn{flex:0 1 260px}

/* Insólito rewards en la cuenta (ADR-045). Plano y con la piel del sitio: cifra en Plaak Extended 900, niveles con el
   título en Plaak Condensed y filetes, botones rectos. El amarillo se queda para la bienvenida; aquí no hay degradados
   ni chapas: disponible o bloqueado se lee en el botón o en el candado. */
.pts-resumen{margin:4px 0 22px;padding:16px 18px 18px;border:3px solid var(--negro)}
.pts-etq{font-family:var(--florent-c);font-size:16px;line-height:1.2;text-transform:uppercase}
.pts-cifra{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px}
.pts-cifra b{font-family:var(--plaak-e);font-weight:900;font-size:44px;line-height:1}
.pts-cifra span{font-family:var(--plaak-c);font-weight:700;font-size:20px;text-transform:uppercase}
.pts-resumen .sub{line-height:1.45}
.pts-aviso-codigo{margin-top:10px;padding-left:10px;border-left:3px solid var(--negro);font-size:14px;font-weight:500}
.pts-resumen .btn{display:inline-flex;flex:none;margin-top:14px;min-height:46px;padding:8px 18px}
.pts-saldo{padding-bottom:18px}
.pts-saldo .sub{margin-top:6px;line-height:1.45}
.pts-saldo .sub b{color:var(--negro);font-weight:500}
.pts-barra{height:10px;margin:10px 0 2px;background:var(--gris-3);border:1px solid var(--negro)}
.pts-barra span{display:block;height:100%;background:var(--negro)}
.pts-h2{margin:26px 0 10px;font-family:var(--plaak-c);font-weight:700;font-size:26px;line-height:1.05;text-transform:uppercase}
.pts-h2+.sub{margin-bottom:12px}
.pts-fila{min-height:64px}
.pts-fila .btn-linea{flex:none;min-height:40px;padding:6px 12px;font-size:12px}
.pts-nivel{border-top:3px solid var(--negro);margin-top:14px}
.pts-nivel-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 0 4px}
.pts-nivel-cab h3{font-family:var(--plaak-c);font-weight:700;font-size:24px;line-height:1.05;text-transform:uppercase}
.pts-nivel-cab span{flex:none;font-size:13px;font-weight:500}
.pts-premio{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-top:1px solid var(--linea)}
.pts-premio .nom{flex:1;min-width:0;font-family:var(--plaak-c);font-weight:600;font-size:18px;line-height:1.1;text-transform:uppercase}
.pts-premio .btn-linea{flex:none;min-height:44px;padding:6px 14px;font-size:12px}
.pts-nivel.bloqueado .nom,.pts-nivel.bloqueado .pts-nivel-cab h3{color:var(--apagado)}
.pts-nivel.bloqueado .pts-nivel-cab span{color:var(--gris-2);font-weight:400}
.candado{flex:none;width:44px;height:44px;display:grid;place-items:center;color:var(--apagado)}
.candado svg{width:20px;height:20px}
.pts-mov .val{flex:none;font-family:var(--plaak-e);font-weight:900;font-size:15px}
.pts-mov .val.resta{color:var(--gris-2)}
.pts-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px}
.pts-pie .btn-texto:first-child{padding-left:0}
.pts-premio-g{margin:2px 0 8px;font-family:var(--plaak-c);font-weight:700;font-size:28px;line-height:1.05;text-transform:uppercase}
.pts-confirmar{padding:16px 15px 4px}
.pts-confirmar p+p{margin-top:8px}
/* El código: el QR sobre blanco con su margen dentro del SVG, y el código debajo para teclearlo. Ancho fijo para que
   la cámara de caja no tenga que acercarse, y nunca más ancho que la pantalla. */
.pts-codigo{text-align:center;padding:4px 0 8px}
.pts-codigo .pts-premio-g{margin-bottom:14px}
.qr-caja{width:min(280px,100%);margin:0 auto;border:3px solid var(--negro);background:#fff}
.qr-caja svg{display:block;width:100%;height:auto}
.qr-codigo{margin:14px 0 10px;font-family:var(--plaak-e);font-weight:900;font-size:30px;line-height:1;letter-spacing:.06em}
/* El código ya usado en caja: el QR desaparece y queda el mismo cuadrado verde de «¡Listo!» del pedido */
.pts-codigo.canjeado .check{width:64px;height:64px;margin:4px auto 14px;display:grid;place-items:center;background:var(--lima);border:3px solid var(--negro)}
.pts-codigo.canjeado .check svg{width:34px;height:34px}
.pts-codigo p+p{margin-top:6px}
.pts-codigo .sub{margin-top:6px}
.pts-sumados{margin:4px 0 0;padding:12px 14px;border-left:3px solid var(--negro);background:var(--gris-3);font-size:14px;line-height:1.45}
.pts-sumados .btn-texto{min-height:32px;padding:0;margin-left:4px}

/* Aviso y medidor */
.aviso{position:fixed;left:15px;right:15px;bottom:calc(var(--barra) + 14px + env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 16px;background:var(--negro);color:#fff;font-size:14px}
.aviso span{flex:1}
.aviso a,.aviso button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-family:var(--plaak-e);font-weight:900;font-size:13px;text-transform:uppercase;color:var(--lima)}
/* «Añadido» (22-sep: el negro se perdía, sobre todo en escritorio). Rosa de la estrella del carrito —el verde se perdía
   junto a la barra amarilla, dijo Jürgen— con texto negro (contraste 7,4:1), el borde de 3 px de la ficha de producto y
   un ✓, para que no dependa solo del color. «Ver carrito» pasa a botón negro. */
.aviso.aviso-ok{padding:8px 8px 8px 12px;background:var(--rosa);color:var(--negro);border:3px solid var(--negro);font-size:16px;font-weight:500;line-height:1.3}
.aviso-ico{display:block;flex:none;width:22px;height:22px}
.aviso-ico svg{display:block;width:100%;height:100%}
.aviso.aviso-ok a{min-height:40px;padding:0 12px;background:var(--negro);color:#fff}
.aviso:not([hidden]){animation:aviso-entra .18s ease-out}
@keyframes aviso-entra{from{opacity:0;translate:0 8px}}
@keyframes aviso-baja{from{opacity:0;translate:0 -8px}}
/* En el móvil, con el botón fijo del carrito o del pago, el aviso sube por encima de él: a la altura de siempre tapaba
   «Ir a pagar» (QA del 16-sep). Los 76 px son los del hueco que `body.con-pie-fijo` le reserva al pie. En escritorio el
   pie deja de ser fijo y no hace falta. */
@media (max-width:899px){body.con-pie-fijo .aviso{bottom:calc(var(--barra) + 76px + 10px + env(safe-area-inset-bottom))}}
.pedido-sin-lineas{padding:8px 0 12px}
.medidor{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:70;background:var(--rosa);color:var(--negro);border:2px solid var(--negro);padding:4px 6px 4px 12px;font-size:13px;font-weight:500;display:flex;gap:8px;align-items:center}
.medidor button{width:24px;height:24px;border:2px solid var(--negro);background:#fff;font-size:11px}


/* ---------- Autoservicio del local (29-sep) ----------
   Ficha del plato como la del autoservicio: foto pequeña, nombre grande y lo que lleva al lado, la cantidad en grande
   debajo y la barra negra con el total. El armado en bloques separados, con lo elegido en lima. */
.hoja .hoja-cuerpo{background:#F6F6F4}
.prod-cab{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:start;padding:16px 15px 6px;background:#fff}
.prod-cab .foto{aspect-ratio:1;overflow:hidden;background:var(--gris-3);border-radius:10px}
.prod-cab .foto img{width:100%;height:100%;object-fit:cover}
.prod-cab .tx{min-width:0}
.prod-cab .precio{font-size:18px}
.prod-cab h1{margin:2px 0 6px;font-size:30px}
.prod-cab .lleva{font-size:14px;line-height:1.45;color:var(--gris-2)}
.guia-t{margin:2px 0 8px;font-family:var(--plaak-e);font-weight:900;font-size:13px;line-height:1.1;text-transform:uppercase}
.guia ol{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:7px}
.guia li{counter-increment:paso;display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.3}
.guia li::before{content:counter(paso);flex:none;width:22px;height:22px;border-radius:50%;background:var(--negro);color:#fff;display:grid;place-items:center;font-family:var(--plaak-e);font-weight:900;font-size:11px;line-height:1}
.prod-cant{display:flex;justify-content:center;padding:8px 15px 16px;background:#fff;border-bottom:1px solid var(--linea)}
.cant.cant-g{height:auto;gap:22px;border:0;background:none}
.cant.cant-g button{width:54px;height:54px;border-radius:50%;border:2px solid var(--negro);font-size:24px}
.cant.cant-g button:disabled{border-color:var(--gris);color:var(--gris);opacity:1}
.cant.cant-g b{min-width:30px;font-size:28px}
.hoja .reco{margin-top:0;border-top:0}

.hoja .sec{margin:12px 12px 0;border:1.5px solid var(--borde-suave);border-radius:var(--radio);overflow:hidden;background:#fff}
.hoja .sec.sub-sec{margin:0;border:0;border-top:1px solid var(--linea);border-radius:0}
.hoja .sec-cab{min-height:64px;padding:10px 14px}
.hoja .sec-cab h3{font-family:var(--texto);font-weight:500;font-size:19px;line-height:1.2}
.hoja .sec.extras .sub-sec .sec-cab{padding-left:14px}
.hoja .sec.extras .sub-sec .sec-cab h3{font-size:17px}
.hoja .sec.extras .sub-sec .opcion{padding-left:14px}
.hoja .sec-cab .regla{text-transform:none;font-size:14px}
.hoja .estado{border-radius:999px;padding:6px 11px 5px}
.hoja .estado.oblig{background:var(--negro);color:#fff}
.hoja .opcion{padding:6px 14px}
.hoja .opcion.sel{background:var(--lima)}
.hoja .opcion.sel .nom{font-weight:700}
.hoja .opcion.sel .nom small{color:var(--negro)}
.hoja .opcion.tope{opacity:.4}
.hoja .ver-elegido{margin-top:8px}
.nota-cocina{margin:16px 12px 4px}
.nota-cocina label{display:block;margin-bottom:6px;font-weight:500;font-size:16px}
.nota-cocina label .sub{font-weight:400}
.nota-cocina textarea{display:block;width:100%;min-height:76px;padding:10px 12px;border:1.5px solid var(--borde-suave);border-radius:10px;background:#fff;font:inherit;font-size:16px;line-height:1.4;resize:vertical}
.nota-cocina textarea:focus{outline:2px solid var(--negro);outline-offset:0;border-color:var(--negro)}
.nota-cocina textarea::placeholder{color:#6E6E6C}
.hoja .nombralo{margin-top:12px}

/* La barra negra de abajo: el total a la izquierda y el botón lima, como el autoservicio. */
.hoja-pie.oscuro,.pie-fijo.oscuro{background:var(--negro);color:#fff;border-top:0}
.oscuro .total{flex:none;display:flex;flex-direction:column;min-width:0;max-width:44%}
.oscuro .total .etq{font-family:var(--plaak-e);font-weight:900;font-size:11px;line-height:1.2;text-transform:uppercase}
.oscuro .total b{font-family:var(--plaak-e);font-weight:900;font-size:22px;line-height:1.1;white-space:nowrap}
.oscuro .btn{border-color:var(--lima)}
.oscuro .btn:disabled{opacity:1;background:#3A3A37;border-color:#3A3A37;color:#C9C9C4}
@media (hover:hover){.oscuro .btn:not(:disabled):hover{background:#fff;border-color:#fff;color:var(--negro)}}

/* Carrito: lo elegido agrupado por sección al desplegar, y quitar una opción ahí mismo. */
.linea-c .cuerpo .det.corto{display:flex;align-items:flex-start;gap:10px;width:100%;margin-top:4px;text-align:left;-webkit-line-clamp:unset;overflow:visible}
.linea-c .cuerpo .det.corto>span{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.linea-c .cuerpo .det.corto.abierto>span{visibility:hidden;height:0}
.linea-c .cuerpo .det.corto.abierto{justify-content:flex-end}
.linea-c .cuerpo .det.corto i{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:24px;margin-left:auto;font-style:normal;font-family:var(--plaak-c);font-weight:700;font-size:14px;text-transform:uppercase;color:var(--negro)}
.linea-c .cuerpo .det.corto i svg{width:10px;height:10px}
.linea-c .cuerpo .det.corto.abierto i svg{transform:rotate(180deg)}
.grupos-l{margin-top:4px;border-top:1px dashed var(--negro)}
.grupo-l{padding:8px 0 2px}
.grupo-l>p{font-weight:500;font-size:14px;line-height:1.3;color:var(--negro)}
.grupo-l ul{list-style:none;margin:2px 0 0;padding:0}
.grupo-l li{display:flex;align-items:center;gap:8px;min-height:40px;font-size:14px;line-height:1.3;color:var(--gris-2)}
.grupo-l li .n{flex:1;min-width:0}
.grupo-l li .pr{flex:none;font-size:13px}
.grupo-l li button,.grupo-l li .fijo{flex:none;width:36px;height:36px}
.grupo-l li button{display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--borde-suave);background:#fff;color:var(--negro)}
.grupo-l li button svg{width:11px;height:11px}
@media (hover:hover){.grupo-l li button:hover{background:var(--rosa);border-color:var(--rosa)}}
.listo .pedido-tar{border:1.5px solid var(--borde-suave);border-radius:var(--radio)}
.grupo-l .nota-l{font-size:14px;line-height:1.4;color:var(--gris-2);padding-bottom:6px}
.acciones-carrito{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn-vaciar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#FDECEC;color:#B3261E;font-weight:500;font-size:15px}
.btn-vaciar svg{flex:none;width:18px;height:18px}
@media (hover:hover){.btn-vaciar:hover{background:#F9D5D5}}
.confirmar-t{padding:18px 15px 8px;font-size:16px}

/* Pagar, como «Finaliza tu compra» del autoservicio: el total en grande, los datos en una tarjeta negra con la cuenta
   abierta y, sin ella, campos redondeados. Más amable que el formulario recto del resto del sitio. */
.seccion>h1.pagar-tit{display:flex;align-items:center;gap:10px;margin:6px 0 0;padding:0;border:0;font-size:20px}
.pagar-tit .ico-ok{flex:none;width:30px;height:30px;border-radius:50%;background:var(--rosa);color:var(--negro);display:grid;place-items:center}
.pagar-tit .ico-ok svg{width:16px;height:16px}
.pagar-total{margin:22px 0 20px;text-align:center}
.pagar-total span{display:block;font-family:var(--plaak-e);font-weight:900;font-size:15px;text-transform:uppercase}
.pagar-total b{display:block;margin-top:2px;font-family:var(--plaak-e);font-weight:900;font-size:42px;line-height:1.05}
.pagar .resumen-p{border:1.5px solid var(--borde-suave);border-radius:var(--radio)}
.saludo{margin:20px 0 8px;font-size:16px}
.saludo b{font-weight:700;text-transform:uppercase}
.ficha-cliente{display:flex;align-items:center;gap:14px;padding:14px 10px 14px 16px;background:var(--negro);color:#fff;border-radius:var(--radio)}
.ficha-cliente .ico{flex:none;width:30px;height:30px;color:var(--lima)}
.ficha-cliente .ico svg,.ficha-cliente .editar svg{display:block;width:100%;height:100%}
.ficha-cliente .tx{flex:1;min-width:0}
.ficha-cliente .tx b{display:block;font-family:var(--plaak-e);font-weight:900;font-size:15px;line-height:1.2;text-transform:uppercase;overflow-wrap:anywhere}
.ficha-cliente .tx span{display:block;margin-top:4px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.ficha-cliente .editar{flex:none;width:48px;height:48px;padding:10px;color:var(--lima)}
.ficha-cliente .editar:focus-visible{outline-color:var(--lima)}
.pagar .campo label{font-family:var(--texto);font-weight:500;font-size:15px;text-transform:none}
.pagar .campo input{min-height:52px;border:1.5px solid var(--borde-suave);border-radius:10px;font-family:var(--texto);font-weight:500;text-transform:none}
.pagar .campo input:focus{outline:2px solid var(--negro);outline-offset:0;border-color:var(--negro)}
.pagar .metodos-pago{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.pagar .metodos-pago .t-medio{grid-column:1/-1;font-family:var(--texto);font-weight:500;font-size:15px;text-transform:none}
.pagar .metodos-pago .medio{position:relative;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:128px;padding:16px 10px 12px;border:1.5px solid var(--borde-suave);border-radius:var(--radio);background:#fff;text-align:center}
.pagar .metodos-pago .medio.sel{border:2px solid var(--negro);box-shadow:none;background:#fff}
.pagar .metodos-pago .medio .punto{position:absolute;top:10px;right:10px}
.pagar .metodos-pago .medio .ico-m{display:block;width:32px;height:32px}
.pagar .metodos-pago .medio .ico-m svg{display:block;width:100%;height:100%}
.pagar .metodos-pago .medio .tx b{font-family:var(--plaak-c);font-weight:700;font-size:17px;text-transform:uppercase}
.pagar .metodos-pago .medio .tx span{font-size:12px;line-height:1.3}
.gana-pts{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0 4px;font-size:15px}
.gana-pts b{display:block;margin-top:2px;font-family:var(--plaak-e);font-weight:900;font-size:22px;line-height:1.1}
.gana-pts i{flex:none;display:block;width:36px;height:36px;color:#8DB000}
.gana-pts i svg{display:block;width:100%;height:100%}
.pagar .invitacion-cuenta{border-radius:var(--radio)}
.pagar .lado{margin-top:18px;padding:14px 16px;border:1.5px solid var(--borde-suave);border-radius:var(--radio)}
.lado-t{margin-bottom:4px;font-family:var(--plaak-e);font-weight:900;font-size:13px;text-transform:uppercase}

/* Gracias, como el autoservicio: el número del pedido en grande y el sello. */
.gracias{padding:24px 0 6px;text-align:center}
.gracias h1{font-family:var(--plaak-e);font-weight:900;font-size:22px;line-height:1.15;text-transform:uppercase}
.gracias .donde{margin-top:8px;color:var(--gris-2)}
.gracias .num-etq{margin-top:22px;font-family:var(--plaak-c);font-weight:700;font-size:22px;line-height:1;text-transform:uppercase}
.gracias .num{margin-top:4px;font-family:var(--plaak-e);font-weight:900;font-size:54px;line-height:1}
.gracias .sello{width:min(230px,62vw);margin:22px auto 0;padding:28px;background:var(--gris-3);border-radius:var(--radio)}
.gracias .sello svg{display:block;width:100%;height:auto}
.gracias .pagado{margin-top:16px;color:var(--gris-2)}
.listo .pts-sumados{margin-top:14px}
.gracias-cta{display:flex;justify-content:center;margin-top:22px}
.gracias-cta .btn{flex:0 1 380px}

/* Lo que no abre ficha (complementos, jugos) enseña lo que lleva en la propia tarjeta. */
.tarjeta .lleva-t{order:3;display:-webkit-box;margin-top:4px;overflow:hidden;font-size:13px;line-height:1.35;color:var(--gris-2);-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Escritorio. Con la cabecera del sitio (`con-sitio`, la pone el constructor) la barra de abajo sobra:
   la cabecera ya lleva la carta, los pedidos, el carrito y la cuenta. Sin ella se queda. */
@media (min-width:900px){
  body.con-sitio{--barra:0px}
  body.con-sitio .barra{display:none}
  .vista{padding-bottom:80px}
  .seccion{padding-top:40px}
  .seccion>h1{font-size:35px;padding-bottom:16px;margin-bottom:24px}
  .tit-accion{padding-bottom:16px;margin-bottom:24px}
  .tit-accion>h1{font-size:35px}
  .pestanas button{min-height:66px;padding:0 30px;font-size:20px}
  .chips{padding-top:20px}
  .grupo{padding-top:40px}
  .grupo+.grupo{margin-top:40px}
  .grupo h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 15px;font-size:36px;margin-bottom:24px}
  .grupo h2 small{margin:0;font-size:18px}
  .cuadricula{grid-template-columns:repeat(4,1fr);gap:40px 35px}
  .tarjeta .nombre{font-size:25px}
  .tarjeta .precio{font-size:23px}
  /* En escritorio, los tamaños medidos en la ficha de producto de producción: botón de 18 px,
     sección en Florent 24, regla en 15 y opción en 20. En móvil van algo más pequeños para no alargar
     la hoja: con una primera versión más grande, «Arma tu wrap» con todo abierto pasaba de 12,3 a 13,4
     pantallas a 390 px; así se queda en 12,6 (medido el 2026-09-16). */
  .btn{font-size:18px;padding:10px 18px}
  .sec-cab h3,.sec.extras>.sec-cab h3{font-size:24px}
  .sec-cab .regla{font-size:15px}
  .opcion .nom{font-size:20px}
  .algo-mas h2{font-size:32px}
  .hoja{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:560px;max-height:min(880px,calc(100vh - 40px));border:3px solid var(--negro)}
  .hoja .foto-g{aspect-ratio:16/8}
  .prod-cab h1{font-size:40px}
  /* En escritorio el botón fijo no cruza los 1140 px: los botones del sitio miden lo que su texto, y el
     de pagar de la tienda cae bajo los totales, a la derecha. */
  .pie-fijo{position:static;border:0;padding:20px 0 0}
  .pie-fijo .in{justify-content:flex-end}
  .pie-fijo .btn{flex:0 1 380px}
  .pago-sim{max-width:520px;margin:0 auto}
  /* En escritorio sale arriba a la derecha, bajo la cabecera y alineado con su borde (1440 px con 15 de margen): es
     donde está el carrito y donde mira quien acaba de añadir algo. Abajo al centro no se veía (QA del 22-sep). */
  .aviso{left:auto;right:max(15px,calc((100vw - 1440px) / 2 + 15px));top:calc(var(--cab) + 12px);bottom:auto;width:420px;z-index:55}
  .aviso:not([hidden]){animation-name:aviso-baja}
  /* En la carta, bajo la barra amarilla de categorías, que también es fija (66 px en escritorio y su filete): encima
     tapaba pestañas. */
  body:has(.pestanas) .aviso{top:calc(var(--cab) + 67px + 12px)}
  .dos-col{display:grid;grid-template-columns:1fr 380px;gap:35px;align-items:start}
  .dos-col .lado{position:sticky;top:calc(var(--cab) + 16px);padding:20px;border:2px solid var(--negro)}
}
@media (max-width:899px){.dos-col .lado{margin-top:12px}}
@media (min-width:900px){
  .prod-cab{grid-template-columns:140px minmax(0,1fr);gap:18px;padding:18px 18px 8px}
  .prod-cab h1{font-size:36px}
  .hoja .sec-cab h3{font-size:21px}
  .pie-fijo.oscuro{background:none;color:inherit}
  .pie-fijo.oscuro .total{display:none}
  .pie-fijo.oscuro .btn{border-color:var(--negro)}
  .pagar-total b{font-size:48px}
  .pagar .lado{margin-top:0}
  .pagar .dos-col .lado{border:1.5px solid var(--borde-suave);border-radius:var(--radio)}
}
/* Al final, para que gane también a la entrada de escritorio. */
@media (prefers-reduced-motion:reduce){.aviso:not([hidden]){animation:none}}

/* LA DIRECCIÓN DEL DELIVERY (ADR-075, 2-oct). Las sugerencias de Google bajo el campo, y el mapa con el pin fijo en el
   centro: se mueve el mapa, no el pin. El nodo del mapa lo crea `direccion.mjs` y sobrevive a los repintados. */
.campo-dir{position:relative}
.sugerencias{position:absolute;left:0;right:0;top:100%;z-index:25;margin:4px 0 0;padding:4px 0;list-style:none;background:#fff;border:1.5px solid var(--negro);border-radius:10px;box-shadow:0 8px 24px rgba(15,15,14,.18)}
.sugerencias li[role=option]{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:8px 14px;cursor:pointer;font-size:15px;line-height:1.3}
.sugerencias li[role=option] b{font-weight:700;overflow-wrap:anywhere}
.sugerencias li[role=option] span{font-size:13px;color:var(--gris-2);overflow-wrap:anywhere}
.sugerencias li.activa,.sugerencias li[role=option]:hover{background:var(--gris-3)}
.sugerencias .sug-google{padding:6px 14px 4px;font-size:11px;color:var(--gris-2);text-align:right}
.pin-mapa{margin-top:12px;scroll-margin-top:calc(var(--cab) + 16px)}
.mapa-caja{position:relative;height:260px;overflow:hidden;border:1.5px solid var(--borde-suave);border-radius:10px;background:var(--gris-3)}
.mapa-caja .mapa{position:absolute;inset:0}
/* La punta del pin cae justo en el centro del mapa: es el punto que se guarda. Al arrastrar sube un poco y deja su
   sombra en el sitio, para que se vea dónde va a caer. */
.mapa-caja .pin{position:absolute;left:50%;top:50%;width:36px;height:47px;transform:translate(-50%,-100%);pointer-events:none;transition:transform .15s ease-out;filter:drop-shadow(0 2px 2px rgba(15,15,14,.35))}
.mapa-caja .pin-sombra{position:absolute;left:50%;top:50%;width:10px;height:4px;margin:-2px 0 0 -5px;border-radius:50%;background:rgba(15,15,14,.45);pointer-events:none}
.pin-mapa.moviendo .pin{transform:translate(-50%,-112%)}
.pin-ayuda{margin-top:6px;font-size:13px;line-height:1.35;color:var(--gris-2)}
.pin-aviso{margin-top:10px;padding:12px 14px;border:2px solid var(--negro);border-radius:10px;background:var(--amarillo);font-size:15px;line-height:1.35}
.pin-aviso b{font-weight:700}
.pin-aviso .btn-linea{margin-top:10px;width:100%;border-radius:8px}
.pin-aviso .pin-o{margin-top:8px;font-size:13px;color:var(--negro)}
.pin-mapa.llamada .mapa-caja{animation:pin-llamada .6s ease-out 2}
@keyframes pin-llamada{50%{border-color:var(--negro);box-shadow:0 0 0 4px var(--amarillo)}}
@media (min-width:900px){.mapa-caja{height:300px}.pin-aviso .btn-linea{width:auto}}
@media (prefers-reduced-motion:reduce){.mapa-caja .pin{transition:none}.pin-mapa.llamada .mapa-caja{animation:none;box-shadow:0 0 0 4px var(--amarillo)}}