/**
 * Vida Costera — Hub de enlaces (/enlaces/).
 *
 * Cuatro decisiones y nada más. Se abre casi siempre desde el celular, con un
 * dedo, viniendo de la bio de Instagram: por eso la columna es angosta, las
 * tarjetas son objetivos grandes y no hay nada —ni menú ni footer— entre el
 * título y la primera acción.
 *
 * Página standalone: no la envuelve el tema, pero sí conserva el fondo del
 * sitio —la foto del litoral al atardecer que pinta module-nav.php en
 * body::before—. Eso manda sobre el resto del diseño: el título va en blanco
 * sobre un velo oscuro (el horizonte de esa foto es lo más claro que hay, y
 * ahí un texto oscuro desaparece) y las tarjetas van blancas y opacas, que es
 * lo único que se lee igual de bien caiga donde caiga la imagen.
 */

/* Base de la página.
 *
 * Esto normalmente lo pone el CSS del tema, que acá no se carga (ver
 * templates/hub-landing.php). Sin `border-box`, cualquier componente escrito
 * para el resto del sitio se descuadra al aterrizar en esta página: le pasó
 * al aviso de cookies, cuyos dos botones —con `flex: 1 1 0` y padding propio—
 * se salían de la fila en iPhone porque el padding dejaba de estar incluido
 * en el ancho. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body.vc-hub-page {
  margin: 0;
  min-height: 100vh;
  /* Color de respaldo por si la foto no carga: el azul profundo del cielo de
     esa misma imagen, para que el texto blanco siga leyéndose. */
  background: #10263a;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vc-hub {
  --hub-ancho: 500px;
  --hub-borde: var(--vc-border, #E3E5EE);
  --hub-tinta: var(--vc-fg, #1A1F36);
  --hub-suave: var(--vc-muted, #6B7494);
  --hub-primario: var(--vc-primary, #4D6AE0);
  --hub-verde: #128C4A;
  --hub-rosa: #C21E63;

  position: relative;
  max-width: var(--hub-ancho);
  margin: 0 auto;
  /* Los costados respetan el área segura (notch en horizontal), y abajo queda
     aire de sobra para que el aviso de cookies no tape la última tarjeta
     mientras está en pantalla. */
  padding: 0 calc(20px + env(safe-area-inset-right, 0px)) 120px calc(20px + env(safe-area-inset-left, 0px));
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--hub-tinta);
}

/* Velo bajo el encabezado: sin él, el título blanco cae sobre el cielo claro y
   el sol de la foto, que es justo su franja más brillante.
   Es vertical y no radial —un halo dejaba la bajada fuera de la zona oscura— y
   se apaga antes de la primera tarjeta, así que no se nota dónde termina. */
.vc-hub::before {
  content: '';
  position: absolute;
  inset: -80px -50% auto;
  height: 460px;
  background: linear-gradient(
    180deg,
    rgba(6, 24, 40, .66) 0%,
    rgba(6, 24, 40, .58) 40%,
    rgba(6, 24, 40, .34) 72%,
    rgba(6, 24, 40, 0) 100%
  );
  pointer-events: none;
}
.vc-hub-hero,
.vc-hub-cards,
.vc-hub-pie { position: relative; }

/* ── Encabezado ─────────────────────────────────────────────── */
.vc-hub-hero {
  text-align: center;
  padding: 40px 0 30px;
  color: #fff;
}
/* El logo es el emblema completo: aro dorado propio, nombre en azul marino y
   fondo transparente. Eso manda tres cosas:
     · grande —144 px—, porque a 60 el nombre no se lee;
     · sin recorte circular ni aro añadido, que chocarían con el suyo;
     · sobre un disco claro, porque su tipografía es azul oscuro y sobre el
       velo del atardecer desaparecería. El disco lo deja como una medalla. */
.vc-hub-mark {
  display: block;
  width: 144px; height: 144px;
  margin: 0 auto 20px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 30px rgba(6, 24, 40, .3);
}
.vc-hub-hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.75rem, 6.4vw, 2.3rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 1px 16px rgba(6, 24, 40, .5);
}
.vc-hub-lede {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0 auto;
  max-width: 34ch;
  text-shadow: 0 1px 12px rgba(6, 24, 40, .5);
}

/* ── Tarjetas ───────────────────────────────────────────────── */
.vc-hub-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vc-hub-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--vc-card, #fff);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 18px;
  padding: 17px 18px;
  text-decoration: none;
  color: var(--hub-tinta);
  /* Sombra más marcada que en una página normal: acá la tarjeta tiene que
     despegarse de una foto, no de un fondo plano. */
  box-shadow: 0 6px 22px rgba(6, 24, 40, .18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vc-hub-card:hover,
.vc-hub-card:focus-visible {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 12px 30px rgba(6, 24, 40, .26);
}

/* Ícono en pastilla. El color lo pone cada variante más abajo, así que acá
   solo va la forma. */
.vc-hub-card-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--vc-prim-lt, #EDF0FD);
  color: var(--hub-primario);
}
.vc-hub-card-icon svg { width: 23px; height: 23px; }

.vc-hub-card-txt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vc-hub-card-title {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.012em;
  line-height: 1.3;
}
.vc-hub-card-desc {
  font-size: .855rem;
  line-height: 1.5;
  color: var(--hub-suave);
  text-wrap: pretty;
}

/* La flecha vive en su propio círculo: da un punto de fuga a la derecha y
   deja claro que la tarjeta entera es el enlace. */
.vc-hub-card-go {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vc-bg2, #F4F5FA);
  color: var(--hub-primario);
  transition: transform .2s ease, background-color .2s ease;
}
.vc-hub-card-go svg { width: 16px; height: 16px; }
.vc-hub-card:hover .vc-hub-card-go,
.vc-hub-card:focus-visible .vc-hub-card-go {
  transform: translateX(3px);
  background: var(--vc-prim-lt, #EDF0FD);
}

/* Las dos tarjetas que llevan fuera del sitio usan el color de su plataforma:
   es la señal que la vista busca antes de leer el texto. */
.vc-hub-whatsapp .vc-hub-card-icon { background: #E7F8EE; color: var(--hub-verde); }
.vc-hub-whatsapp .vc-hub-card-go { color: var(--hub-verde); }
.vc-hub-whatsapp:hover,
.vc-hub-whatsapp:focus-visible {
  border-color: #7BD3A2;
  box-shadow: 0 12px 30px rgba(18, 140, 74, .3);
}
.vc-hub-whatsapp:hover .vc-hub-card-go,
.vc-hub-whatsapp:focus-visible .vc-hub-card-go { background: #E7F8EE; }

/* Instagram: el degradado de la marca en la pastilla del ícono, en blanco
   sobre él. Es la única superficie de color fuerte de la página, y alcanza. */
.vc-hub-instagram .vc-hub-card-icon {
  background: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
  color: #fff;
}
.vc-hub-instagram .vc-hub-card-go { color: var(--hub-rosa); }
.vc-hub-instagram:hover,
.vc-hub-instagram:focus-visible {
  border-color: #F0A8C4;
  box-shadow: 0 12px 30px rgba(238, 42, 123, .28);
}
.vc-hub-instagram:hover .vc-hub-card-go,
.vc-hub-instagram:focus-visible .vc-hub-card-go { background: #FDEDF4; }

/* El foco de teclado se ve en la tarjeta completa, no en un borde interno.
   Va en blanco porque detrás hay una foto, no un fondo claro: el azul de
   marca se pierde sobre el cielo. */
.vc-hub-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Pie ────────────────────────────────────────────────────── */
.vc-hub-pie {
  margin: 30px 0 0;
  text-align: center;
  font-size: .82rem;
  letter-spacing: .01em;
}
.vc-hub-pie a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  text-shadow: 0 1px 10px rgba(6, 24, 40, .6);
}
.vc-hub-pie a:hover,
.vc-hub-pie a:focus-visible { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }

@media (max-width: 420px) {
  .vc-hub {
    padding: 0 calc(16px + env(safe-area-inset-right, 0px)) 110px calc(16px + env(safe-area-inset-left, 0px));
  }
  .vc-hub-hero { padding: 26px 0 22px; }
  /* En un iPhone de 375 px, 144 px de logo son el 38% del ancho: baja a 120,
     que sigue dejando legible "PROPIEDADES". */
  .vc-hub-mark { width: 120px; height: 120px; margin-bottom: 16px; padding: 8px; }
  .vc-hub-card { padding: 15px 15px; gap: 13px; border-radius: 16px; }
  .vc-hub-card-icon { width: 42px; height: 42px; border-radius: 12px; }
  .vc-hub-card-icon svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-hub-card,
  .vc-hub-card-go { transition: none; }
  .vc-hub-card:hover,
  .vc-hub-card:focus-visible { transform: none; }
  .vc-hub-card:hover .vc-hub-card-go { transform: none; }
}