/* ============================================================
   DUPAVI — Página «Consultor SEO local» (/consultor-seo-local/)
   Concepto: «proximidad con estructura». Lenguaje de mapa: curvas de
   nivel, pines que caen, ondas de proximidad y una red de ubicaciones.
   Único hero claro de la web (los demás son oscuros).

   - Solo lo propio de esta página (prefijo .loc-). La estructura,
     el acordeón, el formulario, el enlace final y el motor de animaciones
     están en servicios-base.css (prefijo .srv-).
   - El mapa del hero y la red de la cita los añade assets/js/seo-local.js
     (son decoración: no forman parte del texto editable).
   ============================================================ */

:root {
    --loc-ico-map:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z'/%3E%3Cpath d='M15 5.764v15'/%3E%3Cpath d='M9 3.236v15'/%3E%3C/svg%3E");
    --loc-ico-badge:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --loc-ico-scale:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
    --loc-ico-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
    --loc-ico-pin:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --loc-ico-locate:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E");
    --loc-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ritmo vertical (sustituye el hueco genérico de 24px que pone WordPress) */
.loc-hero-main > *,
.loc-hero-card > *,
.loc-thesis .srv-wrap > *,
.loc-thesis-body > * { margin-top: 0 !important; }
.loc-decision-card > * + *,
.loc-scenario-card > * + * { margin-top: 0.85rem !important; }

/* ============================================================
   1 · HERO — claro, con un mapa de proximidad
   ============================================================ */
.loc-hero { overflow: hidden; }
.loc-hero::before {                      /* trama de puntos muy suave, como un plano */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(40, 94, 168, 0.13) 1px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 80%);
            mask-image: linear-gradient(100deg, transparent 35%, #000 80%);
}
.loc-hero-cols.wp-block-columns {
    align-items: center !important;
    gap: clamp(2.5rem, 6vw, 6rem);
    margin: 0;
}
.loc-hero-main.wp-block-column  { flex-basis: 52% !important; }
.loc-hero-aside.wp-block-column { flex-basis: 48% !important; }

.loc-hero h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.7rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--c-ink);
    margin-bottom: 1.75rem;
    max-width: 14ch;
}
.loc-hero .loc-hero-lead {
    color: var(--c-ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.45;
    max-width: 46ch;
    margin-bottom: 1.1rem;
}
.loc-hero .loc-hero-body {
    font-size: 0.97rem;
    max-width: 54ch;
    margin-bottom: 0;
}
.loc-hero-main > .wp-block-buttons { margin-top: 2.5rem !important; }

/* Tarjeta: mapa arriba y lo que puedes esperar debajo */
.loc-hero-card {
    position: relative;
    overflow: hidden;
    background-color: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.07);
    padding: 0 0 2rem;
}
.loc-map {
    display: block;
    width: 100%;
    height: 210px;
    background-color: #F2F5F9;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 1.75rem !important;
}
.loc-map .m-road    { fill: none; stroke: #FFFFFF; stroke-width: 7; stroke-linecap: round; }
.loc-map .m-contour { fill: none; stroke: rgba(40, 94, 168, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.loc-map .m-ring    { fill: none; stroke: rgba(40, 94, 168, 0.45); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
html:not(.srv-motion) .loc-map .m-ring { opacity: 0.45; }   /* sin animaciones: la onda se ve quieta */
.loc-map .m-pin     { fill: var(--c-action); }
.loc-map .m-pin-dot { fill: #FFFFFF; }
.loc-map .m-shadow  { fill: rgba(17, 24, 39, 0.16); }

.loc-hero-card .loc-card-title,
.loc-hero-card .loc-checks { padding: 0 2rem; }
.loc-hero-card .loc-card-title {
    color: var(--c-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}
.loc-checks {
    list-style: none;
    margin: 0;
}
.loc-checks li {
    position: relative;
    padding-left: 2rem;
    margin: 0 0 1rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--c-muted);
}
.loc-checks li:last-child { margin-bottom: 0; }
.loc-checks li strong { color: var(--c-ink); font-weight: 600; }
.loc-checks li::before {                 /* pin */
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 18px;
    height: 18px;
    background-color: var(--c-action);
    -webkit-mask: var(--loc-ico-pin) center / contain no-repeat;
            mask: var(--loc-ico-pin) center / contain no-repeat;
}

/* ============================================================
   2 · TESIS — centrada, la frase se subraya como con rotulador
   ============================================================ */
.loc-thesis .srv-wrap { text-align: center; }
.loc-thesis h2 {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    color: var(--c-muted);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.loc-thesis .loc-thesis-statement {
    font-size: clamp(1.9rem, 3.8vw, 3.1rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    max-width: 24ch;
    margin: 0 auto clamp(3rem, 6vw, 4.5rem);
    text-wrap: balance;
}
.loc-mark {                              /* subrayado de rotulador (lo pone el JS) */
    background-image: linear-gradient(transparent 64%, rgba(40, 94, 168, 0.16) 64%, rgba(40, 94, 168, 0.16) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.loc-thesis-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    text-align: left;
}
.loc-thesis-body p {
    max-width: none;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 2px solid var(--c-border);
}
.loc-thesis-body p:first-child { border-top-color: var(--c-action); }

/* ============================================================
   3 · DECISIONES — cada una con su pin de mapa
   ============================================================ */
.loc-decisions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.loc-decisions-grid > * { margin: 0 !important; }
.loc-decision-card {
    position: relative;
    background-color: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 2rem 2rem 1.9rem calc(2rem + 42px + 1.4rem);
    transition: border-color 0.4s ease, box-shadow 0.5s ease;
}
.loc-decision-card::before {             /* pin (gota) */
    content: "";
    position: absolute;
    top: 1.85rem;
    left: 2rem;
    width: 42px;
    height: 42px;
    border-radius: 50% 50% 50% 0;
    background-color: var(--c-action);
    transform: rotate(-45deg);
    box-shadow: 0 6px 14px rgba(40, 94, 168, 0.25);
    transition: transform 0.45s var(--loc-bounce);
}
.loc-decision-card::after {              /* icono dentro del pin */
    content: "";
    position: absolute;
    top: calc(1.85rem + 11px);
    left: calc(2rem + 11px);
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    -webkit-mask: var(--loc-ico) center / contain no-repeat;
            mask: var(--loc-ico) center / contain no-repeat;
    transition: transform 0.45s var(--loc-bounce);
}
.loc-icon-map      { --loc-ico: var(--loc-ico-map); }
.loc-icon-badge    { --loc-ico: var(--loc-ico-badge); }
.loc-icon-scale    { --loc-ico: var(--loc-ico-scale); }
.loc-icon-building { --loc-ico: var(--loc-ico-building); }
.loc-icon-pin      { --loc-ico: var(--loc-ico-pin); }
.loc-icon-locate   { --loc-ico: var(--loc-ico-locate); }
.loc-decision-card h3 { font-size: 1.12rem; margin-bottom: 0; padding-top: 0.15rem; }
.loc-decision-card p  { font-size: 0.93rem; max-width: none; }

/* ============================================================
   CITA — banda oscura con una red de ubicaciones
   ============================================================ */
.loc-quote.wp-block-quote {
    max-width: 900px;
    margin: 0 auto !important;
    padding: 0;
    border: none;
    text-align: center;
}
.loc-network {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 640px;
    margin: 0 auto 2.75rem;
}
.loc-network::before {                   /* la línea que une las ubicaciones */
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    border-top: 1px dashed rgba(126, 179, 247, 0.45);
    transform-origin: left center;
}
.loc-node {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #7EB3F7;
    box-shadow: 0 0 0 5px rgba(126, 179, 247, 0.15), 0 0 16px rgba(126, 179, 247, 0.5);
}
.loc-quote.wp-block-quote p {
    max-width: none;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* ============================================================
   4 · ESCENARIOS — los pines crecen con el negocio
   ============================================================ */
.loc-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.loc-scenarios-grid > * { margin: 0 !important; }
.loc-scenario-card {
    --loc-cols: 1;
    --loc-rows: 1;
    position: relative;
    background-color: var(--c-bg);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 2rem 2rem 1.9rem;
    transition: border-color 0.4s ease, background-color 0.4s ease;
}
.loc-scenario-card::before {             /* ubicaciones: 1 → varias → red → expansión */
    content: "";
    display: block;
    width: calc(var(--loc-cols) * 16px);
    height: calc(var(--loc-rows) * 16px);
    margin-bottom: 1.5rem;
    background-image: radial-gradient(circle, var(--c-action) 0 4px, transparent 4.6px);
    background-size: 16px 16px;
}
.loc-scenario-card:nth-child(2) { --loc-cols: 3; }
.loc-scenario-card:nth-child(3) { --loc-cols: 3; --loc-rows: 2; }
.loc-scenario-card:nth-child(4) { --loc-cols: 7; --loc-rows: 2; }
.loc-scenario-card:nth-child(4)::before {
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
            mask-image: linear-gradient(to right, #000 55%, transparent);
}
.loc-scenario-card h3 { font-size: 1.12rem; margin-bottom: 0; }
.loc-scenario-card p  { font-size: 0.93rem; max-width: none; }

/* ============================================================
   MÓVIL Y TABLET
   ============================================================ */
@media (max-width: 1080px) {
    .loc-thesis-body { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
    .loc-hero-main.wp-block-column,
    .loc-hero-aside.wp-block-column { flex-basis: 100% !important; }
    .loc-hero h1 { max-width: none; }
    .loc-map { height: 170px; }
    .loc-hero-card .loc-card-title,
    .loc-hero-card .loc-checks { padding: 0 1.5rem; }
    .loc-decisions-grid,
    .loc-scenarios-grid { grid-template-columns: 1fr; }
    .loc-decision-card { padding: calc(1.6rem + 42px + 1.1rem) 1.5rem 1.6rem; }
    .loc-decision-card::before { top: 1.6rem; left: 1.5rem; }
    .loc-decision-card::after  { top: calc(1.6rem + 11px); left: calc(1.5rem + 11px); }
    .loc-scenario-card { padding: 1.75rem 1.5rem 1.6rem; }
    .loc-scenario-card:nth-child(4) { --loc-cols: 5; }
}

/* ============================================================
   ANIMACIONES PROPIAS — «proximidad con estructura»
   Usan el motor común (servicios-base.css): html.srv-motion, .srv-in,
   fotogramas srv* y fill «backwards».
   ============================================================ */
@keyframes locDrop   { from { opacity: 0; transform: translateY(-60%); } to { opacity: 1; transform: none; } }
@keyframes locPinIn  { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes locPinBox { from { opacity: 0; transform: translateY(-26px) rotate(-45deg); } to { opacity: 1; transform: rotate(-45deg); } }
@keyframes locRipple { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes locDraw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes locMark   { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes locNode   { from { opacity: 0.15; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* ── 1 · Hero: el H1 cae línea a línea; en el mapa caen los pines y emiten su onda ── */
html.srv-motion .loc-hero:not(.srv-in) h1,
html.srv-motion .loc-hero:not(.srv-in) .loc-hero-lead,
html.srv-motion .loc-hero:not(.srv-in) .loc-hero-body,
html.srv-motion .loc-hero:not(.srv-in) .wp-block-buttons { opacity: 0; }
html.srv-motion .loc-hero h1 .srv-line-in { animation: locDrop 1.2s var(--ease-premium) calc(200ms + var(--i, 0) * 200ms) backwards; }
html.srv-motion .loc-hero.srv-in .loc-hero-lead     { animation: srvRise 1.3s var(--ease-premium)  700ms backwards; }
html.srv-motion .loc-hero.srv-in .loc-hero-body     { animation: srvRise 1.3s var(--ease-premium)  850ms backwards; }
html.srv-motion .loc-hero.srv-in .wp-block-buttons  { animation: srvRise 1.3s var(--ease-premium) 1000ms backwards; }

html.srv-motion .loc-hero-card:not(.srv-in),
html.srv-motion .loc-hero-card:not(.srv-in) .loc-card-title,
html.srv-motion .loc-hero-card:not(.srv-in) .loc-checks li,
html.srv-motion .loc-hero-card:not(.srv-in) .loc-map .m-pinwrap { opacity: 0; }
html.srv-motion .loc-map .m-contour,
html.srv-motion .loc-map .m-road { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.srv-motion .loc-hero-card.srv-in { animation: srvRise 1.1s var(--ease-premium) backwards; }
html.srv-motion .loc-hero-card.srv-in .loc-map .m-road    { animation: locDraw 1.6s var(--ease-premium) calc(200ms + var(--i, 0) * 200ms) forwards; }
html.srv-motion .loc-hero-card.srv-in .loc-map .m-contour { animation: locDraw 2s var(--ease-premium) calc(300ms + var(--i, 0) * 90ms) forwards; }
html.srv-motion .loc-hero-card.srv-in .loc-map .m-pinwrap { animation: locPinIn 0.8s var(--loc-bounce) calc(1100ms + var(--i, 0) * 260ms) backwards; }
html.srv-motion .loc-hero-card.srv-in .loc-map .m-ring    { animation: locRipple 1.6s ease-out calc(1500ms + var(--i, 0) * 260ms) 1; }
html.srv-motion .loc-hero-card.srv-in .loc-card-title     { animation: srvRise 1.1s var(--ease-premium) 600ms backwards; }
html.srv-motion .loc-hero-card.srv-in .loc-checks li      { animation: srvRise 1.1s var(--ease-premium) calc(800ms + var(--i, 0) * 180ms) backwards; }
html.srv-motion .loc-hero-card.srv-in .loc-checks li::before { animation: locPinIn 0.7s var(--loc-bounce) calc(1000ms + var(--i, 0) * 180ms) backwards; }

/* ── 2 · Tesis: la frase aparece y se subraya como con rotulador ── */
html.srv-motion .loc-thesis:not(.srv-in) h2,
html.srv-motion .loc-thesis:not(.srv-in) .loc-thesis-statement,
html.srv-motion .loc-thesis:not(.srv-in) .loc-thesis-body p { opacity: 0; }
html.srv-motion .loc-thesis.srv-in h2 { animation: srvRise 1.1s var(--ease-premium) backwards; }
html.srv-motion .loc-thesis.srv-in .loc-thesis-statement { animation: srvRise 1.3s var(--ease-premium) 200ms backwards; }
html.srv-motion .loc-thesis:not(.srv-in) .loc-mark { background-size: 0% 100%; }
html.srv-motion .loc-thesis.srv-in .loc-mark { animation: locMark 1.4s cubic-bezier(0.65, 0, 0.35, 1) 900ms backwards; }
html.srv-motion .loc-thesis.srv-in .loc-thesis-body p { animation: srvRise 1.2s var(--ease-premium) calc(1200ms + var(--i, 0) * 200ms) backwards; }

/* ── 3 · Decisiones: la tarjeta sube y su pin cae en su sitio ── */
html.srv-motion .loc-decision-card:not(.srv-in),
html.srv-motion .loc-decision-card:not(.srv-in)::before,
html.srv-motion .loc-decision-card:not(.srv-in)::after { opacity: 0; }
html.srv-motion .loc-decision-card.srv-in         { animation: srvRise 1.2s var(--ease-premium) calc(var(--i, 0) * 170ms) backwards; }
html.srv-motion .loc-decision-card.srv-in::before { animation: locPinBox 0.9s var(--loc-bounce) calc(var(--i, 0) * 170ms + 350ms) backwards; }
html.srv-motion .loc-decision-card.srv-in::after  { animation: locPinIn 0.9s var(--loc-bounce) calc(var(--i, 0) * 170ms + 350ms) backwards; }

/* ── Cita: la red de ubicaciones se enciende y aparece la frase ── */
html.srv-motion .loc-quote:not(.srv-in) .loc-network::before { transform: scaleX(0); }
html.srv-motion .loc-quote:not(.srv-in) .loc-node,
html.srv-motion .loc-quote:not(.srv-in) p { opacity: 0; }
html.srv-motion .loc-quote.srv-in .loc-network::before { animation: srvGrow 1.8s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
html.srv-motion .loc-quote.srv-in .loc-node { animation: locNode 0.8s var(--loc-bounce) calc(var(--i, 0) * 230ms + 150ms) backwards; }
html.srv-motion .loc-quote.srv-in p { animation: srvRise 1.3s var(--ease-premium) 1700ms backwards; }

/* ── 4 · Escenarios: la tarjeta sube y aparecen sus ubicaciones ── */
html.srv-motion .loc-scenario-card:not(.srv-in) { opacity: 0; }
html.srv-motion .loc-scenario-card:not(.srv-in)::before { clip-path: inset(0 100% 0 0); }
html.srv-motion .loc-scenario-card.srv-in { animation: srvRise 1.2s var(--ease-premium) calc(var(--i, 0) * 200ms) backwards; }
html.srv-motion .loc-scenario-card.srv-in::before { animation: srvWipe 1.2s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 200ms + 500ms) backwards; }

/* ── Interacción: ratón en PC / tarjeta del centro de la pantalla en móvil ── */
@media (hover: hover) {
    .loc-decision-card:hover { border-color: rgba(40, 94, 168, 0.35); box-shadow: 0 12px 32px rgba(17, 24, 39, 0.05); }
    .loc-decision-card:hover::before { transform: translateY(-5px) rotate(-45deg); }
    .loc-decision-card:hover::after  { transform: translateY(-5px); }
    .loc-scenario-card:hover { background-color: var(--c-white); border-color: rgba(40, 94, 168, 0.3); }
}
.loc-decision-card.is-focus { border-color: rgba(40, 94, 168, 0.35); }
.loc-decision-card.is-focus::before { transform: translateY(-5px) rotate(-45deg); }
.loc-decision-card.is-focus::after  { transform: translateY(-5px); }
.loc-scenario-card.is-focus { background-color: var(--c-white); border-color: rgba(40, 94, 168, 0.3); }

@media (prefers-reduced-motion: reduce) {
    .loc-decision-card:hover::before { transform: rotate(-45deg); }
    .loc-decision-card:hover::after  { transform: none; }
}