/* =========================================================
   Cañadas del Sur · Opción 3 · Páginas de prototipo
   Se carga después de somerstone.css
   ========================================================= */

/* ---------- Portada con video ---------- */
.ph picture{position:absolute;inset:0}
.ph__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__video{opacity:0;transition:opacity 1.2s ease}
.ph__video.is-ready{opacity:1}
.ph .hero__text{width:min(720px,calc(100% - 2*var(--pad)));gap:26px}
.ph__title{font-size:clamp(56px,8.4vw,124px);line-height:.9;letter-spacing:-.045em}
.ph .hero__body{max-width:520px}
.ph__back{opacity:.85}
.ph__back .arr--back{width:14px;height:14px}
.ph__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ph__card{padding:22px 22px 18px;width:310px}
.ph__card-t{margin-bottom:14px;color:var(--oro-claro)}
.ph__rows{display:flex;flex-direction:column}
.ph__rows .row{padding:11px 0;border-top:1px solid rgba(220,196,142,.18)}
.ph__rows .badge-t.c-40{color:var(--niebla)}
.ph__rows .badge-t.c-w{color:var(--blanco);font-size:14px}
.ph__pause{position:absolute;right:var(--pad);top:104px;z-index:6;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--blanco);background:rgba(251,251,248,.1);border:1px solid rgba(220,196,142,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,color .3s}
.ph__pause:hover{background:var(--oro);color:var(--bosque);border-color:var(--oro)}
.ph__pause svg{width:13px;height:13px}
.ph__pause .i-play{display:none}
.ph__pause.is-paused .i-play{display:block}
.ph__pause.is-paused .i-pause{display:none}

/* ---------- Galería ---------- */
.pgal{padding:128px var(--pad) 72px;display:flex;flex-direction:column;align-items:center;gap:48px}
.pgal .process__intro{max-width:1376px}
.pgal__note{max-width:400px}
.ptabs{position:relative;display:inline-flex;gap:4px;padding:6px;border-radius:999px;background:rgba(236,238,231,.9);border:1px solid #DCE1D8;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptab{position:relative;z-index:1;padding:12px 20px;border-radius:999px;font-size:12.8px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--bosque-3);white-space:nowrap;transition:color .4s}
.ptab sup{font-size:10px;margin-left:4px;color:var(--oro);transition:color .4s}
.ptab:hover{color:var(--bosque)}
.ptab.is-on{color:var(--blanco)}
.ptab.is-on sup{color:var(--oro-claro)}
.ptabs__ind{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;background:var(--bosque-3);box-shadow:0 8px 18px -10px rgba(11,31,22,.6);z-index:0}
.ptabs.is-ready .ptabs__ind{transition:transform .55s var(--ease),width .55s var(--ease)}
.no-ind .ptab.is-on{background:var(--bosque-3)}

.pgrid{width:100%;max-width:1376px;columns:2;column-gap:24px}
.pitem{position:relative;display:block;break-inside:avoid;margin:0 0 24px;border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--piedra);box-shadow:0 24px 48px -36px rgba(11,31,22,.45)}
.pitem[hidden]{display:none}
.pitem img{width:100%;height:auto;transform:scale(1.1);transition:transform 1.2s var(--ease)}
.pitem:hover img{transform:scale(1.15)}
.pitem--plan{background:var(--blanco);border:1px solid #DCE1D8}
.pitem--plan img{transform:none!important;padding:18px}
.pitem__cap{position:absolute;left:16px;bottom:16px;z-index:1;padding:9px 14px;border-radius:999px;background:rgba(251,251,248,.92);color:var(--bosque-3);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pitem__plus{position:absolute;right:16px;top:16px;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--oro);color:var(--bosque);transform:scale(.85);opacity:.92;transition:transform .45s var(--ease),opacity .3s}
.pitem__plus svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pitem:hover .pitem__plus{transform:scale(1) rotate(90deg);opacity:1}
.pgal__legal{font-size:12px;color:#7C8F81}

/* ---------- Ficha técnica ---------- */
.pficha{background:rgba(236,238,231,.72);padding:128px max(var(--pad),calc((100% - 1376px)/2));display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.pficha__plan{position:sticky;top:110px;display:block;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;background:var(--blanco);border:1px solid #DCE1D8;padding:24px;box-shadow:0 30px 60px -40px rgba(11,31,22,.4)}
.pficha__plan img{width:100%;height:auto;transform:none!important}
.pficha__zoom{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--bosque-3);color:var(--blanco);font-size:12px;font-weight:700;text-transform:uppercase;line-height:1;transition:background .3s,color .3s}
.pficha__zoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pficha__plan:hover .pficha__zoom{background:var(--oro);color:var(--bosque)}
.pficha__txt{display:flex;flex-direction:column;gap:28px}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pstat{padding:22px 0 20px;display:flex;flex-direction:column;gap:12px}
.pstat+.pstat{padding-left:18px;border-left:1px solid var(--line)}
.pstat__n{font-size:clamp(32px,3.2vw,46px);font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--bosque-3)}
.pstat__n small{font-size:.45em;margin-left:3px;color:var(--oro);letter-spacing:0}
.pprog{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pprog__col{background:rgba(251,251,248,.9);border:1px solid #DCE1D8;border-radius:var(--r);padding:22px 22px 18px}
.pprog__col .badge-t{margin-bottom:14px}
.pprog ol{margin:0;padding-left:1.5em;display:grid;gap:6px;color:var(--verde-txt);font-size:15px}
.pprog li::marker{color:var(--oro);font-weight:700;font-size:.85em}
.pficha__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Otros prototipos ---------- */
.pothers{margin-top:12px}
.is-proto .page{padding-bottom:12px}
.pothers__intro{max-width:1376px;position:relative;z-index:1}
.pothers__grid{position:relative;z-index:1;width:100%;max-width:1376px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pother{flex:auto}
.pother .prop__img{height:240px}
.pother__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pother__go{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid rgba(28,66,48,.25);color:var(--bosque-3);transition:background .35s,color .35s,border-color .35s}
.pother__go .arr{width:13px;height:13px}
.pother:hover .pother__go{background:var(--oro);border-color:var(--oro);color:var(--bosque)}
.pother__data{display:flex;flex-direction:column;gap:9px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pothers__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pficha{grid-template-columns:1fr;padding:96px var(--pad);gap:40px}
  .pficha__plan{position:relative;top:0}
  .pgal{padding:96px var(--pad) 56px}
}
@media (max-width:640px){
  .ph .hero__text{bottom:40px;gap:20px}
  .ph__card{display:none}
  .ph__pause{top:84px}
  .pgrid{columns:1}
  .pitem{margin-bottom:16px}
  .pstats{grid-template-columns:repeat(2,1fr)}
  .pstat:nth-child(3){padding-left:0;border-left:0}
  .pstat:nth-child(n+3){border-top:1px solid var(--line)}
  .pprog{grid-template-columns:1fr}
  .pothers__grid{grid-template-columns:1fr}
  .ptab{padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){
  .ph__video{display:none}
}

/* ---------- Ajustes de color ---------- */
.hero .badge span{color:var(--blanco)}
.ph__rows .badge-t.c-w{text-transform:none}
.pothers .prop .c-w{color:var(--bosque-3)}
.pothers .prop .c-40{color:#6E8274}

/* ---------- Galería: aparición sin retraso ---------- */
.pitem img{opacity:0;transition:opacity .8s ease,transform 1.2s var(--ease)}
.pitem.is-loaded img{opacity:1}
.pitem.is-loaded:not(:hover) img{transform:scale(1)}
.pitem--plan img{opacity:1}

/* ---------- Galería en dos columnas (sin columnas CSS: evita fallo de Safari) ---------- */
.pgrid.is-masonry{columns:auto;display:flex;align-items:flex-start;gap:24px}
.pgrid.is-masonry .pcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px}
.pgrid.is-masonry .pitem{margin:0}
@media (max-width:640px){
  .pgrid.is-masonry{gap:16px}
  .pgrid.is-masonry .pcol{gap:16px}
}

/* ---------- Portada: tono verde más ligero ---------- */
.ph .hero__video{filter:saturate(.95) brightness(.94) contrast(1.03)}
.ph .hero__ov1{opacity:.1}
.ph .hero__grad-top{background:linear-gradient(to bottom,rgba(11,31,22,.42) 0%,rgba(11,31,22,.18) 22%,rgba(11,31,22,0) 40%)}
.ph .hero__grad-bot{background:linear-gradient(to top,rgba(11,31,22,.72) 0%,rgba(11,31,22,.45) 28%,rgba(11,31,22,.15) 55%,rgba(11,31,22,0) 78%)}