.elementor-kit-802{--e-global-color-primary:#1E6F20;--e-global-color-secondary:#033920;--e-global-color-text:#263633;--e-global-color-accent:#165017;--e-global-color-sgnegro:#000000;--e-global-color-sgverdc:#7FD184;--e-global-color-sgazulp:#01A2DB;--e-global-color-sgverdv:#18A501;--e-global-color-sgazuld:#074165;--e-global-color-sgmuted:#5F6B66;--e-global-color-sgtinte:#F4F8F4;--e-global-color-sgborde:#DDE5DD;--e-global-color-sgblanc:#FFFFFF;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.65em;}.elementor-kit-802 button,.elementor-kit-802 input[type="button"],.elementor-kit-802 input[type="submit"],.elementor-kit-802 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:1em;color:#FFFFFF;border-style:solid;border-width:0px 0px 0px 0px;border-radius:999px 999px 999px 999px;padding:13px 24px 13px 24px;}.elementor-kit-802 button:hover,.elementor-kit-802 button:focus,.elementor-kit-802 input[type="button"]:hover,.elementor-kit-802 input[type="button"]:focus,.elementor-kit-802 input[type="submit"]:hover,.elementor-kit-802 input[type="submit"]:focus,.elementor-kit-802 .elementor-button:hover,.elementor-kit-802 .elementor-button:focus{background-color:#165017;color:#FFFFFF;}.elementor-kit-802 e-page-transition{background-color:#FFBC7D;}.elementor-kit-802 a{color:var( --e-global-color-accent );}.elementor-kit-802 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-802 h1{color:var( --e-global-color-sgnegro );font-family:"Montserrat", Sans-serif;font-size:56px;font-weight:700;line-height:1.04em;letter-spacing:-0.02em;}.elementor-kit-802 h2{color:var( --e-global-color-sgnegro );font-family:"Montserrat", Sans-serif;font-size:40px;font-weight:700;line-height:1.1em;letter-spacing:-0.01em;}.elementor-kit-802 h3{color:var( --e-global-color-sgnegro );font-family:"Montserrat", Sans-serif;font-size:24px;font-weight:600;line-height:1.1em;letter-spacing:-0.01em;}.elementor-kit-802 h4{color:var( --e-global-color-sgnegro );font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:600;line-height:1.2em;letter-spacing:-0.01em;}.elementor-kit-802 h5{color:var( --e-global-color-sgnegro );font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:600;line-height:1.2em;letter-spacing:-0.01em;}.elementor-kit-802 h6{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;letter-spacing:0em;}.elementor-kit-802 label{color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;line-height:2.6em;}.elementor-kit-802 input:not([type="button"]):not([type="submit"]),.elementor-kit-802 textarea,.elementor-kit-802 .elementor-field-textual{font-family:"Heebo", Sans-serif;font-size:16px;font-weight:400;line-height:1.5em;color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-radius:12px 12px 12px 12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-802{font-size:16px;}.elementor-kit-802 h1{font-size:36px;}.elementor-kit-802 h2{font-size:28px;}.elementor-kit-802 h3{font-size:19px;}.elementor-kit-802 h4{font-size:18px;}.elementor-kit-802 h5{font-size:16px;}.elementor-kit-802 h6{font-size:15px;}.elementor-kit-802 button,.elementor-kit-802 input[type="button"],.elementor-kit-802 input[type="submit"],.elementor-kit-802 .elementor-button{font-size:14px;}.elementor-kit-802 input:not([type="button"]):not([type="submit"]),.elementor-kit-802 textarea,.elementor-kit-802 .elementor-field-textual{font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ServiGreen — CSS compartido del kit.
   Fuente: css/base.css del repo. Si algo difiere, manda el repo.
   Regla: aqui SOLO lo que el panel de Elementor no sabe expresar
   (pseudo-elementos, animaciones, foco, media queries de accesibilidad).
   Colores, tipografias, botones y espaciado viven en los ajustes del kit. */

:root{
  --sg-green:#1E6F20; --sg-green-700:#165017; --sg-green-300:#7FD184;
  --sg-deep:#033920; --sg-blue:#01A2DB; --sg-vivid:#18A501; --sg-navy:#074165;
  --sg-ink:#263633; --sg-muted:#5F6B66; --sg-tint:#F4F8F4; --sg-border:#DDE5DD;
  --sg-radius:12px; --sg-radius-lg:20px; --sg-pill:999px;
  --sg-ease:cubic-bezier(.22,.61,.36,1);
  --sg-swatch:linear-gradient(90deg,var(--sg-green),var(--sg-blue),var(--sg-vivid),var(--sg-navy));
}

/* Antetitulo con franja degradada: pseudo-elemento, el panel no llega */
.sg-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--sg-green-700)}
.sg-eyebrow::before{content:"";width:22px;height:2px;background:var(--sg-swatch);flex:none}

/* Banda clara (equivale a .section--dark del repo, que es tinte, no grafito) */
.sg-tint{background:var(--sg-tint)}

/* Sobre fondo oscuro el verde de marca NO cumple contraste: va el claro.
   Es la trampa documentada en docs/design-tokens.md. */
.sg-on-dark{color:#fff}
.sg-on-dark .sg-eyebrow{color:var(--sg-green-300)}
.sg-on-dark a:not(.elementor-button){color:var(--sg-green-300)}

/* Foco visible: accesibilidad, el panel no lo expone */
:focus-visible{outline:2px solid var(--sg-green-700);outline-offset:2px;border-radius:4px}

/* Reveal al hacer scroll */
.sg-reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--sg-ease),transform .6s var(--sg-ease)}
.sg-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sg-reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Trampa 3 del kit: esta hoja carga ANTES que la del widget, asi que una
   clase suelta (0-2-0) pierde el empate. Hay que anclar a la clase del
   widget para subir a 0-3-0. No usar !important. */
.elementor-widget-button.sg-btn-ghost .elementor-button{background:transparent;
  border:1.5px solid rgba(255,255,255,.5);color:#fff}
.elementor-widget-button.sg-btn-ghost .elementor-button:hover{background:#fff;color:#000;border-color:#fff}

/* Trampa 14: object-fit cover recorta logotipos */
.elementor-widget-image.sg-logo img{object-fit:contain;height:auto}

/* Tarjeta de servicio y etiquetas: se repiten 8 veces -> al kit, no a la pagina */
.sg-card{background:#fff;border:1px solid var(--sg-border);border-radius:var(--sg-radius-lg);overflow:hidden;height:100%}
.sg-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sg-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.sg-tag{display:inline-block;font-size:.8125rem;font-weight:600;line-height:1;padding:.45rem .7rem;border-radius:var(--sg-pill);background:var(--sg-tint);color:var(--sg-green-700);border:1px solid var(--sg-border)}
/* El titulo de grupo no compite con el h2 de seccion */


.sg-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:767px){.sg-grid-2{grid-template-columns:1fr}}

.sg-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1024px){.sg-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sg-grid-3{grid-template-columns:1fr}}
.sg-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sg-radius-lg);display:block}
.sg-shot figcaption{font-size:.875rem;font-weight:600;color:var(--sg-muted);padding-top:.5rem;text-align:left}

.sg-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1024px){.sg-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sg-grid-4{grid-template-columns:1fr}}
.sg-split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
@media(max-width:900px){.sg-split{grid-template-columns:1fr}}
.sg-value{background:#fff;border:1px solid var(--sg-border);border-radius:var(--sg-radius-lg);height:100%}
.sg-num{font-size:.875rem;font-weight:700;letter-spacing:.08em;color:var(--sg-green-700)}

/* Boton ServiGreen: portado literal de css/base.css. El widget sg-button emite este markup. */
.sg-btn-wrap{display:flex;flex-wrap:wrap;gap:14px}
.sg-btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;border-radius:var(--sg-pill);padding:.8rem 1.5rem;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,transform .2s,border-color .2s}
.sg-btn:active{transform:translateY(1px)}
.sg-btn--primary{background:var(--sg-green);color:#fff;padding:.45rem .45rem .45rem 1.4rem;gap:.9rem}
.sg-btn--primary .sg-btn__arrow{width:2.4rem;height:2.4rem;border-radius:50%;background:#fff;color:var(--sg-green-700);display:grid;place-items:center;transition:transform .3s var(--sg-ease);flex:none}
.sg-btn--primary:hover{background:var(--sg-green-700);color:#fff}
.sg-btn--primary:hover .sg-btn__arrow{transform:translateX(3px)}
.sg-btn--outline{border:1.5px solid var(--sg-deep);color:#000}
.sg-btn--outline:hover{background:var(--sg-deep);color:#fff}
.sg-btn--ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.sg-btn--ghost:hover{background:#fff;color:#000;border-color:#fff}
.sg-btn--whatsapp{background:#25D366;color:#fff}
.sg-btn--whatsapp:hover{filter:brightness(.95);color:#fff}
.sg-btn--sm{padding:.5rem 1rem;font-size:.9rem}
@media(prefers-reduced-motion:reduce){.sg-btn,.sg-btn__arrow{transition:none}}

/* Hero con carrusel: capas apiladas. El contenido va por encima del overlay. */
.sg-hero{position:relative;overflow:hidden}
.sg-hero-slides{position:absolute;inset:0;z-index:0}
.sg-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.sg-hero-slide.is-active{opacity:1}
.sg-hero > .elementor-background-overlay{z-index:1}
.sg-hero > .e-con-inner,.sg-hero > .e-child{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.sg-hero-slide{transition:none}}
/* Scroll-spy */
.sg-active{color:var(--sg-green-700)!important}


/* ---- Tarjeta de servicio: cabecera, icono, cuerpo y hover.
   Portado de css/services.css del repo. Se repite en las 8 tarjetas, asi que
   vive aqui y no widget a widget. Los controles equivalentes del panel van
   VACIOS, o ganarian por especificidad (trampa 3). ---- */
.sg-card{display:flex;flex-direction:column;transition:transform .3s var(--sg-ease),box-shadow .3s,border-color .3s}
.sg-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(21,24,28,.12);border-color:var(--sg-green)}

.sg-card__header{display:flex;align-items:center;gap:1rem;padding:24px 24px 20px;border-bottom:1px solid var(--sg-border)}
.sg-card__header .elementor-heading-title{margin:0;font-size:1.15rem;font-weight:600;color:#000;line-height:1.3}

.sg-card__icon{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#E8F2E8;border:1px solid #C6DFC7;color:var(--sg-green)}
.sg-card__icon svg{width:26px;height:26px;display:block}
.sg-card__icon .elementor-icon{color:inherit;font-size:26px}
.sg-card__icon .elementor-icon svg{fill:none;stroke:currentColor}

.sg-card__body{padding:24px;display:flex;flex-direction:column;gap:1rem;flex:1}
.sg-card__body p{color:var(--sg-muted);font-size:.95rem;line-height:1.6;margin:0}
.sg-card__body .sg-tags{margin-top:auto}

.sg-card__media img{transition:transform .5s var(--sg-ease)}
.sg-card:hover .sg-card__media img{transform:scale(1.04)}

/* Rotacion de acento por posicion, como .service-card:nth-of-type del repo */
.sg-grid-2 > .sg-card:nth-of-type(4n+2):hover{border-color:var(--sg-blue)}
.sg-grid-2 > .sg-card:nth-of-type(4n+3):hover{border-color:var(--sg-vivid)}
.sg-grid-2 > .sg-card:nth-of-type(4n+4):hover{border-color:var(--sg-navy)}
.sg-grid-2 > .sg-card:nth-of-type(4n+2) .sg-card__icon{background:#E1F4FB;border-color:#B6E3F3;color:var(--sg-blue)}
.sg-grid-2 > .sg-card:nth-of-type(4n+3) .sg-card__icon{background:#EAF7E6;border-color:#C9EABF;color:var(--sg-vivid)}
.sg-grid-2 > .sg-card:nth-of-type(4n+4) .sg-card__icon{background:#E4EBF1;border-color:#BFD1DF;color:var(--sg-navy)}

@media(prefers-reduced-motion:reduce){
  .sg-card,.sg-card__media img{transition:none}
  .sg-card:hover,.sg-card:hover .sg-card__media img{transform:none}
}

/* ---- Galeria de trabajos: .project de css/index.css. Se repite 12 veces, asi que vive aqui. ---- */
.sg-project{position:relative;border-radius:var(--sg-radius-lg);overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;color:#fff}
.sg-project > .elementor-widget-image{position:absolute;inset:0;width:100%;height:100%;margin:0}
.sg-project > .elementor-widget-image .elementor-widget-container,.sg-project > .elementor-widget-image figure,.sg-project > .elementor-widget-image a{display:block;height:100%}
.sg-project img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--sg-ease)}
.sg-project::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,24,28,0) 35%,rgba(21,24,28,.85) 100%)}
.sg-project:hover img{transform:scale(1.06)}
.sg-project__info{position:relative;z-index:1;width:100%;padding:24px}
.sg-project__cat .elementor-heading-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sg-green-300);margin:0}
/* Titulo de grupo: .gallery-title del repo. Va en servicios Y en trabajos, que es donde la usa el HTML local. */
.sg-group-title .elementor-heading-title{font-size:20px;font-weight:600;color:var(--sg-ink);padding-left:.85rem;border-left:3px solid var(--sg-green)}
@media(prefers-reduced-motion:reduce){.sg-project img{transition:none}.sg-project:hover img{transform:none}}

/* ---- Por que ServiGreen: .value y .split-media de css/index.css. Clases propias porque .sg-value ya la usan #proceso y #contacto con otro diseno. ---- */
.sg-why__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sg-radius-lg);display:block}
.sg-why__item{padding:24px 0;border-top:1px solid var(--sg-border)}
.sg-why__title .elementor-heading-title{margin:0}


/* ---- FAQ: .faq-item del repo. El panel cubre caja, borde, tipografia e icono;
   aqui solo el padding del summary, que no tiene control propio. ---- */
.sg-faq details{background:#fff;border:1px solid var(--sg-border);border-radius:var(--sg-radius-lg);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.sg-faq details:hover{border-color:var(--sg-green)}
.sg-faq details[open]{border-color:var(--sg-green);box-shadow:0 1px 2px rgba(21,24,28,.06),0 4px 14px rgba(21,24,28,.05)}
.sg-faq .e-n-accordion-item-title{cursor:pointer}
.sg-faq .e-n-accordion-item-title:focus-visible{outline:2px solid var(--sg-green-700);outline-offset:-2px}
.sg-faq p{color:var(--sg-muted);line-height:1.65;margin:0}
.sg-faq a{color:var(--sg-green-700);text-decoration:underline}

/* ---- Mapa de «Como llegar» y banda CTA final: alto fijo por CSS para que la caja
   este dimensionada antes de que llegue el iframe y no haya salto de layout. ---- */
.sg-zona__mapa iframe{display:block;width:100%;height:420px;border:0;border-radius:var(--sg-radius-lg);box-shadow:0 1px 2px rgba(21,24,28,.06),0 4px 14px rgba(21,24,28,.05)}
@media(max-width:767px){.sg-zona__mapa iframe{height:clamp(220px,45vw,320px)}}
.sg-cta__title .elementor-heading-title{max-width:22ch}

/* servigreen - 2026-08-27 - T3 CTA: .cta-band .btn-primary de la maqueta invierte el boton
   sobre la banda verde (blanco con texto y flecha en verde). Sin esto el boton primario
   es verde sobre verde y solo se ve el texto y el circulo de la flecha. */
.sg-cta-band .sg-btn--primary{background:#fff;color:var(--sg-green-700)}
.sg-cta-band .sg-btn--primary .sg-btn__arrow{background:var(--sg-green);color:#fff}
.sg-cta-band .sg-btn--primary:hover{background:var(--sg-deep);color:#fff}
.sg-cta-band .sg-btn,.sg-cta-band .elementor-button{text-decoration:none}
.sg-cta__acciones{align-items:center}
@media(max-width:767px){.sg-cta__acciones{flex-direction:column;align-items:stretch}
  .sg-cta__acciones .sg-btn-wrap,.sg-cta__acciones .sg-btn,.sg-cta__acciones .elementor-widget-button,.sg-cta__acciones .elementor-button{width:100%;justify-content:center}}

/* servigreen - 2026-08-27 - T4 hero: .hero de la maqueta. Panel: layout, overlay, min-height. Aqui: anchos maximos, boton ghost invertido, pildoras y reduced-motion. */
.sg-hero__content{max-width:760px}
.sg-hero__lead .elementor-heading-title{max-width:580px}
.sg-hero .sg-btn--ghost{background:#fff;border-color:#fff;color:#000}
.sg-hero .sg-btn--ghost:hover{background:transparent;color:#fff;border-color:#fff}
.sg-hero__pill .elementor-heading-title{display:inline-flex;align-items:center;gap:.5rem;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;line-height:1.2;padding:.5rem .9rem;border:1px solid rgba(255,255,255,.25);border-radius:var(--sg-pill);background:rgba(255,255,255,.06);backdrop-filter:blur(4px);margin:0}
.sg-hero__pill .elementor-heading-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sg-green);flex:none}
@media(prefers-reduced-motion:reduce){.sg-hero .elementor-background-video-container{display:none}}

/* servigreen - 2026-08-27 - botones sobre fondo oscuro. La regla .sg-on-dark a:not(.elementor-button) (0-2-1) pintaba los .sg-btn en verde claro y subrayados: es el "texto subrayado con circulo suelto" de T3/T4. Se gana con 0-2-1 y orden, sin !important. */
a.sg-btn,a.sg-btn:hover,.sg-on-dark a.sg-btn{text-decoration:none}
.sg-on-dark a.sg-btn--primary{color:#fff}
.sg-on-dark a.sg-btn--primary:hover{color:#fff}
.sg-on-dark a.sg-btn--ghost,.sg-hero a.sg-btn--ghost{color:#000}
.sg-on-dark a.sg-btn--ghost:hover,.sg-hero a.sg-btn--ghost:hover{color:#fff}
.sg-cta-band a.sg-btn--primary{color:var(--sg-green-700)}
.sg-cta-band a.sg-btn--primary:hover{color:#fff}

/* servigreen - 2026-08-27 - T7: la respuesta del FAQ es un .e-con hijo del <details>. Elementor le pone border-top/bottom y padding 4/0/16 por defecto; el panel de cada contenedor lo corrige, y esto lo asegura a 0-3-0. */
.sg-faq details > .e-con{border-top:0;border-bottom:0;padding:0 21.6px 21.6px}
.sg-faq details > .e-con > .elementor-widget-text-editor{width:100%}
.sg-faq__lead .elementor-heading-title{margin-inline:auto}/* End custom CSS */