* {
  --color-interfaz: #1c1c1b;
  --fuente-interfaz: Montserrat;
}

html {
  /* width:100%; */
}

.hcc-wrap p,.hcc-wrap button,.hcc-wrap label, #hcc-overlay-trigger {
  font-family:var(--fuente-interfaz)!important;
}
.hcc-wrap{
  width: 100%;
  height: 100%;
}
.hcc-wrap p,.hcc-wrap h1,.hcc-wrap h2,.hcc-wrap h3,.hcc-wrap h4,.hcc-wrap h5,.hcc-wrap h6 {
  color:var(--color-interfaz);
}
#loading {
  position:absolute;
  z-index:100;
  top:0;
  left:0;
  width:100%;
  background:#ffffff3d;
  height:100%;  
}
.loading-spinner {
  position:absolute;
  z-index:100;
  top:39%;
  left:50%;
  transform:translate(-50%,-50%);
  width: 180px;
}
.spinner {
  border:4px solid #f3f3f3;
  border-radius:50%;
  width:40px;
  height:40px;
  animation:spin 1s linear infinite;
  margin:0 auto 20px;
}
@keyframes spin {
  0% {
    transform:rotate(0);
  }
  to {
    transform:rotate(360deg);
  }
}
#wpadminbar,#moove_gdpr_save_popup_settings_button {
  /*display:none;*/
}
.d-none {
  display:none!important;
}
.image-canvas {
  image-rendering:auto;
  image-rendering:optimizeQuality;
  image-rendering:crisp-edges;
  image-rendering:-webkit-optimize-contrast;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%);
  height:100%;
  width:auto;
  object-fit:cover;
}
#result {
  z-index:11;
}
#cont-general {
  /* max-width:100dvw;*/
  width:100svw; 
  height:92svh;
  background-color:var(--bg-general, rgba(0,0,0,.5));
  position:absolute;
  top:0;
  left:0;
  display:flex;
  justify-content:center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:95%
}
#cont-pantalla {
  width:465px;
  max-width:100%;
  max-height:950px;
  height:92svh;
  position:relative;
  background-color:#f3f3f3;
  overflow:hidden;
  border-radius:20px;
}
@media only screen and (max-width: 600px) { 
  #cont-general {
    height:100svh;
    width: 100%;
    top: 0;
    transform: translate(-50%, 0%);
  }
  #cont-pantalla {
    width:100%;
    max-width:100%;
    max-height:950px;
    height:100%;
    position:relative;
    background-color:#f3f3f3;
    overflow:hidden;
  }
}
#cont-pantalla-inicial {
  width:90%;
  position:absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:100;
  >div {
    display:flex;
    justify-content:center;
    flex-direction:column;
  }
}
#cont-logo {
  position:absolute;
  top:0;
  max-width:30%;
  left:50%;
  transform:translate(-50%);
  z-index:100;
  padding: 7px 20px 14px;
  & img {
    max-width:100%;
  }
}
#cont-imgs {
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  background-color:#fff;
}
div:has(>#cont-imgs) {
  height:100%;
}
#cont-img-info {
  position:absolute;
  bottom:129px;
  width:100%;
  height:115px;
  z-index:14;
  display:flex;
  flex-direction:row;
  background-color:#fff;
  gap:20px;
  justify-content:end;
  border-radius:10px 10px 0 0;
  box-shadow:0 5px 15px 0 var(--color-interfaz);
  overflow:visible;
  transition:height .35s ease;
  >div {
    height:100%;
    width:100%;
    position:relative;
  }
  & img {
    position:absolute;
    width:30%;
    bottom:0;
    max-width:30%;
    left:10px;
  }
  #textos-info {
    position:absolute;
    padding:10px 25px;
    display:flex;
    flex-direction:column;
    right:0;
    width:70%;
    & p {
      margin-bottom:7px;
      line-height:1.2;
      &#titulo-info {
        font-weight:800;
        font-size:18px;
        line-height:1;
        margin-top:10px;
      }
      &#excerpto-info,&#texto-info {
        font-weight:400;
        font-size:14px;
      }
    }
    #btn-leer-mas {
      align-self:flex-start;
      margin:-4px 0 7px;
      padding:0;
      border:none;
      background:none;
      color:var(--color-interfaz);
      font-size:13px;
      font-weight:800;
      text-decoration:underline;
      cursor:pointer;
    }
  }
}
#cont-btns {
  position:absolute;
  z-index:15;
  width:100%;
  top:0;
}
#cont-btns-arriba-izq {
  position:absolute;
  top:15px;
  left:10px;
}
#cont-btns-arriba-drcha {
  position:absolute;
  top:75px;
  left:10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
#cont-btns-abajo-izq {
  position:absolute;
  bottom:50px;
  left:10px;
}
#cont-btns-abajo-drcha {
  position:absolute;
  bottom:50px;
  right:10px;
}
#selector-modelos {
  position:absolute;
  width:100%;
  height:100%;
  background-color:#fff;
  z-index:15;
  & p {
    position:absolute;
    top:6%;
    font-size:30px;
    font-weight:800;
    width:100%;
    text-align:center;
  }
  > div{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  >div>div {
    position:absolute;
    top:18%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:0 40px;
    & img {
      width:100%;
      height:auto;
      aspect-ratio:13 / 23;
      max-height: 34dvh;
      object-fit:cover;
      cursor:pointer;
      &:hover {
        border:3px solid var(--color-interfaz);
      }
    }
  }
}
#cont-gamas {
  position:absolute;
  bottom:0;
  height:130px;
  width:100%;
  z-index:14;
  display:flex;
  background-color:#fff;
  padding:5px 10px 0;
  align-items:center;
  justify-content:space-around;
  .cont-gama {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:64px;
    height:90px;
    cursor:pointer;
    &.active {
      .cont-img-gama {
        border:3px solid var(--color-interfaz);
        border-radius:50px;
      }
      & img {
        opacity:1!important;
      }
      & p{
        font-weight: 800;
      }
    }
    &.inactive img {
      opacity:1;
    }
  }
  .cont-img-gama {
    border:3px solid white;
    border-radius:50px;
  }
  & img {
    vertical-align:top;
    max-width:100%;
    height:58px;
    width:58px;
    border-radius:50px;
    border:1px solid white;
    
  }
  & :not(.cont-gama-volver svg){
    min-width:58px;
  }
  .titulo-gama {
    font-size:13px;
    font-weight:600;
    margin-bottom:0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    margin-top: 5px;
  }
}
.cont-gama-hijos {
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:10px;
  background-color:#fff;
  padding:0 10px;
  overflow-x: auto;
}
.cont-gama-volver {
  cursor:pointer;
}
#cont-gamas .cont-gama-volver .cont-img-gama {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#f2f2f2;
}
#cont-gamas .cont-gama-volver svg {
  min-width: 9px;
  min-height: 9px;
  max-width: 44px;
  max-height: 44px;
  width: 44px;
  height: 44px;
  margin-left: -4px;
  stroke-width: 6px;
}
#cont-colores {
  position:absolute;
  top:18svh;
  right:10px;
  bottom:400px;
  display:flex;
  flex-direction:column;
  z-index:13;
  gap:6px;
  cursor:pointer;
  align-items:end;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  .cont-color {
    border-radius:50px;
    width:55px;
    height:55px;
    min-height:55px;
    aspect-ratio:1/1;
    border:3px solid transparent;
    overflow:hidden;
    box-shadow:inset 0 0 0 2px #fff;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    align-items:center;
    justify-content:center;
    & img {
        width:45px;
        height:45px;
        border-radius:50px;
    }
    &.active {
      border:3px solid var(--color-interfaz);
    }
  }
}
#cont-colores::-webkit-scrollbar {
  display:none;
}
.cont-colores-arrow {
  position:absolute;
  right:25px;
  z-index:16;
  width:36px;
  height:36px;
  padding:0;
  border:none;
  border-radius:50%;
  background:#ffffffe6;
  box-shadow:0 1px 4px #00000040;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cont-colores-arrow:before {
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid var(--color-interfaz);
  border-bottom:2px solid var(--color-interfaz);
}
.cont-colores-arrow.up:before {
  transform:translateY(1.5px) rotate(-135deg);
}
.cont-colores-arrow.down:before {
  transform:translateY(-1.5px) rotate(45deg);
}
.btns {
  cursor:pointer;
  & button,img {
    cursor:pointer;
  }
  &.inicio {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:7px;
    >button {
      width:100%;
      color:#fff;
      background-color:var(--color-interfaz);
      font-size:20px;
      border:3px solid var(--color-interfaz);
      border-radius:45px;
      padding:7px;
      &:disabled {
        background-color:color-mix(in srgb,var(--color-interfaz) 41%,transparent);
        border:3px solid color-mix(in srgb,var(--color-interfaz) 2%,transparent);
        &:hover {
          background-color:color-mix(in srgb,var(--color-interfaz) 41%,transparent);
          border:3px solid color-mix(in srgb,var(--color-interfaz) 2%,transparent);
          color:#fff;
        }
      }
      &:hover {
        background-color:transparent;
        color:var(--color-interfaz);
      }
    }
  }
  &.btn-redondo {
    position:relative;
    background-color:#fff;
    border:3px solid #fff;
    border-radius:100px;
    width:50px;
    height:50px;
    &:hover,&.active {
      border:3px solid var(--color-interfaz);
    }
    & img {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      max-width:25px;
      max-height:25px;
    }
  }
}
#hacer-foto {
  position:absolute;
  width:100%;
  height:100%;
  z-index:100;
  background-color:#fff;
}
#video {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
#cambiar-camara{
  z-index:101;
  position:absolute;
  width:40px;
  height:40px;
  top:85%;
  left:10%;
  transform:translate(-50%);
  border:2px solid tramsparent;  
  border-radius: 50px;
  &:hover {
    border:2px solid var(--color-interfaz);
  }
}
#capturar-imagen {  
  z-index:101;
  position:absolute;
  width:70px;
  height:70px;
  top:87%;
  left:50%;
  transform:translate(-50%);
  border:6px solid var(--color-interfaz);
  &:hover {
    border:9px solid #bebebe;
  }
}
#hacer-foto .btn-volver {
  position:absolute!important;
  top:50px;
  left:10px;
  & svg{
    margin-left: -5px;
    max-height: 90%;
  }
}
.comparison-container {
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:800px;
  margin:0 auto;
}
#cont-img-edit,#cont-img-oc {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#cont-img-oc {
  z-index:10;
}
#cont-img-oc.comparar {
  z-index:13;
  clip-path:inset(0 50% 0 0);
}
.slider-handle {
  position:absolute;
  top:0;
  left:50%;
  width:40px;
  height:100%;
  background:transparent;
  transform:translate(-50%);
  z-index:13;
  cursor:ew-resize;
}
#antes,#despues {
  position:absolute;
  top:50%;
  left:50%;
  width:100px;
  & img {
    width:20px;
    height:auto;
  }
  & p {
    position:absolute;
    top:-40%;
    color:var(--color-interfaz);
    font-size:18px;
    font-weight:900;
  }
}
svg{
  stroke:var(--color-interfaz);
  max-height:33px;
  max-width:33px;
  stroke-width:2px;
  fill:transparent;
  min-width:31px;
}
.btn-camara svg{
  margin-top: -2px
}
#antes>p {
  transform:translate(-95%,445%) scaleX(.7);
}
#antes>svg {
  transform:translate(-122%);
  stroke-width:6px;
  max-width: 50px;
  max-height: 50px;
  width: 50px;
  height: 50px;
}
#despues>p {
  transform:translate(-9%,445%) scaleX(.7);
}
#despues>svg {
  transform:translate(25%) scaleX(-1);
  stroke-width:6px;
  max-width: 50px;
  max-height: 50px;
  width: 50px;
  height: 50px;
}
.btns svg {
  position:absolute;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  stroke-width: 6px;
}

/* Política de privacidad desplegable (ver M15) */
.hcc-politica-toggle {
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
}
.hcc-politica-texto {
  max-height:100%;
  overflow-y:auto;
  font-size:.85em;
  line-height:1.5;
  text-align:left;
  white-space:normal;
  overflow-y: scroll;
}
div:has(> #cont-politica){
  height: 250px;
  margin-top: 30px;
  background-color: #fff;
  padding: 20px 25px;
  border-radius: 20px;
}
div:has(> #cont-politica.d-none){
  background-color: transparent;
}

/* Pantalla de carga opaca: foto + cálculo de la máscara (ver ui.js → prepararImagen) */
#hcc-preparando {
  position:absolute;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 30px;
  background-color:#fff;
  text-align:center;
}
.hcc-preparando-cargando,
.hcc-preparando-error {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
}
.hcc-preparando-cargando img {
  max-width:120px;
  height:auto;
}
#hcc-preparando p {
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.3;
}
.hcc-preparando-btns {
  display:flex;
  flex-direction:column;
  gap:7px;
  width:100%;
  > button {
    width:100%;
    padding:7px;
    border:3px solid var(--color-interfaz);
    border-radius:45px;
    background-color:var(--color-interfaz);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    &:hover {
      background-color:transparent;
      color:var(--color-interfaz);
    }
  }
  > .hcc-btn-cambiar-foto {
    background-color:transparent;
    color:var(--color-interfaz);
    &:hover {
      background-color:var(--color-interfaz);
      color:#fff;
    }
  }
}

/* Recomendaciones antes de Hacer foto / Subir foto (ver ui.js → mostrarRecomendaciones) */
#hcc-recomendaciones {
  position:absolute;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:15px;
  padding:60px 25px 30px;
  background-color:#fff;
}
#hcc-recomendaciones .btn-volver {
  position:absolute!important;
  top:50px;
  left:10px;
  & svg {
    margin-left:-5px;
    max-height:90%;
  }
}
#hcc-recomendaciones .hcc-recomendaciones-titulo {
  margin:0;
  padding:0 50px;
  font-size:24px;
  font-weight:800;
  line-height:1.15;
  text-align:center;
}
#hcc-recomendaciones .hcc-recomendaciones-intro {
  margin:0;
  font-size:15px;
  line-height:1.4;
  text-align:center;
}
.hcc-recomendaciones-lista {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  overflow-y:auto;
  margin-top: 25px;
}
.cont-recomendacion-img{
  max-width: 140px;
  max-height: 140px;
  overflow: hidden;
  border-radius: 12px;
  position: relative;

}
.cont-recomendacion-img:after{
  content:"";
  width: 7px;
  height: 150px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: var(--color-interfaz);
  top: -2%; 
  left: 48%;
  border-radius: 50px;
}
.hcc-recomendacion {
  display:grid;
  grid-template-columns:38% 1fr;
  gap:10px;
  align-items:center;
  margin:0;
  &.sin-imagen,
  &.sin-texto {
    grid-template-columns:1fr;
  }
  & img {
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
  }
  & p {
    margin:0;
    font-size:15px;
    line-height:1.4;
  }
}
.hcc-recomendaciones-continuar {
  width:100%;
  padding:7px;
  border:3px solid var(--color-interfaz);
  border-radius:45px;
  background-color:var(--color-interfaz);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  &:hover {
    background-color:transparent;
    color:var(--color-interfaz);
  }
}

/* Aviso sobre la pantalla inicial (ver ui.js → volverAInicioSinCamara) */
.hcc-aviso {
  position:absolute;
  top:30px;
  left:4%;
  width:92%;
  z-index:200;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  border-radius:10px;
  background-color:#d63638;
  box-shadow:0 4px 12px #00000040;
}
.hcc-aviso p,
.hcc-wrap .hcc-aviso p {
  flex:1;
  margin:0;
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
}
.hcc-aviso-cerrar {
  flex:none;
  width:28px;
  height:28px;
  margin:-4px -4px 0 0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  &:hover,
  &:focus-visible {
    background-color:#ffffff33;
  }
}
/* Ficha con altura ajustada a su contenido */
.hcc-wrap #cont-img-info {
    height: auto;
    min-height: 115px;
    transition: none;
}

/* El contenedor interior también debe crecer */
.hcc-wrap #cont-img-info > div {
    height: auto;
    min-height: 115px;
}

/* El texto participa en el cálculo de altura */
.hcc-wrap #cont-img-info #textos-info {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 70%;
    height: auto;
    min-height: 115px;
    margin-left: auto;

    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* Mantener el botón con su tamaño natural */
.hcc-wrap #cont-img-info #btn-leer-mas {
    flex-shrink: 0;
}