/* ===========================================================================
   site.css — Vitalis-BO
   Réplica de la composición original: hero en dos columnas, módulos en
   rejilla de 4, diferenciadores en split con ficha flotante, especialidades
   + planes en 3 tarjetas, demo centrada sobre foto, testimonios en 3
   columnas, FAQ y contacto. Tecnología · Circuito.
   =========================================================================== */

/* Pantalla de carga: la cruz dentro del aro, el wordmark debajo y el rotulo
   al pie. La composicion la pone base.css con data-preloader="aro"; aqui
   solo van las piezas y sus medidas. */
:root {
  --preloader-icono: url('/assets/cruz.png');
  --preloader-marca: url('/assets/viutalis.png');
  --preloader-texto: 'Cargando...';
  --preloader-icono-tam: 54px;
  --preloader-aro-tam: 7.25rem;
  --preloader-marca-tam: min(46vw, 210px);
  --preloader-sube: 3.4rem;
  --preloader-marca-y: 3.4rem;
  --preloader-texto-y: 12.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--c-text);
}
.nav--over-hero:not(.is-stuck) .brand { color: oklch(var(--background-50)); }
.nav--over-hero:not(.is-stuck) .brand .icon-chip { background: oklch(var(--background-50) / 0.16); color: oklch(var(--accent-300)); }
.nav--over-hero:not(.is-stuck) .nav__links a { color: oklch(var(--background-50)); }
.nav--over-hero:not(.is-stuck) .nav__links a:hover { color: oklch(var(--accent-300)); }
.nav--over-hero:not(.is-stuck) .nav__toggle { color: oklch(var(--background-50)); border-color: oklch(var(--background-50) / 0.35); }

/* Al fijarse, fondo oscuro semitransparente (no el claro de base.css): el
   sitio paso a esquema claro pero la cabecera fija sigue leyendose mejor
   oscura, y asi el wordmark del logo (blanco+cian) no pierde contraste. */
.nav.is-stuck {
  background: oklch(var(--foreground-950) / 0.86);
  border-bottom-color: oklch(var(--background-50) / 0.12);
}
.nav.is-stuck .brand,
.nav.is-stuck .nav__links a { color: oklch(var(--background-50)); }
.nav.is-stuck .nav__links a:hover { color: oklch(var(--accent-300)); }
.nav.is-stuck .nav__toggle { color: oklch(var(--background-50)); border-color: oklch(var(--background-50) / 0.3); }

/* La CTA de la cabecera estorba junto al boton de menu en movil: vive en el
   panel movil, no duplicada en la barra angosta. */
@media (max-width: 859px) {
  .nav__inner > a.btn.btn--primary { display: none; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero-title__main { display: block; }
.hero-title__sub {
  display: block;
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 1.6vw, 1.9rem);
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
  color: oklch(var(--background-200));
}
.btn--light { background: oklch(var(--background-50)); color: oklch(var(--foreground-950)); }
.btn--light:hover { background: oklch(var(--background-100)); }

.hero__proof { display: flex; flex-direction: column; gap: 1.1rem; }
.hero__proof .glass {
  background: oklch(var(--background-50) / 0.06);
  border-color: oklch(var(--background-50) / 0.14);
}
.stat__cifra {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.35rem;
  line-height: 1;
  color: oklch(var(--background-50));
}
.stat__cifra--acento { color: oklch(var(--accent-300)); }
.stat__label {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--text-small);
  color: oklch(var(--background-200));
}



/* --- Módulos: rejilla de 4 -------------------------------------------------- */
.modules-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .modules-grid { grid-template-columns: repeat(4, 1fr); } }
.modules-grid .card h3 { font-size: 1.05rem; margin-top: 0.9rem; }
.modules-grid .card p { color: var(--c-text-mute); font-size: var(--text-small); }

/* --- Diferenciadores: ficha flotante con chips + fila de chips ------------- */
.float-card__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.float-card__chip {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.25em 0.65em;
  border-radius: var(--radius-pill);
  background: oklch(var(--background-50) / 0.16);
}
.float-card:has(.float-card__chips) { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--c-text);
}

/* --- Especialidades y planes ------------------------------------------------ */
.specialty-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.plans { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.plan--destacado { border-color: var(--c-primary); box-shadow: 0 0 0 2px oklch(var(--primary-500) / 0.25); }
.plan__sello {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: var(--text-small);
  font-weight: 600;
}
.plan__foto { aspect-ratio: 16 / 9; }
.plan__foto img { width: 100%; height: 100%; object-fit: cover; }
.plan__cuerpo { padding: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.plan__nombre { font-size: 1.15rem; }
.plan__para { color: var(--c-text-mute); font-size: var(--text-small); margin-top: -0.4rem; }
.plan__precio { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-top: 0.4rem; }
.plan__precio small { font-family: var(--font-body); font-size: var(--text-small); font-weight: 400; color: var(--c-text-mute); }
.plan__nota { font-size: var(--text-small); color: var(--c-text-mute); }
.plan__lista { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.plan .btn { align-self: flex-start; }

.plans-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .plans-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan-card { text-align: center; position: relative; display: flex; flex-direction: column; }
.plan-card__badge { position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.plan-card--highlight { border-color: var(--c-primary); box-shadow: 0 0 0 2px oklch(var(--primary-500) / 0.25); }
.plan-card__price { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 700; margin-top: 0.6rem; }
.plan-card__price span:last-child { font-family: var(--font-body); font-size: var(--text-small); font-weight: 400; color: var(--c-text-mute); }
.plan-card__note { font-size: var(--text-small); color: var(--c-text-mute); }
.plan-card .ticks { text-align: left; margin-top: var(--space-2); flex: 1; }
.plan-card .btn { margin-top: var(--space-3); align-self: center; }

/* --- Testimonios: 3 columnas ------------------------------------------------ */
.testi-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.quote-card .icon { color: var(--c-primary); width: 1.8rem; height: 1.8rem; margin-bottom: 0.4rem; }
.quote-card blockquote, .quote-card > p {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.42;
  margin: 0;
}
.quote-card--note > p { font-family: var(--font-body); font-size: var(--text-body); color: var(--c-text-mute); }
.testi-footer { margin-top: 1.2rem; display: flex; align-items: center; gap: 0.85rem; }
.avatar-ring {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 700;
  font-size: 0.85rem;
  flex: none;
  border: 3px solid oklch(var(--accent-400) / 0.55);
}
.testi-footer strong { display: block; font-size: 0.9rem; }
.testi-footer small { display: block; color: var(--c-text-mute); font-size: 0.78rem; }

/* --- FAQ: acordeón ---------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item:first-child { border-top: 1px solid var(--c-border); }
[data-faq] summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
[data-faq] summary::-webkit-details-marker { display: none; }
[data-faq] summary .icon { color: var(--c-primary); flex: none; transition: transform var(--dur-base) var(--ease-out); }
[data-faq] details[open] summary .icon { transform: rotate(180deg); }
[data-faq] .faq-item p { padding-bottom: 1.3rem; margin: 0; color: var(--c-text-mute); max-width: 64ch; }

/* --- Contacto: vías -------------------------------------------------------- */
.contact-ways { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-ways li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-ways .icon-chip { flex: none; }
.contact-ways strong { display: block; }
.contact-ways span { color: var(--c-text-mute); font-size: var(--text-small); }
.contact-ways a { text-decoration: none; color: var(--c-text); }
.contact-ways a:hover { color: var(--c-primary); }

/* --- Pie: fondo oscuro del primario, 4 columnas ----------------------------- */
.site-footer {
  background: oklch(var(--primary-950));
  color: oklch(var(--background-200));
  padding-block: var(--space-6) var(--space-4);
  position: relative;
  overflow: clip;
}
.footer-grid, .footer-bottom { position: relative; z-index: 1; }

/* Remate del pie, al estilo resend.com: el nombre enorme, casi del color del
   fondo (se lee por el relieve tipografico, no por contraste), cortado por
   abajo por el propio borde del pie. Un resplandor de acento lo recorre en
   bucle. Puro CSS sobre un pseudo-elemento: no toca el marcado de ningun pie,
   asi que aparece igual en todas las paginas sin duplicar nada.
   La reduccion de movimiento ya la aplica base.css de forma global
   (*, *::before, *::after { animation-duration: 0.01ms !important }). */
.site-footer::after {
  content: 'Vitalis-BO';
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  transform: translate(-50%, 38%);
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 16vw, 12rem);
  white-space: nowrap;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    oklch(var(--primary-900)) 0%,
    oklch(var(--primary-900)) 42%,
    oklch(var(--accent-400)) 50%,
    oklch(var(--primary-900)) 58%,
    oklch(var(--primary-900)) 100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: footer-mark-shine 7s linear infinite;
}
@keyframes footer-mark-shine {
  0% { background-position: 220% 0; }
  100% { background-position: -100% 0; }
}
/* Sin soporte de background-clip:text, el nombre se ve solido y quieto en vez
   de desaparecer: mejor un remate estatico que uno invisible. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .site-footer::after {
    background: none;
    color: oklch(var(--primary-900));
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}
.site-footer a { color: oklch(var(--background-100)); }
.site-footer a:hover { color: oklch(var(--accent-300)); }
.site-footer .brand { color: oklch(var(--background-50)); }
.site-footer .brand .icon-chip { background: oklch(var(--background-50) / 0.14); color: oklch(var(--accent-300)); }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-grid h4 {
  font-family: var(--font-label);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(var(--background-400));
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-grid ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-brand { display: flex; flex-direction: column; gap: 1rem; max-width: 26rem; }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid oklch(var(--background-50) / 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: var(--text-small);
  color: oklch(var(--background-400));
}

/* La foto de la banda de testimonios ocupaba 690 px y empujaba las citas fuera
   de pantalla: en el original esa banda entra directa a la rejilla. Se recorta
   a una franja, que acompaña sin robar el sitio. */
.media--corta { aspect-ratio: 16 / 5; }
.media--corta img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* Cabecera de una pagina interior. No lleva foto, asi que no lleva velo:
   basta con aire, los orbes de fondo y el titular sobre el fondo del sitio. */
.pagina-cabeza {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  border-bottom: 1px solid var(--c-border);
}
.pagina-cabeza .eyebrow a { color: inherit; }
.pagina-cabeza .lead { max-width: 58ch; }