/* ═══════════════════════════════════════════════════════════════
   CALIPPSER — sistema de diseño
   Petróleo profundo, menta y arena. Navegación en riel lateral:
   el contenido se lee como una columna editorial, no como una web.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --base:#0B1A1C;
  --panel:#10262A;
  --panel-2:#153036;
  --line:#1C383D;
  --line-2:#2A4C53;
  --sand:#E8E4DA;
  --sand-2:#9FAAA8;
  --mute:#74837F;
  --accent:#3FD9A8;
  --accent-2:#0F3A33;
  --accent-ink:#04211C;
  --ok:#3FD9A8;
  --wait:#E0B350;
  --bad:#F2705F;

  --fd:"Space Grotesk","Public Sans",system-ui,sans-serif;
  --fs:"Public Sans",system-ui,-apple-system,sans-serif;

  --rail:264px;
  --wrap:920px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --bar:66px;
  /* Alto homologado de todo control de una linea. */
  --ctrl:3.25rem;

  --r:6px;
  --r-lg:10px;

  --ease:cubic-bezier(.3,.8,.3,1);
  --t:.22s var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body.cal{
  margin:0;background:var(--base);color:var(--sand);
  font-family:var(--fs);font-size:1rem;line-height:1.7;
  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis:none;
  -webkit-tap-highlight-color:transparent;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:600;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
p,li,dd,figcaption,label,small{text-wrap:pretty}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
@supports (scrollbar-color: auto){html{scrollbar-color:var(--line-2) var(--base);scrollbar-width:thin}}

.cal-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:.75rem 1.25rem;border-radius:var(--r);font-weight:600}
.cal-skip:focus{left:1rem;top:1rem}

.cal-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.cal-i{fill:currentColor;flex:none}

/* ── Escala tipográfica ──────────────────────────────────────── */
.cal-d1{font-size:clamp(1.875rem,5.2vw,4rem);letter-spacing:-.03em;line-height:1.06}
.cal-d2{font-size:clamp(1.75rem,3.2vw,2.5rem);letter-spacing:-.025em}
.cal-d3{font-size:clamp(1.1875rem,1.8vw,1.5rem)}
.cal-lead{font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:var(--sand-2);line-height:1.7;max-width:58ch}
.cal-eyebrow{display:block;font-family:var(--fs);font-size:.75rem;color:var(--accent);margin-bottom:.875rem}
.cal-num,.cal-tbl .n,.cal-stat__v,.cal-ticker__v,.cal-quote__r b,.cal-kv dd,.cal-otp input{
  font-family:var(--fs);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ── Botones ─────────────────────────────────────────────────── */
.cal-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8125rem 1.25rem;font-size:.9375rem;font-weight:600;
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t)}
.cal-btn--solid{background:var(--accent);color:var(--accent-ink)}
.cal-btn--solid:hover{background:#5BE6BB}
.cal-btn--ghost{background:transparent;color:var(--sand);border-color:var(--line-2)}
.cal-btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.cal-btn--quiet{background:var(--panel-2);color:var(--sand);border-color:var(--line)}
.cal-btn--quiet:hover{border-color:var(--line-2)}
.cal-btn--wide{width:100%}
.cal-btn--lg{padding:1rem 1.75rem;font-size:1rem}
.cal-btn--danger{background:transparent;color:var(--bad);border-color:rgba(242,112,95,.35)}
.cal-btn--danger:hover{background:rgba(242,112,95,.1);border-color:var(--bad)}
.cal-btn[disabled],.cal-btn:disabled{background:var(--panel);color:var(--mute);border-color:var(--line);
  cursor:not-allowed;pointer-events:auto}

/* ── Riel lateral ────────────────────────────────────────────── */
.cal-rail{position:fixed;inset-block:0;inset-inline-start:0;width:var(--rail);z-index:90;
  display:none;flex-direction:column;padding:2rem 1.5rem;
  background:var(--panel);border-inline-end:1px solid var(--line)}
.cal-rail__nav{display:grid;gap:.125rem;margin-top:2.5rem}
.cal-rail__nav a{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:var(--r);
  font-size:.9375rem;color:var(--sand-2);transition:background var(--t),color var(--t)}
.cal-rail__nav a:hover{background:var(--panel-2);color:var(--sand)}
.cal-rail__nav em{font-family:var(--fs);font-size:.6875rem;font-style:normal;color:var(--mute);min-width:1.25rem}
.cal-rail__foot{margin-top:auto;display:grid;gap:.625rem}
.cal-rail__meta{font-size:.8125rem;color:var(--mute);line-height:1.6;margin-top:1.25rem}

.cal-logo{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--fd);font-weight:700;
  letter-spacing:-.025em;font-size:1.125rem}
.cal-mark{width:1.5rem;height:1.5rem;flex:none;color:var(--accent)}
.cal-word{letter-spacing:-.02em}

/* ── Barra superior (fuera de escritorio) ────────────────────── */
.cal-head{position:fixed;inset:0 0 auto;z-index:90;height:var(--bar);
  background:rgba(11,26,28,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.cal-head__in{height:100%;display:flex;align-items:center;gap:1rem;padding-inline:var(--gut);
  max-width:var(--wrap);margin:0 auto}
.cal-head__act{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}

.cal-lang{display:flex;align-items:center;gap:.375rem;font-family:var(--fs);font-size:.75rem;color:var(--mute)}
.cal-lang a{padding:.25rem .375rem;border-radius:3px;transition:color var(--t),background var(--t)}
.cal-lang a:hover{color:var(--sand)}
.cal-lang a.is-on{color:var(--accent-ink);background:var(--accent)}
.cal-lang--foot{margin-top:1rem;align-self:start;justify-self:start;inline-size:fit-content}

.cal-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;
  width:2.5rem;height:2.5rem;flex:none;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--r);cursor:pointer;transition:border-color var(--t)}
.cal-burger:hover{border-color:var(--accent)}
.cal-burger span{display:block;width:16px;height:1.5px;background:var(--sand)}

.cal-close{display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.5rem;block-size:2.5rem;flex:none;background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--sand);cursor:pointer;
  transition:border-color var(--t)}
.cal-close:hover{border-color:var(--accent)}

/* ── Menú desplegado ─────────────────────────────────────────── */
.cal-menu{position:fixed;inset:0;z-index:120;background:var(--base);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateY(-8px);opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.cal-menu[hidden]{display:none}
.cal-menu.is-on{opacity:1;transform:none}
.cal-menu__bar{height:var(--bar);display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);border-bottom:1px solid var(--line);flex:none}
.cal-menu__nav{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem var(--gut)}
.cal-menu__nav a{display:flex;align-items:baseline;gap:1rem;padding:.875rem 0;
  font-family:var(--fd);font-size:clamp(1.625rem,7vw,2.5rem);font-weight:600;letter-spacing:-.025em;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),color var(--t);transition-delay:var(--d,0s)}
.cal-menu.is-on .cal-menu__nav a{opacity:1;transform:none}
.cal-menu__nav a:hover{color:var(--accent)}
.cal-menu__nav em{font-family:var(--fs);font-size:.75rem;font-style:normal;color:var(--mute)}
.cal-menu__foot{padding:0 var(--gut) 3rem;display:grid;gap:.75rem;flex:none;max-width:24rem}
.cal-menu__meta{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;margin-top:1rem;font-size:.875rem;color:var(--sand-2)}

/* ── Secciones ───────────────────────────────────────────────── */
.cal-sec{padding-block:clamp(3.5rem,8vw,6.5rem);position:relative}
.cal-sec--line{border-top:1px solid var(--line)}
.cal-head-block{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:58ch}

[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── Portada ─────────────────────────────────────────────────── */
/* El relleno superior tiene que superar SIEMPRE la barra fija (66 px);
   con el clamp solo, en móvil el rótulo quedaba por debajo de la barra. */
.cal-hero{position:relative;overflow:hidden;
  padding-block:max(clamp(3.5rem,9vw,7rem),calc(var(--bar) + 1.5rem)) clamp(3rem,6vw,5rem)}
.cal-hero::before{content:"";position:absolute;inset:-30% -10% auto;height:70vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 55% at 22% 30%, rgba(63,217,168,.16), transparent 70%),
    radial-gradient(38% 48% at 78% 18%, rgba(63,217,168,.09), transparent 72%);
  filter:blur(12px);animation:cal-aurora 22s var(--ease) infinite alternate}
@keyframes cal-aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}}
.cal-hero__in{position:relative;z-index:1}
.cal-hero h1{margin-block:1rem 1.25rem;max-width:17ch}
.cal-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

.cal-ticker{display:grid;gap:0;margin-top:clamp(2.5rem,5vw,3.5rem);border-block:1px solid var(--line)}
.cal-ticker__i{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.cal-ticker__i:last-child{border-bottom:0}
.cal-ticker__k{font-size:.875rem;color:var(--sand-2)}
.cal-ticker__v{font-size:1.0625rem;color:var(--sand)}
.cal-ticker__v small{font-size:.8125rem;color:var(--mute);margin-inline-start:.375rem;font-family:var(--fs)}

/* ── Listado de servicios: filas, no tarjetas ────────────────── */
.cal-grid{display:grid;gap:0;border-top:1px solid var(--line)}
.cal-card{display:grid;gap:.625rem;padding:clamp(1.5rem,3vw,2rem) 0;border-bottom:1px solid var(--line);
  grid-template-columns:1fr;transition:padding-inline-start var(--t)}
.cal-card:hover{padding-inline-start:.75rem}
.cal-card__ic{width:2.25rem;height:2.25rem;display:grid;place-items:center;color:var(--accent)}
.cal-card h3{font-size:1.1875rem}
.cal-card p{color:var(--sand-2);font-size:.9375rem;max-width:56ch}
.cal-card__tag{font-family:var(--fs);font-size:.8125rem;color:var(--accent)}

/* ── Proceso ─────────────────────────────────────────────────── */
.cal-steps{display:grid;gap:0;counter-reset:paso}
.cal-step{display:grid;gap:.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line);
  grid-template-columns:auto 1fr;column-gap:1.5rem}
.cal-step__n{grid-row:span 3;font-family:var(--fs);font-size:.8125rem;color:var(--accent);padding-top:.25rem}
.cal-step h3{font-size:1.0625rem}
.cal-step p{color:var(--sand-2);font-size:.9375rem}

/* ── Compromisos ─────────────────────────────────────────────── */
.cal-split{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start}
/* ── El precio, en el riel ────────────────────────────────────
   El trabajo del riel es NAVEGAR; el precio es un apoyo. Con fondo,
   borde y 30 px pesaba 4.7x más que un enlace del menú y se lo comía.
   Se quita la tarjeta —era lo que lo volvía un objeto— y la cifra baja
   a un escalón por encima del menú, no cuatro. */
.cal-rail__rate{margin-block:auto 1.25rem;padding-block-start:.875rem;
  border-top:1px solid var(--line)}
.cal-rail__rate-k{display:block;font-size:.75rem;color:var(--sand-2)}
.cal-rail__rate-v{display:block;margin-block:.1875rem .1875rem;
  font-family:var(--fs);font-size:1.1875rem;font-weight:600;line-height:1.2;
  color:var(--sand-2);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  transition:color .45s var(--ease)}
.cal-rail__rate-m{display:flex;align-items:center;gap:.3125rem;flex-wrap:wrap;
  margin-block-start:.4375rem}
/* Píldoras que se funden con el panel: el relleno es un degradado de
   opacidad muy baja, sin borde. Agrupan el dato sin pesar más que el
   menú, que es quien debe mandar en el riel. */
.cal-rail__rate-m em{display:inline-flex;align-items:center;font-style:normal;
  padding:.1875rem .4375rem;border-radius:var(--r);
  /* Horizontal y muriendo en transparente: la píldora no tiene borde
     derecho, se disuelve en el panel en lugar de recortarse contra él. */
  background:linear-gradient(90deg,
    rgba(232,228,218,.11) 0%,
    rgba(232,228,218,.06) 48%,
    rgba(232,228,218,0) 100%);
  font-family:var(--fs);font-size:.6875rem;line-height:1.5;color:var(--sand-2);
  white-space:nowrap}
/* Al cambiar la cifra se tiñe un instante: demuestra que está viva sin
   añadir ni una luz ni un punto. */
.cal-rail__rate.is-fresh .cal-rail__rate-v{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .cal-rail__rate-v{transition:none}
  .cal-rail__rate.is-fresh .cal-rail__rate-v{color:var(--sand-2)}
}

/* ── Grano del riel ───────────────────────────────────────────
   Textura, no adorno: le da materia al panel plano y empata con el
   grano de las fotografías del hero. El ruido lo genera el navegador
   (no hay archivo ni petición) y se DESVANECE hacia abajo, así que
   muere en el color sólido del panel en lugar de cortarse. */
/* OJO: .cal-rail ya es position:fixed más arriba. Aquí SÓLO se aísla el
   apilado, sin volver a declarar position — hacerlo tumba el riel. */
.cal-rail{isolation:isolate}
.cal-rail::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E");
  background-size:200px 200px;
  opacity:.40;mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 78%)}
@media (prefers-reduced-transparency:reduce){
  .cal-rail::before{display:none}
}

/* ── Hero con carrusel de fondo ───────────────────────────────
   La fotografía va DETRÁS del titular, no al lado: el texto manda y
   la imagen respira a la derecha, donde no hay nada escrito.
   Estructuralmente distinto del hero partido de narveth.com. */
.cal-hero{position:relative;isolation:isolate;overflow:hidden}
.cal-slides{position:absolute;inset:0;z-index:-1}
.cal-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease),visibility 0s linear .9s}
.cal-slide.is-on{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
.cal-slide img{inline-size:100%;block-size:100%;object-fit:cover;object-position:60% 50%;display:block}
/* Velo: opaco donde vive el texto, casi nulo donde vive la foto. */
.cal-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* Dos capas: la horizontal protege el titular; la vertical protege la
     cinta de datos, que se apoya en la parte baja y sobre el rack de
     servidores caía en 3.69:1. La foto sigue respirando arriba a la derecha. */
  background:
    linear-gradient(180deg,rgba(11,26,28,0) 40%,rgba(11,26,28,.58) 72%,rgba(11,26,28,.88) 100%),
    linear-gradient(90deg,rgba(11,26,28,.975) 0%,rgba(11,26,28,.955) 40%,
      rgba(11,26,28,.66) 68%,rgba(11,26,28,.44) 100%)}

/* Sobre fotografía el gris de párrafo no llega a 4.5:1 — medido en 3.40.
   En el hero la entrada va en el tono claro. */
.cal-hero .cal-lead{color:var(--sand)}

.cal-slider__foot{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  margin-block-start:clamp(1.75rem,3vw,2.25rem)}
.cal-slider__cap{margin:0;font-size:.9375rem;color:var(--sand-2);max-width:46ch;flex:1 1 20rem}
.cal-slider__dots{display:flex;gap:0;flex:none}
/* El punto pintado sigue midiendo 7 px, pero el blanco de toque llega a
   38×27: el relleno agranda el mando y `background-clip:content-box`
   deja el punto del tamaño de siempre. */
.cal-slider__dots button{inline-size:1.4375rem;block-size:2.4375rem;
  padding:1rem .5rem;border:0;cursor:pointer;background-clip:content-box;
  border-radius:999px;background-color:rgba(232,228,218,.32);
  transition:inline-size var(--t),background-color var(--t)}
.cal-slider__dots button[aria-selected="true"]{inline-size:2.375rem;background-color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .cal-slide{transition:none}
  .cal-slider__dots button{transition:none}
}
@media (max-width:719px){
  /* En vertical la foto queda detrás del texto entero: se oscurece parejo. */
  .cal-slide::after{background:linear-gradient(180deg,rgba(11,26,28,.90) 0%,rgba(11,26,28,.94) 60%,rgba(11,26,28,.97) 100%)}
  .cal-slide img{object-position:50% 45%}
}

/* ── El expediente fotografiado, con las piezas señaladas ─────
   Las marcas son datos —dicen QUÉ es cada hoja—, no adorno. */
/* La foto comparte canto con los filetes y la banda de las filas: en esta
   sección el texto vive en la columna y TODO lo gráfico se sale 1rem a cada
   lado. Antes la foto iba 16 px por dentro y se notaba. */
.cal-shot{position:relative;margin:0 -1rem clamp(2rem,4vw,2.75rem);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cal-shot img{display:block;inline-size:100%;block-size:auto}
/* Marcas de la fotografía. Por omisión flotan apenas —2 px, muy lento
   y desfasado entre ellas— para que la imagen se sienta viva sin ruido.
   Al señalar una marca o su fila de abajo, ambas se encienden: la foto
   y la lista son el mismo instrumento leído de dos maneras. */
/* Grupo de anotación: hilo y marcas flotan JUNTOS, como una
   constelación que deriva. Cada marca añade encima una deriva propia
   muy pequeña para que no se lean como una pieza rígida. */
.cal-pins{position:absolute;inset:0;animation:cal-deriva 9s ease-in-out infinite}
@keyframes cal-deriva{
  0%,100%{transform:translate(0,0)}
  50%    {transform:translate(0,-6px)}
}
.cal-thread{position:absolute;inset:0;inline-size:100%;block-size:100%;
  pointer-events:none;overflow:visible}
.cal-thread polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-opacity .25s var(--ease)}
/* El halo oscuro va debajo y hace legible el hilo sobre el papel. */
.cal-thread__halo{stroke:#04211C;stroke-width:3;stroke-opacity:.45}
.cal-thread__line{stroke:#FFFFFF;stroke-width:1.25;stroke-opacity:.7}
.cal-shot.is-hunting .cal-thread__line{stroke-opacity:.95}

.cal-pin{position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.5rem;cursor:default;
  animation:cal-flota 6s ease-in-out infinite;
  transition:filter .25s var(--ease)}
.cal-pin:nth-of-type(2){animation-delay:-1.4s}
.cal-pin:nth-of-type(3){animation-delay:-2.9s}
.cal-pin:nth-of-type(4){animation-delay:-4.3s}
/* El imán escribe --mx/--my y la flotación los SUMA. Si el JS tocara
   `transform` directamente, la animación lo pisaría: una animación CSS
   gana sobre el estilo en línea de la propiedad que anima. */
@keyframes cal-flota{
  0%,100%{transform:translate(calc(-50% + var(--mx,0px)),calc(-50% + var(--my,0px)))}
  50%    {transform:translate(calc(-50% + var(--mx,0px)),calc(-50% - 2px + var(--my,0px)))}
}
.cal-pin b{inline-size:1.75rem;block-size:1.75rem;flex:none;display:grid;place-items:center;
  border-radius:var(--r-pill,999px);background:var(--accent);color:var(--accent-ink);
  font-family:var(--fs);font-size:.75rem;font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cal-pin i{font-style:normal;font-family:var(--fs);font-size:.75rem;font-weight:600;
  color:var(--sand);background:rgba(11,26,28,.7);padding:.25rem .5rem;
  border-radius:var(--r);white-space:nowrap;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s var(--ease),color .25s var(--ease)}

/* Encendida: por ratón sobre la marca, por foco, o desde su fila. */
.cal-pin:hover,.cal-pin:focus-visible,.cal-pin.is-on{outline:0}
.cal-pin:hover b,.cal-pin:focus-visible b,.cal-pin.is-on b{
  transform:scale(1.18);box-shadow:0 0 0 5px rgba(63,217,168,.22)}
.cal-pin:hover i,.cal-pin:focus-visible i,.cal-pin.is-on i{
  background:var(--accent);color:var(--accent-ink)}

/* Las demás marcas se apagan para que la señalada destaque. */
.cal-shot.is-hunting .cal-pin:not(.is-on):not(:hover){filter:opacity(.42)}

/* La fila que corresponde. */
/* El resaltado necesita aire: se añade relleno lateral y se compensa
   con margen negativo, así la banda respira sin mover ni un píxel el
   texto respecto a las demás filas. */
/* El relleno lateral se declara en la regla base (más abajo, con el
   `padding` abreviado); aquí sólo se compensa con margen para que el
   texto quede alineado con el resto de la columna. */
/* Sin radio: la esquina redondeada no cuadraba con las líneas
   separadoras, que van rectas de lado a lado. La banda del resaltado
   comparte ahora exactamente el ancho y los cantos del filete. */
.cal-req{margin-inline:-1rem;
  transition:background .25s var(--ease)}
.cal-req.is-on{background:rgba(63,217,168,.06)}
.cal-req.is-on .cal-req__n{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .cal-pin,.cal-pins{animation:none}
  .cal-pin b,.cal-pin i,.cal-req{transition:none}
}
@media (max-width:719px){
  /* A este ancho las etiquetas se pisan: queda el número, que ya casa
     con la numeración de la lista de abajo. */
  .cal-pin i{display:none}
  .cal-pin b{inline-size:1.5rem;block-size:1.5rem;font-size:.6875rem}
}

/* Número de la fila, para que la lista y la foto se lean juntas. */
.cal-req__n{font-family:var(--fs);font-size:.75rem;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums lining-nums}

/* ── Los documentos del expediente ────────────────────────────
   Filas separadas por filete, sin tarjeta ni sombra: la evidencia
   propia de Calippser es la lista, no una retícula de cajas. */
/* El filete de arriba lo dibujaba el CONTENEDOR, que no lleva el margen
   negativo de las filas: esa línea salía 32 px más corta que el resto.
   Se pasa a la primera fila, que sí comparte caja con las demás. */
.cal-reqs{display:grid;gap:0}
.cal-req:first-child{border-top:1px solid var(--line)}
.cal-req{display:grid;gap:.625rem;padding:1.5rem 1rem;border-bottom:1px solid var(--line)}
.cal-req__h{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cal-req__ic{color:var(--accent);display:grid;place-items:center;flex:none}
.cal-req h3{font-size:1.0625rem}
.cal-req__src{font-family:var(--fs);font-size:.75rem;color:var(--accent);
  border:1px solid var(--accent-2);border-radius:var(--r);padding:.1875rem .5rem;
  white-space:nowrap}
.cal-req__body{display:grid;gap:.375rem}
.cal-req__que{color:var(--sand);font-size:.9375rem}
.cal-req p{color:var(--sand-2);font-size:.9375rem;max-width:62ch}
@media (min-width:860px){
  .cal-req{grid-template-columns:minmax(0,16rem) minmax(0,1fr);column-gap:2.5rem;align-items:start}
  .cal-req__h{align-items:flex-start;flex-direction:column;gap:.5rem}
}

/* Las políticas, en una sola línea al pie de la sección. */
.cal-marco__links{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.625rem;
  font-size:.875rem;color:var(--sand-2)}
.cal-marco__links a{color:var(--sand-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2)}
.cal-marco__links a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.cal-marco__links span{color:var(--mute)}

.cal-list{display:grid;gap:0;border-top:1px solid var(--line)}
.cal-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.cal-list svg{color:var(--accent);margin-top:.25rem}
.cal-list strong{display:block;font-size:1rem;font-weight:600;margin-bottom:.25rem}
.cal-list span{color:var(--sand-2);font-size:.9375rem}

.cal-slab{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2rem)}
.cal-slab h3{font-size:1.125rem;margin-bottom:1.25rem}
.cal-kv{display:flex;justify-content:space-between;gap:1rem;padding:.8125rem 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.cal-kv:last-child{border-bottom:0}
.cal-kv dt{color:var(--sand-2)}
.cal-kv dd{margin:0;white-space:nowrap}
.cal-kv dd.is-prose{white-space:normal;font-family:var(--fs);text-align:end}

/* ── Formularios ─────────────────────────────────────────────── */
.cal-field{display:grid;gap:.5rem;margin-bottom:1.25rem;align-content:start}
.cal-field > label{font-size:.875rem;font-weight:600;color:var(--sand)}
.cal-field small{font-size:.8125rem;color:var(--mute)}
.cal-in,.cal-sel,.cal-ta{width:100%;background:var(--base);color:var(--sand);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.8125rem 1rem;
  font:400 .9375rem/1.4 var(--fs);transition:border-color var(--t)}
.cal-in:hover,.cal-sel:hover,.cal-ta:hover{border-color:var(--mute)}
.cal-in:focus,.cal-sel:focus,.cal-ta:focus{outline:none;border-color:var(--accent)}
.cal-in::placeholder,.cal-ta::placeholder{color:var(--mute)}
.cal-ta{min-height:7.5rem;resize:vertical}
.cal-sel{appearance:none;padding-inline-end:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--sand-2) 50%),linear-gradient(135deg,var(--sand-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.cal-in--num{font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}

.cal-amount{position:relative}
.cal-amount__cur{position:absolute;inset-inline-start:1rem;inset-block:0;display:flex;align-items:center;
  font:600 .75rem/1 var(--fs);color:var(--mute);pointer-events:none}
.cal-amount .cal-in{padding-inline-start:3rem}

.cal-file{position:relative;display:block;border:1px dashed var(--line-2);border-radius:var(--r);
  padding:1.125rem;cursor:pointer;transition:border-color var(--t),background var(--t)}
.cal-file:hover{border-color:var(--accent);background:var(--panel)}
.cal-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.cal-file__b{display:flex;align-items:center;gap:.75rem;color:var(--sand-2);font-size:.875rem}
.cal-file__b svg{color:var(--accent)}
.cal-file.is-set{border-style:solid;border-color:var(--ok)}
.cal-file.is-set .cal-file__b{color:var(--sand)}

/* appearance:none hace que el input herede el relleno lateral de la página:
   sin padding:0 y min-* deja de ser cuadrado. */
.cal-check input,.cal-radio input{appearance:none;-webkit-appearance:none;
  padding:0;margin:0;flex:none;box-sizing:border-box;
  background-repeat:no-repeat;background-position:center;cursor:pointer}
.cal-check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.875rem;color:var(--sand-2);cursor:pointer}
.cal-check input{inline-size:1.125rem;block-size:1.125rem;min-inline-size:1.125rem;min-block-size:1.125rem;
  border:1px solid var(--line-2);border-radius:3px;background-color:var(--base);margin-block-start:.1875rem;
  transition:background-color var(--t),border-color var(--t)}
.cal-check input:checked{background-color:var(--accent);border-color:var(--accent);
  background-size:.8125rem .8125rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2304211C' d='m9.6 16.2-4.2-4.2-1.4 1.4 5.6 5.6L20.6 8 19.2 6.6z'/%3E%3C/svg%3E")}
.cal-check a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.cal-radios{display:grid;gap:.5rem}
.cal-radio{display:flex;align-items:center;gap:.875rem;border:1px solid var(--line-2);border-radius:var(--r);
  padding:.875rem 1rem;cursor:pointer;transition:border-color var(--t)}
.cal-radio input{inline-size:1rem;block-size:1rem;min-inline-size:1rem;min-block-size:1rem;
  border:1px solid var(--line-2);border-radius:50%;transition:border-color var(--t),background-image var(--t)}
.cal-radio:hover{border-color:var(--mute)}
.cal-radio input:checked{border-color:var(--accent);
  background-image:radial-gradient(circle at center,var(--accent) 0 42%,transparent 43%)}
.cal-radio:has(input:checked){border-color:var(--accent)}
.cal-radio b{font-size:.9375rem;font-weight:600}
.cal-radio span{display:block;font-size:.8125rem;color:var(--mute)}

.cal-net{display:flex;align-items:flex-start;gap:.875rem;padding:.9375rem 1rem;border-radius:var(--r);
  background:var(--accent-2);border:1px solid rgba(63,217,168,.22)}
.cal-net svg{color:var(--accent);flex:none;margin-top:.1rem}
.cal-net b{display:block;font-size:.9375rem;font-weight:600}
.cal-net > span > span{display:block;font-size:.8125rem;color:var(--sand-2);margin-top:.125rem}

.cal-hint{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.8125rem;color:var(--mute);line-height:1.5}
.cal-hint__n{font-family:var(--fs);flex:none;font-variant-numeric:tabular-nums}
[data-wallet-field].is-ok .cal-in{border-color:var(--ok)}
[data-wallet-field].is-ok .cal-hint__t{color:var(--ok)}
[data-wallet-field].is-warn .cal-in{border-color:var(--wait)}
[data-wallet-field].is-warn .cal-hint__t{color:var(--wait)}
[data-wallet-field].is-bad .cal-in{border-color:var(--bad)}
[data-wallet-field].is-bad .cal-hint__t,[data-wallet-field].is-bad .cal-hint__n{color:var(--bad)}
.cal-in--wallet{word-break:break-all}
small.is-bad{color:var(--bad)}

.cal-fieldset{border:0;padding:0;margin:0 0 2rem}
.cal-fieldset legend{padding:0;margin-bottom:1.125rem;font-family:var(--fs);font-size:.75rem;color:var(--accent);width:100%}

/* ── Avisos ──────────────────────────────────────────────────── */
.cal-note{display:flex;align-items:flex-start;gap:.75rem;padding:.9375rem 1.125rem;margin-bottom:1.5rem;
  border-radius:var(--r);font-size:.9375rem;line-height:1.55;border:1px solid var(--line-2);background:var(--panel)}
.cal-note svg{flex:none;margin-top:.15rem}
.cal-note--ok{border-color:rgba(63,217,168,.35)}
.cal-note--ok svg{color:var(--ok)}
.cal-note--wait{border-color:rgba(224,179,80,.35)}
.cal-note--wait svg{color:var(--wait)}
.cal-note--bad{border-color:rgba(242,112,95,.35)}
.cal-note--bad svg{color:var(--bad)}

.cal-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .5625rem;border-radius:3px;
  font-family:var(--fs);font-size:.75rem;border:1px solid currentColor;line-height:1.5}
.cal-chip--ok{color:var(--ok)}
.cal-chip--wait{color:var(--wait)}
.cal-chip--bad{color:var(--bad)}

/* ── Acceso ──────────────────────────────────────────────────── */
.cal-auth{min-height:100svh;display:grid;grid-template-columns:1fr}
.cal-auth__aside{display:none;position:relative;overflow:hidden;background:var(--panel);border-inline-end:1px solid var(--line)}
.cal-auth__aside::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 30% 25%, rgba(63,217,168,.14), transparent 70%);
  animation:cal-aurora 26s var(--ease) infinite alternate}
.cal-auth__quote{position:relative;z-index:2;margin-top:auto;padding:clamp(2rem,4vw,3rem);display:grid;gap:.875rem}
.cal-auth__quote p{font-family:var(--fd);font-size:clamp(1.25rem,2vw,1.75rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.25;max-width:22ch}
.cal-auth__quote span{color:var(--mute);font-size:.875rem}
.cal-auth__main{display:flex;flex-direction:column;padding:calc(var(--bar) + 2rem) var(--gut) 3rem;min-height:100svh}
.cal-auth__box{width:100%;max-width:26rem;margin:auto}
.cal-auth__box h1{font-size:clamp(1.75rem,3.2vw,2.25rem);margin-bottom:.625rem}
.cal-auth__box > p{color:var(--sand-2);margin-bottom:1.75rem}
.cal-auth__alt{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--sand-2)}
.cal-auth__alt a{color:var(--accent);font-weight:600}
.cal-auth__box--wide{max-width:42rem}
.cal-cols{display:grid;gap:0 1rem}

/* ── Tablero ─────────────────────────────────────────────────── */
.cal-app{padding:calc(var(--bar) + 2rem) 0 clamp(3rem,6vw,4.5rem);min-height:100svh}
.cal-app__head{display:grid;gap:.375rem;margin-bottom:2rem}
.cal-app__head h1{font-size:clamp(1.75rem,3.2vw,2.25rem)}
.cal-app__head p{color:var(--sand-2)}

.cal-stats{display:grid;gap:0;border-block:1px solid var(--line);margin-bottom:2rem}
.cal-stat{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.cal-stat:last-child{border-bottom:0}
.cal-stat__k{font-size:.875rem;color:var(--sand-2)}
.cal-stat__v{font-size:1.25rem}
.cal-stat__v small{font-size:.8125rem;color:var(--mute);font-family:var(--fs);margin-inline-start:.375rem}

.cal-panes{display:grid;gap:2rem;align-items:start}
.cal-pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cal-pane__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 1.375rem;border-bottom:1px solid var(--line)}
.cal-pane__h h2{font-size:1rem}
.cal-pane__b{padding:1.375rem}

.cal-quote{border:1px solid var(--line);border-radius:var(--r);background:var(--base);padding:1.125rem;margin-bottom:1.375rem;display:grid;gap:.6875rem}
.cal-quote__r{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.9375rem}
.cal-quote__r span{color:var(--sand-2)}
.cal-quote__out{border-top:1px solid var(--line);padding-top:.8125rem}
.cal-quote__r:first-child.cal-quote__out{border-top:0;padding-top:0}
.cal-quote__out b{font-size:1.375rem;color:var(--accent)}
.cal-quote__src{font-size:.8125rem;color:var(--mute);line-height:1.6}

.cal-tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.cal-tbl th{text-align:start;font-family:var(--fs);font-size:.6875rem;font-weight:500;color:var(--mute);
  padding:.8125rem 1.125rem;border-bottom:1px solid var(--line);white-space:nowrap}
.cal-tbl td{padding:.9375rem 1.125rem;border-bottom:1px solid var(--line);vertical-align:middle}
.cal-tbl tr:last-child td{border-bottom:0}
.cal-tbl tbody tr:hover{background:var(--panel-2)}
.cal-tbl .n{white-space:nowrap}
.cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.cal-empty{padding:2.75rem 1.5rem;text-align:center;color:var(--sand-2)}
.cal-empty svg{color:var(--mute);margin:0 auto 1rem}

.cal-otp{display:flex;gap:.5rem;justify-content:center;margin:1.5rem 0}
.cal-otp input{width:3rem;height:3.75rem;padding:0;text-align:center;background:var(--base);color:var(--sand);
  border:1px solid var(--line-2);border-radius:var(--r);font-size:1.375rem;transition:border-color var(--t)}
.cal-otp input:focus{outline:none;border-color:var(--accent)}
.cal-otp input.is-set{border-color:var(--mute)}

.cal-testbar{display:flex;align-items:flex-start;gap:.875rem;padding:1rem;margin-bottom:1.5rem;
  border:1px solid var(--wait);border-radius:var(--r);background:rgba(224,179,80,.08)}
.cal-testbar svg{color:var(--wait);flex:none;margin-top:.15rem}
.cal-testbar b{display:block;color:var(--wait);font-size:.875rem}
.cal-testbar span{display:block;color:var(--sand-2);font-size:.8125rem;margin:.25rem 0 .625rem}
.cal-testbar code{display:inline-block;font:500 1.375rem/1 var(--fs);letter-spacing:.26em;
  background:var(--base);border:1px solid var(--line-2);border-radius:var(--r);padding:.5rem .75rem}

/* ── Revisión de solicitudes ─────────────────────────────────── */
.cal-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:1.5rem;overflow-x:auto}
.cal-tab{flex:0 0 auto;padding:.75rem 1rem;background:transparent;border:0;border-bottom:2px solid transparent;
  cursor:pointer;font-size:.875rem;font-weight:600;color:var(--sand-2);
  display:flex;align-items:center;gap:.5rem;transition:color var(--t),border-color var(--t);white-space:nowrap}
.cal-tab:hover{color:var(--sand)}
.cal-tab.is-on{color:var(--accent);border-bottom-color:var(--accent)}
.cal-tab b{font-family:var(--fs);font-size:.6875rem;color:var(--mute)}
.cal-tab.is-on b{color:var(--accent)}

.cal-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.cal-search{position:relative;flex:1 1 15rem}
.cal-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.cal-search input{padding-inline-start:2.75rem}

.cal-drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(42rem,100%);z-index:130;
  background:var(--base);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .32s var(--ease);overflow:hidden}
.cal-drawer.is-on{transform:none}
.cal-drawer__h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.375rem;border-bottom:1px solid var(--line);flex:none;background:var(--panel)}
.cal-drawer__b{flex:1;overflow-y:auto;padding:1.375rem}
.cal-drawer__f{padding:1.125rem 1.375rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.625rem;flex:none;background:var(--panel)}
.cal-scrim{position:fixed;inset:0;z-index:125;background:rgba(11,26,28,.72);opacity:0;pointer-events:none;transition:opacity var(--t)}
.cal-scrim.is-on{opacity:1;pointer-events:auto}

.cal-block{margin-bottom:1.75rem}
.cal-block > h3{font-family:var(--fs);font-size:.75rem;color:var(--accent);margin-bottom:.875rem}

.cal-decision{display:flex;align-items:flex-start;gap:.875rem;padding:.9375rem 1.125rem;margin-bottom:1.5rem;
  border-radius:var(--r);font-size:.9375rem;border:1px solid var(--line);background:var(--panel)}
.cal-decision svg{flex:none;margin-top:.1rem}
.cal-decision b{display:block;font-weight:600}
.cal-decision > span > span{display:block;color:var(--mute);font-size:.8125rem;margin-top:.125rem}
.cal-decision--ok{border-color:rgba(63,217,168,.3)}
.cal-decision--ok svg{color:var(--ok)}
.cal-decision--bad{border-color:rgba(242,112,95,.3)}
.cal-decision--bad svg{color:var(--bad)}
.cal-decision--wait{border-color:rgba(224,179,80,.3)}
.cal-decision--wait svg{color:var(--wait)}

.cal-docs{display:grid;gap:.5rem;grid-template-columns:1fr}
.cal-doc{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);transition:border-color var(--t)}
.cal-doc:hover{border-color:var(--accent)}
.cal-doc svg{color:var(--accent);flex:none}
.cal-doc b{display:block;font-size:.875rem;font-weight:600}
.cal-doc span{font-size:.75rem;color:var(--mute)}

.cal-qa{display:grid;gap:0;border-top:1px solid var(--line)}
.cal-qa > div{display:grid;gap:.1875rem;padding:.8125rem 0;border-bottom:1px solid var(--line)}
.cal-qa dt{font-size:.8125rem;color:var(--mute)}
.cal-qa dd{margin:0;font-size:.9375rem}

.cal-log{display:grid;gap:0;font-size:.8125rem}
.cal-log > div{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.5625rem 0;border-bottom:1px solid var(--line)}
.cal-log time{font-family:var(--fs);color:var(--mute);white-space:nowrap}
.cal-log em{font-style:normal;color:var(--sand);font-weight:600}

.cal-spin{width:1.125rem;height:1.125rem;border:2px solid var(--line-2);border-top-color:var(--accent);
  border-radius:50%;animation:cal-rot .7s linear infinite;flex:none}
@keyframes cal-rot{to{transform:rotate(360deg)}}
.cal-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:2.5rem;color:var(--sand-2)}

.cal-dlg{width:min(28rem,calc(100vw - 2rem));padding:clamp(1.5rem,4vw,2rem);
  background:var(--panel);color:var(--sand);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.cal-dlg::backdrop{background:rgba(11,26,28,.75)}
.cal-dlg[open]{animation:cal-pop .2s var(--ease)}
@keyframes cal-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cal-dlg__d{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:1.5rem}
.cal-dlg__d > div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.cal-dlg__d dt{color:var(--sand-2);font-size:.875rem}
.cal-dlg__d dd{margin:0;font-weight:600;font-size:.9375rem;text-align:end}
.cal-dlg__d dd.n{font-family:var(--fs);font-weight:400;font-size:.8125rem}
.cal-dlg__f{display:flex;gap:.625rem;flex-wrap:wrap}
.cal-dlg__f .cal-btn{flex:1 1 8rem}

/* ── Contacto ────────────────────────────────────────────────── */
.cal-contact{display:grid;gap:clamp(2rem,4vw,3rem)}
.cal-contact__aside{display:grid;gap:1.25rem;align-content:start}
.cal-contact__i{display:grid;grid-template-columns:auto 1fr;gap:.875rem}
.cal-contact__i svg{color:var(--accent);margin-top:.25rem}
.cal-contact__i b{display:block;font-size:.75rem;color:var(--mute);font-family:var(--fs);margin-bottom:.125rem}
.cal-contact__i span,.cal-contact__i a{font-size:.9375rem}
.cal-contact__i a:hover{color:var(--accent)}
.cal-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Legales ─────────────────────────────────────────────────── */
.cal-legal{padding:calc(var(--bar) + 3rem) 0 clamp(3.5rem,7vw,5rem)}
.cal-legal__in{max-width:80rem}
.cal-legal h1{font-size:clamp(1.875rem,4vw,2.75rem);margin-bottom:.875rem}
.cal-legal__meta{color:var(--mute);font-family:var(--fs);font-size:.8125rem;margin-bottom:2.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.cal-legal__in h2{font-size:1.25rem;margin:2.5rem 0 .75rem}
.cal-legal__in h3{font-size:1.0625rem;margin:1.75rem 0 .5rem}
.cal-legal__in p,.cal-legal__in li{color:var(--sand-2);font-size:.9375rem;line-height:1.8;margin-bottom:.875rem}
.cal-legal__in ul{list-style:none;display:grid;gap:.5rem;margin-bottom:1.5rem}
.cal-legal__in ul li{padding-inline-start:1.25rem;position:relative;margin-bottom:0}
.cal-legal__in ul li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.cal-legal__in strong{color:var(--sand)}

/* ── Pie ─────────────────────────────────────────────────────── */
.cal-foot{border-top:1px solid var(--line);background:var(--panel)}
.cal-foot__top{max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,5vw,3.5rem) var(--gut);display:grid;gap:2rem}
.cal-foot__brand p{color:var(--sand-2);font-size:.9375rem;max-width:34ch;margin:.875rem 0 1.25rem}
.cal-foot__col h3{font-family:var(--fs);font-size:.6875rem;color:var(--mute);margin-bottom:.875rem}
.cal-foot__col ul{display:grid;gap:.5rem;font-size:.9375rem;color:var(--sand-2)}
.cal-foot__col a:hover{color:var(--accent)}
.cal-foot address{display:grid;gap:.5rem;font-size:.9375rem;color:var(--sand-2);max-width:30ch}
.cal-foot__hours{color:var(--mute);font-size:.875rem}
.cal-foot__bar{border-top:1px solid var(--line);padding:1.125rem var(--gut);max-width:var(--wrap);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;color:var(--mute);font-size:.8125rem}

/* ═══ Puntos de quiebre ═══════════════════════════════════════ */
@media (min-width:600px){
  .cal-stats{grid-template-columns:1fr}
  .cal-cols{grid-template-columns:1fr 1fr}
  .cal-docs{grid-template-columns:repeat(2,1fr)}
  .cal-foot__top{grid-template-columns:repeat(2,1fr)}
  .cal-card{grid-template-columns:auto 1fr;column-gap:1.5rem}
  .cal-card__ic{grid-row:span 3}
}
@media (min-width:900px){
  .cal-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  /* minmax(0,…) es imprescindible: sin él, el ancho MÍNIMO del contenido de
     la columna izquierda (la dirección) empuja y aplasta el formulario —
     quedó en 298 px, con campos de 107 px donde no cabe un nombre. */
  .cal-contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .cal-panes{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .cal-foot__top{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .cal-auth{grid-template-columns:1fr 1fr}
  .cal-auth__aside{display:flex;flex-direction:column}
}
/* El riel sustituye a la barra superior en escritorio. */
@media (min-width:1180px){
  .cal-rail{display:flex}
  .cal-head{display:none}
  body.cal{padding-inline-start:var(--rail)}
  .cal-app,.cal-legal{padding-top:clamp(3rem,5vw,4.5rem)}
  .cal-auth__main{padding-top:4rem}
  .cal-auth{margin-inline-start:calc(var(--rail) * -1);padding-inline-start:var(--rail)}
}

/* ── Checkout ────────────────────────────────────────────────── */
.cal-steps-bar{display:flex;gap:0;margin:0 0 1.75rem;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r)}
.cal-steps-bar li{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem .875rem;font-size:.8125rem;font-weight:600;color:var(--mute);
  border-inline-end:1px solid var(--line);white-space:nowrap}
.cal-steps-bar li:last-child{border-inline-end:0}
.cal-steps-bar li span{font-family:var(--fs);font-size:.6875rem}
.cal-steps-bar li.is-done{color:var(--sand-2)}
.cal-steps-bar li.is-now{background:var(--accent);color:var(--accent-ink)}

.woocommerce form .form-row label{font-size:.875rem;font-weight:600;margin-bottom:.375rem;display:block}
.woocommerce form .form-row .required{color:var(--accent);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{background:var(--base);color:var(--sand);border:1px solid var(--line-2);
  border-radius:var(--r);padding:.8125rem 1rem;font:400 .9375rem/1.4 var(--fs)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--accent)}
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--base);border:1px solid var(--line-2);border-radius:var(--r);height:auto;padding:.6875rem 1rem}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--sand);line-height:1.4;padding:0}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:12px}
.select2-dropdown{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);color:var(--sand)}
.select2-container--default .select2-results__option{color:var(--sand-2)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--accent);color:var(--accent-ink)}
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line);color:var(--sand)}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{
  background:var(--accent)!important;color:var(--accent-ink)!important;border-radius:var(--r)!important;font-weight:600!important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  border-top-color:var(--accent)!important;background:var(--panel)!important;color:var(--sand)!important;border-radius:var(--r)!important}
.woocommerce-checkout #payment{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
/* La pasarela pinta su formulario en blanco desde su iframe: se enmarca. */
.woocommerce-checkout #payment div.payment_box.payment_method_keycop_gateway{
  border:1px solid var(--line-2)!important;border-radius:var(--r)!important;padding:1rem!important;margin-top:.75rem!important}
.woocommerce-checkout #payment div.payment_box.payment_method_keycop_gateway::before{display:none!important}
.woocommerce .cart-collaterals{display:flow-root}
@media (min-width:1000px){
/* Bricks marca el formulario como .brxe-container y lo pone en columna:
     hay que declarar la dirección o las dos columnas se apilan. */
  .cal-woo form.checkout{display:flex;flex-direction:row;flex-wrap:nowrap;gap:2.5rem;align-items:flex-start}
  .cal-woo #customer_details{flex:1 1 auto;min-width:0}
  .cal-woo #order_review{flex:0 0 21rem;width:21rem}
  .cal-woo #order_review_heading{display:none}
}

@media (max-width:599px){
  /* Va al final a propósito: colocado antes de .cal-shot / .cal-req perdía
     por orden de aparición. El sangrado de 1rem es un refinamiento de
     escritorio; en móvil se comía el gutter (4 px al borde de pantalla). */
  .cal-shot{margin-inline:0}
  .cal-req{margin-inline:0;padding-inline:0}
}

/* ── Acceso: la hoja del expediente ────────────────────────────
   Sin panel lateral ni caja. Renglones numerados y campos con filete
   inferior: se lee como una forma que se llena, no como un cuadro de
   inicio de sesión. Cada casa del grupo lleva su propia maqueta. */
.cal-hoja{min-height:100svh;
  padding:calc(var(--bar) + clamp(2.5rem,6vw,4.5rem)) var(--gut) clamp(3rem,6vw,4.5rem)}
.cal-hoja__in{max-width:46rem;margin-inline:auto}
.cal-hoja__k{display:block;font-family:var(--fs);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cal-hoja h1{margin-top:.875rem;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em}
.cal-hoja__d{margin-top:.75rem;color:var(--sand-2);max-width:52ch;line-height:1.6}

.cal-linea{display:grid;gap:.4375rem;padding-block:1.375rem;border-bottom:1px solid var(--line)}
.cal-linea:first-of-type{margin-top:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--line)}
.cal-linea__n{font-family:var(--fs);font-size:.75rem;letter-spacing:.08em;color:var(--sand-2);
  font-variant-numeric:tabular-nums lining-nums}
.cal-linea label{font-size:.9375rem;font-weight:600;color:var(--sand)}
.cal-in--linea{background:transparent;border:0;border-bottom:1px solid var(--line-2);
  border-radius:0;padding:.4375rem 0;font-size:1.0625rem}
.cal-in--linea:hover{border-color:var(--sand-2)}
.cal-in--linea:focus{border-color:var(--accent)}

.cal-hoja__pie{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  justify-content:space-between;margin-block:1.5rem 1.75rem}
.cal-hoja__olvido{font-size:.875rem;color:var(--sand-2);
  text-decoration:underline;text-underline-offset:3px}
.cal-hoja__olvido:hover{color:var(--sand)}
.cal-hoja__firma{min-width:14rem}

@media (min-width:760px){
  .cal-linea{grid-template-columns:2.5rem minmax(0,12rem) minmax(0,1fr);
    gap:.4375rem 1.75rem;align-items:baseline}
}
/* A partir de 1180 el riel sustituye a la barra superior y `body.cal` ya
   compensa el ancho del riel: el hueco reservado para la barra sobra. */
@media (min-width:1180px){
  .cal-hoja{padding-top:clamp(3rem,5vw,4.5rem)}
}
/* Nota de seguridad dentro de la hoja de recuperación */
.cal-hoja__nota{margin-block:1.5rem 1.75rem;max-width:56ch;font-size:.875rem;
  line-height:1.6;color:var(--sand-2)}

/* El marco legal deja de ser sección propia: vive dentro del expediente. */
.cal-marco{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.5rem);
  border-top:1px solid var(--line)}
.cal-marco__t{margin-block:.75rem 1.5rem;font-size:clamp(1.25rem,2.2vw,1.625rem);letter-spacing:-.02em}

/* La hoja del expediente también encabeza el alta. */
.cal-hoja form,.cal-hoja .cal-auth__alt{max-width:44rem}

/* ── Carátula de expediente ────────────────────────────────────
   Los datos de la portada como la carátula de una carpeta: rótulo a la
   izquierda, dato a la derecha, filete de por medio. Sustituye a la cinta
   de cuatro celdas, que era el mismo componente en tres casas del grupo. */
.cal-caratula{margin:clamp(2.5rem,5vw,3.5rem) 0 0;max-width:34rem;
  border-top:1px solid var(--line-2)}
.cal-caratula__f{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.25rem;padding-block:.875rem;border-bottom:1px solid var(--line)}
.cal-caratula dt{font-size:.875rem;color:var(--sand-2)}
.cal-caratula dd{margin:0;font-family:var(--fd);font-weight:600;font-size:1.0625rem;
  color:var(--sand);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.cal-caratula dd.is-prose{font-family:var(--fs);font-weight:500;font-size:.9375rem}
.cal-caratula dd small{margin-inline-start:.4375rem;font-family:var(--fs);font-weight:400;
  font-size:.75rem;color:var(--sand-2)}


/* ── Controles homologados ─────────────────────────────────────
   Campo, selector y boton de formulario miden lo mismo y alinean por
   arriba y por abajo. Sin esto, un boton de 62 px junto a un campo de
   50 sobresale 12 px y se ve mal construido. */
.cal-in,.cal-sel{block-size:var(--ctrl);padding-block:0}
.cal-ta{block-size:auto}
form .cal-btn{block-size:var(--ctrl);padding-block:0}

/* ── Cabecera fotográfica de las pantallas de cuenta ───────────
   La hoja del expediente abre con la fotografía del sitio y su velo; los
   renglones con filete siguen debajo, sobre la tinta de siempre. */
.cal-hoja{padding-top:0}
.cal-hoja__cab{position:relative;overflow:hidden;background:var(--base);
  padding:calc(var(--bar) + clamp(3rem,7vw,5rem)) var(--gut) clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--line)}
.cal-hoja__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.cal-hoja__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,26,28,.93) 0%,rgba(11,26,28,.88) 46%,
                             rgba(11,26,28,.78) 68%,rgba(11,26,28,.28) 100%)}
.cal-hoja__cab-in{position:relative;z-index:2;max-width:46rem;margin-inline:auto}
.cal-hoja__in{padding-top:clamp(2rem,4vw,2.75rem)}
.cal-hoja__in .cal-linea:first-of-type{margin-top:0}

@media (min-width:1180px){
  /* El riel ya desplaza el cuerpo; la cabecera no repite el hueco de la barra. */
  .cal-hoja__cab{padding-top:clamp(3rem,5vw,4.5rem)}
}

/* ── El alta con el ÍNDICE del expediente ──────────────────────
   Un expediente se abre por su índice: los tres apartados quedan a la vista
   y se salta a cualquiera. Ocupa el costado que antes quedaba en blanco. */
.cal-alta__g{display:grid;gap:clamp(2rem,4vw,3rem)}
.cal-alta__col{min-width:0}
.cal-hoja .cal-alta__g form,.cal-hoja .cal-alta__g .cal-auth__alt{max-width:none}
.cal-indice{align-self:start}
.cal-indice__t{display:block;font-family:var(--fs);font-size:.75rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cal-indice__l{margin:1rem 0 0;padding:0;list-style:none;counter-reset:anexo}
.cal-indice__l li{counter-increment:anexo;border-top:1px solid var(--line)}
.cal-indice__l a{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.5rem;
  padding-block:.75rem;color:var(--sand);font-size:.9375rem;line-height:1.4}
.cal-indice__l a::before{content:counter(anexo,upper-alpha);color:var(--accent);
  font-family:var(--fs);font-size:.8125rem;font-weight:600}
.cal-indice__l a:hover{color:var(--accent)}
.cal-indice__p{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--sand-2);line-height:1.55}

@media (min-width:1000px){
  .cal-alta__g{grid-template-columns:minmax(0,17rem) minmax(0,1fr);
    column-gap:clamp(2.5rem,5vw,4rem);align-items:start}
  .cal-indice{position:sticky;top:calc(var(--bar) + 1.5rem)}
}

/* La hoja del acceso mide 46rem porque es una columna de lectura; el alta
   lleva índice + formulario y con esa medida el formulario se quedaba en
   400 px. Se ensancha sólo la pantalla que lo necesita. */
.cal-hoja__in:has(.cal-alta__g){max-width:64rem}

/* ── Marcas de aceptación de pago ──────────────────────────────
   Logotipos reales. Cada casa las presenta a su manera; lo que no
   cambia es la marca. */
/* Expediente: rótulo, filete y las marcas en blanco sobre la tinta. Sin
   pastilla —este sitio no usa cajas— y separadas por un filete vertical. */
.cal-pays{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.cal-pays__r{font-family:var(--fs);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sand-2)}
.cal-pays__sep{inline-size:1px;block-size:1.125rem;background:var(--line)}
.cal-pay--visa{inline-size:2.875rem;block-size:.875rem}
.cal-pay--mc{inline-size:1.625rem;block-size:1.0625rem}

/* ── Ritmo vertical de una pantalla de cuenta ──────────────────
   Antes el aire de arriba lo ponía el margen inferior de la banda y el de
   abajo el relleno de la sección, cada uno con su propio valor: el bloque
   quedaba con 44-48 px arriba y hasta 177 abajo, y se veía descentrado. Los dos
   salen ahora del mismo token, así que coinciden por construcción. */
:root{ --aire:clamp(3rem,6vw,4.5rem); }
.cal-hoja__cab{margin-block-end:var(--aire)}
.cal-hoja{padding-block-end:var(--aire)}
/* El cuerpo dejaba de pagar su propio relleno superior: el aire lo pone ya
   el margen inferior de la banda, y sumarlos daba 116 arriba contra 72. */
.cal-hoja__in{padding-block-start:0}

/* La sección mide 100svh y con contenido corto TODO el sobrante caía abajo:
   72 px arriba contra 149. La banda se queda arriba y el cuerpo se centra en
   el espacio que queda, así que el sobrante se reparte por igual. */
.cal-hoja{display:grid;grid-template-rows:auto 1fr}
.cal-hoja__in{align-self:center;width:100%}

/* ── pulido responsivo: --- pulido responsivo --- ──────────────
   El copyright del pie es un <small> sin regla propia: hereda el 0.8em
   del navegador y cae a 10.4 px dentro de una barra de 13. No era un
   valor mal elegido, era un valor que nadie eligió. */
.cal-foot__bar small{font-size:inherit}

@media (max-width:767px){
  /* Blancos de toque a 44 px SIN mover la maqueta: la superficie la pone
     un pseudo-elemento centrado, no el relleno. Medido antes: entre 15 y
     38 px, con el mínimo exigible en 24. */
  .cal-logo,.cal-hoja__olvido{position:relative}
  .cal-logo::after,.cal-hoja__olvido::after{content:"";position:absolute;top:50%;left:50%;
    translate:-50% -50%;inline-size:max(100%,2.75rem);block-size:2.75rem}
}

/* ── toque en listas: --- toque en listas --- ──────────────────
   Los enlaces del pie medían de 16 a 21 px y el conmutador de idioma se
   quedaba por debajo de 24 aunque tuviera superposición: entre vecinos
   pegados los recuadros se solapan y el de la derecha roba el toque. Aquí
   la separación de la lista se convierte en relleno del propio enlace, así
   que el blanco crece y el pie mide lo mismo. */
@media (max-width:767px){
  .cal-foot__col ul{gap:0}
  .cal-foot__col ul a{display:inline-block;padding-block:.375rem}
  .cal-foot address a,.cal-foot__bar a{display:inline-block;padding-block:.3125rem}
  .cal-lang{gap:0}
  /* Sin tocar el display: alguno es inline-flex con bandera, y
     forzarlo a inline-block descolocaba el icono. */
  .cal-lang a{padding:.5rem .625rem}
}

/* Una paridad no envejece: el sello «Precio de hace N min» era información
   de una tasa que se movía, y ya no se mueve. */
[data-quote-age]{display:none}


/* ══ Identificación · una secuencia numerada ══════════════════════════
   Calippser trabaja por expediente, así que las caras se piden como pasos
   de un trámite y lo entregado se va viendo en una carátula. El paso
   apagado NO usa `display`: un obligatorio oculto cancela el envío en
   silencio, y además el `required` viaja con el paso visible. */
.cal-paso{grid-column:1/-1;border:1px solid var(--line);margin-bottom:1.25rem}
.cal-paso__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.875rem 1.125rem;border-bottom:1px solid var(--line);background:var(--panel-2)}
.cal-paso__n{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.cal-paso__t{font-size:.875rem;font-weight:600;color:var(--sand)}
.cal-paso__box{position:relative;min-height:11rem}
.cal-paso__s{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:1.25rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .35s}
.cal-paso__s.is-on{opacity:1;pointer-events:auto;position:relative}
.cal-paso__s input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cal-paso__art{color:var(--accent);line-height:0}
.cal-paso__h2{font-size:.8125rem;color:var(--mute);overflow-wrap:anywhere}
.cal-paso__s.is-set .cal-paso__art{color:var(--ok)}
.cal-paso__s.is-set .cal-paso__h2{color:var(--ok)}
.cal-paso__s.is-bad .cal-paso__art,.cal-paso__s.is-bad .cal-paso__h2{color:var(--bad)}
.cal-paso__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.125rem;border-top:1px solid var(--line)}
.cal-paso__ir{background:none;border:1px solid var(--line-2);padding:.4rem .75rem;font:inherit;
  font-size:.8125rem;color:var(--sand);cursor:pointer;transition:border-color .2s,color .2s}
.cal-paso__ir:hover{border-color:var(--accent);color:var(--accent)}
.cal-cara{grid-column:1/-1;display:flex;align-items:center;gap:.875rem;margin:-.75rem 0 1.25rem;
  flex-wrap:wrap}
.cal-cara__r{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.cal-cara__i{width:3.5rem;aspect-ratio:1.586;object-fit:cover;border:1px solid var(--line-2);
  background:var(--panel-2)}
.cal-cara__v{width:3.5rem;aspect-ratio:1.586;border:1px dashed var(--line-2)}
.cal-paso__say{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;font-size:.8125rem;
  color:var(--mute);margin:-.75rem 0 1.25rem;min-height:1.25rem}
.cal-paso__say.is-ok{color:var(--ok)}
.cal-paso__say.is-bad{color:var(--bad)}