/**
 * Caviar — Advisory (portada + cuatro páginas hijas).
 *
 * 12 oct 2026, 2ª vuelta. Ningún color vive aquí: el fondo y el color del
 * texto los pone cada página desde su panel «Caviar — this page» (color de
 * fondo, velo, Text colour light/dark), igual que el resto del sitio. Este
 * archivo sólo pone la tipografía y la colocación, en función de --fg, que
 * sale de --caviar-texto (el mando «Text colour» de la página).
 *
 * Todo va prefijado con body.caviar-ad para ganarle a la lectura del tema.
 */

/* El escenario: la página es una pantalla, como Studio */
@media (min-width:901px){
  body.caviar-ad .caviar-cuerpo:not(#_){max-width:none !important;overflow:hidden !important;height:100%;-webkit-mask-image:none !important;mask-image:none !important}
}

/* Los tres tonos del texto salen del color que elige la página */
body.caviar-ad .ad{
  --fg:var(--caviar-texto,#111);
  --mu:color-mix(in srgb,var(--fg) 74%,transparent);
  --lo:color-mix(in srgb,var(--fg) 47%,transparent);
  --ra:color-mix(in srgb,var(--fg) 16%,transparent);
  color:var(--fg);box-sizing:border-box;padding-left:clamp(48px,5.5vw,104px);padding-right:clamp(24px,3vw,56px);
  display:flex;flex-direction:column;height:calc(100vh - 7vh);font-size:16px;line-height:1.55
}
/* Los encabezados y párrafos que vienen del editor no traen el traje del tema */
body.caviar-ad .ad :is(h1,h2,h3,p){color:inherit;opacity:1;max-width:none}
body.caviar-ad .ad h3.it{all:unset;display:block}
body.caviar-ad .ad :is(.sub,.lead,.sp-lead) p{font-size:inherit;line-height:inherit;color:inherit;margin:0 0 8px;max-width:none}
body.caviar-ad .ad :is(.sub,.lead,.sp-lead) p:last-child{margin-bottom:0}
body.caviar-ad .ad :is(.sub,.lead,.sp-lead,li,.qs div) a:not(.it a){color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── la portada ── */
body.caviar-ad .ad h1{font-size:38px;font-weight:600;margin:0 0 6px}
body.caviar-ad .ad .frase{font-size:22px;font-weight:400;line-height:1.3;margin:0 0 8px;max-width:46ch}
body.caviar-ad .ad .sub{margin:0 0 18px;max-width:70ch;font-size:15.5px;color:var(--mu)}
body.caviar-ad .ad .perfiles{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px;margin:30px 0 0;flex:1;align-content:start}
body.caviar-ad .ad .perfil{display:block;text-decoration:none;color:inherit;padding:0}
body.caviar-ad .ad .perfil h2{display:block;font-size:20px;font-weight:600;line-height:1.3;margin:0 0 4px;letter-spacing:0;text-transform:none}
body.caviar-ad .ad .perfil span{display:block;font-size:15px;line-height:1.45;color:var(--mu);max-width:44ch}
body.caviar-ad .ad .perfil em{display:inline-block;margin-top:8px;font-style:normal;font-size:14px;font-weight:600;border-bottom:1px solid currentColor}
body.caviar-ad .ad .perfil:hover h2{text-decoration:underline}
body.caviar-ad .ad .empezar{font-size:15px;margin:10px 0 0;color:var(--mu)}
body.caviar-ad .ad .empezar a{color:var(--fg);font-weight:600}

/* ── los perfiles ── */
body.caviar-ad .ad.perf{height:100%;padding-bottom:4px}
body.caviar-ad .ad.perf h1{margin:0 0 12px;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:0;text-transform:none}
body.caviar-ad .ad.perf h1 .kicker{display:block;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
body.caviar-ad .ad.perf h1 .claim{display:block;font-size:36px;line-height:1.12;font-weight:600;letter-spacing:-.015em;max-width:26ch}
body.caviar-ad .ad.perf .sub{color:var(--mu);font-size:16.5px;max-width:66ch;margin:0 0 22px}

body.caviar-ad .ad .cuerpo{display:grid;grid-template-columns:190px 1fr;gap:48px;flex:1 1 auto;min-height:0;margin-top:6px}
body.caviar-ad .ad .riel{list-style:none;margin:0;padding:0;border:0}
body.caviar-ad .ad .riel li{display:flex;gap:12px;align-items:baseline;padding:6px 0;cursor:pointer;color:var(--lo);font-size:15px}
body.caviar-ad .ad .riel li i{font-style:normal;font-size:11px;letter-spacing:.1em;width:18px}
body.caviar-ad .ad .riel li.on{color:var(--fg);font-weight:600}
body.caviar-ad .ad .riel li.on::after{content:"";flex:0 0 28px;height:1px;background:var(--fg);align-self:center;margin-left:6px}
body.caviar-ad .ad .riel li:focus-visible{outline:1px dashed currentColor;outline-offset:3px}
body.caviar-ad .ad .ventana{overflow:hidden;min-height:0}
body.caviar-ad .ad .pista{display:flex;height:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
body.caviar-ad .ad .panel{flex:0 0 100%;box-sizing:border-box;padding:2px 8px 0 0;display:flex;flex-direction:column;min-height:0}
/* El rótulo de cada pestaña es un H2 de verdad (para los buscadores); en escritorio lo dice el raíl */
body.caviar-ad .ad .panel-rot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.caviar-ad .ad .lead{margin:0 0 18px;font-size:16px;color:var(--fg);max-width:60ch}

/* motivos */
body.caviar-ad .ad .motivos{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;margin:0;padding:0;list-style:none}
body.caviar-ad .ad .motivos li{font-size:14px;line-height:1.4;color:var(--mu)}
body.caviar-ad .ad .motivos li b{display:block;font-size:17px;font-weight:600;color:var(--fg);margin-bottom:2px;letter-spacing:-.005em}
/* servicios */
body.caviar-ad .ad .serv{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;margin:0 0 10px;padding:0;list-style:none}
body.caviar-ad .ad .serv li{padding:0;font-size:14px;line-height:1.45;color:var(--mu)}
body.caviar-ad .ad .serv li.ancha{grid-column:1/-1}
body.caviar-ad .ad .serv .it :is(a,b){display:inline-block;color:var(--fg);font-weight:600;font-size:15px;text-decoration:none;margin-bottom:2px}
body.caviar-ad .ad .serv .it a::after{content:" →";font-weight:400;opacity:.5}
/* pasos */
body.caviar-ad .ad .pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:4px 0 14px;padding:0;list-style:none;counter-reset:p}
body.caviar-ad .ad .pasos li{font-size:14px;line-height:1.45;color:var(--mu)}
body.caviar-ad .ad .pasos li b{display:block;color:var(--fg);font-size:15px;margin-bottom:2px}
body.caviar-ad .ad .pasos li b::before{counter-increment:p;content:counter(p);display:block;font-size:32px;font-weight:300;line-height:1;color:var(--lo);margin-bottom:8px}
/* preguntas */
body.caviar-ad .ad .qs{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;margin:4px 0 14px}
body.caviar-ad .ad .qs div{font-size:14px;line-height:1.45;color:var(--mu)}
body.caviar-ad .ad .qs b{display:block;color:var(--fg);font-size:15px;margin-bottom:2px}
body.caviar-ad .ad.perf.k-collectors .qs div:first-child{grid-column:1/-1;column-count:2;column-gap:48px}
body.caviar-ad .ad.perf.k-collectors .qs div:first-child .it{column-span:all}
/* The Spine: el logo arriba, una frase, los bloques con aire y el enlace que se ve */
body.caviar-ad .ad .spine{display:flex;flex-direction:column;gap:0}
body.caviar-ad .ad .spine .sp-logo{display:block;align-self:flex-start;height:34px;width:auto;color:var(--fg);margin:0 0 12px}
body.caviar-ad .ad .spine .sp-lead{margin:0 0 22px;font-size:17px;line-height:1.45;color:var(--fg);max-width:46ch}
body.caviar-ad .ad .spine .sp-bloques{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;margin:0 0 22px;padding:0;list-style:none}
body.caviar-ad .ad .spine .sp-bloques li{font-size:14px;line-height:1.5;color:var(--mu)}
body.caviar-ad .ad .spine .sp-bloques b{display:block;margin:0 0 3px;font-size:15px;font-weight:600;color:var(--fg)}
body.caviar-ad .ad .spine .sp-ver{align-self:flex-start;font-size:15px;font-weight:600;color:var(--fg);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}

/* el cierre: el botón, junto a su frase (Samuel, 12 oct) */
body.caviar-ad .ad .cierre{display:flex;align-items:center;justify-content:flex-start;gap:28px;margin:auto 0 0;padding:20px 0 0}
body.caviar-ad .ad .cierre span{color:var(--mu);font-size:16px}
body.caviar-ad .ad .boton{display:inline-block;height:39px;line-height:39px;padding:0 24px;border-radius:999px;background:var(--fg);color:var(--bg,#fff)!important;font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}

/* ═══ móvil: sin raíl ni pista; los paneles uno debajo de otro con su rótulo ═══ */
@media (max-width:900px){
  body.caviar-ad .ad{height:auto;padding-left:22px;padding-right:22px;padding-bottom:40px}
  body.caviar-ad .ad h1{font-size:30px}
  body.caviar-ad .ad .frase{font-size:19px}
  body.caviar-ad .ad.perf h1 .kicker{font-size:13px}
  body.caviar-ad .ad.perf h1 .claim{font-size:28px}
  body.caviar-ad .ad .perfiles{grid-template-columns:1fr;gap:28px}
  body.caviar-ad .ad .cuerpo{display:block}
  body.caviar-ad .ad .riel{display:none}
  body.caviar-ad .ad .ventana{overflow:visible}
  body.caviar-ad .ad .pista{display:block;transform:none !important;height:auto}
  body.caviar-ad .ad .panel{padding:0;margin:0 0 30px}
  body.caviar-ad .ad .panel-rot{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lo)}
  body.caviar-ad .ad :is(.serv,.qs,.motivos,.spine .sp-bloques){grid-template-columns:1fr}
  body.caviar-ad .ad .pasos{grid-template-columns:1fr 1fr}
  body.caviar-ad .ad.perf.k-collectors .qs div:first-child{column-count:1}
  body.caviar-ad .ad .cierre{flex-direction:column;align-items:flex-start;gap:14px}
  body.caviar-ad .ad .boton{white-space:normal;height:auto;line-height:1.3;padding:11px 22px}
}