/* ============================================================
   pantalla/tv.css — Los televisores del mostrador
   Lienzo fijo de 1080x1920 (retrato). tv.js lo escala a lo que
   mida el televisor de verdad, así que aquí TODO se escribe en
   píxeles sobre 1080 de ancho y no hay que pensar en pantallas.

   Los cuatro televisores están pegados en fila, así que el fondo
   y las bandas se dibujan como UNA sola superficie larga: cada
   pantalla enseña su pedazo (ver .lienzo y la variable --pared).
   ============================================================ */

/* ---------------- Tipografías del negocio ---------------- */
/* Son las mismas del cartel de 2022. Si alguna no carga, el texto
   cae a una parecida y la pantalla NUNCA se queda en blanco. */
@font-face{
  font-family:'TFF Titulo'; font-display:swap; font-weight:900;
  src:url('fuentes/Vitesse-Black.otf') format('opentype');
}
@font-face{
  font-family:'TFF Titulo'; font-display:swap; font-weight:700;
  src:url('fuentes/Vitesse-Bold.otf') format('opentype');
}
@font-face{
  font-family:'TFF Texto'; font-display:swap; font-weight:600;
  src:url('fuentes/FoundrySterling-Demi.otf') format('opentype');
}
@font-face{
  font-family:'TFF Texto'; font-display:swap; font-weight:500;
  src:url('fuentes/FoundrySterling-Medium.otf') format('opentype');
}
@font-face{
  font-family:'TFF Texto'; font-display:swap; font-weight:400;
  src:url('fuentes/FoundrySterling-Book.otf') format('opentype');
}

/* ---------------- Colores ---------------- */
:root{
  --rojo:#EC1C21;
  --marron:#784A31;
  --banda:#DEDFE1;
  --fondo:#F2F7FA;
  --texto:#784A31;
  --suave:#9A8B80;
  --pie-fondo:#5B6670;
  --pie-texto:#FFFFFF;
  --linea:rgba(120,74,49,.13);
  --chip-texto:#FFFFFF;
  --agotado:.40;

  /* Tamaños base. tv.js los baja en pasos si algo no cabe. */
  --t-categoria:54px;
  --t-item:34px;
  --t-desc:21px;
  --t-precio:52px;
  --t-tamano:26px;
}

.tema-oscuro{
  --rojo:#FF4038;
  --marron:#EFE6DE;
  --banda:rgba(255,255,255,.075);
  --fondo:#17110F;
  --texto:#EFE6DE;
  --suave:#9C8B80;
  --pie-fondo:rgba(255,255,255,.06);
  --pie-texto:#EFE6DE;
  --linea:rgba(255,255,255,.08);
  --chip-texto:#FFFFFF;
  --agotado:.34;
}

/* ---------------- Lienzo ---------------- */
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#000;}
body{
  font-family:'TFF Texto',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--texto);
}

.lienzo{
  position:absolute; top:0; left:0;
  width:1080px; height:1920px;
  transform-origin:top left;   /* tv.js le mete el escalado */
  display:flex; flex-direction:column;
  background-color:var(--fondo);
  overflow:hidden;
}

/* EL TRUCO DE LA PARED: el degradado se dibuja del ancho de TODAS
   las pantallas juntas y cada televisor enseña solo su pedazo.
   Así el color corre de una pantalla a la siguiente sin cortarse.
   --pared-total y --pared-pos las pone tv.js desde el servidor. */
.lienzo::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(236,28,33,.055), transparent 60%),
    linear-gradient(100deg, rgba(120,74,49,.05) 0%, rgba(120,74,49,0) 38%, rgba(236,28,33,.045) 100%);
  background-repeat:no-repeat;
  background-size:calc(100% * var(--pared-total,1)) 100%;
  background-position:calc(-100% * (var(--pared-pos,1) - 1)) 0;
}
.tema-oscuro .lienzo::before{
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(255,64,56,.13), transparent 62%),
    linear-gradient(100deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%, rgba(255,64,56,.10) 100%);
}

/* Textura muy tenue de pared de ladrillo, hecha con CSS.
   Se nota apenas; es para que el blanco no se vea plástico. */
.lienzo::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,  var(--linea) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 158px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.16));
}

/* Fondo que sube Amin desde el panel. Va DEBAJO de todo y con un velo
   negro encima que él gradúa: sin ese velo, una foto con zonas claras se
   come el texto y el menú deja de leerse, que es lo único imperdonable. */
.capa-fondo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
}
.capa-fondo::after{
  content:''; position:absolute; inset:0;
  background:#000; opacity:var(--oscurecer,0);
}
/* Con imagen o color propio se apagan la textura y el degradado de serie */
.con-imagen .lienzo::before, .con-imagen .lienzo::after,
.con-color  .lienzo::before, .con-color  .lienzo::after{display:none;}
.con-color .lienzo{background-color:var(--fondo-color,var(--fondo));}

.escena{position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; min-height:0;}

/* ---------------- Cabecera ---------------- */
/* En la pared solo la PRIMERA pantalla lleva la marca completa.
   Las demás llevan una tira fina, para que las cuatro se lean
   como un solo cartel largo y no como cuatro carteles sueltos. */
.cabecera{
  position:relative; z-index:3; flex:0 0 auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:26px var(--margen,40px) 14px;
  border-bottom:3px solid var(--rojo);
}
.cabecera.tira{padding:16px var(--margen,40px) 10px;}
.marca-tv{display:flex; flex-direction:column; gap:2px;}
.marca-tv .logo{height:52px; width:auto; display:block;}
.tema-oscuro .marca-tv .logo{filter:invert(1) hue-rotate(180deg);}
.marca-tv .sitio{
  font:500 19px/1 'TFF Texto',sans-serif; letter-spacing:.26em;
  text-transform:uppercase; color:var(--suave);
}
.cab-derecha{display:flex; flex-direction:column; align-items:flex-end; gap:9px;}
.cab-titulo{
  font:500 24px/1 'TFF Texto',sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--suave); text-align:right;
}
.puntos{display:flex; gap:9px;}
.puntos i{width:11px; height:11px; border-radius:50%; background:var(--suave); opacity:.34; transition:opacity .5s, background .5s;}
.puntos i.on{opacity:1; background:var(--rojo);}

/* ---------------- Página y bloques ---------------- */
.pagina{
  position:absolute; inset:0;
  /* Red de seguridad: si por lo que sea el contenido no cupiera, se
     recorta DENTRO de su caja y nunca se dibuja encima del pie. Feo,
     pero nunca ilegible ni encimado. */
  overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease;
}
.pagina.viva{opacity:1; visibility:visible;}
.paginas{position:relative; flex:1 1 auto; min-height:0;}

/* ⚠️ flex:0 0 auto — cada bloque mide LO QUE OCUPA su contenido.
   Con flex:1 1 auto los bloques se aplastaban entre sí y la lista se
   cortaba por dentro sin que nadie se enterara (la página no se
   desbordaba, así que el ajuste automático no lo veía). Un menú
   cortado a la mitad es el peor fallo posible: antes que eso,
   preferimos que sobre espacio en blanco. */
.bloque{display:flex; flex-direction:column; margin-bottom:6px; flex:0 0 auto;}
.bloque:last-child{margin-bottom:0;}

/* flex:0 0 auto es OBLIGATORIO: sin él la banda se deja aplastar por
   la lista y el título se sale por arriba encima de la cabecera. */
.bloque-cab{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:color-mix(in srgb, var(--banda) calc(var(--banda-alfa,1) * 100%), transparent);
  padding:9px var(--margen,40px); min-height:74px;
}
.bloque-cab h2{
  margin:0; font-family:'TFF Titulo',Georgia,serif; font-weight:900;
  font-size:var(--t-categoria); line-height:1.02; color:var(--rojo);
  text-transform:uppercase; letter-spacing:.005em;
}
.cab-precio{display:flex; align-items:center; gap:16px; flex:0 0 auto;}
.tamano{
  font:500 var(--t-tamano)/1 'TFF Texto',sans-serif; color:var(--suave);
  white-space:nowrap;
}
/* La ficha roja del precio, igual que en el cartel de la pared */
.chip{
  background:var(--rojo); color:var(--chip-texto);
  border-radius:14px; padding:6px 18px 8px;
  display:flex; flex-direction:column; align-items:center; line-height:1;
}
.chip b{font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:var(--t-precio); letter-spacing:-.01em;}
.chip span{font:600 20px/1 'TFF Texto',sans-serif; margin-top:3px; opacity:.95;}

/* ---------------- Lista de productos ---------------- */
.items{
  padding:16px var(--margen,40px) 14px;
  column-gap:58px;
  column-rule:1px solid var(--linea);
  column-fill:balance;
}
/* Lista de verdad, no una rejilla: con sangría francesa, para que un
   nombre largo pase a la segunda línea alineado bajo el texto y NO
   deje la viñeta huérfana arriba. break-word evita que una palabra
   larga (BUTTERFINGER) se meta encima de la columna de al lado. */
.item{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block;
  padding:5px 14px 5px 30px; text-indent:-30px;
  font-size:var(--t-item); font-weight:600; color:var(--texto);
  /* overflow-wrap SIN word-break: solo parte una palabra si de verdad no
     cabe de ninguna manera. word-break partía "Butterfinger" a la mitad. */
  line-height:1.2; overflow-wrap:break-word; word-break:normal; hyphens:none;
}
.item .punto{color:var(--rojo); font-size:.9em; margin-right:14px;}
.item .nom{display:inline;}
.item .desc{
  display:block; font-size:var(--t-desc); font-weight:400; color:var(--suave);
  line-height:1.25; margin-top:1px;
}
/* Precio propio (cuando el producto vale distinto al de su categoría) */
.item .propio{
  font-family:'TFF Titulo',Georgia,serif; font-weight:700;
  color:var(--rojo); font-size:1.02em; white-space:nowrap;
  margin-left:16px; text-indent:0;   /* sin esto sale pegado: "Hazelnut7.01" */
}

/* Dos columnas de precio, como el cartel de café: aquí sí hace falta
   una fila, para que los números queden alineados uno debajo del otro. */
.items.con-tamanos .item{
  display:flex; align-items:baseline; gap:12px;
  padding-left:14px; text-indent:0;
}
.items.con-tamanos .item .nom{flex:1 1 auto; min-width:0;}
.items.con-tamanos .item .punto{flex:0 0 auto; margin-right:0;}
.item .cols{display:flex; flex:0 0 auto; gap:0; text-indent:0;}
.item .cols b{
  font-family:'TFF Titulo',Georgia,serif; font-weight:700; color:var(--rojo);
  font-size:1.02em; width:132px; text-align:right; white-space:nowrap;
}
/* Tira de tamaños de un subgrupo (por ejemplo el 8 oz / 12 oz del café
   cuando arriba, en la banda, están el SHOT y el DOBLE SHOT). */
.tira-tamanos{
  display:flex; justify-content:flex-end;
  padding:2px var(--margen,40px) 0; margin-top:6px;
  border-top:1px solid var(--linea);
}
/* En la banda, las etiquetas de tamaño ("8 oz", "12 oz") tienen que caer
   justo encima de su columna de precios, no pegadas una a la otra. */
/* display:flex OBLIGATORIO: sin él las <b> quedan en línea, el ancho de
   columna no aplica y las etiquetas salen pegadas ("8 oz12 oz"). */
.tira-tamanos .cols,
.cab-precio .cols{display:flex; gap:0;}
.tira-tamanos .cols b,
.cab-precio .cols b{
  font:500 var(--t-tamano)/1 'TFF Texto',sans-serif; color:var(--suave);
  width:132px; text-align:right; text-transform:none;
}

/* ---------------- Agotado ---------------- */
/* Se queda en su sitio, tachado y apagado, con su etiqueta.
   Se enseña que existe, pero que hoy no hay. */
.item.agotado{opacity:var(--agotado);}
.item.agotado .nom{text-decoration:line-through; text-decoration-thickness:.06em;}
.item.agotado .punto{opacity:.5;}
.sold{
  display:inline-block; vertical-align:middle; text-indent:0;
  font:600 17px/1 'TFF Texto',sans-serif; margin-left:12px;
  color:var(--rojo); border:2px solid var(--rojo); border-radius:7px;
  padding:4px 8px 5px; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; opacity:.85;
}
/* Modo "solo etiqueta": ni tachado ni apagado, únicamente el sello */
.modo-etiqueta .item.agotado{opacity:1;}
.modo-etiqueta .item.agotado .nom{text-decoration:none;}

/* ---------------- Pie ---------------- */
/* Corre de pared a pared: es la misma banda en las cuatro pantallas. */
/* PIE CLÁSICO (el del cartel de 2022): sobre el mismo fondo claro, el
   titular en rojo y las dos líneas en marrón, alineado a la izquierda.
   Sin banda de color: el original no la tiene. */
.pie{
  position:relative; z-index:3; flex:0 0 auto;
  padding:14px var(--margen,40px) 20px;
  text-align:left; color:var(--texto);
}
.pie-titulo{
  font:700 30px/1.15 'TFF Texto',sans-serif; color:var(--rojo);
  text-transform:uppercase; letter-spacing:.01em;
}
.pie-linea{font:500 29px/1.25 'TFF Texto',sans-serif; color:var(--texto); margin-top:2px;}
.pie-letra{font:400 22px/1.3 'TFF Texto',sans-serif; color:var(--texto); opacity:.9; margin-top:1px;}
.pie .impuesto{font:400 20px/1.3 'TFF Texto',sans-serif; opacity:.7; margin-top:5px;}

/* PIE DEL REDISEÑO: la banda gris pizarra que cruza las cuatro pantallas.
   Se guarda por si Amin enciende el estilo moderno más adelante. */
.estilo-moderno .pie{
  background:var(--pie-fondo); color:var(--pie-texto);
  padding:18px var(--margen,40px); text-align:center;
}
.estilo-moderno .pie-linea{font-size:25px; color:var(--pie-texto);}
.estilo-moderno .pie .impuesto{color:var(--pie-texto);}

/* ---------------- Vitrina (pantalla 1) ---------------- */
.vitrina{position:relative; flex:1 1 auto; display:flex; flex-direction:column; min-height:0;}
.promo{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px; padding:50px 56px;
  opacity:0; visibility:hidden; transition:opacity .8s ease;
}
.promo.viva{opacity:1; visibility:visible;}
.promo .foto{
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.promo .foto img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.promo .txt{flex:0 0 auto; text-align:center;}
.promo h2{
  margin:0; font-family:'TFF Titulo',Georgia,serif; font-weight:900;
  font-size:78px; line-height:1.03; color:var(--rojo); text-transform:uppercase;
}
.promo p{margin:12px 0 0; font-size:34px; font-weight:500; color:var(--texto); line-height:1.3;}
.promo .precio{
  display:inline-block; margin-top:20px; background:var(--rojo); color:#fff;
  border-radius:18px; padding:10px 28px 13px;
  font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:62px; line-height:1;
}
.vitrina-vacia{
  margin:auto; text-align:center; color:var(--suave);
  font-size:30px; font-weight:500; padding:0 60px; line-height:1.4;
}

/* ---------------- Avisos en vivo ---------------- */
/* Se atraviesan encima de todo, unos segundos, y se van solos. */
.aviso-capa{
  position:absolute; inset:0; z-index:9;
  display:flex; align-items:center; justify-content:center;
  background:var(--fondo);
  opacity:0; transition:opacity .45s ease;
}
.tema-oscuro .aviso-capa{background:#17110F;}
.aviso-capa.viva{opacity:1;}
.aviso-caja{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:56px; text-align:center; width:100%; height:100%;
  transform:scale(.965); transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.aviso-capa.viva .aviso-caja{transform:scale(1);}

.sello{
  font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:44px;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:var(--rojo); border-radius:999px; padding:14px 40px 17px;
}
.aviso-foto{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; width:100%;}
.aviso-foto img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.aviso-nombre{
  font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:76px;
  line-height:1.04; color:var(--texto); text-transform:uppercase;
}
.aviso-precio{
  font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:58px;
  color:var(--rojo);
}
/* "Orden lista": lo que manda es el número, se lee desde lejos */
.aviso-capa.orden .aviso-caja{gap:14px;}
.orden-eti{
  font:600 40px/1 'TFF Texto',sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:var(--suave);
}
.orden-num{
  font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:300px;
  line-height:.92; color:var(--rojo);
}
.orden-nom{
  font-family:'TFF Titulo',Georgia,serif; font-weight:900; font-size:86px;
  line-height:1.05; color:var(--texto);
}
.orden-lista-txt{font:600 44px/1.2 'TFF Texto',sans-serif; color:var(--texto); margin-top:6px;}

/* ---------------- Paginador ---------------- */
.paginador{
  position:absolute; left:0; right:0; bottom:0; height:5px; z-index:8;
  background:var(--linea);
}
.paginador .barra{display:block; height:100%; width:0; background:var(--rojo); opacity:.6;}

/* ---------------- Sin internet ---------------- */
.sin-red{
  position:fixed; right:16px; bottom:14px; z-index:20;
  background:rgba(0,0,0,.62); color:#fff; border-radius:999px;
  padding:8px 18px; font:500 15px/1 'TFF Texto',sans-serif;
  letter-spacing:.02em; pointer-events:none;
}

/* Si el televisor pide menos movimiento, se quitan las transiciones. */
@media (prefers-reduced-motion: reduce){
  .pagina,.promo,.aviso-capa,.aviso-caja,.puntos i{transition:none !important;}
}

/* ============================================================
   ESTILO CON FOTOS — maqueta que aprobó Amin (11-ago).
   Panel color marfil con filo oscuro, título en serif, filete
   dorado con rombo, rejilla de fotos, y los recuadros de
   "También disponibles" y "EXTRAS" abajo.
   ============================================================ */
.estilo-fotos{
  --marfil:#F7F4EE; --filo:#1C1A17; --tinta:#241C16;
  --suavecito:#8A7A63; --oro:#C9A961; --precio:#6B5D4A;
  --borde:rgba(180,160,120,.42);
}
.estilo-fotos .lienzo{ background-color:var(--filo); }
.estilo-fotos .lienzo::before, .estilo-fotos .lienzo::after{ display:none; }

/* El panel: marfil dentro de un filo oscuro, esquinas redondeadas */
.hoja-fotos{ padding:14px; }
.marco{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  background:var(--marfil); border-radius:22px;
  padding:26px var(--margen,34px) 20px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  overflow:hidden;
}

.titulo-foto{
  flex:0 0 auto; margin:4px 0 0; text-align:center;
  font-family:'TFF Titulo',Georgia,'Times New Roman',serif; font-weight:900;
  font-size:var(--t-titulo,66px); line-height:1.04; color:var(--tinta);
  letter-spacing:.01em;
}
.lema{
  flex:0 0 auto; text-align:center; margin-top:6px;
  font:400 var(--t-lema,25px)/1.3 'TFF Texto',sans-serif;
  color:var(--suavecito); font-style:italic;
}
/* Filete dorado con el rombito en el centro */
.filete{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  gap:12px; margin:14px 0 8px; color:var(--oro);
}
.filete::before, .filete::after{
  content:''; height:1px; flex:1 1 auto; max-width:38%;
  background:linear-gradient(90deg, transparent, var(--oro), transparent);
}
.diamante{ font-size:14px; line-height:1; }

.nota-tamano{
  flex:0 0 auto; text-align:center; margin:0 0 8px;
  font:500 var(--t-nota,23px)/1.2 'TFF Texto',sans-serif; color:var(--suavecito);
}

/* Secciones dentro de una pantalla (PREMIUM / FRUTAS) */
.seccion{ flex:0 0 auto; display:flex; flex-direction:column; margin-bottom:6px; }
.seccion-tit{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:10px 0 4px;
  font:600 var(--t-seccion,27px)/1.2 'TFF Texto',sans-serif;
  letter-spacing:.14em; color:var(--suavecito);
}
.seccion-tit::before, .seccion-tit::after{
  content:''; height:1px; flex:1 1 auto; background:var(--borde);
}

.rejilla{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(var(--cols,4),1fr);
  gap:14px 8px; align-content:start; padding:6px 0 2px;
}
.tarjeta{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.foto{
  width:100%; height:var(--t-foto,168px);
  display:flex; align-items:flex-end; justify-content:center; position:relative;
}
.foto img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.foto.sin-foto::after{
  content:''; width:62%; height:72%;
  border:2px dashed rgba(36,28,22,.13); border-radius:14px;
}
.nom-foto{
  margin-top:8px;
  font:600 var(--t-nom,24px)/1.16 'TFF Texto',sans-serif; color:var(--tinta);
  overflow-wrap:break-word;
}
.precios-foto{
  margin-top:2px; display:flex; flex-direction:column;
  font:500 var(--t-precio-foto,21px)/1.25 'TFF Texto',sans-serif; color:var(--precio);
}
.tarjeta.agotado{ opacity:.42; }
.tarjeta.agotado .nom-foto{ text-decoration:line-through; }
.sold-foto{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-8deg);
  font:600 16px/1 'TFF Texto',sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:#EC1C21; border:2px solid #EC1C21; border-radius:7px; padding:4px 8px 5px;
  background:rgba(255,255,255,.86); white-space:nowrap;
}

/* Recuadros de abajo */
.caja{
  flex:0 0 auto; margin-top:10px; padding:12px 18px 13px;
  border:1px solid var(--borde); border-radius:14px;
}
.caja-tit{
  font:600 var(--t-caja-tit,24px)/1.2 'TFF Texto',sans-serif;
  color:var(--tinta); letter-spacing:.1em; text-transform:uppercase;
  text-align:center; margin-bottom:6px;
}
.caja.tambien .caja-txt{
  font:500 var(--t-tambien,21px)/1.4 'TFF Texto',sans-serif;
  color:var(--precio); text-align:center;
}
.extras-lista{ columns:2; column-gap:34px; }
.ex{
  display:flex; align-items:baseline; gap:6px; break-inside:avoid;
  font:500 var(--t-extras,21px)/1.7 'TFF Texto',sans-serif; color:var(--tinta);
}
.ex .t{ flex:0 0 auto; }
/* Los puntitos que llevan la vista hasta el precio */
.ex .pun{
  flex:1 1 auto; min-width:14px;
  border-bottom:1px dotted rgba(36,28,22,.32); transform:translateY(-.25em);
}
.ex .p{ flex:0 0 auto; color:var(--precio); }

.nota-ivu{
  flex:0 0 auto; text-align:center; margin-top:9px;
  font:400 var(--t-ivu,19px)/1.2 'TFF Texto',sans-serif; color:var(--suavecito);
}