:root{--fondo:#0B0D12;--superficie:#151922;--texto:#E8EAF0;--texto-suave:#A3A9B8;--acento:#3DB9FF;--secundario:#E6F4FF;--borde:#262C3A;--sobre-acento:#06121C}
[data-theme="claro"]{--fondo:#F5F8FC;--superficie:#FFFFFF;--texto:#0B1220;--texto-suave:#4A5568;--acento:#0A6FBF;--secundario:#0B1220;--borde:#D8E0EB;--sobre-acento:#FFFFFF}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
html[data-theme="oscuro"]{color-scheme:dark}
html[data-theme="claro"]{color-scheme:light}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento)}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--acento);color:var(--sobre-acento);padding:8px 14px;border-radius:6px;z-index:100}
.skip:focus{left:8px}
.muted{color:var(--texto-suave)}

/* encabezado */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--fondo) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--borde)}
.bar{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{text-decoration:none;color:var(--texto);margin-right:auto;display:flex;align-items:center;gap:10px}
.logo-i{width:36px;height:36px;flex:none}
.logo-i .lo{stroke:var(--acento)}
.logo-i .la{stroke:var(--texto)}
.logo-i .ll{fill:var(--acento)}
.wm{display:flex;flex-direction:column;line-height:1.1}
.wm-main{font-weight:800;font-size:1.15rem;letter-spacing:.01em;color:var(--acento)}
.wm-sub{font-size:.72rem;color:var(--texto-suave)}
.top nav{display:none}
.top nav a{color:var(--texto-suave);text-decoration:none;margin-left:22px;font-size:.95rem}
.top nav a:hover{color:var(--texto)}
@media(min-width:820px){.top nav{display:block}}
.menu{position:relative}
@media(min-width:820px){.menu{display:none}}
.menu summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--borde);color:var(--texto);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{border-color:var(--acento);color:var(--acento)}
.menu summary svg{width:20px;height:20px}
.menu-lista{position:absolute;right:-52px;top:calc(100% + 12px);min-width:210px;display:flex;flex-direction:column;padding:8px;background:var(--superficie);border:1px solid var(--borde);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.menu-lista a{display:block;padding:12px 14px;border-radius:10px;color:var(--texto);text-decoration:none;font-weight:600}
.menu-lista a:hover,.menu-lista a:focus-visible{background:var(--fondo);color:var(--acento)}
.tema-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--borde);background:transparent;color:var(--texto);cursor:pointer}
.tema-btn:hover{border-color:var(--acento);color:var(--acento)}
.tema-btn svg{width:20px;height:20px}
.tema-btn .i-luna{display:none}
[data-theme="claro"] .tema-btn .i-sol{display:none}
[data-theme="claro"] .tema-btn .i-luna{display:block}

section{padding:72px 0}
h1,h2,h3{line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6.2vw,4.3rem);letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(1.7rem,4.4vw,2.7rem);letter-spacing:-.02em;font-weight:800}
h3{font-size:1.1rem}
.intro{color:var(--texto-suave);margin:0 0 32px;max-width:62ch}

/* inicio */
.hero{position:relative;padding:48px 0 72px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--texto) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--texto) 7%,transparent) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 60% 35%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse at 60% 35%,#000 10%,transparent 72%)}
.hero::after{content:"";position:absolute;width:640px;height:640px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acento) 26%,transparent),transparent 65%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.eyebrow{display:inline-block;margin:0 0 20px;padding:6px 14px;border:1px solid var(--borde);border-radius:999px;font-size:.85rem;color:var(--texto-suave);background:color-mix(in srgb,var(--superficie) 60%,transparent)}
.lead{font-size:1.2rem;color:var(--texto-suave);max-width:52ch;margin:0 0 32px}

.cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:inherit;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn svg{width:20px;height:20px}
.btn.primary{background:var(--acento);color:var(--sobre-acento)}
.btn.wa{background:#25D366;color:#06121C}
.btn.primary:hover,.btn.wa:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--texto);border-color:var(--borde)}
.btn.ghost:hover{border-color:var(--acento);color:var(--acento)}

/* mapa de Chile */
.mapa-card{border:1px solid var(--borde);border-radius:28px;background:color-mix(in srgb,var(--superficie) 70%,transparent);padding:20px 16px 24px;text-align:center}
.mapa-svg{display:flex;justify-content:center}
svg.chile{width:100%;max-width:340px;height:auto;max-height:640px;overflow:visible}
.chile .tierra{fill:color-mix(in srgb,var(--acento) 9%,transparent);stroke:color-mix(in srgb,var(--acento) 60%,transparent);stroke-width:1.5;stroke-linejoin:round}
.chile .trama{fill:color-mix(in srgb,var(--acento) 50%,transparent)}
.chile .tierra{fill-opacity:1;stroke-opacity:1}
.chile .trama{fill-opacity:1}
.chile .tierra-pts{pointer-events:none}
.chile .arco{fill:none;stroke:var(--acento);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:5 9;animation:flujo 1.6s linear infinite}
.chile .guia{fill:none;stroke:var(--borde);stroke-width:1}
.chile .punto{fill:var(--acento)}
.chile .onda{fill:none;stroke:var(--acento);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:onda 2.6s ease-out infinite}
.chile .deco{fill:var(--acento);opacity:.5;animation:parpadeo 3.2s ease-in-out infinite}
.chile text{font:600 16px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:var(--texto)}
.chile .destino .punto{stroke:var(--fondo);stroke-width:2}
.chile .destino text{fill:var(--acento);font-weight:800;font-size:19px}
.mapa-tit{margin:16px 0 4px;font-weight:700;font-size:1.1rem}
.mapa-txt{margin:0;color:var(--texto-suave);font-size:.95rem}
@keyframes flujo{to{stroke-dashoffset:-14}}
@keyframes onda{from{transform:scale(1);opacity:.85}to{transform:scale(3.4);opacity:0}}
@keyframes parpadeo{0%,100%{opacity:.25}50%{opacity:.85}}

/* tarjetas */
.grid{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--superficie);border:1px solid var(--borde);border-radius:18px;padding:22px}
[data-theme="claro"] .card{box-shadow:0 1px 2px rgba(15,23,42,.06)}
.card p{margin:0;color:var(--texto-suave)}
.card h3{color:var(--texto)}
.steps .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acento);color:var(--sobre-acento);font-weight:800;margin-bottom:10px}

/* trabajos */
.works{display:grid;gap:16px;grid-template-columns:1fr}
.work{margin:0;background:var(--superficie);border:1px solid var(--borde);border-radius:18px;overflow:hidden}
.work.ph{display:grid;place-items:center;aspect-ratio:4/3;color:var(--texto-suave);text-align:center;padding:20px;border-style:dashed}

/* reseñas */
.rating strong{color:var(--acento);font-size:1.3rem}
.review .q{color:var(--texto);margin-bottom:14px}
.review .by{display:flex;align-items:center;gap:8px;font-size:.9rem}
.review .ic svg{width:18px;height:18px;display:block;color:var(--acento)}
.when{color:var(--texto-suave)}

/* personalización */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 28px;padding:0}
.chips li{border:1px solid var(--borde);border-radius:999px;padding:6px 14px;color:var(--texto-suave);font-size:.9rem;background:var(--superficie)}
.strip{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.strip img{border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover}

/* por qué elegirnos + contáctanos */
.puntos{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.puntos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.puntos{grid-template-columns:repeat(4,1fr)}}
.puntos li{border-top:2px solid var(--acento);padding-top:12px}
.puntos strong{display:block;font-size:1.05rem}
.puntos span{color:var(--texto-suave);font-size:.95rem}
.porque-grid{display:grid;gap:20px;align-items:stretch}
@media(min-width:900px){.porque-grid{grid-template-columns:1.15fr .85fr}}
.pared{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:22px;background:var(--superficie);padding:12px 0;min-height:240px;display:flex;flex-direction:column;justify-content:center;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pers-pared{margin-top:8px}
.fila{display:flex;width:max-content;animation:desliza 90s linear infinite}
.fila-1{animation-direction:reverse;animation-duration:105s}
.fila-2{animation-duration:120s}
.pared:hover .fila{animation-play-state:paused}
.cinta{display:flex;gap:10px;margin:0 5px;padding:0;list-style:none}
.cinta li{flex:0 0 auto}
.cinta img{width:156px;height:117px;object-fit:cover;border-radius:10px}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.contactanos{display:flex;flex-direction:column;gap:14px}
.contactanos h3{font-size:1.5rem;margin:0}
.contactanos p{margin:0}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--texto-suave)}
.datos strong{color:var(--texto)}
.mini-mapa{display:block;width:100%;max-width:100%;height:220px;border:0;border-radius:14px;margin-top:4px}
.contactanos{min-width:0;overflow:hidden}

footer{border-top:1px solid var(--borde);padding:28px 0 96px;color:var(--texto-suave);font-size:.9rem}
footer p{margin:0}

.wa-float{position:fixed;right:16px;bottom:16px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;color:#06121C;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.wa-float svg{width:30px;height:30px}
.nf{padding-top:96px;text-align:center}

/* ajustes del rediseño v2 */
@media(min-width:960px){.grid.g4{grid-template-columns:repeat(4,1fr)}}
/* 5 tarjetas: 3 arriba y 2 más anchas abajo (sin tarjeta huérfana) */
@media(min-width:640px){.grid.g5>li:last-child{grid-column:1/-1}}
@media(min-width:960px){.grid.g5{grid-template-columns:repeat(6,1fr)}.grid.g5>li{grid-column:span 2}.grid.g5>li:nth-child(n+4){grid-column:span 3}}
.teaser{padding:0}
.teaser-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px}
.teaser-card h3{font-size:1.3rem;margin:0 0 4px}
.collage-card{padding:14px}
.collage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.collage img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block}
.hero-sm{padding:56px 0 48px}
.hero-sm h1{font-size:clamp(2rem,5vw,3.4rem)}
.porque-grid>*{min-width:0}
.col-trab{display:flex;flex-direction:column;gap:6px;min-width:0}
.col-trab .pared{flex:1}
.col-tit{font-size:1.5rem;margin:0}
.puntos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
@media(min-width:900px){.wa-float{display:none}}

/* celulares: el mosaico deja de deslizarse y pasa a ser una grilla corta y ordenada */
@media(max-width:700px){
  section{padding:56px 0}
  .pared{-webkit-mask-image:none;mask-image:none;min-height:0;padding:10px;overflow:hidden;display:block}
  .fila{display:block;width:auto;animation:none;transform:none}
  .cinta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 8px}
  .cinta[aria-hidden="true"],.cinta .dup,.cinta li:nth-child(n+10){display:none}
  .cinta img{width:100%;height:auto;aspect-ratio:4/3}
  .mini-mapa{height:200px;pointer-events:none} /* evita que el mapa de Google atrape el scroll con el dedo; "Cómo llegar" abre el mapa completo */
  .mapa-card{padding:16px 8px 20px}
  svg.chile{max-width:100%}
}

/* navegadores sin color-mix(): colores fijos en vez de mezclas */
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .top{background:var(--fondo)}
  .eyebrow,.mapa-card{background:var(--superficie)}
  .hero::before{background-image:none}
  .hero::after{background:radial-gradient(circle,rgba(61,185,255,.22),transparent 65%)}
  .chile .tierra{fill:rgba(61,185,255,.1);stroke:rgba(61,185,255,.6)}
  .chile .trama{fill:rgba(61,185,255,.5)}
  [data-theme="claro"] .hero::after{background:radial-gradient(circle,rgba(10,111,191,.18),transparent 65%)}
  [data-theme="claro"] .chile .tierra{fill:rgba(10,111,191,.1);stroke:rgba(10,111,191,.6)}
  [data-theme="claro"] .chile .trama{fill:rgba(10,111,191,.5)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chile .arco,.chile .onda,.chile .deco{animation:none}
  .chile .onda{opacity:0}
  .fila{animation:none}
  .pared{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}