/* Perez Company - hoja de estilos compartida
   Un solo archivo para todas las paginas: el navegador lo descarga una vez
   y lo reutiliza, asi las paginas siguientes abren al instante. */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1565C0;--blue-dark:#0D47A1;--blue-light:#1E88E5;--sky:#E3F2FD;
  --white:#fff;--gray:#f5f7fa;--text:#1a1a2e;--muted:#5a6472;
  /* Verde de WhatsApp bajado de #25D366 a #0E8A3E: con el claro, el texto blanco
     encima daba 1,98:1 y no se leia al sol. Asi da 4,45:1 y se sigue reconociendo. */
  --wa:#0E8A3E;
}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* espacio para la barra de accion del celular */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;width:100%;background:rgba(13,71,161,.97);backdrop-filter:blur(8px);z-index:999;padding:12px 5%}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto}
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-text{color:#fff;font-size:1.3rem;font-weight:800;letter-spacing:1px}
.logo-text span{color:#90CAF9}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{color:#fff;text-decoration:none;font-size:.95rem;opacity:.85;transition:.2s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1;color:#90CAF9}

/* El boton de llamar necesita ganarle en especificidad a `.nav-links a`,
   si no hereda el texto blanco y queda invisible sobre el fondo blanco. */
.nav-links a.nav-cta,.nav-cta{background:#fff;color:var(--blue-dark);padding:9px 22px;border-radius:50px;font-weight:800;font-size:.9rem;text-decoration:none;transition:.2s;opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.nav-links a.nav-cta:hover,.nav-cta:hover{background:#90CAF9;color:var(--blue-dark);opacity:1}

/* Entre 768 y 1100 px el menu entra justo: se achica antes de romperse */
@media(max-width:1100px){
  .nav-links{gap:15px}
  .nav-links a{font-size:.88rem}
  .nav-links a.nav-cta{padding:8px 16px;font-size:.85rem}
}

/* ---------- HERO ---------- */
.hero{min-height:100vh;background:linear-gradient(135deg,#0D47A1 0%,#1565C0 50%,#1976D2 100%);display:flex;align-items:center;gap:40px;padding:110px 5% 60px;position:relative;overflow:hidden;max-width:1400px;margin:0 auto}
.hero-content{flex:1;z-index:1;min-width:0}
.hero-badge{display:inline-block;background:rgba(255,255,255,.15);color:#fff;padding:6px 16px;border-radius:50px;font-size:.85rem;margin-bottom:20px;border:1px solid rgba(255,255,255,.3)}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem);color:#fff;line-height:1.15;margin-bottom:16px;font-weight:900}
.hero h1 span{color:#90CAF9}
.hero .lead{color:#fff;font-size:1.2rem;font-weight:600;margin-bottom:14px;opacity:.95}
.hero p{color:rgba(255,255,255,.85);font-size:1.08rem;max-width:540px;line-height:1.7;margin-bottom:30px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-truck{flex:1;display:flex;justify-content:center;align-items:center;z-index:1;min-width:0}
.truck-img{width:min(520px,92vw);border-radius:20px;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.45)}

/* hero compacto para las paginas internas */
.hero.hero-int{min-height:auto;padding:130px 5% 70px}
.hero.hero-int h1{font-size:clamp(1.7rem,3.8vw,2.7rem)}

/* ---------- BOTONES ---------- */
.btn-wa,.btn-tel{padding:15px 28px;border-radius:50px;text-decoration:none;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:9px;transition:.2s}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 20px rgba(14,138,62,.45)}
.btn-wa:hover{background:#0B7434;transform:translateY(-2px);box-shadow:0 8px 30px rgba(14,138,62,.55)}
.btn-tel{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.45)}
.btn-tel:hover{background:rgba(255,255,255,.25)}
.btn-solido{background:var(--blue);color:#fff;border:none}
.btn-solido:hover{background:var(--blue-dark)}

/* ---------- MIGAS DE PAN ---------- */
.migas{background:#fff;padding:14px 5%;font-size:.87rem;color:var(--muted);border-bottom:1px solid #e8edf3}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:1280px;margin:0 auto}
.migas li:not(:last-child)::after{content:'/';margin-left:8px;color:#b8c2ce}
.migas a{color:var(--blue);text-decoration:none}
.migas a:hover{text-decoration:underline}

/* ---------- STATS ---------- */
.stats{background:#fff;padding:44px 5%;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;text-align:center;box-shadow:0 4px 30px rgba(0,0,0,.08)}
.stat-item strong{display:block;font-size:2.3rem;font-weight:900;color:var(--blue);line-height:1}
.stat-item span{color:#666;font-size:.95rem;margin-top:6px;display:block}

/* ---------- SECCIONES ---------- */
.section{padding:76px 5%;max-width:1280px;margin:0 auto}
.section-full{max-width:none}
.section-label{text-align:center;color:var(--blue-light);font-weight:700;font-size:.85rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.section h2{text-align:center;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;margin-bottom:14px}
.section p.sub{text-align:center;color:var(--muted);font-size:1.05rem;max-width:680px;margin:0 auto 46px;line-height:1.7}
.gallery-bg{background:var(--gray)}

/* texto corrido de las paginas internas */
.prosa{max-width:760px;margin:0 auto;line-height:1.8;color:#3d4654;font-size:1.03rem}
.prosa h2{text-align:left;font-size:1.5rem;margin:38px 0 14px;color:var(--text)}
.prosa h3{font-size:1.15rem;margin:26px 0 10px;color:var(--blue-dark)}
.prosa p{margin-bottom:16px}
.prosa ul{margin:0 0 18px 22px}
.prosa li{margin-bottom:9px}
.prosa strong{color:var(--text)}

/* ---------- TARJETAS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;border-radius:20px;padding:34px 26px;box-shadow:0 4px 24px rgba(0,0,0,.07);transition:.3s;border:2px solid transparent}
.card:hover{transform:translateY(-6px);border-color:var(--blue-light);box-shadow:0 12px 40px rgba(21,101,192,.15)}
.card-icon{width:54px;height:54px;background:var(--sky);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.55rem}
.card h3{font-size:1.15rem;font-weight:800;margin-bottom:10px}
.card p{color:var(--muted);line-height:1.65;font-size:.95rem}
.card a.card-link{display:inline-block;margin-top:12px;font-weight:700;font-size:.9rem;text-decoration:none}
.card a.card-link:hover{text-decoration:underline}

/* ---------- ZONAS ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.zona-chip{background:#fff;border:1px solid #dbe4ee;color:#425061;padding:9px 17px;border-radius:50px;font-size:.92rem;font-weight:600}
.zona-chip.destacada{background:var(--sky);border-color:#90CAF9;color:var(--blue-dark)}

/* ---------- GALERIA ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.gallery-item-real{border-radius:16px;overflow:hidden;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.15);background:#f0f4f8}
.gallery-item-real img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gallery-item-real .g-label{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.55);color:#fff;padding:5px 12px;border-radius:30px;font-size:.8rem;font-weight:600}

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq{max-width:800px;margin:0 auto}
.faq details{background:#fff;border-radius:14px;margin-bottom:12px;box-shadow:0 2px 14px rgba(0,0,0,.06);overflow:hidden;border:1px solid #e8edf3}
.faq summary{padding:20px 24px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;color:var(--blue-light);font-weight:400;flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details[open] summary{color:var(--blue-dark)}
.faq .faq-body{padding:0 24px 22px;color:var(--muted);line-height:1.75}

/* ---------- CONTACTO ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1100px;margin:0 auto}
.contact-info h2{text-align:left;font-size:1.9rem;font-weight:900;margin-bottom:14px}
.contact-info p{color:#555;line-height:1.7;margin-bottom:26px}
.contact-item{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:18px 22px;background:#fff;border-radius:14px;box-shadow:0 2px 16px rgba(0,0,0,.06);text-decoration:none;color:var(--text);transition:.2s}
.contact-item:hover{background:var(--sky);transform:translateX(4px)}
.contact-item .ci-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.ci-wa{background:var(--wa)}
.ci-tel{background:var(--blue-light)}
.ci-map{background:#EA4335}
.contact-item strong{display:block;font-weight:700}
.contact-item small{color:#888;font-size:.85rem}
.contact-map{background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));border-radius:24px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:10px;padding:30px;text-align:center}
.contact-map svg{opacity:.5;width:58px}
.contact-map p{font-size:1.15rem;font-weight:700}
.contact-map small{opacity:.75;line-height:1.6}

/* ---------- LLAMADO FINAL ---------- */
.cta-final{background:linear-gradient(135deg,#0D47A1,#1976D2);color:#fff;text-align:center;padding:66px 5%}
.cta-final h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;margin-bottom:12px;color:#fff}
.cta-final p{opacity:.9;margin-bottom:28px;font-size:1.05rem;max-width:620px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-final .hero-btns{justify-content:center}

/* ---------- FOOTER ---------- */
footer{background:#0D47A1;color:#fff;padding:46px 5% 34px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;max-width:1100px;margin:0 auto 28px}
.foot-grid h4{font-size:.95rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;color:#90CAF9}
.foot-grid a,.foot-grid p{color:rgba(255,255,255,.78);text-decoration:none;font-size:.93rem;line-height:2;display:block}
.foot-grid a:hover{color:#fff;text-decoration:underline}
.foot-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;max-width:1100px;margin:0 auto}
.foot-bottom .logo-text{font-size:1.35rem;font-weight:900;margin-bottom:8px;display:block}
.foot-bottom p{opacity:.6;font-size:.87rem;line-height:1.7}

/* ---------- BARRA DE ACCION DEL CELULAR ---------- */
.barra-accion{position:fixed;bottom:0;left:0;right:0;z-index:9998;display:none;background:#fff;box-shadow:0 -2px 18px rgba(0,0,0,.16)}
.barra-accion a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 8px;text-decoration:none;font-weight:800;font-size:1rem}
.barra-llamar{background:var(--blue-dark);color:#fff}
.barra-wa{background:var(--wa);color:#fff}

/* ---------- WHATSAPP FLOTANTE (escritorio) ---------- */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9999;width:60px;height:60px;background:var(--wa);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(14,138,62,.55);text-decoration:none;transition:.2s}
.wa-float:hover{transform:scale(1.08)}

/* ---------- LIGHTBOX ---------- */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}
.lightbox.active{display:flex}
.lightbox img{max-width:95vw;max-height:92vh;object-fit:contain;border-radius:10px}

/* ---------- CELULAR ---------- */
@media(max-width:900px){
  .contact-wrap{grid-template-columns:1fr;gap:26px}
  .contact-map{min-height:190px}
}
@media(max-width:768px){
  .hero{flex-direction:column;text-align:center;padding:96px 5% 50px;min-height:auto}
  .hero p{margin:0 auto 26px}
  .hero-btns{justify-content:center}
  .hero-truck{margin-top:32px}
  .nav-links{display:none}
  .cards{grid-template-columns:1fr;gap:15px}
  .card{padding:26px 22px}
  .card p{font-size:1rem}
  .stats{grid-template-columns:1fr 1fr;gap:18px;padding:34px 5%}
  .stat-item strong{font-size:1.7rem}
  .gallery-grid{grid-template-columns:1fr;gap:15px}
  .section{padding:52px 5%}
  .section p.sub{font-size:.98rem;margin-bottom:34px}
  .contact-info h2{font-size:1.45rem}
  .contact-item{padding:15px 18px}
  .barra-accion{display:flex}
  .wa-float{display:none}
  .prosa h2{font-size:1.3rem}
  .cta-final{padding:52px 5%}
}

/* Respeta a quien pidio menos animacion en su sistema */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}