/* Skyline Apartments — marca Living4Malaga
   Hilo visual: el suelo hidráulico original del edificio. Cada apartamento tiene su baldosa. */
:root {
  --petroleo: #002d3a;
  --petroleo-2: #0a3f4f;
  --noche: #001f28;
  --cobre: #ab6530;
  --cobre-oscuro: #8a4f24;
  --arena: #d79d72;
  --brasa: #f0be94;
  --cal: #faf7f2;
  --blanco: #ffffff;
  --tinta: #13252b;
  --gris: #4e636a;
  --gris-claro: #8fa3a8;
  --linea: #ddd5ca;
  --linea-osc: rgba(255, 255, 255, .14);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --ancho: 1240px;
  --gutter: clamp(16px, 4.5vw, 48px);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --cab: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 12px); }
body { margin: 0; background: var(--cal); color: var(--tinta); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--cobre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cobre-oscuro); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--arena); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; color: var(--petroleo); margin: 0 0 .45em; letter-spacing: -.015em; }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: 66ch; }
ul, ol { margin: 0; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.titulo-seccion { font-size: clamp(2.4rem, 6.2vw, 5rem); }
.sub { color: var(--gris); font-size: 1.1rem; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--petroleo); color: #fff; padding: 8px 14px; z-index: 100; }
.saltar:focus { left: 8px; color: #fff; }
[hidden] { display: none !important; }
.visual-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--cobre); color: #fff; text-decoration: none; border: 1px solid var(--cobre); padding: 15px 26px; border-radius: 999px; font: 700 1rem/1.1 var(--sans); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.boton:hover { background: var(--cobre-oscuro); border-color: var(--cobre-oscuro); color: #fff; }
.boton.fantasma { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.boton.fantasma:hover { background: #fff; color: var(--petroleo); }
.boton.linea { background: transparent; color: var(--petroleo); border-color: var(--petroleo); }
.boton.linea:hover { background: var(--petroleo); color: #fff; }
.boton.grande { padding: 20px 36px; font-size: 1.1rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--petroleo); color: #fff; transition: background .35s, box-shadow .35s; }
.inicio .cabecera { position: fixed; left: 0; right: 0; }
.cabecera.transparente { background: transparent; }
.cabecera.solida { background: rgba(0, 45, 58, .94); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
@supports (backdrop-filter: blur(8px)) { .cabecera.solida { background: rgba(0, 45, 58, .82); backdrop-filter: blur(10px); } }
.cabecera-fila { display: flex; align-items: center; gap: 28px; min-height: var(--cab); }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 400 1.6rem/1 var(--serif); letter-spacing: -.01em; margin-right: auto; }
.marca:hover { color: #fff; }
.marca-baldosa { width: 30px; height: 30px; border-radius: 3px; transition: transform .6s var(--ease); }
.marca:hover .marca-baldosa { transform: rotate(90deg); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: #fff; text-decoration: none; font-size: .98rem; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--arena); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .idioma { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 4px 11px; font-size: .85rem; letter-spacing: .04em; }
.nav .idioma::after { display: none; }
.boton-nav { padding: 10px 20px; font-size: .93rem; }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px 0; }
.menu-icono { width: 22px; height: 10px; position: relative; }
.menu-icono::before, .menu-icono::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-icono::before { top: 0; } .menu-icono::after { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-icono::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icono::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .boton-nav { display: none; }
  .nav { position: fixed; inset: var(--cab) 0 0 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--petroleo); padding: 12px var(--gutter) 40px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; overflow-y: auto; }
  .nav.abierto { opacity: 1; transform: none; visibility: visible; transition: opacity .3s, transform .3s var(--ease); }
  .nav a { font: 400 2rem/1.2 var(--serif); padding: 14px 0; border-bottom: 1px solid var(--linea-osc); }
  .nav a::after { display: none; }
  .nav .idioma { align-self: flex-start; margin-top: 20px; font: 400 1rem var(--sans); border: 1px solid rgba(255,255,255,.4); padding: 8px 16px; }
  body.menu-abierto { overflow: hidden; }
}

/* Portada */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--noche); overflow: hidden; isolation: isolate; }
.hero-medio { position: absolute; inset: 0; z-index: -1; }
.hero-foto, .hero-foto img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-foto img { animation: deriva 26s ease-in-out infinite alternate; transform-origin: 60% 30%; object-position: 50% 30%; }
.hero-video { z-index: 1; }
.hero-medio::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,31,40,.6) 0%, rgba(0,31,40,0) 18%, rgba(0,31,40,.05) 30%, rgba(0,31,40,.78) 52%, rgba(0,31,40,.96) 76%, #001f28 100%), linear-gradient(90deg, rgba(0,31,40,.55) 0%, rgba(0,31,40,0) 60%); }
@keyframes deriva { from { transform: scale(1.12) translate3d(1.5%, 0, 0); } to { transform: scale(1.02) translate3d(-1%, -1.5%, 0); } }
.persiana { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: repeat(7, 1fr); pointer-events: none; }
.persiana span { background: var(--petroleo); transform-origin: 50% 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), inset 0 -10px 18px rgba(0,0,0,.18); animation: persiana .6s var(--ease) forwards; }
.persiana span:nth-child(1) { animation-delay: .24s; } .persiana span:nth-child(2) { animation-delay: .20s; } .persiana span:nth-child(3) { animation-delay: .16s; }
.persiana span:nth-child(4) { animation-delay: .12s; } .persiana span:nth-child(5) { animation-delay: .08s; } .persiana span:nth-child(6) { animation-delay: .04s; }
.persiana span:nth-child(7) { animation-delay: 0s; }
@keyframes persiana { to { transform: scaleY(0); } }
.hero-texto { width: 100%; padding-top: calc(var(--cab) + 40px); }
.hero h1 { color: #fff; margin: 0 0 .35em; }
.h1-grande { display: block; font-size: clamp(4.6rem, 17vw, 15.5rem); line-height: .82; padding-bottom: .1em; letter-spacing: -.045em; margin-left: -.04em; animation: alzar .7s var(--ease) .25s both; }
.h1-sub { display: block; font: italic 400 clamp(1.15rem, 2.2vw, 1.6rem)/1.3 var(--serif); margin-top: .4em; padding-top: .3em; color: #fff; animation: alzar .7s var(--ease) .32s both; }
.hero .entradilla { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; max-width: 52ch; color: #eef3f4; margin-bottom: 1.4em; text-shadow: 0 1px 12px rgba(0,20,26,.6); animation: alzar .7s var(--ease) .38s both; }
.hero .acciones { animation: alzar .7s var(--ease) .42s both; }

@keyframes alzar { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero-notas { display: flex; flex-wrap: wrap; gap: 10px 48px; list-style: none; margin: clamp(32px, 6vh, 64px) auto 0; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid var(--linea-osc); font-size: .95rem; color: #cfdadc; width: 100%; }
.hero-notas strong { font: 400 1.6rem/1 var(--serif); color: #fff; margin-right: 6px; }

/* Baldosas */
.baldosas { position: relative; padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; background: var(--cal); }
.suelos { position: absolute; inset: 0; }
.suelo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .7s ease, transform 8s linear; transform: scale(1.02); filter: brightness(.62) saturate(.95); }
.suelo.activa { opacity: 1; transform: scale(1.07); }
.baldosas { background: var(--noche); }
.baldosas-int { position: relative; z-index: 1; display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) {
  .baldosas-int { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 0; }
  .baldosas-txt { grid-column: 1; grid-row: 1; box-shadow: none; padding-bottom: 8px; }
  .baldosas-ficha { grid-column: 1; grid-row: 2; align-self: start; }
  .tiles { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .baldosas-int::before { content: ""; grid-column: 1; grid-row: 1 / 3; background: var(--cal); box-shadow: 0 30px 60px -30px rgba(0,31,40,.45); z-index: -1; }
}
.baldosas-ficha { background: var(--cal); padding: 0 clamp(28px, 4vw, 52px) clamp(24px, 3vw, 40px); }
@media (max-width: 979px) { .baldosas-ficha { padding-top: 6px; box-shadow: 0 30px 60px -30px rgba(0,31,40,.45); } }
.baldosas-txt { background: var(--cal); padding: clamp(28px, 4vw, 52px); box-shadow: 0 30px 60px -30px rgba(0,31,40,.45); }
.baldosas-txt h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.baldosas-txt p { margin: 0; color: var(--gris); font-size: 1.1rem; }
.tiles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 20px); }
.tiles li { flex: 0 0 calc((100% - 2 * clamp(10px, 1.6vw, 20px)) / 3); }
@media (max-width: 600px) { .tiles li { flex-basis: calc((100% - 2 * 10px) / 3); } }
.tile-fichas { min-height: 9.5em; }
.tile-ficha { border-top: 1px solid var(--linea); padding-top: 18px; animation: alzar .45s var(--ease) both; }
.tf-nombre { font: 400 1.6rem/1.1 var(--serif); color: var(--petroleo); margin-bottom: .2em; }
.tf-lema { color: var(--gris); font-size: 1rem; margin-bottom: .7em; }
.tile-ficha ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tile-ficha li { font-size: .85rem; padding: 4px 11px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); }
.tile-ficha a { font-weight: 700; }
.pausa { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--linea); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: .85rem; color: var(--gris); cursor: pointer; }
.pausa:hover { border-color: var(--petroleo); color: var(--petroleo); }
.pausa-icono { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pausa[aria-pressed="true"] .pausa-icono { border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; height: 0; width: 0; }
.tile { display: block; text-decoration: none; color: var(--tinta); background: var(--cal); padding: 10px 10px 14px; box-shadow: 0 18px 40px -22px rgba(0,31,40,.55); transition: transform .5s var(--ease), box-shadow .5s; }
.tile-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.tile-nombre { display: block; font: 600 1.05rem/1.2 var(--serif); color: var(--petroleo); margin-top: 12px; }
.tile-apodo { display: block; font-size: .88rem; color: var(--gris); }
.tile:hover, .tile:focus-visible, .tile.activa { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(0,31,40,.7); color: var(--tinta); }


/* Los cinco */
.cinco-sec { padding: clamp(80px, 11vw, 150px) 0 clamp(40px, 6vw, 80px); background: var(--blanco); }
.cinco-sec .titulo-seccion { margin-bottom: clamp(40px, 6vw, 80px); }
.apt { display: grid; gap: 28px 64px; grid-template-columns: 1fr; align-items: center; margin-bottom: clamp(72px, 10vw, 140px); }
@media (min-width: 960px) {
  .apt { grid-template-columns: 7fr 5fr; }
  .apt:nth-of-type(even) { grid-template-columns: 5fr 7fr; }
  .apt:nth-of-type(even) .apt-visor { order: 2; }
}
.apt-visor { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--linea); margin-bottom: 18px; cursor: crosshair; }
.apt-visor .cap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.apt-visor .cap.activa { opacity: 1; }
.apt-puntos { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; z-index: 2; }
.apt-puntos span { width: 28px; height: 3px; background: rgba(255,255,255,.45); transition: background .3s; }
.apt-puntos span.activa { background: #fff; }
.apt-baldosa { width: 64px; height: 64px; margin-bottom: 22px; transition: transform .7s var(--ease); }
.apt:hover .apt-baldosa { transform: rotate(90deg); }
.apt h3 { font: 400 clamp(2.2rem, 4.4vw, 3.4rem)/1 var(--serif); letter-spacing: -.02em; margin-bottom: .15em; }
.apt h3 a { color: var(--petroleo); text-decoration: none; }
.apodo { font: italic 400 1.2rem/1.3 var(--serif); color: var(--cobre); margin-bottom: 1em; }
.lema { font-size: 1.12rem; color: var(--tinta); }
.datos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.datos li { font-size: .9rem; padding: 5px 12px; border: 1px solid var(--linea); border-radius: 999px; color: var(--gris); background: var(--blanco); }
.paleta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 26px; font-size: .9rem; color: var(--gris); }
.paleta ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.paleta li { display: flex; align-items: center; gap: 7px; }
.paleta-tit { font-weight: 700; color: var(--tinta); }
.chip { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }

/* Buscador */
.buscador { background: var(--petroleo); color: #e8eef0; padding: clamp(80px, 11vw, 150px) 0; position: relative; overflow: hidden; }
.buscador::before { content: ""; position: absolute; right: -10%; top: -20%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(215,157,114,.16), transparent); pointer-events: none; }
.buscador-int { position: relative; display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .buscador-int { grid-template-columns: 4fr 7fr; gap: 80px; } }
.buscador h2 { color: #fff; font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.buscador-cab p { color: #b9c9cd; font-size: 1.1rem; }
.paso { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; animation: alzar .6s var(--ease) both; }
.paso legend { font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--serif); color: #fff; margin-bottom: 18px; padding: 0; }
.paso.hecho legend { color: var(--gris-claro); font-size: 1.15rem; }
.ops { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.op { width: 100%; text-align: left; background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff; padding: 18px 20px; border-radius: 4px; cursor: pointer; font-size: 1.02rem; transition: border-color .25s, background .25s, color .25s; }
.op:hover { border-color: var(--arena); background: rgba(215,157,114,.08); }
.op[aria-pressed="true"] { background: var(--arena); border-color: var(--arena); color: var(--petroleo); font-weight: 700; }
.paso.hecho .op:not([aria-pressed="true"]) { opacity: .7; }
.sin-js { display: none; }
html:not(.js) .sin-js { display: block; list-style: none; padding: 0; }
html:not(.js) .sin-js li { margin-bottom: 14px; color: #c6d4d7; }
html:not(.js) .sin-js a { color: #fff; font-weight: 700; }
html:not(.js) .buscador-pasos .paso { display: none; }
.resultado { background: var(--cal); color: var(--tinta); display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: clamp(22px, 3vw, 36px); align-items: start; animation: alzar .7s var(--ease) both; }
@media (max-width: 560px) { .resultado { grid-template-columns: 1fr; } }
.res-foto { width: 120px; height: 120px; object-fit: cover; display: block; animation: alzar .7s var(--ease) both; }
@keyframes girar { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.resultado .res-pre { font-size: .95rem; color: var(--gris); margin: 0; }
.resultado h3 { font: 400 clamp(2rem, 4vw, 2.8rem)/1.05 var(--serif); margin: 2px 0 12px; }
.resultado .res-alt { font-size: .95rem; color: var(--gris); }
.otra-vez { margin-top: 18px; background: none; border: 0; color: var(--arena); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; }

/* Comparativa */
.compara { padding: clamp(80px, 11vw, 150px) 0; background: var(--cal); }
.tabla-scroll { overflow-x: auto; margin-top: 36px; border-top: 2px solid var(--petroleo); }
.compara table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: .97rem; }
.compara th, .compara td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.compara thead th { vertical-align: bottom; }
.compara thead a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--petroleo); font: 600 1.05rem/1.2 var(--serif); }
.th-foto { width: 64px; height: 48px; object-fit: cover; display: block; border-radius: 3px; }
.compara tbody th { font-weight: 700; color: var(--tinta); white-space: nowrap; position: sticky; left: 0; background: var(--cal); z-index: 1; }
.compara td.no { color: var(--gris-claro); }
.compara td.si { color: var(--cobre); font-weight: 700; }
.compara tbody tr:hover td, .compara tbody tr:hover th { background: #f3eee6; }
.compara-tarjetas { display: none; }
@media (max-width: 760px) {
  .tabla-scroll { display: none; }
  .compara-tarjetas { display: grid; gap: 14px; margin-top: 28px; }
  .ct { background: var(--blanco); padding: 18px 18px 8px; box-shadow: 0 10px 30px -22px rgba(0,31,40,.5); }
  .ct-cab { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--petroleo); font: 400 1.4rem/1.1 var(--serif); margin-bottom: 10px; }
  .ct-cab .th-foto { width: 56px; height: 42px; }
  .ct dl { margin: 0; }
  .ct dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: .94rem; }
  .ct dt { color: var(--gris); }
  .ct dd { margin: 0; text-align: right; font-weight: 700; color: var(--tinta); }
}

/* Mapa */
.seccion-mapa { background: var(--noche); color: #d9e3e5; padding: clamp(80px, 11vw, 150px) 0; }
.pagina-ubicacion .seccion-mapa { padding-top: 40px; }
.mapa-cab { display: grid; gap: 12px 64px; grid-template-columns: 1fr; margin-bottom: 40px; align-items: end; }
@media (min-width: 980px) { .mapa-cab { grid-template-columns: 1fr 1fr; } }
.seccion-mapa h2 { color: #fff; margin: 0; }
.mapa-cab p { margin: 0; color: #b6c6ca; font-size: 1.12rem; }
.mapa { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 1080px) { .mapa { grid-template-columns: 1fr 290px; align-items: start; } .mapa-izq { position: sticky; top: calc(var(--cab) + 20px); } }
.mapa-lienzo { position: relative; overflow: hidden; border-radius: 4px; background: #063442; }
.mapa-pie { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; margin-top: 14px; }
.mp-marca text { fill: #fff; font: 600 26px var(--sans); paint-order: stroke; stroke: rgba(0,31,40,.85); stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 700px) { .mp-marca text { font-size: 40px; stroke-width: 9px; } }
.mp-min small { display: block; font: 400 .75rem var(--sans); color: #87a0a6; text-align: right; }
.mapa-lienzo img { width: 100%; height: auto; }
.mapa-capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-guia { stroke: #fff; stroke-width: 2; stroke-dasharray: 6 6; opacity: 0; transition: opacity .3s; }
.mp-guia.visible { opacity: .8; }
.mp-marca.oculta text { opacity: 0; }
.mp-ruta { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mp-ruta-sombra { fill: none; stroke: var(--brasa); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; opacity: .28; filter: blur(4px); }
.mp-marca circle { fill: var(--noche); stroke: var(--brasa); stroke-width: 4; transition: r .3s, fill .3s; }
.mp-marca.activa circle { fill: #fff; stroke: var(--cobre); stroke-width: 6; r: 14; }
.mp-origen circle { fill: var(--cobre); stroke: #fff; stroke-width: 4; }
.mp-origen .pulso { fill: rgba(240,190,148,.35); stroke: none; transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.mapa-origen { position: absolute; margin: 0; transform: translate(-50%, -190%); background: var(--cobre); color: #fff; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.mapa-dato { position: absolute; margin: 0; z-index: 2; background: #fff; color: var(--petroleo); padding: 8px 14px; border-radius: 4px; font-size: .9rem; line-height: 1.3; max-width: min(260px, 70%); box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transition: opacity .3s; }
.mapa-dato.visible { opacity: 1; }
.mapa-dato strong { display: block; font: 600 1rem var(--serif); }
.mapa-lista { list-style: none; padding: 0; display: grid; gap: 4px; }
@media (min-width: 640px) and (max-width: 1079px) { .mapa-lista { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.mapa-lista button { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--linea-osc); padding: 8px 2px; min-height: 44px; color: #d9e3e5; text-align: left; cursor: pointer; transition: color .2s, padding .3s var(--ease); }
.mapa-lista button:hover { color: #fff; padding-left: 8px; }
.mapa-lista button[aria-pressed="true"] { color: var(--brasa); padding-left: 8px; }
.mp-min { font: 400 1.1rem var(--serif); white-space: nowrap; }
.mapa-leyenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .88rem; color: #b6c6ca; }
.mapa-leyenda li { display: flex; align-items: center; gap: 10px; }
.ley { width: 26px; height: 4px; border-radius: 2px; }
.ley.c5 { background: #ffcda0; box-shadow: 0 0 8px #ffcda0; } .ley.c10 { background: #c48458; } .ley.c15 { background: #70625c; }
.mapa-nota { font-size: .8rem; color: #87a0a6; margin: 0; }

/* Flechas de carriles */
.flechas { display: none; gap: 8px; margin-top: 18px; }
@media (hover: hover) and (min-width: 760px) { .flechas { display: flex; } }
.flechas button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; background: none; cursor: pointer; font-size: 1.1rem; color: var(--petroleo); transition: background .25s, color .25s; }
.flechas button:hover { background: var(--petroleo); color: #fff; }
.tira .flechas button { color: #fff; }
.tira .flechas button:hover { background: #fff; color: var(--petroleo); }
.tira-cab { display: flex; justify-content: flex-end; }
.tira-cab .flechas { margin: 0 0 16px; }
.otros-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* Un día */
.dia { padding: clamp(80px, 11vw, 150px) 0; background: var(--cal); overflow: hidden; }
.dia-cab { display: grid; gap: 12px 64px; grid-template-columns: 1fr; align-items: end; margin-bottom: 44px; }
@media (min-width: 980px) { .dia-cab { grid-template-columns: 1fr 1fr; } }
.dia-cab p { margin: 0; color: var(--gris); font-size: 1.1rem; }
.dia-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.dia-acciones .flechas { margin: 0; }
.dia-carril { list-style: none; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 24px; padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); scroll-padding-inline-start: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); scrollbar-width: thin; scrollbar-color: var(--arena) transparent; cursor: grab; }
.dia-carril.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.dia-tarjeta { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; padding: 34px 32px 8px 0; margin-right: 32px; border-top: 1px solid var(--petroleo); position: relative; }
.dia-tarjeta::before { content: ""; position: absolute; left: 0; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--cobre); box-shadow: 0 0 0 5px var(--cal); }
.dia-hora { font: italic 400 1.15rem var(--serif); color: var(--cobre); margin-bottom: .4em; }
.dia-tarjeta h3 { font-size: 1.65rem; font-weight: 400; }
.dia-tarjeta p { color: var(--gris); }
.dia-ver { background: none; border: 0; padding: 0; color: var(--cobre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .95rem; }

/* Vídeo */
.spot { padding: clamp(80px, 11vw, 150px) 0; background: var(--noche); }
.spot h2 { color: #fff; }
.spot-video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Confianza */
.confianza { padding: clamp(80px, 11vw, 150px) 0; background: var(--blanco); }
.confianza-int { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .confianza-int { grid-template-columns: 5fr 7fr; gap: 80px; } }
.logo-gestora { width: 170px; margin-bottom: 28px; background: var(--petroleo); padding: 14px 18px; border-radius: 4px; }
.confianza h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.confianza-int > div > p { color: var(--gris); font-size: 1.1rem; }
.puntos { list-style: none; padding: 0; display: grid; gap: 36px 40px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .puntos { grid-template-columns: 1fr 1fr; } .puntos.tres { grid-template-columns: repeat(3, 1fr); } }
.puntos li { border-top: 1px solid var(--linea); padding-top: 20px; }
.puntos h3 { font-size: 1.3rem; }
.puntos p { margin: 0; color: var(--gris); }

/* Preguntas */
.faq-inicio { padding: clamp(80px, 11vw, 150px) 0; background: var(--cal); }
.faq-int { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .faq-int { grid-template-columns: 4fr 7fr; gap: 80px; } }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 400 1.3rem/1.3 var(--serif); color: var(--petroleo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 18px; height: 18px; margin-top: 6px; background: linear-gradient(var(--cobre), var(--cobre)) center/100% 2px no-repeat, linear-gradient(var(--cobre), var(--cobre)) center/2px 100% no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--gris); }
.faq-mas { margin-top: 24px; }

/* Final */
.final { position: relative; padding: clamp(110px, 16vw, 220px) 0; color: #fff; text-align: center; overflow: hidden; background: var(--petroleo); isolation: isolate; }
.final-foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 35%; }
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,45,58,.82) 0%, rgba(0,31,40,.94) 70%); }
.final h2 { color: #fff; font-size: clamp(2.6rem, 7vw, 6rem); max-width: 16ch; margin: 0 auto .4em; }
.final p { margin: 0 auto 2em; color: #d4e0e2; font-size: 1.15rem; }
.final .final-apts-tit { margin: 2.4em auto 1em; font-size: 1rem; color: #b6c6ca; }
.final-apts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final-apts a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; text-decoration: none; font-size: .95rem; transition: background .25s, color .25s; }
.final-apts a:hover { background: #fff; color: var(--petroleo); }

/* Pie */
.pie { background: var(--noche); color: #b7c7cb; font-size: .95rem; }
.pie-suelo { display: grid; grid-template-columns: repeat(5, 1fr); height: 40px; }
.pie-suelo span { background-size: 40px 40px; }
.pie-rejilla { display: grid; gap: 40px; grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 40px; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pie-nombre { font: 400 3rem/1 var(--serif); color: #fff; margin-bottom: 12px; letter-spacing: -.02em; }
.pie h2 { font: 600 1rem var(--sans); color: #fff; margin-bottom: 14px; letter-spacing: .02em; }
.pie ul { list-style: none; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { color: var(--brasa); }
.pie-apts a { display: inline-flex; align-items: center; gap: 10px; }
.mini-baldosa { width: 20px; height: 20px; flex: 0 0 20px; }
.pie-logo img { width: 160px; }
.pie-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid var(--linea-osc); padding-top: 20px; padding-bottom: 32px; font-size: .85rem; }

/* Ficha */
.ficha main { background: var(--cal); }
.ficha-hero { position: relative; padding: 28px 0 56px; overflow: hidden; }
.ficha-suelo { display: none; position: absolute; inset: 0; background: var(--suelo) 0 0 / 96px 96px; opacity: .09; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, transparent 70%); }
.ficha-hero-int { position: relative; display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .ficha-hero-int { grid-template-columns: 5fr 7fr; gap: 64px; } }
.migas { font-size: .88rem; color: var(--gris); margin-bottom: 28px; }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--gris-claro); }
.migas a { color: var(--gris); }
.ficha-baldosa { width: 76px; height: 76px; margin-bottom: 22px; animation: girar 1.2s var(--ease) both; }
.ficha-hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); line-height: .98; letter-spacing: -.03em; margin-bottom: .1em; }
.ficha-hero .lema { font-size: 1.2rem; max-width: 40ch; }
.ficha-hero-foto { position: relative; padding: 0; border: 0; background: var(--linea); cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 3; display: block; width: 100%; }
.ficha-hero-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ficha-hero-foto:hover img { transform: scale(1.03); }
.ver-fotos { position: absolute; right: 14px; bottom: 14px; background: #fff; color: var(--petroleo); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: .9rem; }
.tira { background: var(--petroleo); padding: 28px 0; }
.tira-carril { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--arena) transparent; cursor: grab; }
.tira-carril.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.tira-carril li { flex: 0 0 auto; scroll-snap-align: start; }
.tira-carril button { display: block; padding: 0; border: 0; background: var(--petroleo-2); cursor: zoom-in; height: clamp(200px, 30vw, 320px); overflow: hidden; }
.tira-carril img { height: 100%; width: auto; max-width: none; transition: opacity .3s; pointer-events: none; }
.tira-carril button:hover img { opacity: .85; }
.ficha-cuerpo { display: grid; gap: 48px; grid-template-columns: 1fr; padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px); }
@media (min-width: 980px) { .ficha-cuerpo { grid-template-columns: 1fr 370px; gap: 88px; } }
.ficha-txt h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 1.6em; }
.ficha-txt h2:first-child { margin-top: 0; }
.ficha-txt > p { font-size: 1.08rem; }
.equipamiento { columns: 2 230px; column-gap: 32px; padding: 0; list-style: none; }
.equipamiento li { padding: 8px 0 8px 28px; break-inside: avoid; position: relative; border-bottom: 1px solid var(--linea); }
.equipamiento li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--cobre); }
.aviso { margin-top: 20px; padding: 14px 18px; border-left: 3px solid var(--cobre); background: var(--blanco); color: var(--tinta); }
.distancias { list-style: none; padding: 0; border-top: 1px solid var(--linea); max-width: 560px; }
.distancias li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.distancias li span:last-child { font-family: var(--serif); color: var(--cobre); white-space: nowrap; }
.distancias.tres { max-width: none; columns: 2 420px; column-gap: 56px; border-top: 0; }
.distancias.tres li { break-inside: avoid; display: grid; grid-template-columns: 1fr auto 70px; }
.distancias.tres li span:nth-child(2) { color: var(--gris); font-size: .92rem; }
.distancias.tres li span:last-child { text-align: right; }
.caja-reserva { background: var(--blanco); border-top: 5px solid var(--cobre); padding: 28px; align-self: start; box-shadow: 0 24px 60px -36px rgba(0,31,40,.45); }
@media (min-width: 980px) { .caja-reserva { position: sticky; top: calc(var(--cab) + 24px); } }
.caja-reserva h2 { font-size: 1.6rem; margin-bottom: 16px; }
.caja-reserva .datos { margin-bottom: 14px; }
.horario { font-size: .95rem; color: var(--tinta); margin-bottom: 18px; }
.caja-reserva .boton { width: 100%; margin-bottom: 14px; }
.caja-reserva small { display: block; color: var(--gris); font-size: .86rem; line-height: 1.5; margin-bottom: 8px; }
.caja-reserva small a { color: var(--gris); }
.registro { font-size: .8rem; color: var(--gris); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); }
.otros-sec { padding: clamp(64px, 9vw, 120px) 0; background: var(--blanco); }
.otros { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 12px; margin-top: 32px; }
.otro { position: relative; text-decoration: none; color: var(--tinta); }
.otro img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; margin-bottom: 14px; }
.otro-baldosa { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .6s var(--ease); }
.otro:hover .otro-baldosa { transform: rotate(90deg); }
.otro strong { display: block; font: 400 1.4rem/1.15 var(--serif); color: var(--petroleo); }
.otro span { font: italic 400 1rem var(--serif); color: var(--cobre); }
.barra-reserva { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(0,45,58,.96); color: #fff; transform: translateY(100%); transition: transform .4s var(--ease); }
.barra-reserva.visible { transform: none; }
.barra-reserva > span { display: flex; align-items: center; gap: 10px; font: 400 1.1rem var(--serif); }
.barra-reserva .boton { padding: 11px 22px; }
@media (min-width: 980px) { .barra-reserva { display: none; } }
@media (max-width: 979px) { body.ficha { padding-bottom: 76px; } }

/* Visor de fotos */
dialog.visor { border: 0; padding: 0; margin: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(0,20,26,.97); color: #fff; }
dialog.visor::backdrop { background: rgba(0,20,26,.97); }
.visor figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 80px 28px; }
.visor img { max-height: calc(100vh - 150px); max-width: 100%; width: auto; object-fit: contain; }
.visor figcaption { margin-top: 14px; font-size: .95rem; color: #c9d6d8; text-align: center; }
.visor button { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 10px 18px; cursor: pointer; font-size: 1rem; }
.visor button:hover { background: #fff; color: var(--petroleo); }
.v-cerrar { top: 16px; right: 16px; }
.v-ant, .v-sig { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; padding: 0 !important; font-size: 1.3rem !important; }
.v-ant { left: 16px; } .v-sig { right: 16px; }
@media (max-width: 700px) { .visor figure { padding: 64px 8px 90px; } .v-ant, .v-sig { top: auto; bottom: 18px; transform: none; } }

/* Páginas interiores */
.pagina-cab { padding-top: clamp(48px, 7vw, 96px); padding-bottom: 40px; }
.pagina-cab h1, .pagina-estrecha h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); letter-spacing: -.03em; max-width: 18ch; }
.dos-col { display: grid; gap: 0 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.dos-col p { font-size: 1.1rem; }
.bloque { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.bloque.oscuro { background: var(--petroleo); color: #d9e3e5; }
.bloque.oscuro h2, .bloque.oscuro h3 { color: #fff; }
.bloque.oscuro .puntos li { border-color: var(--linea-osc); }
.bloque.oscuro .puntos p { color: #b6c6ca; }
.pagina-estrecha { max-width: 900px; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.legal h2 { font-size: 1.7rem; margin-top: 1.6em; }
.p404 { position: relative; text-align: left; min-height: 60vh; }
.p404-suelo { display: flex; gap: 8px; margin-bottom: 36px; }
.p404-suelo span { width: 56px; height: 56px; background-size: 100% 100%; }
.p404-suelo span:nth-child(3) { transform: rotate(18deg) translateY(10px); }

/* Aviso de cookies */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 540px; background: var(--blanco); color: var(--tinta); border-top: 4px solid var(--cobre); padding: 20px; box-shadow: 0 12px 40px rgba(0,31,40,.3); font-size: .94rem; }
.cookies p { margin: 0 0 14px; }
.cookies .boton { padding: 10px 20px; }

/* Sin JavaScript: todo visible y estático */
html:not(.js) .persiana, html:not(.js) .pausa, html:not(.js) [data-flechas], html:not(.js) [data-ir-punto], html:not(.js) .tile-fichas { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .persiana { display: none; }
}

@media (max-width: 600px) { .tile-apodo { display: none; } .tile-nombre { font-size: .9rem; } }
.tile { height: 100%; }
.mapa-origen.abajo { transform: translate(-50%, 90%); }
.con-hidraulico .ficha-suelo { display: block; }
.condiciones { margin: 0; border-top: 1px solid var(--linea); }
.condiciones div { display: grid; grid-template-columns: 1fr; gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 640px) { .condiciones div { grid-template-columns: 190px 1fr; } }
.condiciones dt { font-weight: 700; color: var(--tinta); }
.condiciones dd { margin: 0; color: var(--gris); }