/* ===========================================================
   ds-elementor.css — viste los WIDGETS NATIVOS de Elementor
   para que sean idénticos al diseño ds.css.
   Cargar DESPUÉS de ds.css (usa sus variables).
   Cada sección nativa lleva una clase wrapper dpt-* en la
   sección de Elementor (campo Avanzado → Clases CSS).
   =========================================================== */

/* ---------- FAQ → accordion nativo (.dpt-faq) — reforzado para ganar al CSS por defecto de Elementor ---------- */
.dpt-faq .elementor-accordion{max-width:880px;margin:46px 0 0;border:0!important}
.dpt-faq .elementor-accordion-item{border:0!important;border-top:1px solid var(--line)!important;background:none!important;border-radius:0!important;margin:0!important;overflow:visible}
.dpt-faq .elementor-accordion-item:last-child{border-bottom:1px solid var(--line)!important}

.dpt-faq .elementor-tab-title{
  border:0!important;background:none!important;margin:0!important;
  padding:26px 0!important;display:flex!important;align-items:center;justify-content:space-between;gap:20px;cursor:pointer}
.dpt-faq .elementor-tab-title .elementor-accordion-title{
  order:1;font-family:"Roboto",sans-serif;font-size:19px;font-weight:500;color:var(--cream);line-height:1.35;flex:1 1 auto}

/* el icono = círculo "+" que rota a "×" al abrir (como .faq-q .pl), a la DERECHA */
.dpt-faq .elementor-tab-title .elementor-accordion-icon{
  order:2;float:none!important;flex:0 0 27px;width:27px;height:27px;margin:0!important;padding:0;
  border:1px solid var(--line);border-radius:50%;
  display:grid!important;place-items:center;color:var(--green-deep);
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.dpt-faq .elementor-tab-title .elementor-accordion-icon i{font-size:12px!important;line-height:1;width:auto;color:inherit}
.dpt-faq .elementor-tab-title .elementor-accordion-icon svg{width:11px;height:11px;fill:currentColor}
.dpt-faq .elementor-accordion-icon-closed{display:inline-flex!important}
.dpt-faq .elementor-accordion-icon-opened{display:none!important}
.dpt-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{
  transform:rotate(45deg);background:var(--green)!important;color:var(--green-ink)!important;border-color:var(--green)!important}

.dpt-faq .elementor-tab-content{padding:0 0 26px!important;background:none!important;border:0!important;box-shadow:none!important}
.dpt-faq .elementor-tab-content,
.dpt-faq .elementor-tab-content p{color:var(--cream-dim);font-size:16px;line-height:1.6;max-width:66ch}

/* ---------- Métricas → Counter nativo (#resultados) ----------
   NOTA Elementor 4.1.4: el campo "Clases CSS" SOLO aplica en widgets, no en
   secciones/columnas. Por eso las secciones se estilan por su ID (_element_id),
   que sí se renderiza. */
#resultados{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#resultados .elementor-inner-section{border-top:1px solid var(--line);margin-top:60px;padding-top:50px}
#resultados .elementor-counter-number-wrapper{font-family:"Roboto",sans-serif;font-size:clamp(46px,6vw,80px);font-weight:430;letter-spacing:-.02em;line-height:1;color:var(--cream);justify-content:flex-start}
#resultados .elementor-counter-number-prefix,#resultados .elementor-counter-number-suffix{color:var(--green);flex-basis:auto;width:auto;padding:0}
#resultados .elementor-counter-title{margin-top:10px;color:var(--muted);font-size:15px;font-weight:400;text-align:left}

/* ---------- Servicios → icon-box nativo (.svc-card es clase de WIDGET, sí aplica) ---------- */
#servicios .elementor-inner-section{margin-top:54px}
.svc-card{border:1px solid var(--line);border-radius:18px;padding:30px 28px;background:var(--ink);height:100%;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.svc-card:hover{transform:translateY(-4px);border-color:rgba(139,195,74,.55);box-shadow:0 18px 40px rgba(51,51,51,.07)}
.svc-card .elementor-icon-box-wrapper{display:flex!important;flex-direction:column;align-items:flex-start;text-align:left!important}
.svc-card .elementor-icon-box-icon{width:48px;height:48px;min-width:48px;border-radius:13px;background:var(--ink-3)!important;display:flex!important;align-items:center;justify-content:center;margin:0 0 16px!important}
.svc-card .elementor-icon-box-icon .elementor-icon{color:var(--green-deep)!important;font-size:23px;background:none!important;border:0!important;padding:0;line-height:1}
.svc-card .elementor-icon-box-icon .elementor-icon svg{width:23px;height:23px;fill:var(--green-deep)!important}
.svc-card .elementor-icon-box-title{font-size:22px!important;font-weight:700!important;margin:0 0 10px!important;color:var(--cream)!important}
.svc-card .elementor-icon-box-title a{color:inherit!important}
.svc-card .elementor-icon-box-description{color:var(--cream-dim)!important;font-size:15.5px;line-height:1.55;margin:0;text-align:left}

/* ---------- Comparativa → icon-list nativo (#comparativa) ---------- */
#comparativa .elementor-inner-section{margin-top:54px}
#comparativa .elementor-inner-section .elementor-column > .elementor-widget-wrap{border:1px solid var(--line);border-radius:20px;padding:34px 32px;background:var(--ink);gap:0}
#comparativa .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap{border-color:rgba(139,195,74,.5);background:linear-gradient(180deg,rgba(139,195,74,.06),var(--ink))}
/* separación central entre los dos bloques (la padding del box pisa el gap nativo) */
#comparativa .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap{margin-right:11px}
#comparativa .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap{margin-left:11px}
@media(max-width:767px){
  #comparativa .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap{margin:0 0 16px}
  #comparativa .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap{margin:0}
}
.cmp-h{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 8px}
#comparativa .elementor-column:last-child .cmp-h{color:var(--green-deep)}
#comparativa .elementor-icon-list-item{padding:14px 0;border-top:1px solid var(--line);align-items:center}
#comparativa .elementor-icon-list-icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#comparativa .cmp-no .elementor-icon-list-icon{background:rgba(192,57,43,.12)}
#comparativa .cmp-no .elementor-icon-list-icon i{color:#c0392b;font-size:11px}
#comparativa .cmp-yes .elementor-icon-list-icon{background:rgba(139,195,74,.18)}
#comparativa .cmp-yes .elementor-icon-list-icon i{color:var(--green-deep);font-size:11px}
/* el <i> de Elementor trae width fijo (~13.75px) y el glyph queda a la izquierda;
   width:auto deja que el flex del círculo lo centre de verdad */
#comparativa .elementor-icon-list-icon i{width:auto!important;min-width:0!important;margin:0!important;padding:0!important;line-height:1}
#comparativa .elementor-icon-list-text{font-size:16px;color:var(--cream);line-height:1.5}

/* ---------- CTA → tarjeta degradado nativa (#calcula / .dpt-cta-card) ---------- */
#calcula{padding:90px 0}
#calcula .elementor-inner-section > .elementor-container{background:linear-gradient(135deg,#5e9633,#37591d);border-radius:30px;padding:64px 60px}
#calcula .sec-head h2{color:#fff;font-size:clamp(32px,4.4vw,56px);font-weight:430;margin:0}
#calcula .elementor-widget-text-editor,#calcula .elementor-widget-text-editor p{color:#fff;opacity:.92;font-size:17px;max-width:42ch;margin-top:14px}
#calcula .elementor-inner-section .elementor-column:last-child .elementor-widget-wrap{flex-direction:column;gap:12px;align-items:stretch}
#calcula a.elementor-button{border-radius:100px;font-weight:600;padding:16px 26px;justify-content:center;font-family:inherit}
#calcula .btn-dark a.elementor-button{background:#fff!important;color:var(--green-ink)!important}
#calcula .ghost-light a.elementor-button{background:transparent!important;border:1px solid rgba(255,255,255,.6);color:#fff!important}
#calcula a.elementor-button .elementor-button-text{color:inherit}

/* ---------- Cinta de bancos: caja uniforme 148×36 (como diseño .marquee img) ----------
   algo (Elementor/WP) pone height:auto y rompía la altura (logos de 22px a 67px) → fijar */
#bancos .marquee img{height:36px!important;width:148px!important;object-fit:contain}
@media(max-width:560px){#bancos .marquee img{height:30px!important;width:118px!important}}

/* ---------- Nosotros / Cobertura (imagen + texto) ---------- */
#nosotros .elementor-inner-section .elementor-container,#cobertura .elementor-inner-section .elementor-container{align-items:center}
.dpt-rounded img{border-radius:22px;display:block}
#nosotros .reassure{margin-top:22px}
/* separación entre columna imagen y columna texto (diseño .about-grid/.cobertura-grid gap:60px) */
#nosotros .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap{padding-right:30px}
#nosotros .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap{padding-left:30px}
#cobertura .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap{padding-right:30px}
#cobertura .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap{padding-left:30px}
@media(max-width:767px){
  #nosotros .elementor-inner-section .elementor-column > .elementor-widget-wrap,
  #cobertura .elementor-inner-section .elementor-column > .elementor-widget-wrap{padding-left:0!important;padding-right:0!important}
}

/* ---------- Testimonios (#opiniones) — destacado alineado a la izquierda y compacto ---------- */
#opiniones{border-top:1px solid var(--line)}
#opiniones .dpt-resenas{text-align:left}
#opiniones .stars{color:var(--green);letter-spacing:3px;margin-bottom:18px;justify-content:flex-start;text-align:left}
#opiniones .by{text-align:left}
#opiniones blockquote{font-family:"Roboto",sans-serif;font-size:clamp(20px,2.3vw,28px);font-weight:400;line-height:1.4;max-width:46ch;margin:0}
#opiniones blockquote b{color:var(--green);font-weight:500}
#opiniones .by{margin-top:30px;color:var(--muted);font-size:15px}
#opiniones .dpt-tgrid{margin-top:50px}
.tcard{border:1px solid var(--line);border-radius:18px;padding:28px 26px;background:var(--ink);height:100%}
.tcard .st{color:var(--green);letter-spacing:2px;font-size:14px;margin-bottom:14px}
.tcard p{font-size:16px;color:var(--cream);line-height:1.55;margin:0}
.tcard .who{margin-top:18px;font-size:14px;color:var(--muted);font-weight:600}

/* ---------- Página Contacto: bloque formulario en 2 columnas (canales | CF7) ---------- */
#formulario .elementor-inner-section .elementor-container{align-items:start}
#formulario .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap{padding-right:25px}
#formulario .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap{padding-left:25px}
@media(max-width:767px){#formulario .elementor-inner-section .elementor-column > .elementor-widget-wrap{padding-left:0!important;padding-right:0!important}}

/* ---------- Contacto: formulario CF7 dentro de .lead-form ---------- */
.lead-form .wpcf7-form{display:grid;gap:15px}
.lead-form .wpcf7-form-control-wrap{display:block;width:100%}
.lead-form .wpcf7-form .field{margin:0}
.lead-form input[type=submit].btn{width:100%;cursor:pointer;border:0;justify-content:center}
.lead-form .wpcf7-response-output{margin:6px 0 0!important;border-radius:10px;font-size:13.5px}
.lead-form .wpcf7-not-valid-tip{font-size:12px;margin-top:4px}
.lead-form .consent{align-items:flex-start}
.lead-form .consent .wpcf7-list-item{margin:0}
.lead-form .consent input[type=checkbox]{width:auto;margin-top:2px}

/* Fix consentimiento CF7: el checkbox pegado al texto (no full-width) */
.lead-form .consent .wpcf7-form-control-wrap{width:auto!important;flex:0 0 auto;display:inline-block}
.lead-form .consent .wpcf7-acceptance,.lead-form .consent .wpcf7-list-item{margin:0;display:inline}
.lead-form .consent .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start}

/* ===========================================================
   Editor de Elementor: forzar visibles las animaciones de
   aparición. Si no, los [data-reveal]/.w-reveal/.clip-reveal
   se quedan en opacity:0 (el JS de scroll no corre en el
   editor) y el canvas aparece casi vacío.
   =========================================================== */
.elementor-editor-active [data-reveal],
.elementor-editor-active .w-reveal .w,
.elementor-editor-active .clip-reveal,
.elementor-editor-preview [data-reveal],
.elementor-editor-preview .w-reveal .w,
.elementor-editor-preview .clip-reveal,
.elementor-edit-mode [data-reveal],
.elementor-edit-mode .w-reveal .w,
.elementor-edit-mode .clip-reveal,
.dpt-in-editor [data-reveal],
.dpt-in-editor .w-reveal .w,
.dpt-in-editor .clip-reveal{
  opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;
}

/* ---------- Ancho de contenido de secciones nativas = 1240 (como .wrap) ----------
   (las clases no aplican a sección/columna en 4.1.4, así que se centra por aquí;
   el padding vertical va en el control nativo de cada sección = editable) */
.elementor-section-boxed > .elementor-container{max-width:1240px;padding-left:32px;padding-right:32px}
@media(max-width:560px){.elementor-section-boxed > .elementor-container{padding-left:22px;padding-right:22px}}

/* ---------- Equipo: igualar altura de tarjetas (nombres de 1 o 2 líneas) ---------- */
#equipo .team-slider{align-items:stretch}
#equipo .member{display:flex;flex-direction:column}
#equipo .member .info{min-height:80px;display:flex;flex-direction:column;justify-content:center}

/* ---------- CTA: botones idénticos al diseño (.btn-dark / .ghost-light), no estilo Elementor ---------- */
#calcula a.elementor-button{border-radius:100px!important;font-weight:600!important;font-size:15px!important;padding:17px 26px!important;justify-content:center;font-family:inherit!important;box-shadow:none!important;border:0;display:inline-flex;align-items:center;gap:9px;transition:transform .25s var(--ease)}
#calcula a.elementor-button .elementor-button-content-wrapper{display:flex;align-items:center;gap:9px}
#calcula .btn-dark a.elementor-button{background:#fff!important;color:var(--green-ink)!important}
#calcula .ghost-light a.elementor-button{background:transparent!important;border:1px solid rgba(255,255,255,.6)!important;color:#fff!important}
#calcula .ghost-light a.elementor-button:hover{background:#fff!important;color:var(--green-ink)!important}
#calcula a.elementor-button:hover{transform:translateY(-2px)}
#calcula a.elementor-button .elementor-button-text{color:inherit!important;font-weight:600}

/* botón ghost de #cobertura (home): era .btn-ghost sin override, así que el a.elementor-button
   salía con el verde por defecto de Elementor (#61CE70). Lo vestimos como ghost real
   (transparente, borde sutil, texto oscuro; verde al hover) y anulamos la cápsula del wrapper. */
#cobertura .elementor-widget-button.btn{border:0!important;padding:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}
#cobertura a.elementor-button{background:transparent!important;border:1px solid rgba(51,51,51,.2)!important;color:#333!important;border-radius:100px!important;font-weight:600!important;padding:14px 26px!important;box-shadow:none!important;display:inline-flex;align-items:center;gap:9px;transition:transform .25s var(--ease),border-color .25s,color .25s}
#cobertura a.elementor-button:hover{border-color:#8bc34a!important;color:#4f7c27!important;transform:translateY(-2px)}
#cobertura a.elementor-button .elementor-button-text{color:inherit!important;font-weight:600}


/* ===========================================================
   Cabeceras de sección con widgets NATIVOS (Heading + Texto)
   en vez del widget DPT — replican el .sec-head del diseño.
   La palabra en cursiva va como <span class="serif-it accent">
   dentro del título del Heading (Elementor lo respeta).
   =========================================================== */
/* color con clase compuesta .elementor-widget-heading.dpt-* (0,0,3,0) para GANAR al
   kit Elementor: post-2.css aplica .elementor-widget-heading .elementor-heading-title
   {color:--e-global-color-primary(#6EC1E4 azul)} a TODAS las cabeceras nativas. */
.dpt-eyebrow .elementor-heading-title{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;line-height:1}
.elementor-widget-heading.dpt-eyebrow .elementor-heading-title{color:var(--muted)}
.dpt-eyebrow{margin-bottom:14px!important}
.dpt-sec-h2 .elementor-heading-title{font-size:clamp(32px,4.4vw,54px);font-weight:360;line-height:1.08}
.elementor-widget-heading.dpt-sec-h2 .elementor-heading-title{color:var(--cream)}
.dpt-sec-h2{max-width:760px;margin-bottom:18px!important}
.dpt-sec-intro p{color:var(--cream-dim);max-width:54ch;margin:0;font-size:16px;line-height:1.6}
/* CTA (tarjeta verde): titular y texto en blanco */
#calcula .dpt-sec-h2 .elementor-heading-title{color:#fff}
#calcula .dpt-sec-h2{max-width:none;margin-bottom:14px!important}
#calcula .dpt-sec-intro p{color:#fff;opacity:.92;font-size:17px;max-width:42ch}