/* Cardy — estilos compartidos */

:root {
  --cardy-purple: #7c3aed;
  --cardy-purple-soft: rgba(124, 58, 237, .16);
}

/* ---------- Tipografía de marca: Link Sans (autoalojada) ---------- */
/* Pesos repartidos: 400 regular, 500 medium, 600 bold, 700 extrabold,
   800/900 heavy. */
@font-face {
  font-family: 'Link Sans';
  src: url('fonts/link-sans-regular.woff2') format('woff2'),
       url('fonts/link-sans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Link Sans';
  src: url('fonts/link-sans-medium.woff2') format('woff2'),
       url('fonts/link-sans-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Link Sans';
  src: url('fonts/link-sans-bold.woff2') format('woff2'),
       url('fonts/link-sans-bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Link Sans';
  src: url('fonts/link-sans-extrabold.woff2') format('woff2'),
       url('fonts/link-sans-extrabold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Link Sans';
  src: url('fonts/link-sans-heavy.woff2') format('woff2'),
       url('fonts/link-sans-heavy.woff') format('woff');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* Pila tipográfica única del sitio (sustituye a Inter Tight y al
   sans por defecto de Tailwind, incluida la clase .font-sans). */
:root {
  --cardy-font: 'Link Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }


html,
body,
button, input, select, textarea, optgroup,
.font-sans { font-family: var(--cardy-font); }

/* Tracking de marca: Link Sans un poco más cerrado en todo el sitio
   (look más moderno), un pelín más en títulos, sin llegar a pegarse. */
html, body { letter-spacing: -0.025em; }
h1, h2 { letter-spacing: -0.04em; }
h3, h4, h5, h6 { letter-spacing: -0.03em; }

/* Detalle de marca: violeta muy suave, usado con moderación
   (halos ambientales, estados hover/activo, selección de texto) */
::selection { background: rgba(139, 92, 246, .35); color: #fff; }

/* Hero: 100svh en vez de 100vh — evita que la barra del navegador móvil
   tape el final de la sección (la causa real del "corte" en móvil). */
.hero-viewport { min-height: 100vh; }
@supports (height: 100svh) {
  .hero-viewport { min-height: 100svh; }
}

/* Difuminado final del hero: funde el vídeo con el negro sólido de la
   siguiente sección en vez de terminar en un corte duro. */
.hero-fade-bottom {
  height: 220px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
}
@media (min-width: 768px) {
  .hero-fade-bottom { height: 320px; }
}

/* ---------- Loader de carga: negro con detalles glow morados y logo blanco ---------- */
#pageLoader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo {
  position: relative;
  z-index: 2;
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  animation: loaderFade 1.3s ease-in-out infinite;
}
.loader-glow {
  position: absolute;
  inset: -70px;
  z-index: 1;
  background: radial-gradient(circle, rgba(124,58,237,.55) 0%, rgba(124,58,237,.18) 45%, transparent 72%);
  filter: blur(6px);
  animation: loaderGlow 1.3s ease-in-out infinite;
}
.loader-track {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.loader-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #b794f6);
  box-shadow: 0 0 10px rgba(124,58,237,.7);
  animation: loaderTrack .85s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes loaderFade {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes loaderGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes loaderTrack {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#storyCard {
  -webkit-transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Instrument Serif tiene una altura de x/mayúsculas bastante menor que
   Link Sans al mismo tamaño de fuente: se compensa escalándola un poco
   hacia arriba para que visualmente empate con el resto del texto. */
.font-serif-italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.19em;
  vertical-align: -0.010em;
}

.glass-card {
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(56px);
  -webkit-backdrop-filter: blur(56px);
}

.pill-nav {
  background: rgba(28,28,28,.75);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px -16px rgba(124,58,237,.45);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  padding: .625rem 1.25rem;
  font-size: .9375rem;
  font-weight: 500;
  transition: transform 250ms cubic-bezier(.22,1,.36,1), opacity 250ms, box-shadow 250ms;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(124,58,237,.55); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  padding: .625rem 1.25rem;
  font-size: .9375rem;
  font-weight: 500;
  transition: background 250ms;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); }

.badge-pill {
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: .5rem 1.125rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  transition: border-color 250ms, background 250ms;
}
.badge-pill:hover { border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.10); }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marqueeScroll 18s linear infinite; }

.section-eyebrow {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .125rem;
  color: rgba(199, 182, 253, .62);
}

/* Cookie banner — outer is a fixed, full-width flex row that centers the card;
   the transform/opacity animation happens on this same element via translateY,
   so it never needs to fight with horizontal centering. */
#cookieBanner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}
#cookieBanner.hidden { display: none; }
#cookieBanner:not(.hidden) { pointer-events: none; }
#cookieBanner .cookie-card { pointer-events: auto; }

footer a { transition: color 200ms; }
footer a:hover { color: #c4b5fd; }

/* Acento violeta suave en elementos interactivos abiertos/activos */
details[open] summary iconify-icon { color: #a78bfa; }
.nav-pill.is-active { color: #fff; }

#countMain {
  letter-spacing: -0.045em;
}


/* iOS: evita el zoom automático en los inputs del formulario
   (Safari hace zoom si el font-size del campo es menor a 16px) */
@media (max-width: 767px) {
  #contactoForm input,
  #contactoForm textarea,
  #contactoForm select {
    font-size: 16px !important;
  }
}