/* ========================================================= KOBLENZ · HERO RESPONSIVE MOBILE · FINAL ACTUALIZADO ========================================================= */ /* ========================================================= ELEMENTOS AUXILIARES · DESKTOP ========================================================= */ .kob-mobile-br{ display:none; } /* ========================================================= TÍTULO · DESKTOP ========================================================= */ .kob-title-white, .kob-title-green{ display:block; } .kob-title-white > span, .kob-title-green > span{ display:inline; } .kob-title-white > span:first-child::after, .kob-title-green > span:first-child::after{ content:" "; } .kob-title-white{ color:var(--kob-text); } .kob-title-green{ color:var(--kob-green); } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ /* ======================================================= RESET GENERAL ======================================================== */ html{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; overflow-x:clip !important; } body{ position:relative !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow-x:hidden !important; overflow-x:clip !important; } img, svg, video{ max-width:100%; } /* ======================================================= HERO ======================================================== */ .kob-hero{ position:relative !important; width:100% !important; max-width:100% !important; min-width:0 !important; min-height:100svh !important; height:100svh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; overflow-x:clip !important; isolation:isolate !important; background: radial-gradient( circle at 72% 45%, rgba(21,155,27,.025), transparent 34% ), radial-gradient( circle at 20% 52%, rgba(255,255,255,.018), transparent 38% ), linear-gradient( 135deg, #151715 0%, #101210 52%, #0a0c0a 100% ) !important; } /* ======================================================= NAVBAR ======================================================== */ .koblenz-navbar{ position:absolute !important; top:14px !important; left:14px !important; right:14px !important; width:auto !important; max-width:calc(100% - 28px) !important; min-width:0 !important; margin:0 !important; transform:none !important; overflow:visible !important; z-index:1000 !important; } .koblenz-nav-inner{ position:relative !important; width:100% !important; max-width:100% !important; min-width:0 !important; min-height:58px !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:7px !important; margin:0 !important; padding: 6px 6px 6px 12px !important; background: rgba(244,242,237,.97) !important; border: 1px solid rgba(255,255,255,.74) !important; border-radius:999px !important; box-shadow: 0 10px 28px rgba(0,0,0,.13) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; overflow:visible !important; } /* ======================================================= TRABAJA CON NOSOTROS ======================================================== */ .koblenz-nav-cta{ position:absolute !important; left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important; display:flex !important; align-items:center !important; justify-content:center !important; width:205px !important; max-width:205px !important; min-width:0 !important; height:46px !important; min-height:46px !important; margin:0 !important; padding: 0 15px !important; font-size:8.5px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.035em !important; white-space:nowrap !important; border-radius:999px !important; z-index:2 !important; } /* ======================================================= HAMBURGUESA ======================================================== */ .koblenz-menu-toggle{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; flex: 0 0 46px !important; width:46px !important; min-width:46px !important; height:46px !important; margin-left:auto !important; margin-right:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background: linear-gradient( 180deg, #7fba49 0%, #68a937 100% ) !important; cursor:pointer !important; pointer-events:auto !important; touch-action:manipulation !important; z-index:1002 !important; } .koblenz-menu-toggle span{ position:absolute !important; left:50% !important; top:50% !important; display:block !important; width:18px !important; height:1.5px !important; margin:0 !important; background:#fff !important; pointer-events:none !important; transform-origin:center !important; transition: transform .25s ease !important; } .koblenz-menu-toggle span:first-child{ transform: translate(-50%,-4px) !important; } .koblenz-menu-toggle span:last-child{ transform: translate(-50%,4px) !important; } /* ======================================================= HAMBURGUESA → X ======================================================== */ .koblenz-navbar.menu-open .koblenz-menu-toggle span:first-child{ transform: translate(-50%,0) rotate(45deg) !important; } .koblenz-navbar.menu-open .koblenz-menu-toggle span:last-child{ transform: translate(-50%,0) rotate(-45deg) !important; } /* ======================================================= MENÚ MOBILE ======================================================== */ .koblenz-nav-menu{ position:absolute !important; top: calc(100% + 10px) !important; right:0 !important; left:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; width:250px !important; max-width:calc(100vw - 28px) !important; min-width:0 !important; gap:2px !important; margin:0 !important; padding:10px !important; background: rgba(244,242,237,.985) !important; border: 1px solid rgba(255,255,255,.78) !important; border-radius:22px !important; box-shadow: 0 20px 48px rgba(0,0,0,.25) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform: translateY(-8px) scale(.97) !important; transform-origin: top right !important; transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important; z-index:1001 !important; } .koblenz-navbar.menu-open .koblenz-nav-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform: translateY(0) scale(1) !important; } /* ======================================================= LINKS MENÚ ======================================================== */ .koblenz-nav-menu a{ width:100% !important; min-width:0 !important; min-height:46px !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; margin:0 !important; padding: 0 17px !important; border-radius:14px !important; color:#202320 !important; font-size:13px !important; font-weight:700 !important; text-align:left !important; text-decoration:none !important; } .koblenz-nav-menu a::after{ display:none !important; } .koblenz-nav-menu a.active{ color:#159b1b !important; background: rgba(113,173,61,.12) !important; } /* ======================================================= ZONA CENTRAL LÍNEA SUPERIOR = 33.5% LÍNEA INFERIOR = 72.5% NO MOVER ======================================================== */ .kob-hero-clean{ position:absolute !important; left:0 !important; right:0 !important; top:33.5% !important; width:100% !important; max-width:100% !important; height:39% !important; overflow:hidden !important; z-index:2 !important; background: radial-gradient( ellipse at 31% 45%, rgba(255,255,255,.050) 0%, rgba(255,255,255,.019) 31%, transparent 62% ), radial-gradient( ellipse at 72% 50%, rgba(113,173,61,.022) 0%, transparent 52% ), linear-gradient( 105deg, #121712 0%, #0d120e 48%, #080d09 100% ) !important; /* La franja desaparece progresivamente antes de la mopa. */ -webkit-mask-image:linear-gradient( to right, #000 0%, #000 44%, rgba(0,0,0,.98) 48%, rgba(0,0,0,.88) 53%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.52) 63%, rgba(0,0,0,.32) 68%, rgba(0,0,0,.16) 73%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.015) 83%, transparent 88%, transparent 100% ) !important; mask-image:linear-gradient( to right, #000 0%, #000 44%, rgba(0,0,0,.98) 48%, rgba(0,0,0,.88) 53%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.52) 63%, rgba(0,0,0,.32) 68%, rgba(0,0,0,.16) 73%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.015) 83%, transparent 88%, transparent 100% ) !important; } /* Las líneas antiguas de la franja se apagan en móvil. */ .kob-hero-clean::before, .kob-hero-clean::after{ content:none !important; display:none !important; } /* ======================================================= POLVO SUPERIOR MÁS ABAJO SIN MOVER LÍNEA ======================================================== */ .kob-dust-particles-top{ position:absolute !important; left:0 !important; top: calc(33.5% - 130px) !important; width:100% !important; max-width:100% !important; height:170px !important; opacity:.90 !important; overflow:hidden !important; pointer-events:none !important; z-index:1 !important; mix-blend-mode:normal !important; filter: saturate(.58) brightness(.76) contrast(.94) !important; background: radial-gradient( ellipse at 9% 72%, rgba(var(--dust1),.22) 0%, rgba(var(--dust1),.11) 20%, rgba(var(--dust1),.04) 40%, transparent 60% ), radial-gradient( ellipse at 28% 48%, rgba(var(--dust2),.19) 0%, rgba(var(--dust2),.10) 20%, rgba(var(--dust2),.04) 40%, transparent 60% ), radial-gradient( ellipse at 48% 70%, rgba(var(--dust3),.20) 0%, rgba(var(--dust3),.10) 18%, rgba(var(--dust3),.04) 38%, transparent 58% ), radial-gradient( ellipse at 68% 44%, rgba(175,144,102,.18) 0%, rgba(175,144,102,.09) 20%, rgba(175,144,102,.04) 40%, transparent 60% ), radial-gradient( ellipse at 88% 67%, rgba(150,121,88,.17) 0%, rgba(150,121,88,.08) 20%, rgba(150,121,88,.035) 40%, transparent 60% ) !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,.04) 0%, rgba(0,0,0,.10) 10%, rgba(0,0,0,.22) 24%, rgba(0,0,0,.40) 40%, rgba(0,0,0,.60) 57%, rgba(0,0,0,.78) 73%, rgba(0,0,0,.92) 87%, #000 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0,0,0,.04) 0%, rgba(0,0,0,.10) 10%, rgba(0,0,0,.22) 24%, rgba(0,0,0,.40) 40%, rgba(0,0,0,.60) 57%, rgba(0,0,0,.78) 73%, rgba(0,0,0,.92) 87%, #000 100% ) !important; } /* ======================================================= POLVO INFERIOR SUBE UN POCO SIN MOVER LÍNEA ======================================================== */ .kob-dust-particles-bottom{ position:absolute !important; left:0 !important; top:72.1% !important; width:100% !important; max-width:100% !important; height:210px !important; opacity:.90 !important; overflow:hidden !important; pointer-events:none !important; mix-blend-mode:normal !important; filter: saturate(.58) brightness(.76) contrast(.94) !important; background: radial-gradient( ellipse at 9% 28%, rgba(var(--dust1),.22) 0%, rgba(var(--dust1),.11) 20%, rgba(var(--dust1),.04) 40%, transparent 60% ), radial-gradient( ellipse at 28% 52%, rgba(var(--dust2),.19) 0%, rgba(var(--dust2),.10) 20%, rgba(var(--dust2),.04) 40%, transparent 60% ), radial-gradient( ellipse at 48% 30%, rgba(var(--dust3),.20) 0%, rgba(var(--dust3),.10) 18%, rgba(var(--dust3),.04) 38%, transparent 58% ), radial-gradient( ellipse at 68% 56%, rgba(175,144,102,.18) 0%, rgba(175,144,102,.09) 20%, rgba(175,144,102,.04) 40%, transparent 60% ), radial-gradient( ellipse at 88% 33%, rgba(150,121,88,.17) 0%, rgba(150,121,88,.08) 20%, rgba(150,121,88,.035) 40%, transparent 60% ) !important; -webkit-mask-image: linear-gradient( to bottom, #000 0%, rgba(0,0,0,.92) 13%, rgba(0,0,0,.78) 27%, rgba(0,0,0,.60) 43%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.22) 76%, rgba(0,0,0,.10) 90%, rgba(0,0,0,.04) 100% ) !important; mask-image: linear-gradient( to bottom, #000 0%, rgba(0,0,0,.92) 13%, rgba(0,0,0,.78) 27%, rgba(0,0,0,.60) 43%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.22) 76%, rgba(0,0,0,.10) 90%, rgba(0,0,0,.04) 100% ) !important; } /* ======================================================= POLVO DERECHO · FINAL MOBILE Continuo, ancho y fundido arriba/abajo ======================================================== */ .kob-dust-particles-side{ display:block !important; position:absolute !important; left:auto !important; right:-55px !important; top:10% !important; width:300px !important; max-width:none !important; height:84% !important; opacity:.68 !important; overflow:hidden !important; pointer-events:none !important; z-index:3 !important; mix-blend-mode:normal !important; filter: saturate(.56) brightness(.72) contrast(.92) !important; background: linear-gradient( to left, rgba(var(--dust1),.145) 0%, rgba(var(--dust1),.14) 14%, rgba(var(--dust2),.125) 28%, rgba(var(--dust3),.105) 43%, rgba(var(--dust1),.078) 57%, rgba(var(--dust2),.050) 70%, rgba(var(--dust1),.025) 83%, transparent 100% ), radial-gradient( ellipse 82% 44% at 62% 51%, rgba(var(--dust3),.32) 0%, rgba(var(--dust3),.25) 18%, rgba(var(--dust2),.18) 36%, rgba(var(--dust1),.115) 52%, rgba(var(--dust1),.065) 67%, rgba(var(--dust2),.025) 80%, transparent 100% ), radial-gradient( ellipse 76% 18% at 61% 32%, rgba(var(--dust2),.27) 0%, rgba(var(--dust2),.19) 24%, rgba(var(--dust1),.12) 43%, rgba(var(--dust1),.060) 62%, rgba(var(--dust1),.022) 77%, transparent 100% ), radial-gradient( ellipse 76% 18% at 61% 72%, rgba(var(--dust2),.27) 0%, rgba(var(--dust2),.19) 24%, rgba(var(--dust1),.12) 43%, rgba(var(--dust1),.060) 62%, rgba(var(--dust1),.022) 77%, transparent 100% ), radial-gradient( ellipse 62% 33% at 66% 51%, rgba(var(--dust3),.36) 0%, rgba(var(--dust3),.27) 20%, rgba(var(--dust2),.19) 39%, rgba(var(--dust1),.105) 58%, rgba(var(--dust1),.045) 74%, transparent 94% ), radial-gradient( ellipse 58% 25% at 68% 13%, rgba(var(--dust1),.15) 0%, rgba(var(--dust1),.075) 32%, rgba(var(--dust1),.025) 58%, transparent 84% ), radial-gradient( ellipse 58% 25% at 68% 88%, rgba(var(--dust1),.15) 0%, rgba(var(--dust1),.075) 32%, rgba(var(--dust1),.025) 58%, transparent 84% ) !important; background-repeat:no-repeat !important; -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.04) 5%, rgba(0,0,0,.12) 11%, rgba(0,0,0,.26) 18%, rgba(0,0,0,.44) 27%, rgba(0,0,0,.64) 38%, rgba(0,0,0,.80) 50%, rgba(0,0,0,.92) 62%, #000 76%, #000 100% ), linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.015) 2%, rgba(0,0,0,.05) 5%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.23) 12%, rgba(0,0,0,.38) 16%, rgba(0,0,0,.55) 20%, rgba(0,0,0,.70) 24%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.91) 32%, rgba(0,0,0,.97) 36%, #000 41%, #000 62%, rgba(0,0,0,.97) 67%, rgba(0,0,0,.91) 71%, rgba(0,0,0,.82) 75%, rgba(0,0,0,.70) 79%, rgba(0,0,0,.55) 83%, rgba(0,0,0,.38) 87%, rgba(0,0,0,.23) 91%, rgba(0,0,0,.12) 94%, rgba(0,0,0,.05) 97%, rgba(0,0,0,.015) 99%, transparent 100% ) !important; mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.04) 5%, rgba(0,0,0,.12) 11%, rgba(0,0,0,.26) 18%, rgba(0,0,0,.44) 27%, rgba(0,0,0,.64) 38%, rgba(0,0,0,.80) 50%, rgba(0,0,0,.92) 62%, #000 76%, #000 100% ), linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.015) 2%, rgba(0,0,0,.05) 5%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.23) 12%, rgba(0,0,0,.38) 16%, rgba(0,0,0,.55) 20%, rgba(0,0,0,.70) 24%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.91) 32%, rgba(0,0,0,.97) 36%, #000 41%, #000 62%, rgba(0,0,0,.97) 67%, rgba(0,0,0,.91) 71%, rgba(0,0,0,.82) 75%, rgba(0,0,0,.70) 79%, rgba(0,0,0,.55) 83%, rgba(0,0,0,.38) 87%, rgba(0,0,0,.23) 91%, rgba(0,0,0,.12) 94%, rgba(0,0,0,.05) 97%, rgba(0,0,0,.015) 99%, transparent 100% ) !important; -webkit-mask-composite:source-in !important; mask-composite:intersect !important; } .kob-dust-particles-side::before, .kob-dust-particles-side::after{ content:none !important; display:none !important; } /* ======================================================= SIN PARTÍCULAS ======================================================== */ .kob-dust-particles-top::before, .kob-dust-particles-top::after, .kob-dust-particles-bottom::before, .kob-dust-particles-bottom::after, .kob-dust-particles-side::before, .kob-dust-particles-side::after{ content:none !important; display:none !important; } /* ======================================================= CONTENIDO HERO ======================================================== */ .kob-hero-content{ position:absolute !important; z-index:6 !important; left:8px !important; right:auto !important; top:35% !important; width: calc(100% - 16px) !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; text-align:left !important; transform:none !important; } /* ======================================================= TÍTULO ======================================================== */ .kob-hero .kob-hero-content .kob-hero-title{ display:block !important; width:100% !important; max-width:360px !important; margin: 0 0 0 14px !important; padding:0 !important; text-align:left !important; transform:none !important; font-size: clamp( 41px, 11vw, 51px ) !important; line-height:.86 !important; font-weight:600 !important; letter-spacing:-.052em !important; } /* ======================================================= TÍTULO MOBILE · 4 LÍNEAS ======================================================== */ .kob-hero-title > .kob-title-white, .kob-hero-title > .kob-title-green{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; text-align:left !important; } .kob-hero-title > .kob-title-green{ margin-top:3px !important; } .kob-title-white > span, .kob-title-green > span{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; text-align:left !important; } .kob-title-white > span:first-child::after, .kob-title-green > span:first-child::after{ content:"" !important; } /* PRIMERAS DOS LÍNEAS */ .kob-hero-title .kob-title-white, .kob-hero-title .kob-title-white > span{ color:#f4f2ed !important; } /* ÚLTIMAS DOS LÍNEAS */ .kob-hero-title .kob-title-green, .kob-hero-title .kob-title-green > span{ color:var(--kob-green) !important; } /* ======================================================= BR MOBILE ======================================================== */ .kob-mobile-br{ display:block !important; } /* ======================================================= PÁRRAFO ======================================================== */ .kob-hero .kob-hero-description{ display:block !important; width:auto !important; max-width:350px !important; margin: 23px 0 0 14px !important; padding:0 !important; text-align:left !important; font-size:12.5px !important; line-height:1.55 !important; } /* ======================================================= LOGO + TEXTO ======================================================== */ .kob-hero .kob-hero-brand-row{ position:relative !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; max-width:370px !important; min-width:0 !important; gap:4px !important; margin: 32px 0 0 0 !important; padding:0 !important; text-align:left !important; transform: translateX(-10px) !important; } /* ======================================================= LOGO ======================================================== */ .kob-hero-brand{ width:125px !important; min-width:125px !important; flex: 0 0 125px !important; } .kob-hero-brand img{ display:block !important; width:100% !important; height:auto !important; object-fit:contain !important; } /* ======================================================= KOBLENZ / SERVICIOS INTEGRALES ======================================================== */ .kob-hero .kob-hero-kicker{ display:flex !important; flex: 1 1 auto !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:4px !important; width:auto !important; max-width:230px !important; min-width:0 !important; margin:0 !important; padding:0 !important; transform: translateX(-14px) !important; text-align:left !important; line-height:1.1 !important; white-space:normal !important; } .kob-kicker-name{ display:block !important; margin:0 !important; padding:0 !important; font-size:13px !important; font-weight:900 !important; line-height:1 !important; letter-spacing:.18em !important; color: var(--kob-green) !important; } .kob-kicker-services{ display:block !important; margin: 2px 0 0 !important; padding:0 !important; font-size:10.2px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.15em !important; color: var(--kob-green) !important; } /* ======================================================= MOPA ======================================================== */ .kob-hero-mop{ position:absolute !important; z-index:5 !important; left:auto !important; right:-395px !important; top:53.5% !important; width:570px !important; max-width:none !important; margin:0 !important; padding:0 !important; transform: translateY(-50%) !important; pointer-events:none !important; } .kob-hero-mop img{ display:block !important; width:100% !important; max-width:none !important; height:auto !important; object-fit:contain !important; } /* ======================================================= LÍNEAS BRILLANTES · FINAL MOBILE Encima del polvo, debajo de la mopa/contenido ======================================================== */ .kob-hero::before, .kob-hero::after{ content:"" !important; position:absolute !important; left:-12% !important; right:auto !important; width:90% !important; height:6px !important; margin:0 !important; padding:0 !important; pointer-events:none !important; z-index:4 !important; background:rgba(255,255,255,.105) !important; opacity:1 !important; filter:none !important; border-radius:0 !important; } .kob-hero::before{ top:33.1% !important; box-shadow: 0 -1px 3px rgba(255,255,255,.018), 0 1px 4px rgba(255,255,255,.025), 0 3px 8px rgba(0,0,0,.16) !important; } .kob-hero::after{ top:72.1% !important; box-shadow: 0 1px 3px rgba(255,255,255,.018), 0 -1px 4px rgba(255,255,255,.025), 0 -3px 8px rgba(0,0,0,.16) !important; } } /* ========================================================= TELÉFONOS PEQUEÑOS · SOLO DIFERENCIAS REALES ========================================================= */ @media(max-width:480px){ /* ======================================================= NAVBAR ======================================================== */ .koblenz-navbar{ left:10px !important; right:10px !important; max-width: calc(100% - 20px) !important; } /* ======================================================= CTA ======================================================== */ .koblenz-nav-cta{ left:50% !important; width:190px !important; max-width:190px !important; padding: 0 12px !important; font-size:7.6px !important; transform: translate(-50%,-50%) !important; } /* ======================================================= CONTENIDO ======================================================== */ .kob-hero-content{ left:6px !important; width: calc(100% - 12px) !important; margin:0 !important; padding:0 !important; } /* ======================================================= TÍTULO ======================================================== */ .kob-hero .kob-hero-content .kob-hero-title{ max-width:355px !important; margin: 0 0 0 14px !important; padding:0 !important; font-size: clamp( 40px, 11vw, 49px ) !important; } /* ======================================================= PÁRRAFO ======================================================== */ .kob-hero .kob-hero-description{ max-width:330px !important; margin: 23px 0 0 14px !important; font-size:12.3px !important; } /* ======================================================= MARCA ======================================================== */ .kob-hero .kob-hero-brand-row{ max-width:355px !important; margin: 32px 0 0 !important; transform: translateX(-10px) !important; } .kob-hero-brand{ width:120px !important; min-width:120px !important; flex: 0 0 120px !important; } .kob-hero .kob-hero-kicker{ max-width:225px !important; transform: translateX(-14px) !important; } .kob-kicker-name{ font-size:12px !important; } .kob-kicker-services{ font-size:9.7px !important; } /* ======================================================= MOPA ======================================================== */ .kob-hero-mop{ right:-385px !important; top:53% !important; width:540px !important; } } @media(max-width:768px){ .kob-hero .kob-hero-content .kob-hero-title{ /* Baja el título apenas */ transform:translateY(4px) !important; /* Aumenta ligeramente el tamaño */ font-size:clamp( 42px, 11.4vw, 52px ) !important; } .kob-hero .kob-hero-description{ transform:translateY(-4px) !important; } } /* ========================================================= KOBLENZ · MOBILE · CENTRADO EDITORIAL FINAL ========================================================= */ @media(max-width:768px){ /* ======================================================= ABOUT ======================================================== */ .about-content{ text-align:center !important; } .about-kicker{ display:block !important; width:100% !important; text-align:center !important; } .about-title{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .about-divider{ justify-content:center !important; } /* PÁRRAFOS: mejor alineados a la izquierda para conservar buena lectura en móvil */ .about-copy, .about-copy p{ text-align:left !important; } /* FIRMA */ .about-signature{ width:max-content !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:left !important; } /* BOTÓN */ .about-button{ display:flex !important; width:max-content !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } /* ======================================================= SERVICIOS ======================================================== */ .services-heading{ width:100% !important; text-align:center !important; } .services-kicker{ display:block !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .services-heading h2{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } /* ======================================================= CTA FINAL SERVICIOS ======================================================== */ .services-footer > .services-footer-title{ width:100% !important; text-align:center !important; } .services-footer-kicker{ display:block !important; width:100% !important; text-align:center !important; } .services-footer-copy{ margin-left:auto !important; margin-right:auto !important; } .services-footer-copy .services-footer-lead{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .services-footer-statement p{ text-align:left !important; } .services-footer .services-main-button{ left:50% !important; transform: translateX(-50%) !important; } /* ======================================================= CONTACTO ======================================================== */ .kob-contact-info{ text-align:center !important; } .kob-contact-kicker{ display:block !important; width:100% !important; text-align:center !important; } .kob-contact-title{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .kob-contact-intro{ max-width:430px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } /* DATOS DE CONTACTO: mejor alineados a la izquierda */ .kob-contact-data, .kob-contact-data-content{ text-align:left !important; } /* REDES */ .kob-contact-social{ align-items:center !important; text-align:center !important; } .kob-contact-social-label{ width:100% !important; text-align:center !important; } /* ======================================================= FORMULARIO ======================================================== */ .kob-contact-form-head{ display:flex !important; justify-content:center !important; text-align:center !important; } .kob-contact-form-head > div{ width:100% !important; text-align:center !important; } .kob-contact-form-head > div > span{ width:100% !important; text-align:center !important; } .kob-contact-form-head h3{ width:100% !important; max-width:100% !important; text-align:center !important; } /* LABELS E INPUTS: los dejamos alineados a la izquierda */ .kob-contact-form, .kob-form-field, .kob-form-field label{ text-align:left !important; } /* FOOTER FORM */ .kob-contact-form-footer{ flex-direction:column !important; align-items:center !important; text-align:center !important; } .kob-contact-form-footer p{ max-width:360px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } /* BOTÓN ENVIAR */ .kob-contact-submit{ margin-left:auto !important; margin-right:auto !important; } /* ======================================================= MODAL DE TIPS · IMAGEN MÁS GRANDE ======================================================== */ .kob-tip-modal-visual{ width:100% !important; height:310px !important; min-height:310px !important; } .kob-tip-modal-visual img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media(max-width:480px){ .kob-tip-modal-visual{ height:275px !important; min-height:275px !important; } } /* ========================================================= KOBLENZ · MOBILE · AJUSTES FINALES TIPS + CARDS DE SERVICIOS + MODAL DE TIPS ========================================================= */ @media(max-width:768px){ /* ======================================================= TIPS · CABECERA CENTRADA ======================================================== */ .kob-tips-heading, .kob-tips-heading-main{ width:100% !important; text-align:center !important; } .kob-tips-kicker{ display:block !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .kob-tips-heading h2{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .kob-tips-heading h2 span{ display:block !important; text-align:center !important; } /* ======================================================= TIPS · PÁRRAFO JUSTIFICADO ======================================================== */ .kob-tips-heading-copy{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } .kob-tips-heading-copy p{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:justify !important; text-align-last:left !important; hyphens:auto; -webkit-hyphens:auto; line-height:1.7 !important; } /* ======================================================= CARDS DE SERVICIOS · KICKER + TÍTULO CENTRADOS ======================================================== */ .service-info{ width:100% !important; text-align:center !important; } .service-info-top{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; text-align:center !important; } .service-category{ display:block !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .service-arrow{ position:absolute !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important; } .service-info h3{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .service-info h3 span{ display:block !important; text-align:center !important; } /* ======================================================= MODAL TIPS · KICKER + TÍTULO CENTRADOS ======================================================== */ .kob-tip-modal-copy{ text-align:center !important; } .kob-tip-modal-meta{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:100% !important; gap:8px !important; text-align:center !important; } .kob-tip-modal-category{ display:block !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .kob-tip-modal-index{ display:block !important; width:100% !important; text-align:center !important; } .kob-tip-modal-copy h2{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .kob-tip-modal-divider{ display:flex !important; justify-content:center !important; } .kob-tip-modal-text, .kob-tip-modal-text p{ text-align:left !important; } } @media(max-width:480px){ .kob-tips-heading h2, .service-info h3, .kob-tip-modal-copy h2{ text-wrap:balance; } }