.contact-page{--cream:#f5f0e5;--ink:#24241f;--red:#9c2528;--yellow:#ffb42c;background:var(--cream);color:var(--ink)}
.contact-page *{box-sizing:border-box}
.contact-wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.contact-page h1,.contact-page h2,.contact-page h3{font-family:var(--font-serif),Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.02em;margin:0;color:inherit;line-height:1.05}
.contact-page h2{font-size:clamp(2.2rem,4.3vw,4.3rem)}
.contact-page h3{font-size:1.7rem}
.contact-page p{line-height:1.7}
.contact-page .contact-kicker{font-size:.7rem;letter-spacing:.17em;font-weight:800;color:var(--red);margin:0 0 22px}
.contact-hero{text-align:center;padding-block:80px 55px}
.contact-hero h1{font-size:clamp(3.2rem,7.1vw,7rem);line-height:.98}
.contact-hero h1 span{color:var(--red)}
.contact-hero>p:not(.contact-kicker){font-size:1.17rem;margin:26px auto}
.contact-actions{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:52px;padding:15px 24px;background:var(--yellow);color:#171710;border:0;border-radius:8px;font-family:inherit;font-size:.85rem;font-weight:900;letter-spacing:.04em;text-decoration:none;cursor:pointer}
.contact-btn:hover{background:#ffc65c}
.contact-link{font-size:.95rem;font-weight:800;text-decoration:none;border-bottom:1px solid;padding-bottom:5px}
.contact-page a:focus-visible,.contact-page button:focus-visible,.contact-page summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.contact-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:85px}
.contact-routes>a{position:relative;min-height:150px;border:1px solid #e2dbcf;border-radius:16px;background:#fff;padding:22px 46px 20px 24px;text-decoration:none;box-shadow:0 10px 30px #382f2210;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.contact-routes>a>span{font-size:.65rem;letter-spacing:.13em;color:var(--red);font-weight:800}
.contact-routes h2{font-size:1.65rem;margin-top:14px}
.contact-routes p{font-size:.92rem;margin:12px 0 0}
.contact-routes b{position:absolute;right:24px;top:24px;font-size:1.3rem}
.contact-routes>a:hover{transform:translateY(-3px);border-color:#cfc2b1;box-shadow:0 15px 34px #382f2218}
.contact-routes>a:hover h2{color:var(--red)}
.contact-visit{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;padding-bottom:90px;scroll-margin-top:100px}
.contact-visit:has(+ .contact-routes){padding-bottom:45px}
.contact-location-photo{background:#182e29;color:var(--cream);border-radius:24px;overflow:hidden}
.contact-location-photo img{display:block;width:100%;height:260px;object-fit:cover;border-radius:24px}
.contact-address{padding:35px}
.contact-address .contact-kicker{color:var(--yellow)}
.contact-address h2{font-size:clamp(2.3rem,3.8vw,3.5rem)}
.contact-address address{font-style:normal;line-height:1.8;margin:22px 0 26px}
.contact-visit-info{padding:18px 0;align-self:center}
.contact-phone{display:inline-block;font-family:var(--font-serif),sans-serif;font-size:clamp(1.9rem,3vw,2.7rem);margin:22px 0 0;color:var(--red);text-decoration:none}
.contact-visit-info>div>p:not(.contact-kicker){max-width:390px}
.contact-hours{border-top:1px solid #24241f30;padding-top:30px;margin:30px 0}
.contact-hours dl{margin:20px 0 10px}
.contact-hours dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #24241f20}
.contact-hours dd{margin:0;white-space:nowrap;font-weight:700}
.contact-page .contact-small{font-size:.8rem;line-height:1.6;color:#615f59}
.contact-message{background:#eae3d5;padding:85px 0;scroll-margin-top:80px}
.contact-form-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px}
.contact-message-intro h2{font-size:clamp(3.5rem,6vw,6rem)}
.contact-message-intro h2 span{color:var(--red)}
.contact-message-intro>p:not(.contact-kicker){max-width:360px;margin:25px 0}
.contact-callout{border-top:1px solid #24241f40;padding-top:28px;margin-top:35px}
.contact-callout h3{font-size:1.4rem}
.contact-callout a{font-weight:800;color:var(--red)}
.contact-inquiry{background:#fffcf6;border-radius:24px;padding:32px;min-width:0}
.contact-form-note{border-left:3px solid var(--yellow);padding:4px 0 4px 16px;margin-bottom:28px;font-size:.9rem}
.contact-form-note p{margin:7px 0 0}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-wide{grid-column:1/-1}
.contact-inquiry label{display:block;font-size:.85rem;font-weight:700;line-height:1.6}
.contact-inquiry input,.contact-inquiry select,.contact-inquiry textarea{display:block;width:100%;min-width:0;min-height:48px;font:inherit;font-weight:400;color:var(--ink);border:1px solid #c9c2b7;background:#fffdfa;border-radius:8px;padding:12px;margin-top:7px}
.contact-inquiry textarea{resize:vertical}
.contact-inquiry input:focus,.contact-inquiry select:focus,.contact-inquiry textarea:focus{outline:2px solid var(--red);outline-offset:2px}
.contact-optional{font-weight:400;color:#666}
.contact-message-label{margin-top:22px}
.contact-inquiry fieldset{min-width:0;margin:24px 0 0;border:1px solid #d0c9bd;border-radius:12px;padding:18px}
.contact-inquiry fieldset[hidden]{display:none}
.contact-inquiry legend{font-weight:800;font-size:.87rem;padding-inline:5px}
#contact-result:not(:empty){margin-top:22px;border-top:1px solid #c9c2b7;padding-top:20px;overflow-wrap:anywhere}
#contact-result p{margin:8px 0}
.contact-whatsapp-preview{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:.9rem;line-height:1.6;background:#edf5ed;border:1px solid #b7d4bb;border-radius:12px;padding:18px;margin:16px 0}
.contact-whatsapp-button{background:#146c3c;color:#fff;margin-top:12px}
.contact-whatsapp-button:hover{background:#105830}
.contact-faq{padding-block:90px;display:grid;grid-template-columns:.8fr 1.2fr;gap:75px}
.contact-questions details{border-bottom:1px solid #24241f30;padding:20px 0}
.contact-questions details:first-child{border-top:1px solid #24241f30}
.contact-questions summary{font-weight:800;cursor:pointer;line-height:1.5;padding-right:12px}
.contact-questions details>p{font-size:.95rem;margin:15px 0 0}
.contact-questions a{font-weight:700;text-decoration:underline}
.contact-last{background:var(--red);color:var(--cream);text-align:center;padding:65px 24px}
.contact-last .contact-kicker{color:var(--yellow)}
.contact-last .contact-actions{margin-top:28px}
@media(max-width:760px){.contact-wrap{width:calc(100% - 40px)}.contact-hero{padding-block:55px 40px}.contact-hero h1{font-size:clamp(2.65rem,9vw,4.5rem)}.contact-hero>p:not(.contact-kicker){font-size:1.03rem}.contact-routes{grid-template-columns:1fr;gap:14px;margin-bottom:40px}.contact-routes>a{min-height:0;padding:24px 46px 24px 22px}.contact-visit,.contact-form-layout,.contact-faq{grid-template-columns:1fr;gap:35px}.contact-visit{padding-bottom:50px}.contact-address{padding:26px}.contact-location-photo img{height:220px}.contact-visit-info{padding:0}.contact-message{padding-block:50px}.contact-message-intro h2 br{display:none}.contact-message-intro h2{font-size:3rem;max-width:430px}.contact-message-intro h2 span::before{content:' '}.contact-inquiry{padding:24px 20px}.contact-fields{gap:16px}.contact-faq{padding-block:55px}.contact-phone{font-size:2.1rem}.contact-last h2{font-size:2.8rem}}
@media(max-width:400px){.contact-fields{grid-template-columns:1fr}.contact-hours dl>div{font-size:.88rem}.contact-inquiry{padding:22px 16px}.contact-hero h1{font-size:2.6rem}}

/* Quiet Mexican-inspired details that guide the contact journey. */
.contact-page { --green:#1d6a4b; overflow:hidden; }
.contact-hero {
  position:relative;
  isolation:isolate;
  padding-top:104px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,180,44,.14) 0 2px, transparent 2.5px) 0 0 / 26px 26px;
}
.contact-hero::before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  left:50%;
  width:100vw;
  height:22px;
  transform:translateX(-50%);
  background:repeating-conic-gradient(from 45deg at 50% 0,#a91f2a 0 25%,#f5ad27 0 50%,#1d6a4b 0 75%,#f3dfbd 0 100%) 0 0 / 72px 30px;
}
.contact-hero::after {
  content:"HOLA";
  position:absolute;
  z-index:-1;
  right:-.03em;
  bottom:-.18em;
  color:rgba(156,37,40,.045);
  font-family:var(--font-serif),Impact,sans-serif;
  font-size:clamp(8rem,20vw,17rem);
  line-height:.8;
  pointer-events:none;
}
.contact-hero>* { position:relative; z-index:2; }

.contact-location-photo {
  position:relative;
  border-top:8px solid var(--yellow);
  box-shadow:0 18px 38px rgba(24,46,41,.14);
}
.contact-location-photo::after {
  content:"";
  position:absolute;
  top:252px;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(90deg,var(--red) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--green) 66.66%);
}
.contact-address {
  background:
    radial-gradient(circle at 90% 80%,rgba(255,180,44,.13) 0 2px,transparent 2.5px) 0 0 / 22px 22px;
}

.contact-routes>a { overflow:hidden; border-top-width:6px; }
.contact-routes>a:nth-child(1) { border-top-color:var(--red); }
.contact-routes>a:nth-child(2) { border-top-color:var(--yellow); }
.contact-routes>a:nth-child(3) { border-top-color:var(--green); }
.contact-routes>a::after {
  content:"";
  position:absolute;
  right:-23px;
  bottom:-23px;
  width:72px;
  height:72px;
  border:10px double currentColor;
  border-radius:50%;
  opacity:.045;
}

.contact-message {
  position:relative;
  border-top:8px solid var(--green);
  background:
    linear-gradient(rgba(234,227,213,.92),rgba(234,227,213,.92)),
    radial-gradient(circle,#9c2528 0 2px,transparent 2.5px) 0 0 / 28px 28px;
}
.contact-message::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(90deg,var(--red) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--green) 66.66%);
}
.contact-inquiry {
  position:relative;
  border:1px solid rgba(156,37,40,.12);
  border-top:7px solid var(--yellow);
  box-shadow:0 18px 42px rgba(63,48,24,.1);
}
.contact-inquiry::before,
.contact-inquiry::after {
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border-color:var(--red);
  opacity:.55;
}
.contact-inquiry::before { top:16px; right:16px; border-top:3px solid; border-right:3px solid; }
.contact-inquiry::after { bottom:16px; left:16px; border-bottom:3px solid; border-left:3px solid; }

.contact-faq { position:relative; }
.contact-faq::before {
  content:"03 / QUICK ANSWERS";
  position:absolute;
  top:48px;
  right:0;
  color:rgba(156,37,40,.08);
  font-family:var(--font-serif),Impact,sans-serif;
  font-size:clamp(4rem,8vw,7rem);
  line-height:1;
  pointer-events:none;
}
.contact-questions details { position:relative; padding-left:18px; }
.contact-questions details::before {
  content:"";
  position:absolute;
  left:0;
  top:26px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--yellow);
}
.contact-questions details[open]::before { background:var(--green); }

.contact-last { position:relative; border-top:8px solid var(--yellow); overflow:hidden; }
.contact-last::before {
  content:"";
  position:absolute;
  top:18px;
  left:0;
  right:0;
  height:10px;
  opacity:.65;
  background:repeating-linear-gradient(90deg,#f4b438 0 46px,#1d6a4b 46px 92px,#f5f0e5 92px 138px);
}

@media(max-width:760px){
  .contact-hero{padding-top:78px}
  .contact-hero::before{height:18px;background-size:54px 24px}
  .contact-hero::after{bottom:0;font-size:34vw}
  .contact-location-photo::after{top:212px}
  .contact-routes>a{border-top-width:5px}
  .contact-message{border-top-width:6px}
  .contact-faq::before{top:20px;font-size:18vw}
  .contact-last{padding-top:78px}
}
