/* gasmovilcr.com — hoja de estilo del sitio público de Gas Móvil (#1468).
   Sin dependencias externas: tipografías del sistema y SVG propio, para que cargue
   rápido también con datos móviles (el sitio se abre casi siempre desde el celular). */

:root{
  --azul:#0b3d6b;
  --azul-osc:#072a4b;
  --azul-claro:#e8f0f8;
  --naranja:#e8622a;
  --naranja-osc:#c94d19;
  --texto:#16202b;
  --texto-suave:#54657a;
  --borde:#dbe3ec;
  --fondo:#ffffff;
  --fondo-alt:#f5f8fb;
  --radio:14px;
  --sombra:0 2px 10px rgba(11,61,107,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--texto);background:var(--fondo);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;font-weight:700;color:var(--azul-osc)}

/* ---------- Cabecera ---------- */
.cab{background:var(--azul);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.cab-in{max-width:1080px;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:.6rem;color:#fff}
.marca:hover{text-decoration:none}
.marca-ico{width:30px;height:30px;fill:var(--naranja);flex:0 0 auto}
.marca-txt{display:flex;flex-direction:column;line-height:1.1}
.marca-txt strong{font-size:1.15rem;letter-spacing:.2px}
.marca-txt small{font-size:.72rem;opacity:.85;letter-spacing:.6px;text-transform:uppercase}
.cab-nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.cab-nav a{color:#fff;font-size:.95rem;font-weight:500;opacity:.92}
.cab-nav a:hover{opacity:1}
.cab-tel{display:inline-flex;align-items:center;gap:.4rem;background:var(--naranja);
  padding:.42rem .85rem;border-radius:999px;font-weight:700}
.cab-tel:hover{background:var(--naranja-osc);text-decoration:none}
.cab-tel svg{width:15px;height:15px;fill:#fff}

/* ---------- Portada ---------- */
.hero{background:linear-gradient(160deg,var(--azul) 0%,var(--azul-osc) 100%);color:#fff;
  padding:3.4rem 1rem 3.8rem}
.hero-in{max-width:1080px;margin:0 auto}
.hero-marca{text-transform:uppercase;letter-spacing:2px;font-size:.78rem;font-weight:700;
  color:var(--naranja);margin-bottom:.7rem}
.hero h1{font-size:clamp(1.7rem,4.6vw,2.9rem);color:#fff;max-width:20ch}
.hero-sub{margin-top:.9rem;font-size:clamp(1rem,2.3vw,1.16rem);opacity:.92;max-width:52ch}
.hero-btns{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero-puntos{margin-top:2rem;display:flex;gap:1.6rem;flex-wrap:wrap;list-style:none;
  font-size:.95rem;opacity:.9}
.hero-puntos li{display:flex;align-items:center;gap:.5rem}
.hero-puntos li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--naranja);flex:0 0 auto}

/* ---------- Botones ---------- */
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;font-weight:700;
  font-size:1rem;border:2px solid transparent;cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{text-decoration:none}
.btn-primario{background:var(--naranja);color:#fff}
.btn-primario:hover{background:var(--naranja-osc);color:#fff}
.btn-secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-secundario:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-ancho{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ---------- WhatsApp y SINPE Móvil ---------- */
.contacto-movil{background:var(--azul-claro);padding:1.5rem 1rem}
.contacto-movil-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap}
.contacto-movil h2{font-size:1.2rem}
.contacto-movil p{margin-top:.2rem;color:var(--texto-suave)}
.contacto-movil-btns{display:flex;gap:.7rem;flex-wrap:wrap}
.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:#128c4b;color:#fff}
.btn-whatsapp:hover{background:#0e703c;color:#fff}
.btn-whatsapp svg{width:19px;height:19px;fill:#fff;flex:0 0 auto}

/* ---------- Secciones ---------- */
.seccion{padding:3.2rem 1rem}
.seccion:nth-of-type(even){background:var(--fondo-alt)}
.seccion-in{max-width:1080px;margin:0 auto}
.seccion-angosta{max-width:680px}
.seccion h2{font-size:clamp(1.4rem,3.4vw,2rem)}
.seccion-sub{margin-top:.6rem;color:var(--texto-suave);max-width:60ch}
.aviso{margin-top:1.4rem;background:var(--azul-claro);border-radius:var(--radio);
  padding:1.1rem 1.2rem;color:var(--texto-suave)}

/* ---------- Productos ---------- */
.grupo{margin-top:2.4rem}
.grupo h3{font-size:1.18rem}
.grupo-nota{color:var(--texto-suave);font-size:.94rem;margin-top:.15rem}
.rejilla{margin-top:1.1rem;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.tarjeta{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1.1rem .9rem 1rem;text-align:center;box-shadow:var(--sombra);
  display:flex;flex-direction:column;align-items:center;gap:.55rem}
.tarjeta-fig{position:relative;height:118px;display:flex;align-items:flex-end;justify-content:center}
.cil{width:84px;height:118px}
.cil-foto{width:118px;height:118px;object-fit:contain}
.cil-cuerpo{fill:var(--azul)}
.cil-cruz{stroke:#fff;stroke-width:5;stroke-linecap:round}
.tarjeta h4{font-size:.98rem;color:var(--texto)}
.btn-pedir{margin-top:auto;background:var(--azul-claro);color:var(--azul);border:none;
  border-radius:999px;padding:.45rem 1rem;font-size:.88rem;font-weight:700;cursor:pointer;
  font-family:inherit}
.btn-pedir:hover{background:var(--azul);color:#fff}

/* ---------- Tienda en línea ---------- */
.seccion-tienda{background:var(--azul-claro) !important}
.tienda-caja{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.tienda-caja p{margin-top:.5rem;color:var(--texto-suave);max-width:48ch}

/* ---------- Formulario ---------- */
.seccion-pedido{background:var(--fondo) !important}
#frm-pedido{margin-top:1.7rem}
.campo{margin-bottom:1rem;display:flex;flex-direction:column}
.campo-fila{display:flex;gap:1rem;flex-wrap:wrap}
.campo-fila .campo{flex:1 1 200px;min-width:0}
.campo-corto{flex:0 0 110px !important}
.campo label{font-size:.9rem;font-weight:600;margin-bottom:.32rem;color:var(--texto)}
.campo label span{color:var(--naranja)}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:1rem;padding:.7rem .85rem;border:1px solid var(--borde);
  border-radius:10px;background:#fff;color:var(--texto);width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(11,61,107,.12)}
.campo input.malo,.campo select.malo{border-color:#d33;box-shadow:0 0 0 3px rgba(211,51,51,.12)}
.campo textarea{resize:vertical}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.letra-chica{margin-top:.8rem;font-size:.84rem;color:var(--texto-suave);text-align:center}
.resultado{margin-top:1.1rem;padding:0;border-radius:var(--radio);font-weight:600;text-align:center}
.resultado.ok{padding:1rem;background:#e7f6ec;color:#17692f;border:1px solid #b9e3c6}
.resultado.error{padding:1rem;background:#fdecec;color:#98211f;border:1px solid #f3c2c1}

/* ---------- Pie ---------- */
.pie{background:var(--azul-osc);color:#cfdcea;padding:2.6rem 1rem 1.6rem;font-size:.93rem}
.pie-in{max-width:1080px;margin:0 auto;display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between}
.pie a{color:#fff}
.pie-nombre{color:#fff;font-weight:700;font-size:1.02rem;margin-bottom:.3rem}
.pie-abajo{max-width:1080px;margin:1.8rem auto 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.14);font-size:.84rem;opacity:.75}
.pie-creditos{max-width:1080px;margin:.5rem auto 0;font-size:.76rem;opacity:.7}

/* ---------- Celular ---------- */
@media (max-width:640px){
  .cab-in{padding:.6rem .85rem}
  .cab-nav{gap:.7rem;width:100%;justify-content:space-between}
  .cab-nav a{font-size:.88rem}
  .hero{padding:2.6rem 1rem 3rem}
  .hero-btns .btn{flex:1 1 100%}
  .hero-puntos{flex-direction:column;gap:.5rem}
  .contacto-movil-btns,.contacto-movil-btns .btn{width:100%}
  .seccion{padding:2.4rem 1rem}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:.8rem}
  .tarjeta-fig{height:100px}
  .cil{width:72px;height:100px}
  .cil-foto{width:100px;height:100px}
  .campo-corto{flex:1 1 100% !important}
  .tienda-caja .btn{width:100%}
}