/* ============================================================
   instalador.cl — estilos (versión 20260915c)
   Escritorio y celular diseñados por separado, no adaptados.
   ============================================================ */

:root{
  --naranja:#F26A1B;
  --naranja-oscuro:#CE530C;
  --ambar:#F2A93B;
  --turquesa:#3FA7A2;
  --celeste:#6FA9E4;
  --azul:#12294A;
  --azul-hondo:#0B1B30;
  --azul-claro:#1D3B63;
  --texto:#171B20;
  --gris:#5F6B78;
  --gris-suave:#8A95A1;
  --linea:#E3E7EC;
  --papel:#FFFFFF;
  --papel-gris:#F4F6F8;
  --ancho:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--texto);background:var(--papel);line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.018em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}

.boton{
  display:inline-block;background:var(--naranja);color:#fff;
  font-weight:700;padding:14px 26px;border-radius:8px;
}
.boton:hover{background:var(--naranja-oscuro)}
.boton-chico{padding:9px 16px;font-size:14px}

/* ---------------- barra ---------------- */
.barra{border-bottom:1px solid var(--linea);background:var(--papel);position:sticky;top:0;z-index:40}
.barra-caja{
  max-width:var(--ancho);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:20px;
}
.marca{line-height:1.05;flex:1}
.marca-nombre{display:block;font-weight:800;font-size:25px;color:var(--azul);letter-spacing:-.035em}
.marca-punto{color:var(--naranja)}
.marca-bajada{display:block;font-size:10px;color:var(--gris-suave);margin-top:2px}
.barra-menu{display:none;align-items:center;gap:26px}
.barra-menu a{font-size:15px;font-weight:600;color:var(--azul)}
.barra-menu a:hover{color:var(--naranja)}
.barra-menu .boton:hover{color:#fff}
.barra-boton{width:42px;height:42px;display:grid;place-items:center;color:var(--azul);background:none;border:0}
.barra-boton svg{width:26px;height:26px}
.menu{border-bottom:1px solid var(--linea);background:var(--papel-gris);padding:4px 20px 10px}
.menu a{display:block;padding:11px 0;font-weight:600;color:var(--azul);border-bottom:1px solid var(--linea)}
.menu a:last-child{border-bottom:0}

/* ---------------- portada ---------------- */
.portada{
  background-color:var(--azul-hondo);
  background-image:
    radial-gradient(1100px 460px at 82% 8%,rgba(242,106,27,.20),transparent 62%),
    radial-gradient(760px 420px at 6% 96%,rgba(63,167,162,.16),transparent 60%),
    linear-gradient(168deg,#132E52 0%,#0B1B30 74%);
  background-size:cover;background-position:center;
  color:#fff;padding:34px 20px 38px;
}
.portada-confoto{background-size:cover;background-position:center}
.portada-caja{max-width:var(--ancho);margin:0 auto}
.portada h1{font-size:41px;font-weight:800}
.portada h1 em{display:block;font-style:normal;color:var(--naranja)}
.portada-bajada{margin:14px 0 0;font-size:17px;color:#CBD7E4;max-width:40ch}

.buscador{
  display:flex;align-items:center;gap:8px;margin-top:24px;
  background:#fff;border-radius:10px;padding:6px 6px 6px 14px;
  box-shadow:0 18px 40px rgba(3,12,25,.42);
}
.buscador-lupa{width:22px;height:22px;flex:none;color:var(--azul)}
.buscador input{flex:1;min-width:0;border:0;padding:13px 4px;font:inherit;font-size:16px;background:none;color:var(--texto)}
.buscador input::placeholder{color:#97A2AE}
.buscador input:focus{outline:none}
.buscador button{flex:none;border:0;border-radius:7px;background:var(--naranja);color:#fff;font-weight:700;font-size:15px;padding:13px 24px}
.buscador button:hover{background:var(--naranja-oscuro)}

.ejemplos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:#93A2B3}
.ejemplos button{
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:#E7EEF6;border-radius:7px;padding:7px 13px;font-size:13px;
}
.ejemplos button:hover{background:rgba(255,255,255,.16)}

.resultados{margin-top:16px;background:#fff;color:var(--texto);border-radius:10px;padding:6px;box-shadow:0 18px 40px rgba(3,12,25,.4)}
.resultados a{display:flex;align-items:center;gap:12px;padding:12px 12px;border-bottom:1px solid var(--linea)}
.resultados a:last-child{border-bottom:0}
.resultados a:hover{background:var(--papel-gris)}
.resultados b{font-weight:700;color:var(--azul)}
.resultados small{display:block;color:var(--gris);font-size:12.5px}
.resultados .sin{padding:14px 12px;color:var(--gris);font-size:14px;margin:0}

.sellos{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:13px;color:#A9B8C8}
.sellos li{position:relative;padding-left:17px}
.sellos li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:var(--naranja);border-radius:2px;transform:rotate(45deg)}

/* panel cómo funciona */
.panel{
  margin-top:30px;padding:24px 22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
}
.panel h2{font-size:15px;font-weight:600;color:#9FB2C6;margin-bottom:18px}
.panel li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.panel li:last-of-type{border-bottom:0}
.paso-n{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--naranja);color:#fff;font-weight:800;font-size:15px;
}
.panel b{display:block;font-size:16px;color:#fff;font-weight:700}
.panel p{margin:3px 0 0;font-size:14px;color:#A9B8C8;line-height:1.45}
.panel-nota{margin:16px 0 0;font-size:13px;color:#7E90A4}

/* ---------------- secciones ---------------- */
.seccion{max-width:var(--ancho);margin:0 auto;padding:46px 20px 0}
.seccion-cabeza{margin-bottom:22px}
.seccion-cabeza h2{font-size:27px;font-weight:800;color:var(--azul)}
.seccion-cabeza p{margin:7px 0 0;color:var(--gris);font-size:15.5px}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:136px;padding:14px;border-radius:12px;overflow:hidden;
  background-size:cover;background-position:center;
  color:#fff;
}
.cat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(6,16,30,.5));
  pointer-events:none;
}
.tono1{background-color:#143961;background-image:linear-gradient(150deg,#1B4C7E,#102B4A)}
.tono2{background-color:#14504C;background-image:linear-gradient(150deg,#1B6A62,#0F3A38)}
.tono3{background-color:#5A3413;background-image:linear-gradient(150deg,#8A4A17,#3E2410)}
.tono4{background-color:#2B3A57;background-image:linear-gradient(150deg,#3A4E72,#1C2740)}
.cat-icono{position:relative;z-index:1}
.cat-icono svg{width:34px;height:34px;color:rgba(255,255,255,.95)}
.cat-nombre{position:relative;z-index:1;margin-top:auto;padding-top:12px;font-size:15px;font-weight:700;line-height:1.25}
.cat:hover{transform:translateY(-2px)}
.cat{transition:transform .15s ease}
.cat-confoto::after{background:linear-gradient(180deg,transparent 30%,rgba(6,16,30,.72))}

/* instaladores */
.grilla{display:grid;grid-template-columns:1fr;gap:18px}
.tarjeta{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff}
.tarjeta-foto{
  display:grid;place-items:center;height:186px;
  background-size:cover;background-position:center;
  background-color:#EDF0F3;color:#B4BDC7;
}
.tarjeta-foto svg{width:40px;height:40px}
.tarjeta-datos{padding:0 15px 16px}
.avatar{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  margin-top:-29px;margin-bottom:9px;border:3px solid #fff;
  background-size:cover;background-position:center;background-color:var(--azul);
  color:#fff;font-weight:800;font-size:22px;box-shadow:0 2px 10px rgba(10,24,41,.2);
}
.avatar-vacio{background-color:#D5DBE2}
.tarjeta h3{display:flex;align-items:center;gap:6px;font-size:18.5px;font-weight:700;color:var(--azul)}
.sello{width:17px;height:17px;flex:none}
.sello-verificado{fill:#1D82E2}
.sello-certificado{fill:#D9A529}
.comuna{margin:3px 0 0;font-size:14px;color:var(--gris)}
.medidas{display:flex;align-items:center;gap:12px;margin:9px 0 0;font-size:14px}
.nota{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.nota svg{width:16px;height:16px;fill:var(--naranja)}
.trabajos{color:var(--gris);font-size:13px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.etiquetas li{font-size:12.5px;color:var(--azul);background:var(--papel-gris);border-radius:6px;padding:5px 11px}

/* molde mientras no hay perfiles */
.tarjeta-molde{opacity:.55}
.tarjeta-molde .etiquetas li{background:#E7EBF0;color:transparent}
.linea{display:block;height:13px;border-radius:4px;background:#E7EBF0}
.linea-larga{width:62%}
.linea-corta{width:38%;height:10px;margin-top:9px;background:#EDF0F3}
.molde-aviso{
  margin-top:20px;padding:22px;border-radius:12px;background:var(--papel-gris);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.molde-aviso p{margin:0;color:var(--gris);max-width:52ch}
.molde-aviso b{color:var(--texto)}

/* dos lados */
.dos-lados{margin-top:52px;background:var(--azul);color:#fff;padding:44px 20px}
.dos-lados-caja{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:1fr;gap:34px}
.dos-lados h2{font-size:23px;font-weight:800}
.lista{margin:16px 0 0}
.lista li{position:relative;padding:0 0 11px 24px;color:#C7D4E2;font-size:15.5px;line-height:1.45}
.lista li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  background:var(--naranja);border-radius:2px;transform:rotate(45deg);
}
.dos-lados .boton{margin-top:8px}

/* imprentas */
.imprentas{background:var(--papel-gris);padding:30px 20px}
.imprentas-caja{max-width:var(--ancho);margin:0 auto}
.imprentas h2{font-size:14.5px;font-weight:600;color:var(--gris);margin-bottom:18px;letter-spacing:0}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:24px 36px}
.logos img{max-height:34px;width:auto;filter:grayscale(1);opacity:.72}
.logos em{font-style:normal;font-weight:700;color:var(--azul);opacity:.65}

/* pie */
.pie{border-top:1px solid var(--linea);padding:30px 20px 38px}
.pie-caja{max-width:var(--ancho);margin:0 auto}
.pie-marca{margin:0;font-weight:800;font-size:21px;color:var(--azul)}
.pie-marca span{color:var(--naranja)}
.pie nav{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0}
.pie nav a{font-size:14px;color:var(--azul);font-weight:600}
.pie-nota{margin:0;font-size:12.5px;color:var(--gris);max-width:62ch}

/* ---------------- 620px ---------------- */
@media (min-width:620px){
  .cats{grid-template-columns:repeat(3,1fr);gap:14px}
  .grilla{grid-template-columns:repeat(2,1fr)}
  .portada h1{font-size:50px}
}

/* ---------------- escritorio ---------------- */
@media (min-width:960px){
  .barra-menu{display:flex}
  .barra-boton{display:none}
  .marca{flex:none}
  .barra-caja{justify-content:space-between}

  .portada{padding:60px 20px 68px}
  .portada-caja{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
    gap:54px;align-items:start;
  }
  .portada h1{font-size:58px}
  .portada h1 em{display:block}
  .portada-bajada{font-size:18.5px}
  .panel{margin-top:6px}

  .seccion{padding:60px 20px 0}
  .seccion-cabeza h2{font-size:31px}
  .cats{grid-template-columns:repeat(5,1fr);gap:16px}
  .cat{min-height:168px;padding:18px}
  .cat-icono svg{width:40px;height:40px}
  .cat-nombre{font-size:16px}
  .grilla{grid-template-columns:repeat(3,1fr);gap:24px}

  .dos-lados{padding:58px 20px}
  .dos-lados-caja{grid-template-columns:1fr 1fr;gap:64px}
  .dos-lados h2{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Pantallas de la aplicación
   ============================================================ */
.cargando{padding:60px 20px;text-align:center;color:var(--gris-suave)}
.gris{color:var(--gris);font-size:15px}
.volver{margin:34px 0 0}
.volver a{color:var(--azul);font-weight:600}
.angosto{max-width:520px}
.titulo-bloque{margin:34px 0 14px;font-size:20px;font-weight:800;color:var(--azul)}
.seccion h1{font-size:30px;font-weight:800;color:var(--azul);margin-bottom:8px}
.boton-borde{background:#fff;color:var(--azul);box-shadow:inset 0 0 0 2px var(--linea)}
.boton-borde:hover{background:var(--papel-gris)}
.boton-wsp{background:#1FA855}
.boton-wsp:hover{background:#17853F}

/* avisos flotantes */
.aviso{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--azul);color:#fff;padding:13px 20px;border-radius:9px;
  font-weight:600;font-size:14.5px;z-index:90;max-width:90vw;
  box-shadow:0 12px 30px rgba(6,16,30,.32);
}
.aviso-error{background:#B3261E}

/* formularios */
.formulario{max-width:520px}
.formulario label{display:block;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--azul)}
.formulario input,.formulario textarea,.formulario select{
  display:block;width:100%;margin-top:6px;padding:12px 13px;
  border:1px solid var(--linea);border-radius:8px;font:inherit;font-size:16px;
  color:var(--texto);background:#fff;font-weight:400;
}
.formulario textarea{resize:vertical}
.formulario input:focus,.formulario textarea:focus,.formulario select:focus{outline:none;border-color:var(--naranja)}
.formulario fieldset{border:1px solid var(--linea);border-radius:10px;padding:14px;margin:0 0 16px}
.formulario legend{font-size:14px;font-weight:600;color:var(--azul);padding:0 6px}
.formulario-linea{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;max-width:100%}
.formulario-linea label{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex!important;align-items:center;gap:7px;
  background:var(--papel-gris);border-radius:8px;padding:8px 12px;
  font-size:14px;font-weight:500!important;color:var(--texto)!important;margin:0!important;
}
.chip input{width:auto!important;margin:0!important;display:inline-block!important}

/* estado del perfil */
.estado{padding:14px 16px;border-radius:9px;margin:16px 0;font-size:15px}
.estado-pendiente{background:#FFF4E2;color:#7A4A05}
.estado-rechazado{background:#FDECEA;color:#8C1D18}
.estado-publicado{background:#E8F5EC;color:#14622F}
.estado a{text-decoration:underline}

/* números */
.numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0 6px}
.numeros div{background:var(--papel-gris);border-radius:10px;padding:16px}
.numeros b{display:block;font-size:26px;font-weight:800;color:var(--azul);line-height:1.1}
.numeros span{font-size:13px;color:var(--gris)}

/* perfil público */
.perfil-cabeza{display:flex;gap:18px;align-items:flex-start;margin:18px 0 10px}
.avatar-grande{width:88px;height:88px;margin:0;font-size:32px;flex:none}
.perfil-cabeza h1{display:flex;align-items:center;gap:8px;font-size:26px;margin:0}
.perfil-texto{max-width:66ch;color:var(--texto);font-size:16px}
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.galeria figure{margin:0;height:150px;border-radius:10px;background-size:cover;background-position:center;background-color:var(--papel-gris)}
.certificados li{padding:11px 0;border-bottom:1px solid var(--linea)}
.certificados b{display:block;color:var(--azul)}
.certificados span{font-size:13.5px;color:var(--gris)}
.calificaciones li{padding:12px 0;border-bottom:1px solid var(--linea)}
.calificaciones p{margin:5px 0 0;color:var(--gris);font-size:15px}
.sin-nota{color:var(--gris-suave);font-size:13.5px}
.contacto-bloqueado{background:var(--papel-gris);border-radius:12px;padding:20px;margin-bottom:10px}
.contacto-bloqueado p{margin:0 0 14px}
.contacto .boton-wsp{margin-bottom:18px}

/* subir fotos */
.subir{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.subir input[type=file]{font-size:14px}
.mis-fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mi-foto{
  position:relative;margin:0;height:160px;border-radius:10px;
  background-size:cover;background-position:center;background-color:var(--papel-gris);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.mi-foto figcaption{
  background:rgba(8,20,36,.78);color:#fff;font-size:12.5px;padding:7px 9px;
}
.mi-foto .quitar{
  position:absolute;top:7px;right:7px;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(8,20,36,.72);color:#fff;font-size:17px;line-height:1;
}
.mi-foto .acciones{display:flex}
.mi-foto .acciones button{flex:1;border:0;padding:9px;font-size:13px;font-weight:700;color:#fff}
.mi-foto .acciones .si{background:#1FA855}
.mi-foto .acciones .no{background:#B3261E}
.estado-pendiente.mi-foto{outline:2px solid #F0A830}
.estado-rechazado.mi-foto{opacity:.55}

/* administración */
.revisar{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;
  border:1px solid var(--linea);border-radius:10px;padding:16px;margin-bottom:12px;
}
.revisar p{margin:4px 0 0}
.revisar .acciones{display:flex;gap:8px}
.acciones-bloque{margin-bottom:14px}
.lista-simple li{padding:8px 0;border-bottom:1px solid var(--linea)}

.vacio{border:1px dashed #C8D0D9;border-radius:12px;padding:26px 18px;text-align:center;background:var(--papel-gris)}
.vacio p{margin:0 0 16px;color:var(--gris)}

@media (min-width:620px){
  .numeros{grid-template-columns:repeat(4,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .galeria figure{height:180px}
  .mis-fotos{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){
  .galeria{grid-template-columns:repeat(4,1fr)}
  .mis-fotos{grid-template-columns:repeat(4,1fr)}
}