/* ==========================================================
   COMPROBADOR DE IMÁGENES · ONLINE NAVARRA
   Estilos aislados con prefijo onimg-
========================================================== */

.onimg {
   --onimg-ink: #29274c;
   --onimg-text: #595568;
   --onimg-muted: #817c88;
   --onimg-pink: #c00087;
   --onimg-pink-light: #f451d9;
   --onimg-yellow: #f4d73f;
   --onimg-blue: #eaf5ff;
   --onimg-soft: #f7f4f7;
   --onimg-green: #18794e;
   --onimg-green-bg: #eef9f3;
   --onimg-warn: #8a5a00;
   --onimg-warn-bg: #fff8df;
   --onimg-border: #e9e5ea;
   color: var(--onimg-text);
   text-align: left;
}

.onimg *,
.onimg *::before,
.onimg *::after { box-sizing: border-box; }

.onimg-wrap {
   width: min(1180px, 88%);
   margin: 0 auto;
}

/* HERO */
.onimg-hero {
   position: relative;
   margin: 18px auto 0;
   width: min(1500px, 94%);
   background: var(--onimg-yellow);
   overflow: hidden;
   border-radius: 28px;
}

.onimg-hero::after {
   content: "";
   position: absolute;
   right: -100px;
   bottom: -180px;
   width: 520px;
   height: 520px;
   border: 110px solid rgba(255,255,255,.25);
   border-radius: 50%;
}

.onimg-hero__grid {
   position: relative;
   z-index: 1;
   min-height: 520px;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 70px;
   align-items: center;
   padding: 70px 0;
}

.onimg-hero__texto { max-width: 650px; }

.onimg-hero .comp-kicker { color: var(--onimg-pink); }

.onimg-hero h1 {
   margin: 0 0 26px;
   color: var(--onimg-ink);
   font-size: clamp(48px, 5vw, 76px);
   line-height: 1.02;
   font-weight: 800;
   letter-spacing: -2.2px;
}

.onimg-hero__texto > p:not(.comp-kicker):not(.onimg-privacidad) {
   max-width: 620px;
   margin: 0;
   color: #454156;
   font-size: clamp(18px, 1.5vw, 21px);
   line-height: 1.6;
}

.onimg-hero__texto strong { color: var(--onimg-ink); }

.onimg-privacidad {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   margin: 28px 0 0;
   max-width: 590px;
   color: #5d5863;
   font-size: 14px;
   line-height: 1.45;
}

.onimg-privacidad span {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--onimg-ink);
   color: #fff;
   font-size: 12px;
   font-weight: 800;
}

.onimg-hero__visual {
   display: flex;
   justify-content: center;
   align-items: center;
}

.onimg-visual {
   position: relative;
   width: min(440px, 100%);
   padding: 20px 20px 60px;
   background: #fff;
   box-shadow: 0 25px 70px rgba(41,39,76,.14);
   transform: rotate(2deg);
}

.onimg-visual__foto svg { display: block; width: 100%; height: auto; }

.onimg-visual__dato {
   position: absolute;
   display: flex;
   flex-direction: column;
   min-width: 160px;
   padding: 13px 16px;
   background: #fff;
   box-shadow: 0 12px 30px rgba(41,39,76,.14);
}

.onimg-visual__dato span {
   color: var(--onimg-ink);
   font-size: 17px;
   font-weight: 800;
}

.onimg-visual__dato small {
   margin-top: 2px;
   color: var(--onimg-muted);
   font-size: 11px;
}

.onimg-visual__dato--peso { left: -38px; bottom: 30px; }
.onimg-visual__dato--medida { right: -35px; top: 55px; }

.onimg-visual__formato {
   position: absolute;
   right: 28px;
   bottom: 18px;
   color: var(--onimg-pink);
   font-size: 18px;
   font-weight: 800;
}

/* HERRAMIENTA */
.onimg-herramienta { padding: 110px 0 95px; }

.onimg-section-head {
   max-width: 760px;
   margin: 0 auto 42px;
   text-align: center;
}

.onimg-section-head h2 {
   margin: 0 0 12px;
   color: var(--onimg-ink);
   font-size: clamp(34px, 4vw, 48px);
   line-height: 1.1;
   font-weight: 750;
   letter-spacing: -1px;
}

.onimg-section-head > p:not(.comp-kicker) {
   margin: 0;
   color: var(--onimg-muted);
   font-size: 18px;
   line-height: 1.55;
}

.onimg-usos {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 12px;
   max-width: 950px;
   margin: 0 auto 24px;
}

.onimg-uso { cursor: pointer; }

.onimg-uso input {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.onimg-uso span {
   min-height: 82px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 14px 12px;
   border: 1px solid var(--onimg-border);
   background: #fff;
   text-align: center;
   transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.onimg-uso strong {
   color: var(--onimg-ink);
   font-size: 15px;
   font-weight: 750;
}

.onimg-uso small {
   margin-top: 4px;
   color: var(--onimg-muted);
   font-size: 12px;
}

.onimg-uso input:checked + span {
   border-color: var(--onimg-pink);
   background: #fff8fd;
   box-shadow: inset 0 -3px 0 var(--onimg-pink);
}

.onimg-uso:hover span { transform: translateY(-2px); }

.onimg-dropzone {
   max-width: 950px;
   min-height: 340px;
   margin: 0 auto;
   padding: 55px 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 2px dashed #d9d2da;
   background: #faf9fa;
   text-align: center;
   cursor: pointer;
   transition: border-color .2s ease, background .2s ease;
}

.onimg-dropzone:hover,
.onimg-dropzone.is-dragover {
   border-color: var(--onimg-pink);
   background: #fff8fd;
}

.onimg-dropzone:focus-visible {
   outline: 3px solid rgba(192,0,135,.18);
   outline-offset: 4px;
}

.onimg-dropzone__icono {
   width: 62px;
   height: 62px;
   margin-bottom: 18px;
   color: var(--onimg-pink);
}

.onimg-dropzone__icono svg { width: 100%; }

.onimg-dropzone h3 {
   margin: 0 0 8px;
   color: var(--onimg-ink);
   font-size: 25px;
   font-weight: 750;
}

.onimg-dropzone p {
   margin: 0 0 13px;
   color: var(--onimg-muted);
   font-size: 16px;
}

.onimg-dropzone p span {
   color: var(--onimg-pink);
   font-weight: 700;
}

.onimg-dropzone small {
   color: #a09aa3;
   font-size: 12px;
   letter-spacing: .4px;
}

.onimg-error {
   max-width: 950px;
   margin: 16px auto 0;
   padding: 15px 18px;
   border-left: 4px solid var(--onimg-pink);
   background: #fff2fa;
   color: var(--onimg-ink);
   font-size: 15px;
}

/* RESULTADOS */
.onimg-resultados {
   max-width: 1050px;
   margin: 55px auto 0;
   padding-top: 55px;
   border-top: 1px solid var(--onimg-border);
}

.onimg-resultado-cabecera {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 30px;
   margin-bottom: 34px;
}

.onimg-resultado-cabecera h2 {
   margin: 0 0 8px;
   color: var(--onimg-ink);
   font-size: clamp(30px, 3.2vw, 42px);
   line-height: 1.1;
   font-weight: 750;
}

.onimg-resultado-cabecera > div > p:last-child {
   margin: 0;
   color: var(--onimg-muted);
   font-size: 16px;
}

.onimg-boton-secundario {
   flex: 0 0 auto;
   padding: 11px 18px;
   border: 1px solid #cbc4cd;
   background: #fff;
   color: var(--onimg-ink);
   font: 700 14px "Manrope", sans-serif;
   cursor: pointer;
}

.onimg-boton-secundario:hover { border-color: var(--onimg-ink); }

.onimg-resultado-grid {
   display: grid;
   grid-template-columns: .78fr 1.22fr;
   gap: 42px;
   align-items: start;
}

.onimg-preview__imagen {
   min-height: 320px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 18px;
   background:
      linear-gradient(45deg, #f1eef2 25%, transparent 25%),
      linear-gradient(-45deg, #f1eef2 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #f1eef2 75%),
      linear-gradient(-45deg, transparent 75%, #f1eef2 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.onimg-preview__imagen img {
   display: block;
   max-width: 100%;
   max-height: 420px;
   object-fit: contain;
}

.onimg-preview__nombre {
   margin: 10px 0 0;
   overflow-wrap: anywhere;
   color: var(--onimg-muted);
   font-size: 12px;
}

.onimg-datos {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   border-top: 1px solid var(--onimg-border);
   border-left: 1px solid var(--onimg-border);
}

.onimg-datos > div {
   min-height: 92px;
   padding: 19px 20px;
   border-right: 1px solid var(--onimg-border);
   border-bottom: 1px solid var(--onimg-border);
}

.onimg-datos span {
   display: block;
   margin-bottom: 7px;
   color: #99939d;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1.2px;
}

.onimg-datos strong {
   color: var(--onimg-ink);
   font-size: 19px;
   font-weight: 750;
}

.onimg-diagnostico { margin-top: 24px; }

.onimg-check {
   display: grid;
   grid-template-columns: 36px 1fr;
   gap: 13px;
   padding: 18px 0;
   border-bottom: 1px solid var(--onimg-border);
}

.onimg-check:first-child { border-top: 1px solid var(--onimg-border); }

.onimg-check__icono {
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 14px;
   font-weight: 900;
}

.onimg-check--ok .onimg-check__icono {
   background: var(--onimg-green-bg);
   color: var(--onimg-green);
}

.onimg-check--warn .onimg-check__icono {
   background: var(--onimg-warn-bg);
   color: var(--onimg-warn);
}

.onimg-check h3 {
   margin: 1px 0 4px;
   color: var(--onimg-ink);
   font-size: 17px;
   font-weight: 750;
}

.onimg-check p {
   margin: 0;
   color: var(--onimg-text);
   font-size: 14px;
   line-height: 1.55;
}

.onimg-recomendacion {
   margin-top: 35px;
   padding: 28px 32px;
   border-left: 5px solid var(--onimg-pink);
   background: var(--onimg-soft);
}

.onimg-recomendacion span {
   display: block;
   margin-bottom: 8px;
   color: var(--onimg-pink);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1.4px;
}

.onimg-recomendacion p {
   margin: 0;
   color: var(--onimg-ink);
   font-size: 17px;
   line-height: 1.6;
}

.onimg-optimizador,
.onimg-descarga {
   margin-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 35px;
   padding: 30px 32px;
   background: var(--onimg-blue);
}

.onimg-optimizador h3 {
   margin: 0 0 8px;
   color: var(--onimg-ink);
   font-size: 22px;
   font-weight: 750;
}

.onimg-optimizador p:not(.comp-kicker) {
   max-width: 650px;
   margin: 0;
   color: var(--onimg-text);
   font-size: 14px;
   line-height: 1.55;
}

.onimg-boton {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 22px;
   border: 0;
   border-radius: 50px;
   background: var(--onimg-pink);
   color: #fff;
   font: 750 15px "Manrope", sans-serif;
   text-decoration: none;
   cursor: pointer;
   transition: background .2s ease, transform .2s ease;
}

.onimg-boton:hover {
   background: var(--onimg-ink);
   color: #fff;
   transform: translateY(-1px);
}

.onimg-descarga {
   background: var(--onimg-green-bg);
}

.onimg-descarga span {
   display: block;
   margin-bottom: 5px;
   color: var(--onimg-green);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1.2px;
}

.onimg-descarga strong {
   color: var(--onimg-ink);
   display: inline;
   font-size: 17px;
   font-weight: 800;
}

.onimg-descarga small {
   display: block;
   margin-top: 5px;
   color: #817c88;
   font-size: 13px;
   font-weight: 500;
}
/* EXPLICACIÓN */
.onimg-explica {
   padding: 95px 0;
   background: #f7f5f7;
}

.onimg-explica__grid {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 90px;
   align-items: start;
}

.onimg-explica h2 {
   max-width: 460px;
   margin: 0;
   color: var(--onimg-ink);
   font-size: clamp(38px, 4.2vw, 56px);
   line-height: 1.08;
   font-weight: 750;
   letter-spacing: -1.2px;
}

.onimg-explica__texto p {
   margin: 0 0 20px;
   color: var(--onimg-text);
   font-size: 17px;
   line-height: 1.75;
}

.onimg-explica__texto strong { color: var(--onimg-ink); }

.onimg-nota { padding: 38px 0 75px; }

.onimg-nota p {
   max-width: 900px;
   margin: 0 auto;
   color: var(--onimg-muted);
   font-size: 13px;
   line-height: 1.6;
   text-align: center;
}

.onimg-nota strong { color: var(--onimg-ink); }

/* RESPONSIVE */
@media (max-width: 900px) {
   .onimg-hero { width: calc(100% - 24px); }
   .onimg-hero__grid {
      grid-template-columns: 1fr;
      gap: 45px;
      min-height: 0;
      padding: 60px 0 75px;
   }
   .onimg-hero__texto { max-width: 700px; }
   .onimg-hero__visual { padding: 0 30px; }
   .onimg-visual { width: min(420px, 85%); }
   .onimg-usos { grid-template-columns: repeat(3, 1fr); }
   .onimg-resultado-grid { grid-template-columns: 1fr; }
   .onimg-preview__imagen { min-height: 260px; }
   .onimg-explica__grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 650px) {
   .onimg-wrap { width: 90%; }
   .onimg-hero { border-radius: 20px; }
   .onimg-hero__grid { padding: 48px 0 60px; }
   .onimg-hero h1 {
      font-size: clamp(40px, 12vw, 54px);
      letter-spacing: -1.4px;
   }
   .onimg-hero__visual { padding: 0 10px; }
   .onimg-visual { width: 88%; padding: 12px 12px 45px; }
   .onimg-visual__dato { min-width: 130px; padding: 9px 11px; }
   .onimg-visual__dato span { font-size: 14px; }
   .onimg-visual__dato--peso { left: -18px; bottom: 20px; }
   .onimg-visual__dato--medida { right: -18px; top: 28px; }
   .onimg-herramienta { padding: 75px 0 70px; }
   .onimg-section-head { margin-bottom: 30px; }
   .onimg-usos {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
   }
   .onimg-uso span { min-height: 74px; }
   .onimg-dropzone { min-height: 280px; padding: 40px 20px; }
   .onimg-resultados { margin-top: 40px; padding-top: 40px; }
   .onimg-resultado-cabecera {
      display: block;
   }
   .onimg-boton-secundario { margin-top: 18px; }
   .onimg-datos { grid-template-columns: 1fr 1fr; }
   .onimg-datos > div { min-height: 84px; padding: 16px 14px; }
   .onimg-datos strong { font-size: 16px; }
   .onimg-recomendacion { padding: 24px 22px; }
   .onimg-optimizador,
   .onimg-descarga {
      display: block;
      padding: 25px 22px;
   }
   .onimg-optimizador .onimg-boton,
   .onimg-descarga .onimg-boton {
      width: 100%;
      margin-top: 20px;
   }
   .onimg-explica { padding: 70px 0; }
}


/* Resultado conversión WebP */
#onimg-descargar::before {
 content: "↓"; margin-right: 9px; font-size: 18px; font-weight: 800; line-height: 1;
}
.onimg-descarga--sin-mejora { background: var(--onimg-warn-bg); }
.onimg-descarga--sin-mejora span { color: var(--onimg-warn); }

/* Oculta correctamente los elementos controlados con el atributo hidden.
   Necesario porque algunos bloques usan display:flex en sus estilos base. */
.onimg [hidden] {
   display: none !important;
}