/* Serviamed · dirección clara — v3
   Más redonda y con movimiento, menos caja y menos techy: fuera la monoespaciada,
   radios grandes, píldoras, y el scrim medido sobre los píxeles reales de cada foto. */
:root{
/* Flecha y estrella como máscara: heredan currentColor y evitan SVG suelto en el marcado. */
--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21M16 1l6 6-6 6'/%3E%3C/svg%3E");
--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
--sv-deep:#014248;
--sv-deeper:#013238;
--sv-wash:#EAF9FB;
--sv-wash2:#CDF0F4;
--sv-line:rgba(255,255,255,.2);
--sv-line-d:rgba(1,66,72,.14);
--sv-dim:rgba(255,255,255,.84);
--sv-dim-d:var(--text-muted);
--sv-key:#01ADBB;
--sv-key-mid:#018E99;
--sv-key-solid:#016B74;
--sv-ink:#014248;
--sv-text:#020B33;
--sv-grn:var(--gt-green);
--sv-grn-solid:var(--green-800);
--r-card:28px;
--r-panel:32px;
--r-media:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:clamp(20px,4vw,44px);padding-right:clamp(20px,4vw,44px)}
h1,h2,h3{margin:0;color:inherit;font-weight:800;letter-spacing:-.03em;line-height:1}
.d1{font-size:clamp(38px,6vw,80px)}
.d2{font-size:clamp(28px,4vw,54px)}
.d3{font-size:clamp(21px,2.4vw,32px)}
.kick{display:inline-flex;align-items:center;gap:11px;font:var(--fw-semibold) 13px/1 var(--font-sans);letter-spacing:.02em;color:var(--green-800)}
.kick::before{content:"";width:26px;height:3px;border-radius:999px;background:var(--sv-grn);flex:0 0 auto}
.on-deep .kick{color:var(--green-300)}
.lead{font:var(--fw-regular) clamp(15px,1.3vw,18px)/1.65 var(--font-sans);color:var(--text-muted);margin:0}
.on-deep .lead{color:var(--sv-dim)}
.hd{margin-bottom:clamp(30px,4vw,48px);max-width:62ch}
.hd h2{margin-top:18px}
.hd .lead{margin-top:20px;max-width:56ch}
.hdcta{margin-top:24px}

/* ---------- nav ---------- */
.gbar{background:var(--neutral-900);font:var(--fw-medium) 12px/1 var(--font-sans);color:rgba(255,255,255,.72)}
.gbar .in{display:flex;align-items:center;gap:16px;height:34px}
/* Tipografía y color viven en .gbar, no en el ancla: así el texto se ve igual sea
   <a> o <span>. Grupo Terán no lanza en etapa 1 y ahí es un span. */
.gbar a{color:inherit;transition:color .2s}
.gbar a:hover{color:#fff}
.gbar .gt{font-weight:var(--fw-semibold)}
.gbar .gsis{display:flex;gap:14px;margin-left:auto}
nav.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle)}
nav.top .in{height:78px;display:flex;align-items:center;gap:28px}
nav.top .brand img{height:42px;width:auto}
nav.top .links{display:flex;gap:6px;margin-left:auto}
nav.top .links a{padding:9px 15px;border-radius:999px;font:var(--fw-semibold) 13px/1 var(--font-sans);color:var(--sv-dim-d);transition:background .18s,color .18s}
nav.top .links a:hover{background:var(--sv-wash);color:var(--sv-key-solid)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;border-radius:999px;font:var(--fw-semibold) 14px/1 var(--font-sans);border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn-key{background:var(--sv-key-solid);color:#fff;border-color:var(--sv-key-solid)}
.btn-key:hover{background:var(--sv-ink);border-color:var(--sv-ink)}
.btn-grn{background:var(--sv-grn-solid);color:#fff;border-color:var(--sv-grn-solid)}
.btn-grn:hover{background:var(--green-900);border-color:var(--green-900)}
.btn-wht{background:#fff;color:var(--sv-ink);border-color:#fff}
.btn-lg{height:58px;padding:0 32px;font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(120% 90% at 12% 0%,var(--sv-wash) 0%,#fff 62%);padding:clamp(40px,5.5vw,72px) 0 0}
.hero .in{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{color:var(--sv-text);margin-top:22px}
.rot{display:block;position:relative;height:1.14em;overflow:hidden;margin-top:.04em}
.rot b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:800;color:var(--sv-key-solid);opacity:0;transform:translateY(74%) rotate(2deg);transition:opacity .46s cubic-bezier(.3,1.1,.4,1),transform .46s cubic-bezier(.3,1.1,.4,1)}
.rot b.on{opacity:1;transform:none}
.rot b.out{opacity:0;transform:translateY(-66%) rotate(-2deg)}
.hero .sub{margin:26px 0 0;max-width:43ch}
.hero .shot{position:relative;border-radius:var(--r-panel);overflow:hidden;aspect-ratio:5/6;background:var(--sv-wash2);box-shadow:var(--shadow-lg)}
.hero .shot img{width:100%;height:100%;object-fit:cover}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(32px,4vw,52px);padding-bottom:clamp(40px,5vw,64px)}
.strip div{position:relative;overflow:hidden;background:#fff;border:1px solid var(--sv-line-d);border-radius:20px;padding:18px 20px}
.strip div::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sv-key);border-radius:0 999px 999px 0;transition:width .9s var(--ease-out) .25s}
.strip.anim div{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.strip.anim div.on{opacity:1;transform:none}
.strip div.on::after{width:56px}
.strip b{font-variant-numeric:tabular-nums}
.strip b.nb{font-size:clamp(18px,1.7vw,23px);letter-spacing:-.02em}
.strip b{display:block;font-weight:800;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.03em;line-height:1;color:var(--sv-key-solid)}
.strip span{display:block;margin-top:7px;font:var(--fw-medium) 13px/1.35 var(--font-sans);color:var(--sv-dim-d)}

/* ---------- tres caminos ---------- */
.doors{padding-top:clamp(52px,6.5vw,88px);padding-bottom:clamp(52px,6.5vw,88px)}
.doors .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(300px,32vw,420px);padding:clamp(22px,2.4vw,32px);border-radius:var(--r-card);overflow:hidden;background:var(--sv-deep);color:#fff;transition:transform .32s cubic-bezier(.3,1.1,.4,1),box-shadow .32s}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.36;transition:opacity .4s,transform .9s cubic-bezier(.3,1.1,.4,1)}
.door:hover img{opacity:.46;transform:scale(1.05)}
/* Scrim medido: las fotos de sala son casi blancas arriba, por eso el tope arranca alto. */
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,50,56,.58) 0%,rgba(1,50,56,.74) 42%,rgba(1,50,56,.95) 100%)}
.door>*{position:relative;z-index:2}
.door .tag{display:inline-flex;align-self:flex-start;align-items:center;padding:7px 14px;border-radius:999px;background:var(--sv-ink);font:var(--fw-semibold) 12px/1 var(--font-sans);color:#fff;margin-bottom:16px}
.door h3{font-size:clamp(20px,2.1vw,27px);margin-bottom:11px}
.door p{margin:0 0 20px;font:var(--fw-regular) 14px/1.6 var(--font-sans);color:var(--sv-dim);max-width:36ch}
.door .exs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.door .exs span{font:var(--fw-medium) 12px/1 var(--font-sans);padding:8px 12px;border:1px solid var(--sv-line);border-radius:999px;color:var(--sv-dim)}
.door .go{display:inline-flex;align-items:center;gap:9px;font:var(--fw-semibold) 14px/1 var(--font-sans);color:#fff}
.door .go::after{content:"";width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);transition:background .25s,transform .25s}
.door:hover .go::after{background:var(--sv-grn);transform:translateX(4px)}

/* ---------- áreas ---------- */
.areas{background:var(--sv-wash);padding:clamp(52px,6.5vw,88px) 0}
.areas h2{color:var(--sv-text)}
.split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(20px,3vw,44px);align-items:start}
.idx{background:#fff;border-radius:var(--r-card);padding:8px 20px;box-shadow:var(--shadow-sm)}
.idx button{display:flex;align-items:center;gap:14px;width:100%;padding:16px 0;background:none;border:0;border-bottom:1px solid var(--sv-line-d);cursor:pointer;text-align:left;color:var(--sv-text);transition:padding-left .28s cubic-bezier(.3,1.1,.4,1),color .2s}
.idx button:last-child{border-bottom:0}
.idx button .dot{width:9px;height:9px;border-radius:999px;background:var(--neutral-300);flex:0 0 auto;transition:background .2s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.idx button .nm{font-weight:700;font-size:clamp(15px,1.45vw,19px);letter-spacing:-.02em}
.idx button:hover{padding-left:10px}
.idx button[aria-current=true]{color:var(--sv-key-solid)}
.idx button[aria-current=true] .dot{background:var(--sv-grn);transform:scale(1.7)}
.panel{position:sticky;top:100px;background:#fff;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--shadow-md)}
.panel .ph{position:relative;aspect-ratio:16/9;background:var(--sv-wash2)}
.panel .ph img,.ph .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s cubic-bezier(.3,1.1,.4,1)}
.panel .ph img.on,.ph .noimg.on{opacity:1}
.panel .ph .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;background:linear-gradient(180deg,rgba(1,50,56,.55) 0%,rgba(1,50,56,.72) 42%,rgba(1,50,56,.95) 100%);color:#fff}
.panel .ph .cap b{display:block;font-weight:700;font-size:18px;letter-spacing:-.01em}
.panel .ph .cap span{display:block;margin-top:5px;font:var(--fw-medium) 13px/1.4 var(--font-sans);color:rgba(255,255,255,.88)}
.panel .list{padding:clamp(20px,2.2vw,28px)}
.panel .list>p{margin:0 0 18px;font:var(--fw-regular) 15px/1.6 var(--font-sans);color:var(--text-body)}
.panel .list ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.panel .list li{padding:9px 15px;border-radius:999px;background:var(--sv-wash);font:var(--fw-medium) 13px/1.3 var(--font-sans);color:var(--sv-ink)}
.panel .list .foot{margin:18px 0 0;font:var(--fw-regular) 13px/1.6 var(--font-sans);color:var(--sv-dim-d)}

/* ---------- proceso ---------- */
.proc{background:var(--sv-deep);color:#fff;padding:clamp(52px,6.5vw,88px) 0}
.proc h2{color:#fff;margin:18px 0 34px}
/* Un solo carril horizontal. Antes era una rejilla de 8 columnas que en pantallas
   medianas caía a dos filas y las barras quedaban a distinta altura. */
.track{display:flex;gap:8px;margin-bottom:34px}
.track button{flex:1 1 0;min-width:0;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--sv-dim);transition:color .2s}
.track button .bar{display:block;height:4px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin-bottom:10px}
.track button .bar i{display:block;height:100%;width:0;background:var(--sv-grn);border-radius:999px}
.track button[aria-current=true]{color:#fff}
.track button[aria-current=true] .bar i{width:100%;transition:width 5s linear}
.track button.done .bar i{width:100%}
.track button .t{display:block;font:var(--fw-semibold) 12px/1 var(--font-sans);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,48px);align-items:center;min-height:250px}
.stage2 .txt .n{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.14);font:var(--fw-semibold) 12px/1 var(--font-sans);color:#fff}
.stage2 .txt h3{margin:16px 0 12px;font-size:clamp(22px,2.6vw,34px);color:#fff}
.stage2 .txt p{margin:0;max-width:44ch;font:var(--fw-regular) 15px/1.68 var(--font-sans);color:var(--sv-dim)}
.slot{position:relative;aspect-ratio:16/10;border-radius:var(--r-media);border:2px dashed rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;background:rgba(255,255,255,.05)}
.slot span{font:var(--fw-semibold) 14px/1.6 var(--font-sans);color:rgba(255,255,255,.9);letter-spacing:.01em;max-width:30ch}
.slot em{display:block;font-style:normal;margin-top:8px;font:var(--fw-regular) 13px/1.5 var(--font-sans);color:var(--sv-dim)}

/* ---------- marco de reemplazo ----------
   Donde no hay fotografía real se rotula la caja en vez de prestar una imagen
   que no corresponde. Sustituir el archivo y el marco desaparece solo. */
.noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;text-align:center;background:repeating-linear-gradient(135deg,var(--sv-wash) 0 12px,#fff 12px 24px);border:2px dashed var(--sv-key);border-radius:inherit}
.noimg span{font:var(--fw-bold) 12px/1.5 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--sv-ink);max-width:28ch}
.noimg em{display:block;margin-top:8px;font-style:normal;font:var(--fw-regular) 13px/1.5 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--text-body)}
.noimg.dark{background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 12px,rgba(255,255,255,.02) 12px 24px);border-color:rgba(255,255,255,.4)}
.noimg.dark span{color:#fff}
.noimg.dark em{color:var(--sv-dim)}
.door .noimg,.pcard .noimg{position:absolute;inset:0;z-index:0;align-items:flex-start;justify-content:flex-end;padding:16px;border-radius:inherit}
.door .noimg span,.pcard .noimg span{display:inline-block;width:auto;max-width:none;flex:none;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--sv-ink);font-size:11px;letter-spacing:.08em}
.door .noimg em,.pcard .noimg em{display:none}
.door .noimg{border-radius:var(--r-card)}
/* Foto de producto sobre fondo blanco: llena el recuadro como las demás, con algo más de presencia. */
.door.prod img{opacity:.5}
.door.prod:hover img{opacity:.6}

/* ---------- servicio y soporte ---------- */
.serv{padding-top:clamp(52px,6.5vw,88px);padding-bottom:clamp(52px,6.5vw,88px)}
.serv h2{color:var(--sv-text)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.scard{background:var(--sv-wash);border-radius:var(--r-card);padding:clamp(22px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;transition:transform .3s cubic-bezier(.3,1.1,.4,1)}
.scard:hover{transform:translateY(-3px)}
.scard h3{font-size:clamp(17px,1.55vw,20px);color:var(--sv-ink);line-height:1.2}
.scard p{margin:0;font:var(--fw-regular) 14px/1.6 var(--font-sans);color:var(--text-body)}
.sband{margin-top:clamp(16px,2vw,22px);background:var(--sv-text);border-radius:var(--r-card);padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sband b{display:block;font-weight:700;font-size:clamp(17px,1.7vw,22px);color:#fff;letter-spacing:-.02em}
.sband span{display:block;margin-top:6px;font:var(--fw-regular) 14px/1.55 var(--font-sans);color:rgba(255,255,255,.84)}

/* ---------- proyectos ---------- */
.projs{padding-top:clamp(52px,6.5vw,88px);padding-bottom:clamp(52px,6.5vw,88px)}
.projs h2{color:var(--sv-text)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.pcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;padding:22px;color:#fff;background:var(--sv-deep);transition:transform .32s cubic-bezier(.3,1.1,.4,1),box-shadow .32s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.3,1.1,.4,1)}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,50,56,.12) 0%,rgba(1,50,56,.62) 52%,rgba(1,50,56,.95) 100%)}
.pcard>*{position:relative;z-index:2}
.pcard .sc{display:inline-flex;align-self:flex-start;padding:6px 13px;border-radius:999px;background:var(--green-800);font:var(--fw-semibold) 12px/1 var(--font-sans);color:#fff;margin-bottom:12px}
.pcard b{display:block;font-weight:700;font-size:clamp(16px,1.6vw,20px);letter-spacing:-.02em;line-height:1.25}
.pcard span.loc{display:block;margin-top:5px;font:var(--fw-medium) 13px/1.4 var(--font-sans);color:rgba(255,255,255,.86)}

/* ---------- marcas ---------- */
.marcas{background:var(--sv-wash);padding:clamp(52px,6.5vw,88px) 0}
.marcas h2{color:var(--sv-text)}
.mq{margin-top:clamp(26px,3.2vw,40px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq+.mq{margin-top:clamp(18px,2.2vw,30px)}
.mq .lane{display:flex;align-items:center;gap:clamp(26px,3.4vw,54px);width:max-content;animation:mqa 58s linear infinite}
.mq.rev .lane{animation-direction:reverse}
.mq:hover .lane{animation-play-state:paused}
@keyframes mqa{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rlane,.mq .lane{animation:none}.rlane{flex-wrap:wrap;width:auto}}
.mq .lane span{display:flex;align-items:center;justify-content:center;height:62px;flex:0 0 auto}
.mq .lane img{width:auto;object-fit:contain}
/* Marca confirmada sin logotipo todavía: placa con el nombre, mismo peso óptico. */
.mq .lane span.pl{padding:0 18px;border:1px dashed rgba(2,11,51,.24);border-radius:999px;height:40px;font:var(--fw-semibold) 15px/1 var(--font-sans);letter-spacing:-.01em;color:var(--sv-text);white-space:nowrap;opacity:.85}

/* ---------- subencabezado ----------
   Solo cuatro secciones llevan encabezado grande. El resto entra como subsección
   para que la página se lea como cuatro capítulos y no como diez anuncios. */
.subhd{max-width:60ch;margin-bottom:clamp(24px,3vw,36px)}
.subhd h3{font-size:clamp(21px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;color:var(--sv-text)}
.subhd p{margin:12px 0 0;font:var(--fw-regular) clamp(15px,1.4vw,17px)/1.65 var(--font-sans);color:var(--sv-dim-d);max-width:54ch}
.subhd .btn{margin-top:20px}
.on-deep .subhd h3,.serv .subhd h3{color:var(--sv-text)}

.top .links a.shop{padding:7px 14px;border-radius:999px;background:var(--sv-wash);color:var(--sv-ink);font-weight:var(--fw-semibold)}
.top .links a.shop:hover{background:var(--sv-ink);color:#fff}

/* ---------- formas de comprar ---------- */
.buy{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.buy h2{color:var(--sv-text)}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.ways.dos{grid-template-columns:repeat(2,1fr)}
.way{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.6vw,32px);border:1px solid var(--sv-line-d);border-radius:var(--r-card);background:#fff;overflow:hidden;transition:transform .3s cubic-bezier(.3,1.1,.4,1),border-color .25s,box-shadow .3s}
.way:hover{transform:translateY(-4px);border-color:var(--sv-key);box-shadow:var(--shadow-lg)}
.way .wnum{font:var(--fw-bold) 12px/1 var(--font-mono);color:var(--sv-key-solid);letter-spacing:.08em}
.way h3{font-size:clamp(19px,2vw,24px);line-height:1.15;letter-spacing:-.025em;color:var(--sv-text)}
.way p{margin:0;font:var(--fw-regular) 15px/1.6 var(--font-sans);color:var(--sv-dim-d)}
.way .wgo{margin-top:auto;padding-top:18px;font:var(--fw-semibold) 14px/1 var(--font-sans);color:var(--sv-ink);display:inline-flex;align-items:center;gap:8px}
.way .wgo::after{content:"";width:15px;height:9px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .25s}
.way:hover .wgo::after{transform:translateX(5px)}
.way.tienda{background:var(--sv-ink);border-color:var(--sv-ink)}
.way.tienda:hover{background:var(--sv-key-solid);border-color:var(--sv-key-solid)}
.way.tienda h3{color:#fff}
.way.tienda p{color:rgba(255,255,255,.86)}
.way.tienda .wnum{color:var(--green-300)}
.way.tienda .wgo{color:#fff}
.wtag{position:absolute;top:22px;right:22px;padding:5px 11px;border-radius:999px;background:var(--sv-grn);color:var(--sv-text);font:var(--fw-bold) 11px/1 var(--font-sans);letter-spacing:.03em}


/* ---------- reseñas: carril compacto ----------
   Cuatro o cinco a la vista y la pista rota sola. Se detiene al pasar el cursor
   y con prefers-reduced-motion, para no pelear con quien está leyendo. */
.revs{padding-top:clamp(28px,3.2vw,42px);padding-bottom:clamp(40px,5vw,66px)}
.rmq{position:relative;overflow:hidden;padding:2px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rlane{display:flex;align-items:stretch;gap:10px;width:max-content;animation:rmqa 56s linear infinite}
.rmq:hover .rlane,.rmq:focus-within .rlane{animation-play-state:paused}
@keyframes rmqa{to{transform:translateX(-50%)}}
/* Banda baja: 4–5 a la vista y ~104 px de alto. La cita se recorta a dos líneas
   y el nombre comparte fila con la credencial, así la tarjeta no crece. */
.rcard{flex:0 0 clamp(218px,19vw,252px);display:flex;flex-direction:column;gap:7px;padding:13px 15px;border:1px solid var(--sv-line-d);border-radius:14px;background:#fff}
.rstars{display:flex;gap:2px}
.rstars i{width:11px;height:11px;background:#E8A317;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.rcard q{quotes:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:var(--fw-medium) 13px/1.45 var(--font-sans);color:var(--sv-text);letter-spacing:-.01em}
.rcard footer{margin-top:auto;display:flex;align-items:baseline;gap:5px;min-width:0}
.rcard b{flex:0 0 auto;font:var(--fw-semibold) 11.5px/1.3 var(--font-sans);color:var(--sv-text)}
.rcard .rrole{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--fw-regular) 11px/1.3 var(--font-sans);color:var(--sv-dim-d)}
.rcard .rrole::before{content:"· "}
.rsrc{margin:clamp(6px,1vw,12px) 0 0;font:var(--fw-regular) 12.5px/1.5 var(--font-sans);color:var(--sv-dim-d)}
.rsrc a{color:var(--sv-ink);text-decoration:none;border-bottom:1px solid var(--sv-line-d)}
.rsrc a:hover{border-color:var(--sv-key-solid)}

/* ---------- cierre ---------- */
.end{background:var(--sv-deep);color:#fff;padding:clamp(56px,7vw,100px) 0}
.end h2{color:#fff;max-width:14ch;margin:18px 0 0}

.endgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.endl .kick{margin-bottom:14px}
.endl h2{margin-bottom:clamp(22px,2.6vw,30px)}
.cline{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);align-items:baseline}
.cline b{font:var(--fw-semibold) 12px/1.4 var(--font-sans);color:var(--sv-dim);letter-spacing:.02em}
.cline a,.cline span{font:var(--fw-medium) clamp(15px,1.5vw,17px)/1.5 var(--font-sans);color:#fff;text-decoration:none}
.cline a:hover{color:var(--sv-grn)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px)}
.mapwrap{border-radius:var(--r-media);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--sv-wash2);position:relative;z-index:0}
#mapa{height:clamp(280px,32vw,400px);width:100%}
.leaflet-container{font:var(--fw-regular) 12px/1.4 var(--font-sans);z-index:0}
.leaflet-top,.leaflet-bottom{z-index:400}
.pin{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--green-800);border:3px solid #fff;box-shadow:0 2px 8px rgba(1,50,56,.4)}

.sitefoot{background:var(--sv-deeper);color:var(--sv-dim);padding:clamp(44px,5.5vw,72px) 0 0}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(24px,3.5vw,52px);padding-bottom:clamp(34px,4vw,52px)}
.fbrand img{height:44px;width:auto}
.fbrand p{margin:18px 0 0;font:var(--fw-regular) 14px/1.65 var(--font-sans);color:var(--sv-dim);max-width:34ch}
/* Redes: mismo peso visual que un enlace del pie, no botones de color. */
.fsoc{display:flex;gap:9px;margin-top:20px}
.fsoc a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:var(--sv-dim);transition:color .2s,border-color .2s,background .2s}
.fsoc a:hover{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08)}
.fsoc i{width:18px;height:18px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-instagram{-webkit-mask-image:url(assets/icons/instagram.png);mask-image:url(assets/icons/instagram.png)}
.ic-facebook{-webkit-mask-image:url(assets/icons/facebook.png);mask-image:url(assets/icons/facebook.png)}
.ic-linkedin{-webkit-mask-image:url(assets/icons/linkedin.png);mask-image:url(assets/icons/linkedin.png)}
.fcol{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.fcol h4{font:var(--fw-bold) 12px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:5px}
.fcol a,.fcol span{font:var(--fw-regular) 14px/1.55 var(--font-sans);color:var(--sv-dim);text-decoration:none;transition:color .2s}
.fcol a:hover{color:#fff}
.fbar{border-top:1px solid rgba(255,255,255,.12)}
.fbar .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:18px;font:var(--fw-regular) 13px/1.5 var(--font-sans);color:var(--sv-dim)}
.fsis a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)}
.fsis a:hover{border-color:var(--sv-grn);color:var(--sv-grn)}


/* ---------- WhatsApp dinámico ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:1200;display:flex;align-items:center;gap:11px;height:56px;padding:0 22px 0 18px;border-radius:999px;background:var(--green-800);color:#fff;font:var(--fw-semibold) 14px/1 var(--font-sans);box-shadow:var(--shadow-lg);transition:background .2s,transform .25s cubic-bezier(.3,1.1,.4,1),box-shadow .25s}
.wa:hover{background:var(--green-900);transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.wa .ic{width:24px;height:24px;flex:0 0 auto;background:currentColor;-webkit-mask-image:url(assets/icons/message-circle.png);mask-image:url(assets/icons/message-circle.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.wa .tx{display:flex;flex-direction:column;gap:3px;text-align:left}
.wa .tx b{font-weight:700}
.wa .tx span{font:var(--fw-regular) 12px/1 var(--font-sans);color:rgba(255,255,255,.88);max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- modo simple ---------- */
html.simple .rot{height:auto;overflow:visible}
html.simple .rot b{position:static;opacity:1;transform:none;transition:none;display:none}
html.simple .rot b.on{display:block}
html.simple .mq .lane{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
html.simple .mq{-webkit-mask-image:none;mask-image:none}
html.simple .track button .bar i{transition:none}
html.simple .door,html.simple .door img,html.simple .pcard,html.simple .pcard img,html.simple .wa{transition:none}
html.simple .door:hover,html.simple .pcard:hover{transform:none}
html.simple .door:hover img,html.simple .pcard:hover img{transform:none}
@media (prefers-reduced-motion:reduce){.mq .lane{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.rot b{transition:none}.track button[aria-current=true] .bar i{transition:none}}

@media(max-width:980px){
.sgrid{grid-template-columns:1fr 1fr}
.ways,.ways.dos{grid-template-columns:1fr 1fr}
.visit{grid-template-columns:1fr}
.track{flex-wrap:wrap}
.track button{flex:1 1 calc(25% - 8px)}
.hero .in,.split,.stage2,.hd{grid-template-columns:1fr}
.hero .shot{aspect-ratio:16/10}
.doors .grid,.pgrid{grid-template-columns:1fr 1fr}
.strip{grid-template-columns:1fr 1fr}
.panel{position:static}
.endgrid,.fgrid{grid-template-columns:1fr}
nav.top .in{flex-wrap:wrap;height:auto;padding-block:12px;row-gap:10px}
nav.top .links{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:18px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{white-space:nowrap;flex:none}
.wa .tx span{display:none}
}
@media(max-width:620px){
.sgrid,.ways,.ways.dos{grid-template-columns:1fr}
.cline{grid-template-columns:1fr;gap:4px}
.track button{flex:1 1 calc(50% - 8px)}
.doors .grid,.pgrid,.strip{grid-template-columns:1fr}
}

/* Paso con foto real: el marco punteado desaparece. */
.slot.has{border:0;padding:0;background:rgba(0,0,0,.2)}
.slot.has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}