:root{
  --ink: #14161A;
  --panel: #1C1F25;
  --panel-raised: #22262E;
  --paper: #EDEAE2;
  --amber: #FFB020;
  --teal: #2FD3C2;
  --steel: #6B7280;
  --steel-line: #35393F;
  --red-tag: #E8543E;
}

* { box-sizing: border-box; }
/* Las fotos y los videos no se arrastran ni se seleccionan: junto con el
   guardián del clic derecho de layout.js, corta la copia casual. Una captura
   de pantalla no se puede impedir, y no se pretende. */
img, video { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
html { scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-cuerpo);
  -webkit-font-smoothing: antialiased;
}

.mono{ font-family: var(--f-mono); letter-spacing: var(--tr-mono); }

.stripe{
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--amber), var(--amber) 10px, var(--ink) 10px, var(--ink) 20px);
}

header{ max-width: 1180px; margin: 0 auto; padding: 72px 32px 40px; }

.eyebrow{
  color: var(--teal);
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; margin-bottom: 18px;
  display:flex; align-items:center; gap: 12px;
}
.eyebrow::before{ content:""; width: 28px; height: 2px; background: var(--teal); display:inline-block; }

h1{ font-size: var(--t-h1); line-height: 0.88; margin: 0 0 24px; font-family: var(--f-titulares); font-weight: var(--w-titulares); letter-spacing: var(--tr-titulares); text-transform: var(--tt-titulares); }
h1 .thin{ -webkit-text-stroke: 1.5px var(--paper); color: transparent; }

.subhead{ max-width: 600px; font-size: var(--t-subhead); line-height: 1.55; color: #C7C4BB; margin-bottom: 40px; }

.manifest{ display:flex; flex-wrap: wrap; border-top: 1px solid var(--steel-line); border-bottom: 1px solid var(--steel-line); }
.manifest-cell{ flex: 1 1 160px; padding: 16px 20px; border-right: 1px solid var(--steel-line); }
.manifest-cell:last-child{ border-right: none; }
.manifest-label{ font-size: var(--t-micro); color: var(--steel); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; }
.manifest-value{ font-family: var(--f-mono); font-size: 15px; color: var(--paper); }

.grid-wrap{ max-width: 1180px; margin: 0 auto; padding: 56px 32px 40px; }
.grid{ display: grid; grid-template-columns: repeat(var(--columnas, 2), 1fr); gap: 22px; }
@media (max-width: 760px){ .grid{ grid-template-columns: 1fr; } }

.flagship-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; display:flex; flex-direction:column; gap:22px; margin-bottom: 22px; }
/* Las insignia en grilla de a dos, en vez de una debajo de la otra a todo el ancho. */
.flagship-wrap.en-grilla{ display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px){ .flagship-wrap.en-grilla{ grid-template-columns: 1fr; } }

.case{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--steel-line);
  padding: 28px 26px 26px;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.rivet{ position:absolute; width:5px; height:5px; border-radius:50%; background: #3d424a; }
.r-tl{ top:12px; left:12px; } .r-tr{ top:12px; right:12px; }
.r-bl{ bottom:12px; left:12px; } .r-br{ bottom:12px; right:12px; }

.case:hover{ transform: translateY(-4px) rotate(-0.3deg); border-color: var(--accent, var(--teal)); box-shadow: 0 18px 34px -18px rgba(0,0,0,0.6); }

.case-top{ display:flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }

.media{
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 20px;
  background: repeating-linear-gradient(45deg, var(--panel-raised), var(--panel-raised) 10px, var(--ink) 10px, var(--ink) 20px);
  border: 1px dashed var(--steel-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
/* "Contener": la foto entera, sobre el panel liso; el rayado es solo para el
   placeholder. "Ancho medio / angosto": la portada más chica y centrada, para
   una captura vertical que a todo el ancho sería un muro. */
.media.contener{ background: var(--panel); border: 1px solid var(--steel-line); }
.media.ancho-medio{ width: 60%; margin-left: auto; margin-right: auto; }
.media.ancho-angosto{ width: 40%; margin-left: auto; margin-right: auto; }
@media (max-width: 760px){ .media.ancho-medio, .media.ancho-angosto{ width: 100%; } }
.media-icon{ width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--accent, var(--teal)); display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); }
.media-icon svg{ width: 14px; height: 14px; fill: var(--accent, var(--teal)); }
.media-label{ font-family: var(--f-mono); font-size: var(--t-micro); color: var(--steel); text-transform: uppercase; letter-spacing: var(--tr-mono); text-align: center; padding: 0 16px; }

.code{
  font-family: var(--f-mono); font-size: 12px; color: var(--accent, var(--teal));
  border: 1px solid var(--accent, var(--teal)); padding: 3px 8px; letter-spacing: var(--tr-mono);
}

.status{
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-mono);
  color: var(--steel); display:flex; align-items:center; gap: 6px; text-align:right;
}
.status .dot{ width: 7px; height:7px; border-radius:50%; background: var(--teal); flex-shrink:0; }

.case h3{
  font-family: var(--f-titulares); font-weight: var(--w-titulares); text-transform: var(--tt-titulares);
  font-size: var(--t-nombre); line-height: 1; margin: 0 0 6px; letter-spacing: var(--tr-titulares);
}
.flagship h3{ font-size: var(--t-nombreFlagship); }

.pitch{ color: var(--accent, var(--teal)); font-size: var(--t-cuerpo); font-weight: 600; margin: 0 0 16px; }
.desc{ font-size: var(--t-cuerpo); line-height: 1.6; color: #C7C4BB; margin: 0 0 20px; }
.flagship .desc{ max-width: 720px; }

.chips{ display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip{ font-family: var(--f-mono); font-size: var(--t-chico); color: #C7C4BB; background: var(--panel-raised); border: 1px solid var(--steel-line); padding: 5px 9px; }

.best-for{ border-top: 1px dashed var(--steel-line); padding-top: 14px; font-size: var(--t-chico); color: var(--steel); }
.best-for span{ color: var(--paper); }

.section-label{
  max-width: 1180px; margin: 0 auto; padding: 0 32px; font-family: var(--f-mono);
  font-size: 12px; color: var(--steel); text-transform: uppercase; letter-spacing: var(--tr-mono);
  margin-bottom: 18px; display:flex; align-items:center; gap:10px;
}
.section-label::after{ content:""; flex:1; height:1px; background: var(--steel-line); }

footer{
  max-width: 1180px; margin: 40px auto 0; padding: 48px 32px 72px;
  display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
  border-top: 1px solid var(--steel-line);
}
footer .fnote{ font-size: 13.5px; color: var(--steel); max-width: 480px; line-height: 1.6; }
footer .fnote span{ color: var(--paper); }
footer .fmono{ font-family: var(--f-mono); font-size: 12px; color: var(--steel); }

@media (prefers-reduced-motion: reduce){ .case{ transition: none; } }

/* --- páginas de detalle --- */
.subnav{ position: sticky; top: 0; z-index: 10; background: rgba(20,22,26,0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--steel-line); }
.subnav-inner{ max-width: 1180px; margin: 0 auto; padding: 12px 32px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.subnav a{ font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--steel); text-decoration: none; }
.subnav a:hover{ color: var(--accent, var(--teal)); }
.subnav .volver{ color: var(--paper); }

.bloque{ max-width: 1180px; margin: 0 auto; padding: 56px 32px; border-top: 1px solid var(--steel-line); }
/* Distribución por bloque: ancho, alineación y columnas (ver bloque.estilo). */
.bloque.ancho-medio{ max-width: 820px; }
.bloque.ancho-angosto{ max-width: 620px; }
.bloque.centrado{ text-align: center; }
.bloque.centrado .feature{ border-left: 0; padding-left: 0; }
.bloque.centrado .chips, .bloque.centrado .cta{ justify-content: center; }
.bloque.con-columnas:not(.tipo-features):not(.tipo-galeria):not(.tipo-specs):not(.tipo-personalizacion):not(.tipo-cta){
  display: grid; grid-template-columns: repeat(var(--columnas, 1), 1fr); gap: 0 26px; align-items: start;
}
.bloque.con-columnas > h2, .bloque.con-columnas > .desc{ grid-column: 1 / -1; }
.bloque.tipo-features.con-columnas .feature-list{ grid-template-columns: repeat(var(--columnas, 2), 1fr); }
.bloque.tipo-galeria.con-columnas .galeria{ grid-template-columns: repeat(var(--columnas, 2), 1fr); }
@media (max-width: 760px){
  .bloque.con-columnas{ display: block; }
  .bloque.tipo-features.con-columnas .feature-list, .bloque.tipo-galeria.con-columnas .galeria{ grid-template-columns: 1fr; }
}
.bloque h2{ font-family: var(--f-titulares); font-weight: var(--w-titulares); text-transform: var(--tt-titulares); font-size: var(--t-tituloBloque); margin: 0 0 28px; }

.feature-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 760px){ .feature-list{ grid-template-columns: 1fr; } }
.feature{ border-left: 2px solid var(--accent, var(--teal)); padding-left: 18px; }
.feature .num{ font-family: var(--f-mono); font-size: var(--t-micro); color: var(--accent, var(--teal)); }
.feature h3{ font-family: var(--f-titulares); font-size: var(--t-nombre); text-transform: var(--tt-titulares); margin: 4px 0 8px; }
.feature p{ font-size: var(--t-cuerpo); line-height: 1.6; color: #C7C4BB; margin: 0; }
.feature img{ max-width: 100%; margin-top: 14px; border: 1px solid var(--steel-line); }

.tabla{ width: 100%; border-collapse: collapse; }
.tabla th, .tabla td{ text-align: left; padding: 12px 14px; border: 1px solid var(--steel-line); font-size: var(--t-cuerpo); }
.tabla th{ font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; color: var(--steel); letter-spacing: var(--tr-mono); }
.tabla-wrap{ overflow-x: auto; }

.escenario{ border: 1px solid var(--steel-line); padding: 22px; margin-bottom: 18px; }
.escenario h3{ font-family: var(--f-titulares); font-size: var(--t-nombre); text-transform: var(--tt-titulares); margin: 0 0 6px; }
.escenario .contexto{ color: #C7C4BB; font-size: var(--t-cuerpo); margin: 0 0 16px; }
.escenario ul{ list-style: none; padding: 0; margin: 0; }
.escenario li{ border-top: 1px dashed var(--steel-line); padding: 12px 0; font-size: var(--t-cuerpo); }
.escenario li b{ color: var(--accent, var(--teal)); font-weight: 600; }

.galeria{ display: grid; grid-template-columns: repeat(var(--columnas, 2), 1fr); gap: 16px; }
@media (max-width: 760px){ .galeria{ grid-template-columns: 1fr; } }
.galeria figure{ margin: 0; }
.galeria img, .galeria video{ width: 100%; display: block; border: 1px solid var(--steel-line); }
.galeria .marco-medio{ overflow: hidden; background: var(--panel); border: 1px solid var(--steel-line); }
.galeria .marco-medio img, .galeria .marco-medio video{ border: 0; }
.galeria figcaption{ font-family: var(--f-mono); font-size: var(--t-micro); color: var(--steel); padding-top: 8px; }

/* el visor: tocar una pieza la abre grande */
.galeria figure{ position: relative; }
.galeria img{ cursor: zoom-in; }
.galeria .ampliar{
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--steel-line); border-radius: 3px; background: rgba(11,13,16,.62); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.galeria figure:hover .ampliar, .galeria .ampliar:focus-visible{ opacity: 1; }
@media (hover: none){ .galeria .ampliar{ opacity: 1; } }
.visor{ border: 0; padding: 0; margin: auto; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.visor::backdrop{ background: rgba(11,13,16,.9); }
.visor img, .visor video{ display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto; border: 1px solid var(--steel-line); background: var(--panel); }
.visor-cerrar{
  position: fixed; top: 14px; right: 16px; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--steel-line); border-radius: 3px; background: rgba(11,13,16,.62); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.visor-pie{ font-family: var(--f-mono); font-size: var(--t-micro); color: var(--steel); text-align: center; margin: 8px 0 0; }

/* masonry: columnas sin huecos, cada pieza a su alto */
.galeria.masonry{ display: block; columns: var(--columnas, 2); column-gap: 16px; }
.galeria.masonry figure{ break-inside: avoid; margin: 0 0 16px; }
@media (max-width: 760px){ .galeria.masonry{ columns: 1; } }

/* mosaico: celdas iguales, y cada tanto una pieza ocupa dos por dos */
.galeria.mosaico{ grid-auto-flow: dense; grid-auto-rows: 180px; }
.galeria.mosaico figure{ display: flex; flex-direction: column; min-height: 0; }
.galeria.mosaico figure:nth-child(5n+1){ grid-column: span 2; grid-row: span 2; }
.galeria.mosaico .marco-medio{ flex: 1; min-height: 0; }
.galeria.mosaico figcaption{ flex: none; }
@media (max-width: 760px){
  .galeria.mosaico{ grid-auto-rows: 220px; }
  .galeria.mosaico figure:nth-child(5n+1){ grid-column: auto; grid-row: auto; }
}

.faq-item{ border-top: 1px solid var(--steel-line); padding: 18px 0; }
.faq-item h3{ font-size: var(--t-cuerpo); margin: 0 0 8px; color: var(--paper); font-weight: 600; }
.faq-item p{ margin: 0; color: #C7C4BB; font-size: var(--t-cuerpo); line-height: 1.6; }

.cta{ border: 1px solid var(--accent, var(--teal)); padding: 34px; text-align: center; }
.cta h2{ margin-bottom: 10px; }
.cta a{ display: inline-block; margin-top: 16px; font-family: var(--f-mono); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--ink); background: var(--accent, var(--teal)); padding: 12px 22px; text-decoration: none; }

.nota-interna{ max-width: 1180px; margin: 0 auto; padding: 16px 32px; border: 1px dashed var(--red-tag); color: var(--red-tag); font-family: var(--f-mono); font-size: var(--t-chico); }

.pager{ max-width: 1180px; margin: 0 auto; padding: 32px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--steel-line); font-family: var(--f-mono); font-size: var(--t-chico); }
.pager a{ color: var(--paper); text-decoration: none; }
.pager a:hover{ color: var(--accent, var(--teal)); }

.case-link{ text-decoration: none; color: inherit; display: block; height: 100%; }
.case-link .case{ height: 100%; }

/* El botón de "pedir esta app" al pie de la ficha. Va centrado y separado del
   último bloque: es la acción de la página, no una parte más del contenido. */
/* El botón de WhatsApp flota abajo a la derecha en todas las páginas, y el
   cuerpo deja lugar para que no tape el pie ni el pager. */
body{ padding-bottom: 84px; }
.pedir.flotante{ position: fixed; right: 16px; bottom: 16px; z-index: 30; padding: 0; text-align: left; }
.pedir.flotante .pedir-boton{
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px;
  background: #25D366; color: #062B17; text-transform: none; letter-spacing: 0; font-family: var(--f-cuerpo);
  font-weight: 600; font-size: 14px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.25);
}
.pedir.flotante .pedir-boton:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.wa-icono{ width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; display: block; }
@media (max-width: 600px){ .pedir.flotante .pedir-boton span{ display: none; } .pedir.flotante .pedir-boton{ padding: 14px; } .wa-icono{ width: 26px; height: 26px; } }
.pedir{ text-align:center; padding: 40px 0 8px; }
.pedir-boton{ display:inline-block; font-family: var(--f-mono); font-size: var(--t-chico);
  text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--ink);
  background: var(--accent, var(--teal)); padding: 14px 26px; text-decoration: none; }
.pedir-boton:hover{ filter: brightness(1.1); }

/* =========================================================================
   Teléfono. El titular de la portada mide lo que la escala tipográfica dice
   —unos 120 px—, y "CATÁLOGO" a ese cuerpo no entra en 390 px: la página
   entera se iba de costado. Acá el titular se acota al ancho de la pantalla,
   los márgenes bajan, la subnav se desplaza en vez de envolverse y el pager
   va apilado.
   ========================================================================= */
@media (max-width: 600px){
  header{ padding: 40px 20px 24px; }
  /* El titular se acota a la pantalla, no a la escala: "CATÁLOGO" a 16vw
     entra en 320 px con margen, y overflow-wrap parte cualquier palabra que
     igual no entre. max-width por si algún nombre viene sin espacios. */
  h1{ font-size: min(var(--t-h1), 16vw); line-height: 0.9; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; margin-bottom: 18px; }
  .eyebrow{ font-size: 11px; letter-spacing: .12em; }
  .subhead{ margin-bottom: 28px; }
  .manifest-cell{ flex-basis: 50%; padding: 12px 14px; }
  .flagship-wrap{ padding: 0 16px; gap: 16px; }
  .grid-wrap{ padding: 32px 16px 28px; }
  .grid{ gap: 16px; }
  .case{ padding: 22px 18px 20px; }
  .case:hover{ transform: none; }
  .flagship h3{ font-size: var(--t-nombre); }
  .section-label{ padding-left: 16px; padding-right: 16px; }
  .subnav-inner{ padding: 10px 16px; gap: 14px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .subnav-inner::-webkit-scrollbar{ display: none; }
  .nota-interna{ margin: 0 16px; padding: 12px 14px; }
  .pager{ flex-direction: column; gap: 12px; padding: 24px 16px; }
  footer{ padding-left: 16px; padding-right: 16px; }
  .cta{ padding: 22px 16px; }
  .escenario{ padding: 16px; }
}

/* =========================================================================
   Respiración. Un latido lento y chico en la placa de código, el estado, el
   nombre y los chips, prendible por elemento desde el panel. Es escala y
   opacidad, nada que mueva el layout; los chips van desfasados por índice.
   Quien pidió menos movimiento no ve nada de esto.
   ========================================================================= */
@keyframes respirar{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.04); opacity: .78; }
}
@keyframes latir-punto{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(47,211,194,.55); }
  60%{ box-shadow: 0 0 0 7px rgba(47,211,194,0); }
}
.respira{ animation: respirar 3.2s ease-in-out infinite; transform-origin: left center; will-change: transform, opacity; }
.chip.respira{ animation-delay: calc(var(--i, 0) * .22s); transform-origin: center; }
.status.respira{ animation: none; }
.status.respira .dot{ animation: latir-punto 2.2s ease-out infinite; }
h1.respira, h3.respira{ animation-duration: 4.5s; }
h1.respira{ transform-origin: left top; }
/* Un span en línea no se escala: los que laten pasan a inline-block. */
.code.respira, .chip.respira{ display: inline-block; }
@media (prefers-reduced-motion: reduce){ .respira{ animation: none; } .respira .dot{ animation: none; } }

/* =========================================================================
   El formulario de contacto del pie. Cerrado es una barra con el título; al
   tocarla baja el panel (grid-template-rows anima de 0fr a 1fr sin medir
   nada). Enviar abre WhatsApp con el mensaje armado.
   ========================================================================= */
.contacto{ max-width: 1180px; margin: 0 auto; padding: 0 32px 32px; }
.contacto-abrir{
  display: block; width: 100%; font: inherit; font-family: var(--f-titulares); font-weight: var(--w-titulares);
  text-transform: var(--tt-titulares); font-size: var(--t-nombre); letter-spacing: .02em;
  color: var(--ink); background: var(--amber); border: 0; padding: 20px 24px; cursor: pointer; text-align: left;
  position: relative;
}
.contacto-abrir::after{ content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 26px; transition: transform .35s ease; }
.contacto-abrir[aria-expanded="true"]::after{ transform: translateY(-50%) rotate(45deg); }
.contacto-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); border: 1px solid var(--steel-line); border-top: 0; background: var(--panel); }
.contacto-panel.abierto{ grid-template-rows: 1fr; }
.contacto-inner{ overflow: hidden; }
.contacto-intro{ margin: 0; padding: 22px 24px 0; color: #C7C4BB; font-size: var(--t-cuerpo); }
.contacto-form{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; padding: 22px 24px 26px; }
.contacto-form label{ display: flex; flex-direction: column; gap: 6px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--steel); }
.contacto-form label:has(textarea){ grid-column: 1 / -1; }
.contacto-form input, .contacto-form textarea, .contacto-form select{
  font: inherit; font-family: var(--f-cuerpo); font-size: 16px; padding: 12px 14px; color: var(--paper);
  background: var(--ink); border: 1px solid var(--steel-line); border-radius: 0; text-transform: none; letter-spacing: 0;
}
.contacto-form input:focus, .contacto-form textarea:focus, .contacto-form select:focus{ outline: 2px solid var(--accent, var(--teal)); outline-offset: -1px; }
.contacto-enviar{
  grid-column: 1 / -1; justify-self: start; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  padding: 14px 22px; border: 0; border-radius: 999px; background: #25D366; color: #062B17; min-height: 48px;
}
@media (max-width: 600px){
  .contacto{ padding: 0 16px 24px; }
  .contacto-form{ grid-template-columns: 1fr; padding: 18px 16px 22px; }
  .contacto-abrir{ padding: 18px 48px 18px 16px; }
}
@media (prefers-reduced-motion: reduce){ .contacto-panel, .contacto-abrir::after{ transition: none; } }

/* --- la firma del vendedor: barra arriba, línea al pie, píldora --- */
.firma{ background: var(--panel); border-bottom: 1px solid var(--steel-line); }
.firma-inner{ max-width: 1180px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.firma-marca{ display: inline-flex; align-items: center; gap: 12px; color: var(--paper); }
.firma-logo{ height: 28px; width: auto; display: block; }
.firma-presenta{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.firma-quien{ display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.firma-rotulo{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.firma-nombre{ font-weight: 600; font-size: 15px; color: var(--paper); }
.firma-escribile{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal); padding-bottom: 1px; }
.firma-escribile:hover{ color: var(--amber); border-color: var(--amber); }
@media (max-width: 600px){
  .firma-inner{ padding: 10px 16px; }
  .firma-presenta{ display: none; }
  .firma-quien{ width: 100%; justify-content: space-between; }
}
.pedir.flotante .pedir-boton:has(.pill-texto){ padding: 10px 18px 10px 12px; gap: 12px; }
.pill-texto{ display: flex; flex-direction: column; line-height: 1.1; }
.pill-texto b{ font-weight: 700; font-size: 14px; }
.pill-texto small{ font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; opacity: .75; }
@media (max-width: 600px){ .pedir.flotante .pedir-boton .pill-texto{ display: none; } }
footer .firma-pie{ margin-top: 10px; font-size: 13px; color: var(--steel); }
footer .firma-pie b{ color: var(--paper); }
footer .firma-pie a{ color: var(--teal); }

/* --- el kit de ventas (solo en la raíz interna de un vendedor) --- */
.kit-ventas{ max-width: 1180px; margin: 0 auto 8px; padding: 0 32px; }
.kit-inner{ border: 1px solid var(--amber); background: var(--panel); padding: 16px 20px; }
.kit-titulo{ font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.kit-fila{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kit-enlace{ flex: 1; min-width: 200px; font-family: var(--f-mono); font-size: 13px; padding: 9px 12px; background: var(--ink); color: var(--paper); border: 1px solid var(--steel-line); }
.kit-copiar, .kit-compartir{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--steel-line); background: transparent; color: var(--paper); cursor: pointer; text-decoration: none; }
.kit-copiar:hover, .kit-compartir:hover{ border-color: var(--amber); color: var(--amber); }
.kit-aviso{ font-size: 13px; color: var(--steel); margin: 10px 0 0; }
.kit-aviso b{ color: var(--paper); }
@media (max-width: 600px){ .kit-ventas{ padding: 0 16px; } }

/* --- referencia de precio (solo interna): a la derecha de "Ideal para",
   y debajo en el teléfono --- */
.best-for-fila{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; }
.best-for-fila .best-for{ flex: 1 1 260px; }
.precio-chip{ font-family: var(--precio-chip-fuente, var(--f-mono)); font-size: var(--precio-chip-tamano, var(--t-micro)); font-weight: var(--precio-chip-peso, 500); letter-spacing: var(--tr-mono); color: var(--precio-chip-color, var(--amber)); text-shadow: var(--precio-chip-brillo, none); white-space: nowrap; }
.precio-ref{ flex: 0 0 auto; text-align: right; font-family: var(--f-mono); font-size: var(--t-chico); color: var(--steel); }
.precio-ref strong{ display: block; font-family: var(--precio-ref-fuente, var(--f-mono)); font-size: var(--precio-ref-tamano, 1.4em); font-weight: var(--precio-ref-peso, 600); color: var(--precio-ref-color, var(--paper)); text-shadow: var(--precio-ref-brillo, none); }
.precio-ref-rotulo{ display: block; letter-spacing: var(--tr-mono); text-transform: uppercase; font-size: var(--t-micro); }
.precio-antes{ color: var(--steel); text-decoration: line-through; font-weight: 400; }
.precio-ref .precio-antes{ display: block; font-size: 1em; }
.precio-nota{ display: block; color: var(--steel); }
@media (max-width: 600px){
  /* Apilado: el flex-basis de "Ideal para" pasaría a ser alto y dejaba un
     hueco enorme antes del precio. Acá cada uno mide lo que mide. */
  .best-for-fila{ flex-direction: column; align-items: stretch; gap: 8px; }
  .best-for-fila .best-for{ flex: none; }
  .precio-ref{ text-align: left; }
}

/* el QR del kit de ventas */
.kit-qr{ display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.kit-qr svg{ width: 132px; height: 132px; display: block; border: 1px solid var(--steel-line); }
.kit-qr span{ font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--steel); }