/* =====================================================================
   Valle-Conecta v2 — styles.css
   Sistema de diseño: modo oscuro dominante, acento naranja eléctrico,
   glassmorphism, bento grid. Mobile-first (~360px). Accesible (AA real
   sobre #090d16, targets >=44px, focus visible, prefers-reduced-motion).
   ===================================================================== */

/* ---------------------- TOKENS (Custom Properties) ----------------- */
:root {
  /* Fondo y superficies (paleta Azul Electrico + Cian, estilo Linear/Vercel/Azure) */
  --vc-bg:            #081220;   /* fondo base (sin negro puro) */
  --vc-bg-2:          #0F1A2B;   /* fondo secundario / paneles / sheets */
  --vc-surface:       #162235;   /* tarjetas / inputs */
  --vc-surface-2:     #1B2C45;   /* tarjeta elevada / hover */
  --vc-border:        rgba(255, 255, 255, 0.06);
  --vc-border-fuerte: rgba(255, 255, 255, 0.12);
  --vc-input-border:  #243B53;   /* borde de inputs */

  /* Texto (jerarquia de 4 niveles; los cuatro con contraste AA, 4,5:1 o mas,
     sobre TODOS los fondos, incluida la tarjeta elevada #1B2C45).
     --vc-text-dim era #6B7B8E y NO cumplia: 4,3 sobre el fondo y 3,3 sobre
     una tarjeta, justo en las fechas, los pies de foto y los avisos chicos,
     que ademas se leen al sol en el celular. Con #8595A8 da 6,1 sobre el fondo
     y 4,6 sobre la tarjeta elevada, y sigue por debajo de --vc-text-muted. */
  --vc-text:        #F8FAFC;   /* titulos / alta emfasis */
  --vc-text-normal: #D6E4F0;   /* texto normal (cuerpo) */
  --vc-text-muted:  #A9B7C6;   /* texto secundario */
  --vc-text-dim:    #8595A8;   /* texto terciario: fechas, pies, ayudas */

  /* Marca (azul electrico + cian) */
  --vc-accent:        #3B82F6;   /* azul principal */
  --vc-accent-2:      #38BDF8;   /* cian claro: texto/links/iconos hover */
  --vc-accent-hover:  #2563EB;   /* hover de boton primario */
  --vc-accent-active: #1D4ED8;   /* active de boton primario */
  --vc-accent-weak:   rgba(59, 130, 246, 0.12);
  --vc-accent-glow:   rgba(59, 130, 246, 0.30);
  --vc-on-accent:     #ffffff;   /* texto blanco sobre azul */

  /* Semánticos */
  --vc-vip:        #22D3EE;   /* cian premium */
  --vc-destacado:  #3B82F6;   /* azul destacado */
  --vc-exito:      #22C55E;
  --vc-aviso:      #F59E0B;
  --vc-peligro:    #EF4444;     /* heladas / error */
  --vc-info:       #38BDF8;
  --vc-whatsapp:       #22C55E;   /* boton de WhatsApp (verde) */
  --vc-whatsapp-hover: #16A34A;

  /* Tipografía */
  --vc-font-head: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  --vc-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipografica fluida (clamp): la interfaz "respira" de 320px a 2K
     sin quiebres. El cuerpo se mantiene en 16px como piso de legibilidad
     movil (evita el auto-zoom de iOS); solo escala la jerarquia display. */
  --vc-fs-lead:  clamp(1.05rem, 0.98rem + 0.40vw, 1.20rem);  /* titulos de tarjeta / marca / estado */
  --vc-fs-h2:    clamp(1.15rem, 1.00rem + 0.80vw, 1.40rem);  /* subtitulos de seccion */
  --vc-fs-num:   clamp(1.30rem, 1.10rem + 1.00vw, 1.60rem);  /* numeros SOS */
  --vc-fs-price: clamp(1.90rem, 1.40rem + 2.40vw, 2.60rem);  /* precio de plan */

  /* Radios y espaciado */
  --vc-r-xs: 10px;
  --vc-r-sm: 14px;
  --vc-r:    20px;
  --vc-r-lg: 24px;   /* bento */
  --vc-r-pill: 999px;

  --vc-sp-1: 4px;  --vc-sp-2: 8px;  --vc-sp-3: 12px;
  --vc-sp-4: 16px; --vc-sp-5: 24px; --vc-sp-6: 32px; --vc-sp-7: 48px;

  /* Efectos */
  --vc-blur: blur(18px);
  --vc-glow: 0 0 24px var(--vc-accent-glow);
  --vc-trans: 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --vc-header-h: 64px;
  --vc-nav-h: 64px;
  --vc-max: 1100px;

  --vc-z-header: 50;
  --vc-z-nav: 60;
  --vc-z-sheet: 80;
  --vc-z-toast: 100;
}

/* ---------------------------- RESET -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* El atributo [hidden] debe ocultar SIEMPRE (algunas reglas de display —p.ej.
   .vc-btn— lo anulaban, dejando visible el boton "Cerrar sesion" en el login). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--vc-bg);
  color: var(--vc-text-normal);
  font-family: var(--vc-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* deja espacio para header sticky y bottom-nav fija */
  padding-bottom: calc(var(--vc-nav-h) + env(safe-area-inset-bottom, 0px));
}
body.vc-no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--vc-font-head); font-weight: 600; line-height: 1.1; margin: 0 0 var(--vc-sp-3); letter-spacing: -0.01em; color: var(--vc-text); }
:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 2px; border-radius: 4px; }

/* Accesibilidad: salto de contenido y solo-lector */
.vc-skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--vc-accent); color: var(--vc-on-accent);
  padding: 10px 16px; border-radius: var(--vc-r-sm); font-weight: 700;
  transition: top var(--vc-trans);
}
.vc-skip:focus { top: 8px; }
.vc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------- LAYOUT -------------------------------- */
.vc-main { width: 100%; max-width: var(--vc-max); margin: 0 auto; padding: var(--vc-sp-5) var(--vc-sp-4); }
.vc-seccion { margin-block: var(--vc-sp-7); }
.vc-seccion__titulo { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
.vc-seccion__titulo::after { content: ''; display: block; width: 42px; height: 3px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--vc-accent), var(--vc-vip)); }

/* --------------------------- HEADER -------------------------------- */
.vc-header {
  position: sticky; top: 0; z-index: var(--vc-z-header);
  height: var(--vc-header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vc-sp-3); padding: 0 var(--vc-sp-4);
  background: rgba(11, 22, 38, 0.90);
  -webkit-backdrop-filter: var(--vc-blur); backdrop-filter: var(--vc-blur);
  border-bottom: 1px solid var(--vc-border);
}
.vc-brand { display: flex; align-items: center; gap: var(--vc-sp-2); min-height: 44px; }
.vc-brand__mark { color: var(--vc-accent); font-size: 1.1rem; text-shadow: var(--vc-glow); }
.vc-brand__name { font-family: var(--vc-font-head); font-weight: 600; font-size: var(--vc-fs-lead); letter-spacing: -0.01em; }
/* Logo (isotipo): circular, borde cian, glow sutil, hover suave */
.vc-brand__logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid #00B4D8; box-shadow: 0 0 12px rgba(0, 180, 216, 0.45); transition: opacity var(--vc-trans); display: block; flex-shrink: 0; }
.vc-brand__logo:hover { opacity: 0.8; }
.vc-header__actions { display: flex; align-items: center; gap: var(--vc-sp-2); }
.vc-iconbtn {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--vc-border); border-radius: var(--vc-r-pill);
  color: var(--vc-text); transition: border-color var(--vc-trans), background var(--vc-trans);
}
.vc-iconbtn:hover { border-color: var(--vc-border-fuerte); background: var(--vc-surface); }
.vc-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--vc-sp-4);
  background: var(--vc-accent-weak); color: var(--vc-accent-2);
  border: 1px solid rgba(59, 130, 246, 0.35); border-radius: var(--vc-r-pill);
  font-weight: 600; font-size: 0.9rem;
}

/* ------------------------- BOTTOM NAV ------------------------------ */
.vc-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--vc-z-nav);
  height: calc(var(--vc-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(11, 22, 38, 0.90);
  -webkit-backdrop-filter: var(--vc-blur); backdrop-filter: var(--vc-blur);
  border-top: 1px solid var(--vc-border);
}
.vc-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 44px; color: var(--vc-text-muted);
  font-size: 0.68rem; font-weight: 600; transition: color var(--vc-trans);
}
.vc-nav__icono svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vc-nav__item.is-activa { color: var(--vc-accent); }
.vc-nav__item.is-activa .vc-nav__icono { filter: drop-shadow(0 0 8px var(--vc-accent-glow)); }
.vc-nav__item:hover { color: var(--vc-text); }

/* --------------------------- BOTONES ------------------------------- */
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vc-sp-2);
  min-height: 44px; padding: 0 var(--vc-sp-5);
  border: 1px solid transparent; border-radius: var(--vc-r-pill);
  font-weight: 700; font-size: 0.95rem; transition: transform var(--vc-trans), background var(--vc-trans), border-color var(--vc-trans);
}
.vc-btn:active { transform: translateY(1px); }
/* Un icono dentro de un boton. Faltaba: .vc-btn nunca le puso medida a su
   svg, asi que el unico boton con icono (.vc-ayuda__btn) traia la suya
   propia. Al poner el logo de WhatsApp en los botones de plan, el svg se
   estiraba hasta llenar el boton. Con la medida en la clase base, cualquier
   boton con icono sale bien sin inventarse una regla nueva. */
.vc-btn svg { width: 19px; height: 19px; flex: none; }
.vc-btn--accent { background: var(--vc-accent); color: var(--vc-on-accent); box-shadow: var(--vc-glow); }
.vc-btn--accent:hover { background: var(--vc-accent-hover); }
.vc-btn--accent:active { background: var(--vc-accent-active); }
.vc-btn--ghost { background: transparent; color: var(--vc-text); border-color: var(--vc-accent); }
.vc-btn--ghost:hover { background: var(--vc-accent-weak); }
.vc-btn--bloque { width: 100%; }
/* Boton de WhatsApp (verde) — para acciones de contacto/reserva */
.vc-btn--whatsapp { background: var(--vc-whatsapp); color: #06230F; }
.vc-btn--whatsapp:hover { background: var(--vc-whatsapp-hover); color: #ffffff; }

/* ------------------------- BUSCADOR / PALETA ----------------------- */
.vc-search {
  display: flex; align-items: center; gap: var(--vc-sp-3);
  background: var(--vc-surface); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r); padding: 0 var(--vc-sp-4); min-height: 52px;
  transition: border-color var(--vc-trans), box-shadow var(--vc-trans);
}
.vc-search:focus-within {
  border-color: var(--vc-accent);
  box-shadow: 0 0 0 3px var(--vc-accent-weak), var(--vc-glow);
}
.vc-search input {
  flex: 1; background: transparent; border: 0; color: var(--vc-text);
  font-size: 1rem; min-height: 44px; outline: none;
}
.vc-search input::placeholder { color: var(--vc-text-dim); }
.vc-search svg { width: 20px; height: 20px; fill: none; stroke: var(--vc-text-dim); stroke-width: 2; stroke-linecap: round; }

/* Filtros (chips select) */
.vc-filtros { display: flex; gap: var(--vc-sp-3); flex-wrap: wrap; margin-top: var(--vc-sp-3); }

/* Chips de categoria (navegacion rapida, scroll horizontal) */
.vc-chips {
  display: flex; gap: var(--vc-sp-2);
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px var(--vc-sp-3);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-behavior: smooth; cursor: grab;
  /* Fade en los bordes (JS ajusta --vc-fade-izq/--vc-fade-der segun scroll) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--vc-fade-izq, 0px), #000 calc(100% - var(--vc-fade-der, 0px)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--vc-fade-izq, 0px), #000 calc(100% - var(--vc-fade-der, 0px)), transparent);
}
.vc-chips::-webkit-scrollbar { display: none; }
.vc-chips.is-arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.vc-chip-cat { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-border-fuerte); background: var(--vc-surface); color: var(--vc-text-muted); font-weight: 600; font-size: 0.85rem; white-space: nowrap; cursor: pointer; user-select: none; transition: color var(--vc-trans), border-color var(--vc-trans), background var(--vc-trans), transform var(--vc-trans), box-shadow var(--vc-trans); }
.vc-chip-cat:hover { color: var(--vc-text); border-color: rgba(0, 180, 216, 0.55); transform: translateY(-1px); }
.vc-chip-cat:active { transform: scale(0.96); }
.vc-chip-cat.is-activo { background: var(--vc-accent); color: #fff; border-color: transparent; box-shadow: var(--vc-glow); }
.vc-chip-cat.is-activo:hover { transform: translateY(-1px); }
.vc-select {
  appearance: none; -webkit-appearance: none;
  background: var(--vc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--vc-border); border-radius: var(--vc-r-pill);
  color: var(--vc-text); min-height: 44px; padding: 0 38px 0 var(--vc-sp-4);
  font-size: 0.92rem; font-weight: 600;
}
.vc-select:focus { border-color: var(--vc-accent); outline: none; }

/* --------------------------- BENTO GRID ---------------------------- */
/* UNA columna en telefono. Con dos, en una pantalla de 360px la tarjeta
   queda de 156px: el nombre del negocio se parte en tres lineas, la insignia
   "Direccion Constatada por Agencia" (225px) se corta y los tres botones del
   pie (250px sumados) se salen del borde. Medido, no supuesto.
   La escalera vive TODA aqui —1 -> 2 -> 3 columnas, en orden de fuente— para
   que ninguna regla de mas abajo en la hoja pise a la anterior. */
.vc-bento {
  display: grid; gap: var(--vc-sp-4);
  grid-template-columns: 1fr;
}
.vc-bento--util { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .vc-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .vc-bento { grid-template-columns: repeat(3, 1fr); }
  .vc-bento__ancho { grid-column: span 2; }
  .vc-bento__alto { grid-row: span 2; }
}

/* ---------------------------- TARJETAS ----------------------------- */
.vc-card {
  position: relative; background: var(--vc-surface);
  border: 1px solid rgba(0, 180, 216, 0.30); border-radius: var(--vc-r-lg);
  overflow: hidden; transition: border-color var(--vc-trans), background var(--vc-trans), transform var(--vc-trans), box-shadow var(--vc-trans);
}
.vc-card:hover {
  border-color: rgba(0, 180, 216, 0.65); background: var(--vc-surface-2);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 0 18px -6px rgba(0, 180, 216, 0.35);
}

.vc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vc-bg-2); }
.vc-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78) brightness(0.94); transition: filter var(--vc-trans), transform var(--vc-trans); }
.vc-card:hover .vc-img { filter: saturate(1.05) brightness(1); transform: scale(1.02); }
.vc-img--placeholder { background: linear-gradient(135deg, var(--vc-surface), var(--vc-surface-2)); }

.vc-card__cuerpo { padding: var(--vc-sp-4); display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-card__titulo { font-family: var(--vc-font-head); font-size: var(--vc-fs-lead); font-weight: 600; }
.vc-card__meta { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); color: var(--vc-text-muted); font-size: 0.82rem; }
.vc-card__desc { color: var(--vc-text-muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-card__pie { display: flex; align-items: center; justify-content: space-between; margin-top: var(--vc-sp-2); }

/* --------------------------- BADGES / PILLS ------------------------ */
.vc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--vc-r-pill);
  font-size: 0.72rem; font-weight: 700; border: 1px solid var(--vc-border);
  background: var(--vc-bg-2); color: var(--vc-text-muted); white-space: nowrap;
}
.vc-badge--vip { color: var(--vc-bg); background: linear-gradient(120deg, var(--vc-vip), var(--vc-accent)); border-color: transparent; }
.vc-badge--destacado { color: var(--vc-accent-2); background: var(--vc-accent-weak); border-color: rgba(59, 130, 246, 0.35); }
.vc-badge--verificado { color: var(--vc-exito); border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.08); }

/* Posición de badges sobre la imagen */
.vc-card__flags { position: absolute; top: var(--vc-sp-3); left: var(--vc-sp-3); display: flex; gap: 6px; z-index: 2; }

/* --------------- VIP: contorno de flujo de luz animado ------------- */
@property --vc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vc-card--vip { border-color: transparent; }
.vc-card--vip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  /* Border Beam: haz milimetrico que recorre el perimetro (conic + mask-composite) */
  background: conic-gradient(from var(--vc-ang), transparent 0 72%, var(--vc-accent) 90%, #CFFAFE 99%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: vc-flujo 4s linear infinite; z-index: 2;
}
@keyframes vc-flujo { to { --vc-ang: 360deg; } }

/* --------------------------- SKELETONS ----------------------------- */
.vc-card--skeleton { padding: var(--vc-sp-3); }
.vc-skeleton { position: relative; overflow: hidden; background: var(--vc-surface-2); border-radius: var(--vc-r-sm); }
.vc-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-100%); animation: vc-shimmer 1.4s infinite;
}
.vc-skeleton--img { aspect-ratio: 16 / 10; margin-bottom: var(--vc-sp-3); }
.vc-skeleton--line { height: 12px; margin-top: var(--vc-sp-2); }
.vc-skeleton--short { width: 55%; }
@keyframes vc-shimmer { 100% { transform: translateX(100%); } }

/* ------------------------ ESTADOS (vacío/error) -------------------- */
.vc-estado { grid-column: 1 / -1; text-align: center; padding: var(--vc-sp-7) var(--vc-sp-4); color: var(--vc-text-muted); }
/* Un estado vacio puede ofrecer mas de una salida. En el buscador son dos:
   ampliar la busqueda, o invitar al negocio que no esta publicado todavia. */
.vc-estado__acciones { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); justify-content: center; margin-top: var(--vc-sp-4); }
.vc-estado__icono { margin-bottom: var(--vc-sp-3); line-height: 0; }
/* margin-inline auto: la regla general "img, svg { display: block }" hace
   que el icono no obedezca al text-align del estado, y quedaba pegado a la
   izquierda con el texto centrado (en todos los "todavia no hay..."). */
.vc-estado__icono svg { width: 2.6rem; height: 2.6rem; margin-inline: auto; }
.vc-estado--vacio .vc-estado__icono { color: var(--vc-text-dim); }
.vc-estado--error .vc-estado__icono { color: var(--vc-peligro); }
/* Icono SVG en linea dentro de texto (pin de municipio, etc.): sigue color y tamaño. */
.vc-ic-inline { width: 0.85em; height: 0.85em; vertical-align: -0.13em; margin-right: 3px; flex: 0 0 auto; }
.vc-estado__titulo { font-family: var(--vc-font-head); color: var(--vc-text); font-size: var(--vc-fs-lead); margin-bottom: var(--vc-sp-2); }
.vc-estado__texto { font-size: 0.92rem; margin-bottom: var(--vc-sp-4); }
.vc-estado--error .vc-estado__titulo { color: var(--vc-peligro); }

/* --------------------- SELLO DE FRESCURA / OFFLINE ----------------- */
.vc-sello { font-size: 0.78rem; color: var(--vc-text-dim); display: inline-flex; align-items: center; gap: 6px; }
.vc-sello::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vc-exito); }
.vc-sello--offline { color: var(--vc-aviso); }
.vc-sello--offline::before { background: var(--vc-aviso); }

/* --------------------- ALERTA (heladas / avisos) ------------------- */
.vc-alerta {
  display: flex; align-items: center; gap: var(--vc-sp-3);
  padding: var(--vc-sp-4); border-radius: var(--vc-r);
  border: 1px solid; font-weight: 600;
}
.vc-alerta--helada { background: rgba(239, 68, 68, 0.10); border-color: var(--vc-peligro); color: #ffd2d2; box-shadow: 0 0 28px -8px var(--vc-peligro); }
.vc-alerta--aviso { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.45); color: #FCE3B8; }

/* ----------------------------- TOAST ------------------------------- */
.vc-toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--vc-nav-h) + 16px); z-index: var(--vc-z-toast);
  display: flex; flex-direction: column; gap: var(--vc-sp-2); width: min(92vw, 420px);
}
.vc-toast {
  background: var(--vc-surface-2); color: var(--vc-text);
  border: 1px solid var(--vc-border-fuerte); border-left: 3px solid var(--vc-accent);
  border-radius: var(--vc-r-sm); padding: var(--vc-sp-3) var(--vc-sp-4); font-size: 0.9rem;
  opacity: 0; transform: translateY(10px); transition: opacity var(--vc-trans), transform var(--vc-trans);
}
.vc-toast.is-visible { opacity: 1; transform: translateY(0); }
.vc-toast--exito { border-left-color: var(--vc-exito); }
.vc-toast--error { border-left-color: var(--vc-peligro); }
.vc-toast--aviso { border-left-color: var(--vc-aviso); }

/* ----------------------- HOJA "MAS" (sheet) ------------------------ */
.vc-sheet { position: fixed; inset: 0; z-index: var(--vc-z-sheet); }
.vc-sheet[hidden] { display: none; }
.vc-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity var(--vc-trans); }
.vc-sheet.is-abierta .vc-sheet__backdrop { opacity: 1; }
.vc-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--vc-surface); border-top: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-lg) var(--vc-r-lg) 0 0; padding: var(--vc-sp-4) var(--vc-sp-4) calc(var(--vc-sp-5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform var(--vc-trans);
}
.vc-sheet.is-abierta .vc-sheet__panel { transform: translateY(0); }
/* LA SOLAPA (fase 56): el menu "Mas" no sube como una bandeja, se despliega
   desde abajo como el desplegable de una revista: arranca acostado, lejos
   de la vista, y se para. Al cerrar se vuelve a acostar. Solo transform y
   opacity. Con "reducir movimiento" sube como antes. */
@media (prefers-reduced-motion: no-preference) {
  #vc-sheet-mas .vc-sheet__panel {
    transform-origin: 50% 100%;
    transform: perspective(1400px) rotateX(78deg);
    opacity: 0;
    transition: transform 0.46s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.2s ease;
  }
  #vc-sheet-mas.is-abierta .vc-sheet__panel { transform: perspective(1400px) rotateX(0deg); opacity: 1; }
}
.vc-sheet__handle { width: 44px; height: 4px; border-radius: 4px; background: var(--vc-border-fuerte); margin: 0 auto var(--vc-sp-4); }
.vc-sheet__titulo { font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-4); }
@media (min-width: 720px) {
  .vc-sheet__panel { max-width: 680px; margin-inline: auto; left: var(--vc-sp-4); right: var(--vc-sp-4); border-radius: var(--vc-r-lg); bottom: calc(var(--vc-nav-h) + var(--vc-sp-4)); }
}

/* Menu "Mas": grilla de tiles vivos (icono SVG + descripcion). Cada tile es
   .vc-card, asi hereda el glow que sigue al cursor. Hover: el icono escala y
   gira; entrada escalonada al abrir la hoja (solo transform/opacity). */
.vc-mas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vc-sp-3); margin-bottom: var(--vc-sp-4); }
@media (min-width: 560px) { .vc-mas-grid { grid-template-columns: repeat(3, 1fr); } }
.vc-mas-tile { display: flex; align-items: center; gap: var(--vc-sp-3); padding: var(--vc-sp-4); min-height: 68px; }
.vc-mas-tile__ic {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--vc-r-sm); background: var(--vc-accent-weak); color: var(--vc-accent-2);
  border: 1px solid rgba(56, 189, 248, 0.25);
  transition: transform var(--vc-trans), background var(--vc-trans), color var(--vc-trans);
}
.vc-mas-tile__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-mas-tile:hover .vc-mas-tile__ic { transform: scale(1.12) rotate(-5deg); background: var(--vc-accent); color: var(--vc-on-accent); }
.vc-mas-tile__txt { display: flex; flex-direction: column; min-width: 0; }
.vc-mas-tile__label { font-weight: 700; font-size: 0.95rem; color: var(--vc-text); }
.vc-mas-tile__desc { font-size: 0.76rem; color: var(--vc-text-muted); }
.vc-sheet.is-abierta .vc-mas-tile { animation: vc-mas-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i) * 45ms + 80ms); }
@keyframes vc-mas-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.vc-sheet__cerrar { width: 100%; }

/* ------------------- HERO (inicio) — base reutilizable ------------- */
.vc-hero { padding-block: var(--vc-sp-6) var(--vc-sp-5); text-align: center; }
.vc-hero__titulo { font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; }
.vc-hero__grad { background: linear-gradient(100deg, var(--vc-accent), var(--vc-vip)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-hero__sub { color: var(--vc-text-muted); max-width: 40ch; margin: var(--vc-sp-3) auto var(--vc-sp-5); }

/* ----------------- TEMA OSCURO PARA SWEETALERT2 -------------------- */
.vc-swal.swal2-popup {
  background: var(--vc-surface) !important; color: var(--vc-text) !important;
  border: 1px solid var(--vc-border-fuerte); border-radius: var(--vc-r-lg) !important;
}
.vc-swal .swal2-title, .vc-swal__titulo { color: var(--vc-text) !important; font-family: var(--vc-font-head); }
.vc-swal .swal2-html-container, .vc-swal__cuerpo { color: var(--vc-text-muted) !important; }
.vc-swal__lista { text-align: left; margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-swal .swal2-actions { gap: var(--vc-sp-3); }

/* --------------------- FORMULARIOS (registro/editar) --------------- */
.vc-campo { display: flex; flex-direction: column; gap: var(--vc-sp-2); margin-bottom: var(--vc-sp-4); }
.vc-campo label { font-weight: 600; font-size: 0.9rem; }
.vc-campo input, .vc-campo textarea, .vc-campo select {
  background: var(--vc-surface); border: 1px solid var(--vc-input-border); border-radius: var(--vc-r-sm);
  color: var(--vc-text); padding: 12px var(--vc-sp-4); min-height: 48px; font-size: 1rem; width: 100%;
}
.vc-campo input:focus, .vc-campo textarea:focus, .vc-campo select:focus { border-color: var(--vc-accent); outline: none; box-shadow: 0 0 0 3px var(--vc-accent-weak); }
.vc-campo--error input { border-color: var(--vc-peligro); }
/* 0.86rem y no 0.78: a 0.78 la ayuda caia en ~11px reales, ilegible para
   alguien de 60 años mirando el celular al sol. Es el tamaño minimo del
   proyecto para texto que hay que poder leer. */
.vc-campo__ayuda { font-size: 0.86rem; line-height: 1.5; color: var(--vc-text-dim); }
.vc-campo__error { font-size: 0.86rem; line-height: 1.5; color: var(--vc-peligro); }

/* --------------------------- UTILIDADES ---------------------------- */
.vc-cont { width: 100%; max-width: var(--vc-max); margin-inline: auto; }
.vc-flex { display: flex; gap: var(--vc-sp-3); align-items: center; }
.vc-mt-4 { margin-top: var(--vc-sp-4); }
.vc-text-muted { color: var(--vc-text-muted); }

/* ----------------- ASISTENTE MULTI-PASO (registro) ---------------- */
.vc-wizard__pasos { list-style: none; display: flex; gap: var(--vc-sp-2); padding: 0; margin: var(--vc-sp-5) 0; counter-reset: paso; }
.vc-wizard__pasos li { flex: 1; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--vc-text-dim); padding-top: 22px; position: relative; }
.vc-wizard__pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vc-surface); border: 1px solid var(--vc-border); color: var(--vc-text-dim);
}
.vc-wizard__pasos li.is-activo { color: var(--vc-accent); }
.vc-wizard__pasos li.is-activo::before { background: var(--vc-accent); color: var(--vc-on-accent); border-color: transparent; }
.vc-wizard__paso { border: 0; padding: 0; margin: 0 0 var(--vc-sp-5); }
.vc-wizard__nav { display: flex; justify-content: space-between; gap: var(--vc-sp-3); margin-top: var(--vc-sp-5); }
.vc-campo__label-strong { font-weight: 700; font-size: 0.9rem; display: block; margin-bottom: var(--vc-sp-2); }

/* ------------------------ DRAG & DROP ----------------------------- */
.vc-dropzone__area {
  border: 1.5px dashed var(--vc-border-fuerte); border-radius: var(--vc-r);
  padding: var(--vc-sp-5); text-align: center; color: var(--vc-text-muted);
  transition: border-color var(--vc-trans), background var(--vc-trans);
}
.vc-dropzone__area.is-arrastrando { border-color: var(--vc-accent); background: var(--vc-accent-weak); }
.vc-dropzone__previo { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); margin-top: var(--vc-sp-3); }
.vc-preview { position: relative; width: 80px; height: 80px; border-radius: var(--vc-r-sm); overflow: hidden; border: 1px solid var(--vc-border); }
.vc-preview img { width: 100%; height: 100%; object-fit: cover; }
.vc-preview__quitar {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff; border: 0; font-size: 1rem; line-height: 1; display: grid; place-items: center;
}

/* ------------------------ CHECKBOX terminos ----------------------- */
.vc-check { display: flex; align-items: flex-start; gap: var(--vc-sp-3); margin: var(--vc-sp-4) 0; font-size: 0.92rem; color: var(--vc-text-muted); }
.vc-check input { width: 22px; height: 22px; min-width: 22px; accent-color: var(--vc-accent); margin-top: 2px; }
.vc-check a { color: var(--vc-accent-2); text-decoration: underline; }

/* ----------------------------- OTP -------------------------------- */
.vc-otp { background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: var(--vc-r); padding: var(--vc-sp-4); margin-bottom: var(--vc-sp-4); }
.vc-otp__titulo { font-size: 1.05rem; }
.vc-otp__metodos { display: flex; gap: var(--vc-sp-2); background: var(--vc-bg-2); padding: 4px; border-radius: var(--vc-r-pill); margin-bottom: var(--vc-sp-4); }
.vc-otp__metodo { flex: 1; min-height: 40px; border: 0; border-radius: var(--vc-r-pill); background: transparent; color: var(--vc-text-muted); font-weight: 600; }
.vc-otp__metodo.is-activo { background: var(--vc-accent); color: var(--vc-on-accent); }
.vc-otp__estado { font-size: 0.85rem; margin-top: var(--vc-sp-3); min-height: 1.2em; }
.vc-otp__estado.is-error { color: var(--vc-peligro); }
.vc-otp__estado.is-ok { color: var(--vc-exito); }

/* --------------------- DETALLE (hoja de negocio) ------------------ */
.vc-detalle { max-height: 88vh; overflow-y: auto; }
.vc-detalle__media { border-radius: var(--vc-r); overflow: hidden; aspect-ratio: 16/10; margin-bottom: var(--vc-sp-3); }
.vc-detalle__acciones { display: flex; flex-direction: column; gap: var(--vc-sp-3); margin-top: var(--vc-sp-4); }

/* ----------------------- ESTADO de exito -------------------------- */
.vc-estado--exito .vc-estado__titulo { color: var(--vc-exito); }

/* ============== PREFERS-REDUCED-MOTION (no opcional) ============== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .vc-card:hover .vc-img { transform: none; }
  .vc-card--vip::before { animation: none; }
  .vc-skeleton::after { animation: none; }
  .vc-farmacia__badge::before { animation: none; }
}

/* ===================== FASE 4 — HUB DE UTILIDAD ==================== */
/* Control segmentado (pestañas / filtros) */
.vc-seg { display: flex; gap: 4px; background: var(--vc-bg-2); padding: 4px; border-radius: var(--vc-r-pill); margin-bottom: var(--vc-sp-4); overflow-x: auto; scrollbar-width: none; }
.vc-seg::-webkit-scrollbar { display: none; }
.vc-seg__btn { flex: 1 0 auto; min-height: 44px; padding: 0 var(--vc-sp-4); border: 0; border-radius: var(--vc-r-pill); background: transparent; color: var(--vc-text-muted); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.vc-seg__btn.is-activo { background: var(--vc-accent); color: var(--vc-on-accent); }

/* Sub-secciones de utilidad */
.vc-util-sec { margin-block: var(--vc-sp-6); }
.vc-util-sec__cab { display: flex; align-items: center; gap: var(--vc-sp-2); margin-bottom: var(--vc-sp-3); }
.vc-util-sec__cab h2 { font-size: var(--vc-fs-h2); margin: 0; }

/* Farmacia de turno */
.vc-farmacia { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-3); }
.vc-farmacia--activa { border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 0 26px -10px var(--vc-exito); }
/* La tarjeta del turno de hoy lleva dos botones (WhatsApp y compartir): en
   pantalla angosta bajan uno debajo del otro en vez de apretarse. */
.vc-farmacia__acciones { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); flex: 0 0 auto; }
@media (max-width: 400px) { .vc-farmacia { flex-wrap: wrap; } .vc-farmacia__acciones { width: 100%; } }
.vc-farmacia__badge { color: var(--vc-exito); font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.vc-farmacia__badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-exito); box-shadow: 0 0 8px var(--vc-exito); animation: vc-pulso 1.6s infinite; }
@keyframes vc-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Emergencias SOS */
.vc-sos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--vc-sp-3); }
.vc-sos__btn { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: var(--vc-sp-4); min-height: 72px; border-radius: var(--vc-r); border: 1px solid var(--vc-border-fuerte); background: var(--vc-surface); color: var(--vc-text); min-width: 0; overflow: hidden; }
.vc-sos__btn--rojo { border-color: var(--vc-peligro); background: rgba(239, 68, 68, 0.08); }
.vc-sos__tipo { font-size: 0.72rem; color: var(--vc-text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
/* Numeros cortos (110, 119) grandes; los largos (+591...) se achican y, si aun
   asi no caben, quiebran de linea en vez de salirse de la tarjeta. */
.vc-sos__num { font-family: var(--vc-font-head); font-size: var(--vc-fs-num); font-weight: 700; max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
.vc-sos__num--largo { font-size: clamp(0.92rem, 0.82rem + 0.5vw, 1.15rem); letter-spacing: -0.02em; }

/* Clima — tira de proximas horas (el panel "cielo vivo" vive en su bloque) */
.vc-hora { flex: 0 0 auto; width: 74px; text-align: center; padding: var(--vc-sp-3) var(--vc-sp-2); background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: var(--vc-r-sm); }
.vc-hora__t { font-weight: 700; }
.vc-hora__h { font-size: 0.72rem; color: var(--vc-text-dim); }
.vc-hora--fria { border-color: rgba(90, 160, 255, 0.45); }
/* El icono de cada hora: dice EN CUAL de las 24 horas se nubla o llueve, que
   es justamente lo que una fila de numeros sueltos no puede decir. */
.vc-hora__ic { width: 26px; height: 26px; margin: 6px auto 4px; color: var(--vc-text-muted); }
.vc-hora__ic svg { width: 100%; height: 100%; display: block; }
.vc-hora--fria .vc-hora__ic { color: #7DD3FC; }

/* ---- Precios de la feria (fase 28) --------------------------------
   Una fila por producto: nombre y unidad a la izquierda, precio grande al
   medio, y la variacion a la derecha. La flecha es lo que se mira primero,
   asi que lleva color propio: verde cuando baja (bueno para el que compra),
   rojo cuando sube. */
.vc-precios { display: flex; flex-direction: column; gap: 2px; }
.vc-precios__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-3); flex-wrap: wrap; margin-bottom: var(--vc-sp-3); }
.vc-precios__fecha { color: var(--vc-text-muted); font-size: 0.9rem; margin: 0; }
.vc-precios__pie { color: var(--vc-text-dim); font-size: 0.78rem; margin-top: var(--vc-sp-4); line-height: 1.5; }
.vc-precio {
  display: grid; align-items: center; gap: var(--vc-sp-3);
  grid-template-columns: 1fr auto 4.6rem;
  padding: var(--vc-sp-3);
  border-radius: var(--vc-r-sm);
  transition: background var(--vc-trans);
}
.vc-precio:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.vc-precio:hover { background: var(--vc-surface); }
.vc-precio__prod { display: flex; flex-direction: column; min-width: 0; }
.vc-precio__nombre { font-weight: 700; }
.vc-precio__unidad { font-size: 0.76rem; color: var(--vc-text-dim); }
.vc-precio__monto { font-family: var(--vc-font-head); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.vc-precio__var { font-size: 0.8rem; font-weight: 700; text-align: right; color: var(--vc-text-dim); white-space: nowrap; }
.vc-precio__flecha { font-size: 1rem; margin-right: 2px; }
.vc-precio.es-sube .vc-precio__var { color: #FF8A8A; }
.vc-precio.es-baja .vc-precio__var { color: #6EE7A8; }
.vc-precio.es-nuevo .vc-precio__var { color: var(--vc-accent-2); }
/* Fila cuyo precio viene de una carga anterior: se atenua para que no se
   confunda con los de hoy, y ademas la etiqueta dice de que dia es. */
.vc-precio.es-viejo .vc-precio__monto { opacity: 0.65; }

@media (max-width: 360px) {
  .vc-precio { grid-template-columns: 1fr auto 3.4rem; gap: var(--vc-sp-2); }
  .vc-precio__monto { font-size: 1rem; }
}

/* Grilla de carga de precios (panel, fase 28). Filas compactas para poder
   bajar rapido: nombre, precio, unidad y el numero anterior de referencia. */
.vc-pf-grupo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-text-dim); margin: var(--vc-sp-4) 0 var(--vc-sp-2); }
.vc-pf-lista { display: flex; flex-direction: column; gap: 4px; }
.vc-pf-fila { display: grid; grid-template-columns: 1fr 5.5rem 6.5rem 5.5rem; gap: var(--vc-sp-2); align-items: center; }
.vc-pf-nombre { font-size: 0.9rem; font-weight: 600; }
.vc-pf-fila input, .vc-pf-fila select { padding: 6px 8px; font-size: 0.9rem; }
.vc-pf-antes { font-size: 0.72rem; color: var(--vc-text-dim); text-align: right; }
/* Fila que acaba de llenar el dictado o el pegado: se resalta para poder
   revisar de un vistazo lo que entendio antes de guardar. */
.vc-pf-fila.es-dictada .vc-pf-precio { border-color: var(--vc-accent); background: var(--vc-accent-weak); }

/* ---- Salud de los datos (fase 37) ---------------------------------
   Va arriba del panel, asi que tiene que ser LEIBLE Y CALLADA: si grita
   cuando todo esta bien, en una semana deja de mirarse. Cerrada muestra
   una linea; abierta, el detalle de cada area. */
.vc-salud { border: 1px solid var(--vc-border-fuerte); border-radius: var(--vc-r-sm); background: var(--vc-superficie, rgba(255,255,255,0.02)); }
.vc-salud__resumen { display: flex; align-items: center; gap: 10px; padding: var(--vc-sp-3) var(--vc-sp-4); cursor: pointer; list-style: none; }
.vc-salud__resumen::-webkit-details-marker { display: none; }
.vc-salud__resumen::after { content: '▸'; margin-left: auto; color: var(--vc-text-dim); transition: transform .15s ease; }
.vc-salud[open] .vc-salud__resumen::after { transform: rotate(90deg); }
.vc-salud__mini { color: var(--vc-text-dim); font-size: .82rem; }
.vc-salud__cuerpo { display: grid; gap: var(--vc-sp-3); padding: 0 var(--vc-sp-4) var(--vc-sp-4); }
.vc-salud__fila { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.45; }
.vc-salud__det { color: var(--vc-text-dim); font-size: .82rem; margin-top: 2px; }
/* El punto es el unico color: alcanza para ordenar la mirada sin pintar
   media pantalla de rojo. */
.vc-salud__punto { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--vc-text-dim); }
.vc-salud__punto.is-bien   { background: var(--vc-exito); }
.vc-salud__punto.is-aviso  { background: var(--vc-aviso); }
.vc-salud__punto.is-mal    { background: var(--vc-peligro); }
.vc-salud__punto.is-neutro { background: var(--vc-text-dim); opacity: .5; }

/* ---- Avisar un bloqueo o un corte (fase 40) ------------------------
   Cuando no hay ningun aviso vigente el panel ya no se esconde: queda
   esta sola linea. Es justo el momento en que alguien necesita avisar,
   porque el que quedo varado es el primero que se entera. */
.vc-noticias--calmo { padding: 0; border: 0; background: none; }
.vc-avisar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: var(--vc-sp-3) var(--vc-sp-4);
  border: 1px dashed var(--vc-border-fuerte); border-radius: var(--vc-r-sm);
  background: none; color: var(--vc-text-2, inherit); font: inherit;
  font-size: .92rem; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.vc-avisar:hover { border-color: var(--vc-accent); background: var(--vc-accent-weak); }
.vc-avisar__ic { flex: 0 0 auto; width: 18px; height: 18px; color: var(--vc-aviso); }
.vc-avisar__ic svg { width: 100%; height: 100%; }
.vc-avisar--pie { margin-top: var(--vc-sp-3); }

/* Modal del formulario. Simple a proposito: quien lo abre suele estar
   parado en la ruta con una mano ocupada. */
.vc-modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--vc-sp-4); background: rgba(4, 9, 18, 0.72);
  backdrop-filter: blur(2px); overflow-y: auto;
}
.vc-modal__caja {
  position: relative; width: min(520px, 100%);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-sm); padding: var(--vc-sp-5); margin: auto;
}
.vc-modal__titulo { font-size: var(--vc-fs-h2); margin: 0 0 var(--vc-sp-2); }
.vc-modal__bajada { color: var(--vc-text-dim); font-size: .9rem; margin: 0 0 var(--vc-sp-4); }
.vc-modal__cerrar {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  display: grid; place-items: center; background: none; cursor: pointer;
  border: 1px solid var(--vc-border-fuerte); border-radius: 50%; color: inherit;
}
.vc-modal__cerrar svg { width: 16px; height: 16px; }

/* ---- QR de registro en el panel (fase 42) --------------------------
   El lienzo va sobre blanco pase lo que pase: un QR sobre fondo oscuro no
   lo lee la camara de nadie, y el panel esta en oscuro. */
.vc-qr-caja { display: flex; gap: var(--vc-sp-4); flex-wrap: wrap; align-items: flex-start; }
.vc-qr-caja canvas {
  background: #fff; padding: 10px; border-radius: 12px;
  border: 1px solid var(--vc-border-fuerte); flex: 0 0 auto;
}
.vc-qr-lado { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--vc-sp-3); }
/* ---- La foto de quien atiende (fase 47) ----------------------------
   Chica y redonda al lado del nombre: es una persona, no el local. Mas
   grande en los rubros donde la persona ES el servicio. Nunca hay hueco:
   si no cargaron foto, el bloque es solo el titulo, como antes. */
.vc-persona { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vc-persona__texto { min-width: 0; }
.vc-persona__foto {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--vc-surface-2);
  border: 2px solid var(--vc-border-fuerte);
}
.vc-persona__foto.es-grande {
  width: 72px; height: 72px; border-color: var(--vc-accent);
  box-shadow: 0 0 0 3px var(--vc-accent-weak);
}
.vc-persona__pie { margin: 2px 0 0; font-size: .78rem; color: var(--vc-text-dim); }
.vc-persona__movil {
  margin: 4px 0 0; font-size: .82rem; color: var(--vc-text-muted);
  font-variant-numeric: tabular-nums;
}

.vc-qr-url {
  margin: 0; font-size: .78rem; color: var(--vc-text-dim);
  overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 560px) {
  .vc-pf-fila { grid-template-columns: 1fr 4.6rem 5.4rem; }
  .vc-pf-antes { display: none; }
}

/* Clasificados */
.vc-clasificado--destacado { border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 24px -10px var(--vc-accent-glow); }

/* Agenda / eventos */
.vc-evento__fecha { color: var(--vc-accent-2); font-weight: 800; font-size: 0.8rem; }
.vc-evento--vip { grid-column: 1 / -1; }

/* Redes / embeds */
.vc-embed { background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: var(--vc-r); overflow: hidden; }
.vc-embed iframe, .vc-embed blockquote { width: 100% !important; border: 0; display: block; margin: 0; }
.vc-embed__pie { padding: var(--vc-sp-3) var(--vc-sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-2); }

/* Contenedor publicitario VIP */
.vc-adslot { border: 1px dashed rgba(59, 130, 246, 0.4); border-radius: var(--vc-r); padding: var(--vc-sp-4); text-align: center; color: var(--vc-text-dim); background: var(--vc-accent-weak); }

/* ===================== FASE 6 — LEGAL / PLANES / SELLO ============= */
/* Sello "Direccion Constatada por Agencia" */
.vc-sello-agencia { display: inline-flex; align-items: center; gap: 5px; cursor: help; color: var(--vc-exito); border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.08); }

/* Prosa legal */
.vc-prosa { max-width: 70ch; }
.vc-prosa h2 { font-size: var(--vc-fs-h2); margin-top: var(--vc-sp-6); }
.vc-prosa p, .vc-prosa li { color: var(--vc-text-muted); }
.vc-prosa ul { padding-left: 1.2em; }
.vc-aviso-legal { border-left: 3px solid var(--vc-aviso); background: rgba(245, 158, 11, 0.08); padding: var(--vc-sp-4); border-radius: var(--vc-r-sm); color: #FCE3B8; margin: var(--vc-sp-4) 0; }

/* Acordeon FAQ (details/summary nativo, accesible) */
.vc-faq { border: 1px solid var(--vc-border); border-radius: var(--vc-r); background: var(--vc-surface); margin-bottom: var(--vc-sp-3); overflow: hidden; }
.vc-faq summary { list-style: none; cursor: pointer; padding: var(--vc-sp-4); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: var(--vc-sp-3); min-height: 44px; }
.vc-faq summary::-webkit-details-marker { display: none; }
.vc-faq summary::after { content: '+'; color: var(--vc-accent); font-size: 1.4rem; line-height: 1; }
.vc-faq[open] summary::after { content: '\2212'; }
.vc-faq__cuerpo { padding: 0 var(--vc-sp-4) var(--vc-sp-4); color: var(--vc-text-muted); }

/* Tabla de precios asimetrica (VIP al centro, destacada) */
.vc-precios { display: grid; gap: var(--vc-sp-4); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .vc-precios { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.vc-plan { background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: var(--vc-r-lg); padding: var(--vc-sp-5); display: flex; flex-direction: column; gap: var(--vc-sp-3); }
.vc-plan__nombre { font-family: var(--vc-font-head); font-size: var(--vc-fs-h2); }
.vc-plan__precio { font-family: var(--vc-font-head); font-size: var(--vc-fs-price); font-weight: 700; }
.vc-plan__precio small { font-size: 0.9rem; color: var(--vc-text-dim); font-weight: 500; }
.vc-plan__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vc-sp-2); color: var(--vc-text-muted); font-size: 0.92rem; }
.vc-plan__lista li::before { content: '\2713 '; color: var(--vc-exito); font-weight: 800; }
.vc-plan--vip { position: relative; border-color: transparent; background: linear-gradient(180deg, rgba(59, 130, 246, 0.10), var(--vc-surface)); box-shadow: 0 0 40px -12px var(--vc-accent-glow); }
@media (min-width: 760px) { .vc-plan--vip { transform: scale(1.04); z-index: 1; } }
.vc-plan--vip::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--vc-ang), transparent 0 72%, var(--vc-accent) 90%, #CFFAFE 99%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: vc-flujo 4s linear infinite; }

/* ============ MEJORAS "$10K" (imagen con intencion, movimiento, hero) ==== */
/* Placeholder de tarjeta con glifo de categoria (se ve intencional sin foto) */
.vc-img--placeholder { position: relative; }
.vc-img__glifo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; opacity: 0.5; }

/* Revelado sutil al entrar en viewport (lo activa/omite el JS segun reduced-motion) */
.vc-reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.vc-reveal.is-visible { opacity: 1; transform: none; }

/* Hero base */
.vc-hero { position: relative; overflow: hidden; }

/* ---- Slideshow del hero (fotos de los pueblos, fade + zoom lento) ---- */
.vc-hero--slider {
  min-height: clamp(460px, 80vh, 760px);
  display: grid; align-items: end; justify-items: stretch;
  border: 1px solid rgba(0, 180, 216, 0.28);
  border-radius: var(--vc-r-lg);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.60);
}
/* El fondo es un 30% mas alto que el hero (15% arriba y 15% abajo). Ese
   excedente es lo que le permite desplazarse con el scroll sin dejar un
   borde vacio; .vc-hero tiene overflow:hidden, asi que nunca se ve de mas.
   Sin parallax (o con movimiento reducido) el recorte simplemente queda un
   poco mas cerrado, que no se nota. */
.vc-hero__slider {
  position: absolute; inset: -15% 0; z-index: 0;
  background: linear-gradient(160deg, #0F1A2B, #081220);
  will-change: transform;
}
.vc-hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease-in-out; will-change: opacity, transform;
}
.vc-hero__slide.is-rota { display: none; } /* imagen faltante: se muestra el degradado */
.vc-hero__slide.is-activa { opacity: 1; }
/* Ken Burns (zoom + paneo lento): solo si el usuario no pidio reducir movimiento.
   El fundido cruzado (opacity) si aplica siempre. */
@media (prefers-reduced-motion: no-preference) {
  .vc-hero__slide.is-activa { animation: vc-kb 6.5s ease-out both; }
  .vc-hero__slide.is-activa:nth-child(even) { animation-name: vc-kb2; }
}
@keyframes vc-kb  { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes vc-kb2 { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(2%, 1.5%); } }
.vc-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 18, 32, 0.94) 0%, rgba(8, 18, 32, 0.60) 28%, rgba(8, 18, 32, 0.15) 58%, rgba(8, 18, 32, 0) 100%); }
.vc-hero__contenido { position: relative; z-index: 2; width: 100%; text-align: center; display: grid; justify-items: center; padding: var(--vc-sp-6) var(--vc-sp-4) calc(var(--vc-sp-7) + 16px); }
/* Contenido del hero sobre la foto: sin caja que tape la imagen; la
   legibilidad la dan el degradado inferior + drop-shadow del texto. */
.vc-hero__panel {
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column; align-items: center; gap: var(--vc-sp-4);
}
.vc-hero__panel .vc-hero__sub { margin: 0; color: #E8F0FA; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.vc-hero__panel .vc-search { width: 100%; margin-top: var(--vc-sp-2); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5); }
.vc-hero--slider .vc-hero__titulo { font-size: clamp(2.2rem, 10vw, 3.6rem); filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.65)); }

/* Puntos indicadores del slideshow */
.vc-hero__dots {
  position: absolute; z-index: 3; bottom: var(--vc-sp-4); left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  background: rgba(0, 0, 0, 0.42); border-radius: var(--vc-r-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vc-hero__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.40); cursor: pointer; transition: width var(--vc-trans), background var(--vc-trans), box-shadow var(--vc-trans); }
.vc-hero__dot:hover { background: rgba(255, 255, 255, 0.7); }
.vc-hero__dot.is-activa { width: 24px; border-radius: 4px; background: var(--vc-accent); box-shadow: var(--vc-glow); }

/* ============ EFECTOS PREMIUM (Word Rotate + Glow interactiva) ======= */
/* Word Rotate: la palabra actual sale hacia arriba con blur y la nueva entra
   desde abajo con easing elastico. Solo transform/opacity/filter (60fps). */
.vc-hero__rot {
  display: inline-block; will-change: transform, opacity, filter;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease-out, filter 0.45s ease-out;
}
.vc-hero__rot.is-saliendo {
  transform: translateY(-0.6em); opacity: 0; filter: blur(6px);
  transition: transform 0.3s ease-in, opacity 0.3s ease-in, filter 0.3s ease-in;
}
.vc-hero__rot.is-entrando { transform: translateY(0.75em); opacity: 0; filter: blur(8px); transition: none; }

/* Glow interactiva: resplandor radial que sigue el cursor/toque en cualquier
   tarjeta del bento. El JS actualiza --mx/--my con throttle de rAF. */
.vc-card, .vc-plan, .vc-sos__btn, .vc-embed { --mx: 50%; --my: 50%; }
/* Las superficies especializadas necesitan contexto de apilado para el ::after */
.vc-plan, .vc-sos__btn, .vc-embed { position: relative; }
.vc-card::after, .vc-plan::after, .vc-sos__btn::after, .vc-embed::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(59, 130, 246, 0.16), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
.vc-card:hover::after, .vc-card.is-glow::after,
.vc-plan:hover::after, .vc-plan.is-glow::after,
.vc-sos__btn:hover::after, .vc-sos__btn.is-glow::after,
.vc-embed:hover::after, .vc-embed.is-glow::after { opacity: 1; }

/* ===================== CLIMA PREMIUM ("cielo vivo") ================= */
/* Tarjeta meteorologica cuyo cielo cambia segun la condicion real, con
   efectos animados (lluvia / nieve / estrellas / sol) construidos SOLO con
   transform+opacity, panel de fase lunar (SVG) y alertas. El skeleton
   reutiliza la MISMA estructura -> reserva identica altura (anti-CLS).
   Todos los efectos se desactivan bajo prefers-reduced-motion. */
.vc-clima-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--vc-r-lg);
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(160deg, #26374F 0%, #16233A 70%, #101B2C 100%); /* fallback: nublado */
  color: var(--vc-text);
  min-height: clamp(260px, 62vw, 340px);
}
.vc-clima-hero--clear-day   { background: linear-gradient(160deg, #1E3A5F 0%, #12233A 70%, #0C1A2E 100%); }
.vc-clima-hero--clear-night { background: linear-gradient(160deg, #0C1A38 0%, #0A1024 60%, #060B18 100%); }
.vc-clima-hero--cloud       { background: linear-gradient(160deg, #26374F 0%, #16233A 70%, #101B2C 100%); }
.vc-clima-hero--rain        { background: linear-gradient(160deg, #1C3A4C 0%, #122838 70%, #0C1B27 100%); }
.vc-clima-hero--storm       { background: linear-gradient(160deg, #241C3A 0%, #171834 65%, #0E0F1E 100%); }
.vc-clima-hero--snow        { background: linear-gradient(160deg, #2C3E56 0%, #1B2B3E 70%, #14202E 100%); }
.vc-clima-hero--fog         { background: linear-gradient(160deg, #2A333F 0%, #1B222C 70%, #141A22 100%); }

/* Glow que sigue al cursor sobre la tarjeta de clima. Capa propia en z-index 0
   (detras del contenido en z-index 1) para iluminar la superficie sin lavar el
   texto ni la luna. El JS actualiza --mx/--my; se apaga con reduced-motion N/A
   (es opacity, no movimiento). */
.vc-clima-hero { --mx: 50%; --my: 50%; }
.vc-clima-hero::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(56, 189, 248, 0.20), transparent 62%);
  opacity: 0; transition: opacity 0.3s ease;
}
.vc-clima-hero:hover::after, .vc-clima-hero.is-glow::after { opacity: 1; }

.vc-clima-hero__cont {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: clamp(var(--vc-sp-4), 3vw, var(--vc-sp-5));
  padding: clamp(var(--vc-sp-4), 5vw, var(--vc-sp-6));
}
.vc-clima-hero__main { display: flex; flex-direction: column; gap: clamp(var(--vc-sp-3), 3vw, var(--vc-sp-5)); min-width: 0; }
.vc-clima-hero__top { display: flex; align-items: center; gap: var(--vc-sp-3); }
.vc-clima-hero__icono {
  flex: 0 0 auto; width: clamp(44px, 12vw, 60px); height: clamp(44px, 12vw, 60px);
  color: var(--vc-accent-2); filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.45));
}
.vc-clima-hero__icono svg { width: 100%; height: 100%; }
.vc-clima-hero__cond { font-family: var(--vc-font-head); font-weight: 600; font-size: clamp(1.1rem, 4.5vw, 1.5rem); letter-spacing: -0.01em; }
.vc-clima-hero__lugar { color: var(--vc-text-muted); font-size: 0.9rem; }
.vc-clima-hero__temp {
  font-family: var(--vc-font-head); font-weight: 700; line-height: 0.95;
  font-size: clamp(3.2rem, 16vw, 5rem);
  display: flex; align-items: baseline; gap: var(--vc-sp-3); flex-wrap: wrap;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.vc-clima-hero__sens { font-family: var(--vc-font-body); font-size: clamp(0.85rem, 3.6vw, 1rem); font-weight: 600; color: var(--vc-text-muted); }
.vc-clima-hero__chips { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); }
.vc-clima-hero__chips .vc-badge {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14);
  color: var(--vc-text-normal); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vc-clima-hero__sol { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2) var(--vc-sp-5); color: var(--vc-text-normal); font-size: 0.9rem; font-weight: 600; }

/* Panel de fase lunar (glass inset) */
.vc-clima-luna {
  display: flex; align-items: center; gap: var(--vc-sp-3);
  padding: var(--vc-sp-3) var(--vc-sp-4);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--vc-r); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vc-clima-luna__svg { flex: 0 0 auto; width: 46px; height: 46px; display: block; filter: drop-shadow(0 0 10px rgba(232, 240, 250, 0.35)); }
.vc-clima-luna__svg svg { width: 100%; height: 100%; display: block; }
.vc-clima-luna__nombre { font-weight: 700; }
.vc-clima-luna__ilum { color: var(--vc-text-muted); font-size: 0.82rem; }

/* Desktop / tablet: bento asimetrico de 2 columnas. La izquierda concentra
   el clima (temp mas grande como foco), la derecha convierte la fase lunar
   en una tarjeta vertical alta que llena el ancho (adios espacio vacio). */
@media (min-width: 768px) {
  .vc-clima-hero { min-height: clamp(300px, 34vw, 380px); }
  .vc-clima-hero__cont {
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
    column-gap: clamp(var(--vc-sp-5), 4vw, var(--vc-sp-7));
  }
  .vc-clima-hero__main { justify-content: center; }
  .vc-clima-hero__temp { font-size: clamp(4rem, 7vw, 6rem); }
  .vc-clima-luna {
    flex-direction: column; text-align: center; justify-content: center; align-items: center;
    gap: var(--vc-sp-3); padding: var(--vc-sp-5);
  }
  .vc-clima-luna__svg { width: 78px; height: 78px; }
  .vc-clima-luna__nombre { font-size: 1.05rem; }
  .vc-clima-skel__luna { height: auto; align-self: stretch; }
}

/* Subtitulo "Proximas 24 horas" */
.vc-clima-sub { font-size: clamp(1.05rem, 4vw, 1.25rem); margin: clamp(var(--vc-sp-5), 5vw, var(--vc-sp-6)) 0 var(--vc-sp-3); }

/* Maxima y minima del dia, junto a la sensacion termica. Es el dato que
   cualquiera busca primero y que esta pantalla no daba en ningun sitio. */
.vc-clima-hero__maxmin { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--vc-text-dim); }

/* ---- Los proximos dias --------------------------------------------
   Una fila por dia, en rejilla, para que los numeros queden en columna y se
   puedan comparar de arriba abajo sin leerlos uno por uno. La barra usa una
   escala comun a toda la semana: por eso un dia frio se ve corto y a la
   izquierda sin necesidad de mirar las cifras. */
.vc-dias { display: flex; flex-direction: column; gap: 2px; }
.vc-dia {
  display: grid; align-items: center; gap: var(--vc-sp-2);
  grid-template-columns: 2.6rem 1.6rem 3.4rem 2.2rem 1fr 2.2rem;
  padding: var(--vc-sp-2) var(--vc-sp-3);
  border-radius: var(--vc-r-sm);
  transition: background var(--vc-trans);
}
.vc-dia:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.vc-dia:hover { background: var(--vc-surface); }
.vc-dia__nombre { font-weight: 700; font-size: 0.84rem; text-transform: capitalize; }
.vc-dia__ic { width: 22px; height: 22px; color: var(--vc-text-muted); }
.vc-dia__ic svg { width: 100%; height: 100%; display: block; }
.vc-dia__lluvia { font-size: 0.74rem; color: var(--vc-info); font-weight: 600; text-align: right; }
.vc-dia__min, .vc-dia__max { font-size: 0.86rem; font-weight: 700; text-align: right; }
.vc-dia__min { color: var(--vc-text-dim); }
.vc-dia__barra { position: relative; height: 5px; border-radius: var(--vc-r-pill); background: rgba(255, 255, 255, 0.08); }
.vc-dia__barra span {
  position: absolute; top: 0; bottom: 0; border-radius: var(--vc-r-pill);
  background: linear-gradient(90deg, #4FA8E8, #FFB020 60%, #FF7A1A);
}
.vc-dia--fria .vc-dia__min { color: #7DD3FC; }
.vc-dia--fria .vc-dia__ic { color: #7DD3FC; }

/* Solo en pantallas MUY angostas se cae la columna de lluvia. Estaba puesta en
   380px, que es el ancho del telefono mas comun, y ahi se perdia justo el dato
   que mas le importa al que siembra. A 375px entra de sobra. */
@media (max-width: 340px) {
  .vc-dia { grid-template-columns: 2.3rem 1.3rem 1.9rem 1fr 1.9rem; gap: 6px; }
  .vc-dia__lluvia { display: none; }
}

/* De donde sale el dato: hora de la medicion, cuantos modelos coinciden y a
   que altura. Va en voz baja, pero va: un pronostico sin procedencia obliga a
   creer o no creer, y no deja hacer nada intermedio. */
.vc-clima-fuente {
  margin: var(--vc-sp-3) 0 0; font-size: 0.78rem; color: var(--vc-text-dim);
  display: flex; flex-wrap: wrap; gap: 4px;
}

/* --- Ambient mesh: resplandor radial que refleja el estado del tiempo. El JS
   inyecta --weather-glow por render; se registra como <color> para interpolar. */
@property --weather-glow { syntax: '<color>'; inherits: false; initial-value: transparent; }
.vc-clima-hero { transition: --weather-glow 1s ease; }
.vc-clima-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 95% at 62% 12%, var(--weather-glow, transparent), transparent 68%);
}

/* Micro-interacciones vectoriales: los iconos de estado "susurran" (flotan) */
.vc-clima-hero__icono { animation: vc-flota 6s ease-in-out infinite; }
.vc-clima-luna__svg   { animation: vc-flota 9s ease-in-out infinite; }
@keyframes vc-flota { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* Alerta de helada premium: mesh azul gelido pulsante + haz de luz perimetral */
.vc-clima-hero.is-frost-alert::before { animation: vc-frost-pulse 2.6s ease-in-out infinite; }
@keyframes vc-frost-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.vc-frost-beam {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: conic-gradient(from var(--vc-ang), transparent 0 66%, #7DD3FC 84%, #E0F2FE 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: vc-flujo 4s linear infinite;
}

/* El panel "Proximas 24 horas" se rehizo: ahora el grafico y las horas
   comparten un carril con scroll. Sus estilos estan al final de esta hoja,
   bajo .vc-24h. Las reglas viejas (.vc-clima-24h / .vc-clima-grafico /
   .vc-clima-onda) quedaron sin uso y se quitaron. */

/* Sin animaciones de entrada/loop si el usuario reduce el movimiento */
@media (prefers-reduced-motion: reduce) {
  .vc-clima-hero__icono, .vc-clima-luna__svg,
  .vc-clima-hero.is-frost-alert::before, .vc-frost-beam { animation: none; }
  .vc-onda-linea { stroke-dashoffset: 0; animation: none; }
  .vc-onda-area { opacity: 1; animation: none; }
}

/* ============ RIELES LATERALES DEL HERO (solo desktop >=1440px) ====== */
/* Aprovechan los canales vacios a los lados del hero centrado. Se anclan
   fuera del hero (right/left: 100%) sin afectar el ancho del documento.
   En movil/tablet estan ocultos (display:none) -> experiencia intacta. */
.vc-hero-wrap { position: relative; }
.vc-rail { display: none; }

.vc-rail__tag { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-text-dim); display: flex; align-items: center; gap: 6px; margin-bottom: var(--vc-sp-4); }

/* Eslogan rotativo (izquierda) */
.vc-rail-eslogan { justify-content: space-between; }
.vc-rail-eslogan__rot { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--vc-sp-3); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, filter 0.45s ease; }
.vc-rail-eslogan__rot.is-saliendo { transform: translateY(-14px); opacity: 0; filter: blur(4px); transition: transform 0.3s ease-in, opacity 0.3s ease-in, filter 0.3s ease-in; }
.vc-rail-eslogan__rot.is-entrando { transform: translateY(14px); opacity: 0; filter: blur(6px); transition: none; }
.vc-rail-eslogan__ic { width: 40px; height: 40px; color: var(--vc-accent-2); filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.4)); }
.vc-rail-eslogan__ic svg { width: 100%; height: 100%; }
.vc-rail-eslogan__txt { font-family: var(--vc-font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--vc-text); margin: 0; }

/* Spotlight VIP (derecha) */
.vc-rail-vip__card { display: flex; flex-direction: column; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer; animation: vc-rail-fade 0.5s ease; }
@keyframes vc-rail-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vc-rail-vip__media { display: block; aspect-ratio: 1 / 1; border-radius: var(--vc-r); overflow: hidden; background: var(--vc-bg-2); margin-bottom: var(--vc-sp-3); border: 1px solid rgba(0, 180, 216, 0.28); }
.vc-rail-vip__media img, .vc-rail-vip__media .vc-img { width: 100%; height: 100%; object-fit: cover; }
.vc-rail-vip__nombre { font-family: var(--vc-font-head); font-weight: 600; font-size: 1.05rem; color: var(--vc-text); transition: color var(--vc-trans); }
.vc-rail-vip__meta { font-size: 0.8rem; color: var(--vc-text-muted); margin-top: 3px; }
.vc-rail-vip__cta-txt { margin-top: var(--vc-sp-3); font-size: 0.82rem; font-weight: 700; color: var(--vc-accent-2); }
.vc-rail-vip__card:hover .vc-rail-vip__nombre { color: var(--vc-accent-2); }
.vc-rail-vip__card:hover .vc-rail-vip__media { border-color: rgba(0, 180, 216, 0.6); }

/* Rotacion de VIP en paginas de 2 (fundido + desplazamiento, como el eslogan) */
.vc-rail-vip__lista {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--vc-sp-4);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, filter 0.45s ease;
}
.vc-rail-vip__lista.is-saliendo { transform: translateY(-12px); opacity: 0; filter: blur(4px); transition: transform 0.3s ease-in, opacity 0.3s ease-in, filter 0.3s ease-in; }
.vc-rail-vip__lista.is-entrando { transform: translateY(12px); opacity: 0; filter: blur(6px); transition: none; }
.vc-rail-vip__lista .vc-rail-vip__card { flex: 1; min-height: 0; justify-content: flex-start; animation: none; }
.vc-rail-vip__lista .vc-rail-vip__media { flex: 1; min-height: 60px; aspect-ratio: auto; margin-bottom: var(--vc-sp-2); }
.vc-rail-vip__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--vc-sp-4); }
.vc-rail-vip__dot { width: 7px; height: 7px; border-radius: var(--vc-r-pill); background: rgba(255, 255, 255, 0.28); transition: width var(--vc-trans), background var(--vc-trans); }
.vc-rail-vip__dot.is-activo { width: 18px; background: var(--vc-vip); }
.vc-rail-vip--promo { justify-content: space-between; }
.vc-rail-vip__promo { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.vc-rail-vip__promo-t { font-family: var(--vc-font-head); font-weight: 600; font-size: 1.15rem; color: var(--vc-text); margin: 0 0 var(--vc-sp-2); }
.vc-rail-vip__promo-d { font-size: 0.86rem; color: var(--vc-text-muted); margin: 0; line-height: 1.4; }
.vc-rail-eslogan__cta, .vc-rail-vip__cta { margin-top: var(--vc-sp-4); width: 100%; }

@media (min-width: 1440px) {
  .vc-rail {
    display: flex; flex-direction: column; z-index: 3;
    position: absolute; top: 0; bottom: 0;
    width: clamp(160px, calc((100vw - 1140px) / 2 - 24px), 300px);
  }
  .vc-rail--izq { right: 100%; margin-right: 28px; }
  .vc-rail--der { left: 100%; margin-left: 28px; }
  .vc-rail__panel {
    flex: 1; display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), var(--vc-surface));
    border: 1px solid rgba(56, 189, 248, 0.22); border-radius: var(--vc-r-lg);
    padding: var(--vc-sp-5); overflow: hidden;
  }
}

/* ============ CURSOR PERSONALIZADO + LUZ QUE SIGUE AL PUNTERO ========
   Solo en dispositivos con puntero fino (desktop): flecha 3D azul electrico,
   con degradado y borde brillante. En tactil no hay cursor, asi que no se
   toca. Los campos de texto conservan el cursor de escritura. */
@media (pointer: fine) {
  :root {
    --vc-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='41' viewBox='0 0 96 116'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.9' y2='1'%3E%3Cstop offset='0' stop-color='%237db3ff'/%3E%3Cstop offset='0.5' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%231e52c7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 8 C40 26 66 46 84 68 L62 70 C70 84 60 98 48 110 C30 74 18 42 12 8 Z' fill='url(%23g)' stroke='%230a1e4d' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M12 8 C40 26 66 46 84 68' fill='none' stroke='%23cfe0ff' stroke-width='3' stroke-linecap='round' opacity='0.9'/%3E%3C/svg%3E") 4 3;
  }
  html { cursor: var(--vc-cursor), auto; }
  a, button, [role="button"], label, summary, select,
  .vc-btn, .vc-card, .vc-chip, .vc-chip-cat, .vc-seg__btn,
  .vc-rail-vip__card, .vc-evento-banner, [data-id], [data-accion], [data-panel] {
    cursor: var(--vc-cursor), pointer;
  }
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
  textarea, [contenteditable="true"] { cursor: text; }
}

/* Luz cian que sigue al puntero por TODA la pagina (no solo las tarjetas).
   Mezcla 'screen' -> ilumina lo que haya debajo. La posiciona js/app.js via
   transform. Se desactiva sin puntero fino o con reduce-motion. */
.vc-cursor-luz {
  position: fixed; top: 0; left: 0; z-index: 45;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.24), rgba(37, 99, 235, 0.10) 42%, transparent 70%);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 0.4s var(--vc-trans);
  will-change: transform;
}
/* Siempre encendida (la pone js/app.js) y con parpadeo azul suave ("respira"). */
.vc-cursor-luz.is-activa { opacity: 1; animation: vc-luz-latir 2.6s ease-in-out infinite; }
@keyframes vc-luz-latir { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .vc-cursor-luz { display: none; } }

/* ===================== LOGIN DEL ADMIN (glass + etiqueta flotante) === */
.vc-login { position: relative; display: grid; place-items: center; min-height: 58vh; padding: var(--vc-sp-5) 0; }
.vc-login__aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vc-login__aura::before {
  content: ''; position: absolute; left: 50%; top: 22%; width: 460px; height: 460px; margin-left: -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.20), rgba(34, 211, 238, 0.10) 45%, transparent 70%);
  filter: blur(30px); animation: vc-aura-drift 9s ease-in-out infinite;
}
@keyframes vc-aura-drift { 0%, 100% { transform: translate(-22px, -10px) scale(1); } 50% { transform: translate(22px, 10px) scale(1.08); } }

.vc-login__card {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), var(--vc-surface));
  border: 1px solid var(--vc-border-fuerte); border-radius: var(--vc-r-lg);
  padding: clamp(var(--vc-sp-5), 4vw, var(--vc-sp-6));
  backdrop-filter: var(--vc-blur); -webkit-backdrop-filter: var(--vc-blur);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  animation: vc-login-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes vc-login-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.vc-login__head { text-align: center; margin-bottom: var(--vc-sp-5); }
.vc-login__logo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto var(--vc-sp-3); display: block; box-shadow: 0 0 20px rgba(56, 189, 248, 0.25); }
.vc-login__titulo { font-family: var(--vc-font-head); font-weight: 600; font-size: 1.45rem; margin: 0; color: var(--vc-text); }
.vc-login__sub { color: var(--vc-text-muted); font-size: 0.9rem; margin: 5px 0 0; }
.vc-login__form { display: flex; flex-direction: column; gap: var(--vc-sp-4); }
.vc-login__aviso { color: var(--vc-aviso); font-size: 0.85rem; text-align: center; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--vc-r-sm); padding: var(--vc-sp-2) var(--vc-sp-3); margin: 0 0 var(--vc-sp-4); }

/* Campo con etiqueta flotante + icono + glow */
.vc-field { position: relative; }
.vc-field__ic { position: absolute; left: 13px; top: 27px; transform: translateY(-50%); width: 20px; height: 20px; color: var(--vc-text-dim); pointer-events: none; transition: color var(--vc-trans); }
.vc-field__ic svg { width: 100%; height: 100%; display: block; }
.vc-field__input { width: 100%; height: 54px; padding: 16px 44px 4px 42px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--vc-input-border); border-radius: var(--vc-r-sm); color: var(--vc-text); font-family: var(--vc-font-body); font-size: 16px; transition: border-color var(--vc-trans), box-shadow var(--vc-trans), background var(--vc-trans); }
.vc-field__input:focus { outline: none; border-color: var(--vc-accent); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 3px var(--vc-accent-weak), 0 0 18px rgba(59, 130, 246, 0.22); }
.vc-field__label { position: absolute; left: 42px; top: 27px; transform: translateY(-50%); color: var(--vc-text-muted); font-size: 16px; pointer-events: none; transform-origin: left center; transition: transform var(--vc-trans), color var(--vc-trans); }
.vc-field__input:focus + .vc-field__label,
.vc-field__input:not(:placeholder-shown) + .vc-field__label { transform: translateY(-19px) scale(0.76); color: var(--vc-accent-2); }
.vc-field:focus-within .vc-field__ic { color: var(--vc-accent-2); }
.vc-field__toggle { position: absolute; right: 6px; top: 27px; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 0; color: var(--vc-text-dim); cursor: pointer; border-radius: 9px; transition: color var(--vc-trans), background var(--vc-trans); }
.vc-field__toggle svg { width: 19px; height: 19px; }
.vc-field__toggle:hover { color: var(--vc-accent-2); background: rgba(255, 255, 255, 0.05); }

.vc-login__sep { display: flex; align-items: center; gap: var(--vc-sp-3); color: var(--vc-text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.vc-login__sep::before, .vc-login__sep::after { content: ''; flex: 1; height: 1px; background: var(--vc-border-fuerte); }
.vc-login__err { min-height: 1.1em; font-size: 0.85rem; text-align: center; margin: 0; }

/* OTP de usuarios: misma tarjeta y campos, con badge de identidad; sin aura de
   pantalla completa para que encaje tambien incrustado (registro/clasificados). */
.vc-otp-wrap { display: grid; place-items: center; padding: var(--vc-sp-4) 0; }
.vc-login__badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto var(--vc-sp-3); border-radius: 16px; color: var(--vc-vip); background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.12)); border: 1px solid rgba(56, 189, 248, 0.3); box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); }
.vc-login__badge svg { width: 26px; height: 26px; }
.vc-login__hint { font-size: 0.82rem; color: var(--vc-text-muted); text-align: center; margin: 0; }
.vc-field__input--otp { letter-spacing: 0.35em; font-size: 18px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .vc-login__card { animation: none; } .vc-login__aura::before { animation: none; } }

/* ============ HERO SPOTLIGHT (pagina de planes) ===================== */
.vc-splot {
  position: relative; overflow: hidden; border-radius: var(--vc-r-lg);
  border: 1px solid var(--vc-border-fuerte);
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.10), var(--vc-bg-2) 55%, #0a1526);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--vc-sp-6);
  animation: vc-login-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* Foco de luz que sigue al cursor (posicionado por js/app.js con transform). */
.vc-splot__foco {
  position: absolute; top: 0; left: 0; width: 380px; height: 380px; margin: -190px 0 0 -190px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.20), rgba(59, 130, 246, 0.08) 45%, transparent 70%);
  opacity: 0; transition: opacity 0.35s ease; will-change: transform;
}
.vc-splot.is-foco .vc-splot__foco { opacity: 1; }

.vc-splot__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: var(--vc-sp-4); align-items: center; padding: clamp(var(--vc-sp-5), 4vw, var(--vc-sp-7)); }
@media (min-width: 760px) { .vc-splot__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--vc-sp-6); } }
.vc-splot__tag { display: inline-block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vc-accent-2); background: var(--vc-accent-weak); border: 1px solid rgba(59, 130, 246, 0.3); padding: 5px 11px; border-radius: var(--vc-r-pill); margin-bottom: var(--vc-sp-3); }
.vc-splot__titulo { font-family: var(--vc-font-head); font-weight: 600; font-size: clamp(1.85rem, 1.2rem + 3vw, 3rem); line-height: 1.05; margin: 0; color: var(--vc-text); }
.vc-splot__sub { color: var(--vc-text-muted); font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem); line-height: 1.6; margin: var(--vc-sp-3) 0 var(--vc-sp-5); max-width: 46ch; }
.vc-splot__cta { display: flex; flex-wrap: wrap; gap: var(--vc-sp-3); }

.vc-splot__visual { position: relative; display: grid; place-items: center; min-height: 170px; }
.vc-splot__orbe { position: absolute; width: clamp(180px, 26vw, 270px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.28), rgba(34, 211, 238, 0.12) 50%, transparent 72%); filter: blur(12px); animation: vc-splot-orbe 7s ease-in-out infinite; }
.vc-splot__logo { position: relative; width: clamp(120px, 20vw, 180px); height: auto; border-radius: 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); animation: vc-splot-flotar 6s ease-in-out infinite; }
@keyframes vc-splot-orbe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes vc-splot-flotar { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
  .vc-splot { animation: none; }
  .vc-splot__orbe, .vc-splot__logo { animation: none; }
  .vc-splot__foco { display: none; }
}

/* ===================== AVISOS COMUNITARIOS (index) ================== */
.vc-panel-noticias { margin-top: var(--vc-sp-5); }
.vc-panel-noticias[hidden] { display: none; }
.vc-noticias {
  border: 1px solid rgba(56, 189, 248, 0.22); border-radius: var(--vc-r-lg);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), var(--vc-surface));
  padding: var(--vc-sp-4);
}
.vc-noticias__cab { display: flex; align-items: center; gap: var(--vc-sp-3); margin-bottom: var(--vc-sp-3); }
.vc-noticias__ic { flex: 0 0 auto; width: 26px; height: 26px; color: var(--vc-aviso); }
.vc-noticias__ic svg { width: 100%; height: 100%; }
.vc-noticias__titulo { font-size: var(--vc-fs-h2); margin: 0; }
.vc-noticias__vig { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--vc-text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.vc-noticias__grid { display: grid; grid-template-columns: 1fr; gap: var(--vc-sp-3); }
@media (min-width: 720px) { .vc-noticias__grid { grid-template-columns: 1fr 1fr; } }

.vc-noticia {
  position: relative; display: flex; gap: var(--vc-sp-3); align-items: flex-start;
  background: var(--vc-surface-2); border: 1px solid var(--vc-border);
  border-left: 3px solid var(--vc-accent); border-radius: var(--vc-r);
  padding: var(--vc-sp-3) var(--vc-sp-4);
  animation: vc-noticia-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 0.05s + 0.05s);
  transition: transform var(--vc-trans), opacity var(--vc-trans), border-color var(--vc-trans);
}
@keyframes vc-noticia-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vc-noticia.is-saliendo { opacity: 0; transform: translateX(12px) scale(0.98); }
.vc-noticia__ic { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--vc-r-sm); }
.vc-noticia__ic svg { width: 20px; height: 20px; }
.vc-noticia__cuerpo { min-width: 0; flex: 1; }
.vc-noticia__cab { display: flex; align-items: center; gap: var(--vc-sp-2); flex-wrap: wrap; margin-bottom: 4px; }
.vc-noticia__tipo { font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.vc-noticia__lugar { display: inline-flex; align-items: center; gap: 3px; font-size: 0.74rem; color: var(--vc-text-muted); }
.vc-noticia__lugar svg { width: 13px; height: 13px; }
.vc-noticia__hace { margin-left: auto; font-size: 0.7rem; color: var(--vc-text-dim); white-space: nowrap; }
/* Hasta cuando vale el aviso. En un corte de luz o un bloqueo eso ES la
   informacion, asi que se destaca mas que el "hace X" de la izquierda. */
.vc-noticia__hasta { font-size: 0.72rem; font-weight: 700; color: var(--vc-accent-2); }
.vc-noticia__titulo { font-size: 0.98rem; font-weight: 700; margin: 0; line-height: 1.25; }
.vc-noticia__detalle { color: var(--vc-text-muted); font-size: 0.86rem; margin: 4px 0 0; }
.vc-noticia__fuente { display: inline-block; margin-top: 6px; font-size: 0.72rem; color: var(--vc-text-dim); }
.vc-noticia__cerrar {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0;
  background: transparent; color: var(--vc-text-dim); border-radius: var(--vc-r-pill);
  transition: color var(--vc-trans), background var(--vc-trans);
}
.vc-noticia__cerrar svg { width: 16px; height: 16px; }
.vc-noticia__cerrar:hover { color: var(--vc-text); background: var(--vc-surface); }

/* Severidad por tipo (borde izquierdo + chip del icono + color del tipo) */
.vc-noticia--helada     { border-left-color: #7DD3FC; }
.vc-noticia--helada     .vc-noticia__ic { background: rgba(125, 211, 252, 0.12); color: #7DD3FC; }
.vc-noticia--helada     .vc-noticia__tipo { color: #7DD3FC; }
.vc-noticia--bloqueo    { border-left-color: var(--vc-aviso); }
.vc-noticia--bloqueo    .vc-noticia__ic { background: rgba(245, 158, 11, 0.12); color: var(--vc-aviso); }
.vc-noticia--bloqueo    .vc-noticia__tipo { color: var(--vc-aviso); }
/* Cortes de servicio (fase 29). La luz en amarillo y el agua en celeste:
   se distinguen de un vistazo sin tener que leer la etiqueta. */
.vc-noticia--corte-de-luz  { border-left-color: #FBBF24; }
.vc-noticia--corte-de-luz  .vc-noticia__ic { background: rgba(251, 191, 36, 0.12); color: #FBBF24; }
.vc-noticia--corte-de-luz  .vc-noticia__tipo { color: #FBBF24; }
.vc-noticia--corte-de-agua { border-left-color: #60C8F0; }
.vc-noticia--corte-de-agua .vc-noticia__ic { background: rgba(96, 200, 240, 0.12); color: #60C8F0; }
.vc-noticia--corte-de-agua .vc-noticia__tipo { color: #60C8F0; }
.vc-noticia--derrumbe   { border-left-color: var(--vc-peligro); }
.vc-noticia--derrumbe   .vc-noticia__ic { background: rgba(239, 68, 68, 0.12); color: var(--vc-peligro); }
.vc-noticia--derrumbe   .vc-noticia__tipo { color: var(--vc-peligro); }
.vc-noticia--desarrollo { border-left-color: var(--vc-accent-2); }
.vc-noticia--desarrollo .vc-noticia__ic { background: var(--vc-accent-weak); color: var(--vc-accent-2); }
.vc-noticia--desarrollo .vc-noticia__tipo { color: var(--vc-accent-2); }
.vc-noticia--otro       .vc-noticia__ic { background: var(--vc-accent-weak); color: var(--vc-accent-2); }
.vc-noticia--otro       .vc-noticia__tipo { color: var(--vc-text-muted); }

/* Las mas criticas (helada / derrumbe) laten sutilmente para captar la vista */
@media (prefers-reduced-motion: no-preference) {
  .vc-noticia--helada .vc-noticia__ic, .vc-noticia--derrumbe .vc-noticia__ic { animation: vc-pulso 2s ease-in-out infinite; }
}

/* ---- Banner "Evento destacado" (VIP y proximo) en la portada ------- */
.vc-panel-eventos { margin-top: var(--vc-sp-5); }
.vc-panel-eventos[hidden] { display: none; }

.vc-evento-banner {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  min-height: clamp(160px, 22vw, 230px);
  border: 1px solid rgba(34, 211, 238, 0.28); border-radius: var(--vc-r-lg);
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.14), rgba(59, 130, 246, 0.10) 55%, var(--vc-surface));
  text-decoration: none; color: var(--vc-text);
  animation: vc-evento-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: transform var(--vc-trans), border-color var(--vc-trans), box-shadow var(--vc-trans);
}
@keyframes vc-evento-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }
.vc-evento-banner:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38); }
.vc-evento-banner:focus-visible { outline: 2px solid var(--vc-vip); outline-offset: 3px; }

.vc-evento-banner__media { position: absolute; inset: 0; z-index: -2; }
.vc-evento-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.vc-evento-banner__velo { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 18, 32, 0.94) 0%, rgba(8, 18, 32, 0.80) 44%, rgba(8, 18, 32, 0.28) 100%); }
.vc-evento-banner:not(.has-afiche) .vc-evento-banner__velo { display: none; }

.vc-evento-banner__cuerpo {
  position: relative; display: flex; flex-direction: column; gap: var(--vc-sp-2);
  padding: clamp(var(--vc-sp-4), 3vw, var(--vc-sp-6)); max-width: 42rem;
}
.vc-evento-banner__tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-weight: 800; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--vc-bg); background: linear-gradient(120deg, var(--vc-vip), var(--vc-accent));
  padding: 5px 11px; border-radius: var(--vc-r-pill);
}
.vc-evento-banner__tag svg { width: 14px; height: 14px; }
.vc-evento-banner__titulo {
  font-family: var(--vc-font-head); font-weight: 600; line-height: 1.08; margin: 2px 0 0;
  font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.1rem); color: var(--vc-text);
}
.vc-evento-banner__meta { display: flex; flex-wrap: wrap; gap: 6px var(--vc-sp-4); margin-top: 2px; }
.vc-evento-banner__dato { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--vc-text-normal); }
.vc-evento-banner__dato svg { width: 15px; height: 15px; color: var(--vc-vip); flex: 0 0 auto; }
.vc-evento-banner__cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: var(--vc-sp-2); font-weight: 700; font-size: 0.9rem; color: var(--vc-accent-2);
}
.vc-evento-banner__cta svg { width: 16px; height: 16px; transition: transform var(--vc-trans); }
.vc-evento-banner:hover .vc-evento-banner__cta svg { transform: translateX(4px); }

.vc-evento-banner__dots { position: absolute; right: var(--vc-sp-4); bottom: var(--vc-sp-4); display: flex; gap: 6px; z-index: 1; }
.vc-evento-banner__dot { width: 7px; height: 7px; border-radius: var(--vc-r-pill); background: rgba(255, 255, 255, 0.32); transition: width var(--vc-trans), background var(--vc-trans); }
.vc-evento-banner__dot.is-activo { width: 18px; background: var(--vc-vip); }

@media (prefers-reduced-motion: reduce) { .vc-evento-banner { animation: none; } }

/* ---- Capas de efecto (detras del contenido, z-index 0) ------------- */
.vc-clima-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vc-clima-fx--sol { background: radial-gradient(circle at 82% 16%, rgba(255, 214, 120, 0.30), transparent 46%); animation: vc-sol-late 6s ease-in-out infinite; }
@keyframes vc-sol-late { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }

.vc-gota {
  position: absolute; top: -14%; width: 2px; height: 14%; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(190, 225, 255, 0.65));
  animation-name: vc-lluvia; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes vc-lluvia { to { transform: translateY(820%); } }

.vc-copo {
  position: absolute; top: -8%; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  animation-name: vc-nieve; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes vc-nieve {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(760%) translateX(14px); opacity: 0.4; }
}

.vc-estrella {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation-name: vc-titila; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes vc-titila { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }

/* ---- Alerta de lluvia + iconos SVG (sin emoji) -------------------- */
.vc-alerta--lluvia { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.45); color: #CDEBFB; box-shadow: 0 0 28px -10px var(--vc-info); }
.vc-alerta__ic { flex: 0 0 auto; width: 30px; height: 30px; display: block; }
.vc-alerta__ic svg { width: 100%; height: 100%; display: block; }
.vc-alerta--helada .vc-alerta__ic { color: #ffd2d2; }
.vc-alerta--lluvia .vc-alerta__ic { color: var(--vc-info); }
.vc-alerta--helada { animation: vc-alerta-pulso 2.4s ease-in-out infinite; }
@keyframes vc-alerta-pulso { 0%, 100% { box-shadow: 0 0 28px -8px var(--vc-peligro); } 50% { box-shadow: 0 0 34px -4px var(--vc-peligro); } }

/* ---- Skeleton de clima (misma estructura -> misma altura, CLS 0) --- */
.vc-clima-skel__grow { flex: 1 1 auto; }
.vc-clima-skel__l1 { height: 20px; width: 60%; border-radius: var(--vc-r-xs); }
.vc-clima-skel__l2 { height: 12px; width: 35%; border-radius: var(--vc-r-xs); margin-top: var(--vc-sp-2); }
.vc-clima-skel__temp { height: clamp(3.2rem, 16vw, 5rem); width: 55%; border-radius: var(--vc-r-sm); }
.vc-clima-skel__chips { height: 26px; width: 92%; border-radius: var(--vc-r-pill); }
.vc-clima-skel__sol { height: 16px; width: 60%; border-radius: var(--vc-r-xs); }
.vc-clima-skel__luna { height: 70px; width: 100%; border-radius: var(--vc-r); }
.vc-clima-skel__fuente { height: 14px; width: 260px; max-width: 80%; border-radius: var(--vc-r-xs); margin-top: var(--vc-sp-3); }
.vc-clima-skel__sub { height: 22px; width: 190px; border-radius: var(--vc-r-xs); margin: clamp(var(--vc-sp-5), 5vw, var(--vc-sp-6)) 0 var(--vc-sp-3); }
.vc-clima-skel__horas { display: flex; gap: var(--vc-sp-2); overflow: hidden; }
/* 88px + 36px de icono (26 + 6 + 4): tiene que seguir el alto real de .vc-hora. */
.vc-clima-skel__hora { flex: 0 0 auto; width: 74px; height: 124px; border-radius: var(--vc-r-sm); }

/* El movimiento no aplica si el usuario pide reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .vc-clima-fx--lluvia, .vc-clima-fx--nieve, .vc-clima-fx--sol { display: none; }
  .vc-estrella { opacity: 0.6; animation: none; }
  .vc-alerta--helada { animation: none; }
}

/* ---- Compartir (motor de crecimiento) ------------------------------ */
/* Boton solo-icono: cuadrado, mismo alto que los botones vecinos del pie. */
.vc-btn--ic {
  flex: 0 0 auto;
  padding: 0;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  margin-left: auto; /* se recuesta al borde derecho del pie de la tarjeta */
}
.vc-btn--ic .vc-ic-inline { width: 19px; height: 19px; margin: 0; }

/* El icono dentro de botones con texto respira del label. */
.vc-btn .vc-ic-inline { width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; }
.vc-btn--ic .vc-ic-inline { margin-right: 0; }

/* Boton de compartir dentro de la alerta de helada. */
.vc-alerta__compartir {
  display: inline-flex; align-items: center;
  margin-top: var(--vc-sp-3);
  padding: 8px 14px;
  font-size: 0.85rem;
  border-color: rgba(255, 210, 210, 0.4);
  color: #ffd2d2;
}
.vc-alerta__compartir:hover { border-color: rgba(255, 210, 210, 0.8); }

/* ---- "Hoy en el Valle" (resumen diario de la portada) --------------- */
.vc-hoy {
  margin-top: clamp(var(--vc-sp-4), 4vw, var(--vc-sp-5));
  padding: clamp(var(--vc-sp-4), 4vw, var(--vc-sp-5));
  border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-lg);
  background:
    radial-gradient(520px 200px at 12% -30%, rgba(59, 130, 246, 0.10), transparent 60%),
    var(--vc-surface);
}
.vc-hoy__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vc-sp-3); flex-wrap: wrap;
  margin-bottom: var(--vc-sp-4);
}
.vc-hoy__titulo {
  font-family: var(--vc-font-head);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
  margin: 0;
}
/* Solo la primera letra, no cada palabra. Con text-transform: capitalize la
   fecha salia "Domingo, 13 De Septiembre": en español el "de" va en
   minuscula, y capitalize no sabe eso porque toca palabra por palabra. */
.vc-hoy__fecha {
  margin: 2px 0 0;
  font-size: 0.82rem; color: var(--vc-text-dim);
}
.vc-hoy__fecha::first-letter { text-transform: uppercase; }
.vc-hoy__mun { flex: 0 0 auto; }
.vc-hoy__lista { display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-hoy__skel { height: 58px; border-radius: var(--vc-r-sm); }

.vc-hoy__item {
  display: flex; align-items: center; gap: var(--vc-sp-3);
  padding: 10px 12px;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm);
  background: rgba(255, 255, 255, 0.02);
  color: var(--vc-text);
  text-decoration: none;
  transition: transform var(--vc-trans), border-color var(--vc-trans), background var(--vc-trans);
}
.vc-hoy__item:hover {
  transform: translateX(3px);
  border-color: var(--vc-border-fuerte);
  background: rgba(59, 130, 246, 0.07);
}
.vc-hoy__ic {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--vc-border);
  color: var(--vc-accent-2);
}
.vc-hoy__ic svg { width: 20px; height: 20px; }
.vc-hoy__item--farmacia .vc-hoy__ic { color: #f9739b; }
.vc-hoy__item--evento   .vc-hoy__ic { color: #c4b5fd; }
.vc-hoy__texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vc-hoy__etiqueta {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--vc-text-dim);
}
.vc-hoy__valor { font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
.vc-hoy__valor b { color: var(--vc-vip); font-variant-numeric: tabular-nums; }
.vc-hoy__flecha { flex: 0 0 auto; color: var(--vc-text-dim); }
.vc-hoy__flecha svg { width: 16px; height: 16px; display: block; }
.vc-hoy__chip-helada {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--vc-r-pill);
  border: 1px solid var(--vc-peligro);
  background: rgba(239, 68, 68, 0.10);
  color: #ffd2d2;
  font-size: 0.76rem; font-weight: 700;
  animation: vc-alerta-pulso 2.4s ease-in-out infinite;
}
.vc-hoy__chip-helada svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .vc-hoy__item:hover { transform: none; }
  .vc-hoy__chip-helada { animation: none; }
}

/* ================= MERCADO DEL VALLE (compra-venta C2C) ============== */
.vc-mkt-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--vc-sp-3); flex-wrap: wrap;
}
.vc-mkt-head__acciones { display: flex; gap: var(--vc-sp-2); flex-wrap: wrap; }

.vc-mkt-filtros { display: flex; gap: var(--vc-sp-2); flex-wrap: wrap; }
.vc-search--compacta {
  flex: 1 1 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; min-height: 46px;
  background: var(--vc-surface);
  border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-pill);
  position: static; transform: none;
}
.vc-search--compacta svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--vc-text-dim); fill: none; stroke: currentColor; stroke-width: 2; }
.vc-search--compacta input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--vc-text); font: inherit; padding: 12px 0;
}
.vc-mkt-filtros .vc-select { flex: 0 1 auto; }

.vc-chip-cat__ic { display: inline-grid; place-items: center; }
.vc-chip-cat__ic svg { width: 15px; height: 15px; display: block; }

/* --- Grid foto-primero: 2 columnas en telefono, mas en escritorio --- */
.vc-mkt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vc-sp-3);
  margin-top: var(--vc-sp-3);
}
@media (min-width: 720px)  { .vc-mkt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .vc-mkt-grid { grid-template-columns: repeat(4, 1fr); gap: var(--vc-sp-4); } }

.vc-mkt-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-lg);
  background: var(--vc-surface);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--vc-trans), border-color var(--vc-trans), box-shadow var(--vc-trans);
}
.vc-mkt-card:hover, .vc-mkt-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--vc-accent) 55%, var(--vc-border-fuerte));
  box-shadow: 0 14px 34px -18px rgba(59, 130, 246, 0.55);
}
.vc-mkt-card--destacada { border-color: var(--vc-vip); box-shadow: 0 0 26px -12px var(--vc-vip); }

.vc-mkt-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.vc-mkt-card__media .vc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.vc-mkt-card:hover .vc-mkt-card__media img.vc-img { transform: scale(1.05); }
.vc-mkt-card__media .vc-img--placeholder { display: grid; place-items: center; height: 100%; }
.vc-mkt-card__glifo svg { width: 42px; height: 42px; color: var(--vc-text-dim); }

.vc-mkt-card__precio {
  position: absolute; left: 8px; bottom: 8px;
  padding: 5px 11px;
  border-radius: var(--vc-r-pill);
  background: rgba(8, 18, 32, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: var(--vc-vip);
  font-family: var(--vc-font-head); font-weight: 700;
  font-size: clamp(0.85rem, 0.8rem + 0.35vw, 1rem);
  font-variant-numeric: tabular-nums;
  max-width: calc(100% - 16px);
  overflow-wrap: anywhere;
}
.vc-mkt-card__precio small { font-family: var(--vc-font-body, inherit); font-weight: 600; font-size: 0.72em; color: var(--vc-text-dim); }

.vc-mkt-card__cinta {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 9px;
  border-radius: var(--vc-r-pill);
  background: rgba(59, 130, 246, 0.92);
  color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.vc-mkt-card__cinta--nuevo { background: rgba(34, 211, 238, 0.95); color: #06202b; }

.vc-mkt-card__cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.vc-mkt-card__titulo {
  margin: 0;
  font-size: 0.95rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vc-mkt-card__meta { margin: 0; font-size: 0.78rem; color: var(--vc-text-dim); }

.vc-mkt-card--skeleton { padding-bottom: 12px; cursor: default; }
.vc-mkt-card__skelimg { aspect-ratio: 1 / 1; border-radius: 0 0 var(--vc-r-xs) var(--vc-r-xs); margin-bottom: 10px; }
.vc-mkt-card--skeleton .vc-skeleton--line { margin: 0 12px 8px; }

/* --- Detalle: carrusel scroll-snap + precio grande ------------------- */
.vc-mkt-carrusel {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--vc-r);
  scrollbar-width: none;
}
.vc-mkt-carrusel::-webkit-scrollbar { display: none; }
.vc-mkt-carrusel__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
.vc-mkt-carrusel__slide .vc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-mkt-carrusel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.vc-mkt-carrusel__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc-border-fuerte); transition: background var(--vc-trans), transform var(--vc-trans); }
.vc-mkt-carrusel__dot.is-activo { background: var(--vc-vip); transform: scale(1.25); }

.vc-mkt-det-precio {
  font-family: var(--vc-font-head); font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 1.9rem);
  color: var(--vc-vip);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 8px;
}
.vc-mkt-det-precio small { font-size: 0.55em; font-weight: 600; color: var(--vc-text-dim); }
.vc-mkt-badge-vendido { border-color: var(--vc-peligro); color: #ffd2d2; background: rgba(239, 68, 68, 0.12); }

/* --- Publicar / Mis ventas ------------------------------------------- */
.vc-mkt-publicar {
  margin-top: var(--vc-sp-4);
  padding: clamp(var(--vc-sp-4), 4vw, var(--vc-sp-5));
  border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-lg);
  background: var(--vc-surface);
}
.vc-mkt-sub { font-family: var(--vc-font-head); font-size: 1.15rem; margin: 0 0 var(--vc-sp-4); }
.vc-mkt-form__fila { display: grid; gap: 0 var(--vc-sp-3); }
@media (min-width: 560px) { .vc-mkt-form__fila { grid-template-columns: 1fr 1fr; } }
.vc-seg--mini { display: inline-flex; }

.vc-mkt-mias { display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-mkt-mia {
  display: flex; align-items: center; gap: var(--vc-sp-3);
  padding: 10px;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm);
  background: rgba(255, 255, 255, 0.02);
}
.vc-mkt-mia.is-vendida { opacity: 0.55; }
.vc-mkt-mia__foto { flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--vc-r-xs); overflow: hidden; background: var(--vc-bg); }
.vc-mkt-mia__foto .vc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-mkt-mia__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vc-mkt-mia__info strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.vc-mkt-mia__info small { color: var(--vc-text-dim); }
.vc-mkt-mia__acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vc-mkt-mia__acciones .vc-btn { padding: 8px 12px; font-size: 0.8rem; }
.vc-mkt-mia__borrar { border-color: var(--vc-peligro); color: var(--vc-peligro); }

@media (prefers-reduced-motion: reduce) {
  .vc-mkt-card, .vc-mkt-card:hover { transform: none; }
  .vc-mkt-card:hover .vc-mkt-card__media img.vc-img { transform: none; }
}

/* =====================================================================
   PORTADA INFORMATIVA (primeras visitas)
   Franja de beneficios bajo el hero + tarjeta CTA para duenos de negocio.
   La guia de secciones reutiliza .vc-mas-grid / .vc-mas-tile.
   ===================================================================== */
.vc-seccion--benef { margin-block: var(--vc-sp-5); }

.vc-benef { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vc-sp-3); }
@media (min-width: 900px) { .vc-benef { grid-template-columns: repeat(4, 1fr); } }

.vc-benef__item { display: flex; flex-direction: column; gap: var(--vc-sp-2); padding: var(--vc-sp-4); }
.vc-benef__ic {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--vc-accent-weak); color: var(--vc-accent-2);
}
.vc-benef__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vc-benef__titulo { font-weight: 700; font-size: 0.95rem; }
.vc-benef__texto { color: var(--vc-text-muted); font-size: 0.85rem; line-height: 1.45; }

.vc-cta-negocio {
  padding: var(--vc-sp-6) var(--vc-sp-5);
  text-align: center;
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.14), var(--vc-surface) 55%);
  border-color: rgba(59, 130, 246, 0.35);
}
.vc-cta-negocio__titulo { font-size: clamp(1.25rem, 4.5vw, 1.6rem); margin-bottom: var(--vc-sp-2); }
.vc-cta-negocio__texto { color: var(--vc-text-muted); max-width: 52ch; margin: 0 auto var(--vc-sp-4); }
.vc-cta-negocio__acciones { justify-content: center; flex-wrap: wrap; }

/* Formulario inline de edicion de un aviso propio del Mercado */
.vc-mkt-mia-form:not([hidden]) {
  padding: var(--vc-sp-4);
  margin-bottom: var(--vc-sp-3);
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-top: 0;
  border-radius: 0 0 var(--vc-r-sm) var(--vc-r-sm);
}

/* =====================================================================
   CULTURA TURISTICA (turismo.html) — guia de destinos de Los Valles
   ===================================================================== */
.vc-tur-hero { padding-block: var(--vc-sp-6) var(--vc-sp-4); }
.vc-tur-hero__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vc-accent-2); background: var(--vc-accent-weak);
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 5px 12px; border-radius: var(--vc-r-pill);
  margin-bottom: var(--vc-sp-3);
}
.vc-tur-filtros { margin-block: var(--vc-sp-4); }
.vc-tur-filtros .vc-filtros { align-items: center; }

/* Grid de destinos: 1 col en telefono, 2 en tablet, 3 en escritorio */
.vc-tur-grid { display: grid; gap: var(--vc-sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .vc-tur-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-tur-grid { grid-template-columns: repeat(3, 1fr); } }

/* La tarjeta entera es un boton (abre la hoja de detalle) */
.vc-tur-card { display: flex; }
.vc-tur-card__abrir {
  display: flex; flex-direction: column; width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.vc-tur-card__abrir:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 2px; }
.vc-tur-card .vc-card__cuerpo { flex: 1; }

/* Fondo con degradado por tipo de experiencia (si no hay foto, esto es
   lo que se ve; el icono grande funciona de "marca de agua"). */
.vc-tur-card__media { aspect-ratio: 16 / 9; }
.vc-tur-media--historia   { background: linear-gradient(150deg, #3B2A16 0%, #1E1A12 60%, #14110C 100%); }
.vc-tur-media--naturaleza { background: linear-gradient(150deg, #12352A 0%, #0E2018 60%, #0A1712 100%); }
.vc-tur-media--aventura   { background: linear-gradient(150deg, #33221C 0%, #1E1512 60%, #140F0C 100%); }
.vc-tur-media--pueblos    { background: linear-gradient(150deg, #232A45 0%, #161A2E 60%, #101322 100%); }
.vc-tur-card__glifo {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.28); pointer-events: none;
}
.vc-tur-card__glifo svg {
  width: clamp(56px, 22%, 84px); height: auto;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}
/* Si la foto cargo, queda por encima del degradado y del glifo */
.vc-tur-card__foto { position: relative; z-index: 1; }
.vc-tur-card__media .vc-card__flags, .vc-tur-det__media .vc-card__flags { z-index: 2; }

.vc-tur-badge {
  color: #EAF6FF; background: rgba(8, 18, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.22); backdrop-filter: blur(4px);
}
.vc-tur-card__desc { -webkit-line-clamp: 3; }
.vc-tur-card__mas {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--vc-sp-2);
  font-size: 0.82rem; font-weight: 700; color: var(--vc-accent-2);
}
.vc-tur-card:hover .vc-tur-card__mas { text-decoration: underline; }

/* Hoja de detalle del destino */
.vc-tur-det__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--vc-r); margin-bottom: var(--vc-sp-4);
}
.vc-tur-det__media .vc-img { position: relative; z-index: 1; }
.vc-tur-det__titulo {
  font-family: var(--vc-font-head); font-weight: 600;
  font-size: clamp(1.35rem, 5vw, 1.7rem); margin: 0 0 4px;
}
.vc-tur-det__dist { color: var(--vc-text-dim); font-size: 0.85rem; margin: 0 0 var(--vc-sp-3); }
.vc-tur-det__narracion { display: flex; flex-direction: column; gap: var(--vc-sp-3); }
.vc-tur-det__narracion p { color: var(--vc-text-muted); line-height: 1.65; margin: 0; }
.vc-tur-det__narracion p:first-child { color: var(--vc-text); }
.vc-tur-det__datos {
  display: grid; grid-template-columns: 1fr; gap: var(--vc-sp-3);
  margin-top: var(--vc-sp-4);
}
@media (min-width: 560px) { .vc-tur-det__datos { grid-template-columns: 1fr 1fr; } }
.vc-tur-det__dato {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--vc-sp-3) var(--vc-sp-4);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm); font-size: 0.88rem; color: var(--vc-text-muted);
}
.vc-tur-det__dato-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--vc-accent-2);
}

/* ---------------- AVISO DE VERSION NUEVA (lo monta app.js) ---------- */
/* El Service Worker nuevo espera; esta barra ofrece aplicarlo. Va sobre la
   bottom-nav para no tapar la navegacion. */
.vc-update {
  position: fixed; left: 50%; z-index: var(--vc-z-toast);
  bottom: calc(var(--vc-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
  transform: translate(-50%, 14px);
  width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: var(--vc-sp-3);
  padding: 10px 10px 10px var(--vc-sp-4);
  background: var(--vc-bg-2); color: var(--vc-text);
  border: 1px solid var(--vc-border-fuerte); border-radius: var(--vc-r);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--vc-trans), transform var(--vc-trans);
}
.vc-update.is-visible { opacity: 1; transform: translate(-50%, 0); }
.vc-update__txt { flex: 1 1 auto; font-size: 0.92rem; line-height: 1.35; }
.vc-update .vc-btn { flex: 0 0 auto; }
.vc-update__x {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--vc-r-sm);
  color: var(--vc-text-muted); font-size: 1.5rem; line-height: 1;
}
.vc-update__x:hover { color: var(--vc-text); background: var(--vc-surface); }

@media (prefers-reduced-motion: reduce) {
  .vc-update { transition: none; transform: translate(-50%, 0); }
}

/* ============ TANDA 2: NECESIDADES, BARRA PEGAJOSA, HORARIO, LIBRETA ==== */

/* Titulo de seccion menor (para bloques de apoyo como "¿Que necesitas hoy?") */
.vc-seccion__titulo--sm { font-size: clamp(1.05rem, 3.4vw, 1.25rem); }
.vc-seccion__titulo--sm::after { width: 28px; height: 2px; margin-top: 8px; }
.vc-seccion--nec { margin-block: var(--vc-sp-6) var(--vc-sp-4); }

/* ---- Chips de necesidad ---------------------------------------------- */
.vc-chips--nec { margin-top: var(--vc-sp-3); }
.vc-chip-nec {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--vc-r-pill);
  border: 1px dashed var(--vc-border-fuerte);
  background: transparent; color: var(--vc-text-normal);
  font-weight: 600; font-size: 0.85rem; white-space: nowrap; cursor: pointer;
  transition: color var(--vc-trans), border-color var(--vc-trans), background var(--vc-trans), transform var(--vc-trans);
}
.vc-chip-nec:hover {
  color: var(--vc-text); background: var(--vc-surface);
  border-style: solid; border-color: var(--vc-accent-2); transform: translateY(-1px);
}
.vc-chip-nec:active { transform: scale(0.96); }

/* ---- Barra de filtros pegajosa --------------------------------------- */
.vc-filtrobar {
  position: sticky; top: var(--vc-header-h); z-index: 45;
  margin-block: var(--vc-sp-5) var(--vc-sp-6);
  padding-block: var(--vc-sp-3);
  background: var(--vc-bg);
  transition: box-shadow var(--vc-trans), background var(--vc-trans);
}
/* Al quedar pegada se separa del contenido que pasa por debajo. Los margenes
   negativos la hacen sangrar hasta el borde: sin ellos se ve el contenido
   colandose por los costados del contenedor con padding. */
.vc-filtrobar.is-fija {
  margin-inline: calc(var(--vc-sp-4) * -1);
  padding-inline: var(--vc-sp-4);
  background: rgba(11, 22, 38, 0.92);
  -webkit-backdrop-filter: var(--vc-blur); backdrop-filter: var(--vc-blur);
  border-bottom: 1px solid var(--vc-border);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

/* Interruptores de filtro ("Abierto ahora", "Guardados") */
.vc-chip-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 15px;
  border-radius: var(--vc-r-pill);
  border: 1px solid var(--vc-border-fuerte);
  background: var(--vc-surface); color: var(--vc-text-muted);
  font-weight: 600; font-size: 0.85rem; white-space: nowrap; cursor: pointer;
  transition: color var(--vc-trans), border-color var(--vc-trans), background var(--vc-trans);
}
.vc-chip-filtro svg { width: 17px; height: 17px; flex: 0 0 auto; }
.vc-chip-filtro:hover { color: var(--vc-text); border-color: var(--vc-accent-2); }
.vc-chip-filtro.is-activo {
  background: var(--vc-accent); color: var(--vc-on-accent); border-color: transparent;
}
.vc-chip-filtro span[data-vc-conteo-libreta]:not(:empty) {
  font-variant-numeric: tabular-nums; opacity: 0.75;
}

/* ---- Insignia de horario --------------------------------------------- */
.vc-badge--horario { font-weight: 700; }
.vc-badge--horario.is-abierto {
  background: rgba(34, 197, 94, 0.16); color: #86EFAC; border-color: rgba(34, 197, 94, 0.4);
}
.vc-badge--horario.is-cerrado {
  background: rgba(148, 163, 184, 0.14); color: var(--vc-text-muted); border-color: var(--vc-border-fuerte);
}
.vc-detalle__horario {
  color: var(--vc-text-muted); font-size: 0.92rem; line-height: 1.55;
  margin: var(--vc-sp-2) 0 0;
}

/* ---- Boton de "Mi libreta" sobre la foto ------------------------------ */
.vc-guardar {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--vc-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 18, 32, 0.62); color: var(--vc-text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color var(--vc-trans), background var(--vc-trans), transform var(--vc-trans);
}
.vc-guardar svg { width: 20px; height: 20px; }
.vc-guardar:hover { background: rgba(8, 18, 32, 0.85); transform: scale(1.06); }
.vc-guardar.is-guardado { color: var(--vc-vip); border-color: rgba(34, 211, 238, 0.5); }
.vc-btn.is-guardado { color: var(--vc-vip); border-color: rgba(34, 211, 238, 0.5); }

/* ---- Boton de buscar por voz ------------------------------------------ */
.vc-voz {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  margin-right: -6px;
  border: 0; border-radius: var(--vc-r-pill);
  background: transparent; color: var(--vc-text-dim); cursor: pointer;
  transition: color var(--vc-trans), background var(--vc-trans);
}
.vc-voz svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-voz:hover { color: var(--vc-text); background: var(--vc-surface); }
.vc-voz.is-escuchando { color: var(--vc-peligro); animation: vc-latido 1.1s ease-in-out infinite; }
@keyframes vc-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
  .vc-chip-nec:hover, .vc-guardar:hover { transform: none; }
  .vc-voz.is-escuchando { animation: none; }
}

/* ---- Editor semanal de horarios (registro y edicion) ------------------ */
.vc-horarios__filas { display: flex; flex-direction: column; gap: var(--vc-sp-2); margin-top: var(--vc-sp-3); }
.vc-horario-fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2) var(--vc-sp-3);
  padding: var(--vc-sp-2) var(--vc-sp-3);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm);
}
.vc-horario-fila__dia {
  display: flex; align-items: center; gap: var(--vc-sp-2);
  min-width: 122px; min-height: 44px;
  font-weight: 600; color: var(--vc-text); cursor: pointer;
}
.vc-horario-fila__dia input { width: 20px; height: 20px; accent-color: var(--vc-accent); cursor: pointer; }
.vc-horario-fila__tramos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2) var(--vc-sp-3); }
.vc-horario-tramo { display: inline-flex; align-items: center; gap: 6px; color: var(--vc-text-muted); font-size: 0.86rem; }
.vc-horario-tramo__y { color: var(--vc-text-dim); }
.vc-horario-fila input[type="time"] {
  min-height: 44px; padding: 0 10px;
  background: var(--vc-surface); color: var(--vc-text);
  border: 1px solid var(--vc-input-border); border-radius: var(--vc-r-xs);
  font: inherit; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.vc-horario-fila input[type="time"]:disabled { opacity: 0.35; }
/* Dia cerrado: se ocultan los relojes y se dice "Cerrado" en su lugar. */
.vc-horario-fila__cerrado { display: none; color: var(--vc-text-dim); font-size: 0.86rem; }
.vc-horario-fila.is-cerrado .vc-horario-tramo { display: none; }
.vc-horario-fila.is-cerrado .vc-horario-fila__cerrado { display: inline; }
.vc-horarios__acciones { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); margin-top: var(--vc-sp-3); }
.vc-horarios__acciones .vc-btn { font-size: 0.84rem; }

@media (max-width: 480px) {
  .vc-horario-fila { flex-direction: column; align-items: flex-start; }
  .vc-horario-fila__dia { min-width: 0; }
}

/* ---- Afiche con QR (editar.html) -------------------------------------- */
.vc-afiche { margin-top: var(--vc-sp-6); padding: var(--vc-sp-5); }
.vc-afiche__titulo { font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-2); }
.vc-afiche__texto { color: var(--vc-text-muted); font-size: 0.94rem; max-width: 62ch; margin: 0 0 var(--vc-sp-4); }
.vc-afiche__acciones { flex-wrap: wrap; gap: var(--vc-sp-2); }
.vc-afiche__previo { margin-top: var(--vc-sp-4); }
/* El afiche se dibuja a 1000x1414 para imprimir; aqui solo se previsualiza. */
.vc-afiche__previo canvas {
  width: 100%; max-width: 340px; height: auto;
  border: 1px solid var(--vc-border-fuerte); border-radius: var(--vc-r-sm);
}

/* ============ TANDA 3: VITRINA, PULSO, INSIGNIAS Y METRICAS ============ */

/* ---- Vitrina: fila de circulos en la portada -------------------------- */
.vc-vit { margin-block: var(--vc-sp-6); }
.vc-vit__head { display: flex; align-items: baseline; gap: var(--vc-sp-3); flex-wrap: wrap; }
.vc-vit__nota { color: var(--vc-text-dim); font-size: 0.82rem; }
.vc-vit__fila {
  display: flex; gap: var(--vc-sp-4); overflow-x: auto;
  padding: var(--vc-sp-4) 2px var(--vc-sp-2);
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.vc-vit__fila::-webkit-scrollbar { display: none; }
.vc-vit__circulo {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 82px; background: none; border: 0; padding: 0; cursor: pointer;
}
/* El aro degradado es la señal de "hay algo nuevo aca", igual que un estado. */
.vc-vit__aro {
  display: grid; place-items: center; width: 72px; height: 72px;
  border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--vc-accent), var(--vc-vip), var(--vc-accent-2), var(--vc-accent));
  transition: transform var(--vc-trans);
}
.vc-vit__circulo:hover .vc-vit__aro { transform: scale(1.06); }
.vc-vit__medio {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  background: var(--vc-surface); border: 2px solid var(--vc-bg);
}
.vc-vit__medio .vc-img { width: 100%; height: 100%; object-fit: cover; }
.vc-vit__inicial { font-family: var(--vc-font-head); font-size: 1.6rem; font-weight: 700; color: var(--vc-accent-2); }
.vc-vit__nombre {
  max-width: 82px; font-size: 0.75rem; line-height: 1.2; color: var(--vc-text-muted);
  text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---- Visor de la vitrina --------------------------------------------- */
.vc-vit__barras { display: flex; gap: 4px; margin-bottom: var(--vc-sp-3); }
.vc-vit__barras span { flex: 1; height: 3px; border-radius: 2px; background: var(--vc-border-fuerte); }
.vc-vit__barras span.is-activa { background: var(--vc-accent); }
.vc-vit__foto { border-radius: var(--vc-r); overflow: hidden; background: var(--vc-bg-2); max-height: 46vh; }
.vc-vit__foto .vc-img { width: 100%; height: 100%; max-height: 46vh; object-fit: contain; }
.vc-vit__info { margin-top: var(--vc-sp-4); }
.vc-vit__titulo { font-size: var(--vc-fs-h2); margin-bottom: 4px; }
.vc-vit__meta { color: var(--vc-text-dim); font-size: 0.82rem; margin: 0 0 var(--vc-sp-3); }
.vc-vit__texto { color: var(--vc-text-normal); font-size: 1.02rem; line-height: 1.55; margin: 0; }
.vc-vit__precio { font-family: var(--vc-font-head); font-size: var(--vc-fs-num); color: var(--vc-exito); margin: var(--vc-sp-2) 0 0; }
.vc-vit__acciones { display: flex; flex-direction: column; gap: var(--vc-sp-3); margin-top: var(--vc-sp-4); }

/* ---- Pulso del Valle -------------------------------------------------- */
.vc-pulso {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-3);
  margin-block: var(--vc-sp-5);
  padding: var(--vc-sp-3) var(--vc-sp-4);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r);
}
.vc-pulso__tag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vc-accent-2); white-space: nowrap;
}
.vc-pulso__datos { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2) var(--vc-sp-5); flex: 1; }
.vc-pulso__dato { display: inline-flex; align-items: center; gap: 7px; color: var(--vc-text-muted); font-size: 0.86rem; }
.vc-pulso__dato b { color: var(--vc-text); font-weight: 700; }
.vc-pulso__dato a { color: var(--vc-accent-2); text-decoration: underline; text-underline-offset: 2px; }
.vc-pulso__ic { display: inline-grid; place-items: center; color: var(--vc-accent-2); }
.vc-pulso__ic svg { width: 16px; height: 16px; }

/* ---- Insignias ganadas ------------------------------------------------ */
.vc-insignia {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--vc-r-pill);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.vc-insignia.es-recomendado { background: rgba(34, 197, 94, 0.14); color: #86EFAC; border-color: rgba(34, 197, 94, 0.35); }
.vc-insignia.es-nuevo       { background: rgba(56, 189, 248, 0.14); color: #7DD3FC; border-color: rgba(56, 189, 248, 0.35); }
.vc-insignia.es-domingo     { background: rgba(245, 158, 11, 0.14); color: #FCD34D; border-color: rgba(245, 158, 11, 0.32); }

/* ---- Boton de recomendar ---------------------------------------------- */
.vc-recomendar { display: inline-flex; align-items: center; gap: 7px; }
.vc-recomendar.is-activo { color: var(--vc-exito); border-color: rgba(34, 197, 94, 0.5); }
.vc-recomendar__n:not(:empty) {
  min-width: 22px; padding: 0 6px; border-radius: var(--vc-r-pill);
  background: var(--vc-surface-2); color: var(--vc-text-muted);
  font-size: 0.76rem; font-variant-numeric: tabular-nums; text-align: center;
}

/* ---- Metricas del dueño ----------------------------------------------- */
.vc-mx { padding: var(--vc-sp-5); margin-bottom: var(--vc-sp-5); }
.vc-mx__titulo { font-size: var(--vc-fs-h2); margin-bottom: 4px; }
.vc-mx__intro { color: var(--vc-text-dim); font-size: 0.85rem; margin: 0 0 var(--vc-sp-4); }
.vc-mx__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--vc-sp-3); }
.vc-mx__tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--vc-sp-3) var(--vc-sp-4);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border); border-radius: var(--vc-r-sm);
}
.vc-mx__num {
  font-family: var(--vc-font-head); font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 700;
  color: var(--vc-text); line-height: 1; font-variant-numeric: tabular-nums;
}
.vc-mx__lbl { color: var(--vc-text-normal); font-size: 0.85rem; line-height: 1.3; }
.vc-mx__det { color: var(--vc-text-dim); font-size: 0.76rem; margin-top: 2px; }

.vc-mx__graficos { display: grid; gap: var(--vc-sp-4); margin-top: var(--vc-sp-5); }
@media (min-width: 720px) { .vc-mx__graficos { grid-template-columns: 1fr 1fr; } }
.vc-mx__fig { margin: 0; }
/* El titulo lleva tinta de texto, no el color de la serie: el punto de al
   lado es el que carga la identidad (regla de la guia de graficos). */
.vc-mx__figtitulo {
  display: flex; align-items: center; gap: 7px;
  color: var(--vc-text-normal); font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--vc-sp-2);
}
.vc-mx__punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.vc-mx__lienzo { position: relative; }
.vc-mx__svg { width: 100%; height: 132px; display: block; overflow: visible; }
.vc-mx__zona { cursor: crosshair; }
.vc-mx__tip {
  position: absolute; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 6px; padding: 6px 10px; white-space: nowrap;
  background: var(--vc-surface-2); color: var(--vc-text);
  border: 1px solid var(--vc-border-fuerte); border-radius: var(--vc-r-xs);
  font-size: 0.78rem; pointer-events: none; z-index: 3;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.vc-mx__tabla { margin-top: var(--vc-sp-4); }
.vc-mx__tabla summary { color: var(--vc-accent-2); font-size: 0.85rem; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.vc-mx__tabla-scroll { max-height: 260px; overflow: auto; border: 1px solid var(--vc-border); border-radius: var(--vc-r-sm); }
.vc-mx__tabla table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.vc-mx__tabla th, .vc-mx__tabla td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--vc-border); }
.vc-mx__tabla th { color: var(--vc-text-muted); font-weight: 600; position: sticky; top: 0; background: var(--vc-bg-2); }
.vc-mx__tabla td { color: var(--vc-text-normal); font-variant-numeric: tabular-nums; }
.vc-mx__vacio { padding: var(--vc-sp-4) 0 0; }
.vc-mx__vacio-t { color: var(--vc-text); font-weight: 600; margin: 0 0 4px; }
.vc-mx__vacio-d { color: var(--vc-text-muted); font-size: 0.9rem; max-width: 58ch; margin: 0; }

/* ---- Publicar vitrina (editar.html) ----------------------------------- */
.vc-vitpub { padding: var(--vc-sp-5); margin-bottom: var(--vc-sp-5); }
.vc-vitpub__titulo { font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-2); }
.vc-vitpub__texto { color: var(--vc-text-muted); font-size: 0.92rem; max-width: 62ch; margin: 0 0 var(--vc-sp-4); }
.vc-vitpub__form { display: flex; flex-direction: column; gap: var(--vc-sp-3); }
.vc-vitpub__mias { margin-top: var(--vc-sp-4); }
.vc-vitpub__lista { display: flex; flex-direction: column; gap: var(--vc-sp-2); margin-top: var(--vc-sp-2); }
.vc-vitpub__item {
  display: flex; align-items: center; gap: var(--vc-sp-3);
  padding: var(--vc-sp-2) var(--vc-sp-3);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border); border-radius: var(--vc-r-sm);
}
.vc-vitpub__mini { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--vc-r-xs); overflow: hidden; }
.vc-vitpub__mini .vc-img { width: 100%; height: 100%; object-fit: cover; }
.vc-vitpub__cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vc-vitpub__t { color: var(--vc-text); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-vitpub__d { color: var(--vc-text-dim); font-size: 0.76rem; }

@media (prefers-reduced-motion: reduce) {
  .vc-vit__circulo:hover .vc-vit__aro { transform: none; }
}

/* ---- "Ver mas negocios" (paginacion del directorio) ------------------- */
/* Boton y no scroll infinito: en el valle mucha gente navega con datos
   contados, y un listado que sigue cargando solo gasta megas que nadie pidio. */
.vc-ver-mas { display: flex; justify-content: center; margin-top: var(--vc-sp-5); }
.vc-ver-mas .vc-btn { display: inline-flex; align-items: center; gap: 8px; }
.vc-ver-mas__n {
  padding: 2px 8px; border-radius: var(--vc-r-pill);
  background: var(--vc-surface-2); color: var(--vc-text-dim);
  font-size: 0.76rem; font-variant-numeric: tabular-nums;
}

/* ---- Linea de auspicio de seccion (fase 18) --------------------------- */
/* Un renglon, no un banner: acompaña al contenido que el vecino vino a ver
   en vez de taparlo. */
.vc-auspicio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: var(--vc-sp-3) 0 var(--vc-sp-4);
  padding: 8px var(--vc-sp-3);
  border-left: 3px solid var(--vc-accent);
  background: var(--vc-bg-2);
  border-radius: 0 var(--vc-r-xs) var(--vc-r-xs) 0;
  font-size: 0.84rem; color: var(--vc-text-dim);
}
.vc-auspicio__ctx { color: var(--vc-text-muted); }
.vc-auspicio__sep { color: var(--vc-text-dim); }
.vc-auspicio__marca {
  color: var(--vc-accent-2); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.vc-auspicio__lema { display: block; color: var(--vc-text-dim); font-style: italic; }

/* ---- Listas del panel de administracion ------------------------------- */
.vc-adm-lista { display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-adm-item {
  display: flex; align-items: center; gap: var(--vc-sp-3); flex-wrap: wrap;
  padding: var(--vc-sp-3);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm);
}
.vc-adm-item__cuerpo { flex: 1 1 220px; display: flex; flex-direction: column; min-width: 0; }
.vc-adm-item__t { color: var(--vc-text); font-weight: 600; font-size: 0.94rem; }
.vc-adm-item__d { color: var(--vc-text-muted); font-size: 0.8rem; }
.vc-adm-vigente { color: var(--vc-exito); }
.vc-adm-vencido { color: var(--vc-text-dim); }
.vc-adm-urgente { color: var(--vc-aviso); }

/* ---- Avisos al celular (fase 19) -------------------------------------- */
.vc-avisos {
  margin-top: var(--vc-sp-6); padding: var(--vc-sp-5);
  background: var(--vc-surface); border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-lg);
}
.vc-avisos__titulo { font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-2); }
.vc-avisos__texto { color: var(--vc-text-muted); font-size: 0.92rem; max-width: 60ch; margin: 0 0 var(--vc-sp-4); }
.vc-avisos__temas { display: flex; flex-direction: column; gap: var(--vc-sp-2); border: 0; padding: 0; margin: 0 0 var(--vc-sp-4); }
.vc-avisos__tema {
  display: flex; align-items: flex-start; gap: var(--vc-sp-3);
  min-height: 44px; padding: var(--vc-sp-2) var(--vc-sp-3);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm); cursor: pointer;
}
.vc-avisos__tema input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--vc-accent); flex: 0 0 auto; cursor: pointer; }
.vc-avisos__tema-t { display: block; color: var(--vc-text); font-weight: 600; font-size: 0.92rem; }
.vc-avisos__tema-d { display: block; color: var(--vc-text-dim); font-size: 0.8rem; }
.vc-avisos__pueblo { color: var(--vc-text-muted); font-size: 0.85rem; margin: 0 0 var(--vc-sp-4); }
.vc-avisos__pueblo b { color: var(--vc-text); }
.vc-avisos__estado { color: var(--vc-exito); font-size: 0.85rem; margin: var(--vc-sp-3) 0 0; }
.vc-avisos__bloqueado {
  color: var(--vc-aviso); font-size: 0.88rem; line-height: 1.5;
  padding: var(--vc-sp-3); border-radius: var(--vc-r-sm);
  background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.3);
  margin: 0;
}

/* ---- Pagina "Instalar la app" ----------------------------------------- */
.vc-inst__cab { display: flex; align-items: flex-start; gap: var(--vc-sp-4); margin-bottom: var(--vc-sp-5); }
.vc-inst__logo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--vc-r); }
.vc-inst__lema { color: var(--vc-text-muted); font-size: 0.95rem; line-height: 1.55; max-width: 60ch; margin: var(--vc-sp-3) 0 0; }
.vc-inst__lema b { color: var(--vc-text); }

.vc-inst { display: flex; flex-direction: column; gap: var(--vc-sp-4); }
.vc-inst__bloque {
  padding: var(--vc-sp-5);
  background: var(--vc-surface); border: 1px solid var(--vc-border-fuerte);
  border-radius: var(--vc-r-lg);
}
.vc-inst__bloque--ok { border-color: rgba(34, 197, 94, 0.45); }
.vc-inst__bloque--porque { margin-top: var(--vc-sp-5); background: var(--vc-bg-2); }
.vc-inst__titulo {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-3);
}
.vc-inst__titulo svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--vc-accent-2); }
.vc-inst__intro { color: var(--vc-text-muted); font-size: 0.94rem; line-height: 1.6; max-width: 62ch; margin: 0 0 var(--vc-sp-4); }
.vc-inst__intro b { color: var(--vc-text); }

/* Pasos numerados: aqui el numero SI es informacion — es una secuencia que
   hay que seguir en orden en la pantalla del telefono. */
.vc-inst__pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vc-sp-3); }
.vc-inst__paso { display: flex; align-items: flex-start; gap: var(--vc-sp-3); }
.vc-inst__num {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vc-accent); color: var(--vc-on-accent);
  font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.vc-inst__txt { color: var(--vc-text-normal); font-size: 0.94rem; line-height: 1.5; }
.vc-inst__txt b { color: var(--vc-text); }
.vc-inst__ic-inline {
  display: inline-grid; place-items: center; vertical-align: -5px;
  width: 24px; height: 24px; padding: 2px;
  border-radius: 6px; background: var(--vc-bg-2); color: var(--vc-accent-2);
}
.vc-inst__ic-inline svg { width: 100%; height: 100%; }

.vc-inst__nota {
  color: var(--vc-text-dim); font-size: 0.85rem; line-height: 1.55;
  max-width: 62ch; margin: var(--vc-sp-4) 0 0;
}
.vc-inst__nota b { color: var(--vc-text-muted); }

.vc-inst__apk { margin-top: var(--vc-sp-4); border-top: 1px solid var(--vc-border); padding-top: var(--vc-sp-3); }
.vc-inst__apk summary { color: var(--vc-accent-2); font-size: 0.88rem; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.vc-inst__apk-cuerpo { padding-top: var(--vc-sp-2); }
.vc-inst__apk-cuerpo .vc-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--vc-sp-3); }
.vc-inst__apk-cuerpo .vc-btn svg { width: 18px; height: 18px; }

.vc-inst__otros { margin-top: var(--vc-sp-2); }
.vc-inst__otros summary { color: var(--vc-text-muted); font-size: 0.88rem; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.vc-inst__otros-cuerpo { display: flex; flex-direction: column; gap: var(--vc-sp-4); padding-top: var(--vc-sp-3); }

.vc-inst__ventajas { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-inst__ventajas li { color: var(--vc-text-muted); font-size: 0.92rem; line-height: 1.55; }
.vc-inst__ventajas b { color: var(--vc-text); }

@media (max-width: 480px) {
  .vc-inst__cab { flex-direction: column; gap: var(--vc-sp-3); }
}

/* ============ AJUSTES REALES DE TELEFONO ============================== */
/* Medido en un telefono de 360px de ancho, que es lo que usa la mayoria en
   el valle. Lo que estaba roto:
     - la tarjeta quedaba de 156px (dos columnas), el titulo se partia en
       tres lineas y los tres botones del pie sumaban 250px: se salian;
     - la insignia "Direccion Constatada por Agencia" mide 225px y quedaba
       cortada por el borde de la tarjeta;
     - la barra de filtros fija ocupaba 195px, casi una cuarta parte de la
       pantalla, para siempre.                                             */

/* ---- Una sola columna hasta 560px ------------------------------------- */
/* Dos columnas necesitan al menos ~270px por tarjeta para que el nombre del
   negocio entre en una linea y quepa la fila de botones. */
/* La escalera de columnas vive junto a la definicion de .vc-bento, arriba
   en esta hoja: apilar overrides aqui abajo pisaba las reglas de escritorio. */

/* ---- El pie de la tarjeta nunca se desborda --------------------------- */
.vc-card__pie { flex-wrap: wrap; gap: var(--vc-sp-2); }
/* "Contactar" es la accion principal: se estira y empuja al resto a la
   siguiente linea antes que salirse. */
.vc-card__pie .vc-btn--whatsapp { flex: 1 1 auto; }
.vc-card__pie .vc-btn--ic { flex: 0 0 auto; margin-left: auto; }

/* ---- Las insignias se acomodan al ancho que haya ---------------------- */
/* Sin esto, un badge largo fuerza el ancho de la tarjeta y se corta. */
.vc-card__meta .vc-badge,
.vc-card__meta .vc-insignia {
  max-width: 100%;
  white-space: normal;      /* que envuelva antes que desbordar */
  text-align: left;
}
.vc-sello-agencia { line-height: 1.3; }

/* ---- Barra de filtros compacta en telefono --------------------------- */
@media (max-width: 560px) {
  /* Municipio + "Abierto ahora" + "Guardados" pasan de apilarse a una sola
     fila que se desliza. Tres filas eran 195px fijos; asi son dos. */
  .vc-filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .vc-filtros::-webkit-scrollbar { display: none; }
  .vc-filtros > * { flex: 0 0 auto; }
  /* Degradado al final, como en los rubros: sin el, "Abierto aho..." cortado
     al ras del borde se lee como un error de maquetado y no como "desliza". */
  .vc-filtros.is-desliza {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  .vc-filtrobar { padding-block: var(--vc-sp-2); margin-block: var(--vc-sp-4); }
  .vc-filtrobar.is-fija { padding-block: 10px; }

  /* Los chips tambien pueden ser un poco mas bajos sin perder el area
     tactil de 44px: el minimo se mantiene, se recorta el aire de mas. */
  .vc-chip-cat, .vc-chip-filtro, .vc-chip-nec { padding-inline: 13px; }

  /* La seccion de necesidades no necesita tanto respiro arriba del filtro. */
  .vc-seccion--nec { margin-block: var(--vc-sp-5) var(--vc-sp-3); }
}

/* ---- Titulos de tarjeta legibles en una columna ----------------------- */
@media (max-width: 559px) {
  .vc-card__titulo { font-size: 1.08rem; }
  .vc-card__desc { -webkit-line-clamp: 3; }
  /* Con una sola columna la foto se ve mas alta de la cuenta si se deja
     16/10 a 328px: se achata un poco para que entre mas negocio en pantalla. */
  .vc-card__media { aspect-ratio: 16 / 9; }
}

/* ============ "PROXIMAS 24 HORAS" — grafico y horas en un solo carril === */
/* Antes eran dos cosas separadas: un SVG estirado al ancho de la pantalla
   (que comprimia las 24 h y no se movia nunca) y una fila de tarjetas con su
   propio scroll. Ahora comparten UN carril, asi que la curva se desplaza con
   las horas y cada punto cae sobre su tarjeta. No hay nada que sincronizar:
   son el mismo elemento. */
.vc-24h {
  position: relative; --mx: 50%; --my: 50%;
  background: var(--vc-surface); border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--vc-r-lg); padding: var(--vc-sp-4) 0 var(--vc-sp-3);
  overflow: hidden;
}
.vc-24h::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(56, 189, 248, 0.16), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
.vc-24h:hover::after, .vc-24h.is-glow::after { opacity: 1; }

.vc-24h__pista-ayuda {
  color: var(--vc-text-dim); font-size: 0.78rem;
  margin: calc(var(--vc-sp-3) * -1) 0 var(--vc-sp-3);
}

.vc-24h__carril {
  position: relative; z-index: 1;
  overflow-x: auto; overflow-y: hidden;
  padding-inline: var(--vc-sp-4);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Deja ver que hay mas a la derecha sin agregar un elemento extra. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
}
.vc-24h__carril::-webkit-scrollbar { display: none; }
.vc-24h__pista { position: relative; }
.vc-24h__svg { display: block; overflow: visible; }

/* Curva */
.vc-onda-linea {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: vc-dibujar 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 3px 10px rgba(255, 138, 31, 0.35));
}
@keyframes vc-dibujar { to { stroke-dashoffset: 0; } }
.vc-onda-area { opacity: 0; animation: vc-area-in 0.9s ease 0.7s forwards; }
@keyframes vc-area-in { to { opacity: 1; } }

/* Un punto por hora. El de "ahora" va relleno; el resto, hueco. */
.vc-24h__pt {
  fill: var(--vc-bg-2); stroke: #FF8A1F; stroke-width: 2;
  transition: r 0.16s ease, fill 0.16s ease;
}
.vc-24h__pt.es-ahora { fill: #FF8A1F; }
.vc-24h__pt.es-activo { fill: #FFD9A8; r: 6.5; }

/* Solo se etiquetan la maxima y la minima: un numero sobre cada punto
   convierte el grafico en una tabla ilegible. */
.vc-24h__valor {
  fill: var(--vc-text); font-size: 13px; font-weight: 700;
  font-family: var(--vc-font-body); paint-order: stroke;
  stroke: var(--vc-surface); stroke-width: 3px; stroke-linejoin: round;
}

/* Umbral de helada: linea + ETIQUETA. Un aviso de helada no puede depender
   solo del color, ni para quien no distingue el cian del naranja ni para
   quien mira la pantalla al sol. */
.vc-24h__helada {
  stroke: #7DD3FC; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.75;
}
.vc-24h__helada-txt {
  fill: #7DD3FC; font-size: 11px; font-weight: 700;
  font-family: var(--vc-font-body); letter-spacing: 0.02em;
}

/* Fila de horas: mismo paso que las columnas del grafico (74 + 8). */
.vc-24h__horas { display: flex; gap: 8px; margin-top: var(--vc-sp-2); }
.vc-24h__horas .vc-hora {
  flex: 0 0 74px; width: 74px;
  transition: border-color var(--vc-trans), background var(--vc-trans), transform var(--vc-trans);
  animation: vc-hora-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 0.03s + 0.15s);
}
@keyframes vc-hora-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vc-24h__horas .vc-hora--fria { border-color: rgba(125, 211, 252, 0.5); background: rgba(125, 211, 252, 0.08); }
.vc-24h__horas .vc-hora.es-ahora { border-color: rgba(255, 138, 31, 0.55); background: rgba(255, 138, 31, 0.10); }
.vc-24h__horas .vc-hora.es-ahora .vc-hora__t { color: #FFB980; }
.vc-24h__horas .vc-hora.es-ahora .vc-hora__ic { color: #FFB980; }
.vc-24h__horas .vc-hora.es-activa {
  border-color: var(--vc-accent-2); background: var(--vc-surface-2); transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .vc-onda-linea { stroke-dashoffset: 0; animation: none; }
  .vc-onda-area { opacity: 1; animation: none; }
  .vc-24h__horas .vc-hora { animation: none; }
  .vc-24h__horas .vc-hora.es-activa { transform: none; }
}

/* ============ REGISTRO SIN CORREO Y AYUDA HUMANA ====================== */

/* ---- Ayuda humana ----------------------------------------------------- */
/* De toda la lista de accesibilidad este es el que mas cambia el resultado
   y el mas barato: alguien a quien escribirle. En un pueblo la gente no
   abandona porque la pantalla sea dificil, abandona porque no tiene a quien
   preguntarle. */
.vc-ayuda {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-3);
  margin-top: var(--vc-sp-5); padding: var(--vc-sp-3) var(--vc-sp-4);
  background: var(--vc-bg-2); border: 1px dashed var(--vc-border-fuerte);
  border-radius: var(--vc-r);
}
.vc-ayuda__txt { flex: 1 1 200px; color: var(--vc-text-muted); font-size: 0.95rem; }
.vc-ayuda__btn { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.vc-ayuda__btn svg { width: 19px; height: 19px; }

/* ---- Registro en una pantalla ---------------------------------------- */
.vc-registro__lema {
  color: var(--vc-text-muted); font-size: 1.02rem; line-height: 1.6;
  max-width: 56ch; margin: 0 0 var(--vc-sp-5);
}
/* Los campos del alta son mas grandes que el resto de la app: es la pantalla
   que llena alguien de 60 años parado en su mostrador, a veces al sol. */
#vc-form-registro .vc-campo label,
#vc-form-registro .vc-campo__label-strong {
  font-size: 1.02rem; color: var(--vc-text); font-weight: 600;
}
#vc-form-registro .vc-campo__ayuda { font-size: 0.88rem; }
#vc-form-registro input,
#vc-form-registro select { min-height: 52px; font-size: 1.02rem; }
.vc-registro__enviar { min-height: 56px; font-size: 1.05rem; margin-top: var(--vc-sp-4); }
.vc-registro__nota { text-align: center; margin-top: var(--vc-sp-2); }

/* ---- Pantalla de "ya esta publicado" --------------------------------- */
/* Primero la buena noticia y el enlace a su negocio; recien despues lo que
   le falta. En ese orden: ya se gano el derecho a ver que funciono. */
.vc-listo {
  background: var(--vc-surface); border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--vc-r-lg); padding: var(--vc-sp-5);
}
.vc-listo__marca {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; margin-bottom: var(--vc-sp-3);
  background: rgba(34, 197, 94, 0.14); color: var(--vc-exito);
}
.vc-listo__marca svg { width: 30px; height: 30px; }
.vc-listo__titulo { font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-2); }
.vc-listo__texto { color: var(--vc-text-muted); font-size: 1rem; line-height: 1.6; max-width: 56ch; margin: 0 0 var(--vc-sp-4); }
.vc-listo__falta {
  margin-top: var(--vc-sp-5); padding-top: var(--vc-sp-4);
  border-top: 1px solid var(--vc-border);
}
.vc-listo__falta-t { font-size: 1.05rem; margin-bottom: var(--vc-sp-3); }
.vc-listo__lista {
  margin: 0 0 var(--vc-sp-4); padding-left: 20px;
  display: flex; flex-direction: column; gap: var(--vc-sp-2);
}
.vc-listo__lista li { color: var(--vc-text-muted); font-size: 0.95rem; line-height: 1.55; }
.vc-listo__lista b { color: var(--vc-text); }
.vc-listo .vc-campo__ayuda { text-align: center; margin-top: var(--vc-sp-2); }

/* El salto al plan pago, al final de la pantalla de "ya esta publicado".
   Mismo separador que el bloque de "lo que falta", pero sin el borde
   repetido arriba: son dos escalones del mismo descenso, no dos cajas. */
.vc-listo__subir {
  margin-top: var(--vc-sp-5); padding-top: var(--vc-sp-4);
  border-top: 1px solid var(--vc-border);
}
.vc-listo__subir .vc-listo__texto { margin-bottom: var(--vc-sp-4); }

/* ============ ENLACE DE ACCESO (fase 20) ============================== */
/* Entregar un negocio no es "compartir": el aviso va destacado y antes del
   boton, no como letra chica debajo. */
.vc-acceso { margin-top: var(--vc-sp-6); padding: var(--vc-sp-5); }
.vc-acceso__titulo { font-size: var(--vc-fs-h2); margin-bottom: var(--vc-sp-2); }
.vc-acceso__texto { color: var(--vc-text-muted); font-size: 0.94rem; max-width: 62ch; margin: 0 0 var(--vc-sp-3); }
.vc-acceso__aviso {
  display: block; margin: 0 0 var(--vc-sp-4); padding: var(--vc-sp-3);
  border-left: 3px solid var(--vc-aviso, #f59e0b);
  background: var(--vc-bg-2); border-radius: 0 var(--vc-r-sm) var(--vc-r-sm) 0;
  color: var(--vc-text); font-size: 0.9rem; line-height: 1.55; max-width: 62ch;
}
.vc-acceso__acciones { flex-wrap: wrap; gap: var(--vc-sp-2); }
.vc-acceso__salida { margin-top: var(--vc-sp-4); }
.vc-acceso__listo { font-weight: 600; margin-bottom: var(--vc-sp-2); }
/* El enlace se muestra entero y cortable: si no se puede copiar solo, la
   salida es marcarlo con el dedo, y para eso tiene que verse completo. */
.vc-acceso__url {
  display: block; margin-bottom: var(--vc-sp-3); padding: var(--vc-sp-3);
  background: var(--vc-bg-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm); font-size: 0.86rem; line-height: 1.5;
  overflow-wrap: anywhere; user-select: all;
}

/* ---- Aviso de cuidado, permanente en la ficha ------------------------ */
/* Contrapeso de haber bajado la frecuencia del modal: el consejo deja de
   interrumpir, pero no desaparece. Discreto y siempre presente vale mas
   que imperativo y siempre ignorado. */
.vc-detalle__cuidado {
  margin-top: var(--vc-sp-4); padding-top: var(--vc-sp-3);
  border-top: 1px solid var(--vc-border);
  color: var(--vc-text-muted); font-size: 0.86rem; line-height: 1.55;
}
.vc-detalle__cuidado b { color: var(--vc-text); }

/* =====================================================================
   ARTICULO — una pagina de lectura, no una ventana.
   La usan las paginas de turismo/<id>.html que escribe generar-turismo.mjs.
   Es el primer formato "de revista" del sitio: ancho de lectura acotado,
   una bajada que se distingue del cuerpo y un primer parrafo con mas peso.
   ===================================================================== */
.vc-articulo { max-width: 42rem; margin-inline: auto; }

/* Migas: de donde vino el lector y como volver a su pueblo. */
.vc-articulo__migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--vc-text-dim);
  margin-bottom: var(--vc-sp-3);
}
.vc-articulo__migas a { color: var(--vc-text-muted); text-decoration: none; }
.vc-articulo__migas a:hover { color: var(--vc-accent); text-decoration: underline; }

.vc-articulo__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--vc-r); margin-bottom: var(--vc-sp-4);
}
.vc-articulo__media .vc-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.vc-articulo__meta { margin-bottom: var(--vc-sp-2); }

.vc-articulo__titulo {
  font-family: var(--vc-font-head); font-weight: 600;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem);
  line-height: 1.12; letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--vc-sp-2);
}
/* La bajada es la misma frase que ve quien recibe el enlace por WhatsApp.
   Se distingue del cuerpo para que se lea como entrada, no como primer parrafo. */
.vc-articulo__bajada {
  font-size: 1.05rem; line-height: 1.55; color: var(--vc-text);
  margin: 0 0 var(--vc-sp-2);
}
.vc-articulo__dist {
  color: var(--vc-text-dim); font-size: 0.85rem;
  margin: 0 0 var(--vc-sp-4);
  padding-bottom: var(--vc-sp-3); border-bottom: 1px solid var(--vc-border);
}
.vc-articulo__cuerpo { display: flex; flex-direction: column; gap: var(--vc-sp-3); }
/* Solo los parrafos del texto, no los de adentro de una tarjeta de negocio. */
.vc-articulo__cuerpo > p {
  color: var(--vc-text-muted); line-height: 1.72; margin: 0;
  font-size: 1rem;
}
.vc-articulo__cuerpo > p:first-child { color: var(--vc-text); font-size: 1.04rem; }

/* =====================================================================
   ALERTAS DEL VALLE — el archivo (alertas.html)
   Reusa la tarjeta .vc-noticia de la portada a proposito: un bloqueo tiene
   que reconocerse igual en las dos pantallas.
   ===================================================================== */

/* SIN la animacion escalonada de la portada. .vc-noticia entra con
   animation-delay: calc(var(--i) * 0.05s) y `backwards`, o sea que arranca
   INVISIBLE; si --i no existe, el calc es invalido y la tarjeta podria no
   aparecer nunca. En la portada son tres avisos y el escalonado luce; aca
   pueden ser doscientos y ademas no hay --i que pasar. */
.vc-al-item { animation: none; }

.vc-al-item.is-vigente { border-left-color: var(--vc-aviso); }
.vc-al-vig {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--vc-aviso); margin-left: auto; white-space: nowrap;
}
/* El aviso al que apunta un enlace con #a-<id>: se marca un momento para que
   quien llego desde WhatsApp vea cual es, sin tener que buscarlo. */
.vc-al-item.is-resaltado {
  border-color: var(--vc-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.vc-al-pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-3);
  margin-top: var(--vc-sp-2); flex-wrap: wrap;
}
.vc-al-compartir {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 2px 0;
  font-size: 0.74rem; font-weight: 700; color: var(--vc-text-muted);
  font-family: inherit;
}
.vc-al-compartir:hover { color: var(--vc-accent); }
.vc-al-compartir svg { width: 14px; height: 14px; }

.vc-al-bloque { margin-bottom: var(--vc-sp-5); }
.vc-al-bloque__t {
  font-family: var(--vc-font-head); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 var(--vc-sp-3);
}
/* El mes es un corte del archivo, no un titulo de seccion: se marca con una
   linea y en minusculas, para que no compita con lo que esta vigente. */
.vc-al-bloque__t--mes {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vc-text-dim);
  padding-bottom: var(--vc-sp-2); border-bottom: 1px solid var(--vc-border);
}

/* "No hay nada" tambien es una respuesta, y en esta pantalla es LA respuesta
   que la mayoria viene a buscar: se muestra, no se esconde. */
.vc-al-calma {
  background: var(--vc-surface-2); border: 1px solid var(--vc-border);
  border-left: 3px solid var(--vc-exito); border-radius: var(--vc-r);
  padding: var(--vc-sp-4);
}
.vc-al-calma__t { margin: 0 0 4px; font-weight: 700; color: var(--vc-text); }
.vc-al-calma__d { margin: 0; font-size: 0.88rem; color: var(--vc-text-muted); }

.vc-al-resumen__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--vc-sp-2); margin-top: var(--vc-sp-3);
}
.vc-al-resumen__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--vc-surface-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm); padding: var(--vc-sp-3);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color var(--vc-trans), transform var(--vc-trans);
}
.vc-al-resumen__item:hover { border-color: var(--vc-accent); transform: translateY(-1px); }
.vc-al-resumen__n {
  font-family: var(--vc-font-head); font-size: 1.5rem; font-weight: 700;
  line-height: 1; color: var(--vc-text); font-variant-numeric: tabular-nums;
}
.vc-al-resumen__m { font-size: 0.74rem; color: var(--vc-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .vc-al-resumen__item:hover { transform: none; }
}

/* El camino de la portada al archivo. En el panel con avisos va arriba a la
   derecha, donde antes decia "Vigentes ahora"; en el panel calmo va debajo
   del boton de avisar, porque ahi "no pasa nada ahora" se vuelve creible
   justamente si se puede mirar lo que SI paso antes. */
.vc-noticias__archivo {
  color: var(--vc-text-muted); text-decoration: none;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.vc-noticias__archivo:hover { color: var(--vc-accent); }

/* =====================================================================
   AUDIENCIA (panel, fase 51)
   Una sola serie por grafico, en el color de acento, sin leyenda: el titulo
   de cada bloque la nombra. Se etiqueta solo el dia mas alto; el detalle de
   cada dia esta en el title de la barra.
   ===================================================================== */
.vc-aud-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--vc-sp-3); margin-bottom: var(--vc-sp-4);
}
.vc-aud-cifra {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--vc-surface-2); border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm); padding: var(--vc-sp-3) var(--vc-sp-4);
}
.vc-aud-cifra__n {
  font-family: var(--vc-font-head); font-size: 1.9rem; font-weight: 700; line-height: 1.05;
  color: var(--vc-text); font-variant-numeric: tabular-nums;
}
.vc-aud-cifra__t { font-size: 0.78rem; color: var(--vc-text-muted); }
.vc-aud-cifra__d { font-size: 0.74rem; font-weight: 700; color: var(--vc-text-dim); margin-top: 2px; }

.vc-aud-h { font-size: 0.95rem; font-weight: 700; margin: var(--vc-sp-5) 0 var(--vc-sp-2); }

.vc-aud-barras {
  display: flex; align-items: flex-end; gap: 2px;
  height: 120px; padding-top: 18px;
  border-bottom: 1px solid var(--vc-border);
}
.vc-aud-dia { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.vc-aud-dia__barra {
  display: block; width: 100%; background: var(--vc-accent);
  border-radius: 3px 3px 0 0; min-height: 0;
}
.vc-aud-dia:hover .vc-aud-dia__barra { filter: brightness(1.2); }
.vc-aud-dia__max {
  position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; font-weight: 700; color: var(--vc-text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* La etiqueta del maximo va arriba de la columna, que es arriba de su barra:
   solo se pone en el dia mas alto, cuya barra ocupa el 100%. */
.vc-aud-eje {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--vc-text-dim); margin-top: 4px;
}

.vc-aud-lista { display: flex; flex-direction: column; gap: 4px; }
.vc-aud-fila {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  gap: var(--vc-sp-3); padding: 7px 10px; border-radius: var(--vc-r-sm);
  background: var(--vc-surface-2); overflow: hidden;
}
.vc-aud-fila__barra {
  position: absolute; inset: 0 auto 0 0; background: var(--vc-accent); opacity: 0.16;
}
.vc-aud-fila__t { position: relative; font-size: 0.86rem; color: var(--vc-text); min-width: 0; }
.vc-aud-fila__n {
  position: relative; font-size: 0.86rem; font-weight: 700; color: var(--vc-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vc-aud-fila__n small { font-weight: 500; color: var(--vc-text-muted); margin-left: 4px; }
.vc-aud-nota { font-size: 0.78rem; margin-top: var(--vc-sp-2); }

/* =====================================================================
   PORTADA DE REVISTA (21/9/2026)
   ===================================================================== */

/* La linea de estado del panel de alertas cuando no hay ninguna: lo primero
   debajo de la foto. Un punto verde, el estado, y el camino al archivo. */
.vc-noticias__estado {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 var(--vc-sp-2); font-size: 0.86rem; color: var(--vc-text-muted);
}
.vc-noticias__estado b { color: var(--vc-text); font-weight: 700; }
.vc-noticias__estado .vc-noticias__archivo { margin-left: auto; }
.vc-noticias__punto {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vc-exito); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

/* Para conocer: las notas de la revista. Lista de nota con miniatura a la
   izquierda, el formato de portada de diario en el celular: entran tres en
   una pantalla y se leen de arriba abajo, sin carrusel que haya que
   descubrir. */
.vc-conocer__cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--vc-sp-3);
  margin-bottom: var(--vc-sp-3);
}
.vc-conocer__cab .vc-seccion__titulo { margin: 0; }
.vc-conocer__todas {
  font-size: 0.8rem; font-weight: 700; color: var(--vc-text-muted); text-decoration: none; white-space: nowrap;
}
.vc-conocer__todas:hover { color: var(--vc-accent); }
.vc-conocer__lista { display: flex; flex-direction: column; gap: var(--vc-sp-2); }
@media (min-width: 900px) {
  .vc-conocer__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vc-sp-3); }
}

.vc-nota {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--vc-sp-3); align-items: start;
  padding: var(--vc-sp-3); border-radius: var(--vc-r);
  background: var(--vc-surface-2); border: 1px solid var(--vc-border);
  color: inherit; text-decoration: none;
  transition: border-color var(--vc-trans), transform var(--vc-trans);
}
.vc-nota:hover { border-color: var(--vc-accent); transform: translateY(-1px); }
.vc-nota:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 2px; }
@media (min-width: 900px) {
  .vc-nota { grid-template-columns: 1fr; }
}

.vc-nota__media {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 88px; height: 88px; border-radius: var(--vc-r-sm);
}
@media (min-width: 900px) {
  .vc-nota__media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
.vc-nota__media .vc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vc-nota__glifo { width: 34px; height: 34px; color: rgba(255, 255, 255, 0.55); }
.vc-nota__glifo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.vc-nota__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vc-nota__kicker {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--vc-accent);
}
.vc-nota__titulo {
  font-family: var(--vc-font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.22;
  color: var(--vc-text); text-wrap: balance;
}
.vc-nota__bajada {
  font-size: 0.84rem; line-height: 1.45; color: var(--vc-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .vc-nota:hover { transform: none; }
}

/* =====================================================================
   GENTE DEL VALLE — la nota de una persona (gente/<id>.html)
   Sobre la base de .vc-articulo: se agregan la marca de seccion, la firma
   con fecha (una nota de gente tiene autor y dia; una guia de turismo no),
   las fotos con su pie, y la cita destacada, que es la voz de la persona.
   ===================================================================== */
.vc-articulo__seccion {
  margin: 0 0 var(--vc-sp-2);
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vc-accent-2);
}
.vc-articulo__firma {
  margin: 0 0 var(--vc-sp-4);
  font-size: 0.8rem; color: var(--vc-text-dim);
  padding-bottom: var(--vc-sp-3); border-bottom: 1px solid var(--vc-border);
}
.vc-articulo__foto { margin: 0 0 var(--vc-sp-4); }
.vc-articulo__foto .vc-img {
  display: block; width: 100%; height: auto; border-radius: var(--vc-r);
  aspect-ratio: 4 / 3; object-fit: cover; background: var(--vc-surface-2);
  /* .vc-img apaga un poco los colores, pensado para que las tarjetas del
     directorio no griten. En una nota la foto es la persona: va como es. */
  filter: none;
}
.vc-articulo__foto.is-principal .vc-img { aspect-ratio: 3 / 2; }
.vc-articulo__foto figcaption {
  margin-top: 6px; font-size: 0.78rem; color: var(--vc-text-dim); line-height: 1.45;
}
.vc-articulo__cuerpo .vc-articulo__foto { margin: var(--vc-sp-2) 0; }

/* La cita: lo que dijo la persona, con sus palabras. Es lo que hace que una
   nota de gente no sea una ficha: por eso va grande y con la raya a un lado,
   no en un recuadro que la aparte del texto. */
.vc-articulo__cita {
  margin: var(--vc-sp-2) 0; padding: 0 0 0 var(--vc-sp-4);
  border-left: 3px solid var(--vc-accent-2);
}
.vc-articulo__cita p {
  margin: 0; font-family: var(--vc-font-head); font-weight: 500;
  font-size: 1.18rem; line-height: 1.4; color: var(--vc-text);
}

/* En la portada, la nota de gente se distingue de las guias por el color de
   su marca de seccion. */
.vc-nota--gente .vc-nota__kicker { color: var(--vc-accent-2); }

/* =====================================================================
   NOTAS DE LA REVISTA — /nota/<slug> (las arma servidor-notas.mjs) y la
   vista previa del panel, que usa exactamente el mismo HTML.
   ===================================================================== */
/* La principal se recorta a 3:2; si es vertical, que no se lleve la cabeza:
   en una foto de una persona la cara suele estar en el tercio de arriba. */
.vc-articulo__foto.is-principal .vc-img { object-position: 50% 30%; }
/* Las del texto van enteras, con su forma: una foto vertical recortada a 4:3
   pierde justo lo que se queria mostrar. Con tope de alto para la compu. */
.vc-articulo__cuerpo .vc-articulo__foto .vc-img {
  aspect-ratio: auto; width: auto; max-width: 100%; max-height: 75vh; margin-inline: auto;
}
.vc-articulo__subtitulo {
  font-family: var(--vc-font-head); font-weight: 600; font-size: 1.22rem; line-height: 1.25;
  color: var(--vc-text); text-wrap: balance; margin: var(--vc-sp-3) 0 0;
}
/* Una nota que se cobra lo dice arriba. Si no, le quita credibilidad a todas
   las que no se cobran. */
.vc-articulo__auspicio {
  margin: calc(-1 * var(--vc-sp-2)) 0 var(--vc-sp-4);
  font-size: 0.78rem; color: var(--vc-text-muted);
}
.vc-articulo__auspicio b { color: var(--vc-text); font-weight: 700; }
.vc-articulo__borrador { color: var(--vc-aviso); font-weight: 700; }

.vc-mas-notas { margin-top: var(--vc-sp-6); }

/* Tarjeta de nota sin foto: un fondo de la marca, no un hueco. */
.vc-nota__media[class*="vc-nota__media--"] {
  background: var(--vc-surface);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vc-accent) 38%, var(--vc-surface)), var(--vc-surface-2));
}
.vc-nota__media.vc-nota__media--gente { background: linear-gradient(135deg, color-mix(in srgb, var(--vc-accent-2) 40%, var(--vc-surface)), var(--vc-surface-2)); }

/* ---- El archivo de notas (/notas) ---- */
.vc-nt-mes + .vc-nt-mes { margin-top: var(--vc-sp-6); }
.vc-nt-mes .vc-al-bloque__t { margin-bottom: var(--vc-sp-3); }

/* =====================================================================
   PANEL: la pestaña Notas (admin-notas.js). Pensada para escribir con el
   celular: campos a todo el ancho, botones grandes, nada lado a lado en
   una pantalla angosta.
   ===================================================================== */
.vc-nt-cab {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--vc-sp-3); margin-bottom: var(--vc-sp-4);
}
.vc-nt-ritmo { margin: 4px 0 0; font-size: 0.85rem; color: var(--vc-text-muted); }
.vc-nt-ritmo.is-aviso b { color: var(--vc-aviso); }
.vc-nt-ritmo.is-mal b { color: var(--vc-peligro); }
.vc-nt-items { display: flex; flex-direction: column; gap: var(--vc-sp-3); }
.vc-nt-item__fila { display: flex; gap: var(--vc-sp-3); align-items: flex-start; }
.vc-nt-item__foto {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--vc-r-sm); object-fit: cover;
  background: var(--vc-surface-2);
}
.vc-nt-estado { color: var(--vc-aviso); border-color: color-mix(in srgb, var(--vc-aviso) 40%, transparent); }
.vc-nt-estado.is-publicada { color: var(--vc-exito); border-color: color-mix(in srgb, var(--vc-exito) 40%, transparent); }

.vc-nt-editor { max-width: 44rem; }
.vc-nt-dos { display: grid; grid-template-columns: 1fr; gap: 0 var(--vc-sp-3); }
@media (min-width: 560px) { .vc-nt-dos { grid-template-columns: 1fr 1fr; } }

.vc-nt-cuerpo { min-height: 18rem; line-height: 1.6; font-size: 1rem; }
.vc-nt-herr { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-nt-herr .vc-btn { min-height: 40px; padding-inline: 14px; font-size: 0.85rem; }

.vc-nt-fotos { display: flex; flex-direction: column; gap: var(--vc-sp-3); }
.vc-nt-foto {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--vc-sp-3); align-items: start;
  padding: var(--vc-sp-2); border: 1px solid var(--vc-border); border-radius: var(--vc-r);
  background: var(--vc-surface);
}
.vc-nt-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--vc-r-sm); }
.vc-nt-foto__datos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vc-nt-foto__datos b { font-size: 0.85rem; }
.vc-nt-foto__botones { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-nt-foto__botones .vc-btn { min-height: 38px; padding-inline: 12px; }

.vc-nt-dato { display: grid; grid-template-columns: 7rem 1fr auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 420px) { .vc-nt-dato { grid-template-columns: 1fr auto; } .vc-nt-dato input:nth-child(2) { grid-column: 1; } }
.vc-nt-negocios { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.vc-nt-negocios .vc-btn { justify-content: flex-start; text-align: left; }

.vc-nt-slug {
  display: flex; align-items: center; min-width: 0;
  border: 1px solid var(--vc-border-fuerte, var(--vc-border)); border-radius: var(--vc-r-sm);
  background: var(--vc-surface); overflow: hidden;
}
.vc-nt-slug span { padding-left: 12px; color: var(--vc-text-dim); font-size: 0.85rem; white-space: nowrap; }
.vc-nt-slug input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; flex: 1; padding-left: 2px !important; }

/* Los botones de guardar quedan a mano, pegados abajo, en UNA fila: con la
   barra de navegacion abajo, dos filas tapaban un cuarto de la pantalla.
   Mientras se escribe en un campo vuelven a su lugar al final: en el
   celular, con el teclado abierto, una barra flotante tapa justo el renglon
   que se esta escribiendo. */
.vc-nt-acciones {
  position: sticky; bottom: calc(var(--vc-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px;
  padding: var(--vc-sp-2) 0; margin-top: var(--vc-sp-4);
  background: linear-gradient(to top, var(--vc-bg) 75%, transparent);
  z-index: 5;
}
.vc-nt-acciones .vc-btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 0.85rem; white-space: nowrap; }
.vc-nt-editor:focus-within .vc-nt-acciones { position: static; }

.vc-nt-aviso {
  padding: var(--vc-sp-3) var(--vc-sp-4); border-radius: var(--vc-r);
  border: 1px solid color-mix(in srgb, var(--vc-aviso) 45%, transparent);
  background: color-mix(in srgb, var(--vc-aviso) 10%, var(--vc-surface));
  margin: var(--vc-sp-3) 0;
}
.vc-nt-aviso p { margin: 0 0 8px; }
.vc-nt-aviso ul { margin: 0; padding-left: 1.1rem; }
.vc-nt-aviso li + li { margin-top: 4px; }
.vc-nt-aviso.is-mal { border-color: color-mix(in srgb, var(--vc-peligro) 50%, transparent); background: color-mix(in srgb, var(--vc-peligro) 10%, var(--vc-surface)); }
.vc-nt-aviso.is-bien { border-color: color-mix(in srgb, var(--vc-exito) 45%, transparent); background: color-mix(in srgb, var(--vc-exito) 9%, var(--vc-surface)); }

/* La vista previa es la pagina misma, recortada en un marco. Los enlaces no
   navegan: un toque sin querer en "Portada" tiraria lo que se esta escribiendo. */
.vc-nt-previa {
  margin-top: var(--vc-sp-4); padding: var(--vc-sp-4);
  border: 1px dashed var(--vc-border-fuerte, var(--vc-border)); border-radius: var(--vc-r-lg);
  background: var(--vc-bg);
}
.vc-nt-previa a, .vc-nt-previa button { pointer-events: none; }
.vc-nt-previa__rotulo {
  margin: 0 0 var(--vc-sp-3); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vc-text-dim);
}

/* =====================================================================
   PLATAFORMA HIBRIDA (fase 53): los negocios adentro de las notas y la
   ficha propia de cada negocio (/negocio/<slug>).
   ===================================================================== */
.vc-negocios-nota { display: flex; flex-direction: column; gap: var(--vc-sp-3); margin: var(--vc-sp-2) 0; }
.vc-nego {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--vc-sp-3); align-items: start;
  padding: var(--vc-sp-3); border-radius: var(--vc-r);
  background: var(--vc-surface); border: 1px solid var(--vc-border);
}
/* Lo pagado se ve distinto, no escondido: borde calido y la palabra. */
.vc-nego.is-patrocinado { border-color: color-mix(in srgb, var(--vc-aviso) 45%, transparent); }
.vc-nego__foto {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 84px; height: 84px; border-radius: var(--vc-r-sm); background: var(--vc-surface-2);
}
.vc-nego__foto .vc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-nego__glifo { width: 30px; height: 30px; color: var(--vc-text-dim); }
.vc-nego__glifo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vc-nego__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vc-nego__kicker {
  margin: 0; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--vc-text-muted);
}
.vc-nego__patro {
  margin-left: 6px; padding: 1px 6px; border-radius: var(--vc-r-pill); letter-spacing: 0.04em;
  color: var(--vc-aviso); border: 1px solid color-mix(in srgb, var(--vc-aviso) 50%, transparent);
}
.vc-nego__nombre { margin: 0; font-family: var(--vc-font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.vc-nego__nombre a { color: var(--vc-text); text-decoration: none; }
.vc-nego__nombre a:hover { color: var(--vc-accent-2); text-decoration: underline; }
.vc-articulo__cuerpo .vc-nego__coment, .vc-nego__coment { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--vc-text-muted); }
.vc-nego__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vc-nego__acciones .vc-btn { min-height: 40px; padding-inline: 14px; font-size: 0.85rem; }
.vc-articulo__cuerpo .vc-negocios-nota__aclara, .vc-negocios-nota__aclara {
  margin: 0; font-size: 0.78rem; color: var(--vc-text-dim); line-height: 1.5;
}

/* La ficha: la hoja del directorio, hecha pagina. */
.vc-ficha__sellos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--vc-sp-3); }
.vc-ficha__sellos:empty { display: none; }
.vc-ficha .vc-persona { margin-bottom: var(--vc-sp-3); }
.vc-ficha .vc-detalle__acciones { margin-top: var(--vc-sp-3); }
.vc-ficha__galeria {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vc-sp-2); margin-top: var(--vc-sp-4);
}
.vc-ficha__galeria .vc-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--vc-r-sm); filter: none;
}
.vc-ficha__revista { margin-top: var(--vc-sp-6); }
.vc-ficha__revista .vc-seccion__titulo { margin-bottom: var(--vc-sp-3); }
.vc-ficha__mas { margin-top: var(--vc-sp-5); font-size: 0.9rem; }
.vc-ficha__mas a { color: var(--vc-accent-2); font-weight: 700; text-decoration: none; }
.vc-ficha__mas a:hover { text-decoration: underline; }
.vc-ficha .vc-articulo__foto.is-principal .vc-img { object-position: 50% 50%; }

/* Metricas del dueño: lo que le trajo la revista. */
.vc-mx__revista {
  margin: var(--vc-sp-3) 0 0; padding: var(--vc-sp-2) var(--vc-sp-3); border-radius: var(--vc-r-sm);
  background: color-mix(in srgb, var(--vc-accent-2) 10%, var(--vc-surface)); font-size: 0.9rem;
}
.vc-mx__revista b { color: var(--vc-accent-2); }

/* Panel: la lista de negocios de una nota. */
.vc-nt-negs { display: flex; flex-direction: column; gap: var(--vc-sp-2); margin-bottom: var(--vc-sp-2); }
.vc-nt-negs:empty { display: none; }
.vc-nt-neg {
  display: flex; flex-direction: column; gap: 6px; padding: var(--vc-sp-2) var(--vc-sp-3);
  border: 1px solid var(--vc-border); border-radius: var(--vc-r); background: var(--vc-surface);
}
.vc-nt-neg__cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.vc-nt-neg__cab b { font-size: 0.92rem; }
.vc-nt-neg__cab span { font-size: 0.8rem; }

/* Lo nuevo de la revista, en el hero: una pildora en el margen de abajo,
   posicionada aparte para que al aparecer no mueva el titulo ni el buscador. */
.vc-hero__nota {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--vc-r-pill);
  background: rgba(11, 22, 38, 0.72); border: 1px solid rgba(56, 189, 248, 0.35);
  -webkit-backdrop-filter: var(--vc-blur); backdrop-filter: var(--vc-blur);
  color: #E8F0FA; text-decoration: none; font-size: 0.82rem; line-height: 1.2;
  animation: vc-aparecer 0.4s ease both;
}
.vc-hero__nota:hover { border-color: var(--vc-accent-2); }
.vc-hero__nota:focus-visible { outline: 2px solid var(--vc-accent-2); outline-offset: 2px; }
.vc-hero__nota-marca {
  flex: 0 0 auto; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vc-accent-2);
}
.vc-hero__nota-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@keyframes vc-aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vc-hero__nota { animation: none; } }

/* Panel: la nota de la feria (fase 54). */
.vc-nt-feria {
  margin: 0 0 var(--vc-sp-4); padding: var(--vc-sp-3) var(--vc-sp-4); border-radius: var(--vc-r);
  border: 1px dashed var(--vc-border-fuerte, var(--vc-border)); background: var(--vc-surface);
}
.vc-nt-feria__t {
  margin: 0 0 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vc-accent-2);
}
.vc-nt-feria__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vc-nt-feria__fila + .vc-nt-feria__fila { margin-top: var(--vc-sp-2); padding-top: var(--vc-sp-2); border-top: 1px solid var(--vc-border); }
.vc-nt-feria__fila p { margin: 0; font-size: 0.9rem; color: var(--vc-text-muted); flex: 1 1 16rem; }

/* =====================================================================
   PASAR LA HOJA (fase 55): la transicion entre paginas de la revista.

   Al entrar a una seccion o a una nota, la pagina se da vuelta como la hoja
   de una revista: la de antes se levanta desde el borde derecho y se dobla
   hacia el lomo (el borde izquierdo), oscureciendose al girar como el papel
   cuando deja de darle la luz; abajo aparece la nueva, saliendo de la
   sombra. Al volver, la hoja regresa desde la izquierda y tapa la de antes.

   CUANDO pasa lo decide js/hoja.js (solo entre paginas de la revista) y
   pasarHoja() en ui.js (las pestañas de seccion). Entre las secciones de la
   app (Utilidad, Clima, Avisos, "Mas") va el otro estilo, HOJEAR, abajo. Donde el navegador no
   sabe hacerlo, o la persona pidio menos movimiento, no pasa nada: se
   cambia de pagina como siempre.

   La perspectiva va en vw para que el giro se vea igual en un telefono y en
   una compu: en px, en una pantalla ancha el borde de la hoja se venia
   encima de la camara.
   ===================================================================== */
@keyframes vc-hoja-se-levanta {
  from { transform: perspective(400vw) rotateY(0deg);   filter: brightness(1); }
  to   { transform: perspective(400vw) rotateY(-90deg); filter: brightness(0.45); }
}
@keyframes vc-hoja-vuelve {
  from { transform: perspective(400vw) rotateY(-90deg); filter: brightness(0.45); }
  to   { transform: perspective(400vw) rotateY(0deg);   filter: brightness(1); }
}
@keyframes vc-hoja-sale-de-la-sombra { from { filter: brightness(0.7); } to { filter: brightness(1); } }
@keyframes vc-hoja-queda-en-sombra   { from { filter: brightness(1); }   to { filter: brightness(0.7); } }

::view-transition-group(root) { animation-duration: 540ms; }
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;            /* el fundido normal suma la luz de las dos */
  transform-origin: 0 50%;           /* el lomo */
  animation-duration: 540ms;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1);
  animation-fill-mode: both;
}
/* Para adelante: la de antes se levanta y deja ver la nueva, abajo. */
:root:is([data-hoja="adelante"], :not([data-hoja]))::view-transition-old(root) {
  z-index: 2;
  animation-name: vc-hoja-se-levanta;
  box-shadow: 16px 0 36px rgba(0, 0, 0, 0.45);
}
:root:is([data-hoja="adelante"], :not([data-hoja]))::view-transition-new(root) {
  z-index: 1;
  animation-name: vc-hoja-sale-de-la-sombra;
}
/* Para atras: la hoja vuelve desde el lomo y tapa la de antes. */
:root[data-hoja="atras"]::view-transition-old(root) {
  z-index: 1;
  animation-name: vc-hoja-queda-en-sombra;
}
:root[data-hoja="atras"]::view-transition-new(root) {
  z-index: 2;
  animation-name: vc-hoja-vuelve;
  box-shadow: 16px 0 36px rgba(0, 0, 0, 0.45);
}

/* ---- HOJEAR (fase 56): entre las secciones de la app ----------------------
   Inicio, Utilidad, Clima, Avisos y las paginas del menu "Mas". La pagina
   nueva entra deslizandose sobre la de antes, con el borde apenas levantado
   como papel; la de antes queda debajo, se corre un poco y se oscurece, como
   la hoja de abajo en una pila. Es el gesto de las revistas digitales: otro
   estilo que el giro de la revista, para que se note que es otra seccion. */
@keyframes vc-hojea-entra {
  from { transform: perspective(400vw) translateX(100%) rotateY(-9deg); }
  to   { transform: perspective(400vw) translateX(0) rotateY(0deg); }
}
@keyframes vc-hojea-se-va {
  from { transform: perspective(400vw) translateX(0) rotateY(0deg); }
  to   { transform: perspective(400vw) translateX(100%) rotateY(-9deg); }
}
@keyframes vc-hojea-queda-debajo { from { transform: translateX(0);    filter: brightness(1); }   to { transform: translateX(-28%); filter: brightness(0.6); } }
@keyframes vc-hojea-vuelve-de-abajo { from { transform: translateX(-28%); filter: brightness(0.6); } to { transform: translateX(0);    filter: brightness(1); } }

:root[data-hoja^="hojea"]::view-transition-old(root),
:root[data-hoja^="hojea"]::view-transition-new(root) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.24, 1);
}
:root[data-hoja="hojea-adelante"]::view-transition-new(root) {
  z-index: 2;
  animation-name: vc-hojea-entra;
  box-shadow: -14px 0 32px rgba(0, 0, 0, 0.5);
}
:root[data-hoja="hojea-adelante"]::view-transition-old(root) {
  z-index: 1;
  animation-name: vc-hojea-queda-debajo;
}
:root[data-hoja="hojea-atras"]::view-transition-old(root) {
  z-index: 2;
  animation-name: vc-hojea-se-va;
  box-shadow: -14px 0 32px rgba(0, 0, 0, 0.5);
}
:root[data-hoja="hojea-atras"]::view-transition-new(root) {
  z-index: 1;
  animation-name: vc-hojea-vuelve-de-abajo;
}

/* ---- CERRAR LA REVISTA (fase 57): el logo ------------------------------
   La tapa (la portada) se cierra sobre la pagina donde se estaba, girando
   desde el lomo; la pagina de adentro se queda a oscuras, como cuando las
   tapas se juntan. Cuando la tapa termina de caer, la revista cerrada se
   asienta: se achica apenas y vuelve, como al dejarla sobre la mesa. Mas
   lento y con mas peso que pasar una hoja, para que se sienta distinto. */
@keyframes vc-cierra-tapa {
  0%   { transform: perspective(400vw) rotateY(-90deg); filter: brightness(0.35);
         animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.45); }   /* cae, cada vez mas rapido */
  62%  { transform: perspective(400vw) rotateY(0deg); filter: brightness(0.9); }
  100% { transform: perspective(400vw) rotateY(0deg); filter: brightness(1); }
}
@keyframes vc-cierra-adentro {
  0%   { filter: brightness(1); }
  62%  { filter: brightness(0.25); }
  100% { filter: brightness(0.25); }
}
@keyframes vc-cierra-se-asienta {
  0%, 62% { transform: scale(1); }
  78%     { transform: scale(0.955); }
  100%    { transform: scale(1); }
}
:root[data-hoja="cerrar"]::view-transition-group(root) {
  animation: vc-cierra-se-asienta 780ms cubic-bezier(0.3, 0.6, 0.3, 1) both;
}
:root[data-hoja="cerrar"]::view-transition-old(root) {
  z-index: 1;
  animation-name: vc-cierra-adentro;
  animation-duration: 780ms;
  animation-timing-function: linear;
}
:root[data-hoja="cerrar"]::view-transition-new(root) {
  z-index: 2;
  animation-name: vc-cierra-tapa;
  animation-duration: 780ms;
  animation-timing-function: linear;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}