/* Capa de estilo Apple (2026-10-22), encima de carta.css en todas las páginas.
   Material translúcido en la cabecera, esquinas suaves, sombras con profundidad, respuesta al pulsar
   y tracking según el tamaño. Para volver atrás, quitar el enlace a este fichero. */
:root{
  --r-s:12px;--r-m:18px;--r-l:24px;
  --spring:cubic-bezier(.22,1,.36,1);
  --sh-1:0 1px 2px rgba(18,19,22,.05),0 6px 18px -10px rgba(18,19,22,.18);
  --sh-2:0 1px 2px rgba(18,19,22,.06),0 22px 44px -22px rgba(18,19,22,.32);
  --hair:color-mix(in oklab,var(--ink-dark) 11%,transparent);
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Cabecera: material translúcido que deja ver el contenido al pasar por debajo */
.top{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--paper) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 0 var(--hair)}
.top nav a:not(.nav-cta){opacity:.78;transition:opacity .2s}
.top nav a:not(.nav-cta):hover,.top nav a[aria-current="page"]:not(.nav-cta){opacity:1;text-decoration:none}
.nav-cta{border-radius:999px!important}
[id],.more-info{scroll-margin-top:84px}

/* Tipografía: tracking negativo en lo grande, normal en el texto */
h1,.p-title{letter-spacing:-.025em}
h2{letter-spacing:-.018em}

/* Tarjetas: esquinas suaves y sombra con profundidad */
.mi-grid article,.plan,.inc li,.ramp li,.tiers li,.strip,.p-spec,.calc-out,.combo-out,.close,.spec dl div,.steps li{border-radius:var(--r-m);box-shadow:var(--sh-1)}
.plan:hover,.mi-grid article:hover{box-shadow:var(--sh-2)}
.plan,.mi-grid article{transition:box-shadow .3s var(--spring),transform .3s var(--spring)}

/* Controles */
.wait button,.more,.b-actions button,.btn,.btn-ghost,.hero-side .fan-tabs button{border-radius:var(--r-s)}
.wait input,.pick,.calc-in input,.combo-calc input,.vitri-in input{border-radius:var(--r-s);transition:box-shadow .2s,border-color .2s}
input:focus-visible,select:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in oklab,var(--remi) 22%,transparent)}
button,a{-webkit-tap-highlight-color:transparent}
.hero-side .fan-tabs button{box-shadow:var(--sh-1);transition:background .2s,color .2s,box-shadow .2s,transform .1s ease-out}
.nav-cta:active,.wait button:active,.more:active,.b-actions button:active,.fan-tabs button:active,.btn-ghost:active{transform:scale(.97);transition:transform .1s ease-out}

/* «Más info» abierto: el botón conserva su tinta (antes quedaba blanco) */
.blade .more[aria-expanded="true"]{background:var(--ink)!important;color:var(--on);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 2px 6px rgba(0,0,0,.18)}
.blade-atrio .more[aria-expanded="true"]{background:var(--ink-dark)!important;color:#fff}

@media (prefers-reduced-transparency:reduce){
  .top{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-cta:active,.wait button:active,.more:active,.b-actions button:active,.fan-tabs button:active,.btn-ghost:active{transform:none}
}

/* Tarjetas «Toca para ver más»: con ratón se abren al pasar por encima; la abierta gana profundidad y las demás se apagan un poco */
.mi-card{transition:transform .25s var(--ease),opacity .35s var(--spring),border-top-width .4s var(--ease),box-shadow .35s var(--spring)}
@media (hover:hover) and (pointer:fine){
  [data-mi].has-open .mi-card:not(.is-open){opacity:.68}
  [data-mi].has-open .mi-card:not(.is-open):hover{opacity:.9}
  .mi-card.is-open{box-shadow:var(--sh-2)}
  .mi-hint{font-size:0}
  .mi-hint::after{content:"Pasa el ratón para ver más";font-size:.7rem}
}

/* Portada: columna derecha más compacta para que el formulario y las pestañas suban y casen con el carrusel */
@media (min-width:1061px){
  .hero-side{gap:16px}
  .hero-side .lead{font-size:1.06rem;line-height:1.5}
  .hero-side .fan-note{display:none}
}

/* Cabecera: «Entrar» para clientes junto a «Pide una demo» */
.top nav .nav-entrar{font-weight:700;opacity:1;padding:9px 14px!important;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink-dark)}
.top nav .nav-entrar:hover{background:var(--ink-dark);color:#fff}