/* ====== PETRICOR — estilos (versión PHP) ====== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text,#423227);
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.frame{overflow:hidden;background:#ffffff}

/* ---------- HEADER (franja blanca full-width + pill central) ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center}
.nav-curve{position:absolute;top:0;left:0;display:block;pointer-events:none}
.nav{
  position:relative;display:flex;align-items:center;font-weight:500;white-space:nowrap;
  gap:clamp(16px,5vw,var(--nav-gap));
  font-size:clamp(13px,3.6vw,var(--nav-fs));
  padding:var(--nav-pt) clamp(18px,5.5vw,var(--nav-px)) var(--nav-pb);
}
.nav a{white-space:nowrap}
.nav a{transition:opacity .2s}
.nav a:hover{opacity:.7}

/* ---------- HERO ---------- */
.hero{position:relative;width:100%;height:100svh;overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0}
.hero-inner{position:relative;z-index:10;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.hero-badges{margin-bottom:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;background:#fff;padding:8px 20px;box-shadow:0 10px 15px -3px rgba(0,0,0,.18)}
.badge img{height:24px;width:auto;object-fit:contain}
.badge-label{font-size:14px;font-weight:800;letter-spacing:.04em;color:#423227}
.hero-title{margin:0;max-width:64rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;padding:0 8px;font-size:clamp(30px,8.5vw,var(--title-max,72px))}
.hero-title span{display:block}

/* ---------- DIVISOR video / números ---------- */
.hero-divider{width:100%;height:36px;border:0;background:#e7e4dd;margin:0}

/* ---------- STATS ---------- */
.stats{position:relative;z-index:10;padding:0 16px}
.stats-card{
  margin:0 auto;max-width:72rem;display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:20px;row-gap:36px;padding:clamp(36px,7vw,var(--stat-py)) 24px;box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.stat{display:flex;flex-direction:column}
.stat-row{display:flex;align-items:flex-start;gap:12px}
.stat-num{font-weight:800;line-height:.85;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:clamp(30px,8vw,var(--num-max,48px))}
.stat-title-inline{margin:4px 0 0;min-width:0;flex:1;font-size:13px;font-weight:600;line-height:1.15;white-space:pre-line}
.stat-title-below{margin:16px 0 0;font-size:13px;font-weight:600;line-height:1.35;white-space:pre-line}
.stat-desc{margin:16px 0 0;font-size:13px;line-height:1.35}
.stat-title-below + .stat-desc{margin-top:4px}

/* ---------- FEATURES ---------- */
.features{padding:clamp(48px,9vw,var(--feat-py,96px)) 24px}
.features-grid{margin:0 auto;max-width:64rem;display:grid;grid-template-columns:1fr;column-gap:64px;row-gap:48px}
.feature{display:flex;gap:24px}
.feature-icon{display:flex;flex:none;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden}
.feature-title{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.feature-desc{margin:16px 0 0;font-size:13px;line-height:1.55}

/* ---------- STRIP ---------- */
.strip{background:#f3f2ee}
.strip-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.strip-cell{position:relative;overflow:hidden;height:62vw}
.strip-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.strip-cell:hover img{transform:scale(1.06)}

/* ---------- NOSOTROS ---------- */
.nosotros-inner{margin:0 auto;max-width:48rem;padding:clamp(44px,9vw,var(--nos-py,80px)) 24px;text-align:center}
.nosotros-eyebrow{margin:0;font-size:clamp(28px,7vw,36px);font-weight:800}
.nosotros-lead{margin:32px 0 0;font-size:clamp(17px,4.5vw,20px);line-height:1.6}
.nosotros-body{margin-top:40px;display:flex;flex-direction:column;gap:20px;font-size:15px;line-height:1.6}
.nosotros-body p{margin:0}
.nosotros-quote{margin:48px 0 0;font-size:15px;line-height:1.6}
.nosotros-cta-wrap{margin-top:40px}
.nosotros-cta{display:inline-block;border:1px solid;border-radius:6px;padding:8px 24px;font-size:14px;font-weight:500;transition:.2s}
.nosotros-cta:hover{border-color:var(--primary);color:var(--primary)!important}
.nosotros-img{position:relative;width:100%;height:64vw}
.nosotros-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- UBICACIÓN ---------- */
.ubi-head{margin:0 auto;max-width:72rem;padding:clamp(44px,9vw,var(--ubi-py,80px)) 24px}
.ubi-title{margin:0;text-align:center;font-size:clamp(28px,7vw,36px);font-weight:800}
.ubi-map{display:block;position:relative;width:100%;height:72vw}
.ubi-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ubi-coords{padding:24px 0;text-align:center;font-size:14px}
.ubi-pin{font-size:12px}

/* ---------- VIDEO 2 ---------- */
.video2{background:#fff}
.video2-box{position:relative;width:100%;overflow:hidden;height:58vw}
.video2-box video{width:100%;height:100%;object-fit:cover}

/* ---------- GALERÍA ---------- */
.gallery-hero{position:relative;width:100%;height:70vw}
.gallery-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery-grid{display:grid;grid-template-columns:1fr}
.gallery-cell{position:relative;aspect-ratio:4/3;overflow:hidden}
.gallery-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gallery-cell:hover img{transform:scale(1.06)}

/* ---------- CONTACTO ---------- */
.contacto{padding:clamp(48px,9vw,var(--con-py,96px)) 24px}
.contacto-inner{margin:0 auto;max-width:48rem}
.contacto-title{margin:0;text-align:center;font-size:clamp(28px,7vw,36px);font-weight:800;letter-spacing:.04em}
.form-ok{margin:16px 0 0;text-align:center;color:#15803d;font-size:14px}
.contacto-form{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid #a3a3a3;background:transparent;
  padding:20px 0 8px;font-size:14px;font-family:inherit;color:#423227;outline:none;resize:none;
}
.field input:focus,.field textarea:focus{border-color:var(--primary)}
.field label{position:absolute;left:0;top:20px;font-size:14px;color:#737373;pointer-events:none;transition:.2s}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{top:0;font-size:12px;color:var(--primary)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submit-wrap{display:flex;justify-content:center}
.contacto-form button{border:0;cursor:pointer;padding:10px 32px;font-size:14px;font-weight:600;font-family:inherit;transition:opacity .2s}
.contacto-form button:hover{opacity:.9}

/* ---------- FOOTER ---------- */
.footer{padding:clamp(36px,8vw,var(--foot-py,48px)) 24px;border-top:1px solid #f1f1f1}
.footer-inner{margin:0 auto;max-width:64rem;display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.footer-info{font-size:14px;line-height:1.5}
.footer-info h3{margin:0 0 12px;font-size:16px;font-weight:600}
.footer-info p{margin:0}
.footer-info a:hover{text-decoration:underline}

/* ---------- Animaciones ---------- */
@keyframes upIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.anim-up{opacity:0;animation:upIn .9s cubic-bezier(.16,1,.3,1) forwards}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .anim-up,.reveal{opacity:1!important;transform:none!important;animation:none!important}
}

/* ====== DESKTOP (>=768px) ====== */
@media (min-width:768px){
  .stats-card{grid-template-columns:repeat(4,1fr);column-gap:48px;padding-left:64px;padding-right:64px}
  .features-grid{grid-template-columns:repeat(2,1fr);row-gap:80px}
  .feature{align-items:flex-start}
  .strip-cell{height:var(--strip-h,996px)}
  .strip--wider .strip-grid{grid-template-columns:1fr 1fr 1fr 3.5fr}
  .strip:not(.strip--wider) .strip-grid{grid-template-columns:repeat(4,1fr)}
  .nosotros-img{height:var(--nos-img-h,420px)}
  .ubi-map{height:var(--map-h,480px)}
  .video2-box{height:var(--vid-h,600px)}
  .gallery-hero{height:var(--gal-h,540px)}
  .gallery-grid{grid-template-columns:repeat(var(--gal-cols,3),1fr)}
  .contacto-form{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:640px) and (max-width:767px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}