/**
 * VERATYS Color Advisor front styles.
 * All visual values live here so the template and JavaScript remain CSP-safe.
 *
 * @license Proprietary - VERATYS
 */

.vca-page{max-width:980px;margin:0 auto;padding:8px 0 60px}
.vca-page [hidden]{display:none!important}
.vca-hero{text-align:center;margin:18px auto 26px;max-width:680px;padding:0 16px}
.vca-kicker{display:block;font:700 12px/1 Roboto,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#03834a;margin-bottom:12px}
.vca-title{font-family:"Roboto Slab",Roboto,serif;font-weight:700;color:#1f1f1f;font-size:clamp(26px,3.4vw,40px);line-height:1.15;margin:0 0 10px}
.vca-sub{font:400 15px/1.6 Roboto,Arial,sans-serif;color:#5d5d5d;margin:0}
.vca-wizard{background:#faf8f4;border:1px solid #efe9df;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:clamp(18px,3.4vw,36px);margin:0 16px}
.vca-init-alert{visibility:hidden;max-height:0;overflow:hidden;color:#7f2522;background:#fff0ef;border:0 solid #e7b7b4;border-radius:12px;padding:0 16px;margin:0;font:400 13.5px/1.5 Roboto,Arial,sans-serif;animation:vcaRevealInit 0s 4s forwards}
.vca-init-alert strong,.vca-init-alert span{display:block}
.vca-ready .vca-init-alert{display:none}
.vca-noscript{color:#7f2522;background:#fff0ef;border:1px solid #e7b7b4;border-radius:12px;padding:14px 16px;margin:0 0 18px;font:600 13.5px/1.5 Roboto,Arial,sans-serif}
@keyframes vcaRevealInit{to{visibility:visible;max-height:180px;border-width:1px;padding:14px 16px;margin:0 0 18px}}

.vca-progress{height:6px;background:#ece6da;border-radius:99px;overflow:hidden}
.vca-progress-bar{height:100%;background:linear-gradient(90deg,#03834a,#05a25c);border-radius:99px;transition:width .35s ease}
.vca-progress-step-1{width:16.6667%}
.vca-progress-step-2{width:33.3333%}
.vca-progress-step-3{width:50%}
.vca-progress-step-4{width:66.6667%}
.vca-progress-step-5{width:83.3333%}
.vca-progress-step-6{width:100%}
.vca-stepcount{font:500 12.5px/1 Roboto,Arial,sans-serif;color:#6a6a6a;margin:10px 0 4px;letter-spacing:.04em}/* Texto auxiliar con contraste suficiente sobre el fondo del asesor. */
.vca-stepcount b{color:#026b3c}

.vca-panel{animation:vcaIn .3s ease}
@keyframes vcaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vca-q{font-family:"Roboto Slab",Roboto,serif;font-weight:700;color:#1f1f1f;font-size:clamp(19px,2.3vw,26px);line-height:1.25;margin:16px 0 18px;text-align:center}
/* El foco visible se reserva para la navegación por teclado y mantiene la
   indicación accesible sin añadir un anillo visual durante el uso táctil. */
.vca-page .vca-q:focus,.vca-page .vca-loading:focus,.vca-page .vca-error:focus{outline:none}
.vca-page .vca-q:focus-visible{outline:3px solid rgba(3,131,74,.5);outline-offset:6px;border-radius:10px}
.vca-hint{font:400 13px/1.5 Roboto,Arial,sans-serif;color:#686868;text-align:center;margin:-8px 0 16px}
.vca-level-note{font:600 13px/1.45 Roboto,Arial,sans-serif;color:#026b3c;text-align:center;background:#eaf6ee;border:1px solid #b9ddc7;border-radius:10px;padding:9px 12px;margin:-6px auto 16px;max-width:620px}
.vca-grid{display:grid;gap:12px}
.vca-grid-cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Las columnas flexibles y el corte de palabras mantienen la rejilla dentro
   del ancho disponible y distribuyen las tarjetas de forma uniforme. */
.vca-grid>.vca-opt{min-width:0}
/* `anywhere` NO: parte las palabras a mitad en cuanto la linea se llena
   ("Castan|o oscuro", "clarisi|mo", "Fantasi|a"). Con minmax(0,1fr) la pista
   ya esta acotada, asi que basta `break-word`, que solo corta la palabra que
   NO cabe entera, mas guionado del castellano. */
.vca-opt strong,.vca-opt small,.vca-sw span{overflow-wrap:break-word;hyphens:auto}
.vca-grid-swatches{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.vca-grid-levels{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}

#vca-wizard .vca-opt{appearance:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;background-color:#fff!important;background-image:none!important;border:2px solid #e6dfd3!important;border-radius:16px;padding:18px 14px;cursor:pointer;text-align:center;min-height:44px;font:400 13.5px/1.45 Roboto,Arial,sans-serif;color:#4f4f4f!important;text-shadow:none!important;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease;-webkit-tap-highlight-color:transparent}
#vca-wizard .vca-opt:not(:disabled):not([aria-pressed="true"]):hover{background-color:#f3faf6!important;color:#1f3b2c!important;border-color:#03834a!important;box-shadow:0 7px 20px rgba(3,131,74,.16)!important;transform:translateY(-2px)}
#vca-wizard .vca-opt:focus-visible{background-color:#fff!important;color:#1f3b2c!important;border-color:#03834a!important;box-shadow:0 7px 20px rgba(3,131,74,.16)!important;transform:translateY(-2px);outline:3px solid rgba(3,131,74,.28)!important;outline-offset:3px}
#vca-wizard .vca-opt[aria-pressed="true"],#vca-wizard .vca-opt.vca-selected,#vca-wizard .vca-opt[aria-pressed="true"]:hover,#vca-wizard .vca-opt.vca-selected:hover{background-color:#e6f2e9!important;background-image:none!important;color:#164c32!important;border-color:#03834a!important;box-shadow:0 0 0 3px rgba(3,131,74,.18),0 8px 22px rgba(3,131,74,.13)!important;transform:none}
#vca-wizard .vca-opt[aria-pressed="true"]::after,#vca-wizard .vca-opt.vca-selected::after{content:"";position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;background:#03834a url("../img/icons/check.svg") center/13px 13px no-repeat;box-shadow:0 2px 7px rgba(3,131,74,.24)}
#vca-wizard .vca-opt strong{font:600 15.5px/1.3 Roboto,Arial,sans-serif;color:inherit!important}
#vca-wizard .vca-opt small{font-size:12.5px;color:#686868!important}
#vca-wizard .vca-opt[aria-pressed="true"] small,#vca-wizard .vca-opt.vca-selected small{color:#285b42!important}
#vca-wizard .vca-opt:disabled{cursor:not-allowed;opacity:.42;background:#fff!important;color:#4f4f4f!important;border-color:#e6dfd3!important;box-shadow:none!important;transform:none!important}
.vca-choice-icon{width:58px;height:58px;display:block;border-radius:18px;flex:none;background-color:#edf7f1;background-position:center;background-repeat:no-repeat;background-size:50px 50px;border:1px solid #cfe4d7;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}
#vca-wizard .vca-opt:hover .vca-choice-icon,#vca-wizard .vca-opt:focus-visible .vca-choice-icon{background-color:#e4f3e9;transform:scale(1.04)}
#vca-wizard .vca-opt[aria-pressed="true"] .vca-choice-icon,#vca-wizard .vca-opt.vca-selected .vca-choice-icon{background-color:#fff;border-color:#9dc9ad}
.vca-icon-permanent{background-image:url("../img/icons/oxidation.png")}
.vca-icon-semi{background-image:url("../img/icons/semipermanent.png")}
.vca-icon-vegetal{background-image:url("../img/icons/vegetal.png")}
.vca-icon-coverage{background-image:url("../img/icons/cover-grey.png")}
.vca-icon-change{background-image:url("../img/icons/change-color.png")}
.vca-icon-tone-balance{background-image:url("../img/icons/neutralize.png")}
.vca-icon-lighten{background-image:url("../img/icons/lighten.png")}
.vca-icon-warm{background-image:url("../img/icons/warm.png")}
.vca-icon-cool{background-image:url("../img/icons/cool.png")}
.vca-icon-natural{background-image:url("../img/icons/natural.png")}
.vca-icon-any{background-image:url("../img/icons/any-finish.png")}

.vca-sw{padding:14px 10px}
.vca-swatch{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.18);flex:none}
.vca-swatch-11{background:#191414}
.vca-swatch-12{background:#33221a}
.vca-swatch-13{background:#55341f}
.vca-swatch-14{background:#7a5230}
.vca-swatch-15{background:#9c6f3f}
.vca-swatch-16{background:#bd8f55}
.vca-swatch-17{background:#d9b17a}
.vca-swatch-18{background:#efd9ac}
.vca-swatch-19{background:linear-gradient(135deg,#8e2f1f,#c25e2a)}
.vca-swatch-20{background:#8f9394}
.vca-swatch-21{background:#d8a84f}
.vca-swatch-22{background:#5e2b26}
.vca-swatch-23{background:linear-gradient(120deg,#e85d9c,#8e6cf0 55%,#4fc3d9)}
.vca-swatch-none{display:flex;align-items:center;justify-content:center;background:#fff;border:2px dashed #9e9587;color:#6f675c;font:700 18px Roboto,Arial,sans-serif;box-shadow:none}

.vca-lv{font:700 17px Roboto,Arial,sans-serif;color:#1f1f1f;padding:16px 8px;border-radius:14px}
#vca-wizard .vca-skip{appearance:none!important;display:block;margin:16px auto 0;background:transparent!important;background-image:none!important;border:0!important;border-radius:9px;cursor:pointer;font:600 13.5px/1.4 Roboto,Arial,sans-serif;color:#026b3c!important;text-shadow:none!important;text-decoration:underline;padding:12px;min-height:44px}
#vca-wizard .vca-skip:hover,#vca-wizard .vca-skip:focus-visible{background:#f3faf6!important;color:#03834a!important;outline:3px solid rgba(3,131,74,.16)!important;outline-offset:2px}
.vca-tone{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.15)}
.vca-tone-warm{background:linear-gradient(135deg,#d8a84f,#c2652a)}
.vca-tone-cool{background:linear-gradient(135deg,#9aa3a8,#6876c7)}
.vca-tone-nat{background:linear-gradient(135deg,#8a6a48,#b99669)}
.vca-tone-any{background:conic-gradient(#d8a84f,#c2652a,#8e2f1f,#7d88c9,#8f9394,#03834a,#d8a84f)}

.vca-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
#vca-wizard .vca-btn{appearance:none!important;display:inline-flex;align-items:center;justify-content:center;background-image:none!important;border:0;cursor:pointer;border-radius:10px;font:600 14px/1 Roboto,Arial,sans-serif;letter-spacing:.04em;padding:14px 24px;min-height:44px;text-shadow:none!important;transition:background .25s ease,color .25s ease;-webkit-tap-highlight-color:transparent}
#vca-wizard .vca-btn:focus-visible{outline:3px solid rgba(3,131,74,.22)!important;outline-offset:2px}
#vca-wizard .vca-btn-primary{background:#03834a!important;color:#fff!important;text-transform:uppercase;box-shadow:0 4px 14px rgba(3,131,74,.35)}
#vca-wizard .vca-btn-primary:hover,#vca-wizard .vca-btn-primary:focus-visible{background:#026b3c!important;color:#fff!important}
#vca-wizard .vca-btn-ghost{background:transparent!important;color:#026b3c!important;border:2px solid #cfc7b8!important}
#vca-wizard .vca-btn-ghost:hover,#vca-wizard .vca-btn-ghost:focus-visible{background:#f3faf6!important;border-color:#03834a!important;color:#03834a!important}
#vca-wizard .vca-btn-ghost:active{background:#e6f2e9!important;border-color:#03834a!important;color:#1e3a2a!important}

.vca-loading{text-align:center;padding:46px 0;color:#4f4f4f;font:400 15px Roboto,Arial,sans-serif}
.vca-spinner{display:inline-block;width:42px;height:42px;border-radius:50%;border:4px solid #ece6da;border-top-color:#03834a;animation:vcaSpin .8s linear infinite;margin-bottom:12px}
@keyframes vcaSpin{to{transform:rotate(360deg)}}
.vca-results-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:16px 0 14px}
.vca-results-heading .vca-q{text-align:left;margin:0 0 5px}
.vca-results-heading .vca-btn{flex:none}
.vca-summary{font:400 13.5px/1.6 Roboto,Arial,sans-serif;color:#5f5f5f;text-align:left;margin:0;max-width:760px}
.vca-criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.vca-criterion{background:#fff;border:1px solid #e5ddd0;border-radius:10px;padding:9px 11px;min-width:0}
.vca-criterion span{display:block;color:#76706a;font:600 10.5px/1.3 Roboto,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.vca-criterion strong{display:block;color:#26221f;font:600 13px/1.35 Roboto,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* La nota de contexto se separa del contenido mediante un filete horizontal
   coherente con el resto de la interfaz. */
.vca-context-note{font:400 12.5px/1.5 Roboto,Arial,sans-serif;color:#68625c;margin:0 0 12px;padding:10px 0 0;border-top:1px solid #e5ddd0}
.vca-notice,.vca-empty{font:500 13.5px/1.5 Roboto,Arial,sans-serif;color:#74571f;background:#fff7e8;border:1px solid #ead7ae;border-radius:10px;padding:11px 14px;text-align:center;margin:0 auto 12px;max-width:680px}
.vca-results{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.vca-card{background:#fff;border:1px solid #e5ddd0;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);transition:box-shadow .25s ease,transform .25s ease}
.vca-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.1);transform:translateY(-3px)}
.vca-card-imgwrap{background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14px;border-right:1px solid #eee8de;text-decoration:none}
.vca-card-imgwrap:focus-visible{outline:3px solid rgba(3,131,74,.22);outline-offset:-4px}
.vca-card-imgwrap img{width:100%;height:100%;object-fit:contain}
.vca-card-body{padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.vca-card-match{display:inline-flex;align-items:center;border-radius:99px;padding:5px 9px;background:#eaf6ee;color:#026b3c;font:700 10.5px/1 Roboto,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.vca-match-near_level,.vca-match-lighten_range,.vca-match-without_level,.vca-match-without_tone,.vca-match-family_only{background:#fff7e8;color:#74571f}
.vca-card-name{font:600 18px/1.35 "Roboto Slab",Roboto,serif;color:#1f1f1f;margin:0}
.vca-card-name a{color:inherit;text-decoration:none;display:inline-block;min-height:24px;padding:4px 0}/* El enlace de la tarjeta conserva un área de toque cómoda. */
.vca-card-name a:hover{text-decoration:underline;color:#026b3c}
.vca-card-variant,.vca-card-choice{font:500 12.5px/1.5 Roboto,Arial,sans-serif;margin:0;color:#57514b}
/* La nota de orientación usa una caja completa y un filete horizontal de
   acento para mantener su jerarquía visual. */
.vca-card-choice{background:#fff7e8;border:1px solid #ead7ae;border-top:2px solid #d8a84f;border-radius:8px;padding:8px 10px;width:100%;color:#6b5220}
.vca-card-price{font:700 20px Roboto,Arial,sans-serif;color:#1f1f1f;margin-top:auto}
.vca-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.vca-card-actions .vca-btn{min-width:150px;text-align:center;padding:12px 14px;font-size:12px;text-decoration:none}
.vca-error{text-align:center;padding:30px 0;font:400 14.5px Roboto,Arial,sans-serif;color:#922f2c}
.vca-error .vca-btn{margin-top:10px}
.vca-sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#vca-wizard .vca-opt:not(:disabled):active{background:#e6f2e9!important;border-color:#03834a!important;color:#1e3a2a!important;box-shadow:0 4px 14px rgba(3,131,74,.18)!important}
#vca-wizard .vca-btn:active{border-color:#03834a!important;box-shadow:0 4px 14px rgba(3,131,74,.18)!important}
#vca-wizard .vca-btn:hover{border-color:#03834a!important}
#vca-wizard .vca-btn-primary:hover,#vca-wizard .vca-btn-primary:active{background:#026b3c!important;border-color:#026b3c!important;color:#fff!important}
#vca-wizard .vca-opt:disabled,#vca-wizard .vca-opt:disabled:hover,#vca-wizard .vca-opt:disabled:active{background:#fff!important;border-color:#e6dfd3!important;color:#4f4f4f!important;box-shadow:none!important;transform:none!important}

@media (max-width:820px){
  .vca-grid-cards{grid-template-columns:repeat(2,1fr)}
  .vca-grid-swatches{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .vca-card{grid-template-columns:minmax(150px,210px) minmax(0,1fr)}
  .vca-card-body{padding:16px}
  .vca-criteria{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:576px){
  .vca-page{padding-bottom:40px}
  .vca-wizard{margin:0 10px;padding:16px 14px 20px;border-radius:16px}
  .vca-grid{gap:9px}
  .vca-grid-cards{grid-template-columns:1fr 1fr}
  .vca-opt{padding:13px 8px;border-radius:13px}
  .vca-grid-swatches{grid-template-columns:repeat(3,1fr)}
  .vca-sw{padding:12px 4px;font-size:12px}
  .vca-swatch,.vca-tone{width:40px;height:40px}
  .vca-choice-icon{width:50px;height:50px;border-radius:15px;background-size:31px 31px}
  .vca-grid-levels{grid-template-columns:repeat(4,1fr)}
  .vca-lv{padding:13px 4px}
  .vca-results-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .vca-results-heading .vca-btn{width:100%}
  .vca-criteria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vca-card{grid-template-columns:108px minmax(0,1fr)}
  .vca-card-imgwrap{padding:7px}
  .vca-card-body{padding:12px 11px;gap:7px}
  .vca-card-name{font-size:14px}
  .vca-card-price{font-size:17px}
  .vca-card-actions{flex-direction:column}
  .vca-card-actions,.vca-card-actions .vca-btn{width:100%;min-width:0}
  .vca-nav{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .vca-panel,.vca-spinner{animation:none}
  .vca-progress-bar,.vca-opt,.vca-btn,.vca-card{transition:none}
}

/* ===========================================================================
   Ajustes visuales finales para rejillas, tarjetas móviles y jerarquía del
   hero; se mantienen al final para conservar la cascada del componente.
=========================================================================== */

/* --- Rejillas de ancho igual ---------------------------------------------
   Ver la nota de arriba: `1fr` colapsaba al min-content de las palabras
   largas. Con minmax(0,1fr) las pistas vuelven a repartirse por igual y ya no
   se desborda la caja del asistente. */
@media (max-width:820px){
  .vca-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vca-grid-swatches{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
@media (max-width:576px){
  .vca-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vca-grid-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vca-grid-levels{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* Sin tarjeta huerfana: cuando el paso tiene un numero IMPAR de opciones
     (el paso 1 tiene tres tipos de coloracion), la ultima ocupaba media fila y
     dejaba un hueco muerto del mismo tamano a su derecha. Ahora cierra la fila
     completa. */
  .vca-grid-cards>.vca-opt:last-child:nth-child(odd){grid-column:1/-1}

  /* --- Tarjeta de resultado ---------------------------------------------
     Estaba rota: la columna de imagen es de 108px con aspect-ratio 1/1, pero
     la tarjeta crecia hasta ~370px de alto porque el aviso, el precio y el
     boton se partian en 7, 3 y 2 lineas. Resultado: 260px de columna vacia y
     un filete vertical huerfano que se cortaba a media tarjeta.
     Se apila: foto arriba (banda ancha, la foto se ve), texto debajo a todo
     el ancho, sin filete vertical. */
  .vca-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  /* 2.2/1 y no 16/9: la banda sigue mostrando el tono de verdad (~125px de
     alto frente a los 94px utiles de la columna anterior) pero apenas suma
     altura a la tarjeta. */
  .vca-card-imgwrap{aspect-ratio:2.2/1;width:100%;padding:8px;border-right:0;border-bottom:1px solid #eee8de}
  .vca-card-body{padding:14px 14px 16px;gap:9px}
  .vca-card-name{font-size:16px;line-height:1.3}
  .vca-card-price{font-size:19px}
  .vca-card-actions,.vca-card-actions .vca-btn{width:100%;min-width:0}
}

/* --- El hero deja de competir con la pregunta ----------------------------
   El titular de la pagina ("Encuentra tu tinte ideal") seguia a plena talla
   en los SEIS pasos y en el resultado, encima de "¿Que nivel de tono buscas?"
   o de "Nuestra recomendacion para ti": dos titulos disputandose la primera
   lectura y ~200px de scroll perdidos en cada paso en movil.
   En cuanto el asistente pasa del primer paso (su panel queda [hidden]) el
   hero se subordina: conserva el H1 -por landmark y por SEO- pero baja de
   tamano y suelta la entradilla, que ya ha cumplido su funcion.
   :has() es soporte base en todos los navegadores actuales; si faltara, el
   unico efecto es que todo sigue como hasta ahora. */
.vca-page:has(.vca-panel[data-vca-panel="ctype"][hidden]) .vca-hero{margin-bottom:14px}
.vca-page:has(.vca-panel[data-vca-panel="ctype"][hidden]) .vca-hero .vca-kicker{margin-bottom:6px}
.vca-page:has(.vca-panel[data-vca-panel="ctype"][hidden]) .vca-title{font-size:clamp(19px,2.2vw,25px)}
.vca-page:has(.vca-panel[data-vca-panel="ctype"][hidden]) .vca-sub{display:none}