/* v20f - "Cómo llegar / How to find us" (#como-llegar on the home page), the address line on /plan/ and the footer address.
   CSS + inline SVG only (no image files). Day = parchment, night = dark wood; the map card is wood/gold in both themes. */

/* ---------- home section ---------- */
.directions{--dir-ink:#2a1b10;--dir-soft:#4a3422;--dir-gold:#8a5a22;--dir-line:#b98a4c;
  color:var(--dir-ink);background:
    radial-gradient(1200px 520px at 88% 12%,#fff8e833,transparent 60%),
    repeating-linear-gradient(0deg,#0000 0 46px,#9b733f14 46px 47px),
    linear-gradient(#f4ead6,#ecdcbd);border-top:1px solid #c79c5c}
html[data-theme="night"] .directions{--dir-ink:#f5e8cf;--dir-soft:#dccbad;--dir-gold:#e3b76e;--dir-line:#b99a66;
  background:
    radial-gradient(1100px 520px at 88% 12%,#e9bd7514,transparent 60%),
    repeating-linear-gradient(0deg,#0000 0 46px,#ffffff08 46px 47px),
    linear-gradient(#17120d,#100c08);border-top-color:#5a3f24}
.directions .section-head{color:var(--dir-gold)}
.directions-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(34px,5vw,80px);align-items:center;margin-top:clamp(34px,5vw,60px)}
.directions .eyebrow{color:var(--dir-gold)}
.directions h2{font-size:clamp(3.1rem,6vw,6.2rem);line-height:.92;margin:0 0 30px;color:var(--dir-ink)}
.directions h2 em{color:#9a6a2c}
html[data-theme="night"] .directions h2 em{color:#e9bd75}
.directions-address{display:flex;flex-direction:column;gap:4px;font-style:normal;font:500 clamp(1.25rem,1.8vw,1.55rem)/1.3 var(--display);color:var(--dir-ink);
  padding-left:18px;border-left:3px solid var(--dir-line);margin:0 0 22px}
.directions-address strong{font:700 .9rem var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--dir-gold);margin-bottom:4px}
.directions-note{max-width:470px;margin:0 0 30px;color:var(--dir-soft);line-height:1.6}
.directions-note strong{display:block;color:var(--dir-ink);font-weight:700}
.directions-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:560px}
.directions-actions .gold-button{min-height:54px;padding:10px 16px;text-align:center;line-height:1.2;font-size:.9rem;letter-spacing:.08em}
.directions-alt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 16px;text-align:center;line-height:1.2;
  font:700 .86rem var(--label);letter-spacing:.1em;color:var(--dir-ink);border:1.5px solid var(--dir-line);border-radius:3px;background:#fff8e866;
  transition:background .2s,color .2s,border-color .2s}
.directions-alt:hover,.directions-alt:focus-visible{background:#8c5b24;border-color:#8c5b24;color:#fff8ea}
html[data-theme="night"] .directions-alt{background:#ffffff08;color:#f0d9a8}
html[data-theme="night"] .directions-alt:hover,html[data-theme="night"] .directions-alt:focus-visible{background:#d9b778;border-color:#d9b778;color:#1b120a}
.directions a:focus-visible,.directions button:focus-visible{outline:3px solid #e1b35f;outline-offset:3px}

/* map card: same box before and after the click, so nothing jumps (16:9 desktop, 4:3 phone) */
.directions-map{min-width:0}
.map-frame{position:relative;aspect-ratio:16/9;width:100%;border:2px solid #c99a55;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px #3a2413,0 0 0 5px #e7c58833,0 18px 40px #1d120a40;background:#24170e}
.map-frame:focus{outline:none}
.map-frame:focus-visible{outline:3px solid #e1b35f;outline-offset:4px}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#ece3cf}
.map-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#f6e7c8;
  background:
    radial-gradient(ellipse at 50% 42%,#f0c7801f,transparent 62%),
    repeating-linear-gradient(0deg,#0000 0 62px,#0000004d 62px 64px),
    repeating-linear-gradient(178deg,#ffffff06 0 3px,#00000012 3px 8px,#ffffff04 8px 13px),
    linear-gradient(135deg,#4a2f1b,#2f1e12 55%,#22160d)}
.map-art{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.map-art__minor path{stroke:#e2bd7c22;stroke-width:1;stroke-dasharray:3 5}
.map-art__roads path{stroke:#dcae6247;stroke-width:3}
.map-art__plots rect{stroke:#e2bd7c24;stroke-width:1;fill:#e2bd7c0a}
.map-placeholder__body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 34px;max-width:92%;
  background:radial-gradient(closest-side,#1d1209e6 55%,#1d120900);border-radius:50%}
.map-pin{width:44px;height:58px;margin-bottom:10px;fill:#d9ad63;stroke:#2a1a0e;stroke-width:2;filter:drop-shadow(0 4px 4px #0007)}
.map-pin circle{fill:#2a1a0e;stroke:#f3d69c;stroke-width:2}
.map-placeholder__name{margin:0 0 4px;font:700 .86rem var(--label);letter-spacing:.2em;text-transform:uppercase;color:#e8c27f}
.map-placeholder__addr{margin:0 0 18px;font:500 clamp(1.1rem,1.7vw,1.45rem)/1.25 var(--display);color:#fbf1dc}
.map-placeholder__addr span{white-space:nowrap}
.map-placeholder .map-load{min-height:48px;padding:0 26px;font-size:.92rem}
.map-note{margin:12px 2px 0;font-size:.84rem;line-height:1.45;color:var(--dir-soft)}

@media(max-width:900px){
  .directions-layout{grid-template-columns:1fr}
  .directions-actions{max-width:none}
}
@media(max-width:700px){
  .map-frame{aspect-ratio:4/3;border-radius:12px}
  .directions h2{font-size:clamp(3rem,13vw,4.4rem)}
}
@media(max-width:460px){
  .directions-actions{grid-template-columns:1fr;gap:10px}
  .map-placeholder__body{padding:12px 14px}
  .map-pin{width:36px;height:48px;margin-bottom:8px}
  .map-placeholder__addr{font-size:1.08rem;margin-bottom:14px}
}

/* ---------- footer address (home + /plan/) ---------- */
footer .footer-address{font-size:.86em;letter-spacing:.08em;opacity:.88;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(max-width:700px){footer .footer-address{font-size:1em;letter-spacing:.06em}}
footer .footer-address:hover,footer .footer-address:focus-visible{opacity:1;color:var(--gold)}

/* ---------- /plan/: one compact address line in the contact aside ---------- */
.plan-assurance .plan-where{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:none;margin:4px 0 0;padding-top:14px;
  border-top:1px solid #c99a5555;font-size:.9rem;line-height:1.45}
.plan-where__pin{width:14px;height:19px;flex:none;fill:#d9ad63;stroke:none}
.plan-where__pin circle{fill:#2a1a0e}
.plan-where__addr{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.plan-assurance .plan-where a{font:700 .86rem var(--label);letter-spacing:.1em;border-bottom:1px solid currentColor;padding:2px 0;color:#e2b56a}
.plan-where__note{opacity:.85}
/* the booking board is dark wood in both themes: keep the contact aside readable in the day theme too */
html:not([data-theme="night"]) .plan-board .plan-assurance{color:#ebd4ac}
html:not([data-theme="night"]) .plan-board .plan-assurance>span{color:#e1b35f}
html:not([data-theme="night"]) .plan-board .plan-assurance a{border-bottom-color:#c99a55}