/* =========================================================== ELECTRICISTAS · Identidad visual Paleta: cuadro eléctrico nocturno + aviso ámbar de tensión ---------------------------------------------------------- --ink #10141B fondo principal (casi negro azulado, "apagón") --ink-2 #171D27 paneles / tarjetas --line #262E3B líneas divisorias, bordes de cuadro eléctrico --paper #EDEFF2 texto principal sobre fondo oscuro --paper-dim #9AA3B2 texto secundario --volt #FFB020 ámbar de tensión — acento de urgencia / CTA --volt-2 #FFD166 ámbar claro (hover) --live #35D07F verde "instalación con vida" (ok / disponibilidad) =========================================================== */ :root{ --ink:#10141B; --ink-2:#171D27; --ink-3:#1D2531; --line:#262E3B; --paper:#EDEFF2; --paper-dim:#9AA3B2; --volt:#FFB020; --volt-2:#FFD166; --live:#35D07F; --radius:2px; --serif:"Zilla Slab","Georgia",serif; --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono","Courier New",monospace; } /* Google Fonts se carga desde el de cada página (preconnect + link), no por @import aquí: @import retrasa el descubrimiento de la fuente hasta que el navegador ha descargado y parseado este CSS entero. */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* --- Accesibilidad: navegación por teclado --- */ .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:100} .skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--volt);color:#1A1200;padding:12px 20px;border-radius:var(--radius);font-weight:700;font-family:var(--sans);text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:2px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--ink); color:var(--paper); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em} .container{max-width:1180px;margin:0 auto;padding:0 24px} /* --- Barra de tensión (signature: hairline ámbar animado en el top, como un piloto de corriente) --- */ .volt-bar{height:3px;width:100%;background:repeating-linear-gradient(90deg,var(--volt) 0 40px,transparent 40px 46px); background-size:200% 100%;animation:volt-flow 6s linear infinite;} @keyframes volt-flow{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.volt-bar{animation:none}} /* --- Header --- */ header.site{position:sticky;top:0;z-index:50;background:rgba(16,20,27,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto} .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;font-weight:700;color:var(--paper)} .brand .spark{color:var(--volt)} .brand small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--paper-dim);font-weight:600;text-transform:uppercase} .nav-links{display:flex;gap:20px;align-items:center} .nav-links a{font-size:13.5px;font-weight:500;color:var(--paper-dim);transition:color .15s;margin-right:20px;white-space:nowrap} .nav-links a:last-child{margin-right:0} .nav-links a:hover{color:var(--volt)} .nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0} @media(max-width:640px){ .nav-cta .btn-volt{display:none} } @media(max-width:400px){ .brand small{display:none} } .lang-switch{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;overflow:hidden;flex-shrink:0} .lang-switch a{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--paper-dim);padding:5px 8px;letter-spacing:.03em;white-space:nowrap} .lang-switch a.active{background:var(--volt);color:#1A1200} .lang-switch a:not(.active):hover{color:var(--volt)} @media(max-width:640px){ .lang-switch{display:none} .lang-switch.always-visible{display:flex} .lang-switch.always-visible a{padding:5px 6px;font-size:10px} } .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:13px 20px;border-radius:var(--radius);border:1px solid transparent;transition:transform .12s ease,background .15s;white-space:nowrap} .btn-volt{background:var(--volt);color:#1A1200} .btn-volt:hover{background:var(--volt-2);transform:translateY(-1px)} .btn-ghost{border-color:var(--line);color:var(--paper)} .btn-ghost:hover{border-color:var(--volt);color:var(--volt)} .tel-quick{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700;font-size:13.5px;color:var(--volt);white-space:nowrap} .tel-quick:hover{color:var(--volt-2)} @media(max-width:640px){ .tel-quick{font-size:13px} } /* --- Menú móvil (sin JavaScript, técnica de checkbox) --- */ .menu-toggle-input{position:absolute;opacity:0;pointer-events:none} .menu-toggle-label{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;flex-shrink:0} .menu-toggle-label span,.menu-toggle-label span::before,.menu-toggle-label span::after{content:"";display:block;width:18px;height:2px;background:var(--paper);position:relative;transition:transform .15s,opacity .15s} .menu-toggle-label span::before{position:absolute;top:-6px} .menu-toggle-label span::after{position:absolute;top:6px} .menu-toggle-input:checked ~ .menu-toggle-label span{background:transparent} .menu-toggle-input:checked ~ .menu-toggle-label span::before{transform:translateY(6px) rotate(45deg)} .menu-toggle-input:checked ~ .menu-toggle-label span::after{transform:translateY(-6px) rotate(-45deg)} @media(max-width:960px){ .menu-toggle-label{display:flex} .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--ink-2);border-bottom:1px solid var(--line);padding:8px 24px;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .2s ease} .nav-links a{margin-right:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px} .nav-links a:last-child{border-bottom:none} .mobile-lang-switch{display:flex;gap:8px;padding:14px 0;flex-wrap:wrap} .mobile-lang-switch a{border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--paper-dim)} .mobile-lang-switch a.active{background:var(--volt);color:#1A1200;border-color:var(--volt)} .menu-toggle-input:checked ~ .nav-links{max-height:80vh;visibility:visible;overflow-y:auto} } @media(min-width:961px){.mobile-lang-switch{display:none}} /* --- Hero --- */ .hero{position:relative;padding:76px 0 64px;overflow:hidden;border-bottom:1px solid var(--line)} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(600px 300px at 85% -10%, rgba(255,176,32,.12), transparent 60%); pointer-events:none} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt);border:1px solid rgba(255,176,32,.35);background:rgba(255,176,32,.08);padding:6px 12px;border-radius:99px;margin-bottom:22px} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(53,208,127,.2);animation:pulse 1.8s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .hero h1{font-size:clamp(34px,4.6vw,58px);max-width:15ch;color:var(--paper)} .hero h1 em{font-style:normal;color:var(--volt)} .hero p.lead{max-width:56ch;color:var(--paper-dim);font-size:18px;margin-top:20px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:36px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line)} .stat b{font-family:var(--serif);font-size:30px;color:var(--paper);display:block} .stat span{font-size:13px;color:var(--paper-dim)} .trust-strip{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px} .trust-strip span{font-family:var(--mono);font-size:12.5px;color:var(--paper-dim);white-space:nowrap} /* --- Section scaffolding --- */ section{padding:72px 0} .section-head{max-width:640px;margin-bottom:44px} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt);margin-bottom:12px;display:block} .section-head h2{font-size:clamp(26px,3.4vw,38px);color:var(--paper)} .section-head p{color:var(--paper-dim);margin-top:14px;font-size:16px} .alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* --- Icon badges --- */ .icon-badge{width:44px;height:44px;border-radius:12px;background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.3);display:flex;align-items:center;justify-content:center;color:var(--volt);flex-shrink:0} .icon-badge svg{width:22px;height:22px} .icon-badge.sm{width:36px;height:36px;border-radius:10px} .icon-badge.sm svg{width:18px;height:18px} .icon-badge.lg{width:64px;height:64px;border-radius:16px;margin-bottom:20px} .icon-badge.lg svg{width:32px;height:32px} /* --- Priority list (ahora con icono) --- */ .priority-list{display:flex;flex-direction:column;border:1px solid var(--line)} .priority-item{display:grid;grid-template-columns:56px auto 1fr auto;align-items:center;gap:20px;padding:26px 28px;border-bottom:1px solid var(--line);transition:background .15s} .priority-item:last-child{border-bottom:none} .priority-item:hover{background:var(--ink-2)} .priority-item .num{font-family:var(--mono);font-size:13px;color:var(--volt);border:1px solid rgba(255,176,32,.4);padding:5px 10px;border-radius:99px;text-align:center;white-space:nowrap} .priority-item h3{font-size:19px;color:var(--paper);margin-bottom:4px} .priority-item p{color:var(--paper-dim);font-size:14.5px;max-width:60ch} .priority-item .go{color:var(--volt-2);font-family:var(--mono);font-size:13px;white-space:nowrap} /* En pantallas medianas/pequeñas, el nº ya no cabe al lado del título: se apila en su propia fila */ @media(max-width:760px){ .priority-item{ grid-template-columns:44px 1fr; grid-template-areas:"icon num" "icon content" "icon go"; row-gap:8px;column-gap:14px;padding:22px 20px; } .priority-item .icon-badge{grid-area:icon;width:40px;height:40px} .priority-item .num{grid-area:num;justify-self:start;white-space:normal} .priority-item>div{grid-area:content} .priority-item .go{grid-area:go;justify-self:start} } /* --- Cards --- */ .grid{display:grid;gap:20px} .grid-2{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){.grid-2{grid-template-columns:1fr}} .card{background:var(--ink-2);border:1px solid var(--line);padding:28px;border-radius:var(--radius)} .card h3{color:var(--paper);font-size:18px;margin-bottom:10px} .card p{color:var(--paper-dim);font-size:14.5px} .card .icon{width:38px;height:38px;color:var(--volt);margin-bottom:16px} /* --- Barrios grid (index of location pages) --- */ .barrios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:900px){.barrios-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.barrios-grid{grid-template-columns:1fr}} .barrio-chip{border:1px solid var(--line);padding:18px 20px;display:flex;justify-content:space-between;align-items:center;transition:border-color .15s,background .15s} .barrio-chip:hover{border-color:var(--volt);background:var(--ink-3)} .barrio-chip .cp{font-family:var(--mono);font-size:12px;color:var(--volt);display:block;margin-bottom:4px} .barrio-chip .name{color:var(--paper);font-weight:600;font-size:15px} .barrio-chip .arrow{color:var(--paper-dim)} /* --- CTA banda de urgencia --- */ .urgent-band{background:linear-gradient(120deg,#1A1200,#241900);border-top:1px solid rgba(255,176,32,.3);border-bottom:1px solid rgba(255,176,32,.3);padding:44px 0} .urgent-band .row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .urgent-band h3{color:var(--volt-2);font-size:24px} .urgent-band p{color:var(--paper-dim);font-size:14.5px;margin-top:6px} /* --- Footer --- */ footer{border-top:1px solid var(--line);padding:52px 0 30px;background:var(--ink)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px} @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}} footer h3{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:14px} footer li{margin-bottom:9px} footer a{color:var(--paper-dim);font-size:14px} footer a:hover{color:var(--volt)} .foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--paper-dim);font-size:12.5px;font-family:var(--mono)} /* --- Breadcrumb --- */ .breadcrumb{font-family:var(--mono);font-size:12px;color:var(--paper-dim);padding:18px 0 0} .breadcrumb a{color:var(--paper-dim)} .breadcrumb a:hover{color:var(--volt)} /* --- Barrio page specific --- */ .barrio-hero{padding:52px 0 44px;border-bottom:1px solid var(--line)} .barrio-hero h1{font-size:clamp(28px,4vw,42px)} .barrio-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--paper-dim)} .barrio-meta b{color:var(--volt)} .service-mini{border:1px solid var(--line);padding:20px;display:flex;gap:14px;align-items:flex-start} .service-mini .icon-badge{margin-top:2px} .service-mini .n{font-family:var(--mono);color:var(--volt);font-size:12px;border:1px solid rgba(255,176,32,.4);border-radius:99px;padding:2px 8px;flex-shrink:0} .service-mini h3{color:var(--paper);font-size:15.5px;margin-bottom:4px} .service-mini p{color:var(--paper-dim);font-size:13.5px} /* --- FAQ --- */ .faq-item{border-bottom:1px solid var(--line);padding:22px 0} .faq-item summary{cursor:pointer;font-weight:600;color:var(--paper);font-size:16px;list-style:none;display:flex;justify-content:space-between} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";color:var(--volt);font-size:20px} .faq-item[open] summary::after{content:"–"} .faq-item p{color:var(--paper-dim);margin-top:12px;font-size:14.5px} .other-barrios{display:flex;flex-wrap:wrap;gap:10px} .other-barrios a{border:1px solid var(--line);padding:8px 14px;font-size:13px;color:var(--paper-dim);border-radius:99px} .other-barrios a:hover{border-color:var(--volt);color:var(--volt)} /* --- Formulario de contacto --- */ .contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px} @media(max-width:900px){.contact-grid{grid-template-columns:1fr}} .form-group{margin-bottom:20px} .form-group label{display:block;font-size:13.5px;font-weight:600;color:var(--paper);margin-bottom:8px} .form-group input,.form-group textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--paper);padding:12px 14px;font-family:var(--sans);font-size:16px;border-radius:var(--radius);transition:border-color .15s} .form-group input:focus,.form-group textarea:focus{border-color:var(--volt);outline:none} .form-group textarea{resize:vertical;min-height:130px} .form-note{font-size:12.5px;color:var(--paper-dim);margin-top:-8px;margin-bottom:20px} .form-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px} .form-check input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--volt);cursor:pointer} .form-check label{font-size:13.5px;color:var(--paper-dim);font-weight:400;cursor:pointer} /* --- Placeholder de imagen (a sustituir por foto real) --- */ .img-placeholder{ aspect-ratio:4/3;width:100%;border-radius:var(--radius); background:var(--ink-2);border:1px dashed var(--line); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; color:var(--paper-dim);overflow:hidden;position:relative; } .img-placeholder svg{width:34px;height:34px;opacity:.5} .img-placeholder span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-align:center;padding:0 16px;opacity:.7} .img-placeholder img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} @media(max-width:800px){.gallery-grid{grid-template-columns:1fr}} .testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.testimonial-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.testimonial-grid{grid-template-columns:1fr}} .testimonial-card{background:var(--ink-2);border:1px solid var(--line);padding:24px;border-radius:var(--radius);display:flex;flex-direction:column} .testimonial-card .stars{color:#FBBC05;letter-spacing:1px;font-size:14px;margin-bottom:12px;display:block} .testimonial-card p{color:var(--paper-dim);font-size:14.5px;line-height:1.6;margin-bottom:14px;flex-grow:1} .testimonial-card .author{color:var(--paper);font-weight:600;font-size:14px} .hp-field{position:absolute;left:-9999px;top:-9999px} .form-msg{padding:14px 18px;border-radius:var(--radius);font-size:14.5px;margin-bottom:22px;border:1px solid} .form-msg.error{background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.4);color:#ff8a8a} .contact-info-card{border:1px solid var(--line);padding:28px;background:var(--ink-2)} .contact-info-card h3{color:var(--paper);font-size:17px;margin-bottom:18px} .contact-info-row{display:flex;align-items:center;gap:14px;margin-bottom:16px} .contact-info-row a{color:var(--paper);font-weight:600;font-size:15px} .contact-info-row span.lbl{display:block;font-size:12px;color:var(--paper-dim)} /* --- Barra fija de contacto rápido (solo móvil) --- */ .mobile-sticky-bar{display:none} @media(max-width:640px){ .mobile-sticky-bar{ display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:70; background:var(--ink-2);border-top:1px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); } .mobile-sticky-bar a{flex:1;text-align:center;padding:13px 10px;border-radius:var(--radius);font-weight:700;font-size:14px;white-space:nowrap} .msb-call{background:var(--volt);color:#1A1200} .msb-wa{background:var(--ink);border:1px solid var(--line);color:var(--paper)} body{padding-bottom:66px} } /* --- Insight box: contenido único por barrio (arquitectura/instalación típica) --- */ .insight-box{border-left:3px solid var(--volt);background:var(--ink-2);padding:26px 28px;border-radius:0 var(--radius) var(--radius) 0} .insight-box p{color:var(--paper-dim);font-size:15.5px;line-height:1.7} .insight-box b{color:var(--paper)} /* --- Resumen estructurado / tabla (bloques pensados para extracción por IA y rich snippets) --- */ .ai-summary{border-left:3px solid var(--volt);background:var(--ink-2);padding:26px 28px;border-radius:0 var(--radius) var(--radius) 0} .ai-summary p{color:var(--paper-dim);font-size:15px;line-height:1.7} .ai-summary p+p{margin-top:14px} .ai-summary b{color:var(--paper)} .ai-summary ul{margin-top:6px} .ai-summary li{color:var(--paper-dim);font-size:14.5px;padding:3px 0} .data-table-wrap{overflow-x:auto;border:1px solid var(--line);-webkit-overflow-scrolling:touch} .data-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px} .data-table th{background:var(--ink-3);color:var(--volt);text-align:left;padding:12px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--line)} .data-table td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--paper-dim)} .data-table tr:last-child td{border-bottom:none} .data-table td:first-child{color:var(--paper);font-weight:600} .foot-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;padding:18px 24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--paper-dim)} .foot-trust .google-rating-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.06);text-decoration:none;color:inherit;font-family:var(--sans)} .foot-trust .google-rating-badge .stars{color:#FBBC05;letter-spacing:1px} .foot-trust .google-rating-badge .count{color:var(--paper-dim)} /* === NINCHIP conversion + accessibility layer === */ :root{ --focus-ring: 0 0 0 3px rgba(255,176,32,.35); } html{scroll-behavior:smooth} body{overflow-x:hidden} a,button,input,select,textarea{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)} img{max-width:100%;height:auto} .skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;padding:.7rem 1rem;border-radius:.5rem;background:#111;color:#fff} .skip-link:focus{top:1rem} .ninchip-urgency{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.65rem; padding:.55rem 1rem;background:#ffb020;color:#111;font-weight:800;text-align:center; font-size:.92rem;position:relative;z-index:50 } .ninchip-urgency a{color:#111;text-decoration:underline;text-underline-offset:3px} .ninchip-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.2rem} .ninchip-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; min-height:48px;padding:.8rem 1.1rem;border-radius:.65rem;font-weight:800; text-decoration:none!important;border:2px solid transparent } .ninchip-btn-primary{background:#ffb020;color:#111!important} .ninchip-btn-secondary{background:transparent;color:inherit!important;border-color:currentColor} .ninchip-btn:hover{transform:translateY(-1px)} .ninchip-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0} .ninchip-choice{padding:1.25rem;border:1px solid rgba(255,255,255,.14);border-radius:1rem;background:rgba(255,255,255,.035)} .ninchip-choice h2{margin-top:0} .ninchip-choice p{margin-bottom:.75rem} .ninchip-fixed-cta{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:1000; padding:.6rem;background:rgba(16,20,27,.96);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.12) } .ninchip-fixed-cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:760px;margin:auto} .ninchip-fixed-cta a{min-height:46px;display:flex;align-items:center;justify-content:center;border-radius:.55rem;font-weight:800;text-decoration:none} .ninchip-call{background:#ffb020;color:#111} .ninchip-wa{background:#fff;color:#111} .ninchip-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1.5rem 0} .ninchip-trust div{padding:.9rem;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;text-align:center;font-size:.9rem} .ninchip-problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem} .ninchip-problem-grid a{display:block;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:.7rem;text-decoration:none;font-weight:700} .ninchip-breadcrumb{font-size:.88rem;opacity:.8;margin:.75rem 0} @media(max-width:760px){ .ninchip-choice-grid,.ninchip-problem-grid{grid-template-columns:1fr} .ninchip-trust{grid-template-columns:repeat(2,minmax(0,1fr))} .ninchip-fixed-cta{display:block} body{padding-bottom:64px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important} }