/* Approved Method card: same faces, controls and state transitions.
   Only directory context and concise readable back copy are adapted. */
.directory-card{--green:#0B0F26;--maize:#EB7202;box-sizing:border-box;aspect-ratio:3/1;width:100%;max-width:1128px;cursor:default;perspective:none;text-align:left;background:transparent;border:0;padding:0;position:relative;box-shadow:rgba(11,15,38,.08) 0 14px 40px;transition:transform .25s,box-shadow .25s,min-height .3s}
.directory-card *{box-sizing:border-box}
.directory-card .area-face{backface-visibility:visible;border-radius:0;display:flex;flex-direction:column;justify-content:flex-end;position:absolute;inset:0;overflow:hidden;will-change:opacity,transform,filter;transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1),filter .62s}
.directory-card .area-front{z-index:2;opacity:1;filter:blur(0);pointer-events:auto;transform:scale(1)}
.directory-card .business-area-cover{width:100%;height:100%;background:linear-gradient(115deg,#0B0F26,#1D2A48);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:clamp(40px,6vw,80px)}
.directory-card .business-area-cover>span{font-size:clamp(38px,7vw,96px);color:#EB7202;font-family:Georgia,serif}
.directory-card .business-area-cover>strong{margin:0;font:400 22px/1.08 Georgia,serif;letter-spacing:normal;max-width:24ch;text-align:right;color:#fff}
.directory-card .area-back{background:linear-gradient(135deg,#0B0F26,#16203D);color:#fff;text-align:center;justify-content:center;padding:38px 72px;z-index:1;opacity:0;filter:blur(2px);pointer-events:none;transform:translateY(8px) scale(.985)}
.directory-card .area-back>strong{color:#EB7202;margin:0 0 20px;font:400 30px/1.08 Georgia,serif}
.directory-card .area-description{max-width:840px;margin:0 auto;font:400 17px/1.62 Arial,Helvetica,sans-serif}
.directory-card .area-back>a{color:#fff;text-decoration:underline;margin-top:12px;font:400 16px/1.5 Arial,Helvetica,sans-serif;align-self:center}
.directory-card .area-toggle{box-sizing:border-box;background:#EB7202 content-box;color:#0B0F26;border:0;border-radius:50%;width:44px;height:44px;padding:6px;display:grid;place-items:center;position:absolute;top:22px;left:22px;cursor:pointer;font:500 20px/1 Arial,Helvetica,sans-serif;transition:background .2s,border-color .2s}
.directory-card .area-toggle:focus-visible,.directory-card .area-back>a:focus-visible{outline:3px solid #fff;outline-offset:4px}
.directory-card .area-toggle:hover{background:#EB7202 content-box}
.directory-card:has(.area-toggle:hover){transform:translateY(-1px);box-shadow:rgba(11,15,38,.12) 0 18px 48px}
.directory-card.is-open .area-front{z-index:1;opacity:0;filter:blur(2px);pointer-events:none;transform:scale(1.018)}
.directory-card.is-open .area-back{z-index:2;opacity:1;filter:blur(0);pointer-events:auto;transform:translateY(0) scale(1)}
.industry-group .industry-lines[id$="-detalle"]{scroll-margin-top:110px}
.directory-no-script{position:relative;top:100%;font-size:16px}
@media(max-width:700px){
 .directory-card .business-area-cover{padding:12px 14px 12px 76px;gap:0;justify-content:flex-start}
 .directory-card .business-area-cover>span{display:none}
 .directory-card .business-area-cover>strong{font-size:17px;line-height:1.1;text-align:left;max-width:none}
 .directory-card.is-open{aspect-ratio:auto;min-height:280px}
 .directory-card .area-back{padding:64px 24px 24px}
 .directory-card .area-back>strong{margin-bottom:10px;font-size:21px}
 .directory-card .area-description{font-size:16px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.directory-card,.directory-card .area-face{transition-duration:.01ms!important}}

.directory-gallery{scroll-margin-top:100px}.directory-gallery>h2{font:400 clamp(38px,3.25vw,52px)/1.1 Georgia,serif;letter-spacing:-.025em;margin:0 0 48px;color:#0B0F26}.directory-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;max-width:1128px;margin:0 auto}.directory-return{display:inline-block;margin-top:28px;color:#0B0F26;font-size:16px}.directory-return:focus-visible{outline:3px solid #0B0F26;outline-offset:5px}.directory-card .directory-no-script{position:relative;top:100%;font-size:16px}
@media(max-width:760px){.directory-gallery>h2{font-size:34px}.directory-gallery{width:calc(100% - 40px)}}
.directory-grid{width:calc(100% - 20px)}@media(max-width:700px){.directory-card.is-open .area-back{position:relative;min-height:280px}}
.directory-card.is-open .area-back .area-description{font-size:17px;line-height:1.62}@media(max-width:700px){.directory-card.is-open .area-back{padding:64px 24px 24px}.directory-card.is-open .area-back .area-description{font-size:16px;line-height:1.5}}

.directory-gallery>h2[id],.industry-group>h2[id]{scroll-margin-top:110px}.directory-gallery>h2:focus-visible,.industry-group>h2:focus-visible{outline:3px solid #0B0F26;outline-offset:5px}
.directory-grid{gap:24px}

@media(max-width:700px){.directory-card.is-open .area-back{position:absolute;min-height:0;padding:68px 24px 20px}}
.directory-card .directory-mobile-summary{display:none}
@media(max-width:700px){.directory-card .directory-desktop-summary{display:none}.directory-card .directory-mobile-summary{display:block}}

/* Requested spacing applies only to the Areas gallery. */
#explorar-areas>.directory-grid{margin-top:48px}
@media(max-width:700px){#explorar-areas>.directory-grid{margin-top:36px}}

/* Compact back copy only; preserve existing Areas gallery spacing and outer card geometry. */
.directory-card .area-back>strong{max-width:28ch;align-self:center;margin-bottom:14px}
.directory-card .area-description{max-width:52ch;width:100%;margin-inline:auto;text-align:center}
.directory-card .area-back>a{max-width:28ch;text-align:center}
@media(min-width:701px) and (max-width:1100px){
 .directory-card .directory-desktop-summary{display:none}
 .directory-card .directory-mobile-summary{display:block}
 .directory-card .area-back{padding:20px 54px}
 .directory-card .area-back>strong{margin-bottom:10px}
 .directory-card .area-description{max-width:36ch}
}
@media(max-width:700px){
 .directory-card.is-open .area-back{padding:62px 30px 18px}
 .directory-card .area-back>strong{max-width:24ch;margin-bottom:10px}
 .directory-card .area-description{max-width:24ch}
}