/* ==================================================================
   instalador.cl — movil-75.css
   SOLO CELULARES Y MÓVILES (pantallas de menos de 760 px de ancho).
   En computador este archivo no hace nada: todo está dentro del
   @media de abajo. Se carga al final y usa !important porque los
   estilos anteriores (sistema-70.css) ya lo usan en móvil; si no,
   estos cambios no se aplicarían.

   Idea: que el celular se vea como la versión de computador, pero en
   chico: letras y espacios contenidos, tarjetas compactas, y el
   banner de la portada a la mitad de alto, solo el principal.
   Para deshacer todo: quitar la línea de movil-75.css del index.html.
   Única regla fuera del @media: .pf-solo-movil, que esconde en computador
   lo que solo existe para el celular (entrega 72).
   ================================================================== */

/* lo que es solo para el celular no se ve en computador */
.pf-solo-movil{display:none!important}

@media (max-width:759px){

  /* ================= 1. GENERAL ================= */
  html body{font-size:14.5px!important}
  html body .seccion{padding-top:22px!important;padding-left:12px!important;padding-right:12px!important}
  html body .seccion h1,
  html body .seccion-cabeza h1{font-size:22px!important;line-height:1.2!important}
  html body .seccion-cabeza p{font-size:13px!important}
  html body .titulo-bloque{font-size:17px!important;margin-top:22px!important}
  html body .boton{min-height:40px!important;padding:9px 16px!important;font-size:13.5px!important}
  html body .boton-chico{min-height:32px!important;padding:6px 12px!important;font-size:12.5px!important}
  html body .formulario label{font-size:13.5px!important}
  html body .formulario input,
  html body .formulario select,
  html body .formulario textarea{font-size:16px!important;padding:9px 11px!important}
  html body .vacio{padding:18px 14px!important}
  html body .vacio p{font-size:14px!important}
  /* cifras del panel "Mi perfil" y del administrador: 4 en una fila */
  html body .numeros{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  html body .numeros > div{padding:9px 6px!important;text-align:center!important}
  html body .numeros b{font-size:18px!important}
  html body .numeros span{font-size:10px!important;line-height:1.2!important}

  /* ================= 2. CABECERA (fija arriba: que ocupe poco) ================= */
  html body .cabecera-alta-caja{row-gap:6px!important;padding-top:6px!important;padding-bottom:8px!important;padding-left:12px!important;padding-right:12px!important}
  html body .cabecera-alta-caja .hamburguesa{width:38px!important;height:38px!important}
  html body .hamburguesa svg{width:22px!important;height:22px!important}
  html body .marca-nombre{font-size:20px!important}
  html body .buscador-alto{min-height:0!important;border-radius:3px!important}
  html body .buscador-alto .campo-b{height:36px!important;padding:0 8px!important}
  html body .buscador-alto .campo-b svg{width:18px!important;height:18px!important}
  html body .buscador-alto input{height:36px!important;padding:6px 0!important;font-size:16px!important}
  html body .buscador-alto button{height:30px!important;width:34px!important;min-width:34px!important;margin-right:3px!important}

  /* ================= 3. PORTADA ================= */
  /* banner: mitad de alto, solo el principal (el primero del CSV) con su
     eslogan. Los demás no se muestran en el celular. */
  html body .hero{padding-top:10px!important;padding-left:12px!important;padding-right:12px!important}
  html body .hero-marco{height:auto!important;border-radius:4px!important}
  html body .hero .lamina{display:none!important;position:relative!important;inset:auto!important;min-height:0!important;height:auto!important;padding:16px 0 18px!important;animation:none!important;transition:none!important}
  html body .hero .lamina:first-child{display:flex!important;align-items:center!important;min-height:150px!important;opacity:1!important;visibility:visible!important}
  html body .hero .lamina-caja{padding-left:16px!important;padding-right:16px!important}
  html body .hero .lamina-linea{width:30px!important;height:3px!important}
  html body .hero .lamina h1{margin-top:8px!important;font-size:23px!important;line-height:1.08!important;max-width:14ch!important}
  html body .hero .lamina-bajada{margin-top:7px!important;font-size:12.5px!important;line-height:1.35!important;max-width:62%!important}
  html body .hero .lamina-sellos{display:none!important}
  html body .hero .lamina-etiqueta{display:none!important}
  html body .hero .lamina-botones{display:none!important}
  html body .hero .hero-puntos{display:none!important}
  html body .hero .hero-flecha{display:none!important}
  html body .hero .hero-tarjeta{display:none!important}
  /* recuadro "¿Eres instalador?" bajo el banner: no en el celular
     (la entrada para instaladores sigue en el menú y en el pie) */
  html body .barra-publica{display:none!important}

  /* encabezado de cada sección: título a la izquierda, "Ver todos" a la derecha */
  html body .seccion-home{padding-top:22px!important}
  html body .seccion-home .contenedor{padding-left:12px!important;padding-right:12px!important}
  html body .seccion-cabeza-home{display:grid!important;grid-template-columns:1fr auto!important;align-items:baseline!important;gap:0 10px!important;margin-bottom:10px!important}
  html body .seccion-cabeza-home > div{display:contents!important}
  html body .seccion-cabeza-home h2{grid-column:1!important;grid-row:1!important}
  html body .seccion-cabeza-home p{grid-column:1 / -1!important;grid-row:2!important}
  html body .seccion-cabeza-home .ver-todos{grid-column:2!important;grid-row:1!important;font-size:0!important;border-bottom-width:2px!important}
  html body .seccion-cabeza-home .ver-todos::before{content:"Ver todo"!important;font-size:12px!important}
  html body .seccion-cabeza-home .ver-todos span{font-size:12px!important;margin-left:3px!important}
  html body .seccion-cabeza-home h2{font-size:18px!important;line-height:1.2!important}
  html body .seccion-cabeza-home p{font-size:12px!important;line-height:1.35!important;margin-top:2px!important}
  html body .seccion-cabeza-home .ver-todos{margin-top:0!important;padding:2px 0!important;white-space:nowrap!important}

  /* categorías */
  html body .cat-tarjeta{width:148px!important;min-width:148px!important;flex:0 0 148px!important;border-radius:4px!important}
  html body .cat-foto{height:88px!important}
  html body .cat-pie{padding:8px 9px 9px!important;gap:7px!important;align-items:center!important}
  html body .cat-icono{width:24px!important;height:24px!important;min-width:24px!important;border-radius:3px!important}
  html body .cat-icono svg{width:14px!important;height:14px!important}
  html body .cat-nombres{min-width:0!important}
  html body .cat-nombres b{font-size:12px!important;line-height:1.25!important}
  html body .cat-nombres strong{font-size:12px!important;line-height:1.25!important}
  html body .cat-nombres span{font-size:10.5px!important;line-height:1.3!important}
  html body .cat-nombres em{font-size:10.5px!important;line-height:1.3!important}

  /* franja con foto */
  html body .franja-foto{padding-top:20px!important}
  html body .franja-foto .contenedor{padding-left:12px!important;padding-right:12px!important}
  html body .franja-foto-caja{min-height:0!important;border-radius:4px!important}
  html body .franja-foto-texto{padding:14px 16px!important}
  html body .franja-foto-texto h3{font-size:16px!important}
  html body .franja-foto-texto p{font-size:11.5px!important;margin-top:2px!important}
  html body .franja-foto-boton{margin-top:9px!important;min-height:30px!important;padding:5px 11px!important;font-size:11.5px!important}

  /* fichas de instaladores e imprentas (portada, búsqueda, favoritos) */
  html body .ficha{border-radius:4px!important}
  html body .ficha-foto{aspect-ratio:auto!important;height:108px!important}
  html body .ficha-fav{width:30px!important;height:30px!important;top:6px!important;right:6px!important}
  html body .ficha-fav svg{width:15px!important;height:15px!important}
  html body .ficha-datos{padding:8px 10px 10px!important}
  html body .ficha-datos h3{font-size:13.5px!important;line-height:1.25!important}
  html body .ficha-lugar{font-size:11px!important;margin-top:2px!important}
  html body .ficha-nota{font-size:11px!important;margin-top:3px!important}
  html body .ficha-estado{font-size:11px!important;margin-top:3px!important}
  html body .ficha .etiquetas{margin-top:6px!important;gap:4px!important}
  html body .ficha .etiquetas li{font-size:10.5px!important;padding:3px 7px!important}
  html body .ficha .marcas{padding-top:6px!important;gap:2px 8px!important}
  html body .ficha .marcas li{font-size:10.5px!important}
  html body .ficha-imprenta .ficha-foto-logo{height:auto!important;aspect-ratio:16/9!important}
  html body .imprenta-tarjeta{padding:10px!important}
  html body .imprenta-logo{width:40px!important;height:40px!important}

  /* ================= 4. PERFIL DEL INSTALADOR ================= */
  html body .pf-banner-arriba{grid-template-columns:84px 1fr!important;gap:12px!important;padding:14px 14px 12px!important;align-items:center!important}
  html body .pf-avatar-caja{width:84px!important;height:84px!important}
  html body .pf-avatar{width:84px!important;height:84px!important;font-size:30px!important;border-width:3px!important}
  html body .pf-identidad h1{font-size:19px!important;line-height:1.15!important}
  html body .pf-sello-btn{width:17px!important;height:17px!important}
  html body .pf-oficio{font-size:13px!important;line-height:1.3!important;margin-top:3px!important}
  html body .pf-nuevo-pill{margin-top:4px!important;padding:2px 8px!important;font-size:10px!important}
  html body .pf-datos{margin-top:8px!important;gap:6px!important}
  html body .pf-datos li{gap:4px!important}
  html body .pf-datos li svg{width:15px!important;height:15px!important}
  html body .pf-datos b{font-size:12px!important;line-height:1.15!important}
  html body .pf-datos em{font-size:10.5px!important;line-height:1.2!important}

  /* punto verde de "disponible" sobre la foto: más chico */
  html body .pf-avatar-caja::after{width:13px!important;height:13px!important;right:4px!important;bottom:4px!important;border-width:2.5px!important}

  /* entrega 72: bajo el banner, primero los botones de contacto y luego,
     lado a lado, la nota y los días de trabajo. Se quitan en celular las
     franjas "96% clientes / Respuesta" y "Trabajo seguro / Trato / Cobertura". */
  html body .pf-banner-abajo{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px 12px 12px!important;align-items:stretch!important}
  html body .pf-sellos{display:none!important}
  html body .pf-confianza{display:none!important}
  html body .pf-contacto{grid-column:1 / -1!important;order:1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important;min-width:0!important}
  html body .pf-contacto .pf-btn-wsp{grid-column:1 / -1!important}
  html body .pf-contacto .pf-wsp-cerrado{grid-column:1 / -1!important;font-size:11.5px!important;margin:0!important}
  html body .pf-btn{min-height:40px!important;padding:9px 10px!important;font-size:13px!important;gap:6px!important}
  html body .pf-btn svg{width:17px!important;height:17px!important}
  html body .pf-btn-wsp{min-height:44px!important;font-size:14.5px!important}
  html body .pf-contacto .pf-btn:not(.pf-btn-wsp){background:#fff!important;color:#16263D!important;border:1px solid #D5DDE6!important;border-radius:4px!important;
    font-weight:700!important;justify-content:center!important;display:inline-flex!important;align-items:center!important;text-decoration:none!important;box-shadow:none!important}
  html body .pf-solo-movil.pf-btn{display:inline-flex!important}

  /* nota (izquierda) */
  html body .pf-nota{order:2!important;grid-column:1!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
    gap:5px!important;padding:9px 10px!important;border-radius:4px!important;margin:0!important;min-width:0!important}
  html body .pf-nota-badge{padding:3px 8px!important}
  html body .pf-nota-badge b{font-size:17px!important}
  html body .pf-nota-badge i{font-size:11px!important}
  html body .pf-nota-der{gap:2px!important}
  html body .pf-nota-der em{font-size:10px!important}
  html body .pf-nota-nuevo span b{font-size:13px!important}
  html body .pf-nota-nuevo span em{font-size:10.5px!important}

  /* días de trabajo (derecha) */
  html body .pf-dias-movil{order:3!important;grid-column:2!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;
    background:#fff!important;border:1px solid #D5DDE6!important;border-radius:4px!important;padding:8px 9px!important;min-width:0!important}
  html body .pf-dias-titulo{display:flex!important;align-items:center!important;gap:4px!important;font-size:11px!important;font-weight:800!important;color:#16263D!important;
    text-transform:uppercase!important;letter-spacing:.03em!important}
  html body .pf-dias-titulo svg{width:13px!important;height:13px!important}
  html body .pf-dias-movil ul{display:flex!important;justify-content:space-between!important;gap:2px!important;margin:0!important;padding:0!important;list-style:none!important}
  html body .pf-dias-movil li{width:19px!important;height:19px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
    font-size:10px!important;font-weight:800!important;background:#EEF1F5!important;color:#9AA4AF!important}
  html body .pf-dias-movil li.si{background:#22A652!important;color:#fff!important}
  html body .pf-dias-movil li.hoy{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #F26A1B!important}
  html body .pf-dias-movil em{font-style:normal!important;font-size:10.5px!important;line-height:1.25!important;color:#5C6B7E!important}
  html body .pf-dias-movil em.est-si{color:#178A42!important;font-weight:700!important}

  /* pestañas */
  html body .pf-nav{padding:0 4px!important}
  html body .pf-nav .pestaña{padding:10px 9px!important;font-size:12.5px!important}
  html body .pf-ayuda{padding:10px 12px!important;margin-left:12px!important;margin-right:12px!important}
  html body .pf-ayuda-ico{width:32px!important;height:32px!important}
  html body .pf-ayuda-txt b{font-size:13.5px!important}
  html body .pf-ayuda-txt em{font-size:11.5px!important}

  /* tarjetas del cuerpo */
  html body .pf-cuerpo{padding:10px 10px 0!important;gap:10px!important}
  html body .pf-principal > div{gap:10px!important}
  html body .pf-fila2{gap:10px!important}
  html body .pf-lado{gap:10px!important}
  html body .pf-tarjeta{border-radius:4px!important}
  html body .pf-tarjeta-cab{padding:9px 12px!important}
  html body .pf-tarjeta-cab h2{font-size:14.5px!important}
  html body .pf-tarjeta-cuerpo{padding:11px 12px!important}
  html body .pf-sobre-texto p{font-size:13.5px!important;line-height:1.5!important}
  html body .pf-chips{gap:5px!important}
  html body .pf-chips li{font-size:11.5px!important;padding:5px 9px!important}

  /* desempeño ("Experiencia que se nota"): una franja compacta.
     En celular se quitan el texto largo y el recuadro de cita; la cantidad
     de evaluaciones ya está en la nota de arriba. */
  html body .pf-desem-top{grid-template-columns:96px 1fr!important;gap:10px 12px!important;padding:12px!important;align-items:center!important}
  html body .pf-aro{gap:3px!important}
  html body .pf-aro-svg{width:92px!important;height:92px!important}
  html body .pf-aro-corona{display:none!important}
  html body .pf-aro-centro{margin-top:-74px!important;margin-bottom:22px!important}
  html body .pf-aro-centro > b{font-size:24px!important}
  html body .pf-aro-centro > em{font-size:10px!important;margin-top:0!important}
  html body .pf-aro-nivel{margin-top:3px!important;padding:2px 7px!important;font-size:8.5px!important}
  html body .pf-aro-pie{display:none!important}
  html body .pf-como-btn{padding:3px 7px!important;font-size:10px!important;gap:3px!important;white-space:nowrap!important}
  html body .pf-como-btn svg{width:11px!important;height:11px!important}
  html body .pf-desem-medio{border:0!important;padding:0!important}
  html body .pf-destacado{padding:3px 8px!important;font-size:9.5px!important;gap:4px!important}
  html body .pf-destacado svg{width:13px!important;height:13px!important}
  html body .pf-desem-medio h3{font-size:16px!important;line-height:1.15!important;margin-top:5px!important}
  html body .pf-desem-medio > p{display:none!important}
  html body .pf-desem-cita{display:none!important}
  html body .pf-desem-estrellas{margin-top:5px!important;gap:6px!important}
  html body .pf-desem-estrellas .estrellas svg{width:15px!important;height:15px!important}
  html body .pf-desem-estrellas b{font-size:14px!important}
  html body .pf-desem-lado{grid-column:1 / -1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  html body .pf-desem-lado .pf-btn-evaluar{grid-column:1 / -1!important}
  html body .pf-desem-caja{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important;
    padding:7px 8px!important;gap:3px!important;border-radius:3px!important}
  html body .pf-desem-caja svg{width:17px!important;height:17px!important}
  html body .pf-desem-caja b{font-size:14px!important;line-height:1.15!important}
  html body .pf-desem-caja .pf-caja-t{font-size:11px!important;line-height:1.2!important}
  html body .pf-desem-caja span{font-size:10.5px!important;line-height:1.2!important}
  html body .pf-desem-caja em{display:none!important}
  html body .pf-btn-evaluar{min-height:40px!important;font-size:13.5px!important}

  /* especialidades */
  html body .pf-esp-bloque{padding:12px!important}
  html body .pf-esp-cab h4{font-size:15px!important}
  html body .pf-esps{gap:8px!important}
  html body .pf-esp{padding:9px!important;gap:6px!important}
  html body .pf-esp-ico{width:32px!important;height:32px!important}
  html body .pf-esp-ico svg{width:18px!important;height:18px!important}
  html body .pf-esp b{font-size:12px!important}
  html body .pf-nivel{font-size:10px!important;padding:3px 8px!important}
  html body .pf-garantias-fila{padding:12px!important;gap:10px!important}
  html body .pf-garantias-fila li{font-size:11.5px!important}

  /* disponibilidad, zona, redes */
  html body .pf-semana{gap:4px!important}
  html body .pf-semana li{padding:5px 0!important;font-size:10.5px!important}
  html body .pf-semana-resumen{padding:8px 10px!important;font-size:12.5px!important}
  html body .pf-estado-ahora{font-size:12.5px!important}
  html body .pf-horario li{padding:6px 0!important;font-size:12.5px!important}
  html body .pf-etiquetas li{font-size:11px!important;padding:4px 8px!important}
  html body .pf-zona li{font-size:12.5px!important}
  html body .pf-zona-viaja{padding:7px 10px!important;font-size:12.5px!important}
  html body .pf-reporte{padding:12px!important}
  html body .pf-btn-reportar{min-height:38px!important}
  html body .pf-cta{padding:12px!important;gap:8px!important}
  html body .pf-cta b{font-size:14px!important}
  html body .pf-cta p{font-size:12px!important}

  /* ================= 5. PERFIL DE IMPRENTA =================
     la portada se ajusta en imprenta-75.css */
  html body .pfi-cuerpo{padding:12px 10px 0!important;gap:10px!important}
  html body .pfi-col{gap:10px!important}
  html body .pfi-datos{gap:9px!important}
  html body .pfi-datos li{gap:9px!important}
  html body .pfi-datos li svg{width:17px!important;height:17px!important}
  html body .pfi-datos b{font-size:11px!important}
  html body .pfi-datos span{font-size:13.5px!important}
  html body .pfi-rubros-lista{gap:5px!important}
  html body .pfi-rubros-lista li{font-size:12px!important;padding:5px 10px!important}
  html body .pfi-contacto{gap:8px!important}
  html body .pfi-btn-web{min-height:40px!important;font-size:13px!important}
  html body .pfi-fotos{gap:6px!important}
  html body .pfi-aliados{gap:8px!important}

  /* ================= 6. PIE DE PÁGINA ================= */
  html body .pie-caja{padding:16px 14px 12px!important;gap:12px 14px!important}
  html body .pie-marca{font-size:16px!important}
  html body .pie-col a{font-size:12px!important}
}