/* ================================================== TOKENS / VARIABLES DE MARCA SEGGUR================================================== */ :root {/* Tipografías */--sg-font-title: "Pogonia", serif;--sg-font-body: "Grit", sans-serif; /* Colores principales */--sg-navy: #1A365D;--sg-coral: #F47B7A;--sg-salmon: #F09E80; /* Neutros */--sg-dark: #2D3748;--sg-gray: #64748B;--sg-light-gray: #F4F5F7;--sg-white: #ffffff; /* Fondos */--sg-bg-light: #F8FAFC;--sg-bg-soft: #FFF4F2; /* Bordes y sombras */--sg-border-soft: #D9E0E8;--sg-radius-sm: 8px;--sg-radius-md: 12px;--sg-radius-lg: 16px; --sg-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);--sg-shadow-hover: 0 12px 24px rgba(15, 23, 42, 0.10); /* ==================================================2. HERO SEGGUR - SEGUROS A UN CLICK================================================== */ .sg-hero {width: 100% !important;min-height: 520px !important; margin: 0 !important;padding: 0 !important; position: relative !important;overflow: hidden !important; background-size: cover !important;background-position: center center !important;background-repeat: no-repeat !important;} /*IMPORTANTE:No ponemos background-color: transparent en .sg-hero,porque eso puede quitar la imagen de fondo de Zoho.*/ /* Limpieza interna de Zoho sin tocar el fondo principal */.sg-hero .zpcontainer,.sg-hero .zprow,.sg-hero .zpcolumn,.sg-hero .zpelement {border: none !important;box-shadow: none !important;} /* ==================================================3. CONTENEDOR INTERNO DEL HERO================================================== */ .sg-hero-content {width: 100% !important;max-width: 1180px !important;min-height: 520px !important; margin: 0 auto !important;padding: 84px 24px 30px 24px !important; display: flex !important;flex-direction: column !important;align-items: flex-start !important;justify-content: flex-start !important; text-align: left !important; position: relative !important;z-index: 2 !important;} /* ==================================================4. BADGE SUPERIOR================================================== */ .sg-hero-badge,.sg-hero-badge p,.sg-hero-badge div,.sg-hero-badge span {font-family: var(--sg-font-body) !important;font-size: 13px !important;font-weight: 700 !important;line-height: 1.1 !important; color: var(--sg-navy) !important; margin: 0 0 18px 0 !important;padding: 0 !important; text-align: left !important;background: transparent !important;} /* Quita decoraciones raras como la U */.sg-hero-badge::before,.sg-hero-badge::after {display: none !important;content: none !important;} /* ==================================================5. TÍTULO AZUL: SEGUROS================================================== */ .sg-hero-title-dark,.sg-hero-title-dark h1,.sg-hero-title-dark h2,.sg-hero-title-dark h3,.sg-hero-title-dark p,.sg-hero-title-dark div,.sg-hero-title-dark span {font-family: var(--sg-font-title) !important;font-size: 56px !important;font-weight: 800 !important;line-height: 0.95 !important;letter-spacing: -1px !important; color: var(--sg-navy) !important; margin: 0 0 8px 0 !important;padding: 0 !important; text-align: left !important;background: transparent !important;} /* ==================================================6. TÍTULO CORAL: A UN CLICK================================================== */ .sg-hero-title-coral,.sg-hero-title-coral h1,.sg-hero-title-coral h2,.sg-hero-title-coral h3,.sg-hero-title-coral p,.sg-hero-title-coral div,.sg-hero-title-coral span {font-family: var(--sg-font-title) !important;font-size: 52px !important;font-weight: 800 !important;line-height: 0.95 !important;letter-spacing: -0.8px !important; color: var(--sg-coral) !important; margin: 0 0 16px 0 !important;padding: 0 !important; text-align: left !important;background: transparent !important;} /* ==================================================7. TEXTO DESCRIPTIVO================================================== */ .sg-hero-text,.sg-hero-text p,.sg-hero-text div,.sg-hero-text span {font-family: var(--sg-font-body) !important;font-size: 14px !important;font-weight: 600 !important;line-height: 1.45 !important; color: var(--sg-navy) !important; max-width: 395px !important; margin: 0 !important;padding: 0 !important; text-align: left !important;background: transparent !important;} .sg-hero-text + .sg-hero-text {margin-top: 2px !important;} /* ==================================================8. CONTENEDOR DE BOTONES================================================== */ .sg-hero-actions {width: 100% !important;max-width: 350px !important; /* Mueve los botones un poco hacia la izquierda */margin: 18px 0 0 -28px !important;padding: 0 !important; display: grid !important;grid-template-columns: 130px 155px !important;grid-template-areas:"cotizar asesor""siniestro siniestro"; column-gap: 10px !important;row-gap: 10px !important; justify-content: start !important;align-items: center !important; background: transparent !important;} /* Limpieza interna de botones de Zoho */.sg-hero-actions .zpelement,.sg-hero-actions .zpbutton-container,.sg-hero-actions .zpbutton-wrapper,.sg-hero-actions .zpbutton-align-left,.sg-hero-actions .zpbutton-align-center,.sg-hero-actions .zpbutton-align-right {width: auto !important;max-width: none !important; margin: 0 !important;padding: 0 !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================9. BOTONES BASE================================================== */ .sg-btn-cotizar,.sg-btn-cotizar a,.sg-btn-cotizar button,.sg-btn-cotizar .zpbutton,.sg-btn-asesor,.sg-btn-asesor a,.sg-btn-asesor button,.sg-btn-asesor .zpbutton,.sg-btn-siniestro,.sg-btn-siniestro a,.sg-btn-siniestro button,.sg-btn-siniestro .zpbutton {display: inline-flex !important;align-items: center !important;justify-content: center !important; font-family: var(--sg-font-body) !important;font-weight: 700 !important; text-align: center !important;text-decoration: none !important;white-space: nowrap !important; margin: 0 !important;padding: 0 10px !important; box-shadow: none !important;box-sizing: border-box !important; transition: all 0.25s ease !important;} /* ==================================================10. BOTÓN COTIZAR================================================== */ .sg-btn-cotizar {grid-area: cotizar !important;} .sg-btn-cotizar,.sg-btn-cotizar a,.sg-btn-cotizar button,.sg-btn-cotizar .zpbutton {width: 130px !important;height: 32px !important; background: var(--sg-coral) !important;color: var(--sg-white) !important; border: none !important;border-radius: 7px !important; font-size: 11px !important;line-height: 1 !important;} .sg-btn-cotizar a::after,.sg-btn-cotizar button::after,.sg-btn-cotizar .zpbutton::after {content: "→" !important;margin-left: 6px !important;font-size: 12px !important;line-height: 1 !important;} /* ==================================================11. BOTÓN HABLAR CON ASESOR================================================== */ .sg-btn-asesor {grid-area: asesor !important;} .sg-btn-asesor,.sg-btn-asesor a,.sg-btn-asesor button,.sg-btn-asesor .zpbutton {width: 155px !important;height: 32px !important; background: var(--sg-coral) !important;color: var(--sg-white) !important; border: none !important;border-radius: 7px !important; font-size: 11px !important;line-height: 1 !important;} /* ==================================================12. BOTÓN REPORTAR SINIESTRO================================================== */ .sg-btn-siniestro {grid-area: siniestro !important;} .sg-btn-siniestro,.sg-btn-siniestro a,.sg-btn-siniestro button,.sg-btn-siniestro .zpbutton {width: 225px !important;height: 28px !important; background: var(--sg-bg-soft) !important;color: var(--sg-coral) !important; border: 1px solid var(--sg-coral) !important;border-radius: 8px !important; font-size: 10px !important;line-height: 1 !important;} /* Quita signos o flechas extra en Reportar Siniestro */.sg-btn-siniestro a::before,.sg-btn-siniestro button::before,.sg-btn-siniestro .zpbutton::before,.sg-btn-siniestro a::after,.sg-btn-siniestro button::after,.sg-btn-siniestro .zpbutton::after {display: none !important;content: none !important;margin: 0 !important;} /* ==================================================13. HOVER================================================== */ .sg-btn-cotizar:hover,.sg-btn-cotizar a:hover,.sg-btn-asesor:hover,.sg-btn-asesor a:hover,.sg-btn-siniestro:hover,.sg-btn-siniestro a:hover {transform: translateY(-1px) !important;opacity: 0.96 !important;} /* ==================================================14. RESPONSIVE TABLET================================================== */ @media (max-width: 991px) {.sg-hero {min-height: 500px !important;background-position: center right !important;} .sg-hero-content {min-height: 500px !important;padding: 78px 22px 26px 22px !important;} .sg-hero-title-dark,.sg-hero-title-dark h1,.sg-hero-title-dark h2,.sg-hero-title-dark h3,.sg-hero-title-dark p,.sg-hero-title-dark div,.sg-hero-title-dark span {font-size: 48px !important;} .sg-hero-title-coral,.sg-hero-title-coral h1,.sg-hero-title-coral h2,.sg-hero-title-coral h3,.sg-hero-title-coral p,.sg-hero-title-coral div,.sg-hero-title-coral span {font-size: 44px !important;} .sg-hero-text,.sg-hero-text p,.sg-hero-text div,.sg-hero-text span {max-width: 380px !important;} .sg-hero-actions {margin: 18px 0 0 -18px !important;}} /* ==================================================15. RESPONSIVE MÓVIL================================================== */ @media (max-width: 600px) {.sg-hero {min-height: auto !important;background-position: center right !important;} .sg-hero-content {min-height: auto !important;padding: 74px 18px 24px 18px !important;} .sg-hero-badge,.sg-hero-badge p,.sg-hero-badge div,.sg-hero-badge span {font-size: 12px !important;margin-bottom: 14px !important;} .sg-hero-title-dark,.sg-hero-title-dark h1,.sg-hero-title-dark h2,.sg-hero-title-dark h3,.sg-hero-title-dark p,.sg-hero-title-dark div,.sg-hero-title-dark span {font-size: 34px !important;margin-bottom: 6px !important;} .sg-hero-title-coral,.sg-hero-title-coral h1,.sg-hero-title-coral h2,.sg-hero-title-coral h3,.sg-hero-title-coral p,.sg-hero-title-coral div,.sg-hero-title-coral span {font-size: 32px !important;margin-bottom: 14px !important;} .sg-hero-text,.sg-hero-text p,.sg-hero-text div,.sg-hero-text span {font-size: 13px !important;max-width: 100% !important;} .sg-hero-actions {max-width: 100% !important;margin: 18px 0 0 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .sg-btn-cotizar,.sg-btn-cotizar a,.sg-btn-cotizar button,.sg-btn-cotizar .zpbutton,.sg-btn-asesor,.sg-btn-asesor a,.sg-btn-asesor button,.sg-btn-asesor .zpbutton,.sg-btn-siniestro,.sg-btn-siniestro a,.sg-btn-siniestro button,.sg-btn-siniestro .zpbutton {width: 100% !important;}} /* ==================================================SECCIÓN: DESCUBRE CÓMO ESTAR MEJOR PROTEGIDOAJUSTADA PARA: HEADER WRAPPER BLANCO FILA ARRIBA + FILA ABAJO CENTRADA TARJETAS MÁS GRANDES BOTONES ALINEADOS================================================== */ .sg-protection-section {width: 100% !important;margin: 0 !important;padding: 12px 24px 70px 24px !important;background: #f3f4f6 !important;overflow: hidden !important;} /* Limpieza general Zoho */.sg-protection-section .zpcontainer,.sg-protection-section .zprow,.sg-protection-section .zpcolumn,.sg-protection-section .zpelement {background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================HEADER================================================== */ .sg-protection-header {width: 100% !important;max-width: 980px !important;margin: 0 auto 26px auto !important;padding: 0 !important;text-align: center !important;} .sg-protection-title,.sg-protection-title h1,.sg-protection-title h2,.sg-protection-title h3,.sg-protection-title p,.sg-protection-title div,.sg-protection-title span {font-family: var(--sg-font-title) !important;font-size: 46px !important;font-weight: 900 !important;line-height: 1 !important;letter-spacing: -1px !important;color: var(--sg-navy) !important;margin: 0 0 14px 0 !important;padding: 0 !important;text-align: center !important;} .sg-protection-subtitle,.sg-protection-subtitle p,.sg-protection-subtitle div,.sg-protection-subtitle span {font-family: var(--sg-font-body) !important;font-size: 20px !important;font-weight: 500 !important;line-height: 1.2 !important;color: var(--sg-navy) !important;margin: 0 !important;padding: 0 !important;text-align: center !important;} /* ==================================================WRAPPER BLANCO QUE CONTIENE LAS 2 FILAS================================================== */ .sg-protection-cards-wrap {width: 100% !important;max-width: 1060px !important; margin: 0 auto !important;padding: 28px 24px 32px 24px !important; background: var(--sg-white) !important;border: none !important;box-shadow: none !important; box-sizing: border-box !important;overflow: hidden !important;} /* Limpieza interna del wrapper */.sg-protection-cards-wrap .zpcontainer,.sg-protection-cards-wrap .zprow,.sg-protection-cards-wrap .zpcolumn,.sg-protection-cards-wrap .zpelement {background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================FILAS================================================== */ .sg-protection-row {width: 100% !important;margin: 0 auto 28px auto !important;padding: 0 !important; display: flex !important;flex-wrap: wrap !important;justify-content: center !important;align-items: stretch !important;gap: 24px !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* Fila superior más ancha */.sg-protection-row-top {max-width: 860px !important;} /* Fila inferior más angosta y centrada */.sg-protection-row-bottom {max-width: 640px !important;margin-left: auto !important;margin-right: auto !important;margin-bottom: 0 !important;} /* Limpieza de columnas internas */.sg-protection-row .zpcontainer,.sg-protection-row .zprow,.sg-protection-row .zpcolumn,.sg-protection-row .zpelement {background: transparent !important;border: none !important;box-shadow: none !important;margin: 0 !important;padding: 0 !important;} /* ==================================================TARJETA================================================== */ .sg-protection-card {width: 184px !important;min-width: 184px !important;max-width: 184px !important; min-height: 300px !important; margin: 0 !important;padding: 22px 16px 18px 16px !important; background: var(--sg-white) !important;border: 1.6px solid var(--sg-navy) !important;border-radius: 22px !important; box-shadow: none !important;box-sizing: border-box !important;overflow: hidden !important; display: flex !important;flex-direction: column !important;align-items: center !important;justify-content: flex-start !important; text-align: center !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important;} .sg-protection-card:hover {transform: translateY(-3px) !important;box-shadow: 0 10px 18px rgba(26, 54, 93, 0.10) !important;} /* Limpieza interna de card */.sg-protection-card .zpelement,.sg-protection-card .zptext,.sg-protection-card .zptext-container,.sg-protection-card .zpheading,.sg-protection-card .zpheading-container,.sg-protection-card .zpimage-container,.sg-protection-card .zpbutton-container {width: 100% !important;max-width: 100% !important;margin: 0 !important;padding: 0 !important;background: transparent !important;border: none !important;box-shadow: none !important;text-align: center !important;} /* ==================================================ICONO================================================== */ .sg-protection-icon,.sg-protection-icon img,.sg-protection-card img {width: 84px !important;height: 84px !important;object-fit: contain !important;display: block !important;margin: 0 auto 14px auto !important;padding: 0 !important;} /* ==================================================TÍTULO TARJETA================================================== */ .sg-protection-card-title,.sg-protection-card-title h1,.sg-protection-card-title h2,.sg-protection-card-title h3,.sg-protection-card-title p,.sg-protection-card-title div,.sg-protection-card-title span {font-family: var(--sg-font-title) !important;font-size: 19px !important;font-weight: 600 !important;line-height: 1.05 !important;color: var(--sg-navy) !important; margin: 0 0 10px 0 !important;padding: 0 !important; text-align: center !important; min-height: 42px !important; display: flex !important;align-items: center !important;justify-content: center !important; overflow-wrap: anywhere !important;word-break: break-word !important;} /* ==================================================TEXTO TARJETA================================================== */ .sg-protection-card-text,.sg-protection-card-text p,.sg-protection-card-text div,.sg-protection-card-text span {font-family: var(--sg-font-body) !important;font-size: 12px !important;font-weight: 700 !important;line-height: 1.15 !important;color: var(--sg-navy) !important; margin: 0 0 16px 0 !important;padding: 0 !important; text-align: center !important; min-height: 52px !important; display: flex !important;align-items: flex-start !important;justify-content: center !important; overflow-wrap: anywhere !important;word-break: break-word !important;} /* ==================================================BOTÓNAlineado abajo en todas las tarjetas================================================== */ .sg-protection-btn,.sg-protection-btn a,.sg-protection-btn button,.sg-protection-btn .zpbutton {width: 124px !important;height: 31px !important; margin: auto auto 0 auto !important;padding: 0 !important; display: inline-flex !important;align-items: center !important;justify-content: center !important; background: var(--sg-coral) !important;color: var(--sg-white) !important; border: none !important;border-radius: 7px !important; font-family: var(--sg-font-body) !important;font-size: 15px !important;font-weight: 800 !important;line-height: 1 !important; text-align: center !important;text-decoration: none !important; box-shadow: none !important;transition: all 0.25s ease !important;} .sg-protection-btn:hover,.sg-protection-btn a:hover,.sg-protection-btn button:hover,.sg-protection-btn .zpbutton:hover {opacity: 0.96 !important;transform: translateY(-1px) !important;} /* ==================================================RESPONSIVE TABLET================================================== */ @media (max-width: 991px) {.sg-protection-section {padding: 16px 20px 56px 20px !important;} .sg-protection-title,.sg-protection-title h1,.sg-protection-title h2,.sg-protection-title h3,.sg-protection-title p,.sg-protection-title div,.sg-protection-title span {font-size: 38px !important;} .sg-protection-subtitle,.sg-protection-subtitle p,.sg-protection-subtitle div,.sg-protection-subtitle span {font-size: 18px !important;} .sg-protection-cards-wrap {padding: 24px 18px 28px 18px !important;} .sg-protection-row {gap: 20px !important;} .sg-protection-row-top {max-width: 760px !important;} .sg-protection-row-bottom {max-width: 580px !important;} .sg-protection-card {width: 170px !important;min-width: 170px !important;max-width: 170px !important;min-height: 288px !important;}} /* ==================================================RESPONSIVE MÓVIL================================================== */ @media (max-width: 600px) {.sg-protection-section {padding: 20px 16px 48px 16px !important;} .sg-protection-title,.sg-protection-title h1,.sg-protection-title h2,.sg-protection-title h3,.sg-protection-title p,.sg-protection-title div,.sg-protection-title span {font-size: 28px !important;line-height: 1.1 !important;} .sg-protection-subtitle,.sg-protection-subtitle p,.sg-protection-subtitle div,.sg-protection-subtitle span {font-size: 15px !important;} .sg-protection-cards-wrap {padding: 18px 12px 22px 12px !important;} .sg-protection-row,.sg-protection-row-top,.sg-protection-row-bottom {max-width: 100% !important;gap: 16px !important;margin-bottom: 16px !important;} .sg-protection-card {width: calc(50% - 8px) !important;min-width: calc(50% - 8px) !important;max-width: calc(50% - 8px) !important;min-height: 252px !important;padding: 16px 12px 14px 12px !important;} .sg-protection-icon,.sg-protection-icon img,.sg-protection-card img {width: 62px !important;height: 62px !important;} .sg-protection-card-title,.sg-protection-card-title h1,.sg-protection-card-title h2,.sg-protection-card-title h3,.sg-protection-card-title p,.sg-protection-card-title div,.sg-protection-card-title span {font-size: 17px !important;min-height: 38px !important;} .sg-protection-card-text,.sg-protection-card-text p,.sg-protection-card-text div,.sg-protection-card-text span {font-size: 11px !important;min-height: 44px !important;} .sg-protection-btn,.sg-protection-btn a,.sg-protection-btn button,.sg-protection-btn .zpbutton {width: 110px !important;height: 28px !important;font-size: 14px !important;}} /* ==================================================SECCIÓN: NUESTRAS ASEGURADORAS ALIADAS - CARRUSEL================================================== */ .sg-allies-section {width: 100% !important;margin: 0 !important;padding: 34px 24px 48px 24px !important; background: var(--sg-white) !important;overflow: hidden !important;} /* Limpieza general sin romper el carrusel */.sg-allies-section .zpcontainer,.sg-allies-section .zprow,.sg-allies-section .zpcolumn,.sg-allies-section .zpelement {border: none !important;box-shadow: none !important;} /* ==================================================TÍTULO================================================== */ .sg-allies-title,.sg-allies-title h1,.sg-allies-title h2,.sg-allies-title h3,.sg-allies-title p,.sg-allies-title div,.sg-allies-title span {font-family: var(--sg-font-title) !important;font-size: 46px !important;font-weight: 900 !important;line-height: 1.05 !important;letter-spacing: -1px !important; color: var(--sg-navy) !important; margin: 0 0 34px 0 !important;padding: 0 !important; text-align: center !important;} /* ==================================================CARRUSEL================================================== */ .sg-allies-carousel {width: 100% !important;max-width: 1060px !important; margin: 0 auto !important;padding: 0 54px 28px 54px !important; background: transparent !important;position: relative !important;box-sizing: border-box !important;} /* Evita ese espacio gigante vacío */.sg-allies-carousel,.sg-allies-carousel .zpslider,.sg-allies-carousel .zpcarousel,.sg-allies-carousel .zpslider-container,.sg-allies-carousel .zpcarousel-container {min-height: 90px !important;height: auto !important;} /* Contenedores internos */.sg-allies-carousel .zpcontainer,.sg-allies-carousel .zprow,.sg-allies-carousel .zpcolumn,.sg-allies-carousel .zpelement {background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================CADA SLIDE / ITEM DEL CARRUSEL================================================== */ .sg-allies-carousel .zpslider-slide,.sg-allies-carousel .zpcarousel-slide,.sg-allies-carousel .zpslider-item,.sg-allies-carousel .zpcarousel-item,.sg-allies-carousel .zpimage-container,.sg-allies-carousel .zpimage {display: flex !important;align-items: center !important;justify-content: center !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* Caja visual de cada logo */.sg-allies-carousel .zpimage-container {width: 154px !important;height: 58px !important; margin: 0 auto !important;padding: 8px 14px !important; background: var(--sg-white) !important; border: 1.5px solid var(--sg-navy) !important;border-radius: 14px !important; box-sizing: border-box !important;overflow: hidden !important;} /* Imagen del logo */.sg-allies-logo-img,.sg-allies-logo-img img,.sg-allies-carousel img {max-width: 126px !important;max-height: 38px !important; width: auto !important;height: auto !important; object-fit: contain !important; display: block !important; margin: 0 auto !important;padding: 0 !important;} /* ==================================================FLECHAS DEL CARRUSEL================================================== */ .sg-allies-carousel .zpslider-arrow,.sg-allies-carousel .zpcarousel-arrow,.sg-allies-carousel .zpslider-arrows,.sg-allies-carousel .zpcarousel-arrows {color: var(--sg-navy) !important;opacity: 0.75 !important;} /* Dots inferiores */.sg-allies-carousel .zpslider-dots,.sg-allies-carousel .zpcarousel-dots {margin-top: 18px !important;} .sg-allies-carousel .zpslider-dots *,.sg-allies-carousel .zpcarousel-dots * {border-color: var(--sg-navy) !important;} /* ==================================================RESPONSIVE================================================== */ @media (max-width: 991px) {.sg-allies-title,.sg-allies-title h1,.sg-allies-title h2,.sg-allies-title h3,.sg-allies-title p,.sg-allies-title div,.sg-allies-title span {font-size: 36px !important;} .sg-allies-carousel {max-width: 760px !important;padding: 0 42px 26px 42px !important;} .sg-allies-carousel .zpimage-container {width: 150px !important;height: 56px !important;}} @media (max-width: 600px) {.sg-allies-section {padding: 28px 16px 40px 16px !important;} .sg-allies-title,.sg-allies-title h1,.sg-allies-title h2,.sg-allies-title h3,.sg-allies-title p,.sg-allies-title div,.sg-allies-title span {font-size: 28px !important;margin-bottom: 24px !important;} .sg-allies-carousel {padding: 0 30px 24px 30px !important;} .sg-allies-carousel .zpimage-container {width: 145px !important;height: 54px !important;} .sg-allies-carousel img {max-width: 118px !important;max-height: 34px !important;}} /* ==================================================SECCIÓN: ¿PORQUÉ COMPRAR EN SEGGUR?================================================== */ .sg-why-section {width: 100% !important;margin: 0 !important;padding: 48px 24px 70px 24px !important; background: var(--sg-white) !important;overflow: hidden !important;} /* Limpieza general Zoho */.sg-why-section .zpcontainer,.sg-why-section .zprow,.sg-why-section .zpcolumn,.sg-why-section .zpelement {background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================TÍTULO PRINCIPAL================================================== */ .sg-why-title,.sg-why-title h1,.sg-why-title h2,.sg-why-title h3,.sg-why-title p,.sg-why-title div,.sg-why-title span {font-family: var(--sg-font-title) !important;font-size: 48px !important;font-weight: 900 !important;line-height: 1.05 !important;letter-spacing: -1px !important; color: var(--sg-navy) !important; margin: 0 0 72px 0 !important;padding: 0 !important; text-align: center !important;} /* ==================================================CONTENEDOR DE TARJETAS================================================== */ .sg-why-cards {width: 100% !important;max-width: 980px !important; margin: 0 auto !important;padding: 0 !important; display: flex !important;flex-direction: row !important;flex-wrap: wrap !important; justify-content: center !important;align-items: stretch !important; gap: 34px !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* Si Zoho mete filas internas */.sg-why-cards .zprow {display: contents !important;} .sg-why-cards .zpcolumn,.sg-why-cards .zpelement {margin: 0 !important;padding: 0 !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================TARJETA================================================== */ .sg-why-card {width: 285px !important;min-width: 285px !important;max-width: 285px !important; min-height: 230px !important; margin: 0 !important;padding: 70px 24px 30px 24px !important; position: relative !important; background: var(--sg-white) !important; border: 1.6px solid var(--sg-navy) !important;border-radius: 28px !important; box-shadow: none !important;box-sizing: border-box !important; display: flex !important;flex-direction: column !important;align-items: center !important;justify-content: flex-start !important; text-align: center !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important;} .sg-why-card:hover {transform: translateY(-4px) !important;box-shadow: 0 12px 24px rgba(26, 54, 93, 0.12) !important;} /* Limpieza interna de cada tarjeta */.sg-why-card .zpelement,.sg-why-card .zptext,.sg-why-card .zptext-container,.sg-why-card .zpheading,.sg-why-card .zpheading-container,.sg-why-card .zpimage-container,.sg-why-card .zpicon-container {width: 100% !important;max-width: 100% !important; margin: 0 !important;padding: 0 !important; background: transparent !important;border: none !important;box-shadow: none !important; text-align: center !important;} /* ==================================================ÍCONO SUPERIOR CIRCULAR================================================== */ .sg-why-icon {width: 92px !important;height: 92px !important; position: absolute !important;top: -47px !important;left: 50% !important;transform: translateX(-50%) !important; margin: 0 !important;padding: 12px !important; background: var(--sg-white) !important; border: 1.6px solid var(--sg-navy) !important;border-radius: 999px !important; display: flex !important;align-items: center !important;justify-content: center !important; box-sizing: border-box !important;overflow: hidden !important; z-index: 3 !important;} /* Imagen dentro del círculo */.sg-why-icon img,.sg-why-card .sg-why-icon img {width: 68px !important;height: 68px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important;padding: 0 !important;} /* Si usas icono nativo de Zoho en vez de imagen */.sg-why-icon i,.sg-why-icon svg {width: 62px !important;height: 62px !important;color: var(--sg-coral) !important;fill: none !important;stroke: var(--sg-coral) !important;} /* ==================================================TÍTULO DE TARJETA================================================== */ .sg-why-card-title,.sg-why-card-title h1,.sg-why-card-title h2,.sg-why-card-title h3,.sg-why-card-title p,.sg-why-card-title div,.sg-why-card-title span {font-family: var(--sg-font-body) !important;font-size: 27px !important;font-weight: 500 !important;line-height: 1.15 !important;letter-spacing: 2px !important; color: var(--sg-navy) !important; margin: 0 0 22px 0 !important;padding: 0 !important; text-align: center !important;} /* ==================================================TEXTO DE TARJETA================================================== */ .sg-why-card-text,.sg-why-card-text p,.sg-why-card-text div,.sg-why-card-text span {font-family: var(--sg-font-body) !important;font-size: 23px !important;font-weight: 400 !important;line-height: 1.2 !important; color: var(--sg-navy) !important; margin: 0 !important;padding: 0 !important; text-align: center !important;} /* ==================================================RESPONSIVE TABLET================================================== */ @media (max-width: 991px) {.sg-why-section {padding: 42px 20px 60px 20px !important;} .sg-why-title,.sg-why-title h1,.sg-why-title h2,.sg-why-title h3,.sg-why-title p,.sg-why-title div,.sg-why-title span {font-size: 38px !important;margin-bottom: 68px !important;} .sg-why-cards {max-width: 720px !important;gap: 62px 28px !important;} .sg-why-card {width: 285px !important;min-width: 285px !important;max-width: 285px !important;}} /* ==================================================RESPONSIVE MÓVIL================================================== */ @media (max-width: 600px) {.sg-why-section {padding: 36px 16px 50px 16px !important;} .sg-why-title,.sg-why-title h1,.sg-why-title h2,.sg-why-title h3,.sg-why-title p,.sg-why-title div,.sg-why-title span {font-size: 30px !important;line-height: 1.1 !important;margin-bottom: 62px !important;} .sg-why-cards {max-width: 100% !important;gap: 62px !important;} .sg-why-card {width: 100% !important;min-width: 100% !important;max-width: 100% !important; min-height: 220px !important; padding: 66px 22px 28px 22px !important; } .sg-why-icon {width: 86px !important;height: 86px !important;top: -43px !important;} .sg-why-icon img {width: 62px !important;height: 62px !important;} .sg-why-card-title,.sg-why-card-title h1,.sg-why-card-title h2,.sg-why-card-title h3,.sg-why-card-title p,.sg-why-card-title div,.sg-why-card-title span {font-size: 23px !important;letter-spacing: 1.4px !important;} .sg-why-card-text,.sg-why-card-text p,.sg-why-card-text div,.sg-why-card-text span {font-size: 19px !important;}} /* ==================================================SECCIÓN PRODUCTO - MOVILIDAD================================================== */ .sg-product-section {width: 100% !important;margin: 0 !important;padding: 28px 24px 58px 24px !important; position: relative !important;overflow: hidden !important; background: var(--sg-white) !important;} /* Limpieza Zoho */.sg-product-section .zpcontainer,.sg-product-section .zprow,.sg-product-section .zpcolumn,.sg-product-section .zpelement {background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================HEADER================================================== */ .sg-product-header {width: 100% !important;max-width: 760px !important; margin: 0 auto 28px auto !important;padding: 0 !important; text-align: center !important; position: relative !important;z-index: 2 !important;} .sg-product-title,.sg-product-title h1,.sg-product-title h2,.sg-product-title h3,.sg-product-title p,.sg-product-title div,.sg-product-title span {font-family: var(--sg-font-title) !important;font-size: 40px !important;font-weight: 900 !important;line-height: 1 !important;letter-spacing: -0.8px !important; color: var(--sg-navy) !important; margin: 0 0 12px 0 !important;padding: 0 !important; text-align: center !important;} .sg-product-lead,.sg-product-lead p,.sg-product-lead div,.sg-product-lead span {font-family: var(--sg-font-body) !important;font-size: 20px !important;font-weight: 500 !important;line-height: 1.25 !important; color: var(--sg-navy) !important; max-width: 560px !important; margin: 0 auto 12px auto !important;padding: 0 !important; text-align: center !important;} .sg-product-subtext,.sg-product-subtext p,.sg-product-subtext div,.sg-product-subtext span {font-family: var(--sg-font-body) !important;font-size: 14px !important;font-weight: 700 !important;line-height: 1.25 !important; color: var(--sg-navy) !important; max-width: 520px !important; margin: 0 auto !important;padding: 0 !important; text-align: center !important;} /* ==================================================IMAGEN DECORATIVA DEL CARRO================================================== */ .sg-product-hero-img {position: absolute !important;top: 46px !important;right: 0 !important;z-index: 1 !important; width: 150px !important;height: auto !important; margin: 0 !important;padding: 0 !important; pointer-events: none !important;} .sg-product-hero-img img {width: 100% !important;height: auto !important; object-fit: contain !important; display: block !important; margin: 0 !important;padding: 0 !important;} /* ==================================================CONTENEDOR DE TARJETAS================================================== */ .sg-product-cards {width: 100% !important;max-width: 500px !important; margin: 26px auto 0 auto !important;padding: 0 !important; display: flex !important;flex-wrap: wrap !important;justify-content: center !important;align-items: stretch !important; gap: 16px !important; position: relative !important;z-index: 2 !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* Si Zoho mete filas internas */.sg-product-cards .zprow {display: contents !important;} .sg-product-cards .zpcolumn,.sg-product-cards .zpelement {margin: 0 !important;padding: 0 !important; background: transparent !important;border: none !important;box-shadow: none !important;} /* ==================================================TARJETAS================================================== */ .sg-product-card {width: 132px !important;min-width: 132px !important;max-width: 132px !important; min-height: 205px !important; margin: 0 !important;padding: 18px 12px 14px 12px !important; background: var(--sg-white) !important; border: 1.5px solid var(--sg-navy) !important;border-radius: 16px !important; box-shadow: none !important;box-sizing: border-box !important; display: flex !important;flex-direction: column !important;align-items: center !important;justify-content: flex-start !important; text-align: center !important; overflow: hidden !important; transition: all 0.25s ease !important;} .sg-product-card:hover {transform: translateY(-3px) !important;box-shadow: 0 10px 18px rgba(26, 54, 93, 0.10) !important;} /* Limpieza interna de cada tarjeta */.sg-product-card .zpelement,.sg-product-card .zptext,.sg-product-card .zptext-container,.sg-product-card .zpheading,.sg-product-card .zpheading-container,.sg-product-card .zpimage-container,.sg-product-card .zpbutton-container {width: 100% !important;max-width: 100% !important; margin: 0 !important;padding: 0 !important; background: transparent !important;border: none !important;box-shadow: none !important; text-align: center !important;} /* ==================================================ICONO DE TARJETA================================================== */ .sg-product-card-icon,.sg-product-card-icon img,.sg-product-card img {width: 62px !important;height: 62px !important; object-fit: contain !important; display: block !important; margin: 0 auto 12px auto !important;padding: 0 !important;} /* ==================================================TÍTULO DE TARJETA================================================== */ .sg-product-card-title,.sg-product-card-title h1,.sg-product-card-title h2,.sg-product-card-title h3,.sg-product-card-title p,.sg-product-card-title div,.sg-product-card-title span {font-family: var(--sg-font-body) !important;font-size: 16px !important;font-weight: 500 !important;line-height: 1.05 !important; color: var(--sg-navy) !important; margin: 0 0 8px 0 !important;padding: 0 !important; text-align: center !important; min-height: 34px !important; display: flex !important;align-items: center !important;justify-content: center !important;} /* ==================================================TEXTO DE TARJETA================================================== */ .sg-product-card-text,.sg-product-card-text p,.sg-product-card-text div,.sg-product-card-text span {font-family: var(--sg-font-body) !important;font-size: 9px !important;font-weight: 800 !important;line-height: 1.08 !important; color: var(--sg-navy) !important; margin: 0 0 10px 0 !important;padding: 0 !important; text-align: center !important; min-height: 38px !important;} /* ==================================================BOTÓN================================================== */ .sg-product-btn,.sg-product-btn a,.sg-product-btn button,.sg-product-btn .zpbutton {width: 94px !important;height: 26px !important; margin: auto auto 0 auto !important;padding: 0 !important; display: inline-flex !important;align-items: center !important;justify-content: center !important; background: var(--sg-coral) !important;color: var(--sg-white) !important; border: none !important;border-radius: 6px !important; font-family: var(--sg-font-body) !important;font-size: 14px !important;font-weight: 800 !important;line-height: 1 !important; text-align: center !important;text-decoration: none !important; box-shadow: none !important; transition: all 0.25s ease !important;} .sg-product-btn:hover,.sg-product-btn a:hover,.sg-product-btn button:hover,.sg-product-btn .zpbutton:hover {opacity: 0.96 !important;transform: translateY(-1px) !important;} /* ==================================================RESPONSIVE TABLET================================================== */ @media (max-width: 991px) {.sg-product-section {padding: 32px 20px 52px 20px !important;} .sg-product-title,.sg-product-title * {font-size: 34px !important;} .sg-product-lead,.sg-product-lead * {font-size: 18px !important;} .sg-product-hero-img {width: 120px !important;right: -20px !important;} .sg-product-cards {max-width: 500px !important;}} /* ==================================================RESPONSIVE MÓVIL================================================== */ @media (max-width: 600px) {.sg-product-section {padding: 30px 16px 46px 16px !important;} .sg-product-title,.sg-product-title * {font-size: 30px !important;} .sg-product-lead,.sg-product-lead * {font-size: 16px !important;} .sg-product-subtext,.sg-product-subtext * {font-size: 13px !important;} .sg-product-hero-img {display: none !important;} .sg-product-cards {max-width: 100% !important;gap: 14px !important;} .sg-product-card {width: calc(50% - 7px) !important;min-width: calc(50% - 7px) !important;max-width: calc(50% - 7px) !important;min-height: 200px !important;} .sg-product-card-icon,.sg-product-card-icon img,.sg-product-card img {width: 54px !important;height: 54px !important;}} -------------------------------------------------------- -------------------------------------------------------- -------------------------------------------------------- /* ================================================== FOOTER SEGGUR Reemplaza TODO el CSS viejo del footer por este. ================================================== */ /* ================================================== 1. FOOTER PRINCIPAL Clase en Zoho: sg-footer ================================================== */ .sg-footer { width: 100% !important; margin: 0 !important; padding: 64px 24px 36px 24px !important; background: var(--sg-navy) !important; color: var(--sg-white) !important; overflow: hidden !important; } /* Limpieza general dentro del footer */ .sg-footer .zpcontainer, .sg-footer .zprow, .sg-footer .zpcolumn, .sg-footer .zpelement { background: transparent !important; border: none !important; box-shadow: none !important; } /* ================================================== 2. CONTENEDOR DE 4 COLUMNAS Clase en Zoho: sg-footer-inner ================================================== */ .sg-footer-inner { width: 100% !important; max-width: 1220px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(260px, 1.2fr) minmax(140px, 0.75fr) minmax(190px, 0.9fr) minmax(360px, 1.5fr) !important; column-gap: 58px !important; row-gap: 42px !important; align-items: flex-start !important; background: transparent !important; } .sg-footer-inner > .zprow, .sg-footer-inner .zprow:first-child { display: contents !important; } /* ================================================== 3. COLUMNA 1 Clase en Zoho: sg-footer-brand-col ================================================== */ .sg-footer-brand-col { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ================================================== 4. LOGO Fila: sg-footer-logo-row Columna icono: sg-footer-logo-icon Columna texto: sg-footer-logo-text ================================================== */ .sg-footer-logo-row { width: 100% !important; margin: 0 0 24px 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 30px auto !important; column-gap: 10px !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; } .sg-footer-logo-row > .zprow, .sg-footer-logo-row .zprow:first-child { display: grid !important; grid-template-columns: 30px auto !important; column-gap: 10px !important; align-items: center !important; } .sg-footer-logo-row .zpcontainer, .sg-footer-logo-row .zprow, .sg-footer-logo-row .zpcolumn, .sg-footer-logo-row .zpelement { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Columna icono logo */ .sg-footer-logo-icon, .sg-footer-logo-icon .zpelement, .sg-footer-logo-icon .zpicon-container, .sg-footer-logo-icon .zpicon-heading, .sg-footer-logo-icon .zpiconheading { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--sg-coral) !important; opacity: 1 !important; } /* Ocultar texto interno del icono */ .sg-footer-logo-icon .zpheading, .sg-footer-logo-icon .zpheading-container, .sg-footer-logo-icon h1, .sg-footer-logo-icon h2, .sg-footer-logo-icon h3, .sg-footer-logo-icon p, .sg-footer-logo-icon span { display: none !important; } /* Evitar puntos duplicados generados por CSS viejo */ .sg-footer-logo-row::after, .sg-footer-logo-row *::after, .sg-footer-logo-text::after, .sg-footer-logo-text *::after { content: none !important; display: none !important; } /* Icono real del logo */ .sg-footer-logo-icon i, .sg-footer-logo-icon svg, .sg-footer-logo-icon .zpicon, .sg-footer-logo-icon .zpicon-common, .sg-footer-logo-icon [class*="icon"] { width: 26px !important; height: 26px !important; font-size: 26px !important; color: var(--sg-coral) !important; fill: none !important; stroke: var(--sg-coral) !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; transform: none !important; } /* Texto Seggur */ .sg-footer-logo-text, .sg-footer-logo-text p, .sg-footer-logo-text div, .sg-footer-logo-text span, .sg-footer-logo-text h1, .sg-footer-logo-text h2, .sg-footer-logo-text h3 { font-family: var(--sg-font-title) !important; font-size: 28px !important; font-weight: 900 !important; line-height: 1 !important; color: var(--sg-white) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap !important; } /* Para el punto coral, escribe en Zoho: Seggur. */ .sg-footer-logo-dot { color: var(--sg-coral) !important; } /* ================================================== 5. DESCRIPCIÓN Clase en Zoho: sg-footer-description ================================================== */ .sg-footer-description, .sg-footer-description p, .sg-footer-description div, .sg-footer-description span { font-family: var(--sg-font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--sg-border-soft) !important; max-width: 270px !important; margin: 0 0 26px 0 !important; padding: 0 !important; text-align: left !important; } /* ================================================== 6. REDES SOCIALES Fila: sg-footer-socials Cada columna: sg-footer-social-icon El icono interno NO lleva clase. ================================================== */ .sg-footer-socials { width: 100% !important; max-width: 156px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, 44px) !important; column-gap: 12px !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Si Zoho mete una fila interna */ .sg-footer-socials > .zprow, .sg-footer-socials .zprow:first-child { width: auto !important; display: grid !important; grid-template-columns: repeat(3, 44px) !important; column-gap: 12px !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Limpieza interna de redes */ .sg-footer-socials .zpcontainer, .sg-footer-socials .zprow, .sg-footer-socials .zpcolumn, .sg-footer-socials .zpelement { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Cada columna/círculo social */ .sg-footer-social-icon { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.10) !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden !important; color: var(--sg-border-soft) !important; transition: all 0.25s ease !important; } /* Todo lo interno queda transparente */ .sg-footer-social-icon .zpcontainer, .sg-footer-social-icon .zprow, .sg-footer-social-icon .zpcolumn, .sg-footer-social-icon .zpelement, .sg-footer-social-icon .zpicon-container, .sg-footer-social-icon .zpicon-heading, .sg-footer-social-icon .zpiconheading, .sg-footer-social-icon .zpicon-common, .sg-footer-social-icon a { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; } /* No ocultamos ::before porque algunos iconos de Zoho usan ::before */ .sg-footer-social-icon *::before, .sg-footer-social-icon *::after { background: transparent !important; border: none !important; box-shadow: none !important; } /* Ocultar textos del componente icono con encabezado */ .sg-footer-social-icon .zpheading, .sg-footer-social-icon .zpheading-container, .sg-footer-social-icon h1, .sg-footer-social-icon h2, .sg-footer-social-icon h3, .sg-footer-social-icon p, .sg-footer-social-icon span { display: none !important; } /* Icono real */ .sg-footer-social-icon i, .sg-footer-social-icon svg, .sg-footer-social-icon .zpicon, .sg-footer-social-icon [class*="icon"] { width: 18px !important; height: 18px !important; font-size: 18px !important; line-height: 1 !important; color: var(--sg-border-soft) !important; fill: currentColor !important; stroke: currentColor !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; transform: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Hover social */ .sg-footer-social-icon:hover { background: var(--sg-coral) !important; color: var(--sg-white) !important; transform: translateY(-2px) !important; } .sg-footer-social-icon:hover i, .sg-footer-social-icon:hover svg, .sg-footer-social-icon:hover .zpicon, .sg-footer-social-icon:hover [class*="icon"] { color: var(--sg-white) !important; fill: currentColor !important; stroke: currentColor !important; } /* ================================================== 7. COLUMNAS SEGUROS Y COMPAÑÍA ================================================== */ .sg-footer-col, .sg-footer-contact-col { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .sg-footer-heading, .sg-footer-heading h1, .sg-footer-heading h2, .sg-footer-heading h3, .sg-footer-heading p, .sg-footer-heading div, .sg-footer-heading span { font-family: var(--sg-font-body) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--sg-white) !important; margin: 0 0 24px 0 !important; padding: 0 !important; text-align: left !important; } .sg-footer-link, .sg-footer-link a, .sg-footer-link a:visited, .sg-footer-link a:active, .sg-footer-link p, .sg-footer-link div, .sg-footer-link span { font-family: var(--sg-font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--sg-border-soft) !important; margin: 0 0 18px 0 !important; padding: 0 !important; text-align: left !important; text-decoration: none !important; background: transparent !important; transition: all 0.25s ease !important; } .sg-footer-link:hover, .sg-footer-link:hover a, .sg-footer-link:hover p, .sg-footer-link:hover div, .sg-footer-link:hover span { color: var(--sg-salmon) !important; transform: translateX(2px) !important; } /* ================================================== 8. CONTACTO ================================================== */ .sg-footer-contact-col { min-width: 360px !important; max-width: 430px !important; } .sg-footer-contact-list { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .sg-footer-contact-item { width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 26px minmax(280px, 1fr) !important; column-gap: 14px !important; align-items: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; } .sg-footer-contact-item > .zprow, .sg-footer-contact-item .zprow:first-child { width: 100% !important; display: grid !important; grid-template-columns: 26px minmax(280px, 1fr) !important; column-gap: 14px !important; align-items: flex-start !important; } .sg-footer-contact-item .zpcontainer, .sg-footer-contact-item .zprow, .sg-footer-contact-item .zpcolumn, .sg-footer-contact-item .zpelement { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .sg-footer-contact-icon, .sg-footer-contact-item > .zpcolumn:first-child, .sg-footer-contact-item .zprow:first-child > .zpcolumn:first-child { width: 26px !important; min-width: 26px !important; max-width: 26px !important; } .sg-footer-contact-text, .sg-footer-contact-item > .zpcolumn:nth-child(2), .sg-footer-contact-item .zprow:first-child > .zpcolumn:nth-child(2) { width: 100% !important; min-width: 280px !important; max-width: 390px !important; } .sg-footer-contact-icon, .sg-footer-contact-icon .zpelement, .sg-footer-contact-icon .zpicon-container, .sg-footer-contact-icon .zpicon-heading, .sg-footer-contact-icon .zpiconheading { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; margin: 2px 0 0 0 !important; padding: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--sg-coral) !important; opacity: 1 !important; } .sg-footer-contact-icon .zpheading, .sg-footer-contact-icon .zpheading-container, .sg-footer-contact-icon h1, .sg-footer-contact-icon h2, .sg-footer-contact-icon h3, .sg-footer-contact-icon p, .sg-footer-contact-icon span { display: none !important; } .sg-footer-contact-icon i, .sg-footer-contact-icon svg, .sg-footer-contact-icon .zpicon, .sg-footer-contact-icon .zpicon-common, .sg-footer-contact-icon [class*="icon"] { width: 20px !important; height: 20px !important; font-size: 20px !important; color: var(--sg-coral) !important; fill: none !important; stroke: var(--sg-coral) !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; } .sg-footer-contact-icon * { background-color: transparent !important; box-shadow: none !important; opacity: 1 !important; } .sg-footer-contact-text, .sg-footer-contact-text p, .sg-footer-contact-text div, .sg-footer-contact-text span, .sg-footer-contact-text a, .sg-footer-contact-text a:visited, .sg-footer-contact-text a:active { font-family: var(--sg-font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--sg-white) !important; width: 100% !important; max-width: 390px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; text-decoration: none !important; background: transparent !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; transition: none !important; } .sg-footer-contact-text:hover, .sg-footer-contact-text:hover p, .sg-footer-contact-text:hover div, .sg-footer-contact-text:hover span, .sg-footer-contact-text:hover a, .sg-footer-contact-text a:hover { color: var(--sg-white) !important; text-decoration: none !important; transform: none !important; cursor: default !important; } /* ================================================== 9. DIVISOR ================================================== */ .sg-footer-divider { width: 100% !important; max-width: 1220px !important; height: 1px !important; margin: 58px auto 30px auto !important; padding: 0 !important; background: var(--sg-border-soft) !important; opacity: 0.18 !important; border: none !important; } /* ================================================== 10. FOOTER INFERIOR ================================================== */ .sg-footer-bottom { width: 100% !important; max-width: 1220px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; column-gap: 28px !important; background: transparent !important; } .sg-footer-copy, .sg-footer-copy p, .sg-footer-copy div, .sg-footer-copy span { font-family: var(--sg-font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--sg-border-soft) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .sg-footer-legal { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 32px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .sg-footer-legal-link, .sg-footer-legal-link a, .sg-footer-legal-link a:visited, .sg-footer-legal-link a:active, .sg-footer-legal-link p, .sg-footer-legal-link div, .sg-footer-legal-link span { font-family: var(--sg-font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--sg-border-soft) !important; margin: 0 !important; padding: 0 !important; text-align: right !important; text-decoration: none !important; background: transparent !important; transition: all 0.25s ease !important; } .sg-footer-legal-link:hover, .sg-footer-legal-link:hover a, .sg-footer-legal-link:hover p, .sg-footer-legal-link:hover div, .sg-footer-legal-link:hover span { color: var(--sg-white) !important; } .sg-footer-bottom a, .sg-footer-bottom a:visited, .sg-footer-bottom a:active { color: var(--sg-border-soft) !important; text-decoration: none !important; } .sg-footer-bottom a:hover { color: var(--sg-white) !important; } /* ================================================== RESPONSIVE TABLET ================================================== */ @media (max-width: 991px) { .sg-footer { padding: 54px 22px 34px 22px !important; } .sg-footer-inner { grid-template-columns: 1fr 1fr !important; column-gap: 44px !important; row-gap: 40px !important; } .sg-footer-contact-col { min-width: 0 !important; max-width: 100% !important; } .sg-footer-contact-item, .sg-footer-contact-item > .zprow, .sg-footer-contact-item .zprow:first-child { grid-template-columns: 26px minmax(0, 1fr) !important; } .sg-footer-contact-text, .sg-footer-contact-text p, .sg-footer-contact-text div, .sg-footer-contact-text span, .sg-footer-contact-text a { min-width: 0 !important; max-width: 100% !important; } .sg-footer-divider { margin-top: 46px !important; } .sg-footer-bottom { grid-template-columns: 1fr !important; row-gap: 18px !important; } .sg-footer-legal { justify-content: flex-start !important; } .sg-footer-legal-link, .sg-footer-legal-link a, .sg-footer-legal-link p, .sg-footer-legal-link div, .sg-footer-legal-link span { text-align: left !important; } } /* ================================================== RESPONSIVE MÓVIL ================================================== */ @media (max-width: 600px) { .sg-footer { padding: 46px 18px 32px 18px !important; } .sg-footer-inner { grid-template-columns: 1fr !important; row-gap: 34px !important; } .sg-footer-description, .sg-footer-description p, .sg-footer-description div, .sg-footer-description span { max-width: 100% !important; } .sg-footer-socials { grid-template-columns: repeat(3, 44px) !important; } .sg-footer-contact-item, .sg-footer-contact-item > .zprow, .sg-footer-contact-item .zprow:first-child { grid-template-columns: 24px minmax(0, 1fr) !important; column-gap: 12px !important; } .sg-footer-contact-icon, .sg-footer-contact-icon .zpelement, .sg-footer-contact-icon .zpicon-container { width: 24px !important; min-width: 24px !important; max-width: 24px !important; } .sg-footer-contact-text, .sg-footer-contact-text p, .sg-footer-contact-text div, .sg-footer-contact-text span, .sg-footer-contact-text a { min-width: 0 !important; max-width: 100% !important; font-size: 15px !important; } .sg-footer-legal { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } } ----------------------------------------------------- ----------------------------------------------------- ----------------------------------------------------- /* ================================================== HEADER SEGGUR - ZOHO NATIVO Logo pequeño + menú en línea Oculta More y muestra sus hijos al lado Evita que el submenú se abra al pasar el mouse ================================================== */ /* ================================================== 1. HEADER PRINCIPAL ================================================== */ .theme-header, .theme-header-topbar, .theme-header-navigation, .theme-navigation-and-icons { width: 100% !important; min-height: 72px !important; background: rgba(255, 255, 255, 0.96) !important; background-color: rgba(255, 255, 255, 0.96) !important; border: none !important; box-shadow: none !important; position: relative !important; z-index: 9999 !important; } /* Contenedor interno */ .theme-header .theme-navigation-and-icons, .theme-header .theme-header-navigation, .theme-header .theme-container, .theme-header .zpcontainer { width: 100% !important; max-width: 1440px !important; min-height: 72px !important; margin: 0 auto !important; padding: 0 38px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; } /* ================================================== 2. LOGO NATIVO DE ZOHO ================================================== */ .theme-header .theme-branding-info, .theme-header .theme-logo-parent, .theme-header .theme-logo { width: auto !important; min-width: 125px !important; max-width: 135px !important; height: 56px !important; max-height: 56px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; flex: 0 0 135px !important; } /* Imagen del logo */ .theme-header .theme-branding-info img, .theme-header .theme-logo-parent img, .theme-header .theme-logo img, .theme-header img[alt*="logo" i], .theme-header img[src*="logo" i] { width: auto !important; max-width: 125px !important; height: auto !important; max-height: 42px !important; object-fit: contain !important; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } /* Ocultar nombre del sitio si aparece */ .theme-header .theme-site-name, .theme-header .theme-site-name a { display: none !important; } /* ================================================== 3. MENÚ PRINCIPAL ================================================== */ .theme-header .theme-menu-area, .theme-header .theme-navigation, .theme-header .theme-navigation > ul, .theme-header .theme-navigation ul:first-child { margin: 0 !important; margin-left: 220px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; width: auto !important; max-width: none !important; background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; } /* Items principales */ .theme-header .theme-navigation > ul > li, .theme-header .theme-menu-area > ul > li, .theme-header .theme-navigation li { margin: 0 !important; padding: 0 !important; list-style: none !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* Separación entre opciones principales */ .theme-header .theme-navigation > ul > li:not(:last-child), .theme-header .theme-menu-area > ul > li:not(:last-child), .theme-header .theme-navigation li:not(:last-child) { margin-right: 36px !important; } /* Links normales */ .theme-header .theme-navigation li a, .theme-header .theme-menu-area li a, .theme-header .theme-navigation a { font-family: var(--sg-font-body) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--sg-navy) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; white-space: nowrap !important; transition: color 0.25s ease !important; } /* Texto interno */ .theme-header .theme-navigation li a span, .theme-header .theme-menu-area li a span, .theme-header .theme-navigation a span { color: inherit !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; white-space: nowrap !important; } /* Hover */ .theme-header .theme-navigation li a:hover, .theme-header .theme-menu-area li a:hover, .theme-header .theme-navigation a:hover, .theme-header .theme-navigation li a:hover span, .theme-header .theme-menu-area li a:hover span, .theme-header .theme-navigation a:hover span { color: var(--sg-coral) !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* ================================================== 4. ACTIVO / SELECCIONADO ================================================== */ .theme-header .theme-navigation li.theme-menu-selected, .theme-header .theme-navigation .theme-menu-selected, .theme-header .theme-menu-selected, .theme-header li.active, .theme-header .active, .theme-header li[class*="selected"], .theme-header li[class*="active"], .theme-header li[class*="current"], .theme-header .current { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Link activo */ .theme-header .theme-navigation li.theme-menu-selected > a, .theme-header .theme-navigation .theme-menu-selected > a, .theme-header .theme-menu-selected a, .theme-header .theme-navigation a[aria-current="page"], .theme-header .theme-navigation a.active, .theme-header li.active a, .theme-header .active a, .theme-header li[class*="selected"] > a, .theme-header li[class*="active"] > a, .theme-header li[class*="current"] > a, .theme-header .current a { color: var(--sg-coral) !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Span activo */ .theme-header .theme-menu-selected a span, .theme-header .theme-navigation a.active span, .theme-header .theme-navigation a[aria-current="page"] span, .theme-header li.active a span, .theme-header .active a span, .theme-header li[class*="selected"] > a span, .theme-header li[class*="active"] > a span, .theme-header li[class*="current"] > a span, .theme-header .current a span { color: var(--sg-coral) !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Quitar cajas del activo */ .theme-header .theme-menu-selected a::before, .theme-header .theme-menu-selected a::after, .theme-header li.active a::before, .theme-header li.active a::after, .theme-header a.active::before, .theme-header a.active::after, .theme-header li[class*="selected"] > a::before, .theme-header li[class*="selected"] > a::after, .theme-header li[class*="active"] > a::before, .theme-header li[class*="active"] > a::after, .theme-header li[class*="current"] > a::before, .theme-header li[class*="current"] > a::after { display: none !important; content: none !important; } /* ================================================== 5. FIX MORE Convierte el submenú en opciones en línea y evita que al hover vuelva a aparecer como dropdown. ================================================== */ /* El LI que contiene More se vuelve invisible estructuralmente */ .theme-header .theme-navigation li:has(> ul), .theme-header .theme-menu-area li:has(> ul), .theme-header .theme-navigation li:has(> ul):hover, .theme-header .theme-menu-area li:has(> ul):hover { display: contents !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Oculta el texto More y su flecha */ .theme-header .theme-navigation li:has(> ul) > a, .theme-header .theme-menu-area li:has(> ul) > a, .theme-header .theme-navigation li:has(> ul):hover > a, .theme-header .theme-menu-area li:has(> ul):hover > a { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Submenú SIEMPRE como fila normal */ .theme-header .theme-navigation li:has(> ul) > ul, .theme-header .theme-menu-area li:has(> ul) > ul, .theme-header .theme-navigation li:has(> ul):hover > ul, .theme-header .theme-menu-area li:has(> ul):hover > ul, .theme-header .theme-navigation li:has(> ul):focus-within > ul, .theme-header .theme-menu-area li:has(> ul):focus-within > ul { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 0 !important; opacity: 1 !important; visibility: visible !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; animation: none !important; } /* Items internos de More como links normales */ .theme-header .theme-navigation li:has(> ul) > ul > li, .theme-header .theme-menu-area li:has(> ul) > ul > li, .theme-header .theme-navigation li:has(> ul):hover > ul > li, .theme-header .theme-menu-area li:has(> ul):hover > ul > li { margin: 0 0 0 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; white-space: nowrap !important; } /* Links internos de More */ .theme-header .theme-navigation li:has(> ul) > ul > li > a, .theme-header .theme-menu-area li:has(> ul) > ul > li > a, .theme-header .theme-navigation li:has(> ul):hover > ul > li > a, .theme-header .theme-menu-area li:has(> ul):hover > ul > li > a { font-family: var(--sg-font-body) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--sg-navy) !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; white-space: nowrap !important; } /* Hover de los links que estaban en More */ .theme-header .theme-navigation li:has(> ul) > ul > li > a:hover, .theme-header .theme-menu-area li:has(> ul) > ul > li > a:hover { color: var(--sg-coral) !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Activo dentro de lo que antes era More */ .theme-header .theme-navigation li:has(> ul) > ul > li.theme-menu-selected > a, .theme-header .theme-navigation li:has(> ul) > ul > li.active > a, .theme-header .theme-navigation li:has(> ul) > ul > li[class*="selected"] > a, .theme-header .theme-navigation li:has(> ul) > ul > li[class*="active"] > a, .theme-header .theme-navigation li:has(> ul) > ul > li[class*="current"] > a { color: var(--sg-coral) !important; background: transparent !important; box-shadow: none !important; } /* Eliminar flechas, triángulos y decoraciones del dropdown */ .theme-header .theme-navigation li:has(> ul) > a::before, .theme-header .theme-navigation li:has(> ul) > a::after, .theme-header .theme-menu-area li:has(> ul) > a::before, .theme-header .theme-menu-area li:has(> ul) > a::after, .theme-header .theme-navigation li:has(> ul) > ul::before, .theme-header .theme-navigation li:has(> ul) > ul::after, .theme-header .theme-menu-area li:has(> ul) > ul::before, .theme-header .theme-menu-area li:has(> ul) > ul::after { display: none !important; content: none !important; } /* ================================================== 6. RESPONSIVE TABLET ================================================== */ @media (max-width: 991px) { .theme-header .theme-navigation-and-icons, .theme-header .theme-header-navigation, .theme-header .theme-container, .theme-header .zpcontainer { padding: 0 24px !important; } .theme-header .theme-branding-info, .theme-header .theme-logo-parent, .theme-header .theme-logo { min-width: 115px !important; max-width: 120px !important; flex: 0 0 120px !important; } .theme-header .theme-branding-info img, .theme-header .theme-logo-parent img, .theme-header .theme-logo img, .theme-header img[alt*="logo" i], .theme-header img[src*="logo" i] { max-width: 115px !important; max-height: 38px !important; } .theme-header .theme-menu-area, .theme-header .theme-navigation, .theme-header .theme-navigation > ul, .theme-header .theme-navigation ul:first-child { margin-left: 80px !important; } .theme-header .theme-navigation li:not(:last-child), .theme-header .theme-menu-area li:not(:last-child) { margin-right: 26px !important; } .theme-header .theme-navigation li:has(> ul) > ul > li, .theme-header .theme-menu-area li:has(> ul) > ul > li { margin-left: 26px !important; } .theme-header .theme-navigation li a, .theme-header .theme-menu-area li a, .theme-header .theme-navigation li:has(> ul) > ul > li > a { font-size: 14px !important; } } /* ================================================== 7. RESPONSIVE MÓVIL ================================================== */ @media (max-width: 600px) { .theme-header, .theme-header-topbar, .theme-header-navigation, .theme-navigation-and-icons { min-height: 64px !important; } .theme-header .theme-navigation-and-icons, .theme-header .theme-header-navigation, .theme-header .theme-container, .theme-header .zpcontainer { min-height: 64px !important; padding: 0 16px !important; } .theme-header .theme-branding-info, .theme-header .theme-logo-parent, .theme-header .theme-logo { min-width: 105px !important; max-width: 110px !important; flex: 0 0 110px !important; } .theme-header .theme-branding-info img, .theme-header .theme-logo-parent img, .theme-header .theme-logo img, .theme-header img[alt*="logo" i], .theme-header img[src*="logo" i] { max-width: 105px !important; max-height: 34px !important; } .theme-header .theme-menu-area, .theme-header .theme-navigation, .theme-header .theme-navigation > ul, .theme-header .theme-navigation ul:first-child { margin-left: 24px !important; } .theme-header .theme-navigation li:not(:last-child), .theme-header .theme-menu-area li:not(:last-child) { margin-right: 14px !important; } .theme-header .theme-navigation li:has(> ul) > ul > li, .theme-header .theme-menu-area li:has(> ul) > ul > li { margin-left: 14px !important; } .theme-header .theme-navigation li a, .theme-header .theme-menu-area li a, .theme-header .theme-navigation li:has(> ul) > ul > li > a { font-size: 13px !important; } } ------------------------------------------------------------------- ------------------------------------------------------------------- ------------------------------------------------------------------- /* ================================================== SECCIÓN DESCUENTO SEGGUR ================================================== */ /* 1. Sección principal */ .sg-discount-section { width: 100% !important; margin: 0 !important; padding: 42px 20px !important; background: var(--sg-white) !important; } /* Limpieza básica Zoho */ .sg-discount-section .zpcontainer, .sg-discount-section .zprow, .sg-discount-section .zpcolumn, .sg-discount-section .zpelement { background: transparent !important; border: none !important; box-shadow: none !important; } /* 2. Contenedor principal con borde */ .sg-discount-card { width: 100% !important; max-width: 1140px !important; margin: 0 auto !important; padding: 18px 36px !important; background: var(--sg-white) !important; border: 2px solid var(--sg-navy) !important; border-radius: 42px !important; overflow: hidden !important; } /* 3. Fila principal */ .sg-discount-row, .sg-discount-row > .zprow, .sg-discount-row .zprow:first-child { width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } /* Columnas internas de Zoho */ .sg-discount-row > .zpcolumn, .sg-discount-row > .zprow > .zpcolumn, .sg-discount-row .zprow:first-child > .zpcolumn { min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ================================================== COLUMNAS ================================================== */ /* Columna 1: texto largo */ .sg-discount-col-left, .sg-discount-row > .zpcolumn:nth-child(1), .sg-discount-row > .zprow > .zpcolumn:nth-child(1), .sg-discount-row .zprow:first-child > .zpcolumn:nth-child(1) { flex: 0 0 35% !important; max-width: 35% !important; display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; padding-top: 18px !important; position: relative !important; left: 0 !important; } /* Columna 2: Y obtén el */ .sg-discount-col-middle, .sg-discount-row > .zpcolumn:nth-child(2), .sg-discount-row > .zprow > .zpcolumn:nth-child(2), .sg-discount-row .zprow:first-child > .zpcolumn:nth-child(2) { flex: 0 0 14% !important; max-width: 14% !important; display: flex !important; justify-content: center !important; align-items: flex-end !important; padding-top: 82px !important; position: relative !important; left: 10px !important; } /* Columna 3: 20% / Descuento */ .sg-discount-col-percent, .sg-discount-row > .zpcolumn:nth-child(3), .sg-discount-row > .zprow > .zpcolumn:nth-child(3), .sg-discount-row .zprow:first-child > .zpcolumn:nth-child(3) { flex: 0 0 23% !important; max-width: 23% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; padding-top: 0 !important; position: relative !important; left: 42px !important; /* mueve el 20% más hacia la derecha */ } /* Columna 4: En tu tecnomecanica */ .sg-discount-col-right, .sg-discount-row > .zpcolumn:nth-child(4), .sg-discount-row > .zprow > .zpcolumn:nth-child(4), .sg-discount-row .zprow:first-child > .zpcolumn:nth-child(4) { flex: 0 0 28% !important; max-width: 28% !important; display: flex !important; justify-content: flex-end !important; align-items: flex-end !important; padding-top: 114px !important; position: relative !important; left: 54px !important; /* mueve este texto más a la derecha */ } /* ================================================== TEXTOS ================================================== */ /* Texto largo izquierda */ .sg-discount-left-text, .sg-discount-left-text p, .sg-discount-left-text div, .sg-discount-left-text span, .sg-discount-left-text h1, .sg-discount-left-text h2, .sg-discount-left-text h3 { font-family: var(--sg-font-title) !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; color: var(--sg-navy) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap !important; } /* Y obtén el */ .sg-discount-middle-text, .sg-discount-middle-text p, .sg-discount-middle-text div, .sg-discount-middle-text span, .sg-discount-middle-text h1, .sg-discount-middle-text h2, .sg-discount-middle-text h3 { font-family: var(--sg-font-title) !important; font-size: 39px !important; font-weight: 500 !important; line-height: 0.95 !important; letter-spacing: -0.03em !important; color: var(--sg-navy) !important; margin: 0 !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; } /* 20% */ .sg-discount-percent, .sg-discount-percent p, .sg-discount-percent div, .sg-discount-percent span, .sg-discount-percent h1, .sg-discount-percent h2, .sg-discount-percent h3 { font-family: var(--sg-font-title) !important; font-size: 118px !important; font-weight: 500 !important; line-height: 0.74 !important; letter-spacing: -0.05em !important; color: var(--sg-coral) !important; margin: 0 !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; } /* Descuento */ .sg-discount-label, .sg-discount-label p, .sg-discount-label div, .sg-discount-label span, .sg-discount-label h1, .sg-discount-label h2, .sg-discount-label h3 { font-family: var(--sg-font-title) !important; font-size: 42px !important; font-weight: 500 !important; line-height: 0.9 !important; letter-spacing: -0.04em !important; color: var(--sg-coral) !important; margin: 8px 0 0 0 !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; } /* Texto derecha */ .sg-discount-right-text, .sg-discount-right-text p, .sg-discount-right-text div, .sg-discount-right-text span, .sg-discount-right-text h1, .sg-discount-right-text h2, .sg-discount-right-text h3 { font-family: var(--sg-font-title) !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; color: var(--sg-navy) !important; margin: 0 !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; } /* ================================================== RESPONSIVE TABLET ================================================== */ @media (max-width: 991px) { .sg-discount-card { padding: 28px 24px !important; border-radius: 34px !important; } .sg-discount-row, .sg-discount-row > .zprow, .sg-discount-row .zprow:first-child { display: grid !important; grid-template-columns: 1fr 1fr !important; row-gap: 20px !important; column-gap: 20px !important; } .sg-discount-col-left, .sg-discount-col-middle, .sg-discount-col-percent, .sg-discount-col-right, .sg-discount-row > .zpcolumn:nth-child(1), .sg-discount-row > .zpcolumn:nth-child(2), .sg-discount-row > .zpcolumn:nth-child(3), .sg-discount-row > .zpcolumn:nth-child(4), .sg-discount-row > .zprow > .zpcolumn:nth-child(1), .sg-discount-row > .zprow > .zpcolumn:nth-child(2), .sg-discount-row > .zprow > .zpcolumn:nth-child(3), .sg-discount-row > .zprow > .zpcolumn:nth-child(4) { max-width: 100% !important; left: 0 !important; padding-top: 0 !important; } .sg-discount-left-text, .sg-discount-left-text *, .sg-discount-middle-text, .sg-discount-middle-text *, .sg-discount-right-text, .sg-discount-right-text * { white-space: normal !important; text-align: center !important; } } /* ================================================== RESPONSIVE MÓVIL ================================================== */ @media (max-width: 600px) { .sg-discount-section { padding: 34px 16px !important; } .sg-discount-card { padding: 26px 18px !important; border-radius: 28px !important; } .sg-discount-row, .sg-discount-row > .zprow, .sg-discount-row .zprow:first-child { display: grid !important; grid-template-columns: 1fr !important; row-gap: 16px !important; } .sg-discount-col-left, .sg-discount-col-middle, .sg-discount-col-percent, .sg-discount-col-right, .sg-discount-row > .zpcolumn, .sg-discount-row > .zprow > .zpcolumn { justify-content: center !important; align-items: center !important; left: 0 !important; padding-top: 0 !important; } .sg-discount-left-text, .sg-discount-left-text *, .sg-discount-middle-text, .sg-discount-middle-text *, .sg-discount-right-text, .sg-discount-right-text * { white-space: normal !important; text-align: center !important; } .sg-discount-percent, .sg-discount-percent * { font-size: 86px !important; } .sg-discount-label, .sg-discount-label * { font-size: 36px !important; } }