/* /vincular: el formulario de vinculación aprobado el 29/09/2026 (rgg-marca/definiciones/muestras/formulario.html).
   Página sola, sin menú ni pie, que entra sin scroll desde 1366×768. Se carga después de la parte cabeza
   (base.css, home-v4.css, paginas.css): de ahí toma los colores, la letra, el .form-aviso y el botón flotante .wa. */

body.pag-vincular { background: #fff; color: var(--texto); }

.vin-pagina { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }

/* Izquierda: marino con luz, planilla con lupa de fondo, logo y cita en vidrio */
.vin-panel { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 40px; color: #fff; background: var(--luz-marino), var(--marino); }
.vin-panel::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -180px; bottom: -200px; border-radius: 50%; background: var(--brillo-azul); }
.vin-fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.vin-logo { display: block; border-radius: 50%; }
.vin-logo img { width: 150px; height: 150px; }
.vin-logo:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 4px; }
.vin-cita { width: 100%; max-width: 420px; margin: 32px 0 0; padding: 32px 32px 24px; border-radius: 16px; text-align: center;
  background: rgba(15, 30, 56, .72); border: 1px solid rgba(184, 205, 232, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.vin-cita blockquote { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.vin-cita cite { display: block; margin-top: 12px; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-claro); }
.vin-firma { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(184, 205, 232, .2); text-align: left; }
.vin-fotos { display: flex; flex: none; }
.vin-fotos img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--marino); }
.vin-fotos img + img { margin-left: -12px; }
.vin-firma b { display: block; font-size: 14px; font-weight: 600; }
.vin-firma small { display: block; font-size: 12px; line-height: 1.5; color: var(--texto-osc); }

/* Derecha: el formulario en dos columnas */
.vin-lado { display: flex; align-items: center; padding: 40px 56px; scroll-margin-top: 0; }
.vin-contenido { width: 100%; max-width: 600px; }
.pag-vincular h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--marino); }
.vin-bajada { margin: 8px 0 28px; font-size: 16px; line-height: 1.5; color: var(--azul); }
.pag-vincular .form-aviso { margin: 0 0 20px; }

.vin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.vin-campo { display: grid; gap: 6px; align-content: start; }
.vin-campo.entero { grid-column: 1 / -1; }
.vin-campo label { font-size: 14px; line-height: 20px; color: var(--texto); }
.vin-campo label small { font-size: 14px; color: var(--texto-2); }
.vin-form input, .vin-form select, .vin-form textarea {
  width: 100%; height: 48px; padding: 0 16px; border-radius: var(--r-boton); border: 1.5px solid #CBD5E1; background: #fff;
  font: 16px/24px Inter, Arial, sans-serif; color: var(--texto); transition: border-color .15s ease, box-shadow .15s ease; }
.vin-form textarea { height: 72px; padding: 12px 16px; resize: vertical; }
.vin-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.vin-form select.vacio { color: var(--texto-2); }
.vin-form select option { color: var(--texto); }
.vin-form ::placeholder { color: #94A3B8; }
.vin-form input:hover, .vin-form select:hover, .vin-form textarea:hover { border-color: #94A3B8; }
.vin-form input:focus, .vin-form select:focus, .vin-form textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(58, 113, 191, .2); }
.vin-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vin-enviar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.vin-enviar button { height: 52px; padding: 0 32px; border: 0; border-radius: var(--r-boton); background: var(--azul); color: #fff; font: 600 16px Inter, Arial, sans-serif; cursor: pointer;
  box-shadow: 0 4px 20px rgba(58, 113, 191, .25); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.vin-enviar button:hover { background: var(--azul-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(58, 113, 191, .3); }
.vin-enviar button:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.vin-enviar button:disabled { opacity: .7; cursor: wait; transform: none; }
.vin-legal { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.vin-legal a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

/* Lista desplegable con el estilo de la marca (Chrome y Edge). En otros navegadores y en celular queda la del sistema */
@supports (appearance: base-select) {
  .vin-form select, .vin-form ::picker(select) { appearance: base-select; }
  .vin-form select { display: flex; align-items: center; }
  .vin-form select::picker-icon { display: none; }
  .vin-form ::picker(select) { margin-top: 6px; padding: 6px; background: #fff; border: 1px solid #CBD5E1; border-radius: var(--r-boton); box-shadow: 0 12px 32px rgba(15, 30, 56, .16); max-height: 300px; overflow-y: auto; }
  .vin-form option { padding: 10px 12px; border-radius: 6px; font: 15px/22px Inter, Arial, sans-serif; color: var(--texto); cursor: pointer; }
  .vin-form option::checkmark { display: none; }
  .vin-form option:hover, .vin-form option:focus-visible { background: #F1F5F9; outline: none; }
  .vin-form option:checked { background: rgba(58, 113, 191, .10); color: var(--azul-hover); font-weight: 600; }
  .vin-form option[disabled] { display: none; }
}

@media (max-width: 900px) {
  .vin-pagina { grid-template-columns: 1fr; min-height: 0; }
  .vin-panel { padding: 32px 16px 36px; }
  .vin-logo img { width: 96px; height: 96px; }
  .vin-cita { margin-top: 20px; }
  .vin-lado { padding: 32px 16px 96px; }
  .pag-vincular h1 { font-size: 32px; }
}
@media (max-width: 560px) {
  .vin-form { grid-template-columns: 1fr; gap: 20px; }
  .vin-enviar button { width: 100%; }
}

/* ── /vincularme/gracias. Traído de css/vincular-v1.css: cuando /vincularme pasó a esta hoja, la página de gracias quedó sin estos estilos
   y los íconos de WhatsApp y YouTube se veían gigantes (Pablo, 30/10/2026) ── */
.vin-basic { position: sticky; top: calc(var(--barra) + 32px); padding: 30px; background: var(--claro); }
.vin-basic p.etiqueta { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--azul); }
.vin-basic h3 { font-size: 22px; }
.gra-cab .pag-acciones .btn svg:not(.ico) { width: 20px; height: 20px; fill: currentColor; }
.gra-yt { display: flex; flex-direction: column; gap: 12px; }
.gra-yt .ico-yt { width: 32px; height: 32px; fill: #FF0000; }
.gra-yt .btn { align-self: flex-start; margin-top: 8px; }
.gra-yt .btn svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 1023px) { .vin-basic { position: static; } }
@media (max-width: 700px) { .gra-yt .btn { align-self: stretch; } }