.elementor-kit-7{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#CDFF3C;--e-global-color-text:#B3B3B3;--e-global-color-accent:#CDFF3C;--e-global-color-glop_lima:#CDFF3C;--e-global-color-glop_lima_dark:#A8D42B;--e-global-color-glop_naranja:#FF4A17;--e-global-color-glop_naranja_dark:#D93A0F;--e-global-color-glop_negro:#0A0A0A;--e-global-color-glop_negro_card:#141414;--e-global-color-glop_negro_tag:#1C1C1C;--e-global-color-glop_borde:#262626;--e-global-color-glop_blanco:#FFFFFF;--e-global-color-glop_gris:#B3B3B3;--e-global-color-glop_gris_soft:#6E6E6E;--e-global-typography-primary-font-family:"Archivo Black";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.02em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Archivo Black";--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:13px;--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.25em;font-family:"Inter", sans-serif;font-size:16px;font-weight:400;line-height:1.7em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:#CDFF3C;font-family:"Archivo Black", sans-serif;font-size:15px;font-weight:400;text-transform:uppercase;letter-spacing:0.02em;color:#0A0A0A;border-radius:999px 999px 999px 999px;padding:16px 34px 16px 34px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{color:#0A0A0A;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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-kit-7{--e-global-typography-primary-font-size:42px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:32px;--e-global-typography-secondary-font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   #GLOP — Sistema de marca para Elementor
   Se pega en: Elementor → Ajustes del sitio → CSS personalizado
   Fuente de verdad: MARCA/IDENTIDAD-GLOP.md
   Las clases se aplican en cualquier widget: Avanzado → Clases CSS
   ============================================================ */

:root{
  --glop-lima:#CDFF3C;  --glop-lima-dark:#A8D42B;
  --glop-naranja:#FF4A17; --glop-naranja-dark:#D93A0F;
  --glop-negro:#0A0A0A; --glop-negro-card:#141414; --glop-negro-tag:#1C1C1C;
  --glop-borde:#262626;
  --glop-blanco:#FFFFFF; --glop-gris:#B3B3B3; --glop-gris-soft:#6E6E6E;
  --glop-titulo:"Archivo Black","Anton",Montserrat,sans-serif;
}

/* ---------- BASE ---------- */
body{ background:var(--glop-negro); color:var(--glop-gris); }
h1,h2,h3,h4,h5,h6{ color:var(--glop-blanco); }
a{ color:var(--glop-lima); text-decoration:none; }
a:hover{ color:var(--glop-lima-dark); }
::selection{ background:var(--glop-lima); color:var(--glop-negro); }
img{ max-width:100%; height:auto; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--glop-negro); }
::-webkit-scrollbar-thumb{ background:var(--glop-borde); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--glop-lima); }

/* ============================================================
   CLASES REUTILIZABLES
   ============================================================ */

/* --- glop-tags : patrón de graffiti de fondo (en contenedores) --- */
.glop-tags{ position:relative; }
.glop-tags:before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    repeating-linear-gradient(115deg,var(--glop-negro-tag) 0 2px,transparent 2px 27px),
    repeating-linear-gradient(-68deg,var(--glop-negro-tag) 0 2px,transparent 2px 35px),
    repeating-linear-gradient(22deg,var(--glop-negro-tag) 0 1px,transparent 1px 19px);
}
.glop-tags > .e-con-inner,
.glop-tags > .elementor-widget-wrap{ position:relative; z-index:1; }

/* --- glop-card : tarjeta oscura con hover lima --- */
.glop-card{
  background:var(--glop-negro-card);
  border:1px solid var(--glop-borde);
  border-radius:16px;
  transition:border-color .2s ease, transform .2s ease;
}
.glop-card:hover{ border-color:var(--glop-lima); transform:translateY(-3px); }

/* --- glop-card-lima : tarjeta destacada, fondo lima y texto negro --- */
.glop-card-lima{ background:var(--glop-lima); border-radius:16px; }
.glop-card-lima, .glop-card-lima *{ color:var(--glop-negro) !important; }

/* Excepción: el botón de esa tarjeta va en negro con texto BLANCO.
   Sin esto la regla de arriba lo pinta negro sobre negro y desaparece. */
.glop-card-lima .elementor-button,
.glop-card-lima .elementor-button *{ color:#FFFFFF !important; }
.glop-card-lima .elementor-button:hover,
.glop-card-lima .elementor-button:hover *{ color:var(--glop-lima) !important; }

/* --- glop-card-dash : tarjeta con borde sticker punteado --- */
.glop-card-dash{
  background:var(--glop-negro-card);
  border:3px dashed var(--glop-lima);
  border-radius:16px;
}

/* --- glop-btn-dash : botón secundario, solo contorno punteado --- */
.glop-btn-dash .elementor-button{
  background:transparent !important;
  color:var(--glop-lima) !important;
  border:3px dashed var(--glop-lima) !important;
}
.glop-btn-dash .elementor-button:hover{
  background:var(--glop-lima) !important;
  color:var(--glop-negro) !important;
}

/* --- glop-kicker : bajada en mayúsculas muy espaciada --- */
.glop-kicker, .glop-kicker *{
  font-family:Montserrat,sans-serif !important;
  font-weight:300 !important;
  text-transform:uppercase !important;
  letter-spacing:.25em !important;
  color:var(--glop-lima) !important;
  font-size:12px !important;
}

/* --- glop-titulo : fuerza tipografía de titular --- */
.glop-titulo, .glop-titulo *{
  font-family:var(--glop-titulo) !important;
  text-transform:uppercase !important;
  letter-spacing:-.02em !important;
  color:var(--glop-blanco) !important;
}

/* --- glop-lima / glop-naranja : color de acento en texto --- */
.glop-lima, .glop-lima *{ color:var(--glop-lima) !important; }
.glop-naranja, .glop-naranja *{ color:var(--glop-naranja) !important; }

/* --- glop-precio : precio grande en lima --- */
.glop-precio, .glop-precio *{
  font-family:var(--glop-titulo) !important;
  color:var(--glop-lima) !important;
  letter-spacing:-.03em !important;
}

/* --- glop-regla : barra lima corta bajo un título --- */
.glop-regla{ width:56px; height:5px; background:var(--glop-lima); }

/* --- glop-badge : etiqueta naranja tipo sticker --- */
.glop-badge, .glop-badge *{
  background:var(--glop-naranja) !important;
  color:var(--glop-blanco) !important;
  font-family:var(--glop-titulo) !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  border-radius:999px !important;
  padding:5px 13px !important;
  display:inline-block;
}

/* --- glop-borde-top : línea divisoria sutil --- */
.glop-borde-top{ border-top:1px solid var(--glop-borde); }

/* --- glop-hash : antepone un # naranja --- */
.glop-hash:before{ content:"#"; color:var(--glop-naranja); }

/* ============================================================
   AJUSTES DE WIDGETS
   ============================================================ */

/* Listas de iconos: viñetas lima */
.elementor-icon-list-icon svg,
.elementor-icon-list-icon i{ color:var(--glop-lima) !important; fill:var(--glop-lima) !important; }
.elementor-icon-list-text{ color:var(--glop-gris); }

/* Formularios en oscuro */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select{
  background:var(--glop-negro-card) !important;
  border:1px solid var(--glop-borde) !important;
  color:var(--glop-blanco) !important;
  border-radius:10px !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus{ border-color:var(--glop-lima) !important; outline:none; }
.elementor-field-group input::placeholder,
.elementor-field-group textarea::placeholder{ color:var(--glop-gris-soft) !important; }

/* Menú de navegación */
.elementor-nav-menu .elementor-item{
  font-family:Inter,sans-serif; font-weight:500; letter-spacing:.02em;
}

/* ============================================================
   HEADER
   ============================================================ */

/* La hamburguesa de Elementor trae margin:0 auto y se centra sola,
   empujando el logo. Se anula siempre. */
.elementor-menu-toggle{
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  padding:6px !important;
}

/* --- Tablet (768px a 1024px): se mantiene el menú horizontal, como en escritorio.
   Se oculta el botón para que logo + menú entren cómodos en una sola fila. --- */
@media (min-width:768px) and (max-width:1024px){
  .elementor-location-header .elementor-widget-button{ display:none !important; }
}

/* --- Menú desplegable: panel anclado bajo el header (solo móvil) ---
   Por defecto el desplegable vive DENTRO del widget del menú, así que se monta
   encima del logo y del botón. Se ancla al borde inferior del header. */
@media (max-width:1024px){
  .elementor-location-header .e-con.e-parent{ position:relative; overflow:visible; }
  .elementor-location-header .elementor-widget-nav-menu{ position:static; }

  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin-top:0 !important;
    background:var(--glop-negro) !important;
    border-top:1px solid var(--glop-borde);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    z-index:100;
  }
}

@media (max-width:767px){
  /* Header tipo app: hamburguesa a la izquierda, logo centrado.
     El header NO se parte en varias filas. */
  .elementor-location-header .e-con-inner{
    flex-wrap:nowrap !important;
    gap:12px !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .elementor-location-header .e-con-inner > *{ flex-shrink:0; }

  /* 1 · hamburguesa pegada a la izquierda */
  .elementor-location-header .elementor-widget-nav-menu{ order:1; flex:1 1 0; }
  .elementor-location-header .elementor-menu-toggle{
    margin:0 !important;
    width:fit-content;
    justify-content:flex-start !important;
  }

  /* 2 · logo al centro */
  .elementor-location-header .elementor-widget-image{ order:2; flex:0 0 auto; }

  /* 3 · espaciador invisible: sin él el logo no queda centrado de verdad */
  .elementor-location-header .e-con-inner::after{ content:""; order:3; flex:1 1 0; }

  /* En celular el botón del header sobra: la hamburguesa y el hero ya llevan al WhatsApp.
     NO usar el control "ocultar en móvil" de Elementor: en esta versión genera la clase
     .elementor-hidden (sin sufijo), que oculta el elemento en TODOS los tamaños. */
  .elementor-location-header .elementor-widget-button{ display:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:767px){
  .glop-tags:before{ opacity:.35; }
  .glop-card:hover{ transform:none; }
}

/* ==== GLOP FAQ + FORM (bloque administrado) ==== */

/* --- glop-faq : acordeón de preguntas frecuentes ---
   El widget clásico `accordion` de Elementor renderiza vacío en 4.x.
   Se usa `nested-accordion`, que arma <details>/<summary> con estas clases. */
.glop-faq .e-n-accordion{ display:flex; flex-direction:column; gap:10px; }

.glop-faq .e-n-accordion-item{
  background:var(--glop-negro-card);
  border:1px solid var(--glop-borde);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s ease;
}
.glop-faq .e-n-accordion-item:hover{ border-color:#3a3a3a; }
.glop-faq .e-n-accordion-item[open]{ border-color:var(--glop-lima); }

.glop-faq .e-n-accordion-item-title{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:17px 22px;
  cursor:pointer;
  list-style:none;
}
.glop-faq .e-n-accordion-item-title::-webkit-details-marker{ display:none; }

.glop-faq .e-n-accordion-item-title-text{
  font-family:Inter,sans-serif;
  font-weight:600;
  font-size:15.5px;
  line-height:1.45;
  color:var(--glop-blanco);
  transition:color .2s ease;
}
.glop-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.glop-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text{
  color:var(--glop-lima);
}

.glop-faq .e-n-accordion-item-title-icon{ flex:0 0 auto; display:flex; }
.glop-faq .e-n-accordion-item-title-icon svg{
  width:13px; height:13px;
  fill:var(--glop-naranja);
  transition:fill .2s ease;
}
.glop-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg{
  fill:var(--glop-lima);
}

/* Foco visible por teclado: accesibilidad sin romper el estilo */
.glop-faq .e-n-accordion-item-title:focus-visible{
  outline:2px solid var(--glop-lima);
  outline-offset:-2px;
}

@media (max-width:767px){
  .glop-faq .e-n-accordion-item-title{ padding:15px 17px; gap:12px; }
  .glop-faq .e-n-accordion-item-title-text{ font-size:14.5px; }
}

/* --- Formulario de cotización: botón de envío con la marca --- */
.elementor-form .elementor-button[type="submit"]{
  font-family:var(--glop-titulo) !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  border-radius:999px !important;
}
.elementor-field-group > label.elementor-field-label{
  margin-bottom:6px !important;
  color:var(--glop-blanco) !important;
}
.elementor-field-group input,
.elementor-field-group textarea{ padding:12px 14px !important; }

/* Mensajes de resultado del formulario */
.elementor-message.elementor-message-success{ color:var(--glop-lima) !important; }
.elementor-message.elementor-message-danger{ color:var(--glop-naranja) !important; }

/* --- Tarjetas: que el botón quede siempre abajo, parejo entre tarjetas --- */
.glop-card{ display:flex; flex-direction:column; }
.glop-card > .e-con-inner{ flex:1; display:flex; flex-direction:column; }
.glop-card .elementor-widget-button{ margin-top:auto; }

/* ==== fin bloque administrado ==== */

/* ==== GLOP FONDO TECNICO (bloque administrado) ==== */

/* --- Fondo del sitio: rejilla tecnica fija sobre negro ---
   Va en un pseudo-elemento fijo (z-index:-1) en vez de
   background-attachment:fixed, que en iOS se comporta mal.
   Las secciones de las paginas quedan transparentes para que
   la rejilla se vea corrida y continua al hacer scroll. */
body{ background-color:var(--glop-negro); }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--glop-negro);
  background-image:
    radial-gradient(760px 430px at 50% -6%,   rgba(205,255,60,.085), transparent 68%),
    radial-gradient(640px 430px at 104% 103%, rgba(255,74,23,.060), transparent 66%),
    linear-gradient(rgba(205,255,60,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205,255,60,.030) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:
    100% 100%, 100% 100%,
    34px 34px, 34px 34px,
    170px 170px, 170px 170px;
  background-repeat:no-repeat,no-repeat,repeat,repeat,repeat,repeat;
}

/* --- glop-tags : ahora es acento tecnico, no graffiti ---
   Puntos en los cruces de la rejilla + scanlines muy suaves.
   La mascara difumina los bordes para que no corte en seco. */
.glop-tags{ position:relative; }
.glop-tags:before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0 1px, transparent 1px 5px),
    radial-gradient(circle, rgba(205,255,60,.16) 1px, transparent 1.6px);
  background-size:auto auto, 34px 34px;
  background-position:0 0, 0 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}
.glop-tags > .e-con-inner,
.glop-tags > .elementor-widget-wrap{ position:relative; z-index:1; }

/* --- Animaciones de entrada ---
   Si el visitante pide menos movimiento, las tarjetas se
   muestran igual: nunca se quedan invisibles. */
@media (prefers-reduced-motion: reduce){
  .elementor-invisible{ visibility:visible !important; }
  .animated{ animation:none !important; }
}

/* ==== fin fondo tecnico ==== */

/* ==== GLOP FAQ ICONO CRUZ (bloque administrado) ==== */

/* --- La cruz naranja del FAQ ---
   Va como pseudo-elemento, no como icono de Font Awesome:
   asi se ve igual en las 5 paginas sin depender de que cargue
   la libreria de iconos. Cerrado es mas, abierto gira 45 grados.  */
.glop-faq .e-n-accordion-item-title{ justify-content:flex-start; gap:15px; }
.glop-faq .e-n-accordion-item-title-header{ flex:1 1 auto; }
.glop-faq .e-n-accordion-item-title-icon{ display:none !important; }
.glop-faq .e-n-accordion-item-title::before{
  content:"+";
  flex:0 0 auto; width:18px; text-align:center;
  font-family:var(--glop-titulo); font-size:21px; line-height:1;
  color:var(--glop-naranja);
  transition:transform .22s ease;
}
.glop-faq .e-n-accordion-item[open] .e-n-accordion-item-title::before{ transform:rotate(45deg); }
.glop-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text{ color:var(--glop-blanco); }
.glop-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{ color:var(--glop-lima); }
@media (max-width:767px){
  .glop-faq .e-n-accordion-item-title{ gap:12px; }
  .glop-faq .e-n-accordion-item-title::before{ font-size:19px; width:16px; }
}

/* ==== fin faq icono ==== */

/* ==== GLOP ENTRADA SUAVE (bloque administrado) ==== */
/* Elementor inyecta animations.min.css por JS, asi que redefinir el keyframe
   fadeInUp no es fiable. Se gana por especificidad con un keyframe propio.
   Solo paginas de servicio: 58, 60, 61, 62. */
@keyframes glopEntra{
  from{ opacity:0; transform:translate3d(0,24px,0); }
  to  { opacity:1; transform:none; }
}
.page-id-58 .elementor .animated.fadeInUp,
.page-id-60 .elementor .animated.fadeInUp,
.page-id-61 .elementor .animated.fadeInUp,
.page-id-62 .elementor .animated.fadeInUp{
  animation-name: glopEntra;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-fill-mode: both;
}
/* ==== fin entrada suave ==== *//* End custom CSS */