*{box-sizing:border-box}
:root{
  --navy:#08296b;
  --blue:#0f61c8;
  --green:#16a33b;
  --green-dark:#0c7a2c;
  --text:#142d54;
  --muted:#66758b;
  --line:#d7e0ea;
  --surface:#ffffff;
  --page:#eef5fa;
  --shadow:0 18px 45px rgba(26,63,105,.13);
}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
.shell{width:min(1180px,92%);margin:auto}

.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e2e8ef}
.header-row{height:88px;display:flex;align-items:center;gap:24px}
.brand{width:205px;flex:0 0 205px;position:relative}
.brand img{width:100%;height:78px;object-fit:contain}
.brand::after{
  content:"";position:absolute;width:56px;height:56px;left:69px;top:7px;
  border:3px solid transparent;border-top-color:#0f61c8;border-right-color:#16a33b;
  border-bottom-color:rgba(15,97,200,.25);border-left-color:rgba(22,163,59,.25);
  border-radius:50%;animation:spin 4.8s linear infinite;pointer-events:none
}
.main-nav{display:flex;align-items:center;gap:17px;margin-left:auto;font-size:.67rem;font-weight:800;text-transform:uppercase}
.main-nav a{padding:34px 0 11px;border-bottom:3px solid transparent;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:var(--blue);border-bottom-color:var(--blue)}
.header-whatsapp{background:var(--green);color:#fff;padding:14px 20px;border-radius:8px;font-weight:900}
.menu-button{display:none;margin-left:auto;background:none;border:0;width:40px}
.menu-button span{display:block;height:3px;background:var(--navy);margin:6px 0;border-radius:4px}

.hero{position:relative;overflow:hidden;min-height:450px;background:linear-gradient(180deg,#f7fbff,#edf6fb);display:flex;align-items:center}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.98),rgba(255,255,255,.7) 35%,transparent 70%),
    linear-gradient(90deg,rgba(255,255,255,.36),transparent 25%,transparent 75%,rgba(255,255,255,.30));
}
.hero-hat{
  position:absolute;left:-95px;bottom:-72px;width:430px;height:345px;
  background:url("../assets/contacto/hat.png") center/cover no-repeat;opacity:.40;
  -webkit-mask-image:linear-gradient(to right,#000 48%,rgba(0,0,0,.76) 73%,transparent 100%),linear-gradient(to top,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 48%,rgba(0,0,0,.76) 73%,transparent 100%),linear-gradient(to top,#000 76%,transparent 100%);
  mask-composite:intersect;
}
.hero-foliage{
  position:absolute;right:-40px;top:-25px;width:320px;height:300px;
  background:
    radial-gradient(ellipse at 65% 20%,rgba(74,129,55,.18) 0 18%,transparent 19%),
    radial-gradient(ellipse at 45% 42%,rgba(74,129,55,.14) 0 16%,transparent 17%),
    radial-gradient(ellipse at 75% 62%,rgba(74,129,55,.12) 0 15%,transparent 16%);
  transform:rotate(-12deg)
}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:740px}
.hero-icon{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin:0 auto 12px}
.hero-kicker{font-weight:900;text-transform:uppercase;color:var(--blue);font-size:.78rem;letter-spacing:.04em}
.hero h1{font-size:clamp(3.2rem,5.2vw,5.7rem);line-height:.95;margin:8px 0 8px;color:var(--navy);letter-spacing:-.04em}
.green-rule{width:52px;height:4px;background:var(--green);border-radius:10px;margin:0 auto 16px}
.hero p{max-width:680px;margin:0 auto;color:#3f526f;line-height:1.65;font-size:1rem}
.hero p strong{color:var(--green-dark)}
.hero-features{display:flex;justify-content:center;gap:0;margin-top:28px}
.hero-feature{display:flex;align-items:center;gap:10px;padding:0 26px;border-right:1px solid #b7c7d5;font-size:.82rem;line-height:1.4;text-align:left}
.hero-feature:last-child{border-right:0}
.feature-icon{font-size:1.8rem;color:var(--blue)}

.contact-area{background:var(--page);padding:0 0 0}
.cards-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:16px;transform:translateY(-36px)}
.panel{background:#fff;border:1px solid #dce4ec;border-radius:10px;box-shadow:var(--shadow)}
.contact-panel{padding:34px 40px}
.form-panel{padding:34px 42px}
.small-title{font-size:.78rem;text-transform:uppercase;font-weight:900;color:var(--blue)}
.small-rule{width:24px;height:3px;background:var(--green);margin:10px 0 18px}
.contact-panel h2{margin:0 0 22px;font-size:2rem;line-height:1.18;color:#111}
.contact-panel h2 em{font-style:normal;color:var(--green)}
.contact-list{display:grid}
.contact-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid #cdd8e3}
.contact-item:last-child{border-bottom:0}
.round-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900}
.round-icon.green{background:var(--green)}
.round-icon.blue{background:var(--blue)}
.round-icon.pink{background:linear-gradient(145deg,#d93f9f,#ff7c4a)}
.contact-item b,.contact-item a,.contact-item span,.contact-item small{display:block}
.contact-item b{font-size:.84rem;margin-bottom:3px}
.contact-item a{font-weight:900;color:var(--navy)}
.contact-item small{color:var(--muted);line-height:1.35;margin-top:4px}

.form-panel>p{color:var(--muted);line-height:1.55;margin:0 0 20px}
form{display:grid;gap:14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:.82rem;font-weight:800}
input,textarea{width:100%;border:1px solid #cfd9e3;border-radius:6px;background:#fff;padding:13px 14px;outline:none}
input:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,59,.11)}
textarea{resize:vertical}
.send-button{border:0;border-radius:5px;background:var(--green);color:#fff;padding:15px;font-weight:900;text-transform:uppercase;cursor:pointer}
.send-button:hover{background:var(--green-dark)}
.form-help{text-align:center;color:#4975ad;font-size:.79rem;line-height:1.5}
.form-error{text-align:center;color:#a32424;font-size:.84rem;font-weight:800;min-height:16px}

.pickup-strip{
  transform:translateY(-22px);
  display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(90deg,#eef5fb,#e7f1fa);
  border-radius:10px;box-shadow:0 12px 30px rgba(26,63,105,.08);padding:18px 20px
}
.pickup-block{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:4px 28px}
.pickup-block:first-child{border-right:1px solid #b9c9d7}
.pickup-symbol{font-size:2rem;color:var(--blue)}
.pickup-block b{display:block;text-transform:uppercase;font-size:.82rem}
.pickup-block p{margin:5px 0 0;color:var(--muted);font-size:.9rem;line-height:1.4}

.family-banner{position:relative;overflow:hidden;background:linear-gradient(90deg,#08356f,#074a88);color:#fff;padding:30px 0 26px}
.jaguar{
  position:absolute;left:-20px;bottom:-64px;width:315px;height:260px;
  background:url("../assets/contacto/jaguar.png") center 35%/cover no-repeat;opacity:.9;
  -webkit-mask-image:linear-gradient(to right,#000 48%,rgba(0,0,0,.75) 72%,transparent 100%),linear-gradient(to top,#000 75%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 48%,rgba(0,0,0,.75) 72%,transparent 100%),linear-gradient(to top,#000 75%,transparent 100%);
  mask-composite:intersect;
}
.family-content{position:relative;z-index:1}
.family-heading{text-align:center;margin-left:170px}
.family-heading span{font-size:1.62rem;font-weight:900}
.family-heading strong{display:block;font-family:"Brush Script MT","Segoe Script",cursive;color:#ffd558;font-size:2.35rem;font-weight:400;margin-top:3px}
.family-values{display:grid;grid-template-columns:repeat(4,1fr);margin-left:220px;margin-top:22px}
.family-values>div{display:flex;align-items:center;gap:12px;padding:0 22px;border-right:1px solid rgba(255,255,255,.26)}
.family-values>div:last-child{border-right:0}
.family-values span{font-size:2rem}
.family-values b{font-size:.78rem;line-height:1.45}

.site-footer{background:#063572;color:#fff;padding:44px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.15fr 1fr;gap:38px}
.footer-brand img{width:215px;background:#fff;border-radius:8px;padding:5px}
.site-footer h3{text-transform:uppercase;font-size:.83rem}
.site-footer a,.site-footer span{display:block;color:#dce8f4;font-size:.87rem;margin:8px 0}
.site-footer p{color:#dce8f4;font-size:.88rem;line-height:1.5}
.footer-whatsapp{display:inline-block!important;background:var(--green);color:#fff!important;padding:11px 15px;border-radius:7px;font-weight:900}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:16px;display:flex;justify-content:space-between;gap:20px;color:#dce8f4;font-size:.78rem}

@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1080px){
  .main-nav{gap:10px;font-size:.6rem}
  .header-whatsapp{display:none}
}
@media(max-width:850px){
  .menu-button{display:block}
  .main-nav{display:none;position:absolute;top:88px;left:0;right:0;background:#fff;flex-direction:column;padding:22px 5%;box-shadow:0 16px 32px rgba(0,0,0,.15)}
  .main-nav.open{display:flex}
  .cards-grid,.pickup-strip,.footer-grid{grid-template-columns:1fr}
  .pickup-block:first-child{border-right:0;border-bottom:1px solid #b9c9d7}
  .family-heading,.family-values{margin-left:175px}
  .family-values{grid-template-columns:repeat(2,1fr);gap:18px}
  .family-values>div{border-right:0}
}
@media(max-width:620px){
  .brand{width:155px;flex-basis:155px}
  .brand img{height:72px}
  .brand::after{width:49px;height:49px;left:52px;top:8px;border-width:2.5px}
  .header-row{height:80px}
  .main-nav{top:80px}
  .hero{min-height:490px;padding:55px 0}
  .hero-hat{width:255px;height:205px;opacity:.28}
  .hero-features{flex-direction:column;align-items:center;gap:14px}
  .hero-feature{border-right:0;padding:0}
  .two-col{grid-template-columns:1fr}
  .contact-panel,.form-panel{padding:27px 22px}
  .jaguar{width:210px;height:170px;opacity:.64}
  .family-heading,.family-values{margin-left:0}
  .family-heading{padding-left:118px;text-align:left}
  .family-values{grid-template-columns:1fr 1fr;margin-top:24px}
  .footer-bottom{flex-direction:column}
}


/* ===== v6: faithful reference recreation — remove invented circles ===== */

/* Reference has no floating circular badge above the heading. */
.hero-icon{
  display:none !important;
}

/* Hero benefits are clean text rows with small line checks. */
.hero-features{
  margin-top:30px !important;
}
.hero-feature{
  gap:9px !important;
}
.feature-icon{
  font-size:1rem !important;
  color:var(--green) !important;
  font-weight:900 !important;
}

/* Contact details use clean line icons without circular backgrounds. */
.round-icon{
  display:none !important;
}
.plain-icon{
  width:28px;
  height:32px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  color:var(--blue);
  font-size:1.45rem;
  line-height:1;
  font-weight:900;
  padding-top:2px;
}
.whatsapp-mark{
  color:var(--green);
}
.social-f{
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.35rem;
}

/* Match the flatter, more editorial contact panel from the reference. */
.contact-item{
  grid-template-columns:30px 1fr !important;
  gap:13px !important;
}
.contact-panel,
.form-panel{
  border-radius:8px !important;
}
.contact-panel h2{
  font-size:1.9rem !important;
}

/* Remove decorative circle-like background artifacts entirely. */
.hero::after,
.contact-area::before,
.contact-area::after,
.panel::before,
.panel::after{
  content:none !important;
  display:none !important;
}

/* Tighten dimensions closer to the visual reference. */
.hero{
  min-height:420px !important;
}
.cards-grid{
  grid-template-columns:.70fr 1.30fr !important;
  max-width:1120px;
}
.pickup-strip{
  max-width:1120px;
}
.family-banner{
  min-height:185px;
  display:flex;
  align-items:center;
}


/* ===== v7 — clean the RIGHT contact form only ===== */
/* Remove every decorative circle, dot, badge, pseudo-element,
   radial shape, or floating ornament from the right-side form panel. */

.form-panel,
.form-panel form,
.form-panel label,
.form-panel input,
.form-panel textarea,
.form-panel button,
.form-panel p,
.form-panel div{
  background-image:none !important;
}

.form-panel::before,
.form-panel::after,
.form-panel *::before,
.form-panel *::after{
  content:none !important;
  display:none !important;
}

.form-panel{
  overflow:hidden !important;
  background:#fff !important;
}

.form-panel input,
.form-panel textarea{
  border-radius:6px !important;
  background:#fff !important;
  box-shadow:none;
}

.form-panel input:focus,
.form-panel textarea:focus{
  box-shadow:0 0 0 2px rgba(22,163,59,.10) !important;
}

.form-panel .send-button{
  border-radius:5px !important;
  background:var(--green) !important;
}

/* Ensure no circular controls can appear in the right panel. */
.form-panel [class*="icon"],
.form-panel [class*="circle"],
.form-panel [class*="round"],
.form-panel [class*="badge"]{
  display:none !important;
}


/* ===== v8 — remove the circles opposite the straw hat ===== */
/* These were the radial-gradient circles on the right side of Contáctanos. */
.hero-foliage{
  display:none !important;
  background:none !important;
}

/* Remove any remaining decorative gradients/circles from the right side. */
.hero::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.hero{
  background:linear-gradient(180deg,#f7fbff,#edf6fb) !important;
}


/* v9 - Replace jaguar with elegant palm frond */
.jaguar{display:none !important;}

.footer-palm{
 position:absolute;
 left:-40px;
 bottom:-20px;
 width:460px;
 height:230px;
 background:url("../assets/contacto/palm.png") left center/cover no-repeat;
 opacity:.22;
 -webkit-mask-image:linear-gradient(to right,#000 60%,rgba(0,0,0,.55) 82%,transparent 100%);
 mask-image:linear-gradient(to right,#000 60%,rgba(0,0,0,.55) 82%,transparent 100%);
 pointer-events:none;
}