/* v20m drop-in for proof.mendezgoldenranch.com/ranch/photos/ ("Buscar mis fotos"): the 4 "how it works" steps become
   wooden cards (real wood, gold trim, depth), matching the main site's tier and team cards. Load AFTER ranch-photos.css.
   Needs /static/ultra-latin-400.woff2 and /static/ranch-wood-real.webp (both shipped next to this file). */
@font-face{font-family:"Ultra";font-style:normal;font-weight:400;font-display:swap;src:url("/static/ultra-latin-400.woff2") format("woff2")}
#how .steps{gap:clamp(16px,2vw,26px)!important;align-items:stretch}
#how .steps article{position:relative;border:1px solid #d9b778!important;border-radius:16px;padding:clamp(26px,2.4vw,34px) clamp(20px,2vw,28px) clamp(28px,2.4vw,34px)!important;color:#efe3cb;
  background:radial-gradient(120% 60% at 50% 0%,rgba(240,207,146,.18),rgba(240,207,146,0) 62%),linear-gradient(180deg,rgba(43,27,16,.74) 0%,rgba(29,19,12,.88) 42%,rgba(22,16,11,.94) 100%),url("/static/ranch-wood-real.webp") center/cover,#1b120b!important;
  box-shadow:inset 0 0 0 5px rgba(23,19,15,.55),inset 0 0 0 6px rgba(217,183,120,.34),0 26px 48px -22px rgba(0,0,0,.82),0 0 32px -10px rgba(217,183,120,.3)!important}
#how .steps article::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 16px 16px,#fff1c8 0 1.5px,#d9b778 2px 4px,#6b4a1e 4.6px,rgba(0,0,0,0) 5.5px),radial-gradient(circle at calc(100% - 16px) 16px,#fff1c8 0 1.5px,#d9b778 2px 4px,#6b4a1e 4.6px,rgba(0,0,0,0) 5.5px),
             radial-gradient(circle at 16px calc(100% - 16px),#fff1c8 0 1.5px,#d9b778 2px 4px,#6b4a1e 4.6px,rgba(0,0,0,0) 5.5px),radial-gradient(circle at calc(100% - 16px) calc(100% - 16px),#fff1c8 0 1.5px,#d9b778 2px 4px,#6b4a1e 4.6px,rgba(0,0,0,0) 5.5px)}
#how .steps article:hover{background-color:#1b120b!important}
#how .steps b{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;font:400 1.2rem/1 "Ultra",Georgia,serif!important;color:#2a190c!important;
  background:radial-gradient(circle at 35% 30%,#fff1c8,#e6c27f 42%,#a57b3a 78%,#5a3d16);box-shadow:0 0 0 3px #2a190c,0 0 0 4px #d9b778,0 8px 14px rgba(0,0,0,.55)}
#how .steps h3{color:#f7e6c4!important;font:400 clamp(1.1rem,1.4vw,1.35rem)/1.2 "Ultra",Georgia,serif!important;letter-spacing:.01em}
#how .steps p{color:#efe3cb!important;font-size:15px!important;line-height:1.6}
@media (max-width:900px){#how .steps article{border-top:1px solid #d9b778!important}}