/* ============================================================
   premium.css · VISIONLOVERS · las mejoras premium (Claude Code, 23/09/2026)
   Va en woodmart-child/assets/css/premium.css y se encola desde inc/premium.php
   DESPUÉS de componentes.css (así gana por orden, no por fuerza).
   Solo variables --vl-* de tokens.css. Cero reglas forzadas (0 !important).
   Móvil primero. Comentado en español.
   ============================================================ */

/* ---------- 1 · CTA fija en móvil ---------- */
.vl-cta-fija {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 360; /* por encima de la barra de Woodmart (350) */
  display: flex; gap: var(--vl-space-sm);
  padding: var(--vl-space-sm) 12px;
  padding-bottom: calc(var(--vl-space-sm) + env(safe-area-inset-bottom, 0px));
  background: var(--vl-bg); border-top: 1px solid var(--vl-border); box-shadow: var(--vl-shadow-md);
  transition: transform var(--vl-transition-normal);
}
.vl-cta-fija--oculta { transform: translateY(110%); } /* mientras se escribe en un campo, la barra se aparta */
.vl-cta-fija__principal, .vl-cta-fija__contacto {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--vl-touch); padding: 8px 14px;
  border-radius: var(--vl-radius-pill); border: 2px solid transparent;
  font-family: var(--font-cuerpo); font-size: 16px; line-height: 20px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
/* El principal puede partir la frase en dos líneas en pantallas estrechas (medido: a 375 px no cabía todo en una) */
.vl-cta-fija__principal { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; background: var(--vl-secondary); color: var(--vl-on-color); }
.vl-cta-fija__principal:hover, .vl-cta-fija__principal:focus-visible { background: var(--vl-secondary-dark); color: var(--vl-on-color); text-decoration: none; }
.vl-cta-fija__contacto { flex: 0 0 auto; background: var(--vl-bg); color: var(--vl-secondary-dark); border-color: var(--vl-secondary); }
.vl-cta-fija__contacto:hover, .vl-cta-fija__contacto:focus-visible { background: var(--vl-secondary-light); text-decoration: none; }
.vl-cta-fija__contacto--whatsapp { color: var(--vl-success); border-color: var(--vl-success); }
.vl-cta-fija__contacto--whatsapp:hover, .vl-cta-fija__contacto--whatsapp:focus-visible { background: var(--vl-success-bg); }
.vl-cta-fija__icono { width: 22px; height: 22px; flex: 0 0 auto; }
/* Pantallas estrechas (medido a 375 px: con los dos textos, el principal se partía en dos líneas):
   el botón de contacto se queda solo con el icono, redondo, de 48 px; el texto sigue ahí para el lector de pantalla */
@media (max-width: 420px) {
  .vl-cta-fija__contacto { width: var(--vl-touch); padding: 0; gap: 0; border-radius: 50%; }
  .vl-cta-fija__contacto span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .vl-cta-fija__contacto .vl-cta-fija__icono { width: 26px; height: 26px; }
}
/* Sitio para la barra: el pie no queda tapado */
body.vl-tiene-cta-fija { padding-bottom: calc(var(--vl-touch) + var(--vl-space-md) + var(--vl-space-sm)); }
/* La barra inferior de Woodmart (CONTACTO / NOSOTROS) se aparta mientras esté la CTA; se vuelve a ver poniendo VL_CTA_FIJA_OCULTA_TOOLBAR en false */
body.vl-cta-oculta-toolbar .wd-toolbar { display: none; }
@media (min-width: 1025px) {
  .vl-cta-fija { display: none; }               /* en escritorio ya hay botones en la cabecera */
  body.vl-tiene-cta-fija { padding-bottom: 0; }
}
@media print { .vl-cta-fija { display: none; } }

/* ---------- 2 · Aviso de cookies ---------- */
.vl-cookies {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 370; /* por encima de la CTA: primero se decide, luego se navega */
  padding: var(--vl-space-md);
  padding-bottom: calc(var(--vl-space-md) + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 42, 0.35);
}
.vl-cookies[hidden] { display: none; }
.vl-cookies__caja {
  max-width: 720px; margin: 0 auto;
  background: var(--vl-bg); color: var(--vl-text);
  border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-lg); padding: var(--vl-space-lg);
}
.vl-cookies__texto { font-size: 17px; line-height: 27px; margin: 0 0 var(--vl-space-md); }
.vl-cookies__texto a { text-decoration: underline; }
.vl-cookies__botones { display: flex; flex-direction: column; gap: var(--vl-space-sm); }
.vl-cookies__elegir { margin: 0 0 var(--vl-space-md); }
.vl-cookies__elegir summary { min-height: var(--vl-touch); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--vl-secondary-dark); list-style: none; }
.vl-cookies__elegir summary::-webkit-details-marker { display: none; }
.vl-cookies__elegir summary::before { content: "▸"; margin-right: var(--vl-space-sm); transition: transform var(--vl-transition-fast); }
.vl-cookies__elegir[open] summary::before { transform: rotate(90deg); }
.vl-cookies__opcion { display: flex; gap: var(--vl-space-sm); align-items: flex-start; min-height: var(--vl-touch); padding: var(--vl-space-xs) 0; font-size: 15px; line-height: 23px; cursor: pointer; }
.vl-cookies__opcion input { width: 24px; height: 24px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--vl-secondary); }
.vl-cookies__elegir .vl-btn { margin-top: var(--vl-space-sm); }
.vl-cookies__reabrir-caja { margin: 0; }
.vl-cookies__reabrir { background: var(--vl-footer-bg, #001f3b); color: #e5f0ff; border: 0; padding: 10px 14px; border-radius: var(--vl-radius-pill); font: inherit; font-size: var(--vl-font-small); text-decoration: underline; cursor: pointer; min-height: 44px; } /* F10 26/09: con fondo propio, el contraste (13:1) no depende de dónde caiga el botón (axe lo marcaba a 1440) */
/* Hasta que el JS lo lleve al pie, el botón «Preferencias de cookies» vive discreto abajo a la izquierda (sin JS, se queda ahí) */
.vl-cookies__reabrir-caja { position: fixed; left: var(--vl-space-md); bottom: var(--vl-space-xs); z-index: 300; font-size: var(--vl-font-caption); }
body.vl-tiene-cta-fija .vl-cookies__reabrir-caja { bottom: calc(var(--vl-touch) + var(--vl-space-lg)); }
.vl-cookies__reabrir-caja--pie { position: static; padding: var(--vl-space-sm) 0 0; color: var(--vl-footer-muted); }
body.vl-tiene-cta-fija .vl-cookies__reabrir-caja--pie { position: static; }
@media (min-width: 600px) {
  .vl-cookies__botones { flex-direction: row; justify-content: flex-end; }
}

/* ---------- 4 · Calculadora de retorno (ópticas) ---------- */
.vl-calc {
  background: var(--vl-bg); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-sm); padding: var(--vl-space-lg); margin: var(--vl-space-lg) 0;
}
.vl-calc__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: 1.2; margin: 0 0 var(--vl-space-xs); }
.vl-calc__ayuda { font-size: var(--vl-font-small); color: var(--vl-text-muted); margin: 0 0 var(--vl-space-md); }
.vl-calc__campos { display: grid; gap: var(--vl-space-md); }
.vl-calc__campo { display: block; }
.vl-calc__etiqueta { display: flex; justify-content: space-between; gap: var(--vl-space-sm); font-size: 15px; line-height: 23px; font-weight: 600; margin-bottom: var(--vl-space-xs); }
.vl-calc__etiqueta output { color: var(--vl-secondary-dark); }
.vl-calc input[type="range"] { width: 100%; height: var(--vl-touch); margin: 0; accent-color: var(--vl-secondary); cursor: pointer; }
.vl-calc__resultado { margin-top: var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-md); background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
.vl-calc__cifra { font-family: var(--font-titulos); font-size: 32px; line-height: 36px; font-weight: 700; margin: 0 0 var(--vl-space-xs); }
.vl-calc__detalle { font-size: 17px; line-height: 27px; margin: 0 0 var(--vl-space-sm); }
.vl-calc__nota { font-size: var(--vl-font-small); line-height: 23px; color: var(--vl-text-muted); margin: 0; }
@media (min-width: 768px) {
  .vl-calc__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vl-space-lg); }
  .vl-calc__cifra { font-size: 40px; line-height: 44px; }
}

/* ---------- 5 · «Revisado por» (firma sanitaria) ---------- */
.vl-revisado {
  display: flex; gap: var(--vl-space-sm); align-items: flex-start;
  padding: var(--vl-space-md) var(--vl-space-lg); margin: 0 0 var(--vl-space-lg);
  border-radius: var(--vl-radius-md); background: var(--vl-success-bg); color: var(--vl-text);
  font-size: var(--vl-font-small); line-height: 23px;
}
.vl-revisado__icono { width: 22px; height: 22px; flex: 0 0 auto; color: var(--vl-success); margin-top: 1px; }
.vl-revisado a { text-decoration: underline; }

/* ---------- 6 · Mi cuenta ---------- */
.vl-cuenta { display: grid; gap: var(--vl-space-md); margin: var(--vl-space-lg) 0; }
.vl-cuenta__caja { background: var(--vl-bg); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); box-shadow: var(--vl-shadow-sm); }
.vl-cuenta__caja--plan { background: var(--vl-bg-soft); }
.vl-cuenta__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: 1.2; margin: 0 0 var(--vl-space-sm); }
.vl-cuenta__lista { list-style: none; margin: 0 0 var(--vl-space-md); padding: 0; }
.vl-cuenta__lista li { padding: var(--vl-space-sm) 0; border-bottom: 1px solid var(--vl-border); }
.vl-cuenta__precio { font-family: var(--font-titulos); font-size: 28px; line-height: 32px; font-weight: 700; color: var(--vl-secondary-dark); margin: 0 0 var(--vl-space-sm); }
.vl-cuenta__precio span { font-family: var(--font-cuerpo); font-size: var(--vl-font-small); font-weight: 400; color: var(--vl-text-muted); }
.vl-cuenta__nota { font-size: var(--vl-font-small); color: var(--vl-text-muted); margin: 0; }
.vl-cuenta__botones { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); margin: 0; }

/* ---------- 7 · Ver mejor: letra grande y contraste ---------- */
.vl-vista { position: fixed; right: 0; top: 40vh; z-index: 340; }
.vl-vista__boton {
  display: grid; place-items: center; width: var(--vl-touch); height: var(--vl-touch);
  background: var(--vl-bg); color: var(--vl-text); border: 2px solid var(--vl-border); border-right: 0;
  border-radius: var(--vl-radius-md) 0 0 var(--vl-radius-md); box-shadow: var(--vl-shadow-sm);
  font-family: var(--font-titulos); font-weight: 700; font-size: 18px; cursor: pointer; list-style: none;
}
.vl-vista__boton::-webkit-details-marker { display: none; }
.vl-vista__panel {
  position: absolute; right: 0; top: calc(var(--vl-touch) + var(--vl-space-xs)); width: 260px;
  background: var(--vl-bg); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-md) 0 0 var(--vl-radius-md);
  box-shadow: var(--vl-shadow-md); padding: var(--vl-space-md);
}
.vl-vista__titulo { font-family: var(--font-titulos); font-weight: 700; margin: 0 0 var(--vl-space-sm); }
.vl-vista__opcion { display: flex; gap: var(--vl-space-sm); align-items: center; min-height: var(--vl-touch); font-size: 17px; cursor: pointer; }
.vl-vista__opcion input { width: 24px; height: 24px; accent-color: var(--vl-secondary); }
.vl-vista__nota { font-size: var(--vl-font-caption); color: var(--vl-text-muted); margin: var(--vl-space-xs) 0 0; }
@media print { .vl-vista { display: none; } }

/* Letra más grande: se cambian las variables, así toda la web crece a la vez.
   html[data-…] pesa más que :root, y por eso gana a tokens.css sin forzar nada. */
html[data-vl-letra="grande"] {
  --vl-font-body: 20px; --vl-font-small: 17px; --vl-font-caption: 16px;
  --vl-font-h1: 38px; --vl-font-h2: 32px; --vl-font-h3: 25px;
}
html[data-vl-letra="grande"] body { font-size: var(--vl-font-body); line-height: 1.65; }
html[data-vl-letra="grande"] :is(p, li, label, .vl-card__body, .vl-hero__text, .vl-alert, .vl-accordion__body, .vl-accordion__header, .vl-check, .vl-option, .vl-input, .vl-textarea, .vl-select, .vl-btn, .vl-cookies__texto, .wpforms-field-label) { font-size: var(--vl-font-body); }
html[data-vl-letra="grande"] :is(.vl-card__meta, .vl-center-card__location, .vl-field__label, .vl-field__help, .vl-hero__trust, .vl-cookies__opcion, .vl-revisado, .vl-calc__etiqueta) { font-size: var(--vl-font-small); }
html[data-vl-letra="grande"] .wpforms-field :is(input, select, textarea) { font-size: var(--vl-font-body); }
/* La barra fija NO crece con la letra grande: a 375 px no cabría (medido) y ya mide 48 px de alto */

/* Más contraste: colores más oscuros y enlaces subrayados. El mismo juego, por si el sistema ya lo pide. */
html[data-vl-contraste="alto"] {
  --vl-text: #000000; --vl-text-muted: #1e293b; --vl-text-light: #334155;
  --vl-secondary: #035377; --vl-secondary-dark: #022f44; --vl-primary-dark: #7a1250;
  --vl-border: #64748b; --vl-border-brand: #64748b;
  --vl-bg-soft: #ffffff; --vl-bg-hero: #ffffff; --vl-bg-gray: #f1f5f9;
  --vl-focus: #000000;
}
html[data-vl-contraste="alto"] a:not(.vl-btn) { text-decoration: underline; }
@media (prefers-contrast: more) {
  :root {
    --vl-text: #000000; --vl-text-muted: #1e293b; --vl-text-light: #334155;
    --vl-secondary: #035377; --vl-secondary-dark: #022f44; --vl-primary-dark: #7a1250;
    --vl-border: #64748b; --vl-border-brand: #64748b; --vl-focus: #000000;
  }
}

/* ---------- 10 · Puente a SocialVideoHub ---------- */
.vl-puente-svh {
  border: 1px solid var(--vl-border-brand); border-left: 6px solid var(--vl-primary); border-radius: var(--vl-radius-lg);
  background: var(--vl-bg-soft); padding: var(--vl-space-lg); margin: var(--vl-space-lg) 0;
}
.vl-puente-svh__eyebrow { display: block; font-family: var(--font-titulos); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--vl-primary-dark); margin: 0 0 var(--vl-space-xs); }
.vl-puente-svh__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: 1.2; margin: 0 0 var(--vl-space-sm); }
.vl-puente-svh__texto { font-size: 17px; line-height: 27px; color: var(--vl-text-muted); margin: 0 0 var(--vl-space-md); }

/* ---------- 26/09/2026 (Claude Code en la nube · F3, prioridad ⭐3 de C3): el aviso de cookies medía 455 px a 375 y tapaba el botón
   «Empezar el triaje gratuito» de la portada. En móvil pasa a una caja compacta (texto de 15 px, botones en fila, sin sombra grande)
   y nunca ocupa más de la mitad de la pantalla: lo que sobra se desplaza dentro. En escritorio sigue igual. ---------- */
@media (max-width: 767px) {
  .vl-cookies { padding: var(--vl-space-sm); }
  .vl-cookies__caja { padding: var(--vl-space-md); max-height: 48vh; overflow: auto; border-radius: var(--vl-radius-lg); }
  .vl-cookies__texto { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); margin-bottom: var(--vl-space-sm); }
  .vl-cookies__botones { flex-direction: row; flex-wrap: wrap; }
  .vl-cookies__botones .vl-btn { flex: 1 1 45%; min-height: var(--vl-touch); padding: 10px 12px; font-size: var(--vl-font-small); }
  .vl-cookies__elegir { margin-bottom: var(--vl-space-sm); }
  .vl-cookies__elegir summary { min-height: 40px; font-size: var(--vl-font-small); }
}

/* ---------- C4 (26/09/2026, Claude Code en la nube): medido que el aviso compacto (302 px) SEGUÍA tapando «Empezar el triaje» a 375
   (cuadro desde y = 511, botón 519–572) y, a 1440, la caja «Te contesta María José». Móvil: el aviso va ARRIBA (tapa la cabecera,
   nunca el primer clic del negocio) y ocupa lo mínimo: texto corto, «Elegir yo» y los dos botones en una fila. Escritorio: caja
   estrecha abajo a la derecha (420 px), fuera de la columna de contenido. ---------- */
@media (max-width: 767px) {
  .vl-cookies { top: 0; bottom: auto; padding: var(--vl-space-xs); background: transparent; pointer-events: none; }
  .vl-cookies__caja { pointer-events: auto; max-height: none; padding: var(--vl-space-sm) var(--vl-space-md); box-shadow: var(--vl-shadow-lg), var(--vl-halo); }
  .vl-cookies__texto { font-size: 14px; line-height: 1.4; margin-bottom: var(--vl-space-xs); }
  .vl-cookies__elegir { margin-bottom: var(--vl-space-xs); }
  .vl-cookies__elegir summary { min-height: 44px; display: flex; align-items: center; }
  .vl-cookies__botones .vl-btn { min-height: 44px; }
}
@media (min-width: 1024px) {
  .vl-cookies { inset-inline: auto 24px; bottom: 24px; padding: 0; background: transparent; max-width: 420px; }
  .vl-cookies__caja { box-shadow: var(--vl-shadow-lg), var(--vl-halo); }
  .vl-cookies__botones { flex-direction: column; }
}