/* ============================================================
   web2 — components.css
   Reusable UI components: buttons, cards, forms, tags, stars,
   nav, footer, mobile menu, block-specific shared bits.
   ============================================================ */

/* ----------- Buttons ----------- */
.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--pc-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  transition: all 220ms var(--pc-ease);
  white-space: nowrap;
  text-decoration: none;
  color: var(--pc-fg);
  background: transparent;
}
.vm-btn:active { transform: scale(0.98); }
.vm-btn--primary {
  background: var(--pc-primary); color: var(--pc-primary-fg);
  box-shadow: var(--pc-shadow-xs);
}
.vm-btn--primary:hover { background: var(--pc-primary-hover); }
.vm-btn--secondary {
  background: transparent; color: var(--pc-blue-dark);
  border-color: var(--pc-primary);
}
.vm-btn--secondary:hover { background: var(--pc-blue-bg); }
.vm-btn--ghost { background: transparent; color: var(--pc-fg); padding: 14px 18px; }
.vm-btn--ghost:hover { background: var(--pc-mist); }
.vm-btn--dark { background: var(--pc-black); color: var(--pc-white); }
.vm-btn--dark:hover { background: #1f1f1d; }
.vm-btn--sm { font-size: 13px; padding: 10px 18px; }
.vm-btn--xs { font-size: 12px; padding: 6px 12px; gap: 6px; letter-spacing: 0; }
.vm-btn--lg { font-size: 15px; padding: 18px 32px; }

/* ----------- Card ----------- */
.vm-card {
  background: var(--pc-white);
  border: 1px solid var(--pc-border-soft);
  border-radius: 20px;
  padding: 28px;
  transition: box-shadow 220ms var(--pc-ease), background 220ms var(--pc-ease);
}
.vm-card:hover {
  box-shadow: var(--pc-shadow);
  background: var(--pc-beige-light);
}
.vm-card--lifted { box-shadow: var(--pc-shadow-lg); border: none; }
.vm-card--flat { box-shadow: none; }

/* ----------- Form fields ----------- */
.vm-input, .vm-textarea, .vm-select {
  font-family: var(--pc-font-body);
  font-size: 15px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--pc-border);
  border-radius: 12px;
  background: var(--pc-white);
  color: var(--pc-fg);
  transition: border-color 140ms var(--pc-ease), box-shadow 140ms var(--pc-ease);
}
.vm-input:focus, .vm-textarea:focus, .vm-select:focus {
  outline: none;
  border-color: var(--pc-blue);
  box-shadow: var(--pc-shadow-focus);
}
.vm-textarea { min-height: 120px; resize: vertical; }
/* Native <select> closed state has no native ellipsis affordance and long
   option labels truncate ungracefully on narrow phones. Tighten horizontal
   padding and leave room on the right for the chevron so long labels (e.g.
   "Quiero información sobre la próxima edición de la Escuela") fit further. */
.vm-select {
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pc-fg) 50%),
    linear-gradient(135deg, var(--pc-fg) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .vm-select { padding-left: 12px; padding-right: 30px; font-size: 14px; }
}
.vm-label {
  font-family: var(--pc-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--pc-fg);
  display: block;
  margin-bottom: 6px;
}

/* ----------- Tag / badge ----------- */
.vm-tag {
  display: inline-flex; align-items: center;
  font-family: var(--pc-font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pc-blue-bg);
  color: var(--pc-blue-dark);
}
.vm-tag--mist { background: var(--pc-mist); color: var(--pc-fg-muted); }

/* ----------- Check (green pill bullet) ----------- */
.vm-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 50%;
  background: var(--pc-green-medium); color: var(--pc-white);
  font-family: var(--pc-font-display); font-weight: 800; font-size: 12px;
  margin-top: 2px;
}

/* ----------- Stars (testimonial rating) ----------- */
.vm-stars {
  color: var(--pc-blue);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 16px;
}
.vm-stars svg { width: 16px; height: 16px; }

/* ============================================================
   Site nav + footer (shared layout chrome, used by base.html)
   ============================================================ */
.vm-section[id] { scroll-margin-top: 98px; }

.vm-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pc-border-soft);
}
.vm-nav__inner {
  display: flex; align-items: center; gap: 24px;
  max-width: 1200px; margin: 0 auto;
  padding: 8px clamp(20px, 4vw, 32px);
}
.vm-nav__brand { flex-shrink: 0; display: flex; align-items: center; }
.vm-nav__brand img { height: 65px; width: auto; }
.vm-nav__links {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  flex: 1;
}
.vm-nav__links a {
  font-family: var(--pc-font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--pc-fg);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 140ms var(--pc-ease);
  white-space: nowrap;
}
.vm-nav__links a.is-active { font-weight: 700; border-bottom-color: var(--pc-blue); }
.vm-nav__links a:hover { border-bottom-color: var(--pc-blue-light); }
.vm-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-shrink: 0; }
.vm-nav__login {
  font-family: var(--pc-font-display); font-weight: 500; font-size: 14px;
  color: var(--pc-blue-dark);
}
.vm-nav__burger { display: none; padding: 8px; background: transparent; border: none; }

@media (max-width: 1100px) {
  .vm-nav__inner { padding-top: 8px; padding-bottom: 8px; }
  .vm-nav__links, .vm-nav__actions { display: none; }
  .vm-nav__burger { display: inline-flex; margin-left: auto; }
  .vm-nav__brand img { height: 46px; }
}

/* Mobile menu */
.vm-mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 100vh; height: 100svh;
  background: var(--pc-white);
  display: flex; flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms var(--pc-ease-out);
}
.vm-mobile-menu.is-open { transform: translateX(0); }
.vm-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.vm-mobile-menu nav a {
  font-family: var(--pc-font-display);
  font-weight: 700; font-size: 20px;
  color: var(--pc-fg);
  padding: 16px 12px;
  border-bottom: 1px solid var(--pc-border-soft);
}

/* Footer */
.vm-footer { background: var(--pc-beige-medium); color: var(--pc-black); padding: 64px 0 24px; }
.vm-footer__top {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 48px;
}
.vm-footer__brand img { height: 70px; width: auto; }
.vm-footer__brand p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.65; margin: 16px 0 20px; max-width: 34ch; }
.vm-footer__cols { display: flex; gap: 64px; align-items: flex-start; }
.vm-footer__cols > div { min-width: max-content; }
.vm-footer__h {
  font-family: var(--pc-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--pc-blue-dark);
}
.vm-footer__cols ul { list-style: none; padding: 0; margin: 0; }
.vm-footer__cols li { margin: 0; }
.vm-footer__cols a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 18px; line-height: 1.2; color: rgba(48,48,46,0.82);
  white-space: nowrap;
  transition: color 140ms var(--pc-ease);
}
.vm-footer__cols a:hover { color: var(--pc-blue); text-decoration: underline; }
.vm-footer__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: block;
  color: var(--pc-blue-dark);
  transition: transform 180ms var(--pc-ease), color 140ms var(--pc-ease);
}
.vm-footer__cols a:hover .vm-footer__icon { transform: scale(1.15) rotate(-4deg); color: var(--pc-blue); }
.vm-footer__h { font-size: 17px; margin-bottom: 14px; letter-spacing: 0.06em; }
.vm-footer__bottom {
  max-width: 1200px; margin: 48px auto 0;
  padding: 24px clamp(20px, 4vw, 32px) 0;
  border-top: 1px solid rgba(48,48,46,0.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 16px; color: var(--pc-fg-muted);
}
.vm-footer__bottom a { color: var(--pc-fg-muted); }
.vm-footer__bottom a:hover { color: var(--pc-blue); }

@media (max-width: 768px) {
  .vm-footer__top { flex-direction: column; gap: 32px; }
  .vm-footer__cols { flex-wrap: wrap; gap: 32px; }
}

/* ============================================================
   Section Catalog (admin styleguide page)
   ============================================================ */
.vm-catalog { padding: 24px 32px; max-width: 1200px; margin: 0 auto; }
.vm-catalog__entry {
  background: #fff;
  border: 1px solid var(--pc-border-soft);
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--pc-shadow-sm);
}
.vm-catalog__head { padding: 24px 28px; }
.vm-catalog__head h3 { margin: 0 0 8px; font-family: var(--pc-font-display); font-size: 24px; font-weight: 800; }
.vm-catalog__head p { margin: 0; color: var(--pc-fg-muted); font-size: 15px; }
.vm-catalog__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 0 28px 24px;
}
.vm-catalog__meta h5 {
  font-family: var(--pc-font-display); font-weight: 700;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--pc-blue-dark);
  margin: 0 0 8px;
}
.vm-catalog__meta ul { list-style: none; padding: 0; margin: 0; }
.vm-catalog__meta li { font-size: 13.5px; padding: 2px 0; }
.vm-catalog__preview {
  background: var(--pc-mist);
  padding: 20px;
  border-top: 1px solid var(--pc-border-soft);
}
.vm-catalog__preview-inner {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--pc-shadow-sm);
}
.vm-catalog__notes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding: 20px 28px;
  background: var(--pc-beige-light);
  border-top: 1px solid var(--pc-border-soft);
}
.vm-catalog__notes h5 { font-family: var(--pc-font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--pc-blue-dark); margin: 0 0 6px; }
.vm-catalog__notes p { margin: 0; font-size: 13.5px; color: var(--pc-fg-muted); }
@media (max-width: 768px) {
  .vm-catalog__meta, .vm-catalog__notes { grid-template-columns: 1fr; }
}