/* ================================================================ CSS GLOBAL BLINDADO v3 · /agencia-sem - Acotado: las reglas visuales actuan dentro de .hero / .creds / .sec. Unica excepcion: ocultacion temporal del menu flotante 6071 en la pagina 11503. Footer, resto de popups y WhatsApp quedan intactos. - !important solo en tipografia, color, fondos, sombras, margenes, paddings y bordes (lo que Astra y el kit disputan). - display / opacity / transform / animation / medidas quedan libres: los gestiona el JavaScript de la pagina. El HTML de las secciones NO cambia. ================================================================ */ /* Ocultacion temporal del menu flotante global solo en Agencia SEM. Sustituir por una exclusion de condiciones de Elementor cuando el editor de popups vuelva a cargar correctamente. */ body .elementor-location-header, body [data-elementor-type="header"], body [data-elementor-type="popup"][data-elementor-id="6071"], body .elementor-popup-modal[data-elementor-id="6071"], body .elementor-location-popup[data-elementor-id="6071"], body .elementor-element-6071, body .elementor-element[data-id="6071"], body [class*="elementor-6071"], body [id*="elementor-popup-modal-6071"]{display:none!important;visibility:hidden!important;pointer-events:none!important} @font-face{ font-family:"Google Font"; src:url("https://www.webble.es/wp-content/uploads/2026/08/GoogleSans-webble-latin.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; } /* ===== Iconos Tabler auto-hospedados (subconjunto) ===== */ @font-face{font-family:'tabler-icons';font-style:normal;font-weight:400;font-display:block;src:url(data:font/woff2;base64,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) format('woff2')} :where(.hero,.creds,.sec) .ti{font-family:'tabler-icons'!important;font-style:normal!important;font-weight:400!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;line-height:1!important;speak:none} :where(.hero,.creds,.sec) .ti-adjustments:before{content:"\ea03"} :where(.hero,.creds,.sec) .ti-arrow-right:before{content:"\ea1f"} :where(.hero,.creds,.sec) .ti-arrows-right-left:before{content:"\edb2"} :where(.hero,.creds,.sec) .ti-brand-google-play:before{content:"\ed25"} :where(.hero,.creds,.sec) .ti-brand-linkedin:before{content:"\ec8c"} :where(.hero,.creds,.sec) .ti-brand-youtube:before{content:"\ec90"} :where(.hero,.creds,.sec) .ti-building:before{content:"\ea4f"} :where(.hero,.creds,.sec) .ti-chart-bar:before{content:"\ea59"} :where(.hero,.creds,.sec) .ti-chart-dots:before{content:"\ee2f"} :where(.hero,.creds,.sec) .ti-check:before{content:"\ea5e"} :where(.hero,.creds,.sec) .ti-chevron-down:before{content:"\ea5f"} :where(.hero,.creds,.sec) .ti-device-mobile:before{content:"\ea8a"} :where(.hero,.creds,.sec) .ti-info-circle:before{content:"\eac5"} :where(.hero,.creds,.sec) .ti-list-check:before{content:"\eb6a"} :where(.hero,.creds,.sec) .ti-minus:before{content:"\eaf2"} :where(.hero,.creds,.sec) .ti-photo:before{content:"\eb0a"} :where(.hero,.creds,.sec) .ti-plus:before{content:"\eb0b"} :where(.hero,.creds,.sec) .ti-search:before{content:"\eb1c"} :where(.hero,.creds,.sec) .ti-shopping-bag:before{content:"\f5f8"} :where(.hero,.creds,.sec) .ti-trending-up:before{content:"\eb43"} :where(.hero,.creds,.sec) .ti-users:before{content:"\ebf2"} :where(.hero,.creds,.sec) .ti-x:before{content:"\eb55"}/* ---- RESET + TOKENS ---- */ .hero,.hero *,.creds,.creds *,.sec,.sec *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:#fff!important} .hero,.creds,.sec{font-family:"Google Font",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;color:#0A0E16!important} :root{ --navy:#0A0E16; --blue:#1a73e8; --blue-light:#e8f0fd; --green:#16a34a; --green-light:#dcfce7; --red:#dc2626; --red-light:#fee2e2; --gray:#F4F6F9; --gray-mid:#f9fafb; --border:#e5e7eb; --muted:#6b7280; --hint:#9ca3af;--amber:#d97706;--amber-light:#fef3c7; } @keyframes drawLine{from{stroke-dashoffset:700}to{stroke-dashoffset:0}} @keyframes flowRight{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}/* ---- UTILS ---- */ :where(.hero,.creds,.sec) .tag{display:inline-block;font-size:12px!important;font-weight:500!important;color:var(--blue)!important;text-transform:uppercase!important;letter-spacing:.1em!important;background:var(--blue-light)!important;padding:6px 16px!important;border-radius:20px!important;margin-bottom:20px!important} :where(.hero,.creds,.sec) .gsvg{width:15px;height:15px;flex-shrink:0} :where(.hero,.creds,.sec) .btn-primary{display:inline-block;background:var(--blue)!important;color:#fff!important;text-decoration:none!important;border-radius:9px!important;padding:14px 28px!important;font-size:15px!important;font-weight:500!important;border:none!important;cursor:pointer;transition:transform .2s;font-family:inherit!important} :where(.hero,.creds,.sec) .btn-primary:hover{transform:translateY(-3px)} :where(.hero,.creds,.sec) .btn-outline{display:inline-flex;align-items:center;gap:6px;background:#fff!important;color:var(--blue)!important;text-decoration:none!important;border:2px solid var(--blue)!important;border-radius:9px!important;padding:13px 22px!important;font-size:15px!important;font-weight:500!important;cursor:pointer;transition:transform .2s;font-family:inherit!important} :where(.hero,.creds,.sec) .btn-outline:hover{transform:translateY(-3px)} :where(.hero,.creds,.sec) .btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff!important;color:var(--navy)!important;text-decoration:none!important;border:1px solid var(--border)!important;border-radius:9px!important;padding:14px 22px!important;font-size:15px!important;font-weight:500!important;cursor:pointer;transition:transform .2s;font-family:inherit!important} :where(.hero,.creds,.sec) .btn-ghost:hover{transform:translateY(-3px)}/* ---- SECCIÓN BASE ---- */ .sec{padding:100px 80px!important} .sec--gray{background:var(--gray)!important} .sec--white{background:#fff!important} :where(.hero,.creds,.sec) .sec-header{text-align:center!important;margin-bottom:64px!important} :where(.hero,.creds,.sec) .sec-title{font-size:38px!important;font-weight:500!important;color:var(--navy)!important;margin:0 0 16px!important;line-height:1.2!important} :where(.hero,.creds,.sec) .sec-sub{font-size:17px!important;color:var(--muted)!important;max-width:620px;margin:0 auto!important;line-height:1.7!important}/* ---- NAV ---- */ :where(.hero,.creds,.sec) .nav{padding:16px 80px!important;display:flex;align-items:center;justify-content:space-between;background:var(--navy)!important;position:sticky;top:0;z-index:100} :where(.hero,.creds,.sec) .nav-links{display:flex;gap:28px} :where(.hero,.creds,.sec) .nav-link{font-size:13px!important;color:rgba(255,255,255,.5)!important;text-decoration:none!important;transition:color .15s} :where(.hero,.creds,.sec) .nav-link:hover{color:#fff!important} :where(.hero,.creds,.sec) .nav-ham{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px!important;background:none!important;border:none!important} :where(.hero,.creds,.sec) .nav-ham span{display:block;width:20px;height:1.5px;background:rgba(255,255,255,.7)!important;border-radius:2px!important} :where(.hero,.creds,.sec) .nav-mobile{display:none;flex-direction:column;background:var(--navy)!important;padding:16px 20px!important;gap:4px;border-top:.5px solid rgba(255,255,255,.08)!important} :where(.hero,.creds,.sec) .nav-mobile.open{display:flex} :where(.hero,.creds,.sec) .nav-mobile a{font-size:15px!important;color:rgba(255,255,255,.6)!important;text-decoration:none!important;padding:10px 0!important;border-bottom:.5px solid rgba(255,255,255,.06)!important}/* ---- HERO ---- */ .hero{padding:80px 80px 72px!important;text-align:center!important;background:linear-gradient(180deg,#EBF2FD 0%,#fff 100%)!important} :where(.hero,.creds,.sec) .hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff!important;border:.5px solid #93c4f8!important;border-radius:20px!important;padding:7px 16px!important;margin-bottom:16px!important} :where(.hero,.creds,.sec) .reading-time{display:inline-flex;align-items:center;gap:6px;font-size:12px!important;color:var(--hint)!important;background:var(--gray)!important;padding:5px 12px!important;border-radius:20px!important;margin-bottom:20px!important} .hero h1{font-size:52px!important;font-weight:500!important;letter-spacing:-.02em!important;color:var(--navy)!important;line-height:1.15!important;margin:0 0 24px!important;max-width:860px;margin-left:auto!important;margin-right:auto!important} :where(.hero,.creds,.sec) .hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px!important}/* ---- TOC ---- */ :where(.hero,.creds,.sec) .toc{background:var(--gray)!important;border-radius:16px!important;padding:24px 28px!important;max-width:680px;margin:48px auto 0!important;text-align:left!important} :where(.hero,.creds,.sec) .toc-label{font-size:13px!important;font-weight:500!important;color:var(--muted)!important;margin-bottom:12px!important;text-transform:uppercase!important;letter-spacing:.06em!important} :where(.hero,.creds,.sec) .toc-link{display:flex;align-items:center;gap:8px;font-size:14px!important;color:var(--blue)!important;text-decoration:none!important;padding:5px 0!important} :where(.hero,.creds,.sec) .toc-num{font-size:11px!important;font-weight:500!important;color:var(--hint)!important;width:20px;flex-shrink:0}/* ---- CREDS ---- */ .creds{padding:26px 80px!important;display:flex;align-items:center;justify-content:space-between;background:var(--gray-mid)!important;border-top:.5px solid var(--border)!important;border-bottom:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .cred-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1} :where(.hero,.creds,.sec) .cred-sep{width:.5px;height:36px;background:var(--border)!important}/* ---- QUÉ ES SEM ---- */ :where(.hero,.creds,.sec) .sem-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;max-width:1120px;margin:0 auto 56px!important} :where(.hero,.creds,.sec) .sem-text p{font-size:16px!important;color:var(--muted)!important;line-height:1.8!important;margin-bottom:16px!important} :where(.hero,.creds,.sec) .sem-text strong{color:var(--navy)!important;font-weight:500!important} :where(.hero,.creds,.sec) .pill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} :where(.hero,.creds,.sec) .pill{background:#fff!important;border:.5px solid var(--border)!important;border-radius:12px!important;padding:16px 18px!important} :where(.hero,.creds,.sec) .pill-title{font-size:13px!important;font-weight:500!important;color:var(--navy)!important;margin-bottom:4px!important} :where(.hero,.creds,.sec) .pill-desc{font-size:12px!important;color:var(--muted)!important;line-height:1.5!important} :where(.hero,.creds,.sec) .cuando-box{background:#fff!important;border-radius:20px!important;padding:40px 48px!important;border:.5px solid var(--border)!important;max-width:1120px;margin:0 auto!important} :where(.hero,.creds,.sec) .cuando-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px!important} :where(.hero,.creds,.sec) .cuando-item{display:flex;align-items:flex-start;gap:12px} :where(.hero,.creds,.sec) .cuando-icon{width:36px;height:36px;border-radius:9px!important;background:var(--blue-light)!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}/* ---- SERVICIOS ---- */ :where(.hero,.creds,.sec) .srv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1120px;margin:0 auto!important} :where(.hero,.creds,.sec) .srv-card{background:#fff!important;border:.5px solid var(--border)!important;border-radius:16px!important;padding:32px 36px!important;transition:all .2s} :where(.hero,.creds,.sec) .srv-card:hover{border-color:#93c4f8!important;transform:translateY(-3px);box-shadow:0 12px 32px rgba(26,115,232,.08)!important} :where(.hero,.creds,.sec) .srv-icon{width:48px;height:48px;border-radius:12px!important;background:var(--blue-light)!important;display:flex;align-items:center;justify-content:center;margin-bottom:16px!important} :where(.hero,.creds,.sec) .srv-title{font-size:20px!important;font-weight:500!important;color:var(--navy)!important;margin-bottom:10px!important} :where(.hero,.creds,.sec) .srv-desc{font-size:14px!important;color:var(--muted)!important;line-height:1.7!important;margin-bottom:16px!important} :where(.hero,.creds,.sec) .srv-tags{display:flex;flex-wrap:wrap;gap:6px} :where(.hero,.creds,.sec) .srv-tag{font-size:11px!important;padding:3px 10px!important;border-radius:12px!important;background:var(--gray)!important;color:var(--muted)!important;border:.5px solid var(--border)!important}/* ---- COMPARE ---- */ :where(.hero,.creds,.sec) .cmp-grid{display:grid;grid-template-columns:1fr 80px 1fr;align-items:stretch;max-width:1120px;margin:0 auto!important} :where(.hero,.creds,.sec) .cmp-col{position:relative;border-radius:20px!important;padding:40px 36px!important;border:.5px solid!important;transition:transform .28s ease,box-shadow .28s ease} :where(.hero,.creds,.sec) .cmp-col--red{background:linear-gradient(180deg,#fff6f6 0%,#fdeeee 100%)!important;border-color:#f6cccc!important;box-shadow:0 10px 30px rgba(220,38,38,.05)!important} :where(.hero,.creds,.sec) .cmp-col--green{background:linear-gradient(180deg,#f6fbf3 0%,#eef6ea 100%)!important;border-color:#bfe6cb!important;box-shadow:0 18px 44px rgba(22,163,74,.12)!important} :where(.hero,.creds,.sec) .cmp-col:hover{transform:translateY(-3px)} :where(.hero,.creds,.sec) .cmp-col--red:hover{box-shadow:0 16px 38px rgba(220,38,38,.09)!important} :where(.hero,.creds,.sec) .cmp-col--green:hover{box-shadow:0 24px 52px rgba(22,163,74,.16)!important} :where(.hero,.creds,.sec) .cmp-sep{display:flex;align-items:center;justify-content:center} :where(.hero,.creds,.sec) .cmp-sep-circle{width:52px;height:52px;border-radius:50%!important;background:#fff!important;border:.5px solid var(--border)!important;box-shadow:0 8px 22px rgba(16,24,40,.12)!important;display:flex;align-items:center;justify-content:center} :where(.hero,.creds,.sec) .ck{display:flex;align-items:flex-start;gap:14px;padding:18px 0!important;border-bottom:.5px solid!important;border-radius:8px!important;transition:background .2s ease} :where(.hero,.creds,.sec) .ck:last-child{border-bottom:none!important} :where(.hero,.creds,.sec) .ck--red{border-color:#f6cccc!important} :where(.hero,.creds,.sec) .ck--green{border-color:#bfe6cb!important} :where(.hero,.creds,.sec) .cmp-col--red .ck:hover{background:rgba(220,38,38,.045)!important} :where(.hero,.creds,.sec) .cmp-col--green .ck:hover{background:rgba(22,163,74,.05)!important} :where(.hero,.creds,.sec) .cc{width:26px;height:26px;border-radius:50%!important;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px!important;transition:transform .2s ease} :where(.hero,.creds,.sec) .cmp-col--red .cc{box-shadow:0 1px 3px rgba(220,38,38,.20)!important} :where(.hero,.creds,.sec) .cmp-col--green .cc{box-shadow:0 1px 4px rgba(22,163,74,.24)!important} :where(.hero,.creds,.sec) .cmp-col .ck:hover .cc{transform:scale(1.1)} :where(.hero,.creds,.sec) .tabs-mob{display:none} :where(.hero,.creds,.sec) .tab-btns{display:flex;gap:8px;margin-bottom:16px!important} :where(.hero,.creds,.sec) .tab-btn{flex:1;padding:10px!important;border-radius:8px!important;font-size:13px!important;font-weight:500!important;cursor:pointer;font-family:inherit!important;transition:all .15s;border:.5px solid!important} :where(.hero,.creds,.sec) .tab-panel{border-radius:14px!important;padding:16px!important} :where(.hero,.creds,.sec) .tab-panel--red{background:#fef2f2!important} :where(.hero,.creds,.sec) .tab-panel--green{background:#f0f7ee!important;display:none}/* ---- TABLA COMPARATIVA ---- */ :where(.hero,.creds,.sec) .tbl-wrap{overflow-x:auto;margin-top:72px!important} :where(.hero,.creds,.sec) .tbl{width:100%;border-collapse:collapse!important;max-width:1000px;margin:0 auto!important} :where(.hero,.creds,.sec) .tbl th{padding:14px 20px!important;font-size:13px!important;font-weight:500!important;text-align:left!important;border-bottom:1px solid var(--border)!important} :where(.hero,.creds,.sec) .tbl td{padding:14px 20px!important;font-size:14px!important;border-bottom:.5px solid var(--border)!important;color:var(--muted)!important} :where(.hero,.creds,.sec) .tbl tr:last-child td{border-bottom:none!important} :where(.hero,.creds,.sec) .tbl .col-wb{background:#f0f7ff!important;color:var(--navy)!important} :where(.hero,.creds,.sec) .yes{color:var(--green)!important;font-weight:500!important} :where(.hero,.creds,.sec) .no{color:var(--red)!important} :where(.hero,.creds,.sec) .mid{color:#f59e0b!important;font-weight:500!important}/* ---- CADENA ---- */ :where(.hero,.creds,.sec) .chain-row{display:flex;align-items:stretch;gap:0;margin-bottom:16px!important} :where(.hero,.creds,.sec) .step{background:#fff!important;border-radius:14px!important;border:.5px solid var(--border)!important;padding:22px 18px!important;text-align:center!important;position:relative;transition:all .2s;flex:1;min-width:0;display:flex;flex-direction:column} :where(.hero,.creds,.sec) .step:hover{border-color:var(--blue)!important;transform:translateY(-4px);box-shadow:0 12px 32px rgba(26,115,232,.1)!important} :where(.hero,.creds,.sec) .step:hover .si{background:var(--blue)!important} :where(.hero,.creds,.sec) .step:hover .si i{color:#fff!important} :where(.hero,.creds,.sec) .si{width:44px;height:44px;border-radius:11px!important;background:var(--blue-light)!important;display:flex;align-items:center;justify-content:center;margin:0 auto 12px!important;transition:all .2s;flex-shrink:0} :where(.hero,.creds,.sec) .sn{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:10px!important;font-weight:500!important;color:var(--blue)!important;background:var(--blue-light)!important;padding:2px 9px!important;border-radius:20px!important;white-space:nowrap} :where(.hero,.creds,.sec) .st{font-size:13px!important;font-weight:500!important;color:var(--navy)!important;margin-bottom:6px!important;line-height:1.3!important} :where(.hero,.creds,.sec) .sd{font-size:11px!important;color:var(--muted)!important;line-height:1.55!important;margin-bottom:5px!important} :where(.hero,.creds,.sec) .si2{font-size:11px!important;color:var(--muted)!important;line-height:1.55!important;margin-bottom:8px!important;font-style:italic!important} :where(.hero,.creds,.sec) .sk{font-size:10px!important;font-weight:500!important;color:var(--green)!important;background:var(--green-light)!important;padding:3px 8px!important;border-radius:20px!important;display:inline-block;line-height:1.5!important;margin-top:auto!important} :where(.hero,.creds,.sec) .arr{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px} :where(.hero,.creds,.sec) .step.last{border-color:var(--blue)!important;background:#f0f7ff!important} :where(.hero,.creds,.sec) .step.last .si{background:var(--blue)!important} :where(.hero,.creds,.sec) .step.last .sn{background:var(--blue)!important;color:#fff!important} :where(.hero,.creds,.sec) .acc-wrap{display:none;flex-direction:column;gap:10px} :where(.hero,.creds,.sec) .acc-item{background:#fff!important;border-radius:12px!important;border:.5px solid var(--border)!important;overflow:hidden} :where(.hero,.creds,.sec) .acc-item.open{border-color:#93c4f8!important} :where(.hero,.creds,.sec) .acc-hdr{display:flex;align-items:center;gap:12px;padding:16px 18px!important;cursor:pointer} :where(.hero,.creds,.sec) .acc-num{width:32px;height:32px;border-radius:50%!important;background:var(--gray)!important;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:500!important;color:var(--muted)!important;flex-shrink:0;transition:all .2s} :where(.hero,.creds,.sec) .acc-item.open .acc-num{background:var(--blue)!important;color:#fff!important} :where(.hero,.creds,.sec) .acc-title{font-size:15px!important;font-weight:500!important;color:var(--navy)!important;flex:1} :where(.hero,.creds,.sec) .acc-arrow{font-size:16px!important;color:var(--hint)!important;transition:transform .2s;flex-shrink:0} :where(.hero,.creds,.sec) .acc-item.open .acc-arrow{transform:rotate(180deg);color:var(--blue)!important} :where(.hero,.creds,.sec) .acc-body{font-size:13px!important;color:var(--muted)!important;line-height:1.65!important;padding:0 18px 16px 60px!important;display:none} :where(.hero,.creds,.sec) .acc-item.open .acc-body{display:block}/* ---- MANUEL ---- */ :where(.hero,.creds,.sec) .feat{display:flex;align-items:center;gap:14px} :where(.hero,.creds,.sec) .fi{width:40px;height:40px;border-radius:10px!important;background:var(--blue-light)!important;display:flex;align-items:center;justify-content:center;flex-shrink:0} :where(.hero,.creds,.sec) .stat-box{background:var(--gray)!important;border-radius:10px!important;padding:14px!important;text-align:center!important} :where(.hero,.creds,.sec) .stat-val{font-size:15px!important;font-weight:500!important} :where(.hero,.creds,.sec) .stat-lab{font-size:10px!important;color:var(--hint)!important}/* ---- AUDITORÍA ---- */ :where(.hero,.creds,.sec) .audit-card{background:#fff!important;border-radius:20px!important;padding:40px!important;border:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .audit-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0!important;border-bottom:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .audit-item:last-child{border-bottom:none!important}/* ---- CASOS ---- */ :where(.hero,.creds,.sec) .mcard{background:#fff!important;border:.5px solid var(--border)!important;border-radius:16px!important;overflow:hidden;transition:all .2s} :where(.hero,.creds,.sec) .mcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.08)!important;border-color:#93c4f8!important} :where(.hero,.creds,.sec) .card-head{padding:20px 22px 0!important} :where(.hero,.creds,.sec) .card-icon{display:flex;gap:3px;margin-bottom:10px!important} :where(.hero,.creds,.sec) .card-icon span{display:block;border-radius:2px!important;background:var(--blue)!important;opacity:.7} :where(.hero,.creds,.sec) .card-title{font-size:16px!important;font-weight:500!important;color:var(--navy)!important;margin-bottom:3px!important} :where(.hero,.creds,.sec) .card-desc{font-size:12px!important;color:var(--muted)!important;margin-bottom:14px!important} :where(.hero,.creds,.sec) .card-tag{display:inline-block;font-size:10px!important;font-weight:500!important;color:var(--blue)!important;background:var(--blue-light)!important;padding:2px 8px!important;border-radius:20px!important;margin-bottom:12px!important} :where(.hero,.creds,.sec) .dot-bg{position:absolute;inset:0;background-image:radial-gradient(circle,#d1d5db 1px,transparent 1px)!important;background-size:18px 18px!important;opacity:.4} :where(.hero,.creds,.sec) .mini-card{background:#fff!important;border:.5px solid var(--border)!important;border-radius:10px!important;padding:12px 14px!important;position:absolute;z-index:4;box-shadow:0 2px 16px rgba(0,0,0,.08)!important} :where(.hero,.creds,.sec) .tooltip{background:#fff!important;border:.5px solid var(--border)!important;border-radius:8px!important;padding:7px 10px!important;position:absolute;pointer-events:none;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.1)!important;display:none;white-space:nowrap} :where(.hero,.creds,.sec) .kpi-row{display:flex;gap:6px;padding:14px 22px!important} :where(.hero,.creds,.sec) .kpi{flex:1;background:var(--gray)!important;border-radius:8px!important;padding:10px!important;text-align:center!important} :where(.hero,.creds,.sec) .ss-card{background:#fff!important;border:.5px solid var(--border)!important;border-radius:16px!important;overflow:hidden;transition:all .2s} :where(.hero,.creds,.sec) .ss-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.08)!important;border-color:#93c4f8!important} :where(.hero,.creds,.sec) .pos-row{display:flex;align-items:center;gap:6px;padding:6px 8px!important;border-bottom:.5px solid #f3f4f6!important} :where(.hero,.creds,.sec) .pos-row:last-child{border-bottom:none!important} :where(.hero,.creds,.sec) .pos-num{width:18px;height:18px;border-radius:4px!important;background:var(--blue)!important;display:flex;align-items:center;justify-content:center;font-size:9px!important;font-weight:500!important;color:#fff!important;flex-shrink:0} :where(.hero,.creds,.sec) .pos-kw{font-size:11px!important;color:var(--navy)!important;flex:1} :where(.hero,.creds,.sec) .pos-badge{font-size:9px!important;color:var(--green)!important;font-weight:500!important;background:var(--green-light)!important;padding:1px 6px!important;border-radius:20px!important} :where(.hero,.creds,.sec) .carousel{display:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding-bottom:4px!important} :where(.hero,.creds,.sec) .carousel::-webkit-scrollbar{display:none} :where(.hero,.creds,.sec) .carousel-card{flex:0 0 88%;scroll-snap-align:start;border-radius:16px!important;overflow:hidden;border:.5px solid var(--border)!important;background:#fff!important}/* ---- RESEÑAS ---- */ :where(.hero,.creds,.sec) .rcard{background:#fff!important;border:.5px solid var(--border)!important;border-radius:16px!important;padding:24px 26px!important;transition:transform .2s,border-color .2s} :where(.hero,.creds,.sec) .rcard:hover{transform:translateY(-3px);border-color:#93c4f8!important} :where(.hero,.creds,.sec) .avatar{width:42px;height:42px;border-radius:50%!important;display:flex;align-items:center;justify-content:center;font-size:15px!important;font-weight:500!important;flex-shrink:0;color:#fff!important} :where(.hero,.creds,.sec) .stars{display:flex;gap:2px;margin-bottom:12px!important} :where(.hero,.creds,.sec) .star{color:#f59e0b!important;font-size:13px!important}/* ---- CIUDADES ---- */ :where(.hero,.creds,.sec) .ciudad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto 40px!important} :where(.hero,.creds,.sec) .ciudad-card{background:#fff!important;border:.5px solid var(--border)!important;border-radius:14px!important;padding:24px 28px!important;text-decoration:none!important;transition:all .2s;display:block} :where(.hero,.creds,.sec) .ciudad-card:hover{border-color:#93c4f8!important;transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,115,232,.08)!important} :where(.hero,.creds,.sec) .ciudad-name{font-size:18px!important;font-weight:500!important;color:var(--navy)!important;margin-bottom:6px!important} :where(.hero,.creds,.sec) .ciudad-kw{font-size:13px!important;color:var(--blue)!important;margin-bottom:8px!important} :where(.hero,.creds,.sec) .ciudad-desc{font-size:13px!important;color:var(--muted)!important;line-height:1.5!important}/* ---- FAQs ---- */ :where(.hero,.creds,.sec) .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1120px;margin:0 auto!important;align-items:start} :where(.hero,.creds,.sec) .faq-item{background:#fff!important;border-radius:14px!important;border:.5px solid var(--border)!important;overflow:hidden;transition:border-color .2s} :where(.hero,.creds,.sec) .faq-item.open{border-color:#93c4f8!important} :where(.hero,.creds,.sec) .faq-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px!important;cursor:pointer} :where(.hero,.creds,.sec) .faq-q{font-size:15px!important;font-weight:500!important;color:var(--navy)!important;line-height:1.4!important;flex:1} :where(.hero,.creds,.sec) .faq-icon{width:24px;height:24px;border-radius:50%!important;background:var(--blue)!important;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px!important} :where(.hero,.creds,.sec) .faq-body{font-size:14px!important;color:var(--muted)!important;line-height:1.75!important;padding:0 24px 22px!important;display:none} :where(.hero,.creds,.sec) .faq-item.open .faq-body{display:block} :where(.hero,.creds,.sec) .faq-body strong{color:var(--navy)!important;font-weight:500!important}/* ---- BLOG ---- */ :where(.hero,.creds,.sec) .blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:920px;margin:0 auto!important} :where(.hero,.creds,.sec) .blog-card{background:#fff!important;border:.5px solid var(--border)!important;border-radius:14px!important;padding:24px 26px!important;text-decoration:none!important;transition:all .2s;display:block;box-shadow:0 4px 18px rgba(16,24,40,.06)!important} :where(.hero,.creds,.sec) .blog-card:hover{border-color:var(--blue)!important;box-shadow:0 12px 30px rgba(16,24,40,.12)!important;transform:translateY(-4px)} :where(.hero,.creds,.sec) .blog-cat{font-size:11px!important;font-weight:500!important;color:var(--blue)!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-bottom:8px!important} :where(.hero,.creds,.sec) .blog-title{font-size:16px!important;font-weight:500!important;color:var(--navy)!important;line-height:1.35!important;margin-bottom:8px!important} :where(.hero,.creds,.sec) .blog-desc{font-size:13px!important;color:var(--muted)!important;line-height:1.55!important} :where(.hero,.creds,.sec) .blog-read{font-size:12px!important;color:var(--blue)!important;margin-top:12px!important;display:flex;align-items:center;gap:4px}/* ---- SEO TEXT ---- */ :where(.hero,.creds,.sec) .seo-block{background:var(--gray)!important;border-radius:20px!important;padding:48px 56px!important;max-width:1120px;margin:0 auto!important} :where(.hero,.creds,.sec) .seo-block h2{font-size:28px!important;font-weight:500!important;color:var(--navy)!important;margin-bottom:20px!important;line-height:1.25!important} :where(.hero,.creds,.sec) .seo-block h3{font-size:20px!important;font-weight:500!important;color:var(--navy)!important;margin:32px 0 12px!important} :where(.hero,.creds,.sec) .seo-block p{font-size:15px!important;color:var(--muted)!important;line-height:1.8!important;margin-bottom:16px!important} :where(.hero,.creds,.sec) .seo-block strong{color:var(--navy)!important;font-weight:500!important} :where(.hero,.creds,.sec) .seo-block ul{padding-left:20px!important;margin-bottom:16px!important} :where(.hero,.creds,.sec) .seo-block ul li{font-size:15px!important;color:var(--muted)!important;line-height:1.8!important;margin-bottom:6px!important} /* ---- RESPONSIVE ---- */ @media(max-width:768px){/* === Coherencia tipográfica móvil === */ :where(.hero,.creds,.sec) .sec-sub{font-size:16px!important;line-height:1.6!important} :where(.hero,.creds,.sec) .seo-block h2{font-size:23px!important} :where(.hero,.creds,.sec) .fmt-h,:where(.hero,.creds,.sec) .srv-title,:where(.hero,.creds,.sec) .scard-title,:where(.hero,.creds,.sec) .seo-block h3{font-size:20px!important;line-height:1.3!important} :where(.hero,.creds,.sec) .ciudad-name{font-size:19px!important} :where(.hero,.creds,.sec) .fmt-d,:where(.hero,.creds,.sec) .srv-desc,:where(.hero,.creds,.sec) .scard-desc,:where(.hero,.creds,.sec) .sem-text p,:where(.hero,.creds,.sec) .faq-body,:where(.hero,.creds,.sec) .seo-block p,:where(.hero,.creds,.sec) .seo-block ul li{font-size:15px!important;line-height:1.6!important} :where(.hero,.creds,.sec) .card-title,:where(.hero,.creds,.sec) .blog-title,:where(.hero,.creds,.sec) .faq-q{font-size:16px!important;line-height:1.3!important} :where(.hero,.creds,.sec) .card-desc,:where(.hero,.creds,.sec) .blog-desc,:where(.hero,.creds,.sec) .ciudad-desc{font-size:13px!important;line-height:1.5!important}/* cabeceras a medida (especialista/auditoría) coherentes en móvil */ #man-h2,#aud-h2{font-size:26px!important;text-align:center!important;line-height:1.25!important} #man-h2 + p,#aud-h2 + p,#aud-h2 + p + p{font-size:16px!important;text-align:center!important;line-height:1.6!important} #especialista .s05-grid > div > .tag,#auditoria .s05b-grid > div > .tag{display:block;width:fit-content;margin-left:auto!important;margin-right:auto!important} :where(.hero,.creds,.sec) .nav{padding:14px 20px!important}:where(.hero,.creds,.sec) .nav-links{display:none}:where(.hero,.creds,.sec) .nav-ham{display:flex} .hero{padding:36px 20px 28px!important} .hero h1{font-size:26px!important} :where(.hero,.creds,.sec) .toc{margin:28px 16px 0!important;padding:18px 20px!important} .sec{padding:48px 20px!important} :where(.hero,.creds,.sec) .sec-title{font-size:26px!important} :where(.hero,.creds,.sec) .sec-header{margin-bottom:32px!important} .creds{padding:14px 16px!important;flex-wrap:wrap} :where(.hero,.creds,.sec) .cred-item{min-width:50%;padding:10px 0!important;border-bottom:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .cred-sep{display:none} :where(.hero,.creds,.sec) .sem-grid{grid-template-columns:1fr;gap:32px} :where(.hero,.creds,.sec) .pill-grid{grid-template-columns:1fr} :where(.hero,.creds,.sec) .cuando-grid{grid-template-columns:1fr;gap:16px} :where(.hero,.creds,.sec) .cuando-box{padding:24px 20px!important} :where(.hero,.creds,.sec) .srv-grid{grid-template-columns:1fr} :where(.hero,.creds,.sec) .cmp-grid{display:none}:where(.hero,.creds,.sec) .tabs-mob{display:block} :where(.hero,.creds,.sec) .chain-row{display:none}:where(.hero,.creds,.sec) .acc-wrap{display:flex} :where(.hero,.creds,.sec) .s05-grid{grid-template-columns:1fr!important;gap:32px!important} :where(.hero,.creds,.sec) .s05b-grid{grid-template-columns:1fr!important;gap:32px!important} :where(.hero,.creds,.sec) .casos-desk{display:none!important}:where(.hero,.creds,.sec) .carousel{display:flex} :where(.hero,.creds,.sec) .r3-grid{grid-template-columns:1fr!important} :where(.hero,.creds,.sec) .r2-grid{grid-template-columns:1fr!important} :where(.hero,.creds,.sec) .faq-grid{grid-template-columns:1fr} :where(.hero,.creds,.sec) .ciudad-grid{grid-template-columns:1fr} :where(.hero,.creds,.sec) .blog-grid{grid-template-columns:1fr} :where(.hero,.creds,.sec) .seo-block{padding:28px 20px!important} :where(.hero,.creds,.sec) .tbl-wrap{overflow-x:auto}:where(.hero,.creds,.sec) .tbl{min-width:500px} :where(.hero,.creds,.sec) .chain-diff-inner{grid-template-columns:1fr!important;gap:16px!important} :where(.hero,.creds,.sec) .chain-diff-block{padding:26px 20px!important} :where(.hero,.creds,.sec) .chain-diff-h{font-size:20px!important;line-height:1.25!important;margin-bottom:8px!important} :where(.hero,.creds,.sec) .chain-diff-p{font-size:14px!important;line-height:1.55!important} :where(.hero,.creds,.sec) .chain-diff-cards span{font-size:13px!important;line-height:1.4!important} :where(.hero,.creds,.sec) .chain-diff-cards>div{padding:11px 13px!important;align-items:flex-start!important} :where(.hero,.creds,.sec) .hero-btns a{display:block;text-align:center!important;width:100%} }/* ---- Carrusel auto-scroll (pausa al hover) ---- */ :where(.hero,.creds,.sec) .mq-carousel{overflow:hidden;position:relative;padding:10px 0!important;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%)} :where(.hero,.creds,.sec) .mq-track{display:flex;width:max-content;animation:mqscroll var(--mqdur,40s) linear infinite;will-change:transform}@keyframes mqscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--setw,50%)),0,0)}}@media(hover:hover){:where(.hero,.creds,.sec) .mq-carousel:hover .mq-track{animation-play-state:paused}}:where(.hero,.creds,.sec) .mq-carousel.is-touch .mq-track{animation-play-state:paused}:where(.hero,.creds,.sec) .mq-track>*{margin-right:16px!important} :where(.hero,.creds,.sec) .mq-carousel::-webkit-scrollbar{display:none}:where(.hero,.creds,.sec) .mq-carousel.grabbing{cursor:grabbing;user-select:none} :where(.hero,.creds,.sec) .mq-carousel .rcard{flex:0 0 340px} :where(.hero,.creds,.sec) .mq-carousel .blog-card{flex:0 0 360px} @keyframes carousel-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (max-width:760px){:where(.hero,.creds,.sec) .mq-carousel .rcard,:where(.hero,.creds,.sec) .mq-carousel .blog-card{flex:0 0 74vw}}/* ===== Servicios SEM interactivo ===== */ :where(.hero,.creds,.sec) .srv2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1120px;margin:0 auto!important} :where(.hero,.creds,.sec) .scard{background:#fff!important;border:.5px solid var(--border)!important;border-radius:20px!important;padding:32px 34px 0!important;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex;flex-direction:column;overflow:hidden} :where(.hero,.creds,.sec) .scard:hover{border-color:#93c4f8!important;transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,40,.08)!important} :where(.hero,.creds,.sec) .scard-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px!important} :where(.hero,.creds,.sec) .scard-icon{width:46px;height:46px;border-radius:12px!important;background:var(--blue-light)!important;color:var(--blue)!important;display:flex;align-items:center;justify-content:center} :where(.hero,.creds,.sec) .scard-arrow{width:38px;height:38px;border-radius:10px!important;border:1px solid var(--border)!important;color:var(--navy)!important;display:flex;align-items:center;justify-content:center;transition:all .25s} :where(.hero,.creds,.sec) .scard:hover .scard-arrow{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;transform:rotate(0) scale(1.05)} :where(.hero,.creds,.sec) .scard-title{font-size:21px!important;font-weight:500!important;margin:0 0 8px!important} :where(.hero,.creds,.sec) .scard-desc{font-size:14.5px!important;color:var(--muted)!important;line-height:1.7!important;margin:0 0 24px!important}/* zona mockup: fondo de puntos tipo lienzo */ :where(.hero,.creds,.sec) .scard-mock{position:relative;flex:1 1 auto;margin:0 -34px!important;padding:26px 30px 30px!important;background-image:radial-gradient(var(--border) 1px,transparent 1px)!important;background-size:15px 15px!important;background-color:var(--gray-mid)!important;border-top:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .win{background:#fff!important;border:.5px solid var(--border)!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(16,24,40,.06)!important;overflow:hidden} :where(.hero,.creds,.sec) .win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px!important;border-bottom:.5px solid var(--border)!important;background:#fcfcfd!important} :where(.hero,.creds,.sec) .s2dot{width:8px;height:8px;border-radius:50%!important} :where(.hero,.creds,.sec) .win-label{margin-left:8px!important;font-size:11px!important;color:var(--hint)!important;font-weight:500!important} :where(.hero,.creds,.sec) .win-body{padding:16px!important}/* --- Card 1: anuncio Google --- */ :where(.hero,.creds,.sec) .serp-field{display:flex;align-items:center;gap:8px;border:1px solid var(--border)!important;border-radius:20px!important;padding:7px 14px!important;font-size:12px!important;color:var(--muted)!important;margin-bottom:14px!important} :where(.hero,.creds,.sec) .ad{position:relative} :where(.hero,.creds,.sec) .ad-badge{font-size:10px!important;font-weight:700!important;color:var(--navy)!important} :where(.hero,.creds,.sec) .ad-url{font-size:11px!important;color:var(--muted)!important;margin-left:6px!important} :where(.hero,.creds,.sec) .ad-title{color:#1a0dab!important;font-size:14px!important;font-weight:500!important;margin:3px 0!important} :where(.hero,.creds,.sec) .ad-desc{font-size:11.5px!important;color:var(--muted)!important;line-height:1.5!important} :where(.hero,.creds,.sec) .ad-pulse{position:absolute;inset:-8px -10px;border:1.5px solid var(--blue)!important;border-radius:10px!important;opacity:0;animation:adpulse 3.2s ease-out infinite} @keyframes adpulse{0%{opacity:.5;transform:scale(.98)}60%{opacity:0;transform:scale(1.02)}100%{opacity:0}} :where(.hero,.creds,.sec) .chips{display:flex;gap:6px;margin-top:14px!important;flex-wrap:wrap} :where(.hero,.creds,.sec) .chip{font-size:11px!important;padding:4px 10px!important;border-radius:14px!important;background:var(--gray)!important;color:var(--muted)!important;border:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .chip.on{background:var(--blue-light)!important;color:var(--blue)!important;border-color:#bcd5fb!important;animation:chipglow 3.2s ease-in-out infinite} @keyframes chipglow{0%,100%{box-shadow:0 0 0 0 rgba(26,115,232,0)}50%{box-shadow:0 0 0 4px rgba(26,115,232,.12)}}/* --- Card 2: auditoría --- */ :where(.hero,.creds,.sec) .aud{display:flex;gap:16px;align-items:center;margin-bottom:14px!important} :where(.hero,.creds,.sec) .ring{flex:0 0 64px} :where(.hero,.creds,.sec) .ring-num{font-size:16px!important;font-weight:600!important;fill:var(--navy)} :where(.hero,.creds,.sec) .aud-rows{flex:1;display:flex;flex-direction:column;gap:8px} :where(.hero,.creds,.sec) .arow{display:flex;align-items:center;justify-content:space-between;font-size:12px!important;opacity:0} :where(.hero,.creds,.sec) .aud.go .arow{animation:rowin .5s ease forwards} :where(.hero,.creds,.sec) .aud.go .ring-arc{animation:draw2 2s ease forwards} :where(.hero,.creds,.sec) .arow span:first-child{color:var(--navy)!important} :where(.hero,.creds,.sec) .s2pill{font-size:10.5px!important;font-weight:600!important;padding:2px 9px!important;border-radius:10px!important;display:inline-flex;align-items:center;gap:4px} :where(.hero,.creds,.sec) .s2pill.s2ok{background:var(--green-light)!important;color:var(--green)!important} :where(.hero,.creds,.sec) .s2pill.s2warn{background:var(--amber-light)!important;color:var(--amber)!important} @keyframes rowin{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}/* --- Card 3: analítica --- */ :where(.hero,.creds,.sec) .an-top{display:flex;align-items:baseline;gap:10px;margin-bottom:2px!important} :where(.hero,.creds,.sec) .an-num{font-size:26px!important;font-weight:600!important;color:var(--navy)!important;letter-spacing:-.02em!important} :where(.hero,.creds,.sec) .an-up{font-size:11px!important;font-weight:600!important;color:var(--green)!important;background:var(--green-light)!important;padding:2px 8px!important;border-radius:10px!important} :where(.hero,.creds,.sec) .an-lbl{font-size:11px!important;color:var(--hint)!important;margin-bottom:8px!important} :where(.hero,.creds,.sec) .an-line{stroke:var(--green);stroke-width:2.5;fill:none;stroke-dasharray:340;stroke-dashoffset:340;animation:s2line 2.4s ease forwards} :where(.hero,.creds,.sec) .an-area{fill:url(#ag);opacity:0;animation:fadein 1.6s ease .8s forwards} @keyframes s2line{to{stroke-dashoffset:0}} @keyframes fadein{to{opacity:1}}/* --- Card 4: flujo --- */ :where(.hero,.creds,.sec) .flow{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:6px} :where(.hero,.creds,.sec) .fcol{display:flex;flex-direction:column;gap:8px} :where(.hero,.creds,.sec) .node{font-size:11px!important;font-weight:500!important;padding:9px 10px!important;border-radius:9px!important;text-align:center!important;border:.5px solid var(--border)!important;background:#fff!important} :where(.hero,.creds,.sec) .node small{display:block;font-size:9px!important;font-weight:400!important;color:var(--hint)!important;margin-top:1px!important} :where(.hero,.creds,.sec) .node.sem{border-color:#bcd5fb!important;background:var(--blue-light)!important;color:var(--blue)!important} :where(.hero,.creds,.sec) .node.seo{border-color:#bbf7d0!important;background:var(--green-light)!important;color:var(--green)!important} :where(.hero,.creds,.sec) .node.mid{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important} :where(.hero,.creds,.sec) .node.out{border-color:var(--border)!important} :where(.hero,.creds,.sec) .flow svg .flux{stroke-dasharray:4 4;animation:flux 1.1s linear infinite} @keyframes flux{to{stroke-dashoffset:-16}} @media (max-width:620px){:where(.hero,.creds,.sec) .srv2-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){:where(.hero,.creds,.sec) .srv2-grid *{animation:none!important}:where(.hero,.creds,.sec) .an-line{stroke-dashoffset:0}:where(.hero,.creds,.sec) .an-area{opacity:1}:where(.hero,.creds,.sec) .arow{opacity:1}:where(.hero,.creds,.sec) .ring-arc{stroke-dashoffset:37}} @keyframes draw2{to{stroke-dashoffset:37}}/* tecleo + favicon tarjeta de campañas */ :where(.hero,.creds,.sec) .serp-caret{display:inline-block;width:2px;height:14px;background:var(--blue)!important;margin-left:2px!important;vertical-align:-2px;animation:s2blink 1s steps(1) infinite} @keyframes s2blink{0%,50%{opacity:1}50.01%,100%{opacity:0}} :where(.hero,.creds,.sec) .ad{transition:opacity .55s ease,transform .55s ease} :where(.hero,.creds,.sec) .ad.s2hidden{opacity:0;transform:translateY(8px)} :where(.hero,.creds,.sec) .ad-fav{width:22px;height:22px;border-radius:50%!important;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:.5px solid var(--border)!important;background:#fff!important} :where(.hero,.creds,.sec) .ad-fav svg{width:100%;height:100%;display:block} :where(.hero,.creds,.sec) .rvlogo{width:48px;height:48px;border-radius:50%!important;background-color:#fff!important;border:.5px solid var(--border)!important;flex-shrink:0;background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important} :where(.hero,.creds,.sec) .rv-g{flex-shrink:0;display:inline-flex;align-items:center} :where(.hero,.creds,.sec) .rl-aparkate{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-aparkate.webp)!important} :where(.hero,.creds,.sec) .rl-pereda{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-pereda.webp)!important} :where(.hero,.creds,.sec) .rl-cucalon{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-cucalon.webp)!important} :where(.hero,.creds,.sec) .rl-ineo{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-ineo.webp)!important} :where(.hero,.creds,.sec) .rl-piscinas-athena{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-piscinas.webp)!important} :where(.hero,.creds,.sec) .rl-simply-arquitecture{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-simply.webp)!important} :where(.hero,.creds,.sec) .rl-muuds{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-muuds.webp)!important} :where(.hero,.creds,.sec) .rl-la-moraleja-cf{background-image:url(https://www.webble.es/wp-content/uploads/2026/07/logo-resena-lamoraleja.webp)!important}/* ===== Casos de éxito (carrusel) ===== */ :where(.hero,.creds,.sec) .casos-mq{margin-top:8px!important;padding:20px 0 48px!important} :where(.hero,.creds,.sec) .caso-tile{position:relative;display:block;width:300px;height:300px;border-radius:18px!important;overflow:hidden;flex-shrink:0;border:.5px solid var(--border)!important;box-shadow:0 4px 14px rgba(16,24,40,.06)!important;transition:transform .3s ease,box-shadow .3s ease} :where(.hero,.creds,.sec) .caso-tile::before{content:"";position:absolute;inset:0;background-size:cover!important;background-position:center!important;transition:transform .5s ease;z-index:0} :where(.hero,.creds,.sec) .caso-tile:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(16,24,40,.16)!important} :where(.hero,.creds,.sec) .caso-tile:hover::before{transform:scale(1.05)} :where(.hero,.creds,.sec) .caso-arrow{position:absolute;bottom:14px;right:14px;width:40px;height:40px;border-radius:50%!important;background:rgba(255,255,255,.96)!important;color:var(--navy)!important;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.18)!important;z-index:2} :where(.hero,.creds,.sec) .caso-tile:hover .caso-arrow{opacity:1;transform:none} :where(.hero,.creds,.sec) .ct-aparkate::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-aparkate.webp)!important} :where(.hero,.creds,.sec) .ct-pereda::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-pereda.webp)!important} :where(.hero,.creds,.sec) .ct-ineo::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-ineo.webp)!important} :where(.hero,.creds,.sec) .ct-piscinas::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-piscinas.webp)!important} :where(.hero,.creds,.sec) .ct-taquillea::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-taquillea.webp)!important} :where(.hero,.creds,.sec) .ct-simply::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-simply.webp)!important} :where(.hero,.creds,.sec) .ct-mediterrani::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-mediterrani.webp)!important} :where(.hero,.creds,.sec) .ct-kuarere::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-web-kuarere.webp)!important} @media(max-width:820px){:where(.hero,.creds,.sec) .caso-tile{width:240px;height:240px}} @media(prefers-reduced-motion:reduce){:where(.hero,.creds,.sec) .caso-tile,:where(.hero,.creds,.sec) .caso-tile::before{transition:none}}/* casos a sangre completa: difuminado en los extremos de la página */ #casos{padding-left:0!important;padding-right:0!important} #casos .sec-header{padding-left:22px!important;padding-right:22px!important}/* full-bleed reseñas y blog (difuminado en extremos de página) */ #opiniones{padding-left:0!important;padding-right:0!important} #opiniones .sec-header{padding-left:22px!important;padding-right:22px!important} #blog{padding-left:0!important;padding-right:0!important} #blog .sec-header{padding-left:22px!important;padding-right:22px!important} #blog .mq-track>*{margin-right:20px!important}/* ===== Sección Formatos de Google Ads ===== */ #formatos .fmt-wrap{display:grid;grid-template-columns:262px minmax(280px,360px) 1fr;gap:52px;align-items:center;max-width:1120px;margin:0 auto!important} :where(.hero,.creds,.sec) .fmt-tabs{display:flex;flex-direction:column;gap:14px} :where(.hero,.creds,.sec) .fmt-tab{position:relative;display:block;width:100%;padding:17px 24px!important;border:1px solid var(--border)!important;border-radius:999px!important;background:#fff!important;color:#1f2430!important;font-size:16px!important;font-weight:500!important;font-family:inherit!important;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;text-align:left!important} :where(.hero,.creds,.sec) .fmt-tab-in{position:relative;z-index:1;display:flex;align-items:center;gap:12px} :where(.hero,.creds,.sec) .fmt-tab i{font-size:20px!important;color:var(--muted)!important;transition:color .2s} :where(.hero,.creds,.sec) .fmt-tab:hover{border-color:#c7d6ee!important;background:#fafbff!important} :where(.hero,.creds,.sec) .fmt-tab.is-active{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;box-shadow:0 10px 24px rgba(26,115,232,.28)!important} :where(.hero,.creds,.sec) .fmt-tab.is-active i{color:#fff!important} :where(.hero,.creds,.sec) .fmt-ring{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;z-index:2;pointer-events:none} :where(.hero,.creds,.sec) .fmt-ring rect{fill:none;stroke:#fff;stroke-width:2.5;opacity:0;transition:opacity .25s} :where(.hero,.creds,.sec) .fmt-tab.is-active .fmt-ring rect{opacity:.95} :where(.hero,.creds,.sec) .fmt-visual{display:flex;align-items:center;justify-content:center} :where(.hero,.creds,.sec) .fmt-vis{display:none} :where(.hero,.creds,.sec) .fmt-vis.is-active{display:block;animation:fmtfade .45s ease} :where(.hero,.creds,.sec) .fmt-img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto!important;filter:drop-shadow(0 14px 32px rgba(16,24,40,.10))} :where(.hero,.creds,.sec) .fimg-m{display:none} @keyframes fmtfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} :where(.hero,.creds,.sec) .fmt-copy{max-width:430px} :where(.hero,.creds,.sec) .fmt-panel{display:none} :where(.hero,.creds,.sec) .fmt-panel.is-active{display:block;animation:fmtfade .45s ease} :where(.hero,.creds,.sec) .fmt-h{font-size:21px!important;font-weight:500!important;color:var(--navy)!important;margin:0 0 16px!important;line-height:1.3!important} :where(.hero,.creds,.sec) .fmt-d{font-size:16.5px!important;color:var(--muted)!important;line-height:1.85!important;margin:0!important} :where(.hero,.creds,.sec) .fmt-link{display:inline-flex;align-items:center;gap:16px;margin-top:26px!important;color:var(--blue)!important;font-weight:500!important;font-size:16.5px!important;text-decoration:none!important} :where(.hero,.creds,.sec) .fmt-arrow{width:52px;height:52px;border-radius:50%!important;background:var(--blue)!important;color:#fff!important;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .25s,box-shadow .25s}:where(.hero,.creds,.sec) .fmt-arrow i{font-size:22px!important} :where(.hero,.creds,.sec) .fmt-link:hover .fmt-arrow{transform:translateX(4px);box-shadow:0 10px 24px rgba(26,115,232,.32)!important} :where(.hero,.creds,.sec) .fmt-app{max-width:300px;width:100%;aspect-ratio:300/438;background:#eef1f5!important;border-radius:38px!important;padding:24px 18px 26px!important;display:none;flex-direction:column;gap:14px;box-shadow:0 18px 44px rgba(16,24,40,.12)!important;filter:none} :where(.hero,.creds,.sec) .fmt-app.is-active{display:flex} :where(.hero,.creds,.sec) .appm-bar{display:flex;align-items:center;justify-content:center;gap:7px;color:#5f6368!important;font-weight:600!important;font-size:14px!important} :where(.hero,.creds,.sec) .appm-card{background:#fff!important;border-radius:20px!important;padding:16px!important;flex:1;display:flex;flex-direction:column;gap:13px;box-shadow:0 4px 16px rgba(16,24,40,.06)!important} :where(.hero,.creds,.sec) .appm-head{display:flex;align-items:center;gap:12px} :where(.hero,.creds,.sec) .appm-ic{width:46px;height:46px;border-radius:13px!important;background:linear-gradient(135deg,#ff6a3d,#ff8f5e)!important;display:flex;align-items:center;justify-content:center;color:#fff!important;font-size:22px!important;flex:none} :where(.hero,.creds,.sec) .appm-name{font-weight:600!important;color:#1f2430!important;font-size:15px!important;line-height:1.2!important} :where(.hero,.creds,.sec) .appm-sub{font-size:12px!important;color:#9aa0a6!important} :where(.hero,.creds,.sec) .appm-tag{margin-left:auto!important;font-size:11px!important;font-weight:700!important;color:#1f2430!important;align-self:flex-start} :where(.hero,.creds,.sec) .appm-hero{flex:1;border-radius:13px!important;background:linear-gradient(135deg,#ff5a1f,#ff8a4c)!important;min-height:96px;display:flex;align-items:flex-end;padding:12px!important;color:#fff!important;font-weight:600!important;font-size:13.5px!important;line-height:1.3!important} :where(.hero,.creds,.sec) .appm-foot{display:flex;align-items:center;gap:9px} :where(.hero,.creds,.sec) .appm-stars{font-size:13px!important;color:#fbbc04!important;letter-spacing:1px!important} :where(.hero,.creds,.sec) .appm-rate{font-size:12px!important;color:#5f6368!important} :where(.hero,.creds,.sec) .appm-install{margin-left:auto!important;background:var(--green)!important;color:#fff!important;border:none!important;border-radius:999px!important;padding:9px 22px!important;font-weight:600!important;font-size:13px!important;font-family:inherit!important;cursor:default} @media(max-width:1100px){ #formatos .fmt-wrap{grid-template-columns:1fr;gap:18px;margin-top:24px!important} :where(.hero,.creds,.sec) .fmt-tabs{flex-direction:row;flex-wrap:wrap;justify-content:center} :where(.hero,.creds,.sec) .fmt-tab{width:auto;padding:12px 20px!important;font-size:14.5px!important} :where(.hero,.creds,.sec) .fmt-visual{min-height:0;order:2} :where(.hero,.creds,.sec) .fmt-visual .mk{width:100%} :where(.hero,.creds,.sec) .fmt-visual .mk-frame{padding:18px 14px!important} :where(.hero,.creds,.sec) .fmt-visual .mk-card{max-width:440px} :where(.hero,.creds,.sec) .mk-shop-row{gap:8px}:where(.hero,.creds,.sec) .mk-prod{padding:8px!important} :where(.hero,.creds,.sec) .fmt-copy{max-width:560px;margin:0 auto!important;text-align:center!important;order:3} }/* ===== Metodología · iconos a color (estilo Google) ===== */ @media(max-width:620px){ :where(.hero,.creds,.sec) .fimg-d{display:none} :where(.hero,.creds,.sec) .fimg-m{display:block;max-width:380px;width:100%;height:auto;margin:0 auto!important;filter:none} } :where(.hero,.creds,.sec) .step.c1 .si{background:#e3f6fa!important} :where(.hero,.creds,.sec) .step.c1 .si i{color:#0e9bbf!important} :where(.hero,.creds,.sec) .step.c2 .si{background:#e7f5ec!important} :where(.hero,.creds,.sec) .step.c2 .si i{color:#16a34a!important} :where(.hero,.creds,.sec) .step.c3 .si{background:#fef3c7!important} :where(.hero,.creds,.sec) .step.c3 .si i{color:#d97706!important} :where(.hero,.creds,.sec) .step.c4 .si{background:#fde7e7!important} :where(.hero,.creds,.sec) .step.c4 .si i{color:#dc2626!important} :where(.hero,.creds,.sec) .step.c5 .si{background:#ecebfd!important} :where(.hero,.creds,.sec) .step.c5 .si i{color:#6d5ae6!important} :where(.hero,.creds,.sec) .step.c6 .si{background:var(--blue)!important} :where(.hero,.creds,.sec) .step.c6 .si i{color:#fff!important} /* ===== AJUSTES MÓVIL (solo adaptabilidad) ===== */ @media(max-width:768px){ #auditoria .aud-cta{flex-wrap:nowrap;gap:10px} #auditoria .aud-cta a{flex:1;min-width:0;justify-content:center;text-align:center!important;padding:13px 12px!important;font-size:13.5px!important} #auditoria .audit-item > div:nth-child(2) > div:nth-child(2){display:none} #auditoria .audit-item{padding:11px 0!important} #formatos .fmt-tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:10px;justify-content:flex-start;padding:6px 16px 10px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;order:1} #formatos .fmt-tabs::-webkit-scrollbar{display:none} #formatos .fmt-tab{flex:0 0 auto;width:auto;white-space:nowrap;padding:12px 20px!important;font-size:14.5px!important;scroll-snap-align:center} #formatos .fmt-tab.is-active{box-shadow:none!important} #blog .blog-card{padding:18px 20px!important} }/* ===== Mockups de formatos (HTML/CSS) ===== */ :where(.hero,.creds,.sec) .mk{--blue-l:#e8f0fd;--ink:#1f2430;--line:#e8eaed;--amber:#f5a623;color:var(--ink)!important} :where(.hero,.creds,.sec) .mk-frame{background:#eef1f6!important;border-radius:20px!important;padding:24px 22px!important;position:relative;background-image:radial-gradient(rgba(20,30,50,.075) 1.4px,transparent 1.4px)!important;background-size:18px 18px!important} :where(.hero,.creds,.sec) .mk-card{background:#fff!important;border-radius:18px!important;box-shadow:0 16px 40px rgba(16,24,40,.12)!important;overflow:hidden;max-width:400px;margin:0 auto!important} :where(.hero,.creds,.sec) .mk-bar{display:flex;align-items:center;gap:11px;padding:13px 18px!important;border-bottom:1px solid var(--line)!important} :where(.hero,.creds,.sec) .mk-dots{display:flex;gap:7px} :where(.hero,.creds,.sec) .mk-dots i{width:11px;height:11px;border-radius:50%!important;display:block} :where(.hero,.creds,.sec) .mk-dots i:nth-child(1){background:#ff5f57!important}:where(.hero,.creds,.sec) .mk-dots i:nth-child(2){background:#febc2e!important}:where(.hero,.creds,.sec) .mk-dots i:nth-child(3){background:#28c840!important} :where(.hero,.creds,.sec) .mk-label{color:var(--muted)!important;font-weight:600!important;font-size:15px!important} :where(.hero,.creds,.sec) .mk-body{padding:20px 18px 22px!important} :where(.hero,.creds,.sec) .mk-w{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%!important;background:var(--navy)!important;color:#fff!important;font-weight:800!important;font-size:12px!important;flex:0 0 auto} :where(.hero,.creds,.sec) .mk-ad-tag{font-size:11.5px!important;font-weight:700!important;color:var(--muted)!important;letter-spacing:.02em!important} :where(.hero,.creds,.sec) .mk-search{border:1.6px solid var(--line)!important;border-radius:999px!important;padding:12px 18px!important;display:flex;align-items:center;gap:12px;color:#9aa1ad!important;font-size:16px!important} :where(.hero,.creds,.sec) .mk-search svg{flex:0 0 auto} :where(.hero,.creds,.sec) .mk-ad{border:1.6px solid #cdd9f5!important;border-radius:14px!important;padding:14px 16px!important;margin-top:15px!important} :where(.hero,.creds,.sec) .mk-ad-top{display:flex;align-items:center;gap:8px;font-size:14px!important}:where(.hero,.creds,.sec) .mk-ad-top b{font-weight:700!important} :where(.hero,.creds,.sec) .mk-url{color:var(--muted)!important} :where(.hero,.creds,.sec) .mk-ad-title{color:#1a0dab!important;font-weight:700!important;font-size:19px!important;line-height:1.25!important;margin-top:11px!important} :where(.hero,.creds,.sec) .mk-ad-desc{color:#4b5563!important;font-size:14px!important;line-height:1.5!important;margin-top:7px!important} :where(.hero,.creds,.sec) .mk-line{height:9px;border-radius:5px!important;background:#eceef2!important;display:block} :where(.hero,.creds,.sec) .mk-para{display:flex;flex-direction:column;gap:9px} :where(.hero,.creds,.sec) .mk-dad{position:relative;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,.06)!important} :where(.hero,.creds,.sec) .mk-dad-img{height:116px;background:var(--blue-l)!important;display:flex;align-items:center;justify-content:center} :where(.hero,.creds,.sec) .mk-dad-img .mk-w{width:48px;height:48px;font-size:21px!important;box-shadow:0 8px 18px rgba(26,115,232,.28)!important} :where(.hero,.creds,.sec) .mk-dad-body{padding:13px 15px 15px!important} :where(.hero,.creds,.sec) .mk-dad-brand{display:flex;align-items:center;gap:8px;font-size:12px!important;color:var(--muted)!important;font-weight:600!important} :where(.hero,.creds,.sec) .mk-dad-brand .mk-w{width:19px;height:19px;font-size:9px!important} :where(.hero,.creds,.sec) .mk-dad-h{font-weight:700!important;font-size:15.5px!important;color:var(--navy)!important;line-height:1.25!important;margin:9px 0 5px!important} :where(.hero,.creds,.sec) .mk-dad-d{font-size:12.5px!important;color:var(--muted)!important;line-height:1.45!important} :where(.hero,.creds,.sec) .mk-dad-cta{display:inline-block;margin-top:12px!important;background:var(--blue)!important;color:#fff!important;font-weight:700!important;font-size:12.5px!important;padding:9px 17px!important;border-radius:999px!important} :where(.hero,.creds,.sec) .mk-dad .mk-ad-tag{position:absolute;top:8px;right:10px;background:rgba(255,255,255,.92)!important;padding:2px 7px!important;border-radius:5px!important;z-index:2} :where(.hero,.creds,.sec) .mk-shop-head{font-size:12.5px!important;color:var(--muted)!important;font-weight:600!important;margin-bottom:13px!important} :where(.hero,.creds,.sec) .mk-shop-row{display:flex;gap:11px} :where(.hero,.creds,.sec) .mk-prod{position:relative;flex:1;border:1px solid var(--line)!important;border-radius:12px!important;padding:9px!important;min-width:0} :where(.hero,.creds,.sec) .mk-prod.mk-glow{border-color:#bcd5fb!important} :where(.hero,.creds,.sec) .mk-prod.is-off{opacity:.5} :where(.hero,.creds,.sec) .mk-prod-img{height:78px;border-radius:8px!important;background:#f1f3f7!important;display:flex;align-items:center;justify-content:center;margin-bottom:9px!important} :where(.hero,.creds,.sec) .mk-prod-img svg{opacity:.35} :where(.hero,.creds,.sec) .mk-prod-t{font-size:12px!important;line-height:1.3!important;color:#374151!important;height:31px;overflow:hidden} :where(.hero,.creds,.sec) .mk-prod-p{font-weight:700!important;font-size:15px!important;margin-top:5px!important} :where(.hero,.creds,.sec) .mk-prod-s{font-size:10.5px!important;color:var(--muted)!important;margin-top:3px!important;line-height:1.4!important} :where(.hero,.creds,.sec) .mk-stars{color:var(--amber)!important;letter-spacing:-1px!important} :where(.hero,.creds,.sec) .mk-tag-w{display:inline-block;background:var(--blue-l)!important;color:var(--blue)!important;font-size:9px!important;font-weight:800!important;padding:2px 6px!important;border-radius:5px!important;margin-bottom:8px!important;letter-spacing:.02em!important} :where(.hero,.creds,.sec) .mk-tag-off{display:inline-block;background:#f1f3f7!important;color:#9aa1ad!important;font-size:9px!important;font-weight:800!important;padding:2px 6px!important;border-radius:5px!important;margin-bottom:8px!important;letter-spacing:.02em!important} :where(.hero,.creds,.sec) .mk-shop-note{font-size:11px!important;color:var(--muted)!important;margin-top:13px!important;line-height:1.4!important} :where(.hero,.creds,.sec) .mk-app{display:flex;align-items:center;gap:13px} :where(.hero,.creds,.sec) .mk-app-icon{width:54px;height:54px;border-radius:14px!important;flex:0 0 auto;background:linear-gradient(135deg,#1a73e8,#0A0E16)!important;display:flex;align-items:center;justify-content:center;color:#fff!important} :where(.hero,.creds,.sec) .mk-app-name{font-weight:700!important;font-size:16px!important} :where(.hero,.creds,.sec) .mk-app-sub{font-size:12.5px!important;color:var(--muted)!important;margin-top:3px!important} :where(.hero,.creds,.sec) .mk-app-btn{margin-left:auto!important;background:var(--blue)!important;color:#fff!important;font-weight:700!important;font-size:13.5px!important;padding:10px 20px!important;border-radius:999px!important;white-space:nowrap} :where(.hero,.creds,.sec) .mk-shots{display:flex;gap:9px;margin-top:15px!important} :where(.hero,.creds,.sec) .mk-shots span{flex:1;height:74px;border-radius:9px!important;background:linear-gradient(160deg,#eef1f6,#dfe5ee)!important} :where(.hero,.creds,.sec) .mk-app-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px!important} :where(.hero,.creds,.sec) .mk-play{display:flex;align-items:center;gap:6px;font-size:11.5px!important;color:var(--muted)!important;font-weight:600!important} :where(.hero,.creds,.sec) .mk-yt-screen{position:relative;aspect-ratio:16/9;border-radius:12px!important;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,#2b2f38,#0c0e13)!important} :where(.hero,.creds,.sec) .mk-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:38px;border-radius:10px!important;background:#ff0000!important;display:flex;align-items:center;justify-content:center;animation:mkpulse 2.4s ease-in-out infinite} :where(.hero,.creds,.sec) .mk-play-btn::after{content:"";border-left:15px solid #fff!important;border-top:9px solid transparent!important;border-bottom:9px solid transparent!important;margin-left:3px!important} :where(.hero,.creds,.sec) .mk-yt-adtag{position:absolute;left:10px;bottom:10px;background:#ffc800!important;color:#111!important;font-size:10.5px!important;font-weight:800!important;padding:2px 6px!important;border-radius:3px!important} :where(.hero,.creds,.sec) .mk-skip{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55)!important;color:#fff!important;font-size:11px!important;font-weight:600!important;padding:6px 11px!important;border-radius:6px!important;border:1px solid rgba(255,255,255,.35)!important} :where(.hero,.creds,.sec) .mk-yt-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)!important} :where(.hero,.creds,.sec) .mk-yt-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34%;background:#ff0000!important;animation:mkbar 5s ease-in-out infinite} :where(.hero,.creds,.sec) .mk-yt-info{display:flex;align-items:center;gap:11px;margin-top:14px!important} :where(.hero,.creds,.sec) .mk-yt-info .mk-w{width:34px;height:34px;font-size:15px!important} :where(.hero,.creds,.sec) .mk-yt-title{font-weight:700!important;font-size:14.5px!important} :where(.hero,.creds,.sec) .mk-yt-ch{font-size:12px!important;color:var(--muted)!important;margin-top:2px!important} :where(.hero,.creds,.sec) .mk-yt-sub{margin-left:auto!important;background:#ff0000!important;color:#fff!important;font-weight:700!important;font-size:12.5px!important;padding:8px 15px!important;border-radius:999px!important;white-space:nowrap} :where(.hero,.creds,.sec) .mk-glow{animation:mkglow 3s ease-in-out infinite} :where(.hero,.creds,.sec) .mk-caret{display:inline-block;width:2px;height:17px;background:var(--blue)!important;margin-left:1px!important;vertical-align:-3px;border-radius:1px!important;animation:mkcaret 1.1s steps(1) infinite} @keyframes mkglow{0%,100%{box-shadow:0 0 0 0 rgba(26,115,232,0)}50%{box-shadow:0 0 0 5px rgba(26,115,232,.13)}} @keyframes mkcaret{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes mkbar{0%{width:8%}88%,100%{width:70%}} @keyframes mkpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}} @media(prefers-reduced-motion:reduce){:where(.hero,.creds,.sec) .mk-glow,:where(.hero,.creds,.sec) .mk-caret,:where(.hero,.creds,.sec) .mk-play-btn,:where(.hero,.creds,.sec) .mk-yt-bar::before{animation:none!important}}/* === Scroll reveal === */ html{scroll-behavior:smooth} :where(.hero,.creds,.sec) .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);will-change:opacity,transform} :where(.hero,.creds,.sec) .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){:where(.hero,.creds,.sec) .reveal{opacity:1!important;transform:none!important;transition:none!important}}/* === Tarjeta especialista (perfil Manuel) === */ #especialista .spec-card{background:var(--gray)!important;border-radius:20px!important;padding:40px!important;text-align:center!important;border:.5px solid var(--border)!important} #especialista .spec-head{display:flex;flex-direction:column;align-items:center} #especialista .spec-avatar{width:140px;height:140px;border-radius:50%!important;background:var(--navy)!important;overflow:hidden;border:3px solid var(--navy)!important;margin:0 0 20px!important;flex:0 0 auto} #especialista .spec-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top} #especialista .spec-name{font-size:22px!important;font-weight:500!important;margin-bottom:4px!important} #especialista .spec-role{font-size:14px!important;color:var(--blue)!important;font-weight:500!important;margin-bottom:16px!important} #especialista .spec-bio{font-size:14px!important;color:var(--muted)!important;line-height:1.7!important;margin-bottom:24px!important} #especialista .spec-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px!important} #especialista .stat-box{background:#eef1f6!important;border:.5px solid var(--border)!important;border-radius:10px!important;padding:14px 10px!important} #especialista .stat-val{font-size:18px!important;font-weight:600!important;color:var(--navy)!important} #especialista .stat-lab{font-size:11.5px!important;color:var(--muted)!important;margin-top:2px!important} #especialista .gp-box{background:var(--blue-light)!important;border-radius:10px!important;padding:14px!important;text-align:center!important} #especialista .gp-top{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:3px!important} #especialista .gp-top span{font-size:13px!important;font-weight:500!important;color:var(--blue)!important} #especialista .gp-sub{font-size:11px!important;color:var(--blue)!important;opacity:.7} #especialista .spec-quote{background:#fff!important;border-radius:10px!important;padding:18px!important;text-align:left!important;border:.5px solid var(--border)!important} #especialista .spec-quote .q{font-size:14px!important;color:var(--muted)!important;font-style:italic!important;line-height:1.7!important;margin-bottom:8px!important} #especialista .spec-quote .a{font-size:12px!important;color:var(--hint)!important;font-weight:500!important} #especialista .spec-team{border-top:.5px solid var(--border)!important;margin-top:22px!important;padding-top:20px!important} #especialista .spec-team .t{font-size:11px!important;font-weight:600!important;color:var(--hint)!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-bottom:4px!important} #especialista .spec-team .d{font-size:12.5px!important;color:var(--muted)!important;line-height:1.6!important;margin-bottom:14px!important} #especialista .spec-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} #especialista .chip-p{display:flex;align-items:center;gap:8px;background:#fff!important;border:.5px solid var(--border)!important;border-radius:10px!important;padding:8px 11px!important} #especialista .spec-chips .avatar{width:30px;height:30px;border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:#fff!important;font-size:12px!important;font-weight:600!important;flex:0 0 auto} #especialista .chip-p .n{font-size:12px!important;font-weight:500!important;color:var(--navy)!important;line-height:1.2!important;text-align:left!important} #especialista .chip-p .r{font-size:10px!important;color:var(--muted)!important;text-align:left!important} @media(max-width:768px){ #especialista .spec-card{padding:26px 20px!important;text-align:center!important} #especialista .spec-avatar{width:124px;height:124px;margin:0 auto 14px!important} #especialista .spec-name{font-size:21px!important;margin-bottom:3px!important} #especialista .spec-role{font-size:13.5px!important;margin-bottom:14px!important;line-height:1.35!important} #especialista .spec-bio{font-size:14px!important;line-height:1.6!important;margin-bottom:18px!important} #especialista .spec-stats{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px!important} #especialista .stat-box{padding:10px 6px!important} #especialista .stat-val{font-size:16px!important} #especialista .stat-lab{font-size:10px!important;line-height:1.25!important;margin-top:3px!important} #especialista .gp-box{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px!important} #especialista .gp-top{margin-bottom:0!important} #especialista .gp-sub::before{content:'· '} #especialista .spec-quote{padding:15px!important} #especialista .spec-team{margin-top:16px!important;padding-top:15px!important} } /* ===== TABLET 621–1100 px ===== Evita el salto brusco entre escritorio y móvil: más aire útil, columnas legibles y formatos apilados antes de que se compriman. */ @media(min-width:621px) and (max-width:1100px){ .hero{padding:56px 36px 48px!important} .hero h1{font-size:clamp(36px,5vw,44px)!important;line-height:1.1!important;max-width:820px} .hero>p{font-size:17px!important;line-height:1.7!important;max-width:720px!important} :where(.hero,.creds,.sec) .hero-btns{margin-top:30px!important} .sec{padding:72px 36px!important} :where(.hero,.creds,.sec) .sec-header{margin-bottom:46px!important} :where(.hero,.creds,.sec) .sec-title{font-size:34px!important;line-height:1.18!important} :where(.hero,.creds,.sec) .sec-sub{font-size:16.5px!important;line-height:1.65!important} .creds{padding:18px 28px!important;flex-wrap:wrap} :where(.hero,.creds,.sec) .cred-item{min-width:33.333%;padding:12px 8px!important;border-bottom:.5px solid var(--border)!important} :where(.hero,.creds,.sec) .cred-sep{display:none} #por-que-webble .cmp-grid{display:none} #por-que-webble .tabs-mob{display:block;max-width:720px;margin-left:auto!important;margin-right:auto!important} :where(.hero,.creds,.sec) .chain-row .step{padding:20px 14px!important} :where(.hero,.creds,.sec) .chain-diff-block{padding:36px 34px!important} :where(.hero,.creds,.sec) .chain-diff-inner{gap:28px!important} :where(.hero,.creds,.sec) .s05-grid, :where(.hero,.creds,.sec) .s05b-grid{gap:48px!important} :where(.hero,.creds,.sec) .audit-card{padding:32px!important} :where(.hero,.creds,.sec) .ciudad-card{padding:22px 24px!important} :where(.hero,.creds,.sec) .faq-hdr{padding:20px!important} :where(.hero,.creds,.sec) .faq-body{padding:0 20px 20px!important} } @media(min-width:621px) and (max-width:920px){ :where(.hero,.creds,.sec) .s05-grid, :where(.hero,.creds,.sec) .s05b-grid{grid-template-columns:1fr!important;gap:42px!important} #especialista .s05-grid>div:first-child, #auditoria .s05b-grid>div:first-child{max-width:680px;margin-left:auto!important;margin-right:auto!important} #especialista .spec-card, #auditoria .audit-card{max-width:700px;margin-left:auto!important;margin-right:auto!important} :where(.hero,.creds,.sec) .ciudad-grid{grid-template-columns:1fr} } @media(min-width:621px) and (max-width:768px){ :where(.hero,.creds,.sec) .hero-btns a{display:inline-flex;width:auto;min-width:220px;justify-content:center} } :where(.hero,.creds,.sec) .faq-body a{color:var(--blue)!important;font-weight:500!important;text-decoration:underline!important;text-underline-offset:2px}