/* ═══════════════════════════════════════════════════════════════════════════
   ARIA · EL ENCABEZADO DE LAS FASES — la «L» con filete (Luis, 2026-09-26; en ARIA el 2026-09-28)
   ───────────────────────────────────────────────────────────────────────────
   Se arma sobre la fotografía de la franja, con la barra de arriba encima (logo a la izquierda;
   círculos y usuario a la derecha, como en la bandeja). Dice de qué viaje se trata —el viaje y
   sus tres cifras, como la portada de la bandeja—, lo que dice ARIA en esta fase y, al pie, el
   estado, las cinco fases al centro con su filete crema y las acciones de la fase.
   Dos acomodos, el entero (.vc-in) y el pequeño (.vc-in.vc-compacta, que sólo se usa para medir):
   aria-fases.js lleva cada pieza del uno al otro mientras se baja, sólo con transformaciones.
   Los dos tienen el mismo alto en todas las fases: nada baja de renglón; cuando falta lugar, los
   botones se vuelven círculos.
   TODO LO QUE VA SOBRE LA FOTOGRAFÍA TIENE COLORES FIJOS: no cambia con el tema (`data-pz-foto`).
   ═══════════════════════════════════════════════════════════════════════════ */
html.aria-lujo #faseNav{ position:relative; isolation:isolate; display:block; padding:0; overflow:hidden; contain:layout; background:#141D27; }
html.aria-lujo #faseNav.hidden{ display:none !important; }
/* la foto conserva el alto de la franja entera: al encogerse se recorta, nunca se re-encuadra */
html.aria-lujo #faseNav .lujo-nav__fotos{ position:absolute; top:0; left:0; right:0; z-index:-1; pointer-events:none; will-change:transform; }
/* las dos capas del viaje de fotos (aria-viaje.js): se cruzan con un fundido, SIN ACERCAMIENTO
   (Luis, 2026-09-24: «ése es el lugar de más trabajo… ese zoom puede llegar a marear») */
.lujo-nav__foto{ position:absolute; inset:0; background-size:cover; background-position:center 55%; opacity:0; transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.lujo-nav__foto.activa{ opacity:1; }
html.aria-lujo #faseNav .lujo-nav__fotos::after{ content:""; position:absolute; inset:0;
  /* la sombra de abajo hacia arriba y, a la izquierda, una más suave detrás de la columna del
     título: con una foto clara el subtítulo y las cifras no se leían (revisión global, 2026-09-29) */
  background:linear-gradient(90deg, rgba(26,38,51,.34) 0%, rgba(26,38,51,.12) 48%, rgba(26,38,51,0) 72%),
    linear-gradient(180deg, rgba(26,38,51,.55) 0%, rgba(26,38,51,.2) 32%, rgba(26,38,51,.3) 56%, rgba(26,38,51,.82) 100%); }
.vc{ position:relative; z-index:1; color:#FFFFFF; will-change:transform; }
.vc-reserva{ display:none; }
html{ overflow-anchor:none; }
/* en escritorio, adentro de una cotización, no se desplaza la página, sólo los paneles: la franja
   nunca se va con el final */
@media (min-width:768px){ html.aria-lujo:has(#faseNav:not(.hidden)), html.aria-lujo:has(#faseNav:not(.hidden)) body{ overflow:hidden; } }

/* lo que vale sólo en una fase (las acciones y los avisos) se ve sólo en ella */
html:not([data-fase-activa]) .vc [data-en-fase],
html[data-fase-activa="1"] .vc [data-en-fase]:not([data-en-fase~="1"]),
html[data-fase-activa="2"] .vc [data-en-fase]:not([data-en-fase~="2"]),
html[data-fase-activa="3"] .vc [data-en-fase]:not([data-en-fase~="3"]),
html[data-fase-activa="4"] .vc [data-en-fase]:not([data-en-fase~="4"]),
html[data-fase-activa="5"] .vc [data-en-fase]:not([data-en-fase~="5"]){ display:none !important; }
html[data-consola="apagada"] .vc #btnEmail{ display:none !important; }

/* ── las piezas ── */
.vc-ceja{ grid-area:ceja; align-self:center; display:flex; align-items:center; gap:14px; min-width:0; margin:0; font:400 11px/1.2 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(13,23,32,.75); white-space:nowrap; }
.vc-ceja__txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.vc-ceja #quoteAutor{ flex:none; padding:4px 10px; border-radius:99px; background:#EADFCE; color:#1A2633; letter-spacing:.14em; text-shadow:none; }
.vc-ceja #quoteAutor.hidden{ display:none; }
.vc-lugar{ grid-area:lugar; align-self:center; justify-self:end; width:240px; max-width:100%; margin:0 0 0 20px; font:400 10.5px/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-align:right;
  color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(13,23,32,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transform-origin:0 0; }
.vc-tit{ grid-area:tit; position:relative; z-index:2; min-width:0; margin:12px 0 0; font:300 clamp(30px,3.5vw,52px)/1.08 var(--glare); letter-spacing:-.015em; color:#FFFFFF; text-shadow:0 2px 24px rgba(13,23,32,.65);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transform-origin:0 0; justify-self:start; max-width:100%; }
.vc-sub{ grid-area:sub; margin:8px 0 0; font:300 clamp(16px,1.5vw,22px)/1.2 var(--glare); color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(13,23,32,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-sub:empty{ display:none; }
/* dos grupos (quiénes; cuándo): si no caben en un renglón, el segundo baja entero, sin un punto al principio */
.vc-meta{ grid-area:meta; display:flex; flex-wrap:wrap; gap:4px 26px; margin:12px 0 0; font:400 13px/1.35 var(--sans); color:#FFFFFF; text-shadow:0 1px 10px rgba(13,23,32,.8); }
.vc-meta > span{ white-space:nowrap; }
.vc-meta > span > span + span::before{ content:"·"; margin:0 9px; opacity:.6; }
/* las tres cifras, como las de la portada de la bandeja */
/* si no caben en un renglón (la cuarta cifra, «cobrado al cliente», a 1280 px) bajan al siguiente:
   nunca por debajo del globo de ARIA */
.vc-libro{ grid-area:cifras; container-type:inline-size; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 40px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.4); }
.vc-libro div{ display:flex; align-items:baseline; gap:9px; white-space:nowrap; }
.vc-libro b{ font:300 26px/1 var(--glare); font-variant-numeric:tabular-nums; color:#FFFFFF; text-shadow:0 2px 16px rgba(13,23,32,.7); }
.vc-libro span{ font:400 12.5px/1.3 var(--sans); color:#FFFFFF; text-shadow:0 1px 10px rgba(13,23,32,.8); }
/* con el cuarto dato (lo cobrado), en pantallas medianas y chicas las cifras van de a dos por renglón */
@media (max-width:1099px){ .vc-libro:has(> div:nth-child(4)){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; row-gap:14px !important; } }
.vc-aire{ grid-area:aire; display:none; }
.vc-hueco{ grid-area:hueco; display:block; width:100%; height:34px; align-self:center; }
/* `.vc` delante: consola.css le da 1,05 em a todo ícono de botón, y acá los botones van en 0 px de letra */
.vc .vc-ico{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* los botones: píldoras y círculos de vidrio tinta con filete claro; la acción principal, deep.
   Los ids van dentro de :where() para no pesar más que las reglas del celular. */
.vc :is(.vc-acc, .vc-circ, .vc-estado, :where(#saveSlot) > button, .fase3-pub__bt){ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; flex:none;
  border-radius:99px; font:400 13px/1 var(--sans); color:#FFFFFF; background:rgba(20,29,39,.58); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background-color .2s, border-color .2s; white-space:nowrap; }
.vc :is(.vc-acc, :where(#saveSlot) > button){ padding:0 15px; }
.vc :is(.vc-circ, .fase3-pub__bt){ width:38px; padding:0; font-size:0; gap:0; }
.vc :is(.vc-acc, .vc-circ, .vc-estado, :where(#saveSlot) > button, .fase3-pub__bt):hover{ background:rgba(0,85,101,.85); border-color:rgba(255,255,255,.55); }
.vc :is(.vc-acc, .vc-circ, .vc-estado, :where(#saveSlot) > button, .fase3-pub__bt):focus-visible{ outline:2px solid #EADFCE; outline-offset:2px; }
.vc :is(.vc-acc, .vc-circ, :where(#saveSlot) > button):disabled{ opacity:.5; cursor:default; }
.vc :is(.vc-acc--pral, :where(#saveSlot) > [data-save="new"]){ background:#005565; border-color:#005565; }
.vc :is(.vc-acc--pral, :where(#saveSlot) > [data-save="new"]):hover{ background:#006D82; border-color:#006D82; }
/* lo que ARIA dibuja con clases de Tailwind (el guardar de renderSaveBar, los avisos de setStatus)
   trae los colores de cada tema; sobre la foto se quedan los de acá (en claro, el relleno pasa a
   #046477 en aria-tema-claro-ajustes.css) */
html.aria-lujo #faseNav #saveSlot > [data-save="new"]{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
html.aria-lujo #faseNav #saveSlot > [data-save="new"]:hover{ background-color:#006D82 !important; border-color:#006D82 !important; }
html.aria-lujo #faseNav :is(button, a) svg, html.aria-lujo #faseNav .vc-globo__notas *{ color:inherit !important; }
.vc :is(:where(#saveSlot, #fase3Publicado), .fase3-pub){ display:contents; }
.vc #saveSlot > button svg, .vc .fase3-pub__bt svg{ width:16px; height:16px; }
/* «Publicado para el cliente»: sus dos botones (copiar el enlace y abrirlo) como círculos; el
   aviso de «todavía no se publicó» lo dice ARIA en su globo */
.vc .fase3-pub > span, .vc .fase3-pub--vacio{ display:none !important; }
/* «Datos del itinerario» abierto */
.vc #btnDatosItin.activo, .vc #btnDocHerr.activo{ background:#005565; border-color:#005565; }
/* el estado: una píldora con la palabra y la flecha, que abre la lista de estados */
.vc-estado-g{ display:flex; min-width:0; }
.vc-estado-g select{ display:none !important; }
/* el relleno con el peso de `.vc :is(…)`: su `all:unset` lo dejaba en 0 y el texto tocaba el borde (Luis, 2026-09-29) */
.vc .vc-estado{ min-width:0; max-width:100%; gap:8px; padding:0 14px 0 18px; }
/* el recorte de los puntos suspensivos se comía la «g» con el interlineado 1: se le da el suyo */
.vc-estado__txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.vc-estado svg{ transition:transform .2s; }
.vc-estado[aria-expanded="true"] svg{ transform:rotate(180deg); }
.vc-circ-g .vc-rapida{ display:none; }   /* «Más» arriba a la derecha: sólo en el celular */
.vc-pral-g, .vc-atajos{ display:none; }   /* la acción principal aparte y los atajos: sólo en el celular */
.vc-circ-g{ grid-area:circ; position:relative; z-index:3; display:flex; gap:8px; align-self:center; justify-self:end; margin-left:12px; }
/* ARIA: su estrella y su globo */
.vc-idea{ grid-area:idea; align-self:end; display:flex; align-items:flex-start; gap:12px; margin-left:36px; }
.vc-av{ all:unset; box-sizing:border-box; position:relative; z-index:3; flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#005565; color:#FFFFFF; cursor:pointer; transform-origin:0 0; transition:background-color .2s; }
.vc-av:hover{ background:#006D82; }
.vc-av:focus-visible{ outline:2px solid #EADFCE; outline-offset:2px; }
.vc .vc-av svg{ width:58%; height:58%; }
.vc-globo{ flex:1; min-width:0; padding:15px 16px 12px 18px; border-radius:4px 18px 18px 18px; background:rgba(26,38,51,.5); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15); }
/* el mensaje y los avisos nunca pasan de cuatro renglones: así el encabezado mide lo mismo en todas las fases */
.vc-globo__msg{ margin:0; font:300 15px/1.55 var(--sans); color:#EADFCE; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.vc-globo b{ font-weight:400; color:#FFFFFF; }
.vc-globo__notas{ margin:6px 0 0; font:400 12px/1.4 var(--sans); color:#FFFFFF; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.vc-globo__notas:not(:has(> span:not(:empty):not([hidden]))){ display:none; }
.vc-globo__notas > span:empty{ display:none; }
.vc-globo__notas > span + span:not(:empty)::before{ content:"·"; margin:0 8px; opacity:.6; }
.vc-globo__notas *{ font-weight:400 !important; }
.vc-globo__pie{ margin-top:12px; }
.vc-globo__pie:empty{ display:none; }
.vc-globo .vc-acc{ height:32px; padding:0 14px; font-size:12.5px; }

/* ── el pie: el estado a la izquierda, las fases al centro, las acciones a la derecha ── */
.vc-pie{ grid-area:pie; position:relative; z-index:2; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);   /* las fases siempre al centro exacto */ align-items:center; column-gap:20px;
  margin-top:26px; border-top:1px solid rgba(255,255,255,.22); }
.vc-pie > .vc-estado-g{ justify-self:start; min-width:max-content; }
.vc-acc-g{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:8px; }
.vc-fila{ grid-area:fila; display:none; }

/* ── las fases: círculo, número y nombre; el filete crema se desliza hasta la activa ── */
.vc-tabs{ grid-column:2; position:relative; display:flex; align-items:center; gap:24px; margin:0; padding:0; list-style:none; }
.vc-tabs li{ display:flex; }
.vc-tabs button{ all:unset; box-sizing:border-box; position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:14px 0 13px; cursor:pointer; color:rgba(255,255,255,.72); font:400 14px/1 var(--sans); letter-spacing:.01em; white-space:nowrap; transition:color .25s, opacity .25s; }
.vc-tabs button:focus-visible i{ box-shadow:0 0 0 3px rgba(234,223,206,.55); }
.vc-tabs i{ width:26px; height:26px; box-sizing:border-box; display:grid; place-items:center; border-radius:50%; border:1px solid transparent; background:rgba(255,255,255,.16); font:400 12px/1 var(--sans); font-style:normal; font-variant-numeric:tabular-nums; transition:background-color .25s, border-color .25s, color .25s; }
.vc-tabs .vc-dato{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vc-tabs .fase-on{ color:#FFFFFF; }
.vc-tabs .fase-on i{ background:#005565; border-color:#005565; color:#FFFFFF; }
/* al pasar, la fase señalada cobra vida y las demás se apagan */
.vc-tabs:hover button{ opacity:.55; }
.vc-tabs button:hover{ opacity:1; color:#FFFFFF; }
.vc-marca{ position:absolute; left:0; bottom:-1px; height:2px; width:0; border-radius:2px; background:#EADFCE; pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1), width .5s cubic-bezier(.22,1,.36,1); }

/* ── EL ACOMODO ENTERO, EN ESCRITORIO ── */
.vc-in{ position:relative; box-sizing:border-box; max-width:1440px; margin:0 auto; display:grid;
  grid-template-columns:0 minmax(0,1fr) minmax(260px,380px) 96px;   /* anchos fijos: las fases de abajo no deben ensanchar ninguna columna */
  grid-template-areas:
    ".     ceja   lugar circ"
    "hueco tit    idea  idea"
    ".     sub    idea  idea"
    ".     meta   idea  idea"
    ".     cifras idea  idea"
    "pie   pie    pie   pie";
  align-content:end; padding:calc(var(--alto-barra, 84px) + 16px) 32px 18px; }
/* ── EL ACOMODO PEQUEÑO: la estrella, el título, el lugar y los círculos en un renglón; las fases debajo ── */
.vc-in.vc-compacta{ grid-template-columns:34px minmax(0,1fr) 260px 96px; grid-template-areas:"hueco tit lugar circ" "pie pie pie pie";
  padding-top:calc(var(--alto-barra, 84px) + 8px); padding-bottom:10px; }
.vc-compacta :is(.vc-ceja, .vc-sub, .vc-meta, .vc-libro, .vc-idea, .vc-fila, .vc-aire){ display:none !important; }
.vc-compacta .vc-tit{ margin:0 0 0 12px; font-size:22px; align-self:center; }
.vc-compacta .vc-pie{ margin-top:10px; }
/* las otras acciones: píldoras donde caben; círculos donde no (lo decide aria-fases.js, fase por fase) */
.vc-acc-g.vc-circulos .vc-acc--otra{ width:38px; padding:0; }
.vc-acc-g.vc-circulos .vc-acc--otra span, .vc-acc-g.vc-circulos #saveSlot > [data-save="over"]{ font-size:0; gap:0; }
.vc-acc-g.vc-circulos .vc-acc--otra span{ display:none; }
.vc-acc-g.vc-circulos #saveSlot > [data-save="over"]{ width:38px; padding:0; }
/* si aun así no caben, las fases que no están activas se quedan sólo con su número (también debajo
   de 1100 px, donde nunca caben con nombre); la activa conserva siempre el suyo */
.vc-pie.vc-fases-numero .vc-tabs{ gap:16px; }
.vc-pie.vc-fases-numero .vc-tabs button:not(.fase-on) span{ display:none; }
/* y si todavía no caben, las otras acciones pasan a «Más» (aria-fases.js lo trae a la fila) */
.vc-acc-g.vc-con-mas > :is(.vc-acc--otra, #fase3Publicado), .vc-acc-g.vc-con-mas #saveSlot > [data-save="over"]{ display:none !important; }
@media (max-width:1099px){
  .vc-tabs{ gap:16px; }
  .vc-tabs button:not(.fase-on) span{ display:none; }
}
/* las tres cifras, con la palabra debajo del número cuando no caben en un renglón junto a ARIA */
@media (min-width:768px) and (max-width:1279px){
  .vc-libro{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap:0 20px; }
  .vc-libro div{ flex-direction:column; align-items:flex-start; gap:5px; }
  .vc-libro b{ font-size:clamp(18px, 7cqi, 26px); white-space:nowrap; }
  .vc-libro span{ white-space:normal; }
}
@media (min-width:768px) and (max-width:1023px){
  .vc-in{ grid-template-columns:0 minmax(0,1fr) minmax(240px,300px) 96px; }
  .vc-idea{ margin-left:24px; }
  .vc-globo__msg{ -webkit-line-clamp:5; min-height:calc(5 * 1.55em); }
}

/* ═════ EL CELULAR: portada de chat que ocupa la pantalla; encogida, el título y las fases ═════ */
@media (max-width:767px){
  /* la franja va fija arriba y la reserva le guarda su lugar en la página */
  html.aria-lujo #faseNav{ position:fixed !important; top:0 !important; left:0; right:0; z-index:30; }
  /* entera es un telón sobre la página: queda por encima de lo que flota abajo (el botón de los
     ajustes del libro, z 79); encogida vuelve a su lugar, debajo del panel de ajustes (z 80) */
  html.aria-lujo #faseNav:not(.vc-encogida){ z-index:82; }
  /* los renglones que sólo llevan piezas (el de las fases y el de los círculos de la portada) no
     atajan el dedo: encogida, sus cajas vacías quedaban encima de la bandeja, el tema, «Más» y el
     título, y esos no respondían (Luis, 2026-09-29). Lo que llevan adentro sí se toca */
  .vc-pie, .vc-circ-g{ pointer-events:none; }
  .vc-pie *, .vc-circ-g *{ pointer-events:auto; }
  .vc-reserva{ display:block; }
  html.aria-lujo:has(#faseNav.hidden) .vc-reserva{ display:none; }   /* en la bandeja no hay franja que reservar */
  .vc-in{ grid-template-columns:0 minmax(0,1fr) auto; grid-template-rows:auto auto auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
      "hueco lugar circ"
      "ceja  ceja  ceja"
      "tit   tit   tit"
      "sub   sub   sub"
      "meta  meta  meta"
      "cifras cifras cifras"
      "aire  aire  aire"
      "idea  idea  idea"
      "pie   pie   pie"
      "fila  fila  fila";
    align-content:stretch; padding:calc(var(--alto-barra, 110px) + 10px) 16px 14px; }
  .vc-in.vc-compacta{ grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto auto auto; grid-template-areas:"tit atajos circ" "lugar atajos circ" "pie pie pie";
    padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; }
  /* encogida: el título a la izquierda como siempre; a la derecha, juntos, la bandeja, el tema y
     «Más» (en la portada los dos atajos van fuera del acomodo y apagados); la acción principal a la
     par de las fases, contra el borde */
  .vc-in.vc-compacta .vc-hueco{ display:none; }
  .vc-atajos{ display:flex; gap:6px; position:absolute; top:0; right:62px; }
  .vc-atajos .vc-circ{ width:34px; height:34px; }
  .vc-in.vc-compacta .vc-atajos{ position:static; grid-area:atajos; align-self:center; margin:0 6px 0 10px; }
  .vc-in.vc-compacta .vc-circ-g .vc-gesto{ display:none; }
  .vc-in > [data-vc-mas]{ position:absolute; top:0; right:16px; }
  .vc-in.vc-compacta > [data-vc-mas]{ position:static; grid-area:circ; justify-self:end; align-self:center; }
  .vc-in.vc-compacta .vc-fila{ display:flex !important; grid-area:pie; justify-self:end; align-self:center; margin:8px 0 0; }
  .vc-in.vc-compacta .vc-fila > :not(.vc-pral-g){ display:none !important; }
  .vc-in.vc-compacta.vc-con-pral .vc-pie{ padding-right:46px; }
  .vc-hueco{ height:32px; }
  .vc-aire{ display:block; }
  /* el nombre del lugar, siempre a la vista: arriba en la portada y debajo del título encogida */
  .vc-lugar{ justify-self:start; width:auto; max-width:100%; margin:0; text-align:left; font-size:10px; letter-spacing:.16em; }
  .vc-compacta .vc-lugar{ margin:3px 0 0; }
  .vc-ceja{ margin-top:14px; font-size:10.5px; letter-spacing:.2em; }
  .vc-tit{ font-size:clamp(25px, 8vw, 32px); margin-top:8px; }
  .vc-compacta .vc-tit{ font-size:18px; margin:0; align-self:end; }
  .vc-sub{ font-size:16px; margin-top:6px; }
  .vc-libro{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap:0 12px; margin-top:18px; padding-top:14px; }
  .vc-libro div{ flex-direction:column; align-items:flex-start; gap:5px; }
  .vc-libro b{ font-size:clamp(15px, 6.6cqi, 24px); white-space:nowrap; }
  .vc-libro span{ font-size:11.5px; white-space:normal; }
  .vc-idea{ margin:22px 0 0; max-width:92%; flex-direction:column; gap:8px; }
  /* el globo tiene siempre cuatro renglones de alto: la portada mide lo mismo en todas las fases */
  .vc-globo__msg{ -webkit-line-clamp:4; min-height:calc(4 * 1.55em); }
  /* las fases al centro, solas en su renglón; arriba a la derecha la autoevaluación, las versiones
     y «Más» (que sólo aparece cuando algo no se ve) */
  .vc-pie{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; }
  .vc-tabs{ flex:0 1 auto; min-width:0; gap:10px; justify-content:center; }
  .vc-tabs button:not(.fase-on) span{ display:none; }
  /* la acción principal de la fase, en círculo deep: a la par del estado y, encogida, de las fases */
  .vc-pral-g{ display:flex; gap:8px; flex:none; }
  .vc-pral-g .vc-acc--pral{ width:38px; padding:0; }
  .vc-pral-g .vc-acc--pral span, .vc-pral-g #saveSlot > [data-save="over"]{ display:none !important; }
  .vc-pral-g #saveSlot > [data-save="new"]{ width:38px; padding:0; font-size:0; gap:0; }
  /* debajo, en la portada: el estado, la acción principal y las otras, en círculos (encogida, las
     otras y el estado quedan en «Más») */
  .vc-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; margin-top:12px; }
  .vc-fila .vc-estado-g{ flex:0 1 auto; }
  .vc-fila .vc-acc-g{ gap:8px; min-width:0; }
  .vc-fila .vc-acc--otra{ width:38px; padding:0; }
  .vc-fila .vc-acc--otra span{ display:none; }
  .vc-compacta .vc-pie{ margin-top:8px; }
}
/* LA PORTADA SIEMPRE CABE (celular): si no entra en la pantalla, aria-fases.js la va apretando por
   niveles hasta que entra, con las fases y el estado a la vista */
@media (max-width:767px){
  .vc-in.vc-aprieta-1 .vc-ceja{ margin-top:8px; }
  .vc-in.vc-aprieta-1:not(.vc-compacta) .vc-tit{ font-size:clamp(24px, 7.4vw, 28px); margin-top:6px; }
  .vc-in.vc-aprieta-1 .vc-sub{ font-size:14.5px; margin-top:4px; }
  .vc-in.vc-aprieta-1 .vc-meta{ margin-top:8px; font-size:12px; }
  .vc-in.vc-aprieta-1 .vc-libro{ margin-top:12px; padding-top:10px; }
  .vc-in.vc-aprieta-1 .vc-libro b{ font-size:clamp(15px, 6.2cqi, 21px); }
  .vc-in.vc-aprieta-1 .vc-idea{ margin-top:12px; flex-direction:row; max-width:none; }
  .vc-in.vc-aprieta-1 .vc-av{ width:30px; height:30px; }
  .vc-in.vc-aprieta-1 .vc-globo{ padding:11px 13px 10px 14px; }
  .vc-in.vc-aprieta-1 .vc-globo__msg{ font-size:13.5px; line-height:1.45; -webkit-line-clamp:3; min-height:calc(3 * 1.45em); }
  .vc-in.vc-aprieta-1 .vc-globo__pie{ margin-top:8px; }
  .vc-in.vc-aprieta-1 .vc-pie{ margin-top:10px; }
  .vc-in.vc-aprieta-1 .vc-fila{ margin-top:8px; }
  .vc-in.vc-aprieta-2 .vc-sub{ display:none; }
  .vc-in.vc-aprieta-2 .vc-globo__msg{ -webkit-line-clamp:2; min-height:calc(2 * 1.45em); }
  .vc-in.vc-aprieta-3 .vc-ceja{ display:none; }
  .vc-in.vc-aprieta-3 .vc-meta > span + span{ display:none; }
  .vc-in.vc-aprieta-3 .vc-globo__pie{ display:none; }
}
/* lo más angosto: las fases más juntas (la activa conserva su nombre, Luis 2026-09-28) */
@media (max-width:374px){
  .vc-tabs{ gap:8px; }
  .vc-circ-g{ gap:6px; margin-left:8px; }
}
/* el estado entero manda: las otras acciones quedan sólo en «Más» */
@media (max-width:330px){ .vc-fila .vc-acc-g{ display:none; } }

/* ── lo que flota: el globo de ARIA y el menú «Más» ──
   Va fuera de la franja (que recorta lo que se sale) y se abre debajo de ella. Sobre la foto o
   sobre el panel, en los tres temas es la misma pieza; en teal y claro va en el teal de la barra. */
html .vc.vc-flota{ position:fixed; z-index:84; opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease; will-change:auto; }
html .vc.vc-flota.abierta{ opacity:1; transform:none; }
.vc-flota--aria{ width:min(380px, calc(100vw - 24px)); }
.vc-flota--aria .vc-idea{ margin:0; max-width:none; flex-direction:row; }
.vc-flota--aria .vc-globo{ background:rgba(26,38,51,.94); box-shadow:0 18px 40px rgba(13,23,32,.4); }
.vc-flota--aria .vc-globo__msg{ display:block; }
.vc-flota--mas{ width:250px; padding:6px; border-radius:16px; background:rgba(26,38,51,.95); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(13,23,32,.4); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
html[data-tema="claro"] .vc-flota--mas, html[data-tema="teal"] .vc-flota--mas,
html[data-tema="claro"] .vc-flota--aria .vc-globo, html[data-tema="teal"] .vc-flota--aria .vc-globo{ background:rgba(4,100,119,.96); }
.vc-menu__it{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:10px;
  font:400 14px/1.2 var(--sans); color:#FFFFFF; transition:background-color .15s; }
.vc-menu__it:hover, .vc-menu__it:focus-visible{ background:rgba(0,85,101,.75); }
.vc-menu__it b{ margin-left:auto; font-weight:400; font-size:12px; color:#EADFCE; }
.vc .vc-menu__it svg{ width:16px; height:16px; flex:none; }
.vc-menu__sep{ display:block; height:1px; margin:6px 8px; background:rgba(255,255,255,.14); }
/* la lista de estados: el nombre en la letra de los títulos; el de ahora, en deep con su visto */
.vc-flota--estado{ width:250px; padding:8px; border-radius:16px; background:rgba(26,38,51,.95); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(13,23,32,.4); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
html[data-tema="claro"] .vc-flota--estado, html[data-tema="teal"] .vc-flota--estado{ background:rgba(4,100,119,.96); }
.vc-lista__it{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; width:100%; padding:8px 12px; border-radius:10px;
  font:300 16.5px/1.2 var(--glare); color:#FFFFFF; transition:background-color .15s; }
.vc-lista__it:hover, .vc-lista__it:focus-visible{ background:rgba(0,85,101,.75); }
.vc-lista__it[aria-selected="true"]{ background:#005565; }
.vc .vc-lista__it svg{ margin-left:auto; width:16px; height:16px; fill:none; stroke:#EADFCE; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vc-lista__sep{ display:block; height:1px; margin:6px 12px; background:rgba(255,255,255,.14); }
/* los estados: los que no aplican se apagan (el porqué va en su globo); arriba, junto al título, el
   ícono de refrescar desde Toursys; abajo, la plata en dos cifras como las del encabezado */
.vc-lista__it:disabled{ cursor:default; opacity:.4; }
.vc-lista__it:disabled:hover{ background:none; }
.vc-lista__cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 4px 6px 12px; min-height:32px; }
.vc-lista__cab p{ margin:0; white-space:nowrap; font:400 10px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#EADFCE; }
.vc-lista__refrescar{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#FFFFFF; transition:background-color .15s; }
.vc-lista__refrescar:hover, .vc-lista__refrescar:focus-visible{ background:rgba(0,85,101,.75); }
.vc .vc-lista__refrescar svg{ width:15px; height:15px; margin:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vc-lista__refrescar.gira svg{ animation:vc-gira 1s linear infinite; }
@keyframes vc-gira{ to{ transform:rotate(360deg); } }
.vc-lista__fin{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 12px 4px; }
.vc-lista__fin div{ position:relative; display:flex; flex-direction:column; gap:5px; min-width:0; }
/* la nota con los montos, al pasar o al tocar la cifra: flota encima, en el vidrio de la lista */
.vc-lista__fin [data-nota], .vc-libro [data-nota]{ position:relative; cursor:help; outline:none; }
.vc-lista__fin [data-nota]::after, .vc-libro [data-nota]::after{ content:attr(data-nota); position:absolute; left:-6px; bottom:calc(100% + 10px); width:max-content; max-width:210px;
  padding:9px 12px; border-radius:10px; background:#0F1A24; border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 28px rgba(13,23,32,.45);
  font:400 12px/1.45 var(--sans); color:#FFFFFF; white-space:normal; opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .15s, transform .15s; z-index:2; }
.vc-lista__fin div:nth-child(2)[data-nota]::after{ left:auto; right:-6px; }
.vc-lista__fin [data-nota]:is(:hover, :focus-visible, :focus)::after, .vc-libro [data-nota]:is(:hover, :focus-visible, :focus)::after{ opacity:1; transform:none; }
.vc-lista__fin b{ font:300 21px/1 var(--glare); font-variant-numeric:tabular-nums; color:#FFFFFF; }
.vc-lista__fin span{ font:400 11px/1.2 var(--sans); letter-spacing:.04em; color:rgba(234,223,206,.75); }
.vc-lista__fin--vacio{ display:block; font:400 12px/1.45 var(--sans); color:rgba(234,223,206,.75); }
.vc-lista__aviso{ margin:4px 12px 2px; font:400 11.5px/1.4 var(--sans); color:#EADFCE; }
.vc-lista__aviso:empty{ display:none; }

@media (prefers-reduced-motion:reduce){ .vc-marca{ transition:none; } html .vc.vc-flota{ transition:none; } .lujo-nav__foto{ transition:opacity .2s linear; } }