/* =========================================================
   LOMAS GAS — estilos estáticos (migrado de WordPress/Divi)
   Paleta: azul marino #293160 (marca), blanco, gris texto #666
   ========================================================= */

:root{
  --color-primario: #293160;
  --color-primario-claro: #073384;
  --color-acento: #fdba5f;
  --color-acento-texto: #001955;
  --color-footer: #222;
  --color-texto: #666;
  --color-texto-oscuro: #333;
  --color-blanco: #fff;
  --fuente: 'Open Sans', Arial, sans-serif;
  --fuente-hero: 'Allerta', 'Open Sans', Arial, sans-serif;
  --fuente-titulo: 'Exo 2', 'Open Sans', Arial, sans-serif;
  --max-width: 1080px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.7em;
  color: var(--color-texto);
  background: #fff;
}

a{ color: var(--color-primario); text-decoration: none; }
a:hover{ opacity: .75; }

h1,h2,h3,h4,h5,h6{
  color: var(--color-texto-oscuro);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.3em;
  margin: 0 0 10px;
}
h1{ font-family: var(--fuente-hero); font-size: 42px; }
h2{ font-size: 30px; }
h3{ font-size: 22px; }
h4{ font-size: 18px; }

@media (min-width: 900px){
  h1{ font-size: 56px; line-height: 1.15em; }
  h2{ font-size: 36px; }
}

p{ margin: 0 0 1em; }
img{ max-width: 100%; height: auto; display: block; }

.container{
  width: 88%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.section{ padding: 60px 0; }
.section-bg{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)),
    url(../img/planta-pipa-cilindro-tanque-lomas-gas-precio-empresa.png) center / cover no-repeat;
}
.section-bg-navy{
  background:
    url(../img/robotics-12.png) no-repeat right top / auto,
    linear-gradient(var(--color-primario) 0%, var(--color-primario-claro) 100%);
  color: #fff;
}
.section-bg-navy-left{
  background:
    url(../img/robotics-12.png) no-repeat left top / contain,
    linear-gradient(#001b56 0%, #01217d 100%);
  color: #fff;
}

/* ---------- Hero de página interior con foto de fondo ---------- */
.page-hero-photo{
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 70px 0 90px;
}
.page-hero-photo h1{ color: #fff; }
.page-hero-photo p{ color: rgba(255,255,255,.9); max-width: 640px; }
.section-bg-photo{
  background:
    linear-gradient(190deg, rgba(41,49,96,.75) 0%, rgba(41,49,96,.55) 64%),
    url(../img/actualizacion-precio-del-gas-lomas-cdmx-24-horas.jpeg) center / cover no-repeat;
}
.section-bg-photo .contact-card{
  background: rgba(255,255,255,.94);
  border-radius: 8px;
  padding: 35px;
}
.section-bg-light{ background: #f5f6f9; }
.text-white{ color: #fff; }
.text-center{ text-align: center; }

.intro-box{
  background: rgba(41,49,96,.6);
  color: #fff;
  padding: 30px;
  border-radius: 8px;
}
.intro-box h2{ color: #fff; }

/* ---------- Grid simple ---------- */
.row{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}
.col{ flex: 1 1 100%; }
@media (min-width: 900px){
  .col-33{ flex: 0 1 calc(33.333% - 20px); }
  .col-40{ flex: 0 1 calc(40% - 15px); }
  .col-50{ flex: 0 1 calc(50% - 15px); }
  .col-60{ flex: 0 1 calc(60% - 15px); }
  .col-70{ flex: 0 1 calc(70% - 15px); }
  .col-30{ flex: 0 1 calc(30% - 15px); }
}

.blurb-row{ margin-top: 40px; }
.blurb{
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 80px rgba(98,116,138,.2);
  padding: 40px 20px;
  text-align: center;
}
.blurb h4{ margin-top: 15px; color: var(--color-primario); }
.blurb img{ margin: 0 auto; max-width: 180px; }

/* ---------- Top bar ---------- */
#top-header{
  background: var(--color-primario);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}
.top-header-inner{ padding: 12px 0; }
#et-info-phone{ margin-right: 30px; }
#top-header a{ color: #fff; }

/* ---------- Header ---------- */
#main-header{
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
#logo{ max-height: 70px; width: auto; }

#top-menu{
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}
#top-menu > li{ position: relative; }
#top-menu > li > a{
  color: var(--color-primario);
  font-weight: 600;
  font-size: 14px;
}
#top-menu > li.active > a,
#mobile-menu > li.active > a{
  color: #2EA3F2;
}
#top-menu li.has-children > a:after{
  content: '\25BE';
  margin-left: 4px;
  font-size: 11px;
}
#top-menu li.has-children .sub-menu{
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-top: 3px solid var(--color-primario);
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease-in-out;
}
#top-menu li.has-children:hover .sub-menu,
#top-menu li.has-children.open .sub-menu{
  opacity: 1;
  visibility: visible;
}
#top-menu li.has-children .sub-menu li a{
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  white-space: nowrap;
}
#top-menu li.has-children .sub-menu li a:hover{ background: rgba(41,49,96,.05); opacity: 1; }

#mobile-menu-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--color-primario);
  cursor: pointer;
}
#mobile-menu{
  display: none;
  list-style: none;
  margin: 0;
  padding: 10px 5%;
  background: #fff;
  border-top: 3px solid var(--color-primario);
}
#mobile-menu li a{
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  color: var(--color-primario);
  font-weight: 600;
}
#mobile-menu.open{ display: block; }

@media (max-width: 900px){
  #top-menu-nav{ display: none; }
  #mobile-menu-toggle{ display: block; }
}

/* ---------- Hero ---------- */
.hero-section{
  position: relative;
  overflow: hidden;
  padding-top: 90px;
  padding-bottom: 70px;
  background:
    url(../img/robotics-05-1.png) no-repeat right bottom / auto,
    linear-gradient(var(--color-primario) 28%, var(--color-primario-claro) 100%);
  color: #fff;
}

/* Imágenes que "se salen" de su columna, como en el sitio original (Divi
   permite que la imagen sea más grande que su columna; la sección recorta
   el excedente con overflow:hidden). */
.pop-image{
  max-width: none !important;
  width: 145%;
  position: relative;
}
.pop-image-lg{ width: 170%; }
.hero-text h1{ margin-bottom: 5px; color: #fff; }
.hero-sub{ display:block; font-size: 22px; color: #fff; font-family: var(--fuente); font-weight: 600; }
.hero-text p{ color: #fff; }
#precio_1{ color: #fff; }
#fechaGas{ color: rgba(255,255,255,.85); font-size: 13px; }

/* ---------- Botones ---------- */
.btn{
  display: inline-block;
  padding: 12px 30px;
  border: none;
  border-radius: 3px;
  background: var(--color-acento);
  color: var(--color-acento-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  transition: all .2s ease;
}
.btn:hover{ opacity: .85; }
.btn-submit{
  background: var(--color-acento);
  color: var(--color-acento-texto);
  border: none;
  padding: 12px 30px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  font-size: 14px;
}
.btn-submit:hover{ opacity: .85; }

/* ---------- Canales de atención ---------- */
.canales-icons{
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.canales-icons-small{ margin-bottom: 20px; }

/* ---------- Iframes ---------- */
.map-iframe{ width: 100%; height: 320px; margin: 15px 0; border-radius: 4px; }
.admin-iframe{ width: 100%; height: 420px; border: 0; }

/* ---------- Formulario de contacto ---------- */
.contact-form{
  background: #fff;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.contact-form label{
  display: block;
  font-weight: 600;
  color: var(--color-texto-oscuro);
  margin: 14px 0 6px;
  font-size: 14px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid #bbb;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--color-primario);
}
.checkbox-label{
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400 !important;
  font-size: 13px !important;
}
.privacy-note{ font-size: 12px; color: #999; margin: 16px 0; text-align: justify; }

.wpcf7-response-output{
  margin-top: 15px;
  padding: 12px 18px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.wpcf7-not-valid-tip{
  color: #dc3232;
  font-size: 13px;
  margin-top: 4px;
  display: block !important;
}
.field-error {
  padding: 8px;
}
input.wpcf7-not-valid,
textarea.wpcf7-not-valid,
select.wpcf7-not-valid{
  border-color: #dc3232 !important;
}
.btn-submit:disabled{
  opacity: 0.5 !important;
  cursor: not-allowed;
}
.field-wrap{
  position: relative;
}

/* ---------- Footer ---------- */
#footer-bottom{
  background: var(--color-footer);
  color: #ccc;
  text-align: center;
  padding: 18px 0;
  font-size: 13px;
}
#footer-bottom a{ color: #fff; }

/* ---------- Botones flotantes (WhatsApp / Messenger) ---------- */
.floating-buttons{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.fab{
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 30px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.fab:hover{ transform: scale(1.04); opacity: 1; }
.fab svg{ width: 20px; height: 20px; margin-right: 8px; flex: none; }
.fab-whatsapp{ background: #26D367; }
.fab-messenger{ background: #007FF7; }
.fab-up{
  background: var(--color-primario);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  justify-content: center;
  padding: 0;
}
.fab-up svg{ margin-right: 0; }

@media (max-width: 600px){
  .floating-buttons .fab span{ display: none; }
  .fab:not(.fab-up){ padding: 14px; border-radius: 50%; }
  .fab:not(.fab-up) svg{ margin-right: 0; }
}

/* =========================================================
   Componentes de páginas internas (pages/*.html)
   ========================================================= */

/* ---------- Hero de página interior ---------- */
.page-hero{ padding: 45px 0 20px; }
.page-hero h1{ margin-bottom: 12px; }
.page-hero .col-40{ text-align: center; }
.page-hero img{ max-width: 320px; margin: 0 auto; }

/* ---------- Tarjetas de features (íconos + título + texto) ---------- */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.feature-card{
  text-align: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 80px rgba(98,116,138,.2);
  padding: 40px 20px;
}
.feature-card img{ max-width: 72px; margin: 0 auto 14px; }
.feature-card h4{ margin-bottom: 8px; color: var(--color-primario); }
.feature-card p{ font-size: 14px; }

/* ---------- Acordeón de preguntas frecuentes ---------- */
.faq-list{ margin-top: 20px; }
.faq-item{
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-question{
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  padding: 16px 44px 16px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-texto-oscuro);
  cursor: pointer;
  position: relative;
}
.faq-question:after{
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-primario);
}
.faq-item.open .faq-question:after{ content: '\2212'; }
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: #f9f9fb;
}
.faq-item.open .faq-answer{ max-height: 600px; }
.faq-answer-inner{ padding: 4px 18px 18px; font-size: 14px; color: var(--color-texto-oscuro); }
.faq-answer-inner ol,
.faq-answer-inner ul{ padding-left: 20px; margin: 0 0 1em; }
.faq-answer-inner li{ margin-bottom: 6px; }

/* ---------- Formularios: select y archivos ---------- */
.contact-form select{
  width: 100%;
  padding: 10px;
  border: 1px solid #bbb;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}
.contact-form input[type="file"]{
  width: 100%;
  padding: 8px 0;
  font-size: 13px;
}
.contact-form .form-note{ font-size: 13px; color: #888; margin-bottom: 10px; }
.contact-form .form-hint{ font-size: 12px; color: #999; margin: -8px 0 14px; }

/* ---------- Cobertura: listas de zonas ---------- */
.cobertura-zonas{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 20px;
}
.cobertura-zonas h4{ color: var(--color-primario); }
.cobertura-zonas ul{ list-style: disc; padding-left: 20px; margin: 0; }
.cobertura-zonas li{ margin-bottom: 6px; }

/* ---------- Nuestra APP: badges de tiendas y capturas ---------- */
.app-badges{
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.app-badges a img{ height: 50px; width: auto; }
.app-screens{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.app-screens img{ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.app-steps{ margin-top: 15px; }
.app-steps li{ margin-bottom: 10px; }

/* ---------- Video embebido ---------- */
.video-wrap{ position: relative; border-radius: 6px; overflow: hidden; }
.video-wrap video{ width: 100%; display: block; border-radius: 6px; }

/* ---------- Aviso de privacidad ---------- */
.legal-content h3{ margin-top: 28px; }
.legal-content p{ text-align: justify; }

/* ---------- Tabs (Visión / Misión / Valores) ---------- */
.tabs-wrap{
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(0,0,0,.25);
}
.tabs-controls{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f2f3f6;
}
.tabs-controls{ flex-wrap: wrap; }
.tabs-controls li{ flex: 1 1 auto; }
.tabs-controls button{
  width: 100%;
  height: 100%;
  padding: 14px 10px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3em;
  color: var(--color-texto);
  cursor: pointer;
}
.tabs-controls li.active button{
  background: #fff;
  border-bottom-color: var(--color-acento);
  color: var(--color-primario);
}
.tabs-panels{ padding: 25px 30px; color: var(--color-texto); }
.tab-panel{ display: none; }
.tab-panel.clearfix::after{ content: ''; display: table; clear: both; }
.tab-panel.active{ display: block; }
.tab-panel ul{ padding-left: 20px; margin: 0; }
.tab-panel li{ margin-bottom: 10px; }