/**
 * Asesor de visagismo Veratys - estilos front (1.5.4 · revision estetica).
 *
 * Tokens Discopebell: verde #03834a / #026b3c, papel #fff, arena #faf8f4,
 * Roboto + Roboto Slab. Prefijo .vvi- para no colisionar con el tema. TODO el
 * estilo vive aqui: no se toca el CSS global, ni el tema, ni overrides.
 *
 * Principios del rediseno:
 *  1. Una accion principal por estado (intro -> CTA, pasos -> las opciones,
 *     resultado -> descargar la guia). El resto se subordina en tamano y peso.
 *  2. Ritmo intencionado con una escala unica (--vvi-s1..s7 y --vvi-chapter):
 *     el aire separa capitulos, no queda como hueco muerto.
 *  3. Jerarquia editorial: cintillo verde + titulo con serifa + entradilla.
 *     Las separaciones son filetes HORIZONTALES; NUNCA barras verticales.
 *  4. Todo texto cumple contraste AA sobre su fondo real (ver comentarios).
 */

/* ---------------------------------------------------------------------------
   1. Tokens
--------------------------------------------------------------------------- */
.vvi-page{
  /* Colores que lee el JS por getComputedStyle: no renombrar. */
  --vvi-canvas-guide-ready:#03834a;
  --vvi-canvas-guide-waiting:rgba(255,255,255,.85);
  --vvi-canvas-qr-background:#fff;
  --vvi-canvas-qr-foreground:#111;
  --vvi-report-image-background:#fff;

  /* Marca */
  --vvi-green:#03834a;      /* fondo de accion; blanco encima = 4.83 (AA) */
  --vvi-green-ink:#026b3c;  /* verde de TEXTO sobre claros: 6.0-6.6 (AA)  */
  --vvi-green-deep:#014c2b; /* anillo de foco                              */
  --vvi-mint:#edf7f1;
  --vvi-mint-line:#cfe4d7;

  /* Papel y tinta */
  --vvi-paper:#fff;
  --vvi-sand:#faf8f4;
  --vvi-sand-deep:#f4f1ea;
  --vvi-line:#e5dfd3;
  --vvi-line-soft:#efe9df;
  --vvi-ink:#1b1b1b;        /* 15.9 sobre papel */
  --vvi-ink-2:#3f3f3f;      /* 10.4 sobre papel */
  --vvi-ink-3:#5a5a5a;      /*  6.9 sobre papel / 6.8 sobre arena */
  --vvi-ink-4:#6a6a6a;      /*  5.4 sobre papel / 5.3 sobre arena (minimo) */
  --vvi-olive:#4f6d3f;      /*  5.3 sobre los verdes muy claros */
  /* 1.5.4 - El oscuro de Discopebell es VERDE, no un negro neutro: es el mismo
     tono que la banda de menu y el pie (medido en pagina: rgb(22,50,31)). El
     #151b1b anterior leia como un componente ajeno a la tienda.
     Blanco sobre este verde = 13.9 (AAA). */
  --vvi-night:#16321f;

  /* Ritmo */
  --vvi-gutter:clamp(8px,2.4vw,16px);
  --vvi-s1:4px;
  --vvi-s2:8px;
  --vvi-s3:12px;
  --vvi-s4:18px;
  --vvi-s5:26px;
  --vvi-s6:38px;
  --vvi-s7:clamp(30px,4vw,52px);
  --vvi-chapter:clamp(28px,4.2vw,46px);

  /* Forma */
  --vvi-radius:14px;
  --vvi-radius-lg:20px;
  --vvi-pill:999px;
  --vvi-shadow-card:0 1px 2px rgba(27,42,32,.04),0 8px 24px rgba(27,42,32,.05);

  /* Tipografia */
  --vvi-serif:'Roboto Slab',Roboto,Georgia,serif;
  --vvi-sans:Roboto,Arial,sans-serif;

  max-width:1080px;
  margin:0 auto;
  padding:0 var(--vvi-gutter) var(--vvi-s7);
}

/* El atributo hidden debe ganar SIEMPRE a los display del tema/modulo */
.vvi-page [hidden]{display:none!important}
.vvi-visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}

/* ---------------------------------------------------------------------------
   2. Piezas editoriales compartidas
--------------------------------------------------------------------------- */
.vvi-kicker{
  display:block;font:700 11.5px/1.1 var(--vvi-sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--vvi-green-ink);margin:0 0 var(--vvi-s3)
}
.vvi-section-title{
  font-family:var(--vvi-serif);font-weight:700;color:var(--vvi-ink);
  font-size:clamp(19px,2.1vw,25px);line-height:1.22;margin:0 0 var(--vvi-s4);text-align:center
}
/* Separador de capitulo: filete horizontal + aire. Nunca una barra vertical. */
.vvi-block{margin-top:var(--vvi-chapter)}
.vvi-block--ruled{padding-top:var(--vvi-chapter);border-top:1px solid var(--vvi-line)}

/* ---------------------------------------------------------------------------
   3. Estado intro: portada
--------------------------------------------------------------------------- */
.vvi-hero{text-align:center;max-width:760px;margin:0 auto;padding:clamp(4px,1.6vw,16px) 0 0}
.vvi-title{
  font-family:var(--vvi-serif);font-weight:700;color:var(--vvi-ink);
  font-size:clamp(27px,4vw,42px);line-height:1.12;letter-spacing:-.01em;margin:0 0 var(--vvi-s3);
  text-wrap:balance
}
.vvi-sub{font:400 clamp(14.5px,1.2vw,16.5px)/1.6 var(--vvi-sans);color:var(--vvi-ink-3);margin:0 auto;max-width:60ch}
.vvi-hero-cta{margin-top:var(--vvi-s5)}
.vvi-sub-secondary{font-size:13px;line-height:1.55;color:var(--vvi-ink-4);margin-top:var(--vvi-s4);max-width:54ch}
.vvi-hero-cta,
.vvi-hero-cta:visited,
.vvi-hero-cta:hover,
.vvi-hero-cta:focus-visible,
.vvi-hero-cta:active{color:#fff!important}
.vvi-trust-list{
  display:flex;justify-content:center;gap:var(--vvi-s2);flex-wrap:wrap;list-style:none;padding:0;
  margin:var(--vvi-s4) 0 0
}
.vvi-trust-list li{
  font:600 11.5px/1.25 var(--vvi-sans);color:var(--vvi-green-ink);background:var(--vvi-mint);
  border:1px solid var(--vvi-mint-line);border-radius:var(--vvi-pill);padding:7px 12px
}

/* Banda explicativa: dos columnas en escritorio, apilada en movil. */
.vvi-explainer{
  display:grid;grid-template-columns:minmax(190px,.78fr) minmax(0,1.22fr);gap:clamp(14px,3vw,34px);
  align-items:start;background:var(--vvi-paper);border:1px solid var(--vvi-line);border-radius:var(--vvi-radius-lg);
  padding:clamp(20px,3vw,30px);margin:var(--vvi-chapter) 0 0
}
.vvi-explainer .vvi-kicker{margin-bottom:var(--vvi-s2)}
.vvi-explainer h2{
  font-family:var(--vvi-serif);font-weight:700;font-size:clamp(19px,2.1vw,26px);line-height:1.2;
  color:var(--vvi-ink);margin:0;text-wrap:balance
}
.vvi-explainer p{font:400 14.5px/1.68 var(--vvi-sans);color:var(--vvi-ink-3);margin:0;max-width:64ch}

/* ---------------------------------------------------------------------------
   4. Tarjeta del cuestionario
--------------------------------------------------------------------------- */
.vvi-wizard{
  background:var(--vvi-sand);border:1px solid var(--vvi-line-soft);border-radius:var(--vvi-radius-lg);
  box-shadow:0 14px 38px rgba(20,32,24,.06);padding:clamp(18px,3.2vw,40px);margin:var(--vvi-chapter) 0 0
}
/* En intro la tarjeta no existe (ver maquina de estados): sin margen fantasma. */
.vvi-page[data-vvi-ui-state="in_progress"] .vvi-wizard{margin-top:clamp(8px,2vw,20px)}

/* Cabecera de progreso: contador y filete en UNA linea, sin huecos. */
.vvi-wizard-head{display:flex;align-items:center;gap:var(--vvi-s3);margin:0 0 var(--vvi-s5)}
.vvi-stepcount{
  flex:none;margin:0;font:700 11px/1 var(--vvi-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--vvi-ink-4)
}
.vvi-stepcount b{color:var(--vvi-green-ink)}
.vvi-progress{flex:1 1 auto;height:3px;background:#e4ded1;border-radius:var(--vvi-pill);overflow:hidden}
.vvi-progress-bar{height:100%;width:20%;background:var(--vvi-green);border-radius:var(--vvi-pill);transition:width .4s ease}
.vvi-progress-bar--step-1{width:20%}
.vvi-progress-bar--step-2{width:40%}
.vvi-progress-bar--step-3{width:60%}
.vvi-progress-bar--step-4{width:80%}
.vvi-progress-bar--step-5{width:100%}

/* Paneles (transicion suave) */
.vvi-panel{animation:vviIn .3s ease}
@keyframes vviIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vvi-q{
  font-family:var(--vvi-serif);font-weight:700;color:var(--vvi-ink);
  font-size:clamp(21px,2.5vw,29px);line-height:1.2;margin:0 0 var(--vvi-s2);text-align:center;text-wrap:balance
}
/* 1.5.4 - Los titulos de paso llevan tabindex="-1" y el JS les da foco al
   avanzar para que los lectores de pantalla anuncien la pregunta. Con raton o
   dedo eso pintaba el anillo AMBAR del tema alrededor del titular en TODOS los
   pasos: un recuadro naranja fuera de la paleta de marca. :focus-visible solo
   se activa en navegacion por teclado, asi que la ayuda de accesibilidad se
   conserva intacta y el ruido visual desaparece. */
.vvi-page [data-vvi-panel-title]:focus,
.vvi-page .vvi-q:focus{outline:none}
.vvi-page [data-vvi-panel-title]:focus-visible,
.vvi-page .vvi-q:focus-visible{
  outline:3px solid var(--vvi-green-deep);outline-offset:6px;border-radius:10px
}
.vvi-hint{font:400 13.5px/1.55 var(--vvi-sans);color:var(--vvi-ink-3);text-align:center;margin:0 auto var(--vvi-s5);max-width:52ch}

/* ---------------------------------------------------------------------------
   5. Rejillas de opciones
--------------------------------------------------------------------------- */
.vvi-grid{display:grid;gap:clamp(10px,1.2vw,14px)}
/* Las SEIS caras: 3x2 en escritorio, centradas y sin estirarse de mas. */
.vvi-grid-formas{grid-template-columns:repeat(3,minmax(0,1fr));max-width:700px;margin-inline:auto;align-items:stretch;justify-items:stretch}
/* Pasos de 2-4 opciones: pistas de ancho fijo centradas (nada de tarjetas gigantes). */
.vvi-grid-cards{grid-template-columns:repeat(auto-fit,minmax(0,196px));justify-content:center;max-width:860px;margin-inline:auto}

.vvi-opt{
  display:flex;flex-direction:column;align-items:center;gap:var(--vvi-s3);
  background:var(--vvi-paper);border:1px solid var(--vvi-line-soft);border-radius:var(--vvi-radius);
  padding:var(--vvi-s4) var(--vvi-s3);cursor:pointer;text-align:center;min-height:44px;
  font:400 13.5px/1.45 var(--vvi-sans);color:var(--vvi-ink-3);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  -webkit-tap-highlight-color:transparent;position:relative;
}
.vvi-opt:hover,.vvi-opt:focus-visible{border-color:var(--vvi-green);box-shadow:0 6px 18px rgba(3,131,74,.16);transform:translateY(-2px)}
.vvi-opt:focus-visible{outline:3px solid var(--vvi-green-deep);outline-offset:3px}
.vvi-opt strong{font:600 15px/1.3 var(--vvi-sans);color:var(--vvi-ink)}
.vvi-opt small{font-size:12.5px;line-height:1.4;color:var(--vvi-ink-4)}
.vvi-opt.vvi-selected{border-color:var(--vvi-green);background:#e6f2e9;box-shadow:inset 0 0 0 1px var(--vvi-green)}
.vvi-opt.vvi-selected small{color:#4c574f}
.vvi-opt.vvi-selected::after{
  content:"";position:absolute;top:9px;right:9px;width:24px;height:24px;
  border-radius:50%;background:var(--vvi-green) url("../img/icons/check.svg") center/13px 13px no-repeat;
  box-shadow:0 2px 7px rgba(3,131,74,.24)
}

/* Ilustraciones 3D locales, en el mismo lenguaje visual que el asesor de color.

   1.5.4 - Calibracion optica parametrica. Antes el dibujo se pintaba a un
   tamano fijo (58px / 47px / 68px / 84px segun el contexto) y las
   compensaciones de centrado eran pixeles FIJOS ajustados para los 47px del
   movil. Como el desplazamiento real de la silueta dentro del PNG es una
   PROPORCION del lienzo, esos pixeles se quedaban cortos en cuanto el dibujo
   crecia: medido en pagina, en escritorio (58px) las caras se desviaban hasta
   2px a cada lado -- 4px de diferencia entre dos vecinas de la misma fila.
   Ahora el desplazamiento se expresa como fraccion del dibujo (--vvi-icon-dx /
   --vvi-icon-dy) y se multiplica por su tamano real, de modo que el centrado
   es exacto en los cuatro tamanos.
   --vvi-icon-scale iguala el PESO OPTICO (area de tinta) de las seis caras sin
   tocar su proporcion: la relacion alto/ancho es justamente lo que distingue
   "alargado" de "redondo" y debe conservarse. */
.vvi-choice-icon{
  --vvi-icon-base:55px;   /* nominal: con la escala optica maxima (1.0472)
                               el dibujo queda en 57,6px, dentro del rango
                               util de 47-58px exigido para movil.        */
  --vvi-icon-scale:1;     /* correccion de peso optico, por icono          */
  --vvi-icon-dx:0;        /* recentrado horizontal, en fraccion del dibujo */
  --vvi-icon-dy:0;        /* recentrado vertical, en fraccion del dibujo   */
  --vvi-icon-size:calc(var(--vvi-icon-base) * var(--vvi-icon-scale));
  width:68px;height:68px;display:block;flex:none;border-radius:20px;
  background-color:var(--vvi-mint);background-repeat:no-repeat;
  background-size:var(--vvi-icon-size) var(--vvi-icon-size);
  background-position:
    calc(50% + var(--vvi-icon-dx) * var(--vvi-icon-size))
    calc(50% + var(--vvi-icon-dy) * var(--vvi-icon-size));
  border:1px solid var(--vvi-mint-line);
  box-shadow:0 5px 14px rgba(35,78,54,.1),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease
}
.vvi-opt:hover .vvi-choice-icon,.vvi-opt:focus-visible .vvi-choice-icon{
  background-color:#e4f3e9;transform:scale(1.04)
}
.vvi-opt.vvi-selected .vvi-choice-icon{
  background-color:#fff;border-color:#9dc9ad
}
/* Compensacion optica de los lienzos PNG: centra la SILUETA, no el lienzo.
   Los valores salen de medir la caja de tinta (alfa) de cada PNG de 256x256:
     dx = -(centroX - 128)/256    dy = -(centroY - 128)/256
     scale = raiz(area media / area propia)   -> iguala el peso optico
   ovalado 134x215 c(161.0,126.5) | redondo  149x204 c(128.5,132.0)
   cuadrado 141x206 c( 94.5,132.0) | alargado 128x219 c(161.0,109.5)
   corazon  134x193 c(128.0,126.5) | diamante 136x206 c( 95.0,115.0)   */
.vvi-icon-face-ovalado{background-image:url("../img/icons/face-ovalado.png?v=1.5.4");--vvi-icon-scale:.9922;--vvi-icon-dx:-.1289;--vvi-icon-dy:.0059}
.vvi-icon-face-redondo{background-image:url("../img/icons/face-redondo.png?v=1.5.4");--vvi-icon-scale:.9659;--vvi-icon-dx:-.0020;--vvi-icon-dy:-.0156}
.vvi-icon-face-cuadrado{background-image:url("../img/icons/face-cuadrado.png?v=1.5.4");--vvi-icon-scale:.9881;--vvi-icon-dx:.1309;--vvi-icon-dy:-.0156}
.vvi-icon-face-alargado{background-image:url("../img/icons/face-alargado.png?v=1.5.4");--vvi-icon-scale:1.0058;--vvi-icon-dx:-.1289;--vvi-icon-dy:.0723}
.vvi-icon-face-corazon{background-image:url("../img/icons/face-corazon.png?v=1.5.4");--vvi-icon-scale:1.0472;--vvi-icon-dx:0;--vvi-icon-dy:.0059}
.vvi-icon-face-diamante{background-image:url("../img/icons/face-diamante.png?v=1.5.4");--vvi-icon-scale:1.0061;--vvi-icon-dx:.1289;--vvi-icon-dy:.0508}
.vvi-icon-hair-liso{background-image:url("../img/icons/hair-liso.png")}
.vvi-icon-hair-ondulado{background-image:url("../img/icons/hair-ondulado.png")}
.vvi-icon-hair-rizado{background-image:url("../img/icons/hair-rizado.png")}
.vvi-icon-hair-muy-rizado{background-image:url("../img/icons/hair-muy-rizado.png")}
.vvi-icon-length-corto{background-image:url("../img/icons/length-corto.png")}
.vvi-icon-length-media-melena{background-image:url("../img/icons/length-media-melena.png")}
.vvi-icon-length-largo{background-image:url("../img/icons/length-largo.png")}
.vvi-icon-goal-favorecer{background-image:url("../img/icons/goal-favorecer.png")}
.vvi-icon-goal-cambio-look{background-image:url("../img/icons/goal-cambio-look.png")}
.vvi-icon-goal-tendencia{background-image:url("../img/icons/goal-tendencia.png")}
.vvi-icon-service-peluqueria{background-image:url("../img/icons/service-peluqueria.png")}
.vvi-icon-service-barberia{background-image:url("../img/icons/service-barberia.png")}

/* Formas de rostro */
.vvi-forma{width:100%;min-width:0;box-sizing:border-box;justify-self:stretch;justify-content:flex-start;padding:16px 10px;gap:var(--vvi-s2);min-height:178px}
.vvi-forma .vvi-choice-icon{margin-inline:auto}
.vvi-forma strong,.vvi-forma small{display:block;width:100%;text-align:center;overflow-wrap:break-word;hyphens:auto}/* 1.5.4 - `anywhere` partia palabras a mitad; la rejilla ya usa minmax(0,1fr) */
.vvi-forma small{max-width:155px;margin-inline:auto;line-height:1.35}

/* CTA modo camara / foto */
.vvi-camera-cta{display:flex;gap:var(--vvi-s3);justify-content:center;flex-wrap:wrap;margin:var(--vvi-s5) 0 0}
.vvi-camera-cta .vvi-btn{display:inline-flex;align-items:center;gap:9px}
.vvi-camera-cta svg{width:20px;height:20px;flex:none}
.vvi-camera-cta .vvi-camera-disabled{opacity:.55;pointer-events:none;cursor:not-allowed}
/* Nota de privacidad: linea discreta, sin caja, para no competir con las opciones. */
.vvi-privacy{
  display:flex;align-items:center;gap:var(--vvi-s2);justify-content:center;flex-wrap:nowrap;
  font:400 12.5px/1.45 var(--vvi-sans);color:var(--vvi-olive);
  background:none;border:0;padding:0;margin:var(--vvi-s3) auto 0;max-width:58ch;text-align:left;
}
.vvi-privacy svg{width:17px;height:17px;color:var(--vvi-olive);flex:none}
.vvi-camera-stage{margin-top:var(--vvi-s4)}
.vvi-camera-note{font:400 13.5px/1.5 var(--vvi-sans);color:#7a5f2e;background:#fdf6ea;border:1px solid #f3e4c4;border-radius:var(--vvi-radius);padding:12px 16px;text-align:center;margin-top:var(--vvi-s3)}

/* Captura local: facescan.js solo aplica estas clases, nunca inyecta estilos. */
.vvi-cam{max-width:520px;margin:0 auto;font-family:var(--vvi-sans);color:#2b2b2b}
.vvi-cam__priv{display:flex;gap:8px;align-items:flex-start;background:var(--vvi-mint);border:1px solid var(--vvi-mint-line);color:var(--vvi-green-ink);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4;margin-bottom:12px}
.vvi-cam__priv svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.vvi-cam__stage{position:relative;width:100%;aspect-ratio:3/4;max-height:60vh;background:#20211f;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vvi-cam__video,.vvi-cam__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vvi-cam__video{transform:scaleX(-1)}
.vvi-cam__canvas{transform:scaleX(-1);pointer-events:none}
.vvi-cam__status{min-height:20px;text-align:center;font-size:14px;margin:10px 0;color:#444}
.vvi-cam__status--warn{color:#8a5200}
.vvi-cam__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}
.vvi-cam__btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;min-height:46px}
.vvi-cam__btn--primary{background:var(--vvi-green);color:#fff}
.vvi-cam__btn--primary:disabled{background:#b9d8c6;color:#1f3a2b;cursor:default}
.vvi-cam__btn--ghost{background:var(--vvi-sand-deep);color:#2b2b2b;border:1px solid #ded7c8}
.vvi-cam__link{background:none;border:0;color:var(--vvi-green-ink);text-decoration:underline;cursor:pointer;font:inherit;padding:6px}
.vvi-cam__seclink{color:var(--vvi-green-ink);font-weight:700;text-decoration:underline}
.vvi-cam__file{display:none}
.vvi-cam__result{text-align:center}
.vvi-cam__sil{width:96px;height:96px;margin:0 auto 8px;--vvi-icon-base:84px;background-color:#fff}
.vvi-cam__forma{font-size:20px;font-weight:700;margin:0 0 10px}

/* ---------------------------------------------------------------------------
   6. Botones
--------------------------------------------------------------------------- */
.vvi-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--vvi-s3);margin-top:var(--vvi-s5);flex-wrap:wrap}
/* En el primer paso no hay accion secundaria: la fila no debe dejar un hueco. */
.vvi-nav:not(:has(> :not([hidden]))){display:none}
.vvi-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--vvi-s2);
  border:1px solid transparent;cursor:pointer;border-radius:12px;
  font:700 13px/1.15 var(--vvi-sans);letter-spacing:.06em;text-align:center;
  padding:14px 22px;min-height:46px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.vvi-btn-primary{background:var(--vvi-green);border-color:var(--vvi-green);color:#fff;text-transform:uppercase;box-shadow:0 6px 16px rgba(3,131,74,.28);text-decoration:none}
.vvi-btn-primary:hover{background:var(--vvi-green-ink);color:#fff}
.vvi-btn-ghost{background:transparent;color:var(--vvi-green-ink);border-color:#d5cebd}
.vvi-btn-ghost:hover{border-color:var(--vvi-green);color:var(--vvi-green-ink)}
/* Accion secundaria de texto (volver / repetir): peso minimo, foco visible. */
.vvi-btn-quiet{background:none;border-color:transparent;color:var(--vvi-ink-3);font-weight:600;letter-spacing:.02em;padding:12px 10px;text-transform:none}
.vvi-btn-quiet:hover{color:var(--vvi-green-ink);border-color:transparent}
.vvi-btn:focus-visible,.vvi-btn:focus-within{outline:3px solid var(--vvi-green-deep);outline-offset:3px}
/* El CTA de portada manda: mas cuerpo que cualquier otra accion. */
.vvi-hero-cta.vvi-btn-primary{padding:17px 30px;font-size:14px}

/* Carga */
.vvi-loading{text-align:center;padding:46px 0;color:var(--vvi-ink-3);font:400 15px var(--vvi-sans)}
.vvi-spinner{
  display:inline-block;width:42px;height:42px;border-radius:50%;
  border:4px solid #ece6da;border-top-color:var(--vvi-green);animation:vviSpin .8s linear infinite;margin-bottom:12px;
}
@keyframes vviSpin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------------------
   7. Resultado: veredicto
--------------------------------------------------------------------------- */
.vvi-result-intro{text-align:center;max-width:70ch;margin:0 auto var(--vvi-s5)}
.vvi-result-intro .vvi-kicker{margin-bottom:var(--vvi-s2)}
.vvi-result-intro p{font:400 14.5px/1.65 var(--vvi-sans);color:var(--vvi-ink-3);margin:0}

.vvi-result-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:clamp(16px,2.4vw,26px);
  background:var(--vvi-paper);border:1px solid var(--vvi-line);border-radius:var(--vvi-radius-lg);
  padding:clamp(20px,2.8vw,30px);margin:0
}
.vvi-result-sil{width:78px;height:78px;display:flex;align-items:center;justify-content:center;flex:none}
.vvi-result-icon{width:78px;height:78px;border-radius:22px;--vvi-icon-base:68px;background-color:#fff}
.vvi-result-headtext{min-width:0}
.vvi-result-headtext .vvi-kicker{margin-bottom:var(--vvi-s1)}
.vvi-result-forma{
  font-family:var(--vvi-serif);font-weight:700;color:var(--vvi-ink);
  font-size:clamp(24px,3vw,34px);line-height:1.12;margin:0 0 var(--vvi-s1)
}
.vvi-result-prop{font:400 13px/1.5 var(--vvi-sans);color:var(--vvi-ink-4);margin:0}
.vvi-result-explica{font:400 15px/1.68 var(--vvi-sans);color:var(--vvi-ink-2);margin:var(--vvi-s3) 0 0;max-width:66ch}

.vvi-objetivo{
  background:#f4f7ec;border:1px solid #e0ead1;border-radius:var(--vvi-radius);
  padding:var(--vvi-s4) clamp(16px,2.2vw,24px);margin:var(--vvi-s3) 0 0
}
.vvi-objetivo-label{display:block;font:700 10.5px/1 var(--vvi-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--vvi-green-ink);margin-bottom:var(--vvi-s2)}
.vvi-objetivo p{font:500 14.5px/1.6 var(--vvi-sans);color:#33461f;margin:0;max-width:72ch}

/* Resumen de elecciones: banda oscura con fichas, no media pantalla vacia. */
.vvi-answer-summary{
  background:var(--vvi-night);color:#fff;border-radius:var(--vvi-radius-lg);
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,28px)
}
.vvi-answer-summary .vvi-kicker{color:#c9dccf;margin-bottom:var(--vvi-s1)}
.vvi-answer-summary h3{font-family:var(--vvi-serif);font-size:clamp(17px,1.8vw,21px);font-weight:500;line-height:1.25;margin:0;color:#fff}
.vvi-answer-summary dl{display:flex;flex-wrap:wrap;gap:var(--vvi-s2);margin:var(--vvi-s4) 0 0}
/* La ficha (etiqueta + valor) es indivisible: nunca se parte al recolocarse. */
.vvi-answer-summary .vvi-chip{display:inline-flex;align-items:stretch;max-width:100%}
.vvi-answer-summary dt{
  display:flex;align-items:center;margin:0;padding:8px 8px 8px 13px;
  background:rgba(255,255,255,.08);border-radius:var(--vvi-pill) 0 0 var(--vvi-pill);
  font:700 10px/1.2 var(--vvi-sans);letter-spacing:.14em;text-transform:uppercase;color:#c9dccf;
  text-align:left;white-space:nowrap
}
.vvi-answer-summary dd{
  display:flex;align-items:center;margin:0;padding:8px 14px 8px 8px;
  background:rgba(255,255,255,.16);border-radius:0 var(--vvi-pill) var(--vvi-pill) 0;
  font:600 12.5px/1.25 var(--vvi-sans);color:#fff;min-width:0
}

/* ---------------------------------------------------------------------------
   8. Resultado: bloques de recomendacion
--------------------------------------------------------------------------- */
.vvi-reco{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(12px,1.4vw,16px)}
.vvi-reco-block{background:var(--vvi-paper);border:1px solid var(--vvi-line);border-radius:var(--vvi-radius);padding:var(--vvi-s4) clamp(16px,1.8vw,20px)}
.vvi-reco-block-wide{grid-column:1/-1}
.vvi-reco-block h4{display:flex;align-items:center;gap:var(--vvi-s2);font:700 12px/1.2 var(--vvi-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--vvi-green-ink);margin:0 0 var(--vvi-s3)}
.vvi-reco-block h4 svg{width:18px;height:18px;flex:none}
.vvi-reco-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vvi-s2)}
.vvi-reco-list li{position:relative;padding-left:18px;font:400 13.5px/1.55 var(--vvi-sans);color:var(--vvi-ink-2)}
.vvi-reco-list li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--vvi-green)}
.vvi-reco-kv{font:400 13.5px/1.55 var(--vvi-sans);color:var(--vvi-ink-2);margin:0 0 var(--vvi-s2)}
.vvi-reco-kv:last-child{margin-bottom:0}
.vvi-reco-kv b{color:var(--vvi-ink);font-weight:600}
.vvi-badge{display:inline-block;font:600 11px/1 var(--vvi-sans);border-radius:var(--vvi-pill);padding:5px 10px;margin-left:6px}
.vvi-badge-yes{color:var(--vvi-green-ink);background:#eaf4e2}
.vvi-badge-no{color:#8c4d24;background:#faeede}
.vvi-reco-note{font:400 12.5px/1.55 var(--vvi-sans);color:var(--vvi-ink-4);margin:var(--vvi-s2) 0 0}
.vvi-texture-highlight{background:var(--vvi-mint);border-radius:10px;color:#264a34;font:500 13px/1.55 var(--vvi-sans);margin:0 0 var(--vvi-s3);padding:10px 12px}
.vvi-cut-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.2vw,14px);align-items:stretch}
.vvi-cut-list--cuts{grid-template-columns:repeat(3,minmax(0,1fr))}
.vvi-cut-list--beard{grid-template-columns:repeat(3,minmax(0,1fr))}
.vvi-cut-list--count-1{grid-template-columns:minmax(0,1fr)}
.vvi-cut-list--count-2,.vvi-cut-list--count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.vvi-cut-item{
  min-width:0;display:flex;flex-direction:column;
  border:1px solid #e6ece8;background:var(--vvi-paper);
  border-radius:var(--vvi-radius);padding:var(--vvi-s4) var(--vvi-s4)
}
.vvi-cut-eyebrow{
  align-self:flex-start;margin:0 0 var(--vvi-s3);padding:5px 9px;border-radius:var(--vvi-pill);
  background:#eaf4ee;color:var(--vvi-green-ink);
  font:700 10px/1 var(--vvi-sans);letter-spacing:.1em;text-transform:uppercase
}
.vvi-cut-item h5{font:700 15.5px/1.32 var(--vvi-serif);color:var(--vvi-ink);margin:0 0 var(--vvi-s2)}
.vvi-cut-why,.vvi-cut-maintenance{font:400 13px/1.6 var(--vvi-sans);color:var(--vvi-ink-2);margin:var(--vvi-s1) 0}
.vvi-cut-why b,.vvi-cut-maintenance b{
  display:block;margin:0 0 2px;color:var(--vvi-green-ink);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase
}
.vvi-cut-maintenance{border-top:1px solid #e7ece8;padding-top:var(--vvi-s3);margin-top:var(--vvi-s3)}
.vvi-cut-alt{display:inline-block;align-self:flex-start;margin-top:auto;border-radius:var(--vvi-pill);background:var(--vvi-sand-deep);color:#6a5427;padding:6px 10px;font:600 10.5px/1.2 var(--vvi-sans)}

/* ---------------------------------------------------------------------------
   9. Resultado: guia PDF (accion principal del estado)
--------------------------------------------------------------------------- */
.vvi-report{
  background:var(--vvi-mint);border:1px solid var(--vvi-mint-line);border-radius:var(--vvi-radius-lg);
  padding:clamp(22px,3vw,36px) clamp(18px,3vw,32px);text-align:center
}
.vvi-report .vvi-section-title{margin-bottom:var(--vvi-s3)}
.vvi-report-lead{max-width:62ch;margin:0 auto var(--vvi-s5);font:400 14.5px/1.65 var(--vvi-sans);color:var(--vvi-ink-2)}
.vvi-report-actions{display:flex;justify-content:center;align-items:center;gap:var(--vvi-s3);flex-wrap:wrap}
.vvi-report-actions .vvi-btn-primary{padding:17px 30px;font-size:14px}
.vvi-report-actions .vvi-btn-ghost{background:rgba(255,255,255,.7);border-color:var(--vvi-mint-line)}
.vvi-report-status{min-height:18px;margin:var(--vvi-s3) 0 0;font:500 12.5px/1.5 var(--vvi-sans);color:#33461f}
.vvi-report-status-error{color:#9b2f2d}
.vvi-report-privacy{font:400 11.5px/1.5 var(--vvi-sans);color:var(--vvi-ink-4);margin:var(--vvi-s2) 0 0}
.vvi-qr-panel{width:min(260px,100%);margin:var(--vvi-s4) auto 0;padding:12px;background:var(--vvi-paper);border:1px solid var(--vvi-mint-line);border-radius:12px}
.vvi-qr-panel img{display:block;width:190px;max-width:100%;height:auto;margin:0 auto;image-rendering:pixelated}
.vvi-qr-panel p{font:500 12px/1.45 var(--vvi-sans);color:var(--vvi-ink-3);margin:7px 0 0}
.vvi-report button:disabled{opacity:.6;cursor:wait}

/* ---------------------------------------------------------------------------
   10. Resultado: catalogo
--------------------------------------------------------------------------- */
.vvi-families{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}
/* Cada familia es un capitulo: filete HORIZONTAL entre familias, sin barras. */
.vvi-family+.vvi-family{border-top:1px solid var(--vvi-line);padding-top:clamp(22px,3vw,32px)}
.vvi-family-head{font-family:var(--vvi-serif);font-weight:700;font-size:clamp(16px,1.7vw,19px);line-height:1.25;color:var(--vvi-ink);margin:0 0 var(--vvi-s1);padding:0;border:0}
.vvi-family-reason{font:400 13px/1.6 var(--vvi-sans);color:#55635a;margin:0 0 var(--vvi-s4);max-width:70ch}
.vvi-catalog-notice{background:var(--vvi-mint);border:1px solid var(--vvi-mint-line);border-radius:var(--vvi-radius);color:#264a34;margin:0 0 var(--vvi-s5);padding:14px 16px}
.vvi-catalog-notice-empty{background:var(--vvi-sand);border-color:var(--vvi-line);color:#544b41}
.vvi-catalog-notice strong{display:block;font:700 13px/1.4 var(--vvi-sans);margin-bottom:3px}
.vvi-catalog-notice p{font:400 12.5px/1.55 var(--vvi-sans);margin:0}

/* Rejilla del catalogo. Base 3 columnas; las variantes --count-N llenan la
   fila exacta y evitan la tarjeta huerfana con dos huecos al lado. */
.vvi-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);align-items:stretch}
.vvi-results--count-1{grid-template-columns:minmax(0,300px);justify-content:center}
.vvi-results--count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vvi-results--count-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vvi-card{
  background:var(--vvi-paper);border:1px solid var(--vvi-line);border-radius:var(--vvi-radius);overflow:hidden;
  display:flex;flex-direction:column;height:100%;min-width:0;
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.vvi-card:hover,.vvi-card:focus-within{box-shadow:var(--vvi-shadow-card);transform:translateY(-3px)}
.vvi-card:focus-within{border-color:#9dc9ad}
.vvi-card-imgwrap{
  width:100%;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--vvi-line-soft);
  display:flex;align-items:center;justify-content:center;min-height:0;padding:16px
}
.vvi-card-imgwrap img{display:block;width:100%;height:100%;object-fit:contain}
.vvi-card-noimg{width:100%;height:100%;border-radius:10px;background:var(--vvi-sand-deep);display:flex;align-items:center;justify-content:center;color:#635c50;font:600 12px/1.3 var(--vvi-sans)}
.vvi-card-body{padding:var(--vvi-s3) var(--vvi-s3) var(--vvi-s4);display:flex;flex:1;flex-direction:column;gap:var(--vvi-s2);min-width:0}
.vvi-card-name{font:600 14.5px/1.35 var(--vvi-serif);color:var(--vvi-ink);margin:0;overflow-wrap:break-word}
.vvi-card-reason{font:400 12.5px/1.55 var(--vvi-sans);color:#5c665e;margin:0;max-width:62ch}
.vvi-card-price{font:700 18px/1.2 var(--vvi-sans);color:var(--vvi-ink);margin-top:auto;padding-top:var(--vvi-s1)}
.vvi-card-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;gap:var(--vvi-s2)}
.vvi-card-actions .vvi-btn{
  width:100%;min-width:0;min-height:46px;padding:11px 9px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-size:12.5px;line-height:1.15;font-weight:700;letter-spacing:.035em;
  text-decoration:none;white-space:nowrap
}
.vvi-card-actions .vvi-btn:only-child{grid-column:1/-1}
/* Dentro de la tarjeta la accion pesa menos que el CTA de la guia. */
.vvi-card-actions .vvi-btn-primary{box-shadow:none}

/* ---------------------------------------------------------------------------
   11. Resultado: puente al asesor de color (cierre)
--------------------------------------------------------------------------- */
.vvi-crosslink{
  display:flex;align-items:center;justify-content:space-between;gap:var(--vvi-s4);flex-wrap:wrap;
  text-align:left;background:var(--vvi-sand);border:1px solid var(--vvi-line);
  border-radius:var(--vvi-radius-lg);padding:clamp(18px,2.4vw,26px)
}
.vvi-crosslink p{font:400 15px/1.55 var(--vvi-sans);color:var(--vvi-ink-2);margin:0;max-width:52ch}
.vvi-crosslink .vvi-btn{flex:none;padding:13px 22px;font-size:12.5px;box-shadow:none}
/* El puente es una accion explicita entre asesores. Fondo verde y texto blanco
   mantienen la jerarquia de CTA y evitan que el tema herede texto negro. */
.vvi-crosslink .vvi-btn-primary,
.vvi-crosslink .vvi-btn-primary:visited{
  background:var(--vvi-green)!important;border:2px solid var(--vvi-green)!important;
  color:#fff!important;box-shadow:none!important
}
.vvi-crosslink .vvi-btn-primary:hover,
.vvi-crosslink .vvi-btn-primary:focus-visible,
.vvi-crosslink .vvi-btn-primary:active{
  background:var(--vvi-green-ink)!important;border-color:var(--vvi-green-ink)!important;
  color:#fff!important
}

/* Error */
.vvi-error{text-align:center;padding:30px 0;font:400 14.5px/1.6 var(--vvi-sans);color:#9b2f2d}
.vvi-error .vvi-btn{margin-top:var(--vvi-s3)}

/* ---------------------------------------------------------------------------
   12. Tablet
--------------------------------------------------------------------------- */
@media (max-width:820px){
  .vvi-grid-cards{grid-template-columns:repeat(2,1fr);max-width:520px}
  .vvi-grid-formas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px}
  .vvi-explainer{grid-template-columns:1fr;gap:var(--vvi-s3);text-align:center}
  .vvi-explainer p{margin-inline:auto}
  .vvi-cut-list--cuts,.vvi-cut-list--beard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vvi-cut-list--count-1{grid-template-columns:minmax(0,1fr)}
  .vvi-cut-list--count-3 .vvi-cut-item:first-child{grid-column:1/-1}
  .vvi-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vvi-results--count-1,.vvi-results--count-2,.vvi-results--count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vvi-crosslink{justify-content:center;text-align:center}
  .vvi-crosslink p{max-width:60ch}
}

/* ---------------------------------------------------------------------------
   13. Movil (<=576): 360 y 390 son los anchos de referencia
--------------------------------------------------------------------------- */
@media (max-width:576px){
  .vvi-hero{padding-top:var(--vvi-s1)}
  .vvi-title{font-size:clamp(25px,7.2vw,31px);line-height:1.14}
  .vvi-sub{font-size:14.5px;line-height:1.55}
  .vvi-hero-cta{margin-top:var(--vvi-s4);width:100%}
  .vvi-sub-secondary{margin-top:var(--vvi-s3);font-size:12.5px}
  .vvi-trust-list{gap:6px;margin-top:var(--vvi-s3)}
  .vvi-trust-list li{padding:6px 10px;font-size:11px}
  .vvi-explainer{padding:var(--vvi-s5) var(--vvi-s4)}
  .vvi-wizard{padding:var(--vvi-s4) var(--vvi-s3) var(--vvi-s5);border-radius:var(--vvi-radius)}
  .vvi-wizard-head{margin-bottom:var(--vvi-s4)}
  .vvi-grid{gap:9px}
  .vvi-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .vvi-grid-formas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;align-items:stretch;justify-items:stretch}
  .vvi-opt{padding:14px 8px;border-radius:12px;gap:var(--vvi-s2)}
  .vvi-forma{height:100%;padding:13px 6px;min-height:170px}
  .vvi-forma small{font-size:11.5px}
  .vvi-choice-icon{width:56px;height:56px;border-radius:16px;--vvi-icon-base:47px}
  .vvi-camera-cta{flex-direction:column;gap:var(--vvi-s2)}
  .vvi-camera-cta .vvi-btn{justify-content:center;width:100%}
  .vvi-privacy{align-items:flex-start;text-align:left}
  .vvi-cam__sil{width:80px;height:80px;--vvi-icon-base:70px}

  /* 1.5.4 - Texto corrido a bandera izquierda en movil.
     A 360px una linea entra a ~34 caracteres, asi que los parrafos largos
     ocupaban 6-8 lineas CENTRADAS: el ojo pierde el punto de retorno en cada
     salto y el bloque dibuja un rombo. Los titulos, cintillos, pildoras y
     botones siguen centrados. No es un criterio nuevo: la ficha del resultado
     ya alineaba a la izquierda su parrafo explicativo (.vvi-result-explica);
     esto extiende esa misma regla al resto del texto largo. */
  .vvi-sub,
  .vvi-sub-secondary,
  .vvi-explainer p,
  .vvi-report-lead{text-align:left;margin-inline:0}
  .vvi-result-head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--vvi-s3);padding:var(--vvi-s5) var(--vvi-s4)}
  .vvi-result-explica,
  .vvi-result-prop{text-align:left;width:100%}
  .vvi-result-sil,.vvi-result-icon{width:68px;height:68px}
  .vvi-result-icon{--vvi-icon-base:58px}
  .vvi-answer-summary{padding:var(--vvi-s5) var(--vvi-s4)}
  .vvi-answer-summary dt{padding-left:11px;letter-spacing:.1em}
  .vvi-reco{grid-template-columns:1fr}
  .vvi-cut-list--cuts,.vvi-cut-list--beard{grid-template-columns:minmax(0,1fr)}
  .vvi-cut-list--count-3 .vvi-cut-item:first-child{grid-column:auto}
  .vvi-cut-item{padding:var(--vvi-s4) var(--vvi-s3)}
  .vvi-report{padding:var(--vvi-s5) var(--vvi-s4)}
  .vvi-report-actions{flex-direction:column;align-items:stretch;gap:var(--vvi-s2)}
  .vvi-report-actions .vvi-btn{width:100%}
  .vvi-crosslink{padding:var(--vvi-s5) var(--vvi-s4)}
  .vvi-crosslink .vvi-btn{width:100%}
  .vvi-nav{margin-top:var(--vvi-s4)}
}

/* Catalogo en movil estrecho: una columna de fichas horizontales. Es mas
   legible que dos tarjetas de ~120px y acorta mucho el listado. */
@media (max-width:480px){
  .vvi-results,
  .vvi-results--count-1,
  .vvi-results--count-2,
  .vvi-results--count-4{grid-template-columns:minmax(0,1fr);gap:10px;justify-content:stretch}
  .vvi-card{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:start;gap:var(--vvi-s3);padding:10px;border-radius:12px}
  .vvi-card:hover,.vvi-card:focus-within{transform:none}
  .vvi-card-imgwrap{aspect-ratio:1/1;width:84px;padding:4px;border:0;border-radius:9px}
  .vvi-card-body{padding:2px 4px 2px 0;gap:6px}
  .vvi-card-name{font-size:13.5px;line-height:1.3}
  .vvi-card-reason{font-size:11.5px;line-height:1.45}
  .vvi-card-price{font-size:15.5px;padding-top:0;margin-top:2px}
  /* Dos acciones en la misma fila SIN recortar: el texto puede partirse en
     dos lineas y pierde la caja alta, que no cabe en ~70px de ancho. */
  .vvi-card-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .vvi-card-actions .vvi-btn,
  .vvi-card-actions .vvi-btn:only-child{
    grid-column:auto;min-height:44px;padding:9px 6px;font-size:12px;line-height:1.2;
    letter-spacing:.01em;text-transform:none;white-space:normal;overflow-wrap:anywhere
  }
}

@media (max-width:359px){
  .vvi-card{grid-template-columns:72px minmax(0,1fr)}
  .vvi-card-imgwrap{width:72px}
  .vvi-card-name{font-size:13px}
  .vvi-card-actions{grid-template-columns:minmax(0,1fr)}
  .vvi-card-actions .vvi-btn:only-child{grid-column:1/-1}
}

/* ---------------------------------------------------------------------------
   14. Correcciones frente al tema (pinta hover/active de los botones en ROJO)
--------------------------------------------------------------------------- */
/* 1.5.4 - El tinte de hover era #eef4e6 (verde OLIVA) mientras el de la opcion
   elegida es #e6f2e9 (menta) y el del asesor de color #f3faf6: tres verdes
   palidos distintos para el mismo gesto en dos asesores hermanos. Se unifica
   con la menta de marca, que es la misma familia que --vvi-mint. */
.vvi-wizard button:active,
.vvi-opt:active,
.vvi-forma:active,
.vvi-btn:active{background:#e6f2e9!important;border-color:#03834a!important;color:#1e3a2a!important;box-shadow:0 4px 14px rgba(3,131,74,.18)!important}
.vvi-wizard button:hover,
.vvi-opt:hover,
.vvi-forma:hover,
.vvi-btn:hover{background:var(--vvi-mint)!important;border-color:#03834a!important;color:#1e3a2a!important}
.vvi-btn-primary:hover,
.vvi-btn-primary:active,
.vvi-cam__btn--primary:hover,
.vvi-cam__btn--primary:active{background:#026b3c!important;border-color:#026b3c!important;color:#fff!important}
.vvi-btn-quiet:hover,.vvi-btn-quiet:active{background:transparent!important;border-color:transparent!important;color:#026b3c!important;box-shadow:none!important}
.vvi-opt.vvi-selected,.vvi-forma.vvi-selected{background:#e6f2e9!important;border-color:#03834a!important}

/* Respeta a quien ha pedido reducir movimiento en el sistema. */
@media (prefers-reduced-motion:reduce){
  .vvi-panel{animation:none}
  .vvi-progress-bar,.vvi-opt,.vvi-choice-icon,.vvi-card,.vvi-btn{transition:none!important}
  .vvi-opt:hover,.vvi-opt:focus-visible,.vvi-card:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   15. Maquina de estados de interfaz (1.5.2, ampliada en 1.5.3)
   .vvi-page[data-vvi-ui-state="intro|in_progress|results"] gobierna que
   bloques se ven. Cada bloque declara su pertenencia con data-vvi-show-in y
   admite VARIOS estados separados por espacios (por eso ~=).
   La regla SOLO oculta (display:none): nunca impone un display, asi cada
   bloque conserva el suyo (la banda explicativa sigue siendo grid) y lo
   oculto sale del arbol de accesibilidad, del orden de tabulacion y de los
   lectores de pantalla.
--------------------------------------------------------------------------- */
.vvi-page[data-vvi-ui-state="intro"] [data-vvi-show-in]:not([data-vvi-show-in~="intro"]),
.vvi-page[data-vvi-ui-state="in_progress"] [data-vvi-show-in]:not([data-vvi-show-in~="in_progress"]),
.vvi-page[data-vvi-ui-state="results"] [data-vvi-show-in]:not([data-vvi-show-in~="results"]){display:none}

/* En resultados no queda rastro del cuestionario: ni barra al 100% ni contador. */
.vvi-page[data-vvi-ui-state="results"] .vvi-wizard-head{display:none}

/* ---------------------------------------------------------------------------
 * 1.5.12 - Consentimiento previo a la camara (GDPR) y enlace de privacidad.
 * El bloque #vvi-camera-consent lo muestra visagismo.js al pulsar "Detectar
 * con cámara"; la camara no se solicita hasta aceptar.
 * ------------------------------------------------------------------------ */
.vvi-privacy{flex-wrap:wrap}
.vvi-privacy-link{
  color:var(--vvi-green-ink);font-weight:600;text-decoration:underline;
  /* linea propia alineada con el texto (icono 17px + gap), no estruja el parrafo */
  flex:1 0 100%;padding-left:calc(17px + var(--vvi-s2));
}
.vvi-consent{
  max-width:58ch;margin:var(--vvi-s3) auto 0;padding:16px 18px;text-align:left;
  background:var(--vvi-mint);border:1px solid var(--vvi-mint-line);border-radius:var(--vvi-radius,12px);
}
.vvi-consent-title{font:700 15.5px/1.35 var(--vvi-sans);color:var(--vvi-ink);margin:0 0 8px}
.vvi-consent-text{font:400 13.5px/1.55 var(--vvi-sans);color:var(--vvi-ink-2);margin:0 0 10px}
.vvi-consent-text a{color:var(--vvi-green-ink);font-weight:600;text-decoration:underline}
.vvi-consent-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0 0 12px}
.vvi-consent-check input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--vvi-green);cursor:pointer}
.vvi-consent-check span{font:400 13.5px/1.5 var(--vvi-sans);color:var(--vvi-ink-2)}
.vvi-consent-actions{display:flex;flex-wrap:wrap;gap:10px}
.vvi-consent-actions .vvi-btn[disabled]{opacity:.55;cursor:default}
.vvi-consent-title:focus-visible,.vvi-consent-check input:focus-visible,
.vvi-consent-text a:focus-visible,.vvi-privacy-link:focus-visible{
  outline:3px solid var(--vvi-green-deep);outline-offset:2px;border-radius:4px;
}
@media (max-width:480px){
  .vvi-consent{padding:14px}
  .vvi-consent-actions .vvi-btn{flex:1 1 100%;justify-content:center}
}