/* THESIS: the quota audit is a field library — three manuals on a dark desk —
   not a government portal with a sticky stepper. The first viewport is the
   collection; opening a volume reveals the same working tools as before.
   OWN-WORLD: ink marino CSS #0b2a50 (sello #0058A6; antes café #29251d), paper #eadfc7, gilt #c3a47b, clay/moss covers,
   Iowan/Palatino italics, 3D cloth-bound books with a page fan.
   STORY: pick a volume, read the ficha / cartilla / pensión, leave with a claim.
   FIRST VIEWPORT: giant italic «Cuotas», three tilted books, paper ticket
   «La colección». Primary action is touching a cover.
   FORM: BestsellersBookShowcase (ThreeUI Field Manuals), product facts only. */

:root{
  --ink:#0b2a50;
  --ink-deep:#071d3a;
  --ink-soft:#123a6a;
  --pink:#c3a47b;
  --pink-bright:#dbc39c;
  --text:#eee2ca;
  --muted:#c5b79e;
  --periwinkle:#b7976c;
  --sage:#89946f;
  --clay:#a96346;
  --moss:#5f684f;
  --paper:#eadfc7;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Source Serif 4",Baskerville,Georgia,serif;
  --ease:cubic-bezier(.2,.78,.2,1);
  --mx:0px;
  --my:0px;

  --navy-topbar:#071d3a;
  --navy-section:#0a2446;
  --primario:#c3a47b;
  --titulo:#eee2ca;
  --oro:#c3a47b;
  --oro-tinte:rgba(195,164,123,.16);
  --oro-texto:#dbc39c;
  --accion:#b7976c;
  --accion-hover:#dbc39c;
  --fondo:#0b2a50;
  --card:#13355f;
  --card-suave:#103058;
  --borde:#2c4d78;
  --texto:#eee2ca;
  --tenue:#c5b79e;
  --verde:#7d9a6a;
  --ambar:#c9a15a;
  --rojo:#c46a4e;
  --cian:#8aa8a0;
  --ok-bg:rgba(125,154,106,.16);
  --ok-tx:#c5d4b4;
  --ok-borde:rgba(125,154,106,.4);
  --mal-bg:rgba(196,106,78,.16);
  --mal-tx:#e8b4a4;
  --warn-bg:rgba(201,161,90,.14);
  --warn-tx:#e4cc96;
  --warn-borde:rgba(201,161,90,.38);
  --warn-tinta:#e8d7b0;
  --info-bg:rgba(183,151,108,.14);
  --info-tx:#e4d3b0;
  --cian-bg:rgba(138,168,160,.12);
  --cian-tx:#c5d8d3;
  --gris-bg:rgba(197,183,158,.12);
  --gris-tx:#c5b79e;
  --burbuja-yo:#1a4274;
  --cab-velo:rgba(11,42,80,.94);
  --cab-velo-2:rgba(11,42,80,.62);
  --sombra:0 8px 18px rgba(18,14,9,.28);
  --sombra-2:0 12px 28px rgba(18,14,9,.34);
  --sombra-3:0 22px 48px rgba(18,14,9,.42);
  --vidrio:rgba(11,42,80,.78);
  --mono:ui-monospace,"Cascadia Mono",Menlo,monospace;
  --card-hundida:#0c2848;
  --borde-fuerte:#3d5f8c;
  --sidebar:#dbc39c;
  --dorado:#c3a47b;
  --dorado-tinta:#8a6d3d;
  --anillo:rgba(195,164,123,.28);
  --chip-oro-f:rgba(195,164,123,.16);
  --chip-oro-t:#e8d7b0;
  --chip-rojo-f:rgba(196,106,78,.16);
  --chip-rojo-t:#e8b4a4;
  --chip-azul-f:rgba(183,151,108,.16);
  --chip-azul-t:#e4d3b0;
  --chip-gris-f:rgba(197,183,158,.12);
  --chip-gris-t:#c5b79e;
}

[data-tema="oscuro"]{
  --navy-topbar:#071d3a;
  --navy-section:#0a2446;
  --primario:#dbc39c;
  --titulo:#eee2ca;
  --oro:#c3a47b;
  --oro-tinte:rgba(195,164,123,.16);
  --oro-texto:#e4d3b0;
  --accion:#b7976c;
  --accion-hover:#dbc39c;
  --fondo:#0b2a50;
  --card:#13355f;
  --card-suave:#103058;
  --borde:#2c4d78;
  --texto:#eee2ca;
  --tenue:#c5b79e;
  --ok-bg:rgba(125,154,106,.16);
  --ok-tx:#c5d4b4;
  --ok-borde:rgba(125,154,106,.4);
  --mal-bg:rgba(196,106,78,.16);
  --mal-tx:#e8b4a4;
  --warn-bg:rgba(201,161,90,.14);
  --warn-tx:#e4cc96;
  --warn-borde:rgba(201,161,90,.38);
  --warn-tinta:#e8d7b0;
  --info-bg:rgba(183,151,108,.14);
  --info-tx:#e4d3b0;
  --cian-bg:rgba(138,168,160,.12);
  --cian-tx:#c5d8d3;
  --gris-bg:rgba(197,183,158,.12);
  --gris-tx:#c5b79e;
  --burbuja-yo:#1a4274;
  --cab-velo:rgba(11,42,80,.94);
  --cab-velo-2:rgba(11,42,80,.62);
  --sombra:0 8px 18px rgba(0,0,0,.35);
  --sombra-2:0 12px 28px rgba(0,0,0,.42);
  --sombra-3:0 22px 48px rgba(0,0,0,.5);
  --vidrio:rgba(11,42,80,.82);
}

/* Lectura en papel: el teatro de la galería sigue en tinta. */
[data-tema="claro"] .workspace,
[data-tema="claro"] .workspace :where(.caja,.opcion,.kpi,.hallazgo,.cc-sesion,textarea.carta,.datos-reclamo input,.pension-form input,.pension-form select,select,button:not(.tab):not(.primario):not(.verde)){
  --fondo:#eadfc7;
  --card:#f4ecda;
  --card-suave:#efe6d2;
  --borde:#d4c6a6;
  --texto:#29251d;
  --tenue:#5f5646;
  --titulo:#29251d;
  --primario:#6b4f2c;
  --accion:#6b4f2c;
  --accion-hover:#4a361d;
  --oro:#8a6d3d;
  --oro-tinte:#f3e6c8;
  --oro-texto:#6b4f2c;
  --ok-tx:#3f5a32;
  --ok-bg:#e4edd8;
  --mal-tx:#8a3d2a;
  --mal-bg:#f6e0d8;
  --warn-tx:#7a5a18;
  --warn-bg:#f4e8c8;
  --warn-tinta:#5a4320;
  --info-tx:#4a3a22;
  --info-bg:#efe4cc;
  --gris-bg:#e8dcc4;
  --gris-tx:#5f5646;
}

html,body{
  width:100%;
  min-height:100%;
  background:var(--ink-deep); /* = final del degradado del escenario: sin franja al hacer scroll */
}
body{
  min-height:100svh;
  color:var(--text);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
}
[data-vista="gallery"] body{overflow:hidden}
button,a,select,input,textarea{font-family:inherit}
button{color:inherit}

.skip-tomo{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--paper);color:#30291f;padding:.6rem 1rem;
}
.skip-tomo:focus{left:1rem;top:1rem}

/* ── escenario ── */
.stage{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 49% 84%,rgba(0,88,166,.34),transparent 38%),
    radial-gradient(circle at 14% 4%,rgba(201,162,39,.08),transparent 28%),
    linear-gradient(180deg,#123a6a 0%,var(--ink) 48%,var(--ink-deep) 100%);
}
.stage::after{
  content:"";
  position:absolute;z-index:30;inset:0;
  pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.fm-topbar{
  position:fixed;z-index:50;top:0;left:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;width:100%;padding:18px 3.2vw;pointer-events:none;
}
.fm-marca{
  display:flex;align-items:center;gap:.75rem;min-width:0;pointer-events:auto;
}
.fm-topbar .logo-css{height:44px;width:auto;display:block}
.fm-topbar .logo-gob{height:38px;width:auto;display:block;opacity:.95}
.fm-topbar .divisor{
  width:1px;height:32px;flex:none;background:rgba(234,223,199,.28);
}
.brand{
  color:var(--pink);
  font-size:clamp(20px,1.9vw,28px);
  font-style:italic;font-weight:600;
  letter-spacing:-.035em;line-height:1;
  text-decoration:none;white-space:nowrap;
}
.fm-topbar .contacto{
  margin-left:0;color:var(--muted);font-size:.78rem;font-weight:400;
  pointer-events:auto;white-space:nowrap;
}
.fm-topbar .contacto a{color:inherit;text-decoration:none}
.fm-topbar .contacto b{color:var(--paper);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:12px;pointer-events:auto;flex:none}

.icon-button,.ticket-button,.close-button,.pill,.book-card{
  border:0;outline:0;-webkit-tap-highlight-color:transparent;
}
.icon-button,.ticket-button{
  height:50px;
  border:1px solid rgba(61,49,35,.18);
  background:var(--paper);color:#30291f;
  box-shadow:0 8px 26px rgba(28,22,14,.13);
  transition:transform 240ms var(--ease),background-color 240ms ease;
}
.icon-button{
  display:grid;width:50px;place-items:center;border-radius:50%;cursor:pointer;
}
#btn-tema{
  width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(61,49,35,.18);
  background:var(--paper);color:#30291f;
  display:grid;place-items:center;cursor:pointer;padding:0;font-size:0;
  box-shadow:0 8px 26px rgba(28,22,14,.13);
  transition:transform 240ms var(--ease),background-color 240ms ease;
}
#btn-tema:hover,.icon-button:hover,.ticket-button:hover{
  transform:translateY(-3px);background:#f7edd9;
}
#btn-tema svg{width:20px;height:20px}
#btn-tema .ico-luna{display:none}
[data-tema="oscuro"] #btn-tema .ico-sol{display:none}
[data-tema="oscuro"] #btn-tema .ico-luna{display:block}

.menu-glyph{position:relative;width:14px;height:10px}
.menu-glyph::before,.menu-glyph::after{
  content:"";position:absolute;left:1px;width:12px;height:2px;border-radius:2px;
  background:currentColor;transition:transform 300ms var(--ease),top 300ms var(--ease);
}
.menu-glyph::before{top:2px}
.menu-glyph::after{top:7px}
[data-menu="open"] .menu-glyph::before{top:5px;transform:rotate(45deg)}
[data-menu="open"] .menu-glyph::after{top:5px;transform:rotate(-45deg)}

.ticket-button{
  display:inline-grid;min-width:138px;padding:0 25px;place-items:center;
  border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
}

.icon-button:focus-visible,.ticket-button:focus-visible,
.close-button:focus-visible,.pill:focus-visible,.menu-link:focus-visible,
#btn-tema:focus-visible,.book-card:focus-visible .open-badge{
  outline:2px solid #fff;outline-offset:4px;
}

.hero-word{
  position:absolute;z-index:1;top:8.5vh;left:50%;margin:0;
  color:var(--pink);
  /* también por alto: en 1280×720 medía 22vw y los libros tapaban la mitad de la palabra */
  font-size:clamp(104px,min(21vw,24vh),325px);
  font-style:italic;font-weight:500;
  letter-spacing:-.085em;line-height:.84;white-space:nowrap;
  transform:translate3d(calc(-50% + var(--mx) * -.12),calc(var(--my) * -.12),0);
  transition:opacity 700ms ease,filter 700ms ease,transform 900ms var(--ease);
  user-select:none;pointer-events:none;
}

/* ── libros ── */
.gallery{
  position:absolute;z-index:5;inset:0;
  perspective:1400px;transform-style:flat;
}
.book-card{
  --hover-y:0px;--local-x:0px;--local-y:0px;
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  aspect-ratio:.672 / 1;padding:0;background:transparent;cursor:pointer;
  transform:translate3d(calc(-50% + var(--local-x)),calc(var(--hover-y) + var(--local-y)),0)
    rotate(var(--r)) rotateY(var(--yaw));
  transform-style:preserve-3d;
  transition:left 1100ms var(--ease),top 1100ms var(--ease),width 1100ms var(--ease),
    opacity 500ms ease,filter 500ms ease,transform 520ms var(--ease);
  will-change:transform,left,top,width;
}
.book-card[data-book="cupos"]{--x:12%;--y:46%;--w:min(22vw,310px);--r:-14deg;--yaw:-9deg;z-index:1}
.book-card[data-book="semaforo"]{--x:31%;--y:38%;--w:min(23vw,330px);--r:-7deg;--yaw:-5deg;z-index:3}
.book-card[data-book="receta"]{--x:50%;--y:32%;--w:min(25vw,355px);--r:.4deg;--yaw:-2deg;z-index:5}
.book-card[data-book="cuotas"]{--x:69%;--y:38%;--w:min(23vw,330px);--r:7deg;--yaw:5deg;z-index:3}
.book-card[data-book="cuidado"]{--x:88%;--y:46%;--w:min(22vw,310px);--r:14deg;--yaw:9deg;z-index:1}
.book-card:hover,.book-card[data-hovered="true"]{--hover-y:-28px;z-index:8}

.book{position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform 800ms var(--ease)}
.book-card:hover .book{transform:scale(1.035) rotateX(-1.5deg)}

.book-back,.page-block,.page-fan,.front-cover,.book-shadow{
  position:absolute;inset:0;border-radius:3px 7px 7px 3px;
}
.book-shadow{
  z-index:-2;inset:5% -4% -2% 4%;border-radius:12px;
  background:rgba(24,18,10,.7);filter:blur(22px);opacity:.72;
  transform:translate3d(18px,28px,-60px);
}
.book-back{
  z-index:0;background:var(--cover-color);
  box-shadow:0 18px 30px rgba(24,18,10,.4);
  transform:translate3d(7px,1px,-26px);
}
.page-block{
  z-index:1;inset:1.7% 1.4% 1.7% 3.8%;overflow:visible;
  border:1px solid rgba(84,68,45,.25);border-radius:2px 5px 5px 2px;
  background:
    repeating-linear-gradient(0deg,rgba(105,86,58,.14) 0,rgba(105,86,58,.14) 1px,transparent 1px,transparent 2.8px),
    linear-gradient(90deg,#cfc1a4 0%,#f2e8d2 14%,#e7dac0 87%,#cbb894 100%);
  box-shadow:7px 5px 16px rgba(31,23,13,.26);
  transform:translate3d(7px,1px,-12px);
  transition:transform 1100ms var(--ease);
}
.page-block::before{
  content:"";position:absolute;top:-7px;right:1px;left:1px;height:8px;
  border-radius:2px 4px 0 0;
  background:repeating-linear-gradient(90deg,#d9cbae 0,#d9cbae 2px,#f2e7cf 2px,#f2e7cf 5px);
  transform:skewX(-8deg);transform-origin:bottom left;
}
.page-block::after{
  content:"";position:absolute;top:0;right:-7px;width:8px;height:100%;
  border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(0deg,#cbb995 0,#cbb995 1px,#eee3cd 1px,#eee3cd 3px);
  box-shadow:3px 2px 7px rgba(35,26,14,.18);
  transform:skewY(-2deg);transform-origin:left center;
}
.page-fan{z-index:2;inset:2.4% 2% 2.4% 4.3%;pointer-events:none;transform-style:preserve-3d}
.page-fan i{
  position:absolute;inset:0;display:block;
  border:1px solid rgba(102,83,55,.22);border-radius:2px 5px 5px 2px;
  background:
    linear-gradient(90deg,rgba(116,91,56,.22),transparent 9%),
    repeating-linear-gradient(0deg,#f0e6d0 0,#f0e6d0 2px,#e6d8ba 2px,#e6d8ba 3px);
  box-shadow:3px 5px 10px rgba(37,28,16,.08);
  opacity:0;transform:translate3d(0,0,0) rotateY(0);
  transform-origin:1.5% center;
  transition:opacity 500ms ease,transform 1200ms var(--ease);
}
.front-cover{
  z-index:3;overflow:hidden;
  border:1px solid rgba(238,224,194,.2);
  background-color:var(--cover-color);
  background-image:var(--cover);
  background-position:center;background-size:cover;
  box-shadow:0 25px 38px rgba(24,18,10,.4),inset -12px 0 18px rgba(0,0,0,.16),inset 4px 0 9px rgba(255,255,255,.12);
  transform:translate3d(0,0,12px);transform-origin:1.5% center;
  transform-style:preserve-3d;
  transition:transform 1200ms var(--ease),box-shadow 600ms ease;
}
.front-cover::before{
  content:"";position:absolute;z-index:3;top:0;bottom:0;left:0;width:5.5%;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.08) 35%,rgba(0,0,0,.12) 75%,transparent);
  mix-blend-mode:multiply;opacity:.8;
}
.front-cover::after{
  content:"";position:absolute;z-index:4;inset:0;
  border:3px solid rgba(255,255,255,.04);border-radius:inherit;pointer-events:none;
}
.cover-grain{
  position:absolute;z-index:1;inset:0;opacity:.28;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.cover-copy{
  position:absolute;z-index:2;inset:5.8% 7.5% 5.5%;
  display:grid;grid-template-rows:auto auto auto 1fr auto;
  align-content:start;color:var(--cover-ink);text-align:center;
  text-shadow:0 1px 0 rgba(241,226,196,.24);
}
.cover-kicker{
  font-size:clamp(8px,.72vw,11px);font-style:italic;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.cover-title{
  margin-top:2.2%;font-size:clamp(20px,2.5vw,42px);
  font-weight:600;letter-spacing:-.055em;line-height:.9;
}
.cover-subtitle{
  margin-top:3%;font-size:clamp(10px,1.05vw,15px);
  font-style:italic;font-weight:600;letter-spacing:.035em;
}
.cover-footer{
  align-self:end;padding-top:3%;border-top:1px solid currentColor;
  font-size:clamp(7px,.62vw,9px);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}

.book-card[data-book="cupos"]{
  --cover-color:#a96346;
  --cover:radial-gradient(ellipse at 28% 18%,rgba(234,223,199,.22),transparent 46%),
    linear-gradient(165deg,#c47a55 0%,#8f4d32 58%,#6a3824 100%);
}
.book-card[data-book="cupos"] .cover-copy{--cover-ink:#4b281a}
.book-card[data-book="semaforo"]{
  --cover-color:#eadfc7;
  --cover:radial-gradient(ellipse at 70% 12%,rgba(195,164,123,.35),transparent 40%),
    linear-gradient(168deg,#f3e8d0 0%,#e2d2ae 55%,#c9b48a 100%);
}
.book-card[data-book="semaforo"] .cover-copy{--cover-ink:#31291e}
.book-card[data-book="receta"]{
  --cover-color:#5f684f;
  --cover:radial-gradient(ellipse at 40% 80%,rgba(234,223,199,.16),transparent 48%),
    linear-gradient(160deg,#7a8466 0%,#535a44 60%,#3d4332 100%);
}
.book-card[data-book="receta"] .cover-copy{--cover-ink:#293024}
.book-card[data-book="cuotas"]{
  --cover-color:#3a382b;
  --cover:radial-gradient(ellipse at 50% 20%,rgba(195,164,123,.2),transparent 50%),
    linear-gradient(170deg,#4a4536 0%,#2f2c22 100%);
}
.book-card[data-book="cuotas"] .cover-copy{--cover-ink:#eee2ca}
.book-card[data-book="cuidado"]{
  --cover-color:#89946f;
  --cover:radial-gradient(ellipse at 20% 30%,rgba(234,223,199,.2),transparent 44%),
    linear-gradient(162deg,#9aa67d 0%,#6f7858 62%,#4e553c 100%);
}
.book-card[data-book="cuidado"] .cover-copy{--cover-ink:#293024}

.open-badge{
  position:absolute;z-index:6;top:47%;left:50%;
  display:grid;width:94px;height:66px;place-items:center;
  color:#312a21;background:#efe3ca;
  clip-path:polygon(3% 22%,10% 8%,25% 7%,38% 1%,51% 6%,66% 2%,77% 10%,92% 11%,96% 26%,100% 39%,95% 52%,99% 67%,88% 79%,83% 93%,68% 94%,55% 100%,42% 94%,27% 98%,17% 88%,4% 84%,5% 69%,0 57%,5% 43%,1% 34%);
  font-size:11px;font-style:italic;font-weight:700;letter-spacing:.12em;
  opacity:0;transform:translate(-50%,-50%) scale(.76) rotate(-3deg);
  transition:opacity 260ms ease,transform 420ms var(--ease),filter 260ms ease;
  pointer-events:none;
}
.book-card:hover .open-badge,
.book-card[data-hovered="true"] .open-badge,
.book-card:focus-visible .open-badge{
  opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg);
}
.book-card:focus-visible{outline:0}

/* ── detalle / workspace ── */
.close-button{
  position:absolute;z-index:52;top:30px;left:50%;
  display:grid;width:54px;height:54px;place-items:center;
  border:1px solid rgba(255,255,255,.26);border-radius:50%;
  background:rgba(42,37,28,.28);color:var(--paper);
  cursor:pointer;font-size:27px;font-weight:200;
  opacity:0;transform:translate3d(-50%,-18px,0) rotate(-45deg);
  transition:opacity 400ms ease,transform 620ms var(--ease),background 220ms ease;
  pointer-events:none;backdrop-filter:blur(8px);
}
.close-button:hover{background:rgba(255,255,255,.08)}

.workspace{
  position:relative;z-index:12;
  opacity:0;pointer-events:none;
  transform:translateY(24px);
  transition:opacity 520ms ease 280ms,transform 700ms var(--ease);
}
[data-vista="gallery"] .workspace,
[data-vista="gallery"] .aviso-proto{display:none}

[data-vista="detail"] .hero-word{
  opacity:0;filter:blur(16px);
  transform:translate3d(-50%,-34px,0) scale(.9);
}
[data-vista="detail"] .book-card:not(.selected){
  opacity:0;filter:blur(10px);
  transform:translate3d(-50%,60vh,-200px) rotate(var(--r)) scale(.8);
  pointer-events:none;
  transition-duration:280ms;
}
[data-vista="detail"] .book-card.selected{
  --hover-y:0px;--local-x:0px;--local-y:0px;
  --detail-yaw:-5deg;--detail-pitch:0deg;
  left:16%;top:50%;width:min(22vw,340px);z-index:14;
  cursor:default;
  transform:translate3d(-50%,-50%,0) rotate(-3deg);
  pointer-events:none;opacity:1;filter:none;
}
[data-vista="detail"] .book-card.selected .book{
  transform:scale(1.02) rotateX(var(--detail-pitch)) rotateY(var(--detail-yaw));
  transition-duration:170ms;transition-timing-function:var(--ease);
}
[data-vista="detail"] .book-card.selected .front-cover{
  box-shadow:25px 26px 44px rgba(29,21,11,.34),inset -12px 0 18px rgba(0,0,0,.13),inset 4px 0 9px rgba(255,255,255,.1);
  transform:translate3d(0,0,18px) rotateY(-29deg);
}
[data-vista="detail"] .book-card.selected .page-fan i{opacity:1}
[data-vista="detail"] .book-card.selected .page-fan i:nth-child(1){transform:translate3d(0,0,10px) rotateY(-4deg)}
[data-vista="detail"] .book-card.selected .page-fan i:nth-child(2){transform:translate3d(0,0,11px) rotateY(-8deg)}
[data-vista="detail"] .book-card.selected .page-fan i:nth-child(3){transform:translate3d(0,0,12px) rotateY(-12deg)}
[data-vista="detail"] .book-card.selected .page-fan i:nth-child(4){transform:translate3d(0,0,13px) rotateY(-16deg)}
[data-vista="detail"] .book-card.selected .open-badge{opacity:0}
[data-vista="detail"] .close-button{
  opacity:1;transform:translate3d(-50%,0,0) rotate(0);pointer-events:auto;
}
[data-vista="detail"] .sellos-campo{opacity:1}
[data-vista="detail"] .workspace{
  display:block;opacity:1;pointer-events:auto;transform:none;
}
[data-vista="detail"] .aviso-proto{display:block}

@media (min-width:901px){
  [data-vista="detail"] .stage{
    position:fixed;inset:0;min-height:100svh;z-index:4;
  }
  [data-vista="detail"] .workspace{
    position:relative;z-index:12;
    margin:7rem 2.5vw 3rem calc(16% + min(22vw, 340px) + 5.5rem);
    max-width:720px;
    padding:0 0 2rem .4rem;
  }
  html[data-vista="detail"] body{overflow:auto}
}

/* ── sellos de cuota (antes pétalos) ──
   Estampillas de papel con el mes, perforadas con un outline punteado del color del fondo.
   Las «hueco» caen vacías: son los meses sin cuota que la Cartilla detecta. */
.sellos-campo{
  position:absolute;z-index:9;inset:0;overflow:hidden;
  opacity:0;transition:opacity 700ms ease 250ms;pointer-events:none;
}
.sello-cuota{
  position:absolute;top:-12vh;left:var(--x);
  width:var(--s);height:calc(var(--s) * 1.22);
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 70% 30%,rgba(0,88,166,.16) 0 32%,transparent 33%),
    var(--paper);
  box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px rgba(0,88,166,.55),0 6px 14px rgba(3,14,30,.35);
  outline:3px dotted var(--ink);outline-offset:-2px;
  color:#0b3f78;font:italic 700 calc(var(--s) * .34)/1 var(--serif);
  opacity:.9;will-change:transform;
  animation:selloCae var(--d) linear var(--t) infinite;
}
.sello-cuota b{font:inherit;text-transform:lowercase}
.sello-cuota.hueco{
  background:transparent;color:var(--pink-bright);opacity:.75;
  box-shadow:inset 0 0 0 1.5px rgba(219,195,156,.7);outline:none;
}
@keyframes selloCae{
  0%{transform:translate3d(0,-10vh,0) rotate(var(--r)) rotateY(0deg)}
  30%{transform:translate3d(26px,32vh,0) rotate(calc(var(--r) + 14deg)) rotateY(40deg)}
  65%{transform:translate3d(-22px,76vh,0) rotate(calc(var(--r) - 10deg)) rotateY(-30deg)}
  100%{transform:translate3d(14px,122vh,0) rotate(calc(var(--r) + 8deg)) rotateY(10deg)}
}

/* ── menú ── */
.menu-layer{
  position:fixed;z-index:40;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 47%,rgba(0,88,166,.30),transparent 46%),rgba(7,29,58,.96);
  padding:92px 0 28px;
  opacity:0;transition:opacity 460ms ease;pointer-events:none;
  backdrop-filter:blur(18px);
}
.menu-list{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:0;padding:0;list-style:none;
}
.menu-link{
  display:inline-block;color:var(--pink);
  font-size:clamp(40px,6.4vw,88px);
  font-style:italic;font-weight:500;letter-spacing:-.055em;
  line-height:1.08;text-decoration:none;background:none;border:0;cursor:pointer;
  transform:translateY(24px);
  transition:color 200ms ease,transform 500ms var(--ease);
}
.menu-link:hover{color:#fff}
.menu-logos{
  display:flex;align-items:center;gap:1rem;margin-top:1.6rem;opacity:.85;
}
.menu-logos img{height:36px;width:auto}
[data-menu="open"] .menu-layer{opacity:1;pointer-events:auto}
[data-menu="open"] .menu-link{transform:translateY(0)}
[data-menu="open"] #chat-abrir{opacity:0;pointer-events:none}

/* ── restyle del contenido que ya existe ── */
.topbar{background:transparent;border-bottom:1px solid rgba(220,200,164,.12)}
.topbar-in{min-height:52px}
.contacto{color:var(--muted)}
.contacto b{color:var(--paper)}
.aviso-proto{
  background:rgba(201,161,90,.12);border-bottom:1px solid rgba(201,161,90,.28);
  color:var(--warn-tinta);
}
.cabecera{
  background:transparent;border-bottom:1px solid rgba(220,200,164,.12);
}
.cabecera::after{display:none}
.boveda-fondo{display:none!important}
.eyebrow{color:var(--pink);font-style:italic;letter-spacing:.18em}
h1{font-style:italic;font-weight:500;letter-spacing:-.04em;color:var(--pink)}
.lede{color:var(--muted);font-size:1.02rem;max-width:40rem}
[data-vista="detail"] .cabecera h1,
[data-vista="detail"] .eyebrow,
[data-vista="detail"] .hero-beneficios{display:none}
[data-vista="detail"] .cabecera-in{grid-template-columns:1fr;padding:.85rem 1.1rem .4rem;gap:.8rem}
[data-vista="detail"] .lede{font-size:.95rem;max-width:38rem}
.estado-conexion{
  background:rgba(19,53,95,.72);border-color:rgba(220,200,164,.18);
  color:var(--muted);border-radius:999px;
}

.barra-pasos{
  position:sticky;top:0;z-index:60;
  background:rgba(11,42,80,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(220,200,164,.12);
  box-shadow:none;
}
.pasos-in{gap:8px;padding:.65rem 1.1rem}
.tab{
  border:1px solid rgba(238,226,202,.08);
  border-radius:24px;background:rgba(26,66,116,.55);
  color:var(--paper);font:italic 650 14px/1 var(--serif);
  min-height:52px;box-shadow:none;
}
.tab:hover{background:rgba(34,82,140,.7);transform:translateY(-2px);box-shadow:none}
.tab b{
  background:transparent;color:var(--pink);
  font-style:italic;width:auto;height:auto;border-radius:0;
}
.tab.hecho b{background:transparent;color:var(--sage)}
.tab.hecho b::after{display:none}
.tab.activa{
  background:var(--periwinkle);color:#2e261d;border-color:transparent;
  box-shadow:0 10px 22px rgba(26,20,12,.22);transform:none;
}
.tab.activa b{background:transparent;color:#2e261d}

.opcion,.caja,.kpi,.cc-sesion{
  border-radius:4px 10px 10px 4px;
  background:var(--card);
  border:1px solid rgba(220,200,164,.16);
}
.opcion h3 .num-op{border-radius:4px;background:var(--oro-tinte);color:var(--pink)}
.caja h2{letter-spacing:.16em;font-style:italic;text-transform:uppercase;color:var(--pink)}
.caja h2::before{background:var(--pink);border-radius:1px;width:10px;height:1px}

select,button:not(.tab):not(.icon-button):not(.ticket-button):not(.close-button):not(.menu-link):not(#btn-tema):not(#chat-abrir):not(#chat-maxi):not(#chat-cerrar):not(.chat-envia){
  border-radius:999px;font-family:var(--serif);
}
button.primario{
  background:var(--periwinkle);border-color:var(--periwinkle);color:#2e261d;
  font-style:italic;font-weight:700;
}
button.primario:hover{background:var(--pink-bright);border-color:var(--pink-bright);color:#2e261d}
button.verde{background:var(--moss);border-color:var(--moss);color:var(--paper)}

.hallazgo{border-radius:4px 10px 10px 4px;border-left-width:3px}
footer{background:var(--ink-deep);color:var(--muted)}
footer b{color:var(--paper)}

#chat-abrir{
  background:var(--paper);color:#30291f;font-family:var(--serif);
  font-style:italic;font-weight:700;
}
#chat-panel{background:var(--card);border-color:rgba(220,200,164,.18)}
#chat-cab{background:var(--ink-deep);color:var(--paper)}

#cc-velo-nav{background:var(--ink-deep)}
#cc-velo-nav p{color:var(--muted);font-family:var(--serif);letter-spacing:.14em}

/* ── responsive ── */
@media (max-width:900px){
  [data-vista="gallery"] body{overflow:auto}
  .stage{min-height:100svh}
  .fm-topbar{padding:14px 20px}
  .fm-topbar .logo-css{height:36px}
  .fm-topbar .logo-gob{height:30px}
  .fm-topbar .contacto{display:none}
  .icon-button,#btn-tema{width:44px;height:44px}
  .ticket-button{height:44px;min-width:auto;padding:0 18px}
  .hero-word{top:14vh;font-size:clamp(88px,min(28vw,22vh),230px)}
  .book-card[data-book="cupos"]{--x:-2%;--y:48%;--w:min(36vw,230px);--r:-16deg}
  .book-card[data-book="semaforo"]{--x:22%;--y:40%;--w:min(38vw,250px);--r:-8deg}
  .book-card[data-book="receta"]{--x:50%;--y:34%;--w:min(42vw,275px);--r:.4deg}
  .book-card[data-book="cuotas"]{--x:78%;--y:40%;--w:min(38vw,250px);--r:8deg}
  .book-card[data-book="cuidado"]{--x:102%;--y:48%;--w:min(36vw,230px);--r:16deg}
  [data-vista="detail"] .stage{position:relative;min-height:100svh}
  [data-vista="detail"] .book-card.selected{
    left:50%;top:48svh;width:min(52vw,280px);
  }
  [data-vista="detail"] .workspace{margin:0 auto;padding:1.2rem 1.1rem 3rem;max-width:720px}
  .close-button{top:86px}  /* debajo de la barra: arriba tapaba el logo del gobierno */
  .sello-cuota{animation-duration:calc(var(--d) * 1.25)}
}
@media (max-width:560px){
  .fm-topbar .logo-css{height:30px}
  .fm-topbar .logo-gob{height:26px}
  .fm-topbar .divisor{height:24px}
  .ticket-button{display:none}
  .hero-word{top:17vh;font-size:min(34vw,19vh)}
  .book-card[data-book="cupos"]{--x:-6%;--y:50%;--w:42vw;--r:-18deg}
  .book-card[data-book="semaforo"]{--x:18%;--y:43%;--w:46vw;--r:-9deg}
  .book-card[data-book="receta"]{--x:50%;--y:38%;--w:52vw;--r:.6deg}
  .book-card[data-book="cuotas"]{--x:82%;--y:43%;--w:46vw;--r:9deg}
  .book-card[data-book="cuidado"]{--x:106%;--y:50%;--w:42vw;--r:18deg}
  [data-vista="detail"] .book-card.selected{width:min(67vw,315px)}
  .close-button{top:76px;width:48px;height:48px}
  /* 360 px: logo CSS + «Cuotas Claras» + 2 botones de 44 px; el del gobierno queda en escritorio */
  .fm-topbar{padding:12px 14px;gap:.5rem}
  .fm-topbar .logo-gob,.fm-topbar .divisor{display:none}
  .fm-topbar .logo-css{height:24px}
  .brand{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nav-actions{gap:8px}
  /* pestañas: las 5 caben sin cortar la última */
  .pasos-in{gap:4px;padding:.45rem .5rem}
  .tab{font-size:12px;min-height:50px;padding:.3rem .15rem;border-radius:16px}
  /* sellos: la mitad y más chicos, para no tapar el texto en pantalla angosta */
  .sello-cuota:nth-child(even){display:none}
  .sello-cuota{width:calc(var(--s) * .8);height:calc(var(--s) * .98);font-size:calc(var(--s) * .28)}
  .menu-link{font-size:clamp(32px,11vw,52px)}
  .menu-logos img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .sello-cuota{animation:none!important;opacity:.35}
  .book-card,.book,.front-cover,.page-fan i,.hero-word,.workspace,.close-button{
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
}

/* Tema claro: las tarjetas son papel pero lo suelto queda sobre el marino del escenario.
   Antes del 26-sep había textos a 1.0-2.3:1 (medido); aquí cada uno toma el color de su fondo real. */
[data-tema="claro"] .workspace .aviso-proto .marco,
[data-tema="claro"] .workspace .aviso-proto .marco b,
[data-tema="claro"] .workspace .nota-kpi{color:var(--muted)}
[data-tema="claro"] .workspace .aviso-proto .marco b{color:var(--paper)}
[data-tema="claro"] .workspace .caja h2{color:#7a5c2e}
[data-tema="claro"] .workspace .hallazgo h3,
[data-tema="claro"] .workspace .cita-legal{color:#29251d}
.workspace .nota-seccion a{color:var(--pink-bright)}  /* era el azul por defecto: 1.4:1 sobre el marino */
[data-tema="claro"] .workspace .nota-seccion a{color:#7a5c2e}
/* Escritorio: el texto vive a la derecha; los sellos caen solo del lado del libro (antes cruzaban el texto). */
@media (min-width:901px){ .sello-cuota{left:calc(var(--x) * .42)} }

/* ── dedo (26-sep): solo pantallas táctiles; el mouse de escritorio no cambia ── */
@media (hover:none){ .book-card:hover{--hover-y:0px} }        /* hover pegado tras tocar */
@media (pointer:coarse){ .stage{touch-action:pan-y pinch-zoom} } /* el gesto lateral es de los libros, no del scroll */
/* mientras el dedo arrastra, los libros lo siguen casi sin retraso (misma lista que su transition) */
[data-arrastre] .book-card{transition-duration:1100ms,1100ms,1100ms,500ms,500ms,90ms}
[data-arrastre] .hero-word{transition-duration:700ms,700ms,120ms}
[data-arrastre][data-vista="detail"] .book-card.selected .book{transition-duration:60ms}