/* v20j - home page additions: "¿Cómo funciona? / How it works" (4 steps), the ranch medallion on the "Cómo llegar" map
   card (pin + title badge), the tap-to-load Google map under it, and the framing of the new Héctor gallery photo. */

/* ---------- ¿Cómo funciona? / How it works ---------- */
.how-works{--how-ink:#2a1b10;--how-soft:#4a3422;--how-gold:#8a5a22;position:relative;color:var(--how-ink);
  background:radial-gradient(900px 420px at 12% 0%,#fff8e833,transparent 60%),repeating-linear-gradient(0deg,#0000 0 46px,#9b733f12 46px 47px),linear-gradient(#efe3cc,#e6d4b3);
  border-top:1px solid #c79c5c}
html[data-theme="night"] .how-works{--how-ink:#f5e8cf;--how-soft:#dccbad;--how-gold:#e3b76e;
  background:radial-gradient(900px 420px at 12% 0%,#e9bd7514,transparent 60%),repeating-linear-gradient(0deg,#0000 0 46px,#ffffff08 46px 47px),linear-gradient(#17120d,#110d09);border-top-color:#5a3f24}
.how-works .section-head{color:var(--how-gold)}
.how-intro{margin:clamp(30px,4vw,52px) 0 clamp(28px,4vw,48px)}
.how-intro .eyebrow{color:var(--how-gold)}
.how-intro h2{margin:0;font-size:clamp(3rem,6vw,5.8rem);line-height:.92;color:var(--how-ink)}
.how-intro h2 em{color:#9a6a2c}
html[data-theme="night"] .how-intro h2 em{color:#e9bd75}
.how-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:none}
/* the gold "rope" that links the four horseshoes (desktop) */
.how-steps:before{content:"";position:absolute;left:12%;right:12%;top:52px;border-top:2px dashed #c99a55;opacity:.8;pointer-events:none}
.how-step{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:24px 20px 26px;text-align:center;box-sizing:border-box;
  border:1px solid #b99356;border-radius:12px;color:#f7eedb;
  background:radial-gradient(ellipse at 50% 0%,#f0c78022,transparent 60%),repeating-linear-gradient(0deg,#0000 0 38px,#00000038 38px 40px),linear-gradient(160deg,#3a2616,#20170e 70%);
  box-shadow:0 0 0 1px #2a1a0e,0 14px 28px #2a1a0e33}
.how-shoe{position:relative;display:grid;place-items:center;width:62px;height:72px;margin:0 0 14px;flex:none;filter:drop-shadow(1px 3px 2px #0008)}
.how-shoe svg{position:absolute;inset:0;width:100%;height:100%}
.how-shoe__iron{fill:#2c2119;stroke:#e1b35f;stroke-width:5;stroke-linejoin:round}
.how-shoe__nails circle{fill:#f0cf92}
.how-shoe b{position:relative;margin-top:-10px;font:700 1.35rem/1 var(--label);color:#f7d894;text-shadow:0 1px 2px #000}
.how-step h3{margin:0 0 10px;font:500 clamp(1.45rem,1.9vw,1.85rem)/1.12 var(--display);color:#fbefd6;overflow-wrap:anywhere}
.how-step p{margin:0;max-width:30ch;font:400 .98rem/1.55 var(--body);color:#e9dcc2}
@media(max-width:1000px){
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-steps:before{display:none}
}
@media(max-width:560px){
  .how-steps{grid-template-columns:1fr;gap:12px}
  .how-step{display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:14px;align-items:start;text-align:left;padding:18px 16px}
  .how-shoe{grid-row:span 2;width:52px;height:60px;margin:2px 0 0}
  .how-shoe b{font-size:1.15rem}
  .how-step h3{margin:2px 0 6px;font-size:1.4rem}
  .how-step p{max-width:none;font-size:.95rem}
}
@media print{.how-step{background:#fff;color:#33220c;box-shadow:none}.how-step h3,.how-step p{color:#33220c}}

/* ---------- "Cómo llegar": medallion pin + title badge on the ranch map card ---------- */
.map-card .map-placeholder__body{padding:14px 30px 18px}
.map-medal{position:relative;display:block;overflow:hidden;border-radius:50%;border:2px solid #e6bf73;background:#27180c;
  box-shadow:0 0 0 2px #25180f,0 0 18px #f0c77866}
.map-medal img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(1.3) contrast(1.08) saturate(1.12)}
.map-medal:after{content:"";position:absolute;inset:0;background:url("ranch-shine.gif") center/100% 100% no-repeat;mix-blend-mode:screen;opacity:.42;pointer-events:none}
/* the pin: the medallion as the head of a gold map pin, with a soft pulse where it touches the map */
.map-medal-pin{position:relative;display:block;width:74px;height:96px;margin:0 0 8px;filter:drop-shadow(0 6px 6px #000a)}
.map-medal-pin .map-medal{position:absolute;left:3px;top:0;width:68px;height:68px;border-width:3px;z-index:1}
.map-medal-pin:before{content:"";position:absolute;left:50%;top:50px;width:30px;height:30px;transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#f3d08a,#b98336);border-right:2px solid #2a1a0e;border-bottom:2px solid #2a1a0e;border-radius:0 0 6px 0}
.map-medal-pin:after{content:"";position:absolute;left:50%;bottom:0;width:26px;height:8px;margin-left:-13px;border-radius:50%;background:#f0c77855;
  animation:mgrPinPulse 2.4s ease-out infinite}
@keyframes mgrPinPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.map-medal-pin:after{animation:none}}
/* the title badge: small medallion + name */
.map-card .map-placeholder__name{display:inline-flex;align-items:center;gap:9px;margin:0 0 6px;padding:5px 14px 5px 5px;border:1px solid #d9ad6399;border-radius:999px;background:#1d1209cc}
.map-medal--badge{width:28px;height:28px;border-width:1.5px;flex:none}
@media(max-width:460px){
  .map-medal-pin{width:58px;height:76px}
  .map-medal-pin .map-medal{left:2px;width:54px;height:54px}
  .map-medal-pin:before{top:38px;width:24px;height:24px}
  .map-card .map-placeholder__name{font-size:.74rem;letter-spacing:.14em;padding-right:10px}
  .map-medal--badge{width:24px;height:24px}
}

/* ---------- the real Google map, only after a tap ---------- */
.gmap{margin-top:14px}
.gmap-load{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:10px 18px;border:1.5px solid #c99a55;border-radius:10px;
  background:#fff8e866;color:#2a1b10;font:700 .9rem/1.2 var(--label);letter-spacing:.12em;cursor:pointer;transition:background .2s,color .2s}
.gmap-load:hover,.gmap-load:focus-visible{background:#8c5b24;border-color:#8c5b24;color:#fff8ea}
html[data-theme="night"] .gmap-load{background:#ffffff08;color:#f0d9a8}
html[data-theme="night"] .gmap-load:hover,html[data-theme="night"] .gmap-load:focus-visible{background:#d9b778;border-color:#d9b778;color:#1b120a}
.gmap-load svg{width:18px;height:22px;flex:none;fill:currentColor}
.gmap-frame{display:none;position:relative;aspect-ratio:16/9;width:100%;border:2px solid #c99a55;border-radius:14px;overflow:hidden;background:#ece3cf;
  box-shadow:0 0 0 1px #3a2413,0 12px 28px #1d120a33}
.gmap.is-loaded .gmap-frame{display:block}
.gmap-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.gmap-frame:focus{outline:none}
.gmap-frame:focus-visible{outline:3px solid #e1b35f;outline-offset:3px}
@media(max-width:700px){.gmap-frame{aspect-ratio:4/3;border-radius:12px}}

/* ---------- gallery: the Héctor lead photo keeps his hat in frame on phones (1.6:1 tile) ---------- */
.photo-grid button:first-child img{object-position:50% 0}