/* ===== Inmobiliaria Velasco — contenido bajo la portada cinemática ===== */
:root{
  --carbon:#232323; --carbon-hondo:#141414; --hueso:#F5F3F0; --blanco:#fff;
  --rojo:#CC2229; --gris:#6E6A66; --linea:#DFDBD5; --linea-osc:rgba(255,255,255,.14);
  --tenue:rgba(255,255,255,.64);
  --display:"Boska",Georgia,serif; --texto:"Archivo",system-ui,sans-serif;
  --ancho:1200px; --pad:clamp(20px,5vw,32px);
}
*{box-sizing:border-box}

/* ===== Barra superior (calcada de Elite Tile, con la paleta de Velasco) ===== */
.barra{position:fixed;top:0;left:0;right:0;z-index:70;height:81px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 clamp(18px,4vw,44px);
  background:rgba(23,18,15,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:.8px solid rgba(120,112,104,.42)}
.barra__marca{display:flex;flex-direction:column;gap:3px;text-decoration:none;flex:none}
.barra__marca b{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1;
  letter-spacing:.14em;color:#fff}
.barra__marca span{font-family:var(--texto);font-weight:500;font-size:.48rem;
  letter-spacing:.36em;color:var(--rojo)}
.barra__nav{display:flex;gap:clamp(18px,2.6vw,38px);align-items:center}
.barra__nav a{font-family:var(--texto);font-size:13px;font-weight:500;letter-spacing:.325px;
  text-transform:uppercase;color:#BDB6AE;text-decoration:none;transition:color .25s}
.barra__nav a:hover{color:#fff}
.barra__cta{display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:10px 20px;background:var(--rojo);color:#fff;border-radius:0;
  font-family:var(--texto);font-size:12px;font-weight:500;letter-spacing:.3px;
  text-transform:uppercase;text-decoration:none;transition:background .25s}
.barra__cta:hover{background:#A81A20}
@media (max-width:900px){
  .barra{height:66px}
  .barra__nav{display:none}
  .barra__marca b{font-size:1.2rem}
  .barra__cta{padding:9px 15px;font-size:11px}
}

/* El sitio va POR ENCIMA de las capas fijas del motor (z-index 50 máx) */
#sitio{position:relative;z-index:60;background:var(--hueso)}
#sitio section{width:100%}
.env{max-width:var(--ancho);margin:0 auto;padding:clamp(84px,10vw,124px) var(--pad)}

h2,h3{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08}
h3{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15}
p{margin:0;font-family:var(--texto);font-size:clamp(.98rem,1.3vw,1.06rem);line-height:1.68;color:var(--gris)}
.kicker{font-family:var(--texto);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo);margin:0}
.oscuro h2,.oscuro h3{color:#fff} .oscuro p{color:var(--tenue)}
.dato{font-family:var(--texto);font-weight:500;font-variant-numeric:tabular-nums}

/* Aparición al entrar en pantalla */
.rev{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* --- Proyectos --- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;margin-top:44px}
.ficha{background:#fff;border:1px solid var(--linea);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;cursor:pointer;border-width:1px;font:inherit;text-align:left;padding:0;width:100%;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
/* El nombre nunca hereda el color de enlace del navegador */
.ficha h3,.ficha:visited h3,.ficha:link h3{color:var(--carbon)}
.ficha__ver{margin-top:12px;font-family:var(--texto);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rojo);display:flex;align-items:center;gap:6px}
.ficha:hover{transform:translateY(-5px);box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.ficha img{width:100%;height:210px;object-fit:cover;display:block}
.ficha__c{padding:22px 22px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.estado{font-family:var(--texto);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.ubic{font-family:var(--texto);font-size:.86rem;color:var(--gris);display:flex;gap:6px;align-items:center}
.sep{height:1px;background:var(--linea);margin:4px 0}
.precio{font-family:var(--texto);font-weight:600;font-size:1.28rem;color:var(--carbon);font-variant-numeric:tabular-nums;margin-top:auto}

/* --- River Park: imagen fija + rasgos que pasan --- */
.detalle{background:var(--carbon-hondo);overflow:visible}
.detalle .env{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:start}
.pegajosa{position:sticky;top:96px;height:min(74vh,600px);border-radius:3px;overflow:hidden}
.pegajosa img{width:100%;height:100%;object-fit:cover;display:block}
.rasgos{display:flex;flex-direction:column;gap:clamp(70px,9vw,110px)}
.rasgo{border-top:1px solid var(--linea-osc);padding-top:30px}
.rasgo b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.1rem);line-height:1.04;color:#fff;font-variant-numeric:tabular-nums}
.rasgo .kicker{margin:9px 0 10px}
@media (max-width:820px){.detalle .env{grid-template-columns:1fr}.pegajosa{position:relative;top:0;height:52vh}}

/* --- Trayectoria --- */
.tray{background:var(--carbon)}
.tray__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px)}
.lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:38px;margin-top:66px}
.linea{border-top:1px solid var(--linea-osc);padding-top:26px}
@media (max-width:820px){.tray__top{grid-template-columns:1fr}}

/* --- Abanico --- */
.abanico{background:#131110;overflow:hidden;text-align:center}
.fan{position:relative;height:620px;margin:52px auto 0;width:1100px;max-width:100%}
.fan-card{position:absolute;top:50%;left:50%;border-radius:2px;overflow:hidden;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.78);transform-origin:center center}
.fan-card img{width:100%;height:100%;object-fit:cover;display:block}
.fan-card:nth-child(1){width:290px;height:390px;z-index:8;transform:translate(-50%,-50%) translateX(-320px) rotate(-21deg) scale(.9)}
.fan-card:nth-child(2){width:320px;height:430px;z-index:9;transform:translate(-50%,-50%) translateX(-165px) rotate(-10.5deg) scale(.96)}
.fan-card:nth-child(3){width:350px;height:470px;z-index:10;transform:translate(-50%,-50%) rotate(0) scale(1)}
.fan-card:nth-child(4){width:320px;height:430px;z-index:9;transform:translate(-50%,-50%) translateX(165px) rotate(10.5deg) scale(.96)}
.fan-card:nth-child(5){width:290px;height:390px;z-index:8;transform:translate(-50%,-50%) translateX(320px) rotate(21deg) scale(.9)}
@media (max-width:900px){.fan{height:420px;transform:scale(.62)}}

/* --- Ubicación --- */
.ubi .env{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.info{display:flex;flex-direction:column;gap:15px;margin:26px 0 30px}
.info div{display:flex;gap:12px;align-items:flex-start;font-family:var(--texto);font-size:1rem;line-height:1.55;color:var(--carbon)}
.info svg{flex:none;margin-top:3px}
.mapa{height:430px;border:1px solid var(--linea);border-radius:3px;overflow:hidden}
.mapa iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:820px){.ubi .env{grid-template-columns:1fr}}

/* --- Cierre + pie --- */
.cierre{background:var(--carbon);text-align:center}
.cierre .env{display:flex;flex-direction:column;align-items:center;gap:22px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:17px 32px;border-radius:2px;background:var(--rojo);color:#fff;
  font-family:var(--texto);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:background .3s}
.btn:hover{background:#A81A20}
footer{background:var(--carbon-hondo);color:#fff}
footer .env{padding-top:66px;padding-bottom:34px}
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:52px}
.pie h4{margin:0 0 14px;font-family:var(--texto);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo)}
.pie a,.pie p{color:var(--tenue);font-family:var(--texto);font-size:.92rem;line-height:1.65;text-decoration:none}
.pie a:hover{color:#fff}
.marca{font-family:var(--display);font-weight:500;font-size:1.7rem;letter-spacing:.08em;color:#fff}
.legal{margin-top:34px;padding-top:24px;border-top:1px solid var(--linea-osc);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--texto);font-size:.8rem;color:rgba(255,255,255,.42)}
@media (max-width:760px){.pie{grid-template-columns:1fr;gap:34px}}

/* ===== Detalle del proyecto (ventana) ===== */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal[open],.modal.abierto{display:block}
.modal__fondo{position:absolute;inset:0;background:rgba(12,10,9,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s}
.modal.abierto .modal__fondo{opacity:1}
.modal__caja{position:absolute;inset:clamp(0px,3vh,34px) clamp(0px,4vw,44px);background:var(--hueso);
  border-radius:3px;overflow:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(22px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s}
.modal.abierto .modal__caja{transform:none;opacity:1}
.modal__x{position:sticky;top:0;margin-left:auto;display:block;z-index:3;
  width:46px;height:46px;border:0;background:var(--carbon);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  border-radius:0;transition:background .25s}
.modal__x:hover{background:var(--rojo)}
.modal__env{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px) clamp(48px,7vw,72px)}
.modal__cab{padding-top:6px;margin-bottom:34px}
.modal__cab h2{margin-top:12px;color:var(--carbon)}
.modal__cab .ubic{margin-top:10px;font-size:.98rem}

.galeria{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px;gap:12px;margin-bottom:44px}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}
.galeria img:first-child{grid-row:span 2}
@media (max-width:820px){.galeria{grid-template-columns:1fr 1fr;grid-template-rows:190px 190px 190px}
  .galeria img:first-child{grid-column:span 2;grid-row:span 1}}

.planoBloque{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(26px,4vw,52px);align-items:start;
  background:#fff;border:1px solid var(--linea);border-radius:3px;padding:clamp(20px,3vw,32px)}
.planoBloque img{width:100%;border-radius:2px;display:block}
.leyenda{display:flex;flex-direction:column;gap:13px}
.leyenda li{list-style:none;display:flex;align-items:center;gap:11px;font-family:var(--texto);font-size:.92rem;color:var(--carbon)}
.leyenda ul{margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pastilla{width:15px;height:15px;border-radius:3px;flex:none;border:1px solid rgba(0,0,0,.09)}
.fichaDatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:38px 0 30px}
.fichaDatos div{border-top:1px solid var(--linea);padding-top:15px}
.fichaDatos b{display:block;font-family:var(--display);font-weight:500;font-size:1.75rem;line-height:1.1;color:var(--carbon);font-variant-numeric:tabular-nums}
.fichaDatos span{font-family:var(--texto);font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}
.aviso{font-family:var(--texto);font-size:.82rem;line-height:1.6;color:var(--gris);background:#fff;
  border-left:2px solid var(--rojo);padding:14px 18px;margin-top:26px}
@media (max-width:820px){.planoBloque{grid-template-columns:1fr}}

/* ===== Abanico: al pasar el cursor la tarjeta salta, se endereza y se aparta ===== */
.fan-card{cursor:pointer;
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1)}
.fan-card:hover{z-index:20;box-shadow:0 42px 84px -22px rgba(0,0,0,.85)}
.fan-card:nth-child(1):hover{transform:translate(-50%,-50%) translateX(-372px) translateY(-32px) rotate(-7deg) scale(1.00)}
.fan-card:nth-child(2):hover{transform:translate(-50%,-50%) translateX(-200px) translateY(-32px) rotate(-3.5deg) scale(1.05)}
.fan-card:nth-child(3):hover{transform:translate(-50%,-50%) translateY(-32px) rotate(0deg) scale(1.07)}
.fan-card:nth-child(4):hover{transform:translate(-50%,-50%) translateX(200px) translateY(-32px) rotate(3.5deg) scale(1.05)}
.fan-card:nth-child(5):hover{transform:translate(-50%,-50%) translateX(372px) translateY(-32px) rotate(7deg) scale(1.00)}
@media (prefers-reduced-motion:reduce){.fan-card{transition:none}}
@media (hover:none){.fan-card:hover{transform:none}}

/* ===== Ajustes de pantalla pequeña ===== */
/* En tablet SÍ cabe el menú: solo se oculta en celular */
@media (min-width:740px) and (max-width:900px){
  .barra{height:74px}
  .barra__nav{display:flex;gap:20px}
  .barra__nav a{font-size:12px}
  .barra__cta{padding:9px 16px;font-size:11px}
}
@media (max-width:739px){ .barra__nav{display:none} }

/* Celular: abanico de 3 tarjetas, todas visibles dentro de la pantalla */
@media (max-width:820px){
  .fan{height:400px;transform:scale(.80);margin-top:34px}
  .fan-card:nth-child(1),.fan-card:nth-child(5){display:none}
  .fan-card:nth-child(2){transform:translate(-50%,-50%) translateX(-72px) rotate(-8deg) scale(.80)}
  .fan-card:nth-child(3){transform:translate(-50%,-50%) rotate(0deg) scale(.97)}
  .fan-card:nth-child(4){transform:translate(-50%,-50%) translateX(72px) rotate(8deg) scale(.80)}
  /* Sin hover en táctil: el abanico se queda quieto */
  .fan-card:nth-child(2):hover,.fan-card:nth-child(3):hover,.fan-card:nth-child(4):hover{
    transform:translate(-50%,-50%) translateX(var(--x,0)) rotate(var(--r,0deg)) scale(var(--s,1))}
  .fan-card:nth-child(2):hover{--x:-72px;--r:-8deg;--s:.80}
  .fan-card:nth-child(3):hover{--x:0px;--r:0deg;--s:.95}
  .fan-card:nth-child(4):hover{--x:72px;--r:8deg;--s:.80}
  /* Galería del detalle en una columna, más cómoda al tacto */
  .galeria{grid-template-columns:1fr;grid-template-rows:repeat(5,210px)}
  .galeria img:first-child{grid-column:span 1;grid-row:span 1}
  .modal__caja{inset:0;border-radius:0}
  .fichaDatos{grid-template-columns:1fr 1fr}
}