@font-face{ font-family:"Sentient"; src:url("/fuentes/Sentient-Variable.woff2") format("woff2"); font-weight:200 700; font-style:normal; font-display:swap; } /* ============================================================ Inteliberica — sistema visual Dia por defecto. Noche = , solo en crisis. Tipografia PROVISORIA: se decide al final. ============================================================ */ :root{ --fondo:#0B100E; --fondo-2:#141A17; --txt:#E9EDEA; --sec:#A5AFA9; --rule:#232C28; --rule-fuerte:#39443F; --acc:#B6F24A; --acc-txt:#0B100E; --err:#FF7A6B; --display:"Sentient",Georgia,"Times New Roman",serif; --sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ancho:1120px; --radio:16px; } /* el sitio entero va oscuro: body.noche ya no diferencia nada */ body.noche{} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--fondo);color:var(--txt);font-family:var(--sans); font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} /* ============================================================ LA REJILLA. Doce columnas. Todo el sitio se apoya en estas mismas guias, asi que nada puede desalinearse con nada. Zonas: rotulo 1-4 · texto 4-11 · dato 11-13 ============================================================ */ .env,.container{max-width:var(--ancho);margin:0 auto;padding:0 44px; display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px; align-content:start} .env>*,.container>*{grid-column:1/-1} .env>h2,.container>h2{grid-column:1/-1;margin-bottom:11px} .env>h2+.sub,.container>h2+.sub,.container>h2+p{grid-column:4/-1;max-width:64ch;margin-bottom:24px} .env>.kicker,.container>.kicker{grid-column:1/-1} #contacto .env>h2{margin-bottom:22px} @media(max-width:880px){ .env,.container{display:block} .env>h2,.container>h2{margin-bottom:10px} .filas,.fila,.doble,.head,.split,.contact-grid,.grid-3,.grid-2,.steps,.of-env,.banda-pie{display:block} .fila>.dato{margin-top:6px} } section{padding:62px 0} /* --- cabecera --- */ .mast{border-bottom:1px solid var(--rule-fuerte)} .mast .env{display:flex;justify-content:space-between;align-items:baseline;padding-top:22px;padding-bottom:12px} .marca{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1;color:var(--acc)} .nav{font-size:13.5px;color:var(--sec);display:flex;gap:20px;align-items:baseline} .nav a:hover,.nav a[aria-current="true"]{color:var(--txt)} .dd{position:relative} /* El padding de abajo es el puente: sin el, el cursor cruza un hueco muerto entre el rotulo y el menu, se pierde el hover y el menu se cierra. */ .dd{padding-bottom:10px;margin-bottom:-10px} .dd-m{display:none;position:absolute;top:100%;left:-14px;min-width:214px;z-index:50; background:var(--fondo-2);border:1px solid var(--rule);border-radius:12px;padding:7px 0; box-shadow:0 12px 28px rgba(0,0,0,.45)} .dd:hover .dd-m,.dd:focus-within .dd-m{display:block} .dd-m a{display:block;padding:9px 16px;font-size:13.5px;white-space:nowrap} .dd-m a:hover{color:var(--acc)} .tog{display:none;background:none;border:none;color:var(--txt);font-size:18px;cursor:pointer} /* --- titular --- */ .head{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end; padding:44px 0 30px;border-bottom:1px solid var(--rule)} .head>*:first-child{grid-column:1/8} .head>.lede{grid-column:8/-1} h1{font-family:var(--display);font-weight:400;font-size:clamp(29px,3.9vw,40px); line-height:1.08;letter-spacing:-.014em;text-wrap:balance} .quienes{color:var(--acc);margin-bottom:18px;max-width:56ch} .quienes .q1{display:block;font-size:17.5px;font-weight:700;line-height:1.3} .quienes .q2{display:block;font-size:17.5px;font-weight:700;line-height:1.3;letter-spacing:-.004em;text-wrap:balance} @media(max-width:880px){.quienes .q1,.quienes .q2{font-size:16px}} .lede{font-size:16px;line-height:1.62;color:var(--sec)} h2{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.15; letter-spacing:-.01em;margin-bottom:9px;text-wrap:balance} .sub{color:var(--sec);font-size:16px;max-width:58ch;margin-bottom:26px;text-wrap:pretty} h2,h1{text-wrap:balance} .fila p{text-wrap:pretty} .rot{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--acc);margin-bottom:14px} /* --- tapa: el nombre en bloques que se rearman con el cursor --- */ .tapa{position:relative;overflow:hidden} #lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} /* El encabezado va por encima del hero: con los dos en z-index 2, el desplegable de Servicios quedaba tapado por el bloque del titular. */ .tapa>.env{position:relative;z-index:2} .tapa>.mast{position:relative;z-index:20} .hueco{height:190px} @media(max-width:880px){.hueco{height:104px}} @media(prefers-reduced-motion:reduce){#lienzo{display:none}.hueco{height:0}} /* --- acciones --- */ .btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:14.5px; padding:11px 22px;border-radius:999px;border:1px solid transparent;transition:opacity .15s} button.btn{justify-self:start;align-self:start} .btn-a{background:var(--acc);color:var(--acc-txt)} .btn-a:hover{opacity:.88} .btn-b{border-color:var(--rule);color:var(--txt)} .btn-b:hover{border-color:var(--acc);color:var(--acc)} .enl{color:var(--acc);font-weight:600;font-size:14.5px;border-bottom:1.5px solid var(--acc);padding-bottom:2px} .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px} /* --- filas: se apoyan en la rejilla --- */ .filas{grid-column:1/-1;display:grid;grid-template-columns:subgrid; border-top:1px solid var(--rule)} .fila{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline; padding:19px 0;border-bottom:1px solid var(--rule)} .fila>b{grid-column:1/4} .fila>p{grid-column:4/11} .fila>.dato{grid-column:11/-1} .fila.par>p{grid-column:4/-1} .fila b{font-weight:600;font-size:16px} .fila p{font-size:15.5px;line-height:1.6;color:var(--sec)} .fila p small{display:block;margin-top:8px;font-size:14px;color:var(--sec);opacity:.78} .fila .dato{font-size:12.5px;color:var(--sec);font-weight:600;letter-spacing:.01em; width:fit-content;margin-left:auto;border:1px solid var(--rule);border-radius:999px; padding:4px 12px;white-space:nowrap} .fila .dato a{color:var(--acc);border-bottom:1px solid var(--acc)} #contacto.contact>.container>h2{margin-bottom:22px} @media(max-width:880px){ section>.container:not(.split){display:block} section>.container:not(.split)>h2{margin-bottom:10px} } /* --- fabricantes: una fila por categoria --- */ .fila p.marcas{color:var(--txt)!important;font-size:15px;line-height:1.7;opacity:.9} /* --- reloj del ejercicio: los minutos, a escala --- */ .reloj{grid-column:1/-1;display:grid;grid-template-columns:10fr 70fr 20fr 10fr;gap:3px;margin:6px 0 34px} .tramo{padding-top:15px;border-top:none;position:relative} .tramo::before{content:"";position:absolute;top:0;left:0;right:0;height:6px; border-radius:999px;background:var(--rule-fuerte)} .tramo.fuerte::before{background:var(--acc)} .tramo .min{display:block;font-size:15px;font-weight:600;line-height:1.1} .tramo.fuerte .min{color:var(--acc)} .tramo .que{display:block;font-size:13px;color:var(--sec);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:880px){ .reloj{gap:2px} .tramo .que{display:none} .tramo .min{font-size:13px} } /* --- banda: el corte visual, sin imagenes --- */ .banda{background:var(--acc);color:var(--acc-txt);padding:64px 0 58px;margin-top:34px} .banda-frase{grid-column:1/-1} .banda-frase{font-family:var(--display);font-weight:400;font-size:clamp(27px,3.6vw,43px); line-height:1.14;letter-spacing:-.014em;max-width:31ch;margin-bottom:38px;text-wrap:balance} .banda-pie{grid-column:1/-1;display:grid;grid-template-columns:subgrid; border-top:1px solid rgba(11,16,14,.28);padding-top:26px} .banda-pie>p:first-child{grid-column:1/7} .banda-pie>p:last-child{grid-column:7/-1} .banda .banda-pie p{font-size:15.5px;line-height:1.62;color:var(--acc-txt);opacity:.82;margin:0} .banda .enl{display:inline-block;margin-top:12px;color:var(--acc-txt);border-bottom-color:var(--acc-txt);opacity:1} .banda .enl:hover{opacity:.72} @media(max-width:880px){ .banda{padding:44px 0 40px} .banda-pie{grid-template-columns:1fr;row-gap:16px} } .banda.acento{background:var(--fondo-2);color:var(--txt);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .banda.acento .banda-pie p{color:var(--sec)!important} .banda.acento .banda-pie{border-top-color:var(--rule)} .banda.acento .enl{color:var(--acc);border-bottom-color:var(--acc)} .banda.acento .enl:hover{opacity:.75} /* alternancia de fondo: el metodo sobre el tono 2 */ #metodologia{background:var(--fondo-2)} /* --- los tres servicios: recuadros --- */ .ofertas{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:18px;margin-top:6px} .oferta{grid-column:span 4;display:flex;flex-direction:column;gap:11px; background:var(--fondo-2);border:1px solid var(--rule);border-radius:var(--radio); padding:22px 22px 24px;transition:border-color .2s,background .2s} .oferta:hover{border-color:var(--acc);background:#181F1B} .of-chips{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px} .chip{font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px; border:1px solid var(--rule);color:var(--sec);white-space:nowrap} .chip.on{background:var(--acc);color:var(--acc-txt);border-color:var(--acc)} .oferta h3{font-family:var(--display);font-weight:600;font-size:22px; line-height:1.2;letter-spacing:-.01em;text-wrap:balance} .of-preg{font-size:15.5px;font-weight:600;color:var(--txt);text-wrap:pretty} .oferta>p{font-size:15px;line-height:1.6;color:var(--sec);text-wrap:pretty} .of-mas{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:600;color:var(--txt); border-bottom:1px solid var(--rule);padding-bottom:3px;align-self:flex-start} .oferta:hover .of-mas{color:var(--acc);border-bottom-color:var(--acc)} @media(max-width:880px){.oferta{grid-column:1/-1}} /* --- dos columnas de texto --- */ .doble{grid-column:1/-1;display:grid;grid-template-columns:subgrid} .doble>*:first-child{grid-column:1/7} .doble>*:last-child{grid-column:7/-1} .doble p{margin-bottom:14px;font-size:15.5px;color:var(--sec)} .doble p.fuerte{color:var(--txt)} /* --- formulario --- */ form{display:grid;gap:11px} input,textarea,select{width:100%;background:transparent;border:1px solid var(--rule); color:var(--txt);font:inherit;font-size:15px;padding:13px 15px;border-radius:12px} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)} select option{background:var(--fondo-2);color:var(--txt)} ::placeholder{color:var(--sec)} .datos{display:grid;gap:2px;align-content:start} .datos,.contact-grid>*:last-child{background:var(--fondo-2);border:1px solid var(--rule); border-radius:var(--radio);padding:6px 22px 8px;align-self:start} .dat{padding:15px 0;border-bottom:1px solid var(--rule);font-size:15px} .dat:last-child,.info-item:last-child{border-bottom:none} .dat small{display:block;color:var(--sec);font-size:14px;margin-top:2px} .dat a{transition:color .18s} .dat a:hover{color:var(--acc)} footer{border-top:1px solid var(--rule-fuerte);padding:20px 0 34px;margin-top:20px} footer .env{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:13.5px;color:var(--sec)} footer a:hover{color:var(--acc)} @media(max-width:880px){ .env{padding:0 22px} .head,.doble{display:block} .head>.lede{margin-top:18px} .fila{display:block} .fila .dato{text-align:left} .tog{display:block} .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--fondo); border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:8px 22px 16px;z-index:60} .nav.abierto{display:flex} .mast .env{position:relative} .dd{padding-bottom:0;margin-bottom:0} .dd-m{position:static;display:block;border:none;border-radius:0; box-shadow:none;background:none;padding:2px 0 2px 14px} } @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}} /* --- variantes --- */ .cierre{grid-column:4/-1;margin-top:26px;font-size:16px;color:var(--txt);max-width:64ch;text-wrap:pretty} #direccion{padding:22px 0 44px} #direccion .fila>p{font-size:15.5px;color:var(--txt)} .filas.dos .fila:nth-child(odd){grid-column:1/7} .filas.dos .fila:nth-child(even){grid-column:7/-1} .filas.dos .fila>b{grid-column:1/3} .filas.dos .fila>p{grid-column:3/-1} .filas.dos .fila{border-bottom:1px solid var(--rule)} @media(max-width:880px){.filas.dos .fila{grid-column:1/-1}} .bajada{color:var(--acc);font-weight:600;font-size:15px;margin-top:10px} /* ============================================================ Compatibilidad /infra La pagina de infraestructura conserva su markup original. Aca sus clases viejas se mapean al sistema nuevo, para no tocar una sola palabra de ese contenido. ============================================================ */ .hero{padding:44px 0 30px;border-bottom:1px solid var(--rule)} .hero>.container>.kicker{grid-column:1/8;grid-row:1} .hero>.container>h1{grid-column:1/8;grid-row:2;margin-bottom:0} .hero>.container>p{grid-column:8/-1;grid-row:2;align-self:end} .hero>.container>.hero-cta{grid-column:8/-1;grid-row:3;align-self:start} .hero>.container>.hero-stats{grid-column:1/-1;grid-row:4} @media(max-width:880px){ .hero>.container{display:block} .hero>.container>h1{margin-bottom:14px} } .hero h1{font-family:var(--display);font-weight:400;font-size:clamp(29px,3.9vw,40px); line-height:1.08;letter-spacing:-.014em;margin-bottom:16px;max-width:20ch} .hero h1 em{font-style:normal;color:var(--acc)} .hero p{font-size:16px;color:var(--sec);max-width:62ch} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px} .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px; padding-top:0;border-top:none} .stat{background:var(--fondo-2);border:1px solid var(--rule);border-radius:var(--radio); padding:16px 18px 18px;border-top:1px solid var(--rule);transition:border-color .2s} .stat:hover{border-color:var(--acc)} .stat b{display:block;font-size:15px;font-weight:600;margin-bottom:3px} .stat span{font-size:14px;color:var(--sec)} p.kicker,.hero p.kicker,.split p.kicker{font-size:13px;font-weight:600;color:var(--acc);margin-bottom:12px; letter-spacing:0;text-transform:none} .grid-3{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:18px;margin-top:4px} .grid-3>*:nth-child(3n+1){grid-column:1/5} .grid-3>*:nth-child(3n+2){grid-column:5/9} .grid-3>*:nth-child(3n+3){grid-column:9/-1} .grid-2{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:22px} .grid-2>*:first-child{grid-column:1/7} .grid-2>*:last-child{grid-column:7/-1} .card{background:var(--fondo-2);border:1px solid var(--rule);border-radius:var(--radio); padding:22px 22px 24px;transition:border-color .2s,background .2s} .card:hover{transform:none;border-color:var(--acc);background:#181F1B} a.card{display:block} a.card:hover h3{color:var(--acc)} .card .icon{display:none} .card h3{font-size:16px;font-weight:600;margin-bottom:7px} .card p{font-size:15px;color:var(--sec);line-height:1.6} .split>*{grid-column:auto} .split>*:first-child{grid-column:1/7} .split>*:last-child{grid-column:7/-1} .split p{font-size:16px;color:var(--sec);margin-bottom:14px} ul.checks{list-style:none} ul.checks li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px} ul.checks li::before{content:none} ul.checks li b{font-weight:600} ul.checks li small{display:block;color:var(--sec);font-size:14px;margin-top:2px} .tag{display:inline-block;font-size:12.5px;color:var(--sec);font-weight:600; border:1px solid var(--rule);border-radius:999px;padding:4px 12px;margin:0 6px 8px 0} .tag:hover{border-color:var(--acc);color:var(--acc)} .brand-cat{font-size:12px;font-weight:600;color:var(--acc);margin:22px 0 8px} .steps{grid-column:1/-1;display:grid;grid-template-columns:subgrid; row-gap:18px;margin-top:4px;counter-reset:step} .steps>*:nth-child(3n+1){grid-column:1/5} .steps>*:nth-child(3n+2){grid-column:5/9} .steps>*:nth-child(3n+3){grid-column:9/-1} .step{background:var(--fondo-2);border:1px solid var(--rule);border-radius:var(--radio); padding:20px 22px 24px;transition:border-color .2s,background .2s} .step:hover{border-color:var(--acc);background:#181F1B} .steps.cuatro>*:nth-child(4n+1){grid-column:1/4} .steps.cuatro>*:nth-child(4n+2){grid-column:4/7} .steps.cuatro>*:nth-child(4n+3){grid-column:7/10} .steps.cuatro>*:nth-child(4n+4){grid-column:10/-1} @media(max-width:1000px){ .steps.cuatro>*:nth-child(4n+1),.steps.cuatro>*:nth-child(4n+3){grid-column:1/7} .steps.cuatro>*:nth-child(4n+2),.steps.cuatro>*:nth-child(4n+4){grid-column:7/-1} } .step::before{counter-increment:step;content:"0" counter(step); display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700; color:var(--acc-txt);background:var(--acc);border-radius:999px;padding:3px 10px; -webkit-text-stroke:0;margin-bottom:12px;letter-spacing:.02em} .step h3{font-size:16px;font-weight:600;margin-bottom:7px} .step p{font-size:15px;color:var(--sec);line-height:1.6} .contact-grid{grid-column:1/-1;display:grid;grid-template-columns:subgrid} .contact-grid>*:first-child{grid-column:1/7} .contact-grid>*:last-child{grid-column:7/-1} .info-item{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px} .info-item svg{display:none} .info-item small{display:block;color:var(--sec);font-size:14px;margin-top:2px} .info-item a{transition:color .18s} .info-item a:hover{color:var(--acc)} nav{border-bottom:1px solid var(--rule-fuerte)} .nav-inner{display:flex;justify-content:space-between;align-items:center; padding-top:22px;padding-bottom:12px} .logo{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1;color:var(--acc)} .logo span{color:inherit} .nav-links{display:flex;gap:20px;align-items:baseline;font-size:13.5px;color:var(--sec)} .nav-links a:hover{color:var(--txt)} .nav-links a.btn{color:var(--acc-txt)} .menu-toggle{display:none;background:none;border:none;color:var(--txt);font-size:18px;cursor:pointer} .btn-primary{background:var(--acc);color:var(--acc-txt);border:1px solid transparent;border-radius:999px} .btn-ghost{border:1px solid var(--rule);color:var(--txt);border-radius:999px} .btn-ghost:hover{border-color:var(--acc);color:var(--acc)} .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:13.5px;color:var(--sec)} @media(max-width:880px){ .container{padding:0 22px} .grid-3,.grid-2,.split,.contact-grid,.steps{grid-template-columns:1fr} .hero-stats{grid-template-columns:1fr 1fr;gap:12px} .datos,.contact-grid>*:last-child{margin-top:18px} .card,.step{padding-right:20px} .menu-toggle{display:block} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--fondo); border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:8px 22px 16px;z-index:60} .nav-links.open{display:flex} .nav-inner{position:relative} } /* correcciones de /infra */ .tag{margin:0 14px 6px 0} .hero h1{max-width:28ch} /* --- justificado solo donde la medida lo aguanta (>=45 caracteres) --- */ /* En columnas angostas el justificado abre huecos entre palabras: ahi va a la izquierda. */ @media(min-width:1000px){ .fila p,.cierre,.doble p{ text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto} .fila p small,.of-preg,.sub,.lede,.split p,.card p,.step p,.oferta>p{text-align:left} }