:root{
  --black:#050505;--black2:#111;--red:#e50914;--red2:#b00008;--white:#fff;--muted:#cfcfcf;--gold:#ffd447;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Montserrat,Arial,sans-serif;background:var(--black);color:var(--white)}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.topbar{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:16px 7%;border-bottom:1px solid rgba(255,255,255,.08)}.brand{font-size:24px;font-weight:900;letter-spacing:.3px}.brand-icon{filter:drop-shadow(0 0 12px var(--red))}.topbar nav{display:flex;gap:22px;align-items:center}.topbar nav a{font-weight:700;font-size:14px;color:#eee}.nav-cta{background:var(--red);padding:10px 16px;border-radius:999px}.hero{position:relative;min-height:88vh;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;padding:70px 7%;overflow:hidden;background:radial-gradient(circle at 70% 35%,rgba(229,9,20,.45),transparent 35%),linear-gradient(135deg,#030303 0%,#1a0002 55%,#070707 100%)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.52)),url('assets/programacion-chip.png') center/cover;opacity:.28}.hero-content,.hero-card{position:relative;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-weight:900;color:var(--gold);font-size:13px}.eyebrow.red{color:var(--red)}h1{font-size:clamp(54px,8vw,112px);line-height:.9;margin:12px 0 0;text-transform:uppercase;text-shadow:0 0 34px rgba(229,9,20,.55)}.hero h2{font-size:clamp(32px,4vw,58px);margin:8px 0 18px;text-transform:uppercase}.hero-text{font-size:21px;line-height:1.6;color:#f2f2f2;max-width:650px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:16px 24px;font-weight:900;transition:.25s}.btn-primary{background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 14px 36px rgba(229,9,20,.35)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(229,9,20,.48)}.btn-outline{border:2px solid rgba(255,255,255,.35)}.btn-outline-light{border:2px solid rgba(255,255,255,.5)}.btn-large{font-size:20px;padding:19px 34px}.trust-row{display:flex;gap:16px;flex-wrap:wrap;color:#eee;font-weight:700}.hero-card{border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border-radius:32px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.7)}.hero-card img{border-radius:24px;aspect-ratio:4/5;object-fit:cover}.card-label{background:var(--red);padding:14px 20px;border-radius:0 0 22px 22px;font-weight:900;text-align:center;text-transform:uppercase}.slogan{padding:26px 7%;background:var(--red);text-align:center}.slogan p{margin:0;font-size:24px;font-weight:900}.services,.payment-section,.cta-final{padding:80px 7%}.section-head{max-width:820px;margin:0 auto 38px;text-align:center}.section-head h2,.copy-panel h2,.payment-section h2,.cta-final h2{font-size:clamp(32px,4vw,54px);line-height:1.05;margin:8px 0 18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{padding:32px;border-radius:28px;background:linear-gradient(180deg,#191919,#0c0c0c);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.35)}.service-card.featured{background:linear-gradient(180deg,#300004,#111);border-color:rgba(229,9,20,.45)}.icon{font-size:42px}.service-card h3{font-size:24px;margin:18px 0 10px}.service-card p,.copy-panel p,.payment-section p,.cta-final p{color:var(--muted);line-height:1.7;font-size:17px}.split-section{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding:70px 7%;background:linear-gradient(180deg,#080808,#111)}.split-section.reverse{background:linear-gradient(180deg,#190003,#080808)}.image-panel img{width:100%;height:520px;object-fit:cover;border-radius:32px;border:1px solid rgba(255,255,255,.1);box-shadow:0 26px 80px rgba(0,0,0,.55)}.copy-panel{padding:24px}.checklist{padding:0;margin:22px 0;list-style:none}.checklist li{margin:12px 0;font-weight:800}.checklist li:before{content:"✓";color:#00d26a;margin-right:10px}.payment-section{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:#080808}.payment-icons{display:grid;gap:14px}.payment-icons span{padding:22px;border-radius:20px;background:#161616;font-weight:900;border:1px solid rgba(255,255,255,.08);font-size:20px}.cta-final{text-align:center;background:radial-gradient(circle at center,rgba(229,9,20,.35),transparent 45%),#080808}.socials{display:flex;justify-content:center;gap:14px;margin-top:26px}.socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#1b1b1b;border:1px solid rgba(255,255,255,.12);font-weight:900;font-size:22px}footer{text-align:center;padding:28px;color:#aaa;background:#030303}.floating-call{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#00c853,#079640);font-size:28px;z-index:30;box-shadow:0 12px 38px rgba(0,200,83,.45)}
@media (max-width:900px){.topbar{padding:14px 5%}.topbar nav a:not(.nav-cta){display:none}.hero,.split-section,.payment-section{grid-template-columns:1fr}.hero{padding:48px 5%;min-height:auto}.grid{grid-template-columns:1fr}.services,.payment-section,.cta-final,.split-section{padding:54px 5%}.image-panel img{height:380px}.slogan p{font-size:19px}}


/* ACTUALIZACIÓN FINAL: logo elegante arriba y hero sin tapar textos */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:118px;
  padding:18px 6%;
  background:#030303;
}

.brand-logo{
  display:flex;
  align-items:center;
}

.brand-logo img{
  width:330px;
  height:130px;
  object-fit:cover;
  object-position:center;
  border:2px solid rgba(229,9,20,.75);
  border-radius:12px;
  box-shadow:0 0 26px rgba(229,9,20,.22);
}

.hero{
  min-height:76vh;
  grid-template-columns:.82fr 1.18fr;
  gap:48px;
  padding:52px 6% 46px;
  align-items:center;
  background:
    radial-gradient(circle at 62% 48%,rgba(229,9,20,.36),transparent 38%),
    linear-gradient(135deg,#020202 0%,#120002 60%,#050505 100%);
}

.hero:before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.50)),
    url('assets/programacion-chip.png') center/cover;
  opacity:.18;
}

.hero-content{
  order:1;
}

.hero-card{
  order:2;
  padding:0;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.38);
  box-shadow:0 28px 80px rgba(0,0,0,.72);
}

.hero-card img{
  width:100%;
  height:390px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  border-radius:26px;
}

.card-label{
  display:none;
}

.hero h1{
  font-size:clamp(48px,6.4vw,88px);
  line-height:1.05;
  margin:0 0 24px;
  max-width:760px;
  text-transform:uppercase;
  text-shadow:0 0 28px rgba(255,255,255,.12);
}

.hero h2{
  display:none;
}

.hero-text{
  max-width:620px;
  font-size:23px;
}

.hero-actions{
  margin-top:28px;
}

.trust-row{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,auto);
  justify-content:start;
  gap:34px;
  font-size:18px;
}

@media (max-width:900px){
  .topbar{
    min-height:auto;
    padding:12px 5%;
  }

  .brand-logo img{
    width:205px;
    height:82px;
  }

  .hero{
    grid-template-columns:1fr;
    padding:38px 5%;
  }

  .hero-content,
  .hero-card{
    order:initial;
  }

  .hero-card img{
    height:260px;
  }

  .trust-row{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* CORRECCIÓN DE SUBMENÚS:
   Al presionar Servicios, Emergencias, Pagos o Contacto,
   la sección empieza debajo del logo/header y no queda tapada. */
html{
  scroll-behavior:smooth;
  scroll-padding-top: 170px;
}

section[id]{
  scroll-margin-top: 170px;
}

/* Más aire visual en las secciones para que el título no quede pegado al header */
.services,
.payment-section,
.cta-final,
.split-section{
  padding-top: 105px;
}

/* Header fijo elegante sin tapar los títulos al hacer navegación interna */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999;
}

@media (max-width:900px){
  html{
    scroll-padding-top: 115px;
  }

  section[id]{
    scroll-margin-top: 115px;
  }

  .services,
  .payment-section,
  .cta-final,
  .split-section{
    padding-top: 72px;
  }
}


/* ===== AJUSTE PROFESIONAL DE IMÁGENES Y BOTONES ===== */

/* Evita que las imágenes se deformen y mejora nitidez visual */
img{
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Logo del header: completo, limpio y sin recortes fuertes */
.brand-logo img{
  width:300px !important;
  height:108px !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:6px;
  background:#050505;
}

/* Hero: tarjeta más balanceada para que el arte principal se mire completo */
.hero-card{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-card img{
  width:100% !important;
  height:430px !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#070707;
  padding:8px;
}

/* Paneles internos: misma estructura, pero imagen más profesional */
.image-panel{
  width:100%;
  overflow:hidden;
  border-radius:32px;
}

.image-panel img{
  width:100% !important;
  height:500px !important;
  object-fit:cover !important;
  border-radius:32px;
  filter:contrast(1.04) saturate(1.05);
}

/* Imagen de programación: se ve completa y no recortada */
#emergencia .image-panel img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#050505;
  padding:10px;
}

/* Imagen de persona/cliente: mejor encuadre */
.split-section.reverse .image-panel img{
  object-position:center center !important;
}

/* Imagen cerrajero puerta: enfoca al técnico y la puerta */
.split-section:not(.reverse) .image-panel img{
  object-position:center center !important;
}

/* Botones: ahora son de llamada, no WhatsApp */
.btn-primary,
.nav-cta{
  cursor:pointer;
}

/* El botón flotante ya no debe verse como WhatsApp verde */
.floating-call{
  background:linear-gradient(135deg,var(--red),var(--red2)) !important;
  box-shadow:0 12px 38px rgba(229,9,20,.45) !important;
}

/* Ícono social de llamada también rojo */
.socials .whatsapp-link{
  background:linear-gradient(135deg,var(--red),var(--red2)) !important;
}

/* Responsive: imágenes proporcionadas y sin recortes feos en celular */
@media (max-width:900px){
  .brand-logo img{
    width:190px !important;
    height:70px !important;
  }

  .hero-card img{
    height:280px !important;
    object-fit:contain !important;
    padding:8px;
  }

  .image-panel img{
    height:330px !important;
  }

  #emergencia .image-panel img{
    height:300px !important;
    object-fit:contain !important;
  }
}

@media (max-width:520px){
  .hero-card img{
    height:240px !important;
  }

  .image-panel img{
    height:280px !important;
  }

  #emergencia .image-panel img{
    height:250px !important;
  }
}


/* ===== CORRECCIÓN FINAL SOLICITADA: LOGO MÁS GRANDE Y MUJER COMPLETA ===== */

/* Header más elegante y balanceado */
.topbar{
  min-height:150px !important;
  padding:18px 6% !important;
}

/* Logo Llaves 24.7 más grande, completo y sin verse aplastado */
.brand-logo img{
  width:430px !important;
  height:145px !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:4px !important;
  background:#050505 !important;
  border:2px solid rgba(229,9,20,.85) !important;
  border-radius:14px !important;
  box-shadow:0 0 30px rgba(229,9,20,.30) !important;
}

/* La foto de la mujer no se recorta: muestra cabeza completa y mejor encuadre */
.split-section.reverse .image-panel{
  background:#050505 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:32px !important;
}

.split-section.reverse .image-panel img{
  width:100% !important;
  height:560px !important;
  object-fit:contain !important;
  object-position:center top !important;
  background:#050505 !important;
  padding:0 !important;
  border-radius:32px !important;
}

/* Mantiene las otras imágenes profesionales y proporcionadas */
#emergencia .image-panel img,
.hero-card img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#050505 !important;
}

/* En celulares: logo grande pero sin romper el menú, y mujer completa */
@media (max-width:900px){
  .topbar{
    min-height:auto !important;
    padding:12px 5% !important;
  }

  .brand-logo img{
    width:240px !important;
    height:90px !important;
  }

  .split-section.reverse .image-panel img{
    height:430px !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
}

@media (max-width:520px){
  .brand-logo img{
    width:210px !important;
    height:78px !important;
  }

  .split-section.reverse .image-panel img{
    height:360px !important;
  }
}