/* LA PESTAÑA «MATERIAL» (JB, 29-oct-2026). La pinta assets/js/material.js.
   Es la pieza «Material» de Business (briox-app/src/components/MaterialBusiness.web.tsx, aprobada el 26-oct) con los tokens del
   panel: tarjetas blancas con filo sobre el gris de la página, sin sombra y sin levantarse al pasar el ratón; el nombre de cada
   bloque por fuera y encima. Las columnas dependen del ancho de la PESTAÑA (@container), no de la ventana: en el panel de VS Code
   (~800 px) cabe igual de bien. */
#mat{ display:block; container-type:inline-size; container-name:mat; }
#mat .page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px 24px; flex-wrap:wrap; }
.mat-idioma{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mat-idioma > span{ font-size:13px; font-weight:600; color:var(--tx-2); white-space:nowrap; }

.mat-h3{ margin:var(--sep-mod) 0 6px; font-size:18px; font-weight:700; color:var(--tx); }
.mat-sub{ margin:0 0 14px; font-size:14px; line-height:1.45; color:var(--tx-2); max-width:760px; }
.mat-h3 + .mat-fila, .mat-h3 + .mat-textos, .mat-h3 + .mat-tabla{ margin-top:12px; }
.mat-quieto{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 20px; margin-top:22px; border-radius:var(--radius);
  background:var(--sf); border:1px solid var(--br); font-size:15px; color:var(--tx); }
.mat-quieto > i{ color:var(--tx-3); font-size:18px; }
.mat-quieto > span{ flex:1; min-width:200px; }

/* ── Botones de la casa: el principal en azul, el secundario en superficie suave sin borde ── */
.mat-btn-pri, .mat-btn-sec{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
  border:0; border-radius:var(--radius-sm); font:inherit; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.2,1), filter .15s ease-out, background-color .15s ease-out; }
.mat-btn-pri{ background:var(--azul-apple); color:#fff; flex:none; }
.mat-btn-sec{ background:var(--sf3); color:var(--tx); }
.mat-btn-pri:active, .mat-btn-sec:active, .mat-copiar:active{ transform:scale(.97); }
.mat-btn-sec:disabled, .mat-bajar-foto:disabled{ color:var(--tx-3); cursor:progress; }

/* ── Filas de tarjetas: flex centradas, la última fila (si va corta) en medio; --n columnas ── */
.mat-fila{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; --n:3; }
.mat-fila > *{ flex:0 0 calc((100% - (var(--n) - 1) * 14px) / var(--n)); min-width:0; }
.mat-fila.c2{ --n:2; } .mat-fila.c4{ --n:4; } .mat-fila.c5{ --n:5; }
.mat-pan, .mat-logo{ display:flex; flex-direction:column; gap:6px; background:var(--sf); border:1px solid var(--br); border-radius:var(--radius);
  padding:10px 10px 12px; text-decoration:none; color:inherit; transition:border-color .16s ease-out; }
.mat-logo{ padding:16px; }
.mat-pan b, .mat-logo b{ padding:4px 4px 0; font-size:15px; font-weight:700; line-height:1.3; color:var(--tx); }
.mat-foto{ position:relative; display:block; aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; background:var(--sf3); }
.mat-foto.vertical{ aspect-ratio:4/5; }
.mat-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.mat-nuevo{ position:absolute; top:8px; left:8px; background:var(--azul-apple); color:#fff; font-style:normal; font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:999px; }
/* El triángulo de «play» en el centro de toda miniatura de vídeo (rules/pantallas.md). */
.mat-play{ position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:rgba(0,0,0,.62); }
.mat-play::after{ content:""; position:absolute; left:19px; top:15px; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; }
.mat-peso{ display:inline-flex; align-items:center; gap:6px; padding:0 4px; font-size:13px; font-weight:600; color:var(--azul-apple); }
.mat-peso i{ font-size:12px; transition:transform .2s ease-out; }
.mat-dato{ flex:1; min-width:0; padding:0 4px; font-size:13px; font-weight:600; color:var(--tx-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-copiar{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 12px;
  border:0; border-radius:var(--radius-sm); background:var(--sf3); color:var(--azul-apple); font:inherit; font-size:13px; font-weight:700; white-space:nowrap;
  cursor:pointer; transition:background-color .16s ease-out, transform .1s ease-out; }
.mat-copiar.mat-copiado{ color:#15803d; }
.mat-muestra{ display:grid; place-items:center; height:120px; border-radius:var(--radius-sm); padding:20px; }
.mat-muestra.claro{ background:var(--sf3); } .mat-muestra.oscuro{ background:#141414; }
.mat-muestra img{ max-width:80%; max-height:56px; }
.mat-botones{ display:flex; gap:8px; margin-top:4px; }
.mat-botones .mat-btn-sec{ flex:1; }

/* ── «Todo el material» ── */
.mat-doc{ display:flex; align-items:center; gap:16px; background:var(--sf); border:1px solid var(--br); border-radius:var(--radius); padding:16px 18px; }
.mat-kit{ margin-top:22px; }
.mat-ico{ width:44px; height:44px; border-radius:var(--radius-sm); background:var(--sf3); display:grid; place-items:center; flex:none; color:var(--azul-apple); font-size:20px; }
.mat-doc-txt{ display:grid; gap:3px; min-width:0; flex:1; }
.mat-doc-txt b{ font-size:16px; font-weight:700; color:var(--tx); }
.mat-doc-txt span{ font-size:14px; line-height:1.45; color:var(--tx-2); }

/* ── Cada pan se abre hacia abajo: la tarjeta es un botón y la galería ocupa la fila entera, tras la suya ── */
.mat-pan-a{ display:flex; flex-direction:column; gap:6px; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer; }
.mat-pan.abierto{ border-color:var(--azul-apple); box-shadow:inset 0 0 0 1px var(--azul-apple); }
.mat-pan.abierto .mat-peso i, .mat-vip.abierto .mat-vip-ver i{ transform:rotate(180deg); }
.mat-fila > .mat-galeria{ flex:0 0 100%; margin:0; }
.mat-galeria{ background:var(--sf); border:1px solid var(--br); border-radius:var(--radius); padding:18px 20px 22px; margin:0 0 14px; scroll-margin:120px;
  animation:matAbre .22s cubic-bezier(.16,1,.3,1); }
.mat-gal-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mat-gal-tit{ flex:1; min-width:0; font-size:22px; font-weight:800; line-height:1.2; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-gal-acc{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mat-gal-zip{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:var(--radius-sm); background:var(--sf3);
  color:var(--azul-apple); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.mat-cerrar{ width:40px; height:40px; flex:none; border:0; border-radius:50%; background:var(--sf3); color:var(--tx); display:grid; place-items:center;
  cursor:pointer; font-size:16px; }
.mat-gal-g{ margin:20px 0 10px; font-size:14px; font-weight:700; color:var(--tx-2); }
.mat-gal-fotos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px 12px; }
.mat-gal-fotos.altas{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.mat-gal-foto{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mat-gal-img{ position:relative; display:block; width:100%; aspect-ratio:1/1; padding:0; border:0; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--sf3); cursor:pointer; }
.mat-gal-img.alto{ aspect-ratio:4/5; }
.mat-gal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mat-gal-img:focus-visible, .mat-pan-a:focus-visible, .mat-copiar:focus-visible, .mat-btn-pri:focus-visible, .mat-btn-sec:focus-visible,
.mat-bajar-foto:focus-visible, .mat-cerrar:focus-visible, .mat-gal-zip:focus-visible{ outline:3px solid var(--azul-apple); outline-offset:2px; }
.mat-gal-pie{ display:flex; align-items:center; gap:6px; min-width:0; }
.mat-gal-nom{ flex:1; min-width:0; font-size:13px; font-weight:600; line-height:1.3; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-bajar-foto{ width:40px; height:40px; flex:none; border:0; border-radius:var(--radius-sm); background:var(--sf3); color:var(--azul-apple); display:grid;
  place-items:center; cursor:pointer; font-size:15px; }

/* ── Los textos (de cada pan y de la marca): cada uno en su tarjeta, el rótulo encima, el texto entero y su «Copiar» ── */
.mat-textos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.mat-texto{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:var(--radius); background:var(--sf); border:1px solid var(--br); }
.mat-galeria .mat-texto{ background:var(--sf3); border-color:transparent; }
.mat-texto-r{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tx-2); }
.mat-texto p{ margin:0; font-size:14px; line-height:1.5; color:var(--tx); }
.mat-texto .mat-copiar{ align-self:flex-start; }
.mat-galeria .mat-texto .mat-copiar{ background:var(--sf); }

/* ── «Medidas y conservación»: tabla de comparar, con la cebra de la casa (cabecera más oscura, la 1.ª fila en blanco) ── */
.mat-tabla{ border:1px solid var(--br); border-radius:var(--radius); overflow:hidden; background:var(--sf); }
.mat-tabla table{ width:100%; border-collapse:collapse; font-size:14px; }
.mat-tabla th{ text-align:left; padding:10px 14px; background:rgba(0,0,0,.07); font-size:13px; font-weight:700; color:var(--tx); white-space:nowrap; }
.mat-tabla td{ padding:10px 14px; color:var(--tx); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mat-tabla td b{ font-weight:700; }
.mat-tabla tbody tr:nth-child(even){ background:rgba(0,0,0,.03); }
.mat-conserva{ display:flex; align-items:center; gap:12px; margin:12px 0 0; padding:12px 14px 12px 18px; border-radius:var(--radius); background:var(--sf);
  border:1px solid var(--br); font-size:14px; line-height:1.45; color:var(--tx); }
.mat-conserva > i{ color:var(--azul-apple); font-size:16px; flex:none; }
.mat-conserva > span{ flex:1; min-width:0; }
.mat-conserva .mat-copiar{ margin:0; }
.mat-tabla .mat-sin{ color:var(--tx-3); font-weight:500; }

.mat-pie{ margin:30px 0 0; font-size:14px; color:var(--tx-2); }
/* Sobre el gris del fondo, el azul de la casa se queda en 4,27:1 (hace falta 4,5): el del pie baja un escalón, derivado
   del mismo token. Y el enlace crece por dentro hasta 29 px de alto para que se pueda tocar sin apuntar. */
.mat-pie a{ display:inline-block; padding-block:6px; color:color-mix(in srgb, var(--azul-apple) 88%, #000); text-decoration:none; font-weight:600; }

@media (hover:hover){
  .mat-pan:hover, .mat-logo:hover{ border-color:var(--tx-3); }
  .mat-copiar:hover, .mat-gal-zip:hover, .mat-cerrar:hover, .mat-bajar-foto:hover, .mat-btn-sec:hover{ background:var(--sf2); }
  .mat-galeria .mat-texto .mat-copiar:hover{ background:#fafafa; }
  .mat-btn-pri:hover{ filter:brightness(.94); }
  .mat-pie a:hover{ text-decoration:underline; }
  .mat-tabla tbody tr:hover{ background:var(--sf3); }
}

/* ── El SMASH ROLL y el HIGH ROLL: la tarjeta del cupón «Súper exclusivo» (la del kit de prensa de la web), sin precio ── */
.mat-vips{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.mat-vips.uno{ grid-template-columns:minmax(0,1fr); }
.mat-vip{ position:relative; isolation:isolate; container-type:inline-size; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:8px; min-height:208px; padding:26px min(54%, calc(100% - 190px)) 22px 28px; border:0; border-radius:22px;
  background:#050505; color:#fff; font:inherit; text-align:left; cursor:pointer; overflow:hidden; }
.mat-vip-fondo{ position:absolute; inset:0; z-index:-1; border-radius:inherit; overflow:hidden; pointer-events:none; }
.mat-vip-filo{ position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg,#5a3d00,#ffbf10,#fff3c4,#ffbf10,#7a5200,#ffbf10,#fff3c4,#ffbf10,#5a3d00); animation:matVipGira 6s linear infinite; }
.mat-vip-dentro{ position:absolute; inset:2px; border-radius:20px; background:radial-gradient(120% 90% at 85% 10%,#2a1e00 0%,#0a0a0a 45%,#050505 100%); }
.mat-vip-dentro::after{ content:''; position:absolute; inset:8px; border-radius:15px; border:1px solid rgba(255,191,16,.28); }
.mat-vip-pan{ position:absolute; z-index:-1; right:0; bottom:-12%; height:92%; width:auto; max-width:54%; object-fit:contain; object-position:right bottom;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.6)); animation:matVipFlota 2.6s ease-in-out infinite alternate; }
.mat-vip-e{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1; white-space:nowrap; }
.mat-vip-medalla{ width:26px; height:26px; flex:none; border-radius:50%; display:inline-grid; place-items:center; color:#3a2600;
  background:radial-gradient(circle at 35% 30%,#fff6d5 0%,#ffd76a 30%,#ffbf10 55%,#a77400 100%);
  box-shadow:inset 0 0 0 1.5px rgba(122,82,0,.6), inset 0 2px 2px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.6); animation:matVipMedalla 6.2s 2.6s infinite; }
.mat-vip-medalla svg{ width:15px; height:15px; display:block; }
.mat-vip-oro{ background:linear-gradient(100deg,#b8860b 0%,#ffbf10 25%,#fff6d5 45%,#ffbf10 60%,#b8860b 100%); background-size:220% 100%;
  padding-block:.2em; margin-block:-.2em; -webkit-background-clip:text; background-clip:text; color:transparent; animation:matVipOro 3.2s ease-in-out infinite alternate; }
.mat-vip-k{ font-size:clamp(24px, 6.4cqi, 38px); font-weight:800; letter-spacing:-.02em; line-height:1.05; white-space:nowrap; }
.mat-vip-v{ font-size:15px; font-weight:600; line-height:1.3; color:#f5efe3; }
.mat-vip-v .k{ color:#ffd76a; }
.mat-vip-v i{ font-style:normal; color:#ffbf10; }
.mat-vip-ver{ margin-top:6px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#ffd76a; }
.mat-vip-ver i{ font-size:12px; transition:transform .2s ease-out; }
.mat-vip:focus-visible{ outline:3px solid #ffbf10; outline-offset:3px; }
@keyframes matVipGira{ to{ transform:rotate(360deg); } }
@keyframes matVipOro{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
@keyframes matVipFlota{ from{ translate:0 0; } to{ translate:0 -5px; } }
@keyframes matVipMedalla{ 0%{ transform:perspective(300px) rotateY(0deg); animation-timing-function:cubic-bezier(.65,0,.35,1); } 19.4%, 100%{ transform:perspective(300px) rotateY(360deg); } }
@keyframes matAbre{ from{ opacity:0; transform:translateY(-6px); } }

/* ── Una foto en grande: va colgada del <body>, fuera de #mat ── */
.mat-visor{ position:fixed; inset:0; z-index:100001; display:grid; grid-template-columns:72px minmax(0,1fr) 72px; grid-template-rows:minmax(0,1fr) auto;
  align-items:center; padding:60px 0 16px; box-sizing:border-box; background:rgba(12,12,12,.92); color:#fff; font-family:var(--f-app);
  animation:matVisor .16s ease-out; }
.mat-visor *{ box-sizing:border-box; }
.mat-visor-foto{ grid-column:2; grid-row:1; width:100%; height:100%; min-height:0; display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr);
  place-items:center; background:center/contain no-repeat; }
/* La pista de la foto tiene alto fijo (minmax(0,1fr)): con «auto», la foto salía a su tamaño de verdad, más grande que la pantalla. */
.mat-visor-foto img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.mat-visor-flecha, .mat-visor-x{ width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:grid;
  place-items:center; cursor:pointer; font-size:18px; }
.mat-visor-flecha{ grid-row:1; justify-self:center; }
.mat-visor-flecha.izq{ grid-column:1; } .mat-visor-flecha.der{ grid-column:3; }
.mat-visor-x{ position:absolute; top:8px; right:12px; }
/* El pie: una losa neutra con el pan, su peso, su diámetro y su gama (rótulo pequeño encima, dato grande) y, a la derecha, qué foto
   es y el botón de descargar. */
.mat-visor-pie{ grid-column:1/-1; grid-row:2; justify-self:center; width:min(1040px, calc(100% - 32px)); margin-top:16px; display:flex; align-items:center;
  gap:14px 28px; padding:14px 14px 14px 26px; border-radius:var(--radius); background:#1c1c1c; }
.mat-visor-ficha{ display:flex; align-items:center; gap:12px 28px; min-width:0; }
.mat-visor-pan{ font-size:24px; font-weight:700; line-height:1.15; letter-spacing:.01em; white-space:nowrap; padding-right:28px; border-right:1px solid #3a3a3a; }
.mat-visor-dato{ display:grid; gap:3px; font-size:20px; font-weight:700; line-height:1.1; white-space:nowrap; }
.mat-visor-dato small{ font-size:12px; font-weight:600; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; color:#a8a8a8; }
.mat-visor-nom{ margin-left:auto; display:grid; gap:3px; min-width:0; text-align:right; font-size:15px; font-weight:500; line-height:1.25; color:#e6e6e6; }
.mat-visor-nom i{ font-style:normal; font-size:13px; color:#a8a8a8; }
.mat-visor-bajar{ display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 24px; border:0; border-radius:var(--radius-sm); background:var(--azul-apple);
  color:#fff; font:inherit; font-size:16px; font-weight:700; white-space:nowrap; cursor:pointer; }
.mat-visor-bajar:disabled{ background:#3a3a3a; cursor:progress; }
.mat-visor :focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@keyframes matVisor{ from{ opacity:0; } }
@media (hover:hover){ .mat-visor-flecha:hover, .mat-visor-x:hover{ background:rgba(255,255,255,.24); } .mat-visor-bajar:hover{ background:#0062c4; } }
@media (max-width:700px){
  .mat-visor{ grid-template-columns:0 minmax(0,1fr) 0; padding:60px 8px 14px; }
  .mat-visor-pie{ width:100%; margin-top:10px; flex-wrap:wrap; padding:16px; gap:14px 16px; border-radius:var(--radius); }
  .mat-visor-ficha{ flex-basis:100%; flex-wrap:wrap; gap:10px 28px; }
  .mat-visor-pan{ flex-basis:100%; font-size:21px; padding-right:0; border-right:0; }
  .mat-visor-dato{ font-size:18px; }
  .mat-visor-nom{ flex:1; margin-left:0; text-align:left; }
  .mat-visor-flecha{ position:absolute; top:calc(50% - 40px); }
  .mat-visor-flecha.izq{ left:8px; } .mat-visor-flecha.der{ right:8px; }
}

/* ── Al ancho de la pestaña ── */
@container mat (max-width:1080px){ .mat-fila.c5{ --n:4; } }
@container mat (max-width:900px){ .mat-fila.c3, .mat-fila.c4, .mat-fila.c5{ --n:3; } .mat-textos{ grid-template-columns:minmax(0,1fr); } }
@container mat (max-width:680px){
  .mat-fila.c3, .mat-fila.c2{ --n:1; } .mat-fila.c4, .mat-fila.c5{ --n:2; }
  .mat-vips{ grid-template-columns:minmax(0,1fr); }
  .mat-vip{ min-height:184px; padding:22px 38% 20px 22px; }
  .mat-vip-v{ font-size:14px; }
  .mat-galeria{ padding:16px 14px 18px; }
  .mat-gal-tit{ flex-basis:calc(100% - 52px); }
  .mat-gal-acc{ order:2; flex-basis:100%; }
  .mat-cerrar{ order:1; }
  .mat-gal-fotos, .mat-gal-fotos.altas{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mat-doc{ flex-wrap:wrap; } .mat-doc .mat-btn-pri{ width:100%; }
  .mat-tabla{ overflow-x:auto; }
  .mat-conserva{ flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){
  .mat-pan, .mat-copiar, .mat-peso i, .mat-vip-ver i, .mat-btn-pri, .mat-btn-sec{ transition:none; }
  .mat-vip-filo, .mat-vip-pan, .mat-vip-medalla, .mat-vip-oro, .mat-galeria, .mat-visor{ animation:none; }
  .mat-vip-oro{ background-position:30% 0; }
}